diff --git a/.github/scripts/bundle-size.js b/.github/scripts/bundle-size.js index 37367ef1..02083633 100644 --- a/.github/scripts/bundle-size.js +++ b/.github/scripts/bundle-size.js @@ -84,7 +84,7 @@ const PRESET_CONFIGS = [ * Export name lookup tables for preset virtual bundles. * * Each key is `{preset}/{variant}` where variant is 'skin', 'player', 'media', - * 'hls-media', or 'features'. Values are `{ path, name }` where path is relative + * 'hlsjs-video', or 'features'. Values are `{ path, name }` where path is relative * to the package dist/default/ directory and name is the exported identifier. */ const PRESET_EXPORTS = { @@ -97,7 +97,7 @@ const PRESET_EXPORTS = { 'audio/player': { path: 'define/audio/player.js', name: 'AudioPlayerElement' }, 'background/skin': { path: 'define/background/skin.js', name: 'BackgroundVideoSkinElement' }, 'background/player': { path: 'define/background/player.js', name: 'BackgroundVideoPlayerElement' }, - 'hls-media': { path: 'define/media/hls-video.js', name: 'HlsVideoElement' }, + 'hlsjs-video': { path: 'define/media/hlsjs-video.js', name: 'HlsJsVideoElement' }, }, react: { 'video/skin': { path: 'presets/video/skin.js', name: 'VideoSkin' }, @@ -108,7 +108,7 @@ const PRESET_EXPORTS = { 'audio/media': { path: 'media/audio.js', name: 'Audio' }, 'background/skin': { path: 'presets/background/skin.js', name: 'BackgroundVideoSkin' }, 'background/media': { path: 'media/background-video/index.js', name: 'BackgroundVideo' }, - 'hls-media': { path: 'media/hls-video/index.js', name: 'HlsVideo' }, + 'hlsjs-video': { path: 'media/hlsjs-video/index.js', name: 'HlsJsVideo' }, 'video/features': { path: '../../../core/dist/default/dom/store/features/presets.js', name: 'videoFeatures' }, 'audio/features': { path: '../../../core/dist/default/dom/store/features/presets.js', name: 'audioFeatures' }, 'background/features': { path: '../../../core/dist/default/dom/store/features/presets.js', name: 'backgroundFeatures' }, @@ -143,7 +143,7 @@ function buildPresetEntry(pkgShortName, config, distDir) { if (!addExport(`${config.preset}/player`)) return null; if (!addExport(`${config.preset}/media`)) return null; if (!addExport(`${config.preset}/features`)) return null; - if (config.hls && !addExport('hls-media')) return null; + if (config.hls && !addExport('hlsjs-video')) return null; return lines.length > 0 ? lines.join('\n') : null; } diff --git a/apps/e2e/fixtures/media.ts b/apps/e2e/fixtures/media.ts index 1e32b13e..7177a5b7 100644 --- a/apps/e2e/fixtures/media.ts +++ b/apps/e2e/fixtures/media.ts @@ -20,7 +20,7 @@ export const VIDEO_PAGES = [ name: 'HTML Video HLS', path: '/pages/html-video-hls.html', framework: 'html', - media: 'hls-video', + media: 'hlsjs-video', resource: 'hlsTs', }, { @@ -63,7 +63,7 @@ export const VIDEO_PAGES = [ name: 'React Video HLS', path: '/pages/react-video-hls.html', framework: 'react', - media: 'hls-video', + media: 'hlsjs-video', resource: 'hlsTs', }, ] as const satisfies readonly PageEntry[]; @@ -129,7 +129,7 @@ export const CDN_VIDEO_PAGES = [ name: 'CDN Video HLS', path: '/pages/cdn-video-hls.html', framework: 'html', - media: 'hls-video', + media: 'hlsjs-video', resource: 'hlsTs', }, ] as const satisfies readonly PageEntry[]; diff --git a/apps/e2e/fixtures/selectors.ts b/apps/e2e/fixtures/selectors.ts index 7d7f4d4e..d95b07ba 100644 --- a/apps/e2e/fixtures/selectors.ts +++ b/apps/e2e/fixtures/selectors.ts @@ -86,7 +86,7 @@ export const SELECTORS = { errorDialog: 'media-error-dialog, .media-error', // Media element — matches all renderer custom elements and native media - media: 'video, audio, hls-video, simple-hls-video, native-hls-video, dash-video, mux-video, mux-audio', + media: 'video, audio, hlsjs-video, simple-hls-video, native-hls-video, dash-video, mux-video, mux-audio', } as const; /** Data attributes used for player state (same across both renderers). */ diff --git a/apps/e2e/scripts/generate-pages.ts b/apps/e2e/scripts/generate-pages.ts index f20aaf0e..fe4d2405 100644 --- a/apps/e2e/scripts/generate-pages.ts +++ b/apps/e2e/scripts/generate-pages.ts @@ -20,7 +20,7 @@ const OUT_DIR = resolve(__dirname, '../apps/vite/src/pages'); // --------------------------------------------------------------------------- interface MediaTypeConfig { - /** Custom element tag (e.g. 'hls-video', 'mux-video') */ + /** Custom element tag (e.g. 'hlsjs-video', 'mux-video') */ element: string; /** Side-effect imports to register the element */ imports: string[]; @@ -43,9 +43,9 @@ const MEDIA_TYPES: Record = { hasPoster: true, isAudio: false, }, - 'hls-video': { - element: 'hls-video', - imports: ['@videojs/html/media/hls-video'], + 'hlsjs-video': { + element: 'hlsjs-video', + imports: ['@videojs/html/media/hlsjs-video'], attrs: 'playsinline crossorigin="anonymous"', hasStoryboard: true, hasPoster: true, @@ -104,14 +104,14 @@ const MEDIA_TYPES: Record = { // React component names for media elements const REACT_MEDIA: Record = { video: { component: 'Video', importPath: '@videojs/react/video' }, - 'hls-video': { component: 'HlsVideo', importPath: '@videojs/react/media/hls-video' }, + 'hlsjs-video': { component: 'HlsJsVideo', importPath: '@videojs/react/media/hlsjs-video' }, audio: { component: 'Audio', importPath: '@videojs/react/audio' }, }; // CDN import paths (override standard imports) const CDN_IMPORTS: Record = { video: ['@videojs/html/cdn/video'], - 'hls-video': ['@videojs/html/cdn/video', '@videojs/html/cdn/media/hls-video'], + 'hlsjs-video': ['@videojs/html/cdn/video', '@videojs/html/cdn/media/hlsjs-video'], }; // --------------------------------------------------------------------------- @@ -347,7 +347,7 @@ createRoot(document.getElementById('root')!).render(); const PAGES: PageDef[] = [ // HTML Video { name: 'HTML Video MP4', path: 'html-video-mp4', framework: 'html', media: 'video', resource: 'mp4' }, - { name: 'HTML Video HLS', path: 'html-video-hls', framework: 'html', media: 'hls-video', resource: 'hlsTs' }, + { name: 'HTML Video HLS', path: 'html-video-hls', framework: 'html', media: 'hlsjs-video', resource: 'hlsTs' }, { name: 'HTML Simple HLS Video fMP4', path: 'html-simple-hls-video-fmp4', @@ -371,7 +371,7 @@ const PAGES: PageDef[] = [ // React Video { name: 'React Video MP4', path: 'react-video-mp4', framework: 'react', media: 'video', resource: 'mp4' }, - { name: 'React Video HLS', path: 'react-video-hls', framework: 'react', media: 'hls-video', resource: 'hlsTs' }, + { name: 'React Video HLS', path: 'react-video-hls', framework: 'react', media: 'hlsjs-video', resource: 'hlsTs' }, // React Audio { name: 'React Audio MP4', path: 'react-audio-mp4', framework: 'react', media: 'audio', resource: 'mp4' }, @@ -382,7 +382,7 @@ const PAGES: PageDef[] = [ name: 'CDN Video HLS', path: 'cdn-video-hls', framework: 'html', - media: 'hls-video', + media: 'hlsjs-video', resource: 'hlsTs', category: 'cdn', }, diff --git a/apps/e2e/tests/xss-prevention.spec.ts b/apps/e2e/tests/xss-prevention.spec.ts index ffc81a74..43eb34f4 100644 --- a/apps/e2e/tests/xss-prevention.spec.ts +++ b/apps/e2e/tests/xss-prevention.spec.ts @@ -3,8 +3,8 @@ import { expect, test } from '@playwright/test'; test.describe('XSS prevention — CustomMediaElement shadow root', () => { test.beforeEach(async ({ page }) => { await page.goto('/pages/html-video-hls.html'); - // Wait for hls-video to be defined before creating elements dynamically. - await page.waitForFunction(() => !!customElements.get('hls-video')); + // Wait for hlsjs-video to be defined before creating elements dynamically. + await page.waitForFunction(() => !!customElements.get('hlsjs-video')); }); test('quote injection in crossorigin does not fire onerror handler', async ({ page }) => { @@ -13,8 +13,8 @@ test.describe('XSS prevention — CustomMediaElement shadow root', () => { (window as any).__xss = undefined; const container = document.createElement('div'); document.body.appendChild(container); - container.innerHTML = ''; - const el = container.querySelector('hls-video')!; + container.innerHTML = ''; + const el = container.querySelector('hlsjs-video')!; return { xss: (window as any).__xss, hasOnerror: el.shadowRoot?.querySelector('[onerror]') !== null, @@ -33,8 +33,8 @@ test.describe('XSS prevention — CustomMediaElement shadow root', () => { const container = document.createElement('div'); document.body.appendChild(container); container.innerHTML = - ''; - const el = container.querySelector('hls-video')!; + ''; + const el = container.querySelector('hlsjs-video')!; return { xss: (window as any).__xss, hasImg: el.shadowRoot?.querySelector('img') !== null, @@ -51,8 +51,8 @@ test.describe('XSS prevention — CustomMediaElement shadow root', () => { const result = await page.evaluate(() => { const container = document.createElement('div'); document.body.appendChild(container); - container.innerHTML = ''; - const el = container.querySelector('hls-video')!; + container.innerHTML = ''; + const el = container.querySelector('hlsjs-video')!; const video = el.shadowRoot?.querySelector('video'); return { crossorigin: video?.getAttribute('crossorigin') }; }); diff --git a/apps/sandbox/README.md b/apps/sandbox/README.md index 3f397305..cf755108 100644 --- a/apps/sandbox/README.md +++ b/apps/sandbox/README.md @@ -10,7 +10,7 @@ pnpm dev:sandbox # sandbox + workspace package watch pnpm dev # also runs the docs site ``` -Open the printed URL. The root route renders an interactive shell — a navbar with dropdowns for platform (HTML, React, CDN), preset (`video`, `hls-video`, `audio`, etc.), skin, styling (CSS or Tailwind), and source — that previews the selected combination in an iframe. Use the **Open** button to pop the preview out into its own tab. +Open the printed URL. The root route renders an interactive shell — a navbar with dropdowns for platform (HTML, React, CDN), preset (`video`, `hlsjs-video`, `audio`, etc.), skin, styling (CSS or Tailwind), and source — that previews the selected combination in an iframe. Use the **Open** button to pop the preview out into its own tab. The shell covers the main combinatorial matrix. One-off templates not in that matrix (e.g. `firefox-mse-repro`, `spf-segment-loading`, `simple-hls-html`) are reachable by navigating directly to `//`. See `apps/sandbox/templates/` for the full list. diff --git a/apps/sandbox/app/constants.ts b/apps/sandbox/app/constants.ts index 5b7f4ae5..b186ee91 100644 --- a/apps/sandbox/app/constants.ts +++ b/apps/sandbox/app/constants.ts @@ -3,7 +3,7 @@ export const PLATFORMS = ['html', 'react', 'cdn'] as const; export const STYLINGS = ['css', 'tailwind'] as const; export const PRESETS = [ 'video', - 'hls-video', + 'hlsjs-video', 'native-hls-video', 'mux-video', 'mux-audio', diff --git a/apps/sandbox/app/shell/navbar.tsx b/apps/sandbox/app/shell/navbar.tsx index 1d09558c..3e267fe7 100644 --- a/apps/sandbox/app/shell/navbar.tsx +++ b/apps/sandbox/app/shell/navbar.tsx @@ -45,7 +45,7 @@ const PLATFORM_LABELS: Record = { const PRESET_LABELS: Record = { video: 'Video', - 'hls-video': 'HLS Video', + 'hlsjs-video': 'HLS Video', 'native-hls-video': 'Native HLS Video', 'mux-video': 'Mux Video', 'mux-audio': 'Mux Audio', diff --git a/apps/sandbox/templates/cdn/main.ts b/apps/sandbox/templates/cdn/main.ts index dfe1056d..cb83c5e2 100644 --- a/apps/sandbox/templates/cdn/main.ts +++ b/apps/sandbox/templates/cdn/main.ts @@ -29,7 +29,7 @@ const loadLatest = createLatestLoader(); async function loadCdnPreset(preset: Preset, skin: Skin, live: boolean) { switch (preset) { case 'video': - case 'hls-video': + case 'hlsjs-video': case 'mux-video': case 'native-hls-video': case 'simple-hls-video': @@ -56,8 +56,8 @@ async function loadCdnPreset(preset: Preset, skin: Skin, live: boolean) { async function loadCdnMedia(preset: Preset) { switch (preset) { - case 'hls-video': - await import('@videojs/html/cdn/media/hls-video'); + case 'hlsjs-video': + await import('@videojs/html/cdn/media/hlsjs-video'); break; case 'mux-video': await import('@videojs/html/cdn/media/mux-video'); @@ -103,7 +103,7 @@ function getSkinTag(preset: Preset, skin: Skin, live: boolean): string { function getMediaTag(preset: Preset): string { const tags: Partial> = { - 'hls-video': 'hls-video', + 'hlsjs-video': 'hlsjs-video', 'mux-video': 'mux-video', 'mux-audio': 'mux-audio', 'native-hls-video': 'native-hls-video', @@ -126,7 +126,7 @@ function loadStylesheets(preset: Preset, skin: Skin) { function isVideoPreset(preset: Preset): boolean { return ( preset === 'video' || - preset === 'hls-video' || + preset === 'hlsjs-video' || preset === 'mux-video' || preset === 'native-hls-video' || preset === 'simple-hls-video' || @@ -136,7 +136,7 @@ function isVideoPreset(preset: Preset): boolean { function canPlayLive(preset: Preset): boolean { return ( - preset === 'hls-video' || preset === 'mux-video' || preset === 'native-hls-video' || preset === 'simple-hls-video' + preset === 'hlsjs-video' || preset === 'mux-video' || preset === 'native-hls-video' || preset === 'simple-hls-video' ); } diff --git a/apps/sandbox/templates/html-hls-video/index.html b/apps/sandbox/templates/html-hlsjs-video/index.html similarity index 100% rename from apps/sandbox/templates/html-hls-video/index.html rename to apps/sandbox/templates/html-hlsjs-video/index.html diff --git a/apps/sandbox/templates/html-hls-video/main.ts b/apps/sandbox/templates/html-hlsjs-video/main.ts similarity index 91% rename from apps/sandbox/templates/html-hls-video/main.ts rename to apps/sandbox/templates/html-hlsjs-video/main.ts index 43adf4a7..19c4cdcf 100644 --- a/apps/sandbox/templates/html-hls-video/main.ts +++ b/apps/sandbox/templates/html-hlsjs-video/main.ts @@ -1,6 +1,6 @@ import '@app/styles.css'; import '@videojs/html/video/player'; -import '@videojs/html/media/hls-video'; +import '@videojs/html/media/hlsjs-video'; import { createHtmlSandboxState, createLatestLoader, renderMediaAttrs } from '@app/shared/html/sandbox-state'; import { loadVideoSkinTag } from '@app/shared/html/skins'; import { renderStoryboard } from '@app/shared/html/storyboard'; @@ -32,9 +32,9 @@ async function render() { document.getElementById('root')!.innerHTML = html` <${playerTag}> <${tag} class="aspect-video max-w-4xl mx-auto"> - + ${renderStoryboard(storyboard)} - + ${poster ? html`Video poster` : ''} diff --git a/apps/sandbox/templates/react-hls-video/index.html b/apps/sandbox/templates/react-hlsjs-video/index.html similarity index 100% rename from apps/sandbox/templates/react-hls-video/index.html rename to apps/sandbox/templates/react-hlsjs-video/index.html diff --git a/apps/sandbox/templates/react-hls-video/main.tsx b/apps/sandbox/templates/react-hlsjs-video/main.tsx similarity index 94% rename from apps/sandbox/templates/react-hls-video/main.tsx rename to apps/sandbox/templates/react-hlsjs-video/main.tsx index 438952dd..7fc2518c 100644 --- a/apps/sandbox/templates/react-hls-video/main.tsx +++ b/apps/sandbox/templates/react-hlsjs-video/main.tsx @@ -12,7 +12,7 @@ import { useSource } from '@app/shared/react/use-source'; import { useStoryboard } from '@app/shared/react/use-storyboard'; import { isLiveSource, SOURCES } from '@app/shared/sources'; import type { Styling } from '@app/types'; -import { HlsVideo } from '@videojs/react/media/hls-video'; +import { HlsJsVideo } from '@videojs/react/media/hlsjs-video'; import { useMemo } from 'react'; import { createRoot } from 'react-dom/client'; @@ -42,7 +42,7 @@ function App() { live={live} className="aspect-video max-w-4xl mx-auto" > - - + ); diff --git a/packages/cli/src/utils/tests/fixtures/cdn-media.json b/packages/cli/src/utils/tests/fixtures/cdn-media.json index 7d154757..1eafd83e 100644 --- a/packages/cli/src/utils/tests/fixtures/cdn-media.json +++ b/packages/cli/src/utils/tests/fixtures/cdn-media.json @@ -1,6 +1,6 @@ [ { "id": "dash-video" }, - { "id": "hls-video" }, + { "id": "hlsjs-video" }, { "id": "mux-audio" }, { "id": "mux-video" }, { "id": "native-hls-video" }, diff --git a/packages/core/src/dom/media/hls/errors.ts b/packages/core/src/dom/media/hls-js/errors.ts similarity index 100% rename from packages/core/src/dom/media/hls/errors.ts rename to packages/core/src/dom/media/hls-js/errors.ts diff --git a/packages/core/src/dom/media/hls/hlsjs.ts b/packages/core/src/dom/media/hls-js/hls-js-only.ts similarity index 85% rename from packages/core/src/dom/media/hls/hlsjs.ts rename to packages/core/src/dom/media/hls-js/hls-js-only.ts index 58f2a4bf..3627affd 100644 --- a/packages/core/src/dom/media/hls/hlsjs.ts +++ b/packages/core/src/dom/media/hls-js/hls-js-only.ts @@ -26,7 +26,7 @@ export const defaultHlsConfig: Partial = { autoStartLoad: false, }; -class HlsJsMediaBase extends HTMLVideoElementHost implements MediaEngineHost { +class HlsJsOnlyMediaBase extends HTMLVideoElementHost implements MediaEngineHost { #engine: Hls | null = null; constructor(params: { config: Partial }) { @@ -73,16 +73,16 @@ interface HlsJsMediaCapabilities readonly error: MediaError | null; } -const HlsJsMediaComposed = HlsJsMediaPreloadMixin( +const HlsJsOnlyMediaComposed = HlsJsMediaPreloadMixin( HlsJsMediaLiveMixin( HlsJsMediaStreamTypeMixin( HlsJsMediaMediaTracksMixin( HlsJsMediaMetadataTracksMixin( - HlsJsMediaTextTracksMixin(HlsJsMediaErrorsMixin(MediaTracksMixin(HlsJsMediaBase))) + HlsJsMediaTextTracksMixin(HlsJsMediaErrorsMixin(MediaTracksMixin(HlsJsOnlyMediaBase))) ) ) ) ) -) as unknown as MixinReturn, HlsJsMediaCapabilities>; +) as unknown as MixinReturn, HlsJsMediaCapabilities>; -export class HlsJsMedia extends HlsJsMediaComposed {} +export class HlsJsOnlyMedia extends HlsJsOnlyMediaComposed {} diff --git a/packages/core/src/dom/media/hls/index.ts b/packages/core/src/dom/media/hls-js/index.ts similarity index 91% rename from packages/core/src/dom/media/hls/index.ts rename to packages/core/src/dom/media/hls-js/index.ts index ad371b8f..91edd053 100644 --- a/packages/core/src/dom/media/hls/index.ts +++ b/packages/core/src/dom/media/hls-js/index.ts @@ -5,7 +5,7 @@ import { bridgeEvents } from '../../../core/utils/bridge-events'; import type { MediaConfig } from '../media-host'; import { NativeHlsMedia } from '../native-hls'; import { HTMLVideoElementHost } from '../video-host'; -import { HlsJsMedia } from './hlsjs'; +import { HlsJsOnlyMedia } from './hls-js-only'; export type PreloadType = '' | 'none' | 'metadata' | 'auto'; @@ -53,8 +53,8 @@ class HlsMediaEvent extends Event {} * @fires streamtypechange - Fired when the detected stream type changes. Read `streamType` for the new value. * @fires targetlivewindowchange - Fired when the target live window changes. Read `targetLiveWindow` for the new value. */ -export class HlsMedia extends HTMLVideoElementHost implements HlsMediaProps { - #delegate: HlsJsMedia | NativeHlsMedia | null = null; +export class HlsJsMedia extends HTMLVideoElementHost implements HlsMediaProps { + #delegate: HlsJsOnlyMedia | NativeHlsMedia | null = null; #mediaElement: HTMLVideoElement | null = null; #src = hlsMediaDefaultProps.src; #preload = hlsMediaDefaultProps.preload; @@ -117,22 +117,22 @@ export class HlsMedia extends HTMLVideoElementHost implements HlsMediaProps { /** Populated only while the hls.js (MSE) engine is active; otherwise `undefined`. */ get videoTracks() { - return this.#delegate instanceof HlsJsMedia ? this.#delegate.videoTracks : undefined; + return this.#delegate instanceof HlsJsOnlyMedia ? this.#delegate.videoTracks : undefined; } /** Populated only while the hls.js (MSE) engine is active; otherwise `undefined`. */ get audioTracks() { - return this.#delegate instanceof HlsJsMedia ? this.#delegate.audioTracks : undefined; + return this.#delegate instanceof HlsJsOnlyMedia ? this.#delegate.audioTracks : undefined; } /** Selectable quality levels, populated only while the hls.js (MSE) engine is active; otherwise `undefined`. */ get videoRenditions() { - return this.#delegate instanceof HlsJsMedia ? this.#delegate.videoRenditions : undefined; + return this.#delegate instanceof HlsJsOnlyMedia ? this.#delegate.videoRenditions : undefined; } /** Selectable audio variants, populated only while the hls.js (MSE) engine is active; otherwise `undefined`. */ get audioRenditions() { - return this.#delegate instanceof HlsJsMedia ? this.#delegate.audioRenditions : undefined; + return this.#delegate instanceof HlsJsOnlyMedia ? this.#delegate.audioRenditions : undefined; } get src() { @@ -210,7 +210,7 @@ export class HlsMedia extends HTMLVideoElementHost implements HlsMediaProps { const useMse = Hls.isSupported() && contentType === ContentTypes.M3U8 && this.config.preferPlayback !== PlaybackTypes.NATIVE; - this.#delegate = useMse ? new HlsJsMedia({ config: { ...this.config?.hlsJs } }) : new NativeHlsMedia(); + this.#delegate = useMse ? new HlsJsOnlyMedia({ config: { ...this.config?.hlsJs } }) : new NativeHlsMedia(); bridgeEvents(this.#delegate, this); diff --git a/packages/core/src/dom/media/hls/live.ts b/packages/core/src/dom/media/hls-js/live.ts similarity index 100% rename from packages/core/src/dom/media/hls/live.ts rename to packages/core/src/dom/media/hls-js/live.ts diff --git a/packages/core/src/dom/media/hls/media-tracks.ts b/packages/core/src/dom/media/hls-js/media-tracks.ts similarity index 100% rename from packages/core/src/dom/media/hls/media-tracks.ts rename to packages/core/src/dom/media/hls-js/media-tracks.ts diff --git a/packages/core/src/dom/media/hls/metadata-tracks.ts b/packages/core/src/dom/media/hls-js/metadata-tracks.ts similarity index 100% rename from packages/core/src/dom/media/hls/metadata-tracks.ts rename to packages/core/src/dom/media/hls-js/metadata-tracks.ts diff --git a/packages/core/src/dom/media/hls/preload.ts b/packages/core/src/dom/media/hls-js/preload.ts similarity index 100% rename from packages/core/src/dom/media/hls/preload.ts rename to packages/core/src/dom/media/hls-js/preload.ts diff --git a/packages/core/src/dom/media/hls/stream-type.ts b/packages/core/src/dom/media/hls-js/stream-type.ts similarity index 100% rename from packages/core/src/dom/media/hls/stream-type.ts rename to packages/core/src/dom/media/hls-js/stream-type.ts diff --git a/packages/core/src/dom/media/hls/tests/errors.test.ts b/packages/core/src/dom/media/hls-js/tests/errors.test.ts similarity index 100% rename from packages/core/src/dom/media/hls/tests/errors.test.ts rename to packages/core/src/dom/media/hls-js/tests/errors.test.ts diff --git a/packages/core/src/dom/media/hls/tests/hls-media.test.ts b/packages/core/src/dom/media/hls-js/tests/hls-media.test.ts similarity index 97% rename from packages/core/src/dom/media/hls/tests/hls-media.test.ts rename to packages/core/src/dom/media/hls-js/tests/hls-media.test.ts index 2c7a2dcd..82996337 100644 --- a/packages/core/src/dom/media/hls/tests/hls-media.test.ts +++ b/packages/core/src/dom/media/hls-js/tests/hls-media.test.ts @@ -3,7 +3,7 @@ import { MediaError } from '../../../../core/media/media-error'; import type { RemotePlaybackLike } from '../../../../core/media/types'; import { addComponent, type Component } from '../../media-host'; import { NativeHlsMedia } from '../../native-hls'; -import { ContentTypes, HlsMedia } from '../index'; +import { ContentTypes, HlsJsMedia } from '../index'; afterEach(() => { document.body.innerHTML = ''; @@ -27,7 +27,7 @@ function setup() { const video = document.createElement('video'); document.body.appendChild(video); - const media = new HlsMedia(); + const media = new HlsJsMedia(); media.attach(video); const handler = vi.fn(); @@ -39,7 +39,7 @@ function setup() { return { media, video, handler }; } -describe('HlsMedia', () => { +describe('HlsJsMedia', () => { describe('error event delegation', () => { it('dispatches only the enriched error, not the raw native error', () => { const { video, handler } = setup(); @@ -82,7 +82,7 @@ describe('HlsMedia', () => { const video = document.createElement('video'); document.body.appendChild(video); - const media = new HlsMedia(); + const media = new HlsJsMedia(); media.attach(video); const pauseHandler = vi.fn(); @@ -102,7 +102,7 @@ describe('HlsMedia', () => { const video = document.createElement('video'); document.body.appendChild(video); - const media = new HlsMedia(); + const media = new HlsJsMedia(); media.attach(video); const handler = vi.fn(); @@ -180,7 +180,7 @@ describe('HlsMedia', () => { const video = document.createElement('video'); document.body.appendChild(video); - const media = new HlsMedia(); + const media = new HlsJsMedia(); media.attach(video); const component: Component = { @@ -253,7 +253,7 @@ describe('HlsMedia', () => { describe('streamType', () => { it('defaults to `unknown` before load', () => { - const media = new HlsMedia(); + const media = new HlsJsMedia(); expect(media.streamType).toBe('unknown'); }); @@ -303,7 +303,7 @@ describe('HlsMedia', () => { expect(media.streamType).toBe('live'); handler.mockClear(); - // `config.hlsJs.debug` is part of `HlsMedia`'s engine props — toggling it + // `config.hlsJs.debug` is part of `HlsJsMedia`'s engine props — toggling it // recreates the native delegate without switching playback engines. media.config = { ...media.config, hlsJs: { debug: true } }; media.load(); @@ -362,7 +362,7 @@ describe('HlsMedia', () => { }); it('dispatches `streamtypechange` when set before a delegate exists', () => { - const media = new HlsMedia(); + const media = new HlsJsMedia(); const handler = vi.fn(); media.addEventListener('streamtypechange', handler); @@ -417,7 +417,7 @@ describe('HlsMedia', () => { describe('live edge', () => { it('defaults to `NaN` for both values before load', () => { - const media = new HlsMedia(); + const media = new HlsJsMedia(); expect(media.liveEdgeStart).toBeNaN(); expect(media.targetLiveWindow).toBeNaN(); }); diff --git a/packages/core/src/dom/media/hls/tests/live.test.ts b/packages/core/src/dom/media/hls-js/tests/live.test.ts similarity index 100% rename from packages/core/src/dom/media/hls/tests/live.test.ts rename to packages/core/src/dom/media/hls-js/tests/live.test.ts diff --git a/packages/core/src/dom/media/hls/tests/media-tracks.test.ts b/packages/core/src/dom/media/hls-js/tests/media-tracks.test.ts similarity index 100% rename from packages/core/src/dom/media/hls/tests/media-tracks.test.ts rename to packages/core/src/dom/media/hls-js/tests/media-tracks.test.ts diff --git a/packages/core/src/dom/media/hls/tests/preload.test.ts b/packages/core/src/dom/media/hls-js/tests/preload.test.ts similarity index 100% rename from packages/core/src/dom/media/hls/tests/preload.test.ts rename to packages/core/src/dom/media/hls-js/tests/preload.test.ts diff --git a/packages/core/src/dom/media/hls/text-tracks.ts b/packages/core/src/dom/media/hls-js/text-tracks.ts similarity index 100% rename from packages/core/src/dom/media/hls/text-tracks.ts rename to packages/core/src/dom/media/hls-js/text-tracks.ts diff --git a/packages/core/src/dom/media/hls/types.ts b/packages/core/src/dom/media/hls-js/types.ts similarity index 100% rename from packages/core/src/dom/media/hls/types.ts rename to packages/core/src/dom/media/hls-js/types.ts diff --git a/packages/core/src/dom/media/mux/mux-data.ts b/packages/core/src/dom/media/mux/mux-data.ts index e2071d9b..c88b44c1 100644 --- a/packages/core/src/dom/media/mux/mux-data.ts +++ b/packages/core/src/dom/media/mux/mux-data.ts @@ -1,5 +1,5 @@ import Mux from 'mux-embed'; -import { Hls, type HlsMedia } from '../hls'; +import { Hls, type HlsJsMedia } from '../hls-js'; import { getPlayerVersion } from './env'; import type { MuxDataOptions, MuxDataSdk } from './types'; @@ -18,7 +18,7 @@ export interface MuxDataProps { const MUX_VIDEO_DOMAIN = 'mux.com'; export interface MuxDataMedia extends EventTarget { - readonly engine?: HlsMedia['engine']; + readonly engine?: HlsJsMedia['engine']; readonly src: string; } diff --git a/packages/core/src/dom/media/mux/tests/index.test.ts b/packages/core/src/dom/media/mux/tests/index.test.ts index 16e06171..7984c448 100644 --- a/packages/core/src/dom/media/mux/tests/index.test.ts +++ b/packages/core/src/dom/media/mux/tests/index.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it, vi } from 'vitest'; -import { HlsMedia } from '../../hls'; +import { HlsJsMedia } from '../../hls-js'; import { addComponent } from '../../media-host'; import { MuxData } from '..'; import type { MuxDataSdk } from '../types'; @@ -14,7 +14,7 @@ function createSdk() { } class FakeMedia extends EventTarget { - engine: HlsMedia['engine'] = null; + engine: HlsJsMedia['engine'] = null; src = ''; } @@ -75,7 +75,7 @@ describe('MuxData', () => { expect(monitor).toHaveBeenCalledTimes(1); - const engine = {} as NonNullable; + const engine = {} as NonNullable; media.engine = engine; media.src = 'https://stream.mux.com/abc123.m3u8'; media.dispatchEvent(new Event('loadstart')); @@ -93,7 +93,7 @@ describe('MuxData', () => { }); it('exposes mux config under host.config.muxData with inferred types', () => { - const media = new HlsMedia(); + const media = new HlsJsMedia(); const muxData = new MuxData(); addComponent(media, muxData); diff --git a/packages/core/src/dom/store/features/live.ts b/packages/core/src/dom/store/features/live.ts index 2a54ceba..eb83374b 100644 --- a/packages/core/src/dom/store/features/live.ts +++ b/packages/core/src/dom/store/features/live.ts @@ -6,7 +6,7 @@ import { definePlayerFeature } from '../../feature'; /** * Player feature exposing `liveEdgeStart` and `targetLiveWindow` in store * state for media that implements `MediaLiveCapability` (currently - * `HlsMedia` and its delegates). + * `HlsJsMedia` and its delegates). * * - `liveEdgeStart` — presentation time marking the start of the Live Edge * Window. Playing at the live edge when `currentTime >= liveEdgeStart`. diff --git a/packages/core/src/dom/store/features/stream-type.ts b/packages/core/src/dom/store/features/stream-type.ts index 824a5f78..012ca3ee 100644 --- a/packages/core/src/dom/store/features/stream-type.ts +++ b/packages/core/src/dom/store/features/stream-type.ts @@ -10,7 +10,7 @@ export const streamTypeFeature = definePlayerFeature({ streamType: MediaStreamTypes.UNKNOWN, }), - // Prefer the media's own `streamType` (e.g. `HlsMedia`, which derives it from + // Prefer the media's own `streamType` (e.g. `HlsJsMedia`, which derives it from // manifest metadata and dispatches `streamtypechange`). For plain elements // without that capability, fall back to duration-based detection so the // store still reports `live`/`on-demand` for native MP4 / native HLS. diff --git a/packages/core/tsdown.config.ts b/packages/core/tsdown.config.ts index a7331e2b..f5461c09 100644 --- a/packages/core/tsdown.config.ts +++ b/packages/core/tsdown.config.ts @@ -14,7 +14,7 @@ const createConfig = (mode: PackageBuildMode): UserConfig => ({ 'dom/media/media-played-ranges/index': './src/dom/media/media-played-ranges/index.ts', // Media 'dom/media/dash/index': './src/dom/media/dash/index.ts', - 'dom/media/hls/index': './src/dom/media/hls/index.ts', + 'dom/media/hls-js/index': './src/dom/media/hls-js/index.ts', 'dom/media/native-hls/index': './src/dom/media/native-hls/index.ts', 'dom/media/simple-hls-audio-only/index': './src/dom/media/simple-hls-audio-only/index.ts', 'dom/media/simple-hls/index': './src/dom/media/simple-hls/index.ts', diff --git a/packages/html/src/cdn/media/hls-video.ts b/packages/html/src/cdn/media/hls-video.ts deleted file mode 100644 index 8d292303..00000000 --- a/packages/html/src/cdn/media/hls-video.ts +++ /dev/null @@ -1 +0,0 @@ -import '../../define/media/hls-video'; diff --git a/packages/html/src/cdn/media/hlsjs-video.ts b/packages/html/src/cdn/media/hlsjs-video.ts new file mode 100644 index 00000000..8de5a2bf --- /dev/null +++ b/packages/html/src/cdn/media/hlsjs-video.ts @@ -0,0 +1 @@ +import '../../define/media/hlsjs-video'; diff --git a/packages/html/src/define/media/hls-video.ts b/packages/html/src/define/media/hls-video.ts deleted file mode 100644 index bc51a0a3..00000000 --- a/packages/html/src/define/media/hls-video.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { HlsVideo } from '../../media/hls-video'; -import { safeDefine } from '../safe-define'; - -export class HlsVideoElement extends HlsVideo { - static readonly tagName = 'hls-video'; -} - -safeDefine(HlsVideoElement); - -declare global { - interface HTMLElementTagNameMap { - [HlsVideoElement.tagName]: HlsVideoElement; - } -} diff --git a/packages/html/src/define/media/hlsjs-video.ts b/packages/html/src/define/media/hlsjs-video.ts new file mode 100644 index 00000000..6c03c35d --- /dev/null +++ b/packages/html/src/define/media/hlsjs-video.ts @@ -0,0 +1,14 @@ +import { HlsJsVideo } from '../../media/hlsjs-video'; +import { safeDefine } from '../safe-define'; + +export class HlsJsVideoElement extends HlsJsVideo { + static readonly tagName = 'hlsjs-video'; +} + +safeDefine(HlsJsVideoElement); + +declare global { + interface HTMLElementTagNameMap { + [HlsJsVideoElement.tagName]: HlsJsVideoElement; + } +} diff --git a/packages/html/src/media/hls-video/index.ts b/packages/html/src/media/hlsjs-video/index.ts similarity index 70% rename from packages/html/src/media/hls-video/index.ts rename to packages/html/src/media/hlsjs-video/index.ts index 886699ba..2e7f429e 100644 --- a/packages/html/src/media/hls-video/index.ts +++ b/packages/html/src/media/hlsjs-video/index.ts @@ -1,10 +1,10 @@ import { CustomMediaElement } from '@videojs/core/dom/media/custom-media-element'; import { GoogleCast } from '@videojs/core/dom/media/google-cast'; -import { HlsMedia } from '@videojs/core/dom/media/hls'; +import { HlsJsMedia } from '@videojs/core/dom/media/hls-js'; import { addComponent } from '@videojs/core/dom/media/media-host'; import { MediaAttachMixin } from '../../store/media-attach-mixin'; -export class HlsVideo extends MediaAttachMixin(CustomMediaElement('video', HlsMedia)) { +export class HlsJsVideo extends MediaAttachMixin(CustomMediaElement('video', HlsJsMedia)) { constructor() { super(); addComponent(this.host, new GoogleCast()); diff --git a/packages/html/src/media/mux-audio/index.ts b/packages/html/src/media/mux-audio/index.ts index 814034dc..7bbab861 100644 --- a/packages/html/src/media/mux-audio/index.ts +++ b/packages/html/src/media/mux-audio/index.ts @@ -1,11 +1,11 @@ import { CustomMediaElement } from '@videojs/core/dom/media/custom-media-element'; import { GoogleCast } from '@videojs/core/dom/media/google-cast'; -import { HlsMedia } from '@videojs/core/dom/media/hls'; +import { HlsJsMedia } from '@videojs/core/dom/media/hls-js'; import { addComponent } from '@videojs/core/dom/media/media-host'; import { MuxData } from '@videojs/core/dom/media/mux'; import { MediaAttachMixin } from '../../store/media-attach-mixin'; -export class MuxAudio extends MediaAttachMixin(CustomMediaElement('audio', HlsMedia)) { +export class MuxAudio extends MediaAttachMixin(CustomMediaElement('audio', HlsJsMedia)) { constructor() { super(); addComponent(this.host, new MuxData({ playerSoftwareName: 'mux-audio' })); diff --git a/packages/html/src/media/mux-video/index.ts b/packages/html/src/media/mux-video/index.ts index 598d427d..4988a115 100644 --- a/packages/html/src/media/mux-video/index.ts +++ b/packages/html/src/media/mux-video/index.ts @@ -1,11 +1,11 @@ import { CustomMediaElement } from '@videojs/core/dom/media/custom-media-element'; import { GoogleCast } from '@videojs/core/dom/media/google-cast'; -import { HlsMedia } from '@videojs/core/dom/media/hls'; +import { HlsJsMedia } from '@videojs/core/dom/media/hls-js'; import { addComponent } from '@videojs/core/dom/media/media-host'; import { MuxData } from '@videojs/core/dom/media/mux'; import { MediaAttachMixin } from '../../store/media-attach-mixin'; -export class MuxVideo extends MediaAttachMixin(CustomMediaElement('video', HlsMedia)) { +export class MuxVideo extends MediaAttachMixin(CustomMediaElement('video', HlsJsMedia)) { constructor() { super(); addComponent(this.host, new MuxData({ playerSoftwareName: 'mux-video' })); diff --git a/packages/html/tsdown.cdn.config.ts b/packages/html/tsdown.cdn.config.ts index 8b06447d..5bd37c2b 100644 --- a/packages/html/tsdown.cdn.config.ts +++ b/packages/html/tsdown.cdn.config.ts @@ -29,7 +29,7 @@ const presets = [ 'background', ]; const media = [ - 'hls-video', + 'hlsjs-video', 'mux-audio', 'mux-video', 'native-hls-video', diff --git a/packages/react/src/media/hls-video/index.tsx b/packages/react/src/media/hlsjs-video/index.tsx similarity index 68% rename from packages/react/src/media/hls-video/index.tsx rename to packages/react/src/media/hlsjs-video/index.tsx index af24845c..0f97e9ca 100644 --- a/packages/react/src/media/hls-video/index.tsx +++ b/packages/react/src/media/hlsjs-video/index.tsx @@ -1,8 +1,8 @@ 'use client'; import { GoogleCast } from '@videojs/core/dom/media/google-cast'; -import type { HlsMediaProps } from '@videojs/core/dom/media/hls'; -import { HlsMedia, hlsMediaDefaultProps } from '@videojs/core/dom/media/hls'; +import type { HlsMediaProps } from '@videojs/core/dom/media/hls-js'; +import { HlsJsMedia, hlsMediaDefaultProps } from '@videojs/core/dom/media/hls-js'; import { addComponent } from '@videojs/core/dom/media/media-host'; import type { ReactNode, VideoHTMLAttributes } from 'react'; import { forwardRef } from 'react'; @@ -11,14 +11,17 @@ import { useComposedRefs } from '../../utils/use-composed-refs'; import { useMediaInstance } from '../../utils/use-media-instance'; import { useSyncProps } from '../../utils/use-sync-props'; -export interface HlsVideoProps +export interface HlsJsVideoProps extends Omit, keyof HlsMediaProps>, Partial { children?: ReactNode; } -export const HlsVideo = forwardRef(function HlsVideo({ children, ...props }, ref) { - const media = useMediaInstance(HlsMedia, (media) => { +export const HlsJsVideo = forwardRef(function HlsJsVideo( + { children, ...props }, + ref +) { + const media = useMediaInstance(HlsJsMedia, (media) => { addComponent(media, new GoogleCast()); }); const attachRef = useAttachMedia(media); @@ -32,6 +35,6 @@ export const HlsVideo = forwardRef(function Hls ); }); -export namespace HlsVideo { - export type Props = HlsVideoProps; +export namespace HlsJsVideo { + export type Props = HlsJsVideoProps; } diff --git a/packages/react/src/media/mux-audio/index.tsx b/packages/react/src/media/mux-audio/index.tsx index cc811085..72e2a8ff 100644 --- a/packages/react/src/media/mux-audio/index.tsx +++ b/packages/react/src/media/mux-audio/index.tsx @@ -1,8 +1,8 @@ 'use client'; import { GoogleCast } from '@videojs/core/dom/media/google-cast'; -import type { HlsMediaProps } from '@videojs/core/dom/media/hls'; -import { HlsMedia, hlsMediaDefaultProps } from '@videojs/core/dom/media/hls'; +import type { HlsMediaProps } from '@videojs/core/dom/media/hls-js'; +import { HlsJsMedia, hlsMediaDefaultProps } from '@videojs/core/dom/media/hls-js'; import { addComponent } from '@videojs/core/dom/media/media-host'; import { MuxData } from '@videojs/core/dom/media/mux'; import type { AudioHTMLAttributes, ReactNode } from 'react'; @@ -19,7 +19,7 @@ export interface MuxAudioProps } export const MuxAudio = forwardRef(function MuxAudio({ children, ...props }, ref) { - const media = useMediaInstance(HlsMedia, (media) => { + const media = useMediaInstance(HlsJsMedia, (media) => { addComponent(media, new MuxData({ playerSoftwareName: 'mux-audio' })); addComponent(media, new GoogleCast()); }); diff --git a/packages/react/src/media/mux-video/index.tsx b/packages/react/src/media/mux-video/index.tsx index 3badb43c..f4b7bc73 100644 --- a/packages/react/src/media/mux-video/index.tsx +++ b/packages/react/src/media/mux-video/index.tsx @@ -1,8 +1,8 @@ 'use client'; import { GoogleCast } from '@videojs/core/dom/media/google-cast'; -import type { HlsMediaProps } from '@videojs/core/dom/media/hls'; -import { HlsMedia, hlsMediaDefaultProps } from '@videojs/core/dom/media/hls'; +import type { HlsMediaProps } from '@videojs/core/dom/media/hls-js'; +import { HlsJsMedia, hlsMediaDefaultProps } from '@videojs/core/dom/media/hls-js'; import { addComponent } from '@videojs/core/dom/media/media-host'; import { MuxData } from '@videojs/core/dom/media/mux'; import type { ReactNode, VideoHTMLAttributes } from 'react'; @@ -19,7 +19,7 @@ export interface MuxVideoProps } export const MuxVideo = forwardRef(function MuxVideo({ children, ...props }, ref) { - const media = useMediaInstance(HlsMedia, (media) => { + const media = useMediaInstance(HlsJsMedia, (media) => { addComponent(media, new MuxData({ playerSoftwareName: 'mux-video' })); addComponent(media, new GoogleCast()); }); diff --git a/packages/react/src/utils/use-media-instance.ts b/packages/react/src/utils/use-media-instance.ts index 847ae874..8eccf293 100644 --- a/packages/react/src/utils/use-media-instance.ts +++ b/packages/react/src/utils/use-media-instance.ts @@ -11,7 +11,7 @@ import { useDestroy } from './use-destroy'; * * Instantiates the media class once, attaches it to the player on mount, * and safely detaches on unmount using a functional updater to avoid race - * conditions when swapping media components (e.g. DashVideo → HlsVideo). + * conditions when swapping media components (e.g. DashVideo → HlsJsVideo). * * An optional `setup` callback runs once on mount — e.g. to add media * components via `addComponent`. Components registered there are destroyed diff --git a/site/src/components/docs/demos/cast-button/html/css/BasicUsage.html b/site/src/components/docs/demos/cast-button/html/css/BasicUsage.html index 7badc5e9..4d4134e6 100644 --- a/site/src/components/docs/demos/cast-button/html/css/BasicUsage.html +++ b/site/src/components/docs/demos/cast-button/html/css/BasicUsage.html @@ -1,12 +1,12 @@ - + > Stop casting Start casting diff --git a/site/src/components/docs/demos/cast-button/html/css/BasicUsage.ts b/site/src/components/docs/demos/cast-button/html/css/BasicUsage.ts index 77a1999f..7d7de243 100644 --- a/site/src/components/docs/demos/cast-button/html/css/BasicUsage.ts +++ b/site/src/components/docs/demos/cast-button/html/css/BasicUsage.ts @@ -1,3 +1,3 @@ import '@videojs/html/video/player'; -import '@videojs/html/media/hls-video'; +import '@videojs/html/media/hlsjs-video'; import '@videojs/html/ui/cast-button'; diff --git a/site/src/components/docs/demos/cast-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/cast-button/react/css/BasicUsage.tsx index 72ac1769..527b05fb 100644 --- a/site/src/components/docs/demos/cast-button/react/css/BasicUsage.tsx +++ b/site/src/components/docs/demos/cast-button/react/css/BasicUsage.tsx @@ -1,5 +1,5 @@ import { CastButton, createPlayer } from '@videojs/react'; -import { HlsVideo } from '@videojs/react/media/hls-video'; +import { HlsJsVideo } from '@videojs/react/media/hlsjs-video'; import { videoFeatures } from '@videojs/react/video'; const Player = createPlayer({ features: videoFeatures }); @@ -8,7 +8,7 @@ export default function BasicUsage() { return ( - - + > diff --git a/site/src/components/docs/demos/hlsjs-video/html/css/BasicUsage.ts b/site/src/components/docs/demos/hlsjs-video/html/css/BasicUsage.ts new file mode 100644 index 00000000..78f5bb5a --- /dev/null +++ b/site/src/components/docs/demos/hlsjs-video/html/css/BasicUsage.ts @@ -0,0 +1,2 @@ +import '@videojs/html/media/container'; +import '@videojs/html/media/hlsjs-video'; diff --git a/site/src/components/docs/demos/hls-video/react/css/BasicUsage.css b/site/src/components/docs/demos/hlsjs-video/react/css/BasicUsage.css similarity index 73% rename from site/src/components/docs/demos/hls-video/react/css/BasicUsage.css rename to site/src/components/docs/demos/hlsjs-video/react/css/BasicUsage.css index 891910dc..85700a1b 100644 --- a/site/src/components/docs/demos/hls-video/react/css/BasicUsage.css +++ b/site/src/components/docs/demos/hlsjs-video/react/css/BasicUsage.css @@ -1,4 +1,4 @@ -.hls-video { +.hlsjs-video { width: 100%; aspect-ratio: 16 / 9; } diff --git a/site/src/components/docs/demos/hls-video/react/css/BasicUsage.tsx b/site/src/components/docs/demos/hlsjs-video/react/css/BasicUsage.tsx similarity index 65% rename from site/src/components/docs/demos/hls-video/react/css/BasicUsage.tsx rename to site/src/components/docs/demos/hlsjs-video/react/css/BasicUsage.tsx index 50b1a568..aa6050ea 100644 --- a/site/src/components/docs/demos/hls-video/react/css/BasicUsage.tsx +++ b/site/src/components/docs/demos/hlsjs-video/react/css/BasicUsage.tsx @@ -1,9 +1,9 @@ -import { HlsVideo } from '@videojs/react/media/hls-video'; +import { HlsJsVideo } from '@videojs/react/media/hlsjs-video'; export default function BasicUsage() { return ( - - + - + ); diff --git a/site/src/content.config.ts b/site/src/content.config.ts index de9f754f..3a979d22 100644 --- a/site/src/content.config.ts +++ b/site/src/content.config.ts @@ -171,7 +171,7 @@ const ejectedSkins = defineCollection({ }); // Media subpaths that ship a CDN build, generated by scripts/build-cdn-manifest.ts. -// Each entry's id is a media subpath (e.g. `hls-video`). Used by the installation +// Each entry's id is a media subpath (e.g. `hlsjs-video`). Used by the installation // guide to hide the CDN install option for renderers with no CDN bundle. const cdnMedia = defineCollection({ loader: file('./src/content/cdn-media.json'), diff --git a/site/src/content/docs/concepts/cast.mdx b/site/src/content/docs/concepts/cast.mdx index a3907ee5..d4d132cb 100644 --- a/site/src/content/docs/concepts/cast.mdx +++ b/site/src/content/docs/concepts/cast.mdx @@ -41,13 +41,13 @@ Set `disableRemotePlayback` on the media element to opt out: ```tsx - + ``` ```html - + ``` @@ -58,7 +58,7 @@ Cast works out of the box with the `videoFeatures` preset — no extra configura ```tsx import { createPlayer, CastButton } from '@videojs/react'; -import { HlsVideo } from '@videojs/react/media/hls-video'; +import { HlsJsVideo } from '@videojs/react/media/hlsjs-video'; import { videoFeatures } from '@videojs/react/video'; const Player = createPlayer({ features: videoFeatures }); @@ -67,7 +67,7 @@ export default function App() { return ( - + @@ -80,7 +80,7 @@ export default function App() { ```html - + @@ -97,13 +97,13 @@ By default, Video.js uses Google's [Default Media Receiver](https://developers.g ```tsx - + ``` ```ts -const video = document.querySelector('hls-video'); +const video = document.querySelector('hlsjs-video'); video.config = { googleCast: { receiver: 'YOUR_APP_ID' } }; ``` @@ -114,7 +114,7 @@ Pass arbitrary data to the receiver with each load request via `customData`. The ```tsx - @@ -123,7 +123,7 @@ Pass arbitrary data to the receiver with each load request via `customData`. The ```ts -const video = document.querySelector('hls-video'); +const video = document.querySelector('hlsjs-video'); video.config = { googleCast: { customData: { token: 'abc123', userId: 'u_789' } } }; ``` @@ -134,7 +134,7 @@ By default the receiver loads the same URL as the browser. Use `src` (and option ```tsx - @@ -143,7 +143,7 @@ By default the receiver loads the same URL as the browser. Use `src` (and option ```ts -const video = document.querySelector('hls-video'); +const video = document.querySelector('hlsjs-video'); video.config = { googleCast: { src: 'https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8', @@ -161,13 +161,13 @@ Use `streamType` to tell the receiver whether the stream is `'on-demand'` or `'l ```tsx - + ``` ```ts -const video = document.querySelector('hls-video'); +const video = document.querySelector('hlsjs-video'); video.config = { googleCast: { streamType: 'live' } }; ``` diff --git a/site/src/content/docs/concepts/overview.mdx b/site/src/content/docs/concepts/overview.mdx index d8378aec..7682a77a 100644 --- a/site/src/content/docs/concepts/overview.mdx +++ b/site/src/content/docs/concepts/overview.mdx @@ -117,7 +117,7 @@ Media components are the components that actually display your media. They're es Media components can be format specific (HLS, DASH), service specific (YouTube, Vimeo, Mux), or use case specific (background video). -Media elements are discovered automatically. Plain `