media-chrome Add media playlist example

Updated media-playlist based on the playlist discussion. Adding an example to media-chrome.

Jun 12 '22 22:06 heff

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
media-chrome	✅ Ready (Inspect)	Visit Preview	Jun 12, 2022 at 11:48PM (UTC)

Jun 12 '22 22:06 vercel[bot]

bug? on my end the first clip that is played doesn't update media chrome state like playing and progress

SCR-20220613-d4t

Jun 13 '22 14:06 luwes

ideally media-playlist-item's should also support <source> and <track> elements but could be supported later.

Jun 13 '22 14:06 luwes

on my end the first clip that is played doesn't update media chrome state

Interesting. Can I see your test? It's working for me at least. I did have issues with <youtube-video>, but I wasn't sure if that was a media-playlist issue or related to the youtube player load timing.

ideally media-playlist-item's should also support and elements but could be supported later.

They do!

Jun 13 '22 22:06 heff

sweet! sorry, didn't check the code source.

Mac / Chrome 102 https://media-chrome-git-media-playlist-example-mux.vercel.app/examples/media-elements/media-playlist.html https://stream.new/v/Y576wlRA3xRgjz63Lpr00isKn16OKdBWuHicD4fTrdFg

Jun 14 '22 00:06 luwes

Yeah, confirmed, that's not working for me either. Must be a custom element loading issue. I'll dig into when I get a minute.

Separate note, @mmcc questioned why we don't just pull this into media-chrome. While it's a "media element" that can be used independently of media-chrome, I can see the argument. Interested in other opinions.

Jun 14 '22 16:06 heff

I'm more leaning to keeping the media elements (source) out of the Media Chrome repo. Examples in, for sure.

media-playlist is not really a video engine either, more like a source / media selector responsive-source would also fall in this category

Since it's not UI my s1 is to not include it but I'm not 100% sure what the extras can include.

If it's for reducing friction w/ releasing etc, there's still some things we could do for the standalone pkgs like auto releasing on PR merges etc.

Jun 14 '22 19:06 luwes

I think my concern is mostly around discoverability. I definitely don't think we should be merging muxinc/elements in here, to be clear, (I don't think that's what @heff was saying either, to be fair). I'm just feeling like it'd be nice to consolidate as much as we can just so someone can find all the cool stuff when they're digging through these docs.

For me there's a line with this project where, for it to be really useful long term, it does have UI elements associated with it. If we add those, do they go in that project? Or here? Thinking, for example, about previous/next type buttons, or a "what's next" type element.

Jun 14 '22 20:06 mmcc

If we add those, do they go in that project? Or here?

Here (media-chrome), because media-playlist won't be the only media element with playlist functionality. e.g. Youtube with player.nextVideo(). That makes it a media-ui-extensions detail to solve, but otherwise we've been pretty clear and consistent with the line between "chrome" and "media". While I feel like this is a special or supportive media element, it also feels like a slippery slope introducing media elements into media chrome. But the discoverability of the whole ecosystem, including other media elements, is something that's important to solve well.

Jun 14 '22 23:06 heff

Must be a custom element loading issue. I'll dig into when I get a minute.

Confirmed, the load order of media-playlist vs media-chrome scripts matters for some reason. Not clear why yet. If media playlist is loaded before media chrome, the problem happens. That feels backwards from what I'd expect.

Jun 15 '22 01:06 heff

could it be before this line document.createElement(playlistItem.getAttribute('type')); if it's a custom element we need to wait until it's defined? customElements.whenDefined()

or possibly upgrade it right after so the attributeCallback will be triggered when setting the attributes
https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/upgrade

also make sure you attach the events before setting the attributes, though less important, loadstart will be delayed by a tick when setting the src.

Jun 15 '22 16:06 luwes

I confirmed this is caused by https://github.com/muxinc/hls-video-element if you add in my fork <script type="module" src="https://unpkg.com/@luwes/hls-video-element@0"></script> it works

maybe temporarily use just plain video and audio tags to get this example in?

(https://github.com/muxinc/media-playlist has a small bug where media.muted doesn't seem to work)

Jul 26 '22 15:07 luwes