@hanifhan1f/vidstack-react 1.12.13

package/rollup.config.ts

@@ -0,0 +1,256 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+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 '../vidstack/build/build-styles.js';
+import { decorators } from '../vidstack/build/rollup-decorators';
+import typescript from '../vidstack/build/rollup-ts';
+
+const MODE_WATCH = process.argv.includes('-w'),
+  MODE_TYPES = process.argv.includes('--config-types');
+
+const DIRNAME = path.dirname(fileURLToPath(import.meta.url)),
+  ROOT_DIR = path.resolve(DIRNAME, '.'),
+  DIST_NPM_DIR = path.resolve(ROOT_DIR, 'dist-npm');
+
+const VIDSTACK_PKG_DIR = path.resolve(ROOT_DIR, 'node_modules/vidstack');
+
+const NPM_EXTERNAL_PACKAGES = [
+    'react',
+    'react-dom',
+    'media-icons',
+    'media-captions',
+    'hls.js',
+    'dashjs',
+    /^@floating-ui/,
+    /^remotion/,
+  ],
+  NPM_BUNDLES = [
+    defineNPMBundle({ type: 'server' }),
+    defineNPMBundle({ type: 'dev' }),
+    defineNPMBundle({ type: 'prod' }),
+  ],
+  TYPES_BUNDLES = defineTypesBundle();
+
+if (!MODE_TYPES) {
+  if (MODE_WATCH) {
+    watchStyles();
+  }
+}
+
+export default defineConfig(
+  MODE_WATCH ? [...TYPES_BUNDLES, ...NPM_BUNDLES] : MODE_TYPES ? TYPES_BUNDLES : NPM_BUNDLES,
+);
+
+function defineTypesBundle(): RollupOptions[] {
+  return [
+    {
+      input: {
+        index: 'types/react/src/index.d.ts',
+        icons: 'types/react/src/icons.d.ts',
+        'player/remotion': 'types/react/src/providers/remotion/index.d.ts',
+        'player/layouts/default': 'types/react/src/components/layouts/default/index.d.ts',
+        'player/layouts/plyr': 'types/react/src/components/layouts/plyr/index.d.ts',
+      },
+      output: {
+        dir: 'dist-npm',
+        compact: false,
+        minifyInternalExports: false,
+        chunkFileNames: 'types/[name].d.ts',
+        manualChunks(id) {
+          if (id.includes('primitives/instances')) return 'vidstack-instances';
+          if (id.includes('react/src')) return 'vidstack-react';
+          if (id.includes('vidstack')) return 'vidstack';
+        },
+      },
+      external: NPM_EXTERNAL_PACKAGES,
+      plugins: [
+        resolveVidstackTypes(),
+        dts({
+          respectExternal: true,
+        }),
+        resolveGlobalTypes(),
+      ],
+    },
+  ];
+}
+
+function resolveVidstackTypes(): Plugin {
+  return {
+    name: 'resolve-vidstack-types',
+    resolveId(id) {
+      if (id === 'vidstack') {
+        return '../vidstack/types/index.d.ts';
+      }
+
+      if (id.startsWith('vidstack')) {
+        return id.replace('vidstack', '../vidstack/types').replace('.ts', '.d.ts');
+      }
+    },
+  };
+}
+
+function resolveGlobalTypes(): Plugin {
+  return {
+    name: 'globals',
+    generateBundle(_, bundle) {
+      const indexFile = Object.values(bundle).find((file) => file.fileName === 'index.d.ts'),
+        globalFiles = ['dom.d.ts', 'google-cast.d.ts'],
+        references = globalFiles.map((path) => `/// <reference path="./${path}" />`).join('\n');
+
+      if (!fs.existsSync('dist-npm')) {
+        fs.mkdirSync('dist-npm');
+      }
+
+      for (const file of globalFiles) {
+        fs.copyFileSync(path.resolve(`../vidstack/npm/${file}`), `dist-npm/${file}`);
+      }
+
+      if (indexFile?.type === 'chunk') {
+        indexFile.code = references + `\n\n${indexFile.code}`;
+      }
+    },
+  };
+}
+
+interface NPMBundleOptions {
+  type: 'dev' | 'prod' | 'server';
+}
+
+function defineNPMBundle({ type }: NPMBundleOptions): RollupOptions {
+  const isProd = type === 'prod',
+    isServer = type === 'server';
+
+  let input = {
+    vidstack: 'src/index.ts',
+    'player/vidstack-remotion': 'src/providers/remotion/index.ts',
+    'player/vidstack-default-layout': 'src/components/layouts/default/index.ts',
+    'player/vidstack-plyr-layout': 'src/components/layouts/plyr/index.ts',
+    'player/vidstack-plyr-icons': 'src/components/layouts/plyr/icons.tsx',
+    'player/vidstack-default-components': 'src/components/layouts/default/ui.ts',
+    'player/vidstack-default-icons': 'src/components/layouts/default/icons.tsx',
+  };
+
+  if (isProd) {
+    input['vidstack-icons'] = 'src/icons.ts';
+  }
+
+  return {
+    input,
+    treeshake: true,
+    preserveEntrySignatures: 'allow-extension',
+    maxParallelFileOps: isProd ? 1 : 20,
+    external: NPM_EXTERNAL_PACKAGES,
+    output: {
+      format: 'esm',
+      compact: false,
+      minifyInternalExports: false,
+      dir: `dist-npm/${type}`,
+      chunkFileNames: `chunks/vidstack-[hash].js`,
+      manualChunks(id) {
+        if (id.includes('node_modules')) return 'vidstack-deps';
+      },
+    },
+    plugins: [
+      env(),
+      nodeResolve({
+        exportConditions: isServer
+          ? ['node', 'default', 'development']
+          : isProd
+            ? ['production', 'default']
+            : ['development', 'production', 'default'],
+      }),
+      decorators(),
+      typescript({
+        loader: 'tsx',
+        platform: isServer ? 'node' : 'browser',
+        define: {
+          __DEV__: !isProd && !isServer ? 'true' : 'false',
+          __SERVER__: isServer ? 'true' : 'false',
+        },
+      }),
+      rscDirectives(),
+      isProd && copyAssets(),
+    ],
+  };
+}
+
+function env(): Plugin {
+  return {
+    name: 'virtual-env',
+    resolveId(id) {
+      if (id === ':virtual/env') {
+        return id;
+      }
+    },
+    load(id) {
+      if (id === ':virtual/env') {
+        return 'export const IS_SERVER = typeof document === "undefined";';
+      }
+    },
+    transform(code) {
+      if (code.includes('__SERVER__')) {
+        code = code.replace(/__SERVER__/g, 'IS_SERVER');
+        return "import { IS_SERVER } from ':virtual/env';\n" + code;
+      }
+    },
+  };
+}
+
+function rscDirectives(): Plugin {
+  return {
+    name: 'rsc-directives',
+    resolveId(id) {
+      if (id.startsWith('maverick.js')) {
+        return this.resolve('maverick.js/rsc', '', { skipSelf: true });
+      }
+    },
+    generateBundle(_, bundle) {
+      const serverChunks = new Set(),
+        neutralChunks = new Set(['vidstack-icons.js']);
+
+      for (const fileName of Object.keys(bundle)) {
+        const chunk = bundle[fileName];
+
+        if (chunk.type !== 'chunk') continue;
+
+        if (serverChunks.has(chunk.fileName)) {
+          chunk.code = `"use server"\n\n` + chunk.code;
+        } else if (!neutralChunks.has(fileName)) {
+          chunk.code = `"use client"\n\n` + chunk.code;
+        }
+      }
+    },
+  };
+}
+
+function copyAssets(): Plugin {
+  return {
+    name: 'copy-assets',
+    async buildEnd() {
+      copyPkgFiles();
+      await copyStyles();
+      await copyTailwind();
+      await buildDefaultTheme();
+      await fs.copy('npm', 'dist-npm');
+    },
+  };
+}
+
+async function copyStyles() {
+  const from = path.resolve(VIDSTACK_PKG_DIR, 'styles/player'),
+    to = path.resolve(DIST_NPM_DIR, 'player/styles');
+  await fs.copy(from, to);
+}
+
+async function copyTailwind() {
+  const tailwindFilePath = path.resolve(VIDSTACK_PKG_DIR, 'npm/tailwind.cjs'),
+    tailwindDTSFilePath = path.resolve(VIDSTACK_PKG_DIR, 'npm/tailwind.d.cts');
+  await fs.copyFile(tailwindFilePath, path.resolve(DIST_NPM_DIR, 'tailwind.cjs'));
+  await fs.copyFile(tailwindDTSFilePath, path.resolve(DIST_NPM_DIR, 'tailwind.d.cts'));
+}

package/src/components/announcer.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+import { composeRefs, createReactComponent, type ReactElementProps } from 'maverick.js/react';
+
+import { MediaAnnouncerInstance } from './primitives/instances';
+import { Primitive } from './primitives/nodes';
+
+/* -------------------------------------------------------------------------------------------------
+ * MediaAnnouncer
+ * -----------------------------------------------------------------------------------------------*/
+
+const MediaAnnouncerBridge = createReactComponent(MediaAnnouncerInstance, {
+  events: ['onChange'],
+});
+
+export interface MediaAnnouncerProps extends ReactElementProps<MediaAnnouncerInstance> {
+  ref?: React.Ref<HTMLElement>;
+}
+
+/**
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/display/announcer}
+ * @example
+ * ```tsx
+ * <MediaAnnouncer />
+ * ```
+ */
+const MediaAnnouncer = React.forwardRef<HTMLElement, MediaAnnouncerProps>(
+  ({ style, children, ...props }, forwardRef) => {
+    return (
+      <MediaAnnouncerBridge {...(props as Omit<MediaAnnouncerProps, 'ref'>)}>
+        {(props) => (
+          <Primitive.div
+            {...props}
+            style={{ display: 'contents', ...style }}
+            ref={composeRefs(props.ref as React.Ref<any>, forwardRef as React.Ref<any>)}
+          >
+            {children}
+          </Primitive.div>
+        )}
+      </MediaAnnouncerBridge>
+    );
+  },
+);
+
+MediaAnnouncer.displayName = 'MediaAnnouncer';
+export { MediaAnnouncer };

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

@@ -0,0 +1,231 @@
+import * as React from 'react';
+
+import { useSignal } from 'maverick.js/react';
+import { listenEvent, toggleClass } from 'maverick.js/std';
+
+import { useChapterTitle } from '../../../hooks/use-chapter-title';
+import { useResizeObserver, useTransitionActive } from '../../../hooks/use-dom';
+import { useMediaContext } from '../../../hooks/use-media-context';
+import { useMediaState } from '../../../hooks/use-media-state';
+import { createComputed } from '../../../hooks/use-signals';
+import * as Controls from '../../ui/controls';
+import { useLayoutName } from '../utils';
+import { i18n, useDefaultLayoutContext } from './context';
+import { createDefaultMediaLayout, type DefaultLayoutProps } from './media-layout';
+import {
+  slot,
+  useDefaultAudioLayoutSlots,
+  type DefaultAudioLayoutSlots,
+  type DefaultLayoutMenuSlotName,
+  type Slots,
+} from './slots';
+import { DefaultAnnouncer } from './ui/announcer';
+import {
+  DefaultCaptionButton,
+  DefaultDownloadButton,
+  DefaultPlayButton,
+  DefaultSeekButton,
+} from './ui/buttons';
+import { DefaultCaptions } from './ui/captions';
+import { DefaultControlsSpacer } from './ui/controls';
+import { DefaultChaptersMenu } from './ui/menus/chapters-menu';
+import { DefaultSettingsMenu } from './ui/menus/settings-menu';
+import { DefaultTimeSlider, DefaultVolumePopup } from './ui/sliders';
+import { DefaultTimeInvert } from './ui/time';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultAudioLayout
+ * -----------------------------------------------------------------------------------------------*/
+
+const MediaLayout = createDefaultMediaLayout({
+  type: 'audio',
+  smLayoutWhen({ width }) {
+    return width < 576;
+  },
+  renderLayout: () => <AudioLayout />,
+});
+
+export interface DefaultAudioLayoutProps extends DefaultLayoutProps<DefaultAudioLayoutSlots> {}
+
+/**
+ * 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 more out of the box.
+ *
+ * @attr data-match - Whether this layout is being used.
+ * @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).
+ * @example
+ * ```tsx
+ * <MediaPlayer src="audio.mp3">
+ *   <MediaProvider />
+ *   <DefaultAudioLayout icons={defaultLayoutIcons} />
+ * </MediaPlayer>
+ * ```
+ */
+function DefaultAudioLayout(props: DefaultAudioLayoutProps) {
+  const [scrubbing, setScrubbing] = React.useState(false),
+    $pointer = useMediaState('pointer');
+
+  const onStartScrubbing = React.useCallback((event: React.SyntheticEvent) => {
+    const { target } = event,
+      hasTimeSlider = !!(target instanceof HTMLElement && target.closest('.vds-time-slider'));
+    if (!hasTimeSlider) return;
+    event.nativeEvent.stopImmediatePropagation();
+    setScrubbing(true);
+  }, []);
+
+  const onStopScrubbing = React.useCallback(() => {
+    setScrubbing(false);
+  }, []);
+
+  React.useEffect(() => {
+    if (scrubbing) return listenEvent(window, 'pointerdown', onStopScrubbing);
+  }, [scrubbing, onStopScrubbing]);
+
+  return (
+    <MediaLayout
+      {...props}
+      data-scrubbing={scrubbing ? '' : null}
+      onPointerDown={scrubbing ? (e) => e.stopPropagation() : undefined}
+      onPointerDownCapture={$pointer === 'coarse' && !scrubbing ? onStartScrubbing : undefined}
+    />
+  );
+}
+
+DefaultAudioLayout.displayName = 'DefaultAudioLayout';
+export { DefaultAudioLayout };
+
+/* -------------------------------------------------------------------------------------------------
+ * AudioLayout
+ * -----------------------------------------------------------------------------------------------*/
+
+function AudioLayout() {
+  const slots = useDefaultAudioLayoutSlots();
+
+  useLayoutName('audio');
+
+  return (
+    <>
+      <DefaultAnnouncer />
+      <DefaultCaptions />
+      <Controls.Root className="vds-controls">
+        <Controls.Group className="vds-controls-group">
+          {slot(slots, 'seekBackwardButton', <DefaultSeekButton backward tooltip="top start" />)}
+          {slot(slots, 'playButton', <DefaultPlayButton tooltip="top center" />)}
+          {slot(slots, 'seekForwardButton', <DefaultSeekButton tooltip="top center" />)}
+          <DefaultAudioTitle />
+          {slot(slots, 'timeSlider', <DefaultTimeSlider />)}
+          <DefaultTimeInvert slots={slots} />
+          <DefaultVolumePopup orientation="vertical" tooltip="top" slots={slots} />
+          {slot(slots, 'captionButton', <DefaultCaptionButton tooltip="top center" />)}
+          {slot(slots, 'downloadButton', <DefaultDownloadButton />)}
+          <DefaultAudioMenus slots={slots} />
+        </Controls.Group>
+      </Controls.Root>
+    </>
+  );
+}
+
+AudioLayout.displayName = 'AudioLayout';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultAudioMenus
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultAudioMenus({ slots }: { slots?: Slots<DefaultLayoutMenuSlotName> }) {
+  const { isSmallLayout, noModal } = useDefaultLayoutContext(),
+    placement = noModal ? 'top end' : !isSmallLayout ? 'top end' : null;
+  return (
+    <>
+      {slot(
+        slots,
+        'chaptersMenu',
+        <DefaultChaptersMenu tooltip="top" placement={placement} portalClass="vds-audio-layout" />,
+      )}
+      {slot(
+        slots,
+        'settingsMenu',
+        <DefaultSettingsMenu
+          tooltip="top end"
+          placement={placement}
+          portalClass="vds-audio-layout"
+          slots={slots}
+        />,
+      )}
+    </>
+  );
+}
+
+DefaultAudioMenus.displayName = 'DefaultAudioMenus';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultAudioTitle
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultAudioTitle() {
+  const [rootEl, setRootEl] = React.useState<HTMLElement | null>(null),
+    media = useMediaContext(),
+    { translations } = useDefaultLayoutContext(),
+    [isTextOverflowing, setIsTextOverflowing] = React.useState(false);
+
+  const isContinued = createComputed(() => {
+    const { started, currentTime } = media.$state;
+    return started() || currentTime() > 0;
+  });
+
+  const $title = useSignal(
+    createComputed(() => {
+      const { title, ended } = media.$state;
+      if (!title()) return '';
+      const word = ended() ? 'Replay' : isContinued() ? 'Continue' : 'Play';
+      return `${i18n(translations, word)}: ${title()}`;
+    }),
+  );
+
+  const chapterTitle = useChapterTitle(),
+    $isContinued = useSignal(isContinued),
+    $chapterTitle = $isContinued ? chapterTitle : '',
+    isTransitionActive = useTransitionActive(rootEl);
+
+  React.useEffect(() => {
+    if (isTransitionActive && document.activeElement === document.body) {
+      media.player.el?.focus({ preventScroll: true });
+    }
+  }, []);
+
+  const onResize = React.useCallback(() => {
+    const el = rootEl,
+      isOverflowing = !!el && !isTransitionActive && el.clientWidth < el.children[0]!.clientWidth;
+    if (el) toggleClass(el, 'vds-marquee', isOverflowing);
+    setIsTextOverflowing(isOverflowing);
+  }, [rootEl, isTransitionActive]);
+
+  useResizeObserver(rootEl, onResize);
+
+  return $title ? (
+    <span className="vds-title" title={$title} ref={setRootEl}>
+      <AudioTitle title={$title} chapterTitle={$chapterTitle} />
+      {isTextOverflowing && !isTransitionActive ? (
+        <AudioTitle title={$title} chapterTitle={$chapterTitle} />
+      ) : null}
+    </span>
+  ) : (
+    <DefaultControlsSpacer />
+  );
+}
+
+DefaultAudioTitle.displayName = 'DefaultAudioTitle';
+
+function AudioTitle({ title, chapterTitle }: { title: string; chapterTitle: string }) {
+  const slots = useDefaultAudioLayoutSlots();
+  return (
+    <span className="vds-title-text">
+      {slot(slots, 'title', title)}
+      {slot(slots, 'chapterTitle', <span className="vds-chapter-title">{chapterTitle}</span>)}
+    </span>
+  );
+}
+
+AudioTitle.displayName = 'AudioTitle';

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import type { ReadSignal, WriteSignal } from 'maverick.js';
+
+import type { DefaultLayoutProps } from './media-layout';
+
+export const DefaultLayoutContext = React.createContext<DefaultLayoutContext>({} as any);
+DefaultLayoutContext.displayName = 'DefaultLayoutContext';
+
+interface DefaultLayoutContext extends DefaultLayoutProps {
+  layoutEl: ReadSignal<HTMLElement | null>;
+  isSmallLayout: boolean;
+  userPrefersAnnouncements: WriteSignal<boolean>;
+  userPrefersKeyboardAnimations: WriteSignal<boolean>;
+}
+
+export function useDefaultLayoutContext() {
+  return React.useContext(DefaultLayoutContext);
+}
+
+export function useDefaultLayoutWord(word: string) {
+  const { translations } = useDefaultLayoutContext();
+  return i18n(translations, word);
+}
+
+export function i18n(translations: any, word: string) {
+  return translations?.[word] ?? word;
+}

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

@@ -0,0 +1,13 @@
+import { useColorSchemePreference } from '../../../hooks/use-dom';
+import type { DefaultLayoutProps } from './media-layout';
+
+export function useColorSchemeClass(colorScheme: DefaultLayoutProps['colorScheme']) {
+  const systemColorPreference = useColorSchemePreference();
+  if (colorScheme === 'default') {
+    return null;
+  } else if (colorScheme === 'system') {
+    return systemColorPreference;
+  } else {
+    return colorScheme;
+  }
+}