my new process is gonna make almost all of this guide obsolete
rustynova[m]
Personally I use Tauon, but less and less. I actually use Listenbrainz when on pc. Or youtube on my work pc.
I struggle more and more to use conventional music players just because shuffle is often not what I want. It brings way too many tracks I listen to only sometimes, and not enough of my blorbos.
Still using black player for mobile, but thinking about switching to a subsonic server soon
elkiensad[m]
<BlastboomStrice[> "I had a very convoluted way of..." <- I just use beets
BlastboomStrice[
hm seems cool
in the future I'd like to have a jellyfin server with music and autodownload the music
cuz currently my process is either very somewhat slow or non-functional
should note that sizing iframes is a difficult problem - it would be nice if you could have at least a specific height (and probably a minimum width)
there's a reason most embeds end up using javascript code rather than just an iframe :(
making the card in the embed flexible width instead of having a fixed max width - or at least centering it - would be nice.
there's no good way to have a relative unit which is shared between the outside page and the iframe, so you will probably need to specify the iframe height in pixels :(
monkey[m]
kepstin: Thanks for the insights! When you say specific height and min-width, do you mean for the iframe itself or its contents (the html card within)?
kepstinbrainz
both - you need to specify them on the frame, then the content has to make sure it fits
(width="100%" on the iframe is probably fine as long as the contents of the frame are adaptive to width, but a fixed height is pretty important for embedding in a page)
monkey[m]
Couldn't the content just us width 100% in that case, meaning all the sizing isdone on the iframe, and the contents just adapt to it?
Fixed height I didn;t think about at all
kepstinbrainz
height of iframes does not adapt to content unless you have javascript code which does that adaptation
monkey[m]
Makes sense, thanks!
kepstinbrainz
specifically, js code running *outside* of the frame
monkey[m]
It's going to be tricky for the pin card, because there can be text content of variable length (including no text content) so the card will have to adapt the the size
kepstinbrainz
yeah, there's no way around that - you're going to have to have scrolling *within* the embed.
monkey[m]
Eek.
kepstinbrainz
ideally make just the field with the variable length text content scroll
and the rest of the layout be fixed height
monkey[m]
Or a set default height that will work for most sizes, plus some scrolling for very long text I suppose
OK, that seems reasonable
kepstinbrainz
for that case, you might want to make the content of the iframe fill all available height, so someone with a long pinned message could embed an iframe with larger height to show more of the message
monkey[m] nods
i should also note that I've seen some cases where the "now listening" card height changes due to text wrapping. you'll want to make sure that text is truncated rather than wrapping in order to maintain fixed height
(this happens on the listenbrainz main site too, and iirc it causes issues with some of the animations there)
it also causes weirdness with cover art cropping
like here, the wrap made the tile taller, which made the image taller, which made the left and right sides of the image get cropped
kepstinbrainz uploaded an image: (91KiB) < https://matrix.chatbrainz.org/_matrix/media/v3/download/kepstin.ca/gLqWiLobNYECoEYTpUluVJNg/Screenshot%202025-04-14%20at%2012-10-16%20Your%20Listens%20-%20ListenBrainz%20-%20listenbrainz.org_.png >
monkey[m]
Yeah, more or less on purpose for the website (to keep a consistent look between cards, i.e. same-width cover art) but not necessary for the iframe card (and needs to be a set height as you mentioned)
kepstinbrainz
imo, cover art should never be cropped. that's one of my biggest annoyances with the current design
poor lain lost her head here :(
kepstinbrainz uploaded an image: (56KiB) < https://matrix.chatbrainz.org/_matrix/media/v3/download/kepstin.ca/lsYhCXCfrMmKtTUOaXvCgQny/Screenshot%202025-04-14%20at%2010-30-04%20Your%20Listens%20-%20ListenBrainz%20-%20listenbrainz.org_.png >
that's an image with 1:2 width to height ratio, common for cd singles in japan in the 90s.
monkey[m]
Mmm, sensible, although we took the decision to prioritize text over cover art cropping, I suppose not everyone will agree on the importance of one over the other...
kepstinbrainz
the text wrapping also makes the design look kinda inconsistent, since some rows are taller than other rows
if you're gonna allow wrapping to 2 lines, for example, then it would be best to always reserve space for 2 lines.
monkey[m]
You would prefer this?
monkey[m] uploaded an image: (73KiB) < https://matrix.chatbrainz.org/_matrix/media/v3/download/chatbrainz.org/HHNYeyGbSCCEbdJxppYvzbDt/image.png >
kepstinbrainz
honestly yes i would prefer that; if desired, doing a square "fill" behind the image to make the visuals more cohesive could be done as well.
monkey[m]
kepstinbrainz: I don't think I agree, design-wise, but I definitely see your point
kepstinbrainz
(hmm, i need to file an issue against music assistant's listenbrainz plugin - i'm sometimes getting duplicate listens)
some sort of timing bug causes them to sometimes send a listen at the start of the track as well as the end.
regarding the two lines thing - for example one thing that could be done is keeping the tile the same height but with reduced top/bottom padding when the title wraps.
should be possible to do that by playing around with flex box alignment
monkey[m]
Not sure that's possible with CSS I'm afraid.
However I do agree for the embedded widget, making the card a fixed height that will accommodate 2 lines for the track title sounds good
kepstinbrainz
oh, it's definitely possible with css; you'd do it not by adjusting padding but rather by having the title/artist part be a flex item that's vertically aligned to the middle.
monkey[m]
Ah, I see what you mean now.
kepstinbrainz
(i.e. have the container have either 0 or some minimum amount of vertical padding, set a min-height on it, then vertically align the contents using flex stuff rather than relying on padding)
monkey[m]
That is already how that flex element is set up, but it does not have a fixed height currently
monkey[m] uploaded an image: (11KiB) < https://matrix.chatbrainz.org/_matrix/media/v3/download/chatbrainz.org/iOnKEenfrhSzfHGgDdnBLwBP/image.png >
kepstinbrainz
requires changing some of the negative margins to get the cover-art re-aligned, but looks ok to me.
kepstinbrainz uploaded an image: (198KiB) < https://matrix.chatbrainz.org/_matrix/media/v3/download/kepstin.ca/ucZOxyPgMUIlujwXuHTnNezH/Screenshot%202025-04-14%20at%2012-27-53%20Your%20Listens%20-%20ListenBrainz%20-%20listenbrainz.org_.png >
monkey[m]
With a min-height on that element, it does work nicely
kepstinbrainz uploaded an image: (195KiB) < https://matrix.chatbrainz.org/_matrix/media/v3/download/kepstin.ca/ATNpPOrGhtzZAAnUsgOBDguv/Screenshot%202025-04-14%20at%2012-30-49%20Your%20Listens%20-%20ListenBrainz%20-%20listenbrainz.org_.png >
kepstinbrainz
or same thing without the overlay. i was guessing a bit at the min-height so the cover art didn't end up exactly square, but it's close.
monkey[m]
I went for 3 times the line-height value for the element, which translates to exactly 3 lines (so as you suggested making space for wrapped text)
monkey[m] uploaded an image: (58KiB) < https://matrix.chatbrainz.org/_matrix/media/v3/download/chatbrainz.org/NdXgczHkLPpbBWYdXmhUQQUi/image.png >
monkey[m] uploaded an image: (59KiB) < https://matrix.chatbrainz.org/_matrix/media/v3/download/chatbrainz.org/JQWAUsWSZVReWIMuqHjMhauT/image.png >
kepstinbrainz
in my example, i set the min height such that the tiles with 2 lines have the same height and visual padding as before.
then the ones with 3 lines remain the same height, just with less visual padding
the value i guessed at ended up being slightly more than 3× line height
note that i set the min height on `.listen-card .main-content`
and reduced the padding on `.listen-card` to 0 (but some non-zero value might make sense to handle unusual conditions - in which case min-height should be set to 3×line-height + padding)
monkey[m]
I see, like so more or less:
monkey[m] uploaded an image: (68KiB) < https://matrix.chatbrainz.org/_matrix/media/v3/download/chatbrainz.org/pYmhRoxhjesxjdVyLXyaKbCl/image.png >
(did not set very specific height here, just testing the layout)
kepstinbrainz
yeah, that looks like what i did
monkey[m]
Thanks, I think this could be useful not only for this embedded card but for the website version as well.
I'll need to try it out, but I like the idea, and we should end up with more stable layouts
kepstinbrainz
yeah, i think it would be a nice minor consistency improvement for website design
it would fix the right column on the user page moving up/down when the song changes, for example :)
monkey[m]
Yep
kepstinbrainz
(although not when someone start/stops listening - maybe a placeholder "not currently listening to anything" block should be shown?)
