fix: chapters and cuepoints interface doesnt reflect internal types (#…

…977)

When we released chapters we unified the chapter and cuepoint types
under the hood, making both support an optional `endTime` with cuepoints
still supporting the legacy shape using `time` instead of `startTime`.
Our `addChapters` and `addCuePoints` methods on the player don't use
these new types though. `endTime` is currently required by the
`addChapters` method, but shouldn't be, and only the legacy type is
required by `addCuePoints`.

These changes re-use our existing internal types for `Chapter` and
`CuePoint` for the external interface.

Fixes #947

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

@@ -16,7 +16,7 @@ function MuxPlayerPage() {
   const [activeChapter, setActiveChapter] = useState<Chapter>(undefined);
 
   function addChaptersToPlayer(playerEl: MuxPlayerElement) {
-	playerEl.addChapters(chapters);
+    playerEl.addChapters(chapters);
   }
 
   return (

packages/mux-player/src/index.ts

@@ -20,6 +20,8 @@ import type {
   MaxResolutionValue,
   MinResolutionValue,
   RenditionOrderValue,
+  Chapter,
+  CuePoint,
 } from '@mux/playback-core';
 import VideoApiElement from './video-api';
 import {
@@ -1552,7 +1554,7 @@ class MuxPlayerElement extends VideoApiElement implements MuxPlayerElement {
     this.media._hlsConfig = val;
   }
 
-  async addCuePoints<T = any>(cuePoints: { time: number; value: T }[]) {
+  async addCuePoints<T = any>(cuePoints: CuePoint<T>[]) {
     this.#init();
 
     // NOTE: This condition should never be met. If it is, there is a bug (CJP)
@@ -1571,7 +1573,7 @@ class MuxPlayerElement extends VideoApiElement implements MuxPlayerElement {
     return this.media?.cuePoints ?? [];
   }
 
-  addChapters(chapters: { startTime: number; endTime: number; value: string }[]) {
+  addChapters(chapters: Chapter[]) {
     this.#init();
 
     // NOTE: This condition should never be met. If it is, there is a bug (CJP)

packages/mux-video/src/index.ts

@@ -37,6 +37,8 @@ import type {
   MaxResolutionValue,
   MinResolutionValue,
   RenditionOrderValue,
+  Chapter,
+  CuePoint,
 } from '@mux/playback-core';
 import { getPlayerVersion } from './env';
 // this must be imported after playback-core for the polyfill to be included
@@ -515,7 +517,7 @@ class MuxVideoBaseElement extends CustomVideoElement implements Partial<MuxMedia
     return getSeekable(this.nativeEl);
   }
 
-  async addCuePoints<T = any>(cuePoints: { time: number; value: T }[]) {
+  async addCuePoints<T = any>(cuePoints: CuePoint<T>[]) {
     return addCuePoints(this.nativeEl, cuePoints);
   }
 
@@ -527,7 +529,7 @@ class MuxVideoBaseElement extends CustomVideoElement implements Partial<MuxMedia
     return getCuePoints(this.nativeEl);
   }
 
-  async addChapters(chapters: { startTime: number; endTime: number; value: string }[]) {
+  async addChapters(chapters: Chapter[]) {
     return addChapters(this.nativeEl, chapters);
   }