@hanifhan1f/vidstack 1.12.13

package/rollup.config.ts

@@ -0,0 +1,442 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import * as lexer from 'es-module-lexer';
+import fs from 'fs-extra';
+import { defineConfig, type Plugin, type RollupOptions } from 'rollup';
+import dts from 'rollup-plugin-dts';
+
+import { copyPkgFiles } from '../../.build/copy-pkg-files.js';
+import { buildDefaultTheme, watchStyles } from './build/build-styles.js';
+import { decorators } from './build/rollup-decorators';
+import { minify } from './build/rollup-minify';
+import { typescript } from './build/rollup-ts';
+
+const MODE_WATCH = process.argv.includes('-w'),
+  MODE_TYPES = process.argv.includes('--config-types'),
+  MODE_CDN = process.argv.includes('--config-cdn'),
+  MODE_PLUGINS = process.argv.includes('--config-plugins'),
+  MODE_CSS = process.argv.includes('--config-css');
+
+const NPM_EXTERNAL_PACKAGES = [
+    'hls.js',
+    'dashjs',
+    'media-captions',
+    'media-icons',
+    'media-icons/element',
+    /^@floating-ui/,
+    /^lit-html/,
+  ],
+  CDN_EXTERNAL_PACKAGES = ['media-captions', 'media-icons', 'media-icons/element'],
+  PLUGINS_EXTERNAL_PACKAGES = ['vite', 'rollup', /webpack/, /rspack/, 'esbuild', 'unplugin'],
+  TYPES_EXTERNAL_PACKAGES = NPM_EXTERNAL_PACKAGES;
+
+if (!MODE_TYPES) {
+  if (MODE_WATCH) {
+    watchStyles();
+  }
+}
+
+function getBundles() {
+  if (MODE_CSS) {
+    return [];
+  } else if (MODE_PLUGINS) {
+    return getPluginsBundles();
+  } else if (MODE_CDN) {
+    return getCDNBundles();
+  } else if (MODE_WATCH) {
+    return [...getNPMBundles(), ...getTypesBundles()];
+  } else if (MODE_TYPES) {
+    return getTypesBundles();
+  } else {
+    return [...getNPMBundles(), ...getLegacyCDNBundles(), ...getPluginsBundles()];
+  }
+}
+
+function isLibraryId(id) {
+  return id.includes('node_modules');
+}
+
+function getTypesBundles(): RollupOptions[] {
+  const input = {
+    index: 'types/index.d.ts',
+    elements: 'types/elements/index.d.ts',
+    'global/player': 'types/global/player.d.ts',
+    'global/plyr': 'types/global/plyr.d.ts',
+    icons: 'types/elements/bundles/icons.d.ts',
+  };
+
+  return [
+    {
+      input,
+      output: {
+        dir: 'dist-npm',
+        chunkFileNames: 'types/vidstack-[hash].d.ts',
+        compact: false,
+        minifyInternalExports: false,
+        manualChunks(id) {
+          if (isLibraryId(id)) {
+            return 'framework.d';
+          }
+        },
+      },
+      external: TYPES_EXTERNAL_PACKAGES,
+      plugins: [
+        dts({
+          respectExternal: true,
+        }),
+        resolveGlobalTypes(),
+      ],
+    },
+    {
+      input: 'types/plugins.d.ts',
+      output: {
+        file: 'dist-npm/plugins.d.ts',
+        compact: false,
+        minifyInternalExports: false,
+      },
+      external: PLUGINS_EXTERNAL_PACKAGES,
+      plugins: [dts({ respectExternal: true })],
+    },
+  ];
+}
+
+function resolveGlobalTypes(): Plugin {
+  return {
+    name: 'globals',
+    generateBundle(_, bundle) {
+      const files = new Set(['index.d.ts', 'elements.d.ts']),
+        references = ['dom.d.ts', 'google-cast.d.ts']
+          .map((path) => `/// <reference path="./${path}" />`)
+          .join('\n');
+
+      for (const file of Object.values(bundle)) {
+        if (file.type === 'chunk') {
+          // Leaking over from lit for some reason.
+          file.code = file.code.replace('/// <reference types="trusted-types" />', '');
+        }
+
+        if (files.has(file.fileName) && file.type === 'chunk' && file.isEntry) {
+          file.code = references + `\n\n${file.code}`;
+        }
+      }
+    },
+  };
+}
+
+function getNPMBundles() {
+  return [
+    defineNPMBundle({ type: 'server' }),
+    defineNPMBundle({ type: 'dev' }),
+    defineNPMBundle({ type: 'prod' }),
+  ];
+}
+
+interface NPMBundleOptions {
+  type: 'dev' | 'prod' | 'server';
+}
+
+function defineNPMBundle({ type }: NPMBundleOptions): RollupOptions {
+  const isProd = type === 'prod',
+    isServer = type === 'server',
+    input = isServer ? getBaseInputs() : getBrowserInputs();
+
+  return {
+    input,
+    treeshake: true,
+    preserveEntrySignatures: 'strict',
+    external: NPM_EXTERNAL_PACKAGES,
+    output: {
+      format: 'esm',
+      compact: false,
+      minifyInternalExports: false,
+      dir: `dist-npm/${type.replace('local-', '')}`,
+      chunkFileNames: 'chunks/vidstack-[hash].js',
+      manualChunks(id) {
+        if (id.includes('lit-html')) return 'framework-layouts';
+        if (isLibraryId(id)) return 'framework';
+        return null;
+      },
+    },
+    plugins: [
+      nodeResolve({
+        exportConditions: isServer
+          ? ['node', 'default', 'development']
+          : isProd
+            ? ['production', 'default']
+            : ['development', 'production', 'default'],
+      }),
+      decorators(),
+      typescript({
+        platform: isServer ? 'node' : 'browser',
+        define: {
+          __DEV__: !isProd && !isServer ? 'true' : 'false',
+          __SERVER__: isServer ? 'true' : 'false',
+          __CDN__: MODE_CDN ? 'true' : 'false',
+          __TEST__: 'false',
+        },
+      }),
+      // Only copy assets once in dev.
+      !isProd && !isServer && copyAssets(),
+      isServer && transformServerBundle(),
+    ],
+  };
+}
+
+/**
+ * Transform element entry points into basically no-ops server-side.
+ */
+function transformServerBundle(): Plugin {
+  return {
+    name: 'server-bundle',
+    async transform(code, id) {
+      if (id.includes('src/elements/bundles')) return '';
+
+      if (id.includes('src/elements/index.ts')) {
+        await lexer.init;
+        const [_, exports] = lexer.parse(code),
+          define = 'export function defineCustomElement() {};\n';
+        return exports
+          .map((s) => (s.n === 'defineCustomElement' ? define : `export class ${s.n} {};`))
+          .join('\n');
+      }
+    },
+  };
+}
+
+function getLegacyCDNBundles() {
+  return [
+    // Prod
+    defineCDNBundle({
+      input: 'src/elements/bundles/cdn-legacy/player.ts',
+      dir: 'dist-npm/cdn',
+      file: 'vidstack',
+      legacy: true,
+    }),
+    // All Layouts
+    defineCDNBundle({
+      input: 'src/elements/bundles/cdn-legacy/player-with-layouts.ts',
+      dir: 'dist-npm/cdn/with-layouts',
+      file: 'vidstack',
+      legacy: true,
+    }),
+  ];
+}
+
+function getCDNBundles() {
+  const baseDir = 'dist-cdn',
+    playerInput = 'src/elements/bundles/cdn/player.ts',
+    playerCoreInput = 'src/elements/bundles/cdn/player.core.ts',
+    plyrInput = 'src/elements/bundles/cdn/plyr.ts';
+
+  return [
+    // cdn.vidstack.io/player.dev
+    defineCDNBundle({
+      dev: true,
+      input: playerInput,
+      dir: baseDir,
+      file: 'player.dev',
+    }),
+    // cdn.vidstack.io/player
+    defineCDNBundle({
+      input: playerInput,
+      dir: baseDir,
+      file: 'player',
+    }),
+    // cdn.vidstack.io/player.core.dev
+    defineCDNBundle({
+      dev: true,
+      input: playerCoreInput,
+      dir: baseDir,
+      file: 'player.core.dev',
+    }),
+    // cdn.vidstack.io/player.core
+    defineCDNBundle({
+      input: playerCoreInput,
+      dir: baseDir,
+      file: 'player.core',
+    }),
+    // cdn.vidstack.io/plyr.dev
+    defineCDNBundle({
+      dev: true,
+      input: plyrInput,
+      dir: baseDir,
+      file: 'plyr.dev',
+    }),
+    // cdn.vidstack.io/plyr
+    defineCDNBundle({
+      input: plyrInput,
+      dir: baseDir,
+      file: 'plyr',
+    }),
+  ];
+}
+
+interface CDNBundleOptions {
+  dev?: boolean;
+  input: string;
+  dir: string;
+  file: string;
+  legacy?: boolean;
+}
+
+function defineCDNBundle({
+  dev = false,
+  input,
+  dir,
+  file,
+  legacy = false,
+}: CDNBundleOptions): RollupOptions {
+  const npmBundle = defineNPMBundle({
+    type: dev ? 'dev' : 'prod',
+  });
+
+  return {
+    ...npmBundle,
+    input: dev ? input : { [file]: input, ...getProviderInputs() },
+    preserveEntrySignatures: dev ? 'allow-extension' : 'strict',
+    output: {
+      format: 'esm',
+      file: dev ? `${dir}/${file}.js` : undefined,
+      dir: !dev ? dir : undefined,
+      chunkFileNames: `chunks/vidstack-[hash].js`,
+      entryFileNames(chunk) {
+        return chunk.name === file ? `[name].js` : `[name]-[hash].js`;
+      },
+      paths: {
+        'media-icons': legacy
+          ? 'https://cdn.jsdelivr.net/npm/media-icons@next/dist/lazy.js'
+          : 'https://cdn.vidstack.io/icons',
+        'media-captions': legacy
+          ? 'https://cdn.jsdelivr.net/npm/media-captions@next/dist/prod.js'
+          : 'https://cdn.vidstack.io/captions',
+        'media-icons/element': 'https://cdn.vidstack.io/icons',
+      },
+      manualChunks(id) {
+        if (dev) return file;
+
+        if (isLibraryId(id)) {
+          return 'frameworks';
+        }
+
+        return null;
+      },
+    },
+    external: CDN_EXTERNAL_PACKAGES,
+    plugins: [
+      ...(npmBundle.plugins as Plugin[]),
+      !dev && minify(),
+      !legacy && rewriteCDNChunks(file),
+    ],
+  };
+}
+
+/**
+ * This plugin rewrites chunk paths so our URL rewrites to jsDelivr work.
+ */
+function rewriteCDNChunks(file: string): Plugin {
+  return {
+    name: 'cdn-chunks',
+    async generateBundle(_, bundle) {
+      const __dirname = path.dirname(fileURLToPath(import.meta.url)),
+        version = JSON.parse(
+          await fs.readFile(path.join(__dirname, 'package.json'), 'utf-8'),
+        ).version;
+
+      for (const chunk of Object.values(bundle)) {
+        if (chunk.type === 'chunk' && chunk.isEntry && chunk.name === file) {
+          chunk.code = chunk.code.replace(
+            /\"\.\/(chunks|providers)\/(.*?)\"/g,
+            `"https://cdn.jsdelivr.net/npm/@vidstack/cdn@${version}/$1/$2"`,
+          );
+        }
+      }
+    },
+  };
+}
+
+function getBaseInputs() {
+  return {
+    vidstack: 'src/index.ts',
+    'vidstack-elements': 'src/elements/index.ts',
+    'global/vidstack-player': 'src/global/player.ts',
+    'global/plyr': 'src/global/plyr.ts',
+    'define/vidstack-icons': 'src/elements/bundles/icons.ts',
+    'define/vidstack-player': 'src/elements/bundles/player.ts',
+    'define/vidstack-player-ui': 'src/elements/bundles/player-ui.ts',
+    'define/vidstack-player-layouts': 'src/elements/bundles/player-layouts/index.ts',
+    'define/vidstack-player-default-layout': 'src/elements/bundles/player-layouts/default.ts',
+    'define/plyr-layout': 'src/elements/bundles/player-layouts/plyr.ts',
+  };
+}
+
+function getProviderInputs() {
+  return {
+    [`providers/vidstack-html`]: 'src/providers/html/provider.ts',
+    [`providers/vidstack-audio`]: 'src/providers/audio/provider.ts',
+    [`providers/vidstack-video`]: 'src/providers/video/provider.ts',
+    [`providers/vidstack-hls`]: 'src/providers/hls/provider.ts',
+    [`providers/vidstack-dash`]: 'src/providers/dash/provider.ts',
+    [`providers/vidstack-youtube`]: 'src/providers/youtube/provider.ts',
+    [`providers/vidstack-vimeo`]: 'src/providers/vimeo/provider.ts',
+    [`providers/vidstack-google-cast`]: 'src/providers/google-cast/provider.ts',
+  };
+}
+
+function getLayoutInputs() {
+  const layoutsDir = 'src/elements/define/layouts';
+  return {
+    'define/templates/vidstack-audio-layout': `${layoutsDir}/default/audio-layout-element.ts`,
+    'define/templates/vidstack-video-layout': `${layoutsDir}/default/video-layout-element.ts`,
+    'define/templates/plyr-layout': `${layoutsDir}/plyr/plyr-layout-element.ts`,
+  };
+}
+
+function getBrowserInputs() {
+  return {
+    ...getBaseInputs(),
+    ...getProviderInputs(),
+    ...getLayoutInputs(),
+  };
+}
+
+function getPluginsBundles(): RollupOptions[] {
+  return [
+    {
+      input: 'src/plugins.ts',
+      output: {
+        file: 'dist-npm/plugins.js',
+        format: 'esm',
+        compact: false,
+        minifyInternalExports: false,
+      },
+      external: PLUGINS_EXTERNAL_PACKAGES,
+      treeshake: true,
+      plugins: [
+        nodeResolve(),
+        typescript({
+          platform: 'node',
+          define: {
+            __DEV__: 'false',
+          },
+        }),
+        minify(),
+      ],
+    },
+  ];
+}
+
+function copyAssets(): Plugin {
+  return {
+    name: 'copy-',
+    async buildEnd() {
+      await copyPkgFiles();
+      await buildDefaultTheme();
+      await fs.copy('styles/player', 'dist-npm/player/styles');
+      await fs.copy('npm', 'dist-npm');
+    },
+  };
+}
+
+export default defineConfig(getBundles());

package/src/components/aria/announcer.ts

@@ -0,0 +1,181 @@
+import { Component, effect, peek, State, tick } from 'maverick.js';
+import { isString, setAttribute, type DOMEvent } from 'maverick.js/std';
+
+import { useMediaContext, type MediaContext } from '../../core/api/media-context';
+import { setAttributeIfEmpty } from '../../utils/dom';
+import { formatSpokenTime } from '../../utils/time';
+
+/**
+ * @docs {@link https://www.vidstack.io/docs/player/components/display/announcer}
+ */
+export class MediaAnnouncer extends Component<
+  MediaAnnouncerProps,
+  MediaAnnouncerState,
+  MediaAnnouncerEvents
+> {
+  static props: MediaAnnouncerProps = {
+    translations: null,
+  };
+
+  static state = new State<MediaAnnouncerState>({
+    label: null,
+    busy: false,
+  });
+
+  #media!: MediaContext;
+  #initializing = false;
+
+  protected override onSetup(): void {
+    this.#media = useMediaContext();
+  }
+
+  protected override onAttach(el: HTMLElement): void {
+    // sr-only.
+    el.style.display = 'contents';
+  }
+
+  protected override onConnect(el: HTMLElement): void {
+    el.setAttribute('data-media-announcer', '');
+
+    setAttributeIfEmpty(el, 'role', 'status');
+    setAttributeIfEmpty(el, 'aria-live', 'polite');
+
+    const { busy } = this.$state;
+    this.setAttributes({
+      'aria-busy': () => (busy() ? 'true' : null),
+    });
+
+    // Avoid triggering label updates on first run.
+    this.#initializing = true;
+
+    effect(this.#watchPaused.bind(this));
+    effect(this.#watchVolume.bind(this));
+    effect(this.#watchCaptions.bind(this));
+    effect(this.#watchFullscreen.bind(this));
+    effect(this.#watchPiP.bind(this));
+    effect(this.#watchSeeking.bind(this));
+    effect(this.#watchLabel.bind(this));
+
+    tick();
+    this.#initializing = false;
+  }
+
+  #watchPaused() {
+    const { paused } = this.#media.$state;
+    this.#setLabel(!paused() ? 'Play' : 'Pause');
+  }
+
+  #watchFullscreen() {
+    const { fullscreen } = this.#media.$state;
+    this.#setLabel(fullscreen() ? 'Enter Fullscreen' : 'Exit Fullscreen');
+  }
+
+  #watchPiP() {
+    const { pictureInPicture } = this.#media.$state;
+    this.#setLabel(pictureInPicture() ? 'Enter PiP' : 'Exit PiP');
+  }
+
+  #watchCaptions() {
+    const { textTrack } = this.#media.$state;
+    this.#setLabel(textTrack() ? 'Closed-Captions On' : 'Closed-Captions Off');
+  }
+
+  #watchVolume() {
+    const { muted, volume, audioGain } = this.#media.$state;
+    this.#setLabel(
+      muted() || volume() === 0
+        ? 'Mute'
+        : `${Math.round(volume() * (audioGain() ?? 1) * 100)}% ${this.#translate('Volume')}`,
+    );
+  }
+
+  #startedSeekingAt = -1;
+  #seekTimer = -1;
+  #watchSeeking() {
+    const { seeking, currentTime } = this.#media.$state,
+      isSeeking = seeking();
+
+    if (this.#startedSeekingAt > 0) {
+      window.clearTimeout(this.#seekTimer);
+      this.#seekTimer = window.setTimeout(() => {
+        if (!this.scope) return;
+
+        const newTime = peek(currentTime),
+          seconds = Math.abs(newTime - this.#startedSeekingAt);
+
+        if (seconds >= 1) {
+          const isForward = newTime >= this.#startedSeekingAt,
+            spokenTime = formatSpokenTime(seconds);
+
+          this.#setLabel(
+            `${this.#translate(isForward ? 'Seek Forward' : 'Seek Backward')} ${spokenTime}`,
+          );
+        }
+
+        this.#startedSeekingAt = -1;
+        this.#seekTimer = -1;
+      }, 300);
+    } else if (isSeeking) {
+      this.#startedSeekingAt = peek(currentTime);
+    }
+  }
+
+  #translate(word: string | null) {
+    const { translations } = this.$props;
+    return translations?.()?.[word || ''] ?? word;
+  }
+
+  #watchLabel() {
+    const { label, busy } = this.$state,
+      $label = this.#translate(label());
+
+    if (this.#initializing) return;
+
+    busy.set(true);
+    const id = window.setTimeout(() => void busy.set(false), 150);
+
+    this.el && setAttribute(this.el, 'aria-label', $label);
+
+    if (isString($label)) {
+      this.dispatch('change', { detail: $label });
+    }
+
+    return () => window.clearTimeout(id);
+  }
+
+  #setLabel(word: string | null) {
+    const { label } = this.$state;
+    label.set(word);
+  }
+}
+
+export interface MediaAnnouncerProps {
+  translations: Partial<MediaAnnouncerTranslations> | null;
+}
+
+export interface MediaAnnouncerState {
+  label: string | null;
+  busy: boolean;
+}
+
+export interface MediaAnnouncerEvents {
+  change: DOMEvent<string>;
+}
+
+export type MediaAnnouncerWord =
+  | 'Play'
+  | 'Pause'
+  | 'Enter Fullscreen'
+  | 'Exit Fullscreen'
+  | 'Enter PiP'
+  | 'Exit PiP'
+  | 'Closed-Captions On'
+  | 'Closed-Captions Off'
+  | 'Mute'
+  | 'Volume'
+  | 'Seek Forward'
+  | 'Seek Backward';
+
+export type MediaAnnouncerTranslations = {
+  [word in MediaAnnouncerWord]: string;
+};

package/src/components/layouts/default/audio-layout.ts

@@ -0,0 +1,20 @@
+import { DefaultLayout } from './default-layout';
+import type { DefaultLayoutProps } from './props';
+
+/**
+ * The audio layout is our production-ready UI that's displayed when the media view type is set to
+ * 'audio'. It includes support for audio tracks, slider chapters, captions, live streams, and much
+ * more out of the box.
+ *
+ * @attr data-match - Whether this layout is being used (query match).
+ * @attr data-sm - The small layout is active
+ * @attr data-lg - The large layout is active.
+ * @attr data-size - The active layout size (sm or lg).
+ */
+export class DefaultAudioLayout extends DefaultLayout {
+  static override props: DefaultLayoutProps = {
+    ...super.props,
+    when: ({ viewType }) => viewType === 'audio',
+    smallWhen: ({ width }) => width < 576,
+  };
+}

package/src/components/layouts/default/context.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext, type ReadSignalRecord, type WriteSignal } from 'maverick.js';
+
+import type { DefaultLayoutProps } from './props';
+
+export interface DefaultLayoutContext extends ReadSignalRecord<DefaultLayoutProps> {
+  menuPortal: WriteSignal<HTMLElement | null>;
+  userPrefersAnnouncements: WriteSignal<boolean>;
+  userPrefersKeyboardAnimations: WriteSignal<boolean>;
+}
+
+export const defaultLayoutContext = createContext<DefaultLayoutContext>();
+
+export function useDefaultLayoutContext() {
+  return useContext(defaultLayoutContext);
+}