my new process is gonna make almost all of this guide obsolete
2025-04-14 10447, 2025
rustynova[m]
Personally I use Tauon, but less and less. I actually use Listenbrainz when on pc. Or youtube on my work pc.
2025-04-14 10447, 2025
rustynova[m]
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.
2025-04-14 10447, 2025
rustynova[m]
Still using black player for mobile, but thinking about switching to a subsonic server soon
2025-04-14 10457, 2025
elkiensad[m]
<BlastboomStrice[> "I had a very convoluted way of..." <- I just use beets
2025-04-14 10420, 2025
BlastboomStrice[
hm seems cool
2025-04-14 10416, 2025
BlastboomStrice[
in the future I'd like to have a jellyfin server with music and autodownload the music
2025-04-14 10457, 2025
BlastboomStrice[
cuz currently my process is either very somewhat slow or non-functional
2025-04-14 10402, 2025
BlastboomStrice[
and very manual
2025-04-14 10405, 2025
monkey[m]
Is anyone here pining for widgets to embed on their website?... (full message at <https://matrix.chatbrainz.org/_matrix/media/v3/download/chatbrainz.org/SQjkibGUQRFptCvvnuSdoxvL>)
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)
2025-04-14 10435, 2025
kepstinbrainz
there's a reason most embeds end up using javascript code rather than just an iframe :(
2025-04-14 10453, 2025
kepstinbrainz
making the card in the embed flexible width instead of having a fixed max width - or at least centering it - would be nice.
2025-04-14 10434, 2025
kepstinbrainz
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 :(
2025-04-14 10417, 2025
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)?
2025-04-14 10441, 2025
kepstinbrainz
both - you need to specify them on the frame, then the content has to make sure it fits
2025-04-14 10418, 2025
kepstinbrainz
(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)
2025-04-14 10421, 2025
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?
2025-04-14 10444, 2025
monkey[m]
Fixed height I didn;t think about at all
2025-04-14 10450, 2025
kepstinbrainz
height of iframes does not adapt to content unless you have javascript code which does that adaptation
2025-04-14 10408, 2025
monkey[m]
Makes sense, thanks!
2025-04-14 10422, 2025
kepstinbrainz
specifically, js code running *outside* of the frame
2025-04-14 10449, 2025
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
2025-04-14 10415, 2025
kepstinbrainz
yeah, there's no way around that - you're going to have to have scrolling *within* the embed.
2025-04-14 10422, 2025
monkey[m]
Eek.
2025-04-14 10437, 2025
kepstinbrainz
ideally make just the field with the variable length text content scroll
2025-04-14 10444, 2025
kepstinbrainz
and the rest of the layout be fixed height
2025-04-14 10449, 2025
monkey[m]
Or a set default height that will work for most sizes, plus some scrolling for very long text I suppose
2025-04-14 10407, 2025
monkey[m]
OK, that seems reasonable
2025-04-14 10406, 2025
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
2025-04-14 10434, 2025
monkey[m] nods
2025-04-14 10404, 2025
kepstinbrainz
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
2025-04-14 10427, 2025
kepstinbrainz
(this happens on the listenbrainz main site too, and iirc it causes issues with some of the animations there)
2025-04-14 10451, 2025
kepstinbrainz
it also causes weirdness with cover art cropping
2025-04-14 10454, 2025
kepstinbrainz
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
2025-04-14 10454, 2025
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 >
2025-04-14 10416, 2025
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)
2025-04-14 10443, 2025
kepstinbrainz
imo, cover art should never be cropped. that's one of my biggest annoyances with the current design
2025-04-14 10407, 2025
kepstinbrainz
poor lain lost her head here :(
2025-04-14 10408, 2025
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 >
2025-04-14 10412, 2025
kepstinbrainz
that's an image with 1:2 width to height ratio, common for cd singles in japan in the 90s.
2025-04-14 10429, 2025
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...
2025-04-14 10403, 2025
kepstinbrainz
the text wrapping also makes the design look kinda inconsistent, since some rows are taller than other rows
2025-04-14 10427, 2025
kepstinbrainz
if you're gonna allow wrapping to 2 lines, for example, then it would be best to always reserve space for 2 lines.
2025-04-14 10439, 2025
monkey[m]
You would prefer this?
2025-04-14 10440, 2025
monkey[m] uploaded an image: (73KiB) < https://matrix.chatbrainz.org/_matrix/media/v3/download/chatbrainz.org/HHNYeyGbSCCEbdJxppYvzbDt/image.png >
2025-04-14 10433, 2025
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.
2025-04-14 10444, 2025
monkey[m]
kepstinbrainz: I don't think I agree, design-wise, but I definitely see your point
2025-04-14 10441, 2025
kepstinbrainz
(hmm, i need to file an issue against music assistant's listenbrainz plugin - i'm sometimes getting duplicate listens)
2025-04-14 10407, 2025
kepstinbrainz
some sort of timing bug causes them to sometimes send a listen at the start of the track as well as the end.
2025-04-14 10418, 2025
kepstinbrainz
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.
2025-04-14 10443, 2025
kepstinbrainz
should be possible to do that by playing around with flex box alignment
2025-04-14 10423, 2025
monkey[m]
Not sure that's possible with CSS I'm afraid.
2025-04-14 10423, 2025
monkey[m]
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
2025-04-14 10416, 2025
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.
2025-04-14 10431, 2025
monkey[m]
Ah, I see what you mean now.
2025-04-14 10403, 2025
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)
2025-04-14 10404, 2025
monkey[m]
That is already how that flex element is set up, but it does not have a fixed height currently
2025-04-14 10427, 2025
monkey[m] uploaded an image: (11KiB) < https://matrix.chatbrainz.org/_matrix/media/v3/download/chatbrainz.org/iOnKEenfrhSzfHGgDdnBLwBP/image.png >
2025-04-14 10430, 2025
kepstinbrainz
requires changing some of the negative margins to get the cover-art re-aligned, but looks ok to me.
2025-04-14 10431, 2025
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 >
2025-04-14 10433, 2025
monkey[m]
With a min-height on that element, it does work nicely
2025-04-14 10427, 2025
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 >
2025-04-14 10429, 2025
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.
2025-04-14 10449, 2025
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)
2025-04-14 10430, 2025
monkey[m] uploaded an image: (58KiB) < https://matrix.chatbrainz.org/_matrix/media/v3/download/chatbrainz.org/NdXgczHkLPpbBWYdXmhUQQUi/image.png >
2025-04-14 10431, 2025
monkey[m] uploaded an image: (59KiB) < https://matrix.chatbrainz.org/_matrix/media/v3/download/chatbrainz.org/JQWAUsWSZVReWIMuqHjMhauT/image.png >
2025-04-14 10406, 2025
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.
2025-04-14 10419, 2025
kepstinbrainz
then the ones with 3 lines remain the same height, just with less visual padding
2025-04-14 10430, 2025
kepstinbrainz
the value i guessed at ended up being slightly more than 3× line height
2025-04-14 10413, 2025
kepstinbrainz
note that i set the min height on `.listen-card .main-content`
2025-04-14 10423, 2025
kepstinbrainz
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)
2025-04-14 10407, 2025
monkey[m]
I see, like so more or less:
2025-04-14 10409, 2025
monkey[m] uploaded an image: (68KiB) < https://matrix.chatbrainz.org/_matrix/media/v3/download/chatbrainz.org/pYmhRoxhjesxjdVyLXyaKbCl/image.png >
2025-04-14 10427, 2025
monkey[m]
(did not set very specific height here, just testing the layout)
2025-04-14 10446, 2025
kepstinbrainz
yeah, that looks like what i did
2025-04-14 10403, 2025
monkey[m]
Thanks, I think this could be useful not only for this embedded card but for the website version as well.
2025-04-14 10403, 2025
monkey[m]
I'll need to try it out, but I like the idea, and we should end up with more stable layouts
2025-04-14 10436, 2025
kepstinbrainz
yeah, i think it would be a nice minor consistency improvement for website design
2025-04-14 10402, 2025
kepstinbrainz
it would fix the right column on the user page moving up/down when the song changes, for example :)
2025-04-14 10432, 2025
monkey[m]
Yep
2025-04-14 10413, 2025
kepstinbrainz
(although not when someone start/stops listening - maybe a placeholder "not currently listening to anything" block should be shown?)
