I’ve never been into iTunes or Spotify, tuning into online radio-stations instead to satisfy my constant need for musical discovery, excitement and/ or entertainment. For a long time I was an avid KCRW listener, but times change and their eclecticism does not necessarily match mine the way it used to, so over the last couple of years many online streams (Worldwide FM, Nova, TSF Jazz, KCSN, Laurent Garnier’s PBB, …) were added to my favorites which I stored in a draft mail in Gmail of all places, accessing that file on my different devices and -where available- using VLC to play them.
But VLC isn’t available everywhere (hello “smart” TV), it is not great to manage a collections of streams and copy/pasting URL’s from that draft mail is clumsy, so after creating a simple webpage with an HTML5 audio element for my wife to listen to the local “Radio 1 classics” stream on our TV, I decided to extend that to display a list of streams to choose from with a minimum of vanilla JavaScript to do the actual switching and just a dash of CSS (still struggling with vertically aligning multiline titles in those inline-blocks, but I don’t mind that too much. No really, I’m not nervous about that whenever I see it, not at all!).
The result (at https://futtta.be/r/) is an unattractive but pretty usable mp3 stream player that I use on 4 different locations and which I can update easily to accommodate my wife’s knack for doo-wap and xmas-music. Maybe I should add falling snow-flakes to surprise her when we put up the Christmas tree? 🙂
With CSS flex you can make it work
https://imagebin.ca/v/5eGm6USF0BY5
ul#list {
display: flex;
flex-wrap: wrap;
}
Get rid of ul#list li::after
ul#list li {
display: flex;
align-items: center;
justify-content: center;
}
Thanks Nathan, works beautifully on FF/ Chrome, to be seen how the browser on the Samsung TV handles flexboxes though 😉
Update; nope, no flexboxes on my “Smart” TV .. back to the ugly approach.
Weird as the samsung browser should be based on chromium which should have flex support for ages…
Another option is using this example https://www.w3schools.com/css/tryit.asp?filename=trycss_align_transform
your li would be the ,center element and you need to add a new wrapper child for the text (either p, or a div)
it uses the transform CSS element, but according to caniuse.com it should be supported
I should check the useragent for the samsung browser, maybe that will reveal some interesting info .. Will have a look at CSS transform too, one of these days 🙂
so that useragent:
Mozilla/5.0 (SMART-TV; Linux; Tizen 2.4.0) AppleWebkit/538.1 (KHTML, like Gecko) SamsungBrowser/1.1 TV Safari/538.1Okay tizen 2.4 and webkit 538 are quite old 🙂 That would explain it.
Actually my original trick MIGHT work if you actually CSS prefix it with `-webkit-` (looking at the webkit version I think it corresponds with safari 7ish which still needed the prefix.
ul#list {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
Get rid of ul#list li::after
ul#list li {
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
I guess no newer version of the software are available for the device?
PS: Can you tell how annoyed I was by the screenshot I keep trying to fix a problem I never will have 🙂
arggggg, CSS prefixes .. let me give that a try
re. the screenshot: was hoping that would bother someone enough to bother 😉
OK, works except for the
(-webkit-)align-items, but I can live with that 😉