@hanifhan1f/vidstack-react 1.12.13

package/src/components/layouts/default/icons.tsx

@@ -0,0 +1,225 @@
+import * as React from 'react';
+
+import accessibilityIconPaths from 'media-icons/dist/icons/accessibility.js';
+import airPlayIconPaths from 'media-icons/dist/icons/airplay.js';
+import arrowDownIconPaths from 'media-icons/dist/icons/arrow-down.js';
+import arrowLeftIconPaths from 'media-icons/dist/icons/arrow-left.js';
+import arrowUpIconPaths from 'media-icons/dist/icons/arrow-up.js';
+import chaptersIconPaths from 'media-icons/dist/icons/chapters.js';
+import checkIconPaths from 'media-icons/dist/icons/check.js';
+import arrowRightIconPaths from 'media-icons/dist/icons/chevron-right.js';
+import googleCastIconPaths from 'media-icons/dist/icons/chromecast.js';
+import ccOnIconPaths from 'media-icons/dist/icons/closed-captions-on.js';
+import ccIconPaths from 'media-icons/dist/icons/closed-captions.js';
+import downloadIconPaths from 'media-icons/dist/icons/download.js';
+import eyeIconPaths from 'media-icons/dist/icons/eye.js';
+import fastBackwardIconPaths from 'media-icons/dist/icons/fast-backward.js';
+import fastForwardIconPaths from 'media-icons/dist/icons/fast-forward.js';
+import exitFullscreenIconPaths from 'media-icons/dist/icons/fullscreen-exit.js';
+import enterFullscreenIconPaths from 'media-icons/dist/icons/fullscreen.js';
+import musicIconPaths from 'media-icons/dist/icons/music.js';
+import muteIconPaths from 'media-icons/dist/icons/mute.js';
+import noEyeIconPaths from 'media-icons/dist/icons/no-eye.js';
+import pauseIconPaths from 'media-icons/dist/icons/pause.js';
+import exitPIPIconPaths from 'media-icons/dist/icons/picture-in-picture-exit.js';
+import enterPIPIconPaths from 'media-icons/dist/icons/picture-in-picture.js';
+import playIconPaths from 'media-icons/dist/icons/play.js';
+import playbackIconPaths from 'media-icons/dist/icons/playback-speed-circle.js';
+import replayIconPaths from 'media-icons/dist/icons/replay.js';
+import seekBackwardIconPaths from 'media-icons/dist/icons/seek-backward-10.js';
+import seekForwardIconPaths from 'media-icons/dist/icons/seek-forward-10.js';
+import settingsIconPaths from 'media-icons/dist/icons/settings.js';
+import volumeHighIconPaths from 'media-icons/dist/icons/volume-high.js';
+import volumeLowIconPaths from 'media-icons/dist/icons/volume-low.js';
+
+import { Icon } from '../../../icon';
+
+function createIcon(paths: string) {
+  function DefaultLayoutIcon(props: DefaultLayoutIconProps) {
+    return <Icon paths={paths} {...props} />;
+  }
+
+  DefaultLayoutIcon.displayName = 'DefaultLayoutIcon';
+  return DefaultLayoutIcon;
+}
+
+export const defaultLayoutIcons: DefaultLayoutIcons = {
+  AirPlayButton: {
+    Default: createIcon(airPlayIconPaths),
+  },
+  GoogleCastButton: {
+    Default: createIcon(googleCastIconPaths),
+  },
+  PlayButton: {
+    Play: createIcon(playIconPaths),
+    Pause: createIcon(pauseIconPaths),
+    Replay: createIcon(replayIconPaths),
+  },
+  MuteButton: {
+    Mute: createIcon(muteIconPaths),
+    VolumeLow: createIcon(volumeLowIconPaths),
+    VolumeHigh: createIcon(volumeHighIconPaths),
+  },
+  CaptionButton: {
+    On: createIcon(ccOnIconPaths),
+    Off: createIcon(ccIconPaths),
+  },
+  PIPButton: {
+    Enter: createIcon(enterPIPIconPaths),
+    Exit: createIcon(exitPIPIconPaths),
+  },
+  FullscreenButton: {
+    Enter: createIcon(enterFullscreenIconPaths),
+    Exit: createIcon(exitFullscreenIconPaths),
+  },
+  SeekButton: {
+    Backward: createIcon(seekBackwardIconPaths),
+    Forward: createIcon(seekForwardIconPaths),
+  },
+  DownloadButton: {
+    Default: createIcon(downloadIconPaths),
+  },
+  Menu: {
+    Accessibility: createIcon(accessibilityIconPaths),
+    ArrowLeft: createIcon(arrowLeftIconPaths),
+    ArrowRight: createIcon(arrowRightIconPaths),
+    Audio: createIcon(musicIconPaths),
+    Chapters: createIcon(chaptersIconPaths),
+    Captions: createIcon(ccIconPaths),
+    Playback: createIcon(playbackIconPaths),
+    Settings: createIcon(settingsIconPaths),
+    AudioBoostUp: createIcon(volumeHighIconPaths),
+    AudioBoostDown: createIcon(volumeLowIconPaths),
+    SpeedUp: createIcon(fastForwardIconPaths),
+    SpeedDown: createIcon(fastBackwardIconPaths),
+    QualityUp: createIcon(arrowUpIconPaths),
+    QualityDown: createIcon(arrowDownIconPaths),
+    FontSizeUp: createIcon(arrowUpIconPaths),
+    FontSizeDown: createIcon(arrowDownIconPaths),
+    OpacityUp: createIcon(eyeIconPaths),
+    OpacityDown: createIcon(noEyeIconPaths),
+    RadioCheck: createIcon(checkIconPaths),
+  },
+  KeyboardDisplay: {
+    Play: createIcon(playIconPaths),
+    Pause: createIcon(pauseIconPaths),
+    Mute: createIcon(muteIconPaths),
+    VolumeUp: createIcon(volumeHighIconPaths),
+    VolumeDown: createIcon(volumeLowIconPaths),
+    EnterFullscreen: createIcon(enterFullscreenIconPaths),
+    ExitFullscreen: createIcon(exitFullscreenIconPaths),
+    EnterPiP: createIcon(enterPIPIconPaths),
+    ExitPiP: createIcon(exitPIPIconPaths),
+    CaptionsOn: createIcon(ccOnIconPaths),
+    CaptionsOff: createIcon(ccIconPaths),
+    SeekForward: createIcon(fastForwardIconPaths),
+    SeekBackward: createIcon(fastBackwardIconPaths),
+  },
+};
+
+export interface DefaultLayoutIconProps
+  extends React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> {}
+
+export interface DefaultLayoutIcon {
+  (props: DefaultLayoutIconProps): React.ReactNode;
+}
+
+export interface DefaultAirPlayButtonIcons {
+  Default: DefaultLayoutIcon;
+  Connecting?: DefaultLayoutIcon;
+  Connected?: DefaultLayoutIcon;
+}
+
+export interface DefaultGoogleCastButtonIcons {
+  Default: DefaultLayoutIcon;
+  Connecting?: DefaultLayoutIcon;
+  Connected?: DefaultLayoutIcon;
+}
+
+export interface DefaultPlayButtonIcons {
+  Play: DefaultLayoutIcon;
+  Pause: DefaultLayoutIcon;
+  Replay: DefaultLayoutIcon;
+}
+
+export interface DefaultMuteButtonIcons {
+  Mute: DefaultLayoutIcon;
+  VolumeLow: DefaultLayoutIcon;
+  VolumeHigh: DefaultLayoutIcon;
+}
+
+export interface DefaultCaptionButtonIcons {
+  On: DefaultLayoutIcon;
+  Off: DefaultLayoutIcon;
+}
+
+export interface DefaultPIPButtonIcons {
+  Enter: DefaultLayoutIcon;
+  Exit: DefaultLayoutIcon;
+}
+
+export interface DefaultFullscreenButtonIcons {
+  Enter: DefaultLayoutIcon;
+  Exit: DefaultLayoutIcon;
+}
+
+export interface DefaultSeekButtonIcons {
+  Backward: DefaultLayoutIcon;
+  Forward: DefaultLayoutIcon;
+}
+
+export interface DefaultDownloadButtonIcons {
+  Default: DefaultLayoutIcon;
+}
+
+export interface DefaultMenuIcons {
+  Accessibility: DefaultLayoutIcon;
+  ArrowLeft: DefaultLayoutIcon;
+  ArrowRight: DefaultLayoutIcon;
+  Audio: DefaultLayoutIcon;
+  AudioBoostUp: DefaultLayoutIcon;
+  AudioBoostDown: DefaultLayoutIcon;
+  Chapters: DefaultLayoutIcon;
+  Captions: DefaultLayoutIcon;
+  Playback: DefaultLayoutIcon;
+  Settings: DefaultLayoutIcon;
+  SpeedUp: DefaultLayoutIcon;
+  SpeedDown: DefaultLayoutIcon;
+  QualityUp: DefaultLayoutIcon;
+  QualityDown: DefaultLayoutIcon;
+  FontSizeUp: DefaultLayoutIcon;
+  FontSizeDown: DefaultLayoutIcon;
+  OpacityUp: DefaultLayoutIcon;
+  OpacityDown: DefaultLayoutIcon;
+  RadioCheck: DefaultLayoutIcon;
+}
+
+export interface DefaultKeyboardDisplayIcons {
+  Play: DefaultLayoutIcon;
+  Pause: DefaultLayoutIcon;
+  Mute: DefaultLayoutIcon;
+  VolumeUp: DefaultLayoutIcon;
+  VolumeDown: DefaultLayoutIcon;
+  EnterFullscreen: DefaultLayoutIcon;
+  ExitFullscreen: DefaultLayoutIcon;
+  EnterPiP: DefaultLayoutIcon;
+  ExitPiP: DefaultLayoutIcon;
+  CaptionsOn: DefaultLayoutIcon;
+  CaptionsOff: DefaultLayoutIcon;
+  SeekForward: DefaultLayoutIcon;
+  SeekBackward: DefaultLayoutIcon;
+}
+
+export interface DefaultLayoutIcons {
+  AirPlayButton: DefaultAirPlayButtonIcons;
+  GoogleCastButton: DefaultGoogleCastButtonIcons;
+  PlayButton: DefaultPlayButtonIcons;
+  MuteButton: DefaultMuteButtonIcons;
+  CaptionButton: DefaultCaptionButtonIcons;
+  PIPButton: DefaultPIPButtonIcons;
+  FullscreenButton: DefaultFullscreenButtonIcons;
+  SeekButton: DefaultSeekButtonIcons;
+  DownloadButton?: DefaultDownloadButtonIcons;
+  Menu: DefaultMenuIcons;
+  KeyboardDisplay?: Partial<DefaultKeyboardDisplayIcons>;
+}

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

@@ -0,0 +1,11 @@
+export type {
+  DefaultLayoutSlots,
+  DefaultAudioLayoutSlots,
+  DefaultVideoLayoutSlots,
+  DefaultLayoutSlotName,
+  DefaultLayoutMenuSlotName,
+} from './slots';
+export type { DefaultLayoutTranslations, DefaultLayoutWord } from 'vidstack';
+export type { DefaultLayoutProps } from './media-layout';
+export * from './context';
+export * from './ui';

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

@@ -0,0 +1,259 @@
+import * as React from 'react';
+
+import { composeRefs, useSignal } from 'maverick.js/react';
+import { isBoolean } from 'maverick.js/std';
+import {
+  type DefaultLayoutTranslations,
+  type FileDownloadInfo,
+  type MediaPlayerQuery,
+  type MediaStreamType,
+  type ThumbnailSrc,
+} from 'vidstack';
+
+import { useMediaContext } from '../../../hooks/use-media-context';
+import { useMediaState } from '../../../hooks/use-media-state';
+import { createComputed, createSignal } from '../../../hooks/use-signals';
+import type { PrimitivePropsWithRef } from '../../primitives/nodes';
+import { DefaultLayoutContext } from './context';
+import { useColorSchemeClass } from './hooks';
+import type { DefaultLayoutIcons } from './icons';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultMediaLayout
+ * -----------------------------------------------------------------------------------------------*/
+
+export interface DefaultLayoutProps<Slots = unknown> extends PrimitivePropsWithRef<'div'> {
+  children?: React.ReactNode;
+  /**
+   * The icons to be rendered and displayed inside the layout.
+   */
+  icons: DefaultLayoutIcons;
+  /**
+   * Whether light or dark color theme should be active. Defaults to user operating system
+   * preference.
+   *
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme}
+   */
+  colorScheme?: 'light' | 'dark' | 'system' | 'default';
+  /**
+   * Sets the download URL and filename for the download button.
+   */
+  download?: FileDownloadInfo;
+  /**
+   * Specifies the number of milliseconds to wait before tooltips are visible after interacting
+   * with a control.
+   *
+   * @defaultValue 700
+   */
+  showTooltipDelay?: number;
+  /**
+   * Specifies the number of milliseconds to wait before menus are visible after opening them.
+   *
+   * @defaultValue 0
+   */
+  showMenuDelay?: number;
+  /**
+   * Whether the bitrate should be hidden in the settings quality menu next to each option.
+   *
+   * @defaultValue false
+   */
+  hideQualityBitrate?: boolean;
+  /**
+   * Determines when the small (e.g., mobile) UI should be displayed.
+   *
+   * @defaultValue `({ width, height }) => width < 576 || height < 380`
+   */
+  smallLayoutWhen?: boolean | MediaPlayerQuery;
+  /**
+   * The thumbnails resource.
+   *
+   * @see {@link https://www.vidstack.io/docs/wc/player/core-concepts/loading#thumbnails}
+   */
+  thumbnails?: ThumbnailSrc;
+  /**
+   * Translation map from english to your desired language for words used throughout the layout.
+   */
+  translations?: Partial<DefaultLayoutTranslations> | null;
+  /**
+   * A document query selector string or `HTMLElement` to mount menus inside.
+   *
+   * @defaultValue `document.body`
+   */
+  menuContainer?: string | HTMLElement | null;
+  /**
+   * Specifies whether menu buttons should be placed in the top or bottom controls group. This
+   * only applies to the large video layout.
+   */
+  menuGroup?: 'top' | 'bottom';
+  /**
+   * Disable audio boost slider in the settings menu.
+   */
+  noAudioGain?: boolean;
+  /**
+   * The audio gain options to be displayed in the settings menu.
+   */
+  audioGains?: number[] | { min: number; max: number; step: number };
+  /**
+   * Whether modal menus should be disabled when the small layout is active. A modal menu is
+   * a floating panel that floats up from the bottom of the screen (outside of the player). It's
+   * enabled by default as it provides a better user experience for touch devices.
+   */
+  noModal?: boolean;
+  /**
+   * Whether to disable scrubbing by touch swiping left or right on the player canvas.
+   */
+  noScrubGesture?: boolean;
+  /**
+   * The minimum width of the slider to start displaying slider chapters when available.
+   */
+  sliderChaptersMinWidth?: number;
+  /**
+   * Whether the time slider should be disabled.
+   */
+  disableTimeSlider?: boolean;
+  /**
+   * Whether all gestures such as press to play or seek should not be active.
+   */
+  noGestures?: boolean;
+  /**
+   * Whether keyboard actions should not be displayed.
+   */
+  noKeyboardAnimations?: boolean;
+  /**
+   * The playback rate options to be displayed in the settings menu.
+   */
+  playbackRates?: number[] | { min: number; max: number; step: number };
+  /**
+   * The number of seconds to seek forward or backward when pressing the seek button or using
+   * keyboard shortcuts.
+   */
+  seekStep?: number;
+  /**
+   * Provide additional content to be inserted in specific positions.
+   */
+  slots?: Slots;
+}
+
+export interface CreateDefaultMediaLayout {
+  type: 'audio' | 'video';
+  smLayoutWhen: MediaPlayerQuery;
+  renderLayout: (props: {
+    streamType: MediaStreamType;
+    isLoadLayout: boolean;
+    isSmallLayout: boolean;
+  }) => React.ReactNode;
+}
+
+export function createDefaultMediaLayout({
+  type,
+  smLayoutWhen,
+  renderLayout,
+}: CreateDefaultMediaLayout) {
+  const Layout = React.forwardRef<HTMLDivElement, DefaultLayoutProps>(
+    (
+      {
+        children,
+        className,
+        disableTimeSlider = false,
+        hideQualityBitrate = false,
+        icons,
+        colorScheme = 'system',
+        download = null,
+        menuContainer = null,
+        menuGroup = 'bottom',
+        noAudioGain = false,
+        audioGains = { min: 0, max: 300, step: 25 },
+        noGestures = false,
+        noKeyboardAnimations = false,
+        noModal = false,
+        noScrubGesture,
+        playbackRates = { min: 0, max: 2, step: 0.25 },
+        seekStep = 10,
+        showMenuDelay,
+        showTooltipDelay = 700,
+        sliderChaptersMinWidth = 325,
+        slots,
+        smallLayoutWhen = smLayoutWhen,
+        thumbnails = null,
+        translations,
+        ...props
+      },
+      forwardRef,
+    ) => {
+      const media = useMediaContext(),
+        $load = useSignal(media.$props.load),
+        $canLoad = useMediaState('canLoad'),
+        $viewType = useMediaState('viewType'),
+        $streamType = useMediaState('streamType'),
+        $smallWhen = createComputed(() => {
+          return isBoolean(smallLayoutWhen) ? smallLayoutWhen : smallLayoutWhen(media.player.state);
+        }, [smallLayoutWhen]),
+        userPrefersAnnouncements = createSignal(true),
+        userPrefersKeyboardAnimations = createSignal(true),
+        isMatch = $viewType === type,
+        isSmallLayout = $smallWhen(),
+        isForcedLayout = isBoolean(smallLayoutWhen),
+        isLoadLayout = $load === 'play' && !$canLoad,
+        canRender = $canLoad || isForcedLayout || isLoadLayout,
+        colorSchemeClass = useColorSchemeClass(colorScheme),
+        layoutEl = createSignal<HTMLElement | null>(null);
+
+      useSignal($smallWhen);
+
+      return (
+        <div
+          {...props}
+          className={
+            `vds-${type}-layout` +
+            (colorSchemeClass ? ` ${colorSchemeClass}` : '') +
+            (className ? ` ${className}` : '')
+          }
+          data-match={isMatch ? '' : null}
+          data-sm={isSmallLayout ? '' : null}
+          data-lg={!isSmallLayout ? '' : null}
+          data-size={isSmallLayout ? 'sm' : 'lg'}
+          data-no-scrub-gesture={noScrubGesture ? '' : null}
+          ref={composeRefs(layoutEl.set as any, forwardRef)}
+        >
+          {canRender && isMatch ? (
+            <DefaultLayoutContext.Provider
+              value={{
+                disableTimeSlider,
+                hideQualityBitrate,
+                icons: icons,
+                colorScheme,
+                download,
+                isSmallLayout,
+                menuContainer,
+                menuGroup,
+                noAudioGain,
+                audioGains,
+                layoutEl,
+                noGestures,
+                noKeyboardAnimations,
+                noModal,
+                noScrubGesture,
+                showMenuDelay,
+                showTooltipDelay,
+                sliderChaptersMinWidth,
+                slots,
+                seekStep,
+                playbackRates,
+                thumbnails,
+                translations,
+                userPrefersAnnouncements,
+                userPrefersKeyboardAnimations,
+              }}
+            >
+              {renderLayout({ streamType: $streamType, isSmallLayout, isLoadLayout })}
+              {children}
+            </DefaultLayoutContext.Provider>
+          ) : null}
+        </div>
+      );
+    },
+  );
+
+  Layout.displayName = 'DefaultMediaLayout';
+  return Layout;
+}

package/src/components/layouts/default/slots.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+
+import { isUndefined, uppercaseFirstChar } from 'maverick.js/std';
+
+import { DefaultLayoutContext } from './context';
+
+export type SlotPositions<Name extends string> =
+  | `before${Capitalize<Name>}`
+  | Name
+  | `after${Capitalize<Name>}`;
+
+export type Slots<Names extends string> = {
+  [slotName in SlotPositions<Names>]?: React.ReactNode;
+};
+
+export type DefaultLayoutSlotName =
+  | 'bufferingIndicator'
+  | 'captionButton'
+  | 'captions'
+  | 'title'
+  | 'chapterTitle'
+  | 'currentTime'
+  | 'timeDivider'
+  | 'endTime'
+  | 'fullscreenButton'
+  | 'liveButton'
+  | 'livePlayButton'
+  | 'muteButton'
+  | 'pipButton'
+  | 'airPlayButton'
+  | 'googleCastButton'
+  | 'downloadButton'
+  | 'playButton'
+  | 'loadButton'
+  | 'seekBackwardButton'
+  | 'seekForwardButton'
+  | 'startDuration'
+  | 'timeSlider'
+  | 'volumeSlider'
+  | 'topControlsGroupStart'
+  | 'topControlsGroupCenter'
+  | 'topControlsGroupEnd'
+  | 'centerControlsGroupStart'
+  | 'centerControlsGroupCenter'
+  | 'centerControlsGroupEnd'
+  | DefaultLayoutMenuSlotName;
+
+export type DefaultLayoutMenuSlotName =
+  | 'chaptersMenu'
+  | 'settingsMenu'
+  /** @deprecated - use `settingsMenuItemsStart` */
+  | 'settingsMenuStartItems'
+  /** @deprecated - use `settingsMenuItemsEnd` */
+  | 'settingsMenuEndItems'
+  | 'settingsMenuItemsStart'
+  | 'settingsMenuItemsEnd'
+  | 'playbackMenuItemsStart'
+  | 'playbackMenuItemsEnd'
+  | 'playbackMenuLoop'
+  | 'accessibilityMenuItemsStart'
+  | 'accessibilityMenuItemsEnd'
+  | 'audioMenuItemsStart'
+  | 'audioMenuItemsEnd'
+  | 'captionsMenuItemsStart'
+  | 'captionsMenuItemsEnd';
+
+export interface DefaultLayoutSlots extends Slots<DefaultLayoutSlotName> {}
+
+export interface DefaultAudioLayoutSlots extends DefaultLayoutSlots {}
+
+export interface DefaultVideoLayoutSlots extends DefaultLayoutSlots {
+  smallLayout?: DefaultLayoutSlots;
+  largeLayout?: DefaultLayoutSlots;
+}
+
+export function useDefaultAudioLayoutSlots() {
+  return React.useContext(DefaultLayoutContext).slots as DefaultAudioLayoutSlots | undefined;
+}
+
+export function useDefaultVideoLayoutSlots() {
+  return React.useContext(DefaultLayoutContext).slots as DefaultVideoLayoutSlots | undefined;
+}
+
+export function slot<T>(
+  slots: T | undefined,
+  name: keyof T,
+  defaultValue: React.ReactNode,
+): React.ReactNode {
+  const slot = slots?.[name],
+    capitalizedName = uppercaseFirstChar(name as string);
+  return (
+    <>
+      {slots?.[`before${capitalizedName}`]}
+      {isUndefined(slot) ? defaultValue : slot}
+      {slots?.[`after${capitalizedName}`]}
+    </>
+  );
+}

package/src/components/layouts/default/ui/announcer.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { useSignal } from 'maverick.js/react';
+
+import { MediaAnnouncer } from '../../../announcer';
+import { useDefaultLayoutContext } from '../context';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultAnnouncer
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultAnnouncer() {
+  const { userPrefersAnnouncements, translations } = useDefaultLayoutContext(),
+    $userPrefersAnnouncements = useSignal(userPrefersAnnouncements);
+
+  if (!$userPrefersAnnouncements) return null;
+
+  return <MediaAnnouncer translations={translations} />;
+}
+
+DefaultAnnouncer.displayName = 'DefaultAnnouncer';
+export { DefaultAnnouncer };