Skip to content

Commit bee5d55

Browse files
cjpillsburycjpillsbury
committed
chore: Chapters examples to demonstrate functionality with native playback.
1 parent ba756d2 commit bee5d55

File tree

2 files changed

+57
-79
lines changed

2 files changed

+57
-79
lines changed

‎examples/nextjs-with-typescript/pages/MuxPlayerChapters.tsx‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,40 @@
11
import Link from "next/link";
22
import Head from 'next/head';
3-
import { useState } from "react";
3+
import { useCallback, useState } from "react";
44
import MuxPlayer from "@mux/mux-player-react";
55
import type MuxPlayerElement from "@mux/mux-player";
66

77
type Chapter = { startTime: number; endTime: number; value: string; };
8-
const chapters: Chapter[] = [
9-
{ startTime: 0, endTime: 3, value: 'Chapter 1' },
10-
{ startTime: 3, endTime: 6, value: 'Chapter 2' },
11-
{ startTime: 6, endTime: 9, value: 'Chapter 3' }
8+
const exampleChapters: Chapter[] = [
9+
{ startTime: 0, endTime: 3, value: 'A beginning chapter' },
10+
{ startTime: 3, endTime: 6, value: 'In the middle' },
11+
{ startTime: 6, endTime: 9, value: 'Is this the end? (No)' }
1212
];
1313

1414

15-
function MuxPlayerPage() {
15+
function MuxPlayerPage({ chapters = exampleChapters }: { chapters: Chapter[] }) {
1616
const [activeChapter, setActiveChapter] = useState<Chapter>(undefined);
1717

18-
function addChaptersToPlayer(playerEl: MuxPlayerElement) {
18+
const addChaptersToPlayer = useCallback((playerEl: MuxPlayerElement) => {
19+
// Not ready for chapters yet!
20+
if (!playerEl || !playerEl.readyState) return;
21+
// Already added chapters!
22+
if (!!playerEl.chapters?.length) return;
1923
playerEl.addChapters(chapters);
20-
}
24+
}, [chapters]);
2125

2226
return (
2327
<>
2428
<Head>
25-
<title>&lt;MuxPlayer/&gt; (CuePoints) Demo</title>
29+
<title>&lt;MuxPlayer/&gt; (Chapters) Demo</title>
2630
</Head>
2731

2832
<MuxPlayer
33+
key="23s11nz72DsoN657h4314PjKKjsF2JG33eBQQt6B95I"
34+
ref={addChaptersToPlayer}
2935
playbackId="23s11nz72DsoN657h4314PjKKjsF2JG33eBQQt6B95I"
30-
preload="auto"
36+
// Using native playback
37+
preferPlayback="mse"
3138
onLoadedMetadata={({ target }) => {
3239
addChaptersToPlayer(target as MuxPlayerElement);
3340
}}

‎examples/vanilla-ts-esm/public/mux-player-chapters.html‎

Lines changed: 40 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -42,85 +42,56 @@ <h1><a href="/">Elements</a></h1>
4242
<img width="32" height="32" src="./images/github-logo.svg" alt="Github logo">
4343
</a>
4444
</div>
45+
<title>&lt;MuxPlayer/&gt; (Chapters) Demo</title>
4546
</header>
4647

4748
<h2>Chapters with explicit end times (with gaps)</h2>
4849

4950
<mux-player
5051
id="playerOne"
51-
stream-type="on-demand"
52+
prefer-playback="mse"
5253
playback-id="23s11nz72DsoN657h4314PjKKjsF2JG33eBQQt6B95I"
53-
muted
54-
preload="auto"
5554
></mux-player>
56-
<p>
57-
<b>Active Chapter:</b> <pre id="chapter-renderer">Unset</pre>
58-
</p>
59-
<p>
60-
<button onclick="window.playerOne.addChapters([{startTime: 15, endTime: 18, value: 'Extra chapter'}]); this.disabled = true;">Add additional fourth chapter</button>
61-
</p>
62-
63-
64-
<h2>Chapters with implicit end times (no gaps, audio UI)</h2>
65-
66-
<mux-player
67-
id="playerTwo"
68-
stream-type="on-demand"
69-
playback-id="23s11nz72DsoN657h4314PjKKjsF2JG33eBQQt6B95I"
70-
muted
71-
preload="auto"
72-
audio
73-
></mux-player>
74-
75-
<p>
76-
<button onclick="window.playerTwo.addChapters([{startTime: 6, value: 'Chapter 2.5'}]); this.disabled = true;">Add chapter between 2 and 3</button>
77-
</p>
55+
<div>
56+
<b>Active chapter:</b>
57+
<pre id="chapter-renderer" style="background-color: #888; padding: 10px; color: #fff;">
58+
</pre>
59+
</div>
60+
<br />
7861

7962
<script>
80-
const playerOneEl = document.querySelector('#playerOne');
81-
const playerTwoEl = document.querySelector('#playerTwo');
82-
83-
function addChapterstoPlayerOne() {
84-
const chaptersOne = [
85-
{ startTime: 1, endTime: 3, value: 'Chapter 1' },
86-
{ startTime: 3, endTime: 6, value: 'Chapter 2 (joined)' },
87-
{ startTime: 10, endTime: 15, value: 'Chapter 3 (after gap)' }
88-
];
89-
playerOneEl.addChapters(chaptersOne);
90-
91-
console.log('Player one chapters added');
92-
}
93-
94-
function addChapterstoPlayerTwo() {
95-
const chaptersTwo = [
96-
{ startTime: 1, value: 'Chapter 1' },
97-
{ startTime: 3, value: 'Chapter 2' },
98-
{ startTime: 10, value: 'Chapter 3 (to the end...)' }
99-
];
100-
playerTwoEl.addChapters(chaptersTwo);
101-
102-
console.log('Player 2 chapters added');
103-
}
104-
105-
function chapterChangeListener() {
106-
console.log('Active Chapter', playerOneEl.activeChapter);
107-
document.getElementById('chapter-renderer').innerText = playerOneEl.activeChapter.value;
108-
}
109-
110-
playerOneEl.addEventListener('chapterchange', chapterChangeListener);
111-
112-
// NOTE: Need to wait until the player has loaded metadata before adding chapters!
113-
if (playerOneEl.readyState >= 1) {
114-
addChapterstoPlayerOne();
115-
} else {
116-
playerOneEl.addEventListener('loadedmetadata', addChapterstoPlayerOne, { once: true });
117-
}
118-
119-
if (playerTwoEl.readyState >= 1) {
120-
addChapterstoPlayerTwo();
121-
} else {
122-
playerTwoEl.addEventListener('loadedmetadata', addChapterstoPlayerTwo, { once: true });
123-
}
63+
const playerEl = document.querySelector('#playerOne');
64+
const chapterRendererEl = document.getElementById('chapter-renderer')
65+
66+
const chapters = [
67+
{ startTime: 0, endTime: 3, value: 'A beginning chapter' },
68+
{ startTime: 3, endTime: 6, value: 'In the middle' },
69+
{ startTime: 6, endTime: 9, value: 'Is this the end? (No)' }
70+
];
71+
72+
const addChaptersToPlayer = (playerEl) => {
73+
// Not ready for chapters yet!
74+
// NOTE: Inverting readyState condition because it's possible the web component hasn't upgraded yet
75+
if (!playerEl || !playerEl.readyState) return;
76+
// Already added chapters!
77+
if (!!playerEl.chapters?.length) return;
78+
playerEl.addChapters(chapters);
79+
};
80+
81+
const setActiveChapter = (activeChapter) => {
82+
chapterRendererEl.innerText = activeChapter.value ?? 'Unset';
83+
};
84+
85+
playerEl.addEventListener('chapterchange', () => {
86+
setActiveChapter(playerEl.activeChapter);
87+
});
88+
89+
addChaptersToPlayer(playerEl);
90+
playerEl.addEventListener(
91+
'loadedmetadata',
92+
({ target }) => addChaptersToPlayer(target),
93+
{ once: true }
94+
);
12495
</script>
12596
<a href="../">Browse Elements</a>
12697
</body>

0 commit comments

Comments
 (0)