fix(player/react): media-captions should be safe to use on server

vidstack · Oct 30, 2023 · b986bf8 · b986bf8
1 parent 18789bc
commit b986bf8
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 22 deletions.
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -35,7 +35,7 @@
     "react": "^18.0.0"
   },
   "dependencies": {
-    "media-captions": "^1.0.0"
+    "media-captions": "^1.0.1"
   },
   "devDependencies": {
     "@maverick-js/cli": "0.40.9",

diff --git a/packages/react/src/components/ui/sliders/time-slider.tsx b/packages/react/src/components/ui/sliders/time-slider.tsx
@@ -8,9 +8,10 @@ import {
   useStateContext,
   type ReactElementProps,
 } from 'maverick.js/react';
-import { VTTCue } from 'media-captions';
+import type { VTTCue } from 'media-captions';
 import { mediaState } from 'vidstack';
 
+import { createVTTCue } from '../../../utils';
 import {
   SliderChaptersInstance,
   SliderThumbnailInstance,
@@ -141,7 +142,7 @@ function ChapterTracks({ instance, children }: ChapterTracksProps) {
     { $chapters } = React.useContext(TimeSliderContext);
 
   if (!emptyCue.current) {
-    emptyCue.current = new VTTCue(0, 0, '');
+    emptyCue.current = createVTTCue();
   }
 
   React.useEffect(() => {

diff --git a/packages/react/src/utils.ts b/packages/react/src/utils.ts
@@ -0,0 +1,17 @@
+import { noop } from 'maverick.js/std';
+import type { VTTCue } from 'media-captions';
+
+export function createVTTCue(startTime = 0, endTime = 0, text = ''): VTTCue {
+  if (__SERVER__) {
+    return {
+      startTime,
+      endTime,
+      text,
+      addEventListener: noop,
+      removeEventListener: noop,
+      dispatchEvent: noop,
+    } as VTTCue;
+  }
+
+  return new window.VTTCue(startTime, endTime, text);
+}
diff --git a/packages/vidstack/package.json b/packages/vidstack/package.json
@@ -42,7 +42,7 @@
     "watch:types": "pnpm run build:types -w"
   },
   "dependencies": {
-    "media-captions": "^1.0.0"
+    "media-captions": "^1.0.1"
   },
   "devDependencies": {
     "@floating-ui/dom": "^1.4.4",

diff --git a/packages/vidstack/rollup.config.js b/packages/vidstack/rollup.config.js
@@ -12,7 +12,8 @@ const MODE_WATCH = process.argv.includes('-w'),
   MODE_TYPES = process.argv.includes('--config-types'),
   MODE_CDN = process.argv.includes('--config-cdn');
 
-const EXTERNAL_PACKAGES = ['hls.js', 'media-captions', 'media-icons'],
+const NPM_EXTERNAL_PACKAGES = ['hls.js', 'media-captions', 'media-icons'],
+  CDN_EXTERNAL_PACKAGES = ['media-captions', 'media-icons'],
   NPM_BUNDLES = [define({ type: 'server' }), define({ type: 'dev' }), define({ type: 'prod' })],
   CDN_BUNDLES = [defineCDN({ dev: true }), defineCDN(), defineCDN({ layouts: true })],
   TYPES_BUNDLES = [defineTypes()];
@@ -64,7 +65,7 @@ function defineTypes() {
         }
       },
     },
-    external: EXTERNAL_PACKAGES,
+    external: NPM_EXTERNAL_PACKAGES,
     plugins: [dts({ respectExternal: true })],
   };
 }
@@ -117,7 +118,7 @@ function define({ target, type, minify }) {
     maxParallelFileOps: shouldMangle ? 1 : 20,
     treeshake: true,
     preserveEntrySignatures: 'strict',
-    external: EXTERNAL_PACKAGES,
+    external: NPM_EXTERNAL_PACKAGES,
     output: {
       format: 'esm',
       dir: `dist/${type.replace('local-', '')}`,
@@ -220,7 +221,7 @@ function defineCDN({ dev = false, layouts = false } = {}) {
         return null;
       },
     },
-    external: ['media-icons', 'media-captions'],
+    external: CDN_EXTERNAL_PACKAGES,
   };
 }
 

diff --git a/packages/vidstack/src/components/ui/sliders/time-slider/slider-chapters.ts b/packages/vidstack/src/components/ui/sliders/time-slider/slider-chapters.ts
@@ -14,7 +14,7 @@ import {
   type Scope,
 } from 'maverick.js';
 import { animationFrameThrottle } from 'maverick.js/std';
-import { VTTCue } from 'media-captions';
+import type { VTTCue } from 'media-captions';
 
 import { observeActiveTextTrack } from '../../../../core';
 import { useMediaContext, type MediaContext } from '../../../../core/api/media-context';

diff --git a/packages/vidstack/src/components/ui/sliders/time-slider/time-slider.ts b/packages/vidstack/src/components/ui/sliders/time-slider/time-slider.ts
@@ -1,6 +1,6 @@
 import throttle from 'just-throttle';
 import { Component, effect, peek, provideContext, signal, useContext } from 'maverick.js';
-import { isNull, setAttribute } from 'maverick.js/std';
+import { setAttribute } from 'maverick.js/std';
 
 import { useMediaContext, type MediaContext } from '../../../../core/api/media-context';
 import type { TextTrack } from '../../../../core/tracks/text/text-track';

diff --git a/packages/vidstack/src/core/tracks/text/text-track.ts b/packages/vidstack/src/core/tracks/text/text-track.ts
@@ -1,10 +1,10 @@
 import { DOMEvent, EventsTarget, isNumber } from 'maverick.js/std';
-import {
-  type CaptionsFileFormat,
-  type CaptionsParserFactory,
-  type VTTCue,
-  type VTTHeaderMetadata,
-  type VTTRegion,
+import type {
+  CaptionsFileFormat,
+  CaptionsParserFactory,
+  VTTCue,
+  VTTHeaderMetadata,
+  VTTRegion,
 } from 'media-captions';
 
 import { getRequestCredentials } from '../../../utils/network';

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml