diff --git a/packages/react/package.json b/packages/react/package.json index e8b4c61b6..1b37327a1 100644 --- 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 index c9ad928ed..16b839622 100644 --- 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 new file mode 100644 index 000000000..ed49cf787 --- /dev/null +++ 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 index ba2bf8e73..779a6cfeb 100644 --- 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 index 891919619..c7e213c96 100644 --- 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 index 5a66422dd..5a45f21ac 100644 --- 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 index 2b7478657..e0a2592a3 100644 --- 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 index 7adbc8868..072d97ffd 100644 --- 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 index c2cb9e3d2..825cf029e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -65,8 +65,8 @@ importers: packages/react: dependencies: media-captions: - specifier: ^1.0.0 - version: 1.0.0 + specifier: ^1.0.1 + version: 1.0.1 devDependencies: '@maverick-js/cli': specifier: 0.40.9 @@ -126,8 +126,8 @@ importers: packages/vidstack: dependencies: media-captions: - specifier: ^1.0.0 - version: 1.0.0 + specifier: ^1.0.1 + version: 1.0.1 devDependencies: '@floating-ui/dom': specifier: ^1.4.4 @@ -4299,10 +4299,10 @@ packages: } dev: true - /media-captions@1.0.0: + /media-captions@1.0.1: resolution: { - integrity: sha512-605d9sXW+DtJBNzzfL4N6NpOIjigN+kpzS+V1QaCiNNPB7G015/peyw6wfv9iCp8GAP6R5NPyAICZKeuqWPAQQ==, + integrity: sha512-vicgtBYqNLvZStIPOpxHJxg/T7sVFVyi6A43PQLl5jMjblvRWhZ8V/LVBboeBxddSlPYnLWUQQI41Uv6V0tQRQ==, } engines: { node: '>=16' } dev: false