From bee5d558803d0e1703d1acee92cf98bf3132bdd4 Mon Sep 17 00:00:00 2001 From: Christian Pillsbury Date: Wed, 30 Jul 2025 11:30:43 -0700 Subject: [PATCH] chore: Chapters examples to demonstrate functionality with native playback. --- .../pages/MuxPlayerChapters.tsx | 27 +++-- .../public/mux-player-chapters.html | 109 +++++++----------- 2 files changed, 57 insertions(+), 79 deletions(-) diff --git a/examples/nextjs-with-typescript/pages/MuxPlayerChapters.tsx b/examples/nextjs-with-typescript/pages/MuxPlayerChapters.tsx index 7a97e7db5..5ab4b4d13 100644 --- a/examples/nextjs-with-typescript/pages/MuxPlayerChapters.tsx +++ b/examples/nextjs-with-typescript/pages/MuxPlayerChapters.tsx @@ -1,33 +1,40 @@ import Link from "next/link"; import Head from 'next/head'; -import { useState } from "react"; +import { useCallback, useState } from "react"; import MuxPlayer from "@mux/mux-player-react"; import type MuxPlayerElement from "@mux/mux-player"; type Chapter = { startTime: number; endTime: number; value: string; }; -const chapters: Chapter[] = [ - { startTime: 0, endTime: 3, value: 'Chapter 1' }, - { startTime: 3, endTime: 6, value: 'Chapter 2' }, - { startTime: 6, endTime: 9, value: 'Chapter 3' } +const exampleChapters: Chapter[] = [ + { startTime: 0, endTime: 3, value: 'A beginning chapter' }, + { startTime: 3, endTime: 6, value: 'In the middle' }, + { startTime: 6, endTime: 9, value: 'Is this the end? (No)' } ]; -function MuxPlayerPage() { +function MuxPlayerPage({ chapters = exampleChapters }: { chapters: Chapter[] }) { const [activeChapter, setActiveChapter] = useState(undefined); - function addChaptersToPlayer(playerEl: MuxPlayerElement) { + const addChaptersToPlayer = useCallback((playerEl: MuxPlayerElement) => { + // Not ready for chapters yet! + if (!playerEl || !playerEl.readyState) return; + // Already added chapters! + if (!!playerEl.chapters?.length) return; playerEl.addChapters(chapters); - } + }, [chapters]); return ( <> - <MuxPlayer/> (CuePoints) Demo + <MuxPlayer/> (Chapters) Demo { addChaptersToPlayer(target as MuxPlayerElement); }} diff --git a/examples/vanilla-ts-esm/public/mux-player-chapters.html b/examples/vanilla-ts-esm/public/mux-player-chapters.html index 3339f040c..17e704571 100644 --- a/examples/vanilla-ts-esm/public/mux-player-chapters.html +++ b/examples/vanilla-ts-esm/public/mux-player-chapters.html @@ -42,85 +42,56 @@

Elements

Github logo + <MuxPlayer/> (Chapters) Demo

Chapters with explicit end times (with gaps)

-

- Active Chapter: 

Unset
-

-

- -

- - -

Chapters with implicit end times (no gaps, audio UI)

- - - -

- -

+
+ Active chapter: + 
+
+
+
Browse Elements