Skip to content

Commit

Permalink
fix(custom-media-element): fix track/source sync
Browse files Browse the repository at this point in the history
  • Loading branch information
luwes committed May 24, 2024
1 parent 8926b96 commit 8da2a4a
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 2 deletions.
9 changes: 8 additions & 1 deletion examples/nextjs/app/hls-video/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,14 @@ export default function Page() {
crossOrigin=""
playsInline
suppressHydrationWarning
></Player>
>
<track
label="thumbnails"
default
kind="metadata"
src="https://image.mux.com/jtWZbHQ013SLyISc9LbIGn8f4c3lWan00qOkoPMZEXmcU/storyboard.vtt"
/>
</Player>
</section>
</>
);
Expand Down
4 changes: 3 additions & 1 deletion packages/custom-media-element/custom-media-element.js
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,7 @@ export const CustomMediaMixin = (superclass, { tag, is }) => {
}

get nativeEl() {
this.#init();
return this.#nativeEl
?? this.shadowRoot.querySelector(tag)
?? this.querySelector(':scope > [slot=media]')
Expand Down Expand Up @@ -280,6 +281,7 @@ export const CustomMediaMixin = (superclass, { tag, is }) => {
}

this.shadowRoot.addEventListener('slotchange', this);
this.#syncMediaChildren();

for (let type of this.constructor.Events) {
this.shadowRoot.addEventListener?.(type, this, true);
Expand Down Expand Up @@ -309,7 +311,7 @@ export const CustomMediaMixin = (superclass, { tag, is }) => {
const removeNativeChildren = new Map(this.#childMap);

this.shadowRoot.querySelector('slot:not([name])')
.assignedElements()
.assignedElements({ flatten: true })
.filter((el) => ['track', 'source'].includes(el.localName))
.forEach((el) => {
// If the source or track is still in the assigned elements keep it.
Expand Down

0 comments on commit 8da2a4a

Please sign in to comment.