And now Iβm deep in doing this and having a blast designing an UI for it. No idea how to distribute it but π€·ββοΈ
RT @Eramdam@twitter.com
I am *this* close to start considering building a web-based mpd client. I probably shouldn't but that rarely stopped me in the past...
π¦π: https://twitter.com/Eramdam/status/1191158845751431168
So, I'm at a point where:
- I can list all my MPD database in one go
- I can list tracks from albums and play them directly
- I had a little bit of fun with the UI
Now I need/want:
- figure out a "now playing" thing at the top
- find how to virtualize the list of covers (urgh)
The last point is critical because right now, with ~1200 albums, the whole UI basically dies during the first 6s because, as it turns out, rendering 1200 items and loading ~100MB of images isn't really a thing browsers like to do.
"But Damien! That's easy to do, right?"
Well, maybe, but I'm lazy and I quite enjoyed the fact that I could rely on CSS grid to lay my elements automatically and having one CSS variable to control the size of the covers.
Like, this was impossible to imagine a few years ago!
The worst is that this would "only" save a few laggy seconds at boot time. So I might ignore that for a while and figure this out later, or just make a fancy loading thing that renders the UI in the background to avoid jank π€·
@pixel Iβll try that π€
@pixel so I tried that and:
- having 1k+ observers kills everything (duh)
- reusing the same observer when the targets and the root arenβt in the same react component is another can of worms x_x
@Eramdam lazy-load images for the first "scroll-through" to save resources on initial load and use an Intersection Observer to only render actual content in/around the viewport and replace the rest with size-holding placeholders!