@hanifhan1f/vidstack-react 1.12.13

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

@@ -0,0 +1,136 @@
+import * as React from 'react';
+
+import { useSignal } from 'maverick.js/react';
+import type { SliderOrientation, TooltipPlacement } from 'vidstack';
+
+import { useActive, useResizeObserver } from '../../../../hooks/use-dom';
+import { useMediaState } from '../../../../hooks/use-media-state';
+import { isRemotionSrc } from '../../../../providers/remotion/type-check';
+import type { TimeSliderInstance } from '../../../primitives/instances';
+import * as TimeSlider from '../../../ui/sliders/time-slider';
+import * as VolumeSlider from '../../../ui/sliders/volume-slider';
+import { RemotionSliderThumbnail } from '../../remotion-ui';
+import { useDefaultLayoutContext, useDefaultLayoutWord } from '../context';
+import { slot, type DefaultLayoutSlots } from '../slots';
+import { DefaultMuteButton } from './buttons';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultVolumePopup
+ * -----------------------------------------------------------------------------------------------*/
+
+export interface DefaultVolumePopupProps {
+  slots?: DefaultLayoutSlots;
+  tooltip: TooltipPlacement;
+  orientation: SliderOrientation;
+}
+
+function DefaultVolumePopup({ tooltip, orientation, slots }: DefaultVolumePopupProps) {
+  const $pointer = useMediaState('pointer'),
+    $muted = useMediaState('muted'),
+    $canSetVolume = useMediaState('canSetVolume'),
+    [rootEl, setRootEl] = React.useState<HTMLElement | null>(null),
+    isRootActive = useActive(rootEl),
+    muteButton = slot(slots, 'muteButton', <DefaultMuteButton tooltip={tooltip} />);
+
+  if (!$canSetVolume) {
+    return muteButton;
+  }
+
+  return $pointer === 'coarse' && !$muted ? null : (
+    <div className="vds-volume" data-active={isRootActive ? '' : null} ref={setRootEl}>
+      {muteButton}
+      <div className="vds-volume-popup">
+        {slot(slots, 'volumeSlider', <DefaultVolumeSlider orientation={orientation} />)}
+      </div>
+    </div>
+  );
+}
+
+DefaultVolumePopup.displayName = 'DefaultVolumePopup';
+export { DefaultVolumePopup };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultVolumeSlider
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultVolumeSlider(props: VolumeSlider.RootProps) {
+  const label = useDefaultLayoutWord('Volume');
+  return (
+    <VolumeSlider.Root className="vds-volume-slider vds-slider" aria-label={label} {...props}>
+      <VolumeSlider.Track className="vds-slider-track" />
+      <VolumeSlider.TrackFill className="vds-slider-track-fill vds-slider-track" />
+      <VolumeSlider.Thumb className="vds-slider-thumb" />
+      <VolumeSlider.Preview className="vds-slider-preview" noClamp>
+        <VolumeSlider.Value className="vds-slider-value" />
+      </VolumeSlider.Preview>
+    </VolumeSlider.Root>
+  );
+}
+
+DefaultVolumeSlider.displayName = 'DefaultVolumeSlider';
+export { DefaultVolumeSlider };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultTimeSlider
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultTimeSlider() {
+  const [instance, setInstance] = React.useState<TimeSliderInstance | null>(null),
+    [width, setWidth] = React.useState(0),
+    $src = useMediaState('currentSrc'),
+    { thumbnails, sliderChaptersMinWidth, disableTimeSlider, seekStep, noScrubGesture } =
+      useDefaultLayoutContext(),
+    label = useDefaultLayoutWord('Seek'),
+    $RemotionSliderThumbnail = useSignal(RemotionSliderThumbnail);
+
+  const onResize = React.useCallback(() => {
+    const el = instance?.el;
+    el && setWidth(el.clientWidth);
+  }, [instance]);
+
+  useResizeObserver(instance?.el, onResize);
+
+  return (
+    <TimeSlider.Root
+      className="vds-time-slider vds-slider"
+      aria-label={label}
+      disabled={disableTimeSlider}
+      noSwipeGesture={noScrubGesture}
+      keyStep={seekStep}
+      ref={setInstance}
+    >
+      <TimeSlider.Chapters
+        className="vds-slider-chapters"
+        disabled={width < sliderChaptersMinWidth!}
+      >
+        {(cues, forwardRef) =>
+          cues.map((cue) => (
+            <div className="vds-slider-chapter" key={cue.startTime} ref={forwardRef}>
+              <TimeSlider.Track className="vds-slider-track" />
+              <TimeSlider.TrackFill className="vds-slider-track-fill vds-slider-track" />
+              <TimeSlider.Progress className="vds-slider-progress vds-slider-track" />
+            </div>
+          ))
+        }
+      </TimeSlider.Chapters>
+      <TimeSlider.Thumb className="vds-slider-thumb" />
+      <TimeSlider.Preview className="vds-slider-preview">
+        {thumbnails ? (
+          <TimeSlider.Thumbnail.Root
+            src={thumbnails}
+            className="vds-slider-thumbnail vds-thumbnail"
+          >
+            <TimeSlider.Thumbnail.Img />
+          </TimeSlider.Thumbnail.Root>
+        ) : $RemotionSliderThumbnail && isRemotionSrc($src) ? (
+          <$RemotionSliderThumbnail className="vds-slider-thumbnail vds-thumbnail" />
+        ) : null}
+        <TimeSlider.ChapterTitle className="vds-slider-chapter-title" />
+        <TimeSlider.Value className="vds-slider-value" />
+      </TimeSlider.Preview>
+    </TimeSlider.Root>
+  );
+}
+
+DefaultTimeSlider.displayName = 'DefaultTimeSlider';
+export { DefaultTimeSlider };

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

@@ -0,0 +1,73 @@
+import * as React from 'react';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultTimeGroup
+ * -----------------------------------------------------------------------------------------------*/
+
+import { useMediaState } from '../../../../hooks/use-media-state';
+import { Time } from '../../../ui/time';
+import { slot } from '../slots';
+import { DefaultLiveButton } from './buttons';
+
+interface DefaultTimeGroupSlots {
+  currentTime?: React.ReactNode;
+  timeDivider?: React.ReactNode;
+  endTime?: React.ReactNode;
+}
+
+function DefaultTimeGroup({ slots }: { slots?: DefaultTimeGroupSlots }) {
+  const $duration = useMediaState('duration');
+
+  if (!$duration) return null;
+
+  return (
+    <div className="vds-time-group">
+      {slot(slots, 'currentTime', <Time className="vds-time" type="current" />)}
+      {slot(slots, 'timeDivider', <div className="vds-time-divider">/</div>)}
+      {slot(slots, 'endTime', <Time className="vds-time" type="duration" />)}
+    </div>
+  );
+}
+
+DefaultTimeGroup.displayName = 'DefaultTimeGroup';
+export { DefaultTimeGroup };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultTimeInfo
+ * -----------------------------------------------------------------------------------------------*/
+
+interface DefaultTimeInfoSlots extends DefaultTimeGroupSlots {
+  liveButton?: React.ReactNode;
+}
+
+function DefaultTimeInfo({ slots }: { slots?: DefaultTimeInfoSlots }) {
+  const $live = useMediaState('live');
+  return $live ? (
+    slot(slots, 'liveButton', <DefaultLiveButton />)
+  ) : (
+    <DefaultTimeGroup slots={slots} />
+  );
+}
+
+DefaultTimeInfo.displayName = 'DefaultTimeInfo';
+export { DefaultTimeInfo };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultTimeInvert
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultTimeInvert({ slots }: { slots?: DefaultTimeInfoSlots }) {
+  const $live = useMediaState('live'),
+    $duration = useMediaState('duration');
+
+  return $live
+    ? slot(slots, 'liveButton', <DefaultLiveButton />)
+    : slot(
+        slots,
+        'endTime',
+        $duration ? <Time className="vds-time" type="current" toggle remainder /> : null,
+      );
+}
+
+DefaultTimeInvert.displayName = 'DefaultTimeInvert';
+export { DefaultTimeInvert };

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import { useActiveTextTrack } from '../../../../hooks/use-active-text-track';
+import { useMediaState } from '../../../../hooks/use-media-state';
+import { ChapterTitle } from '../../../ui/chapter-title';
+import { Title } from '../../../ui/title';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultTitle
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultTitle() {
+  const $started = useMediaState('started'),
+    $title = useMediaState('title'),
+    $hasChapters = useActiveTextTrack('chapters');
+  return $hasChapters && ($started || !$title) ? (
+    <ChapterTitle className="vds-chapter-title" />
+  ) : (
+    <Title className="vds-chapter-title" />
+  );
+}
+
+DefaultTitle.displayName = 'DefaultTitle';
+export { DefaultTitle };

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import type { TooltipPlacement } from 'vidstack';
+
+import * as Tooltip from '../../../ui/tooltip';
+import { useDefaultLayoutContext } from '../context';
+
+export interface DefaultTooltipProps {
+  content: string;
+  placement?: TooltipPlacement;
+  children: React.ReactNode;
+}
+
+function DefaultTooltip({ content, placement, children }: DefaultTooltipProps) {
+  const { showTooltipDelay } = useDefaultLayoutContext();
+  return (
+    <Tooltip.Root showDelay={showTooltipDelay}>
+      <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
+      <Tooltip.Content className="vds-tooltip-content" placement={placement}>
+        {content}
+      </Tooltip.Content>
+    </Tooltip.Root>
+  );
+}
+
+DefaultTooltip.displayName = 'DefaultTooltip';
+export { DefaultTooltip };

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

@@ -0,0 +1,8 @@
+export * from './audio-layout';
+export * from './video-layout';
+export * from './ui/menus/items/menu-checkbox';
+export * from './ui/menus/items/menu-items';
+export * from './ui/menus/items/menu-slider';
+export * from './ui/tooltip';
+export * from './icons';
+export { DefaultKeyboardDisplay, type DefaultKeyboardDisplayProps } from './ui/keyboard-display';

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

@@ -0,0 +1,344 @@
+import * as React from 'react';
+
+import { useSignal } from 'maverick.js/react';
+
+import { useMediaState } from '../../../hooks/use-media-state';
+import * as Controls from '../../ui/controls';
+import { Gesture } from '../../ui/gesture';
+import * as Spinner from '../../ui/spinner';
+import { Time } from '../../ui/time';
+import { useLayoutName } from '../utils';
+import { useDefaultLayoutContext } from './context';
+import { createDefaultMediaLayout, type DefaultLayoutProps } from './media-layout';
+import {
+  slot,
+  useDefaultVideoLayoutSlots,
+  type DefaultLayoutMenuSlotName,
+  type DefaultVideoLayoutSlots,
+  type Slots,
+} from './slots';
+import { DefaultAnnouncer } from './ui/announcer';
+import {
+  DefaultAirPlayButton,
+  DefaultCaptionButton,
+  DefaultDownloadButton,
+  DefaultFullscreenButton,
+  DefaultGoogleCastButton,
+  DefaultPIPButton,
+  DefaultPlayButton,
+} from './ui/buttons';
+import { DefaultCaptions } from './ui/captions';
+import { DefaultControlsSpacer } from './ui/controls';
+import { DefaultKeyboardDisplay } from './ui/keyboard-display';
+import { DefaultChaptersMenu } from './ui/menus/chapters-menu';
+import { DefaultSettingsMenu } from './ui/menus/settings-menu';
+import { DefaultTimeSlider, DefaultVolumePopup } from './ui/sliders';
+import { DefaultTimeInfo } from './ui/time';
+import { DefaultTitle } from './ui/title';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultVideoLayout
+ * -----------------------------------------------------------------------------------------------*/
+
+const MediaLayout = createDefaultMediaLayout({
+  type: 'video',
+  smLayoutWhen({ width, height }) {
+    return width < 576 || height < 380;
+  },
+  renderLayout(props) {
+    return <VideoLayout {...props} />;
+  },
+});
+
+export interface DefaultVideoLayoutProps extends DefaultLayoutProps<DefaultVideoLayoutSlots> {}
+
+/**
+ * The video layout is our production-ready UI that's displayed when the media view type is set to
+ * 'video'. It includes support for picture-in-picture, fullscreen, slider chapters, slider
+ * previews, captions, audio/quality settings, 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="video.mp4">
+ *   <MediaProvider />
+ *   <DefaultVideoLayout thumbnails="/thumbnails.vtt" icons={defaultLayoutIcons} />
+ * </MediaPlayer>
+ * ```
+ */
+function DefaultVideoLayout(props: DefaultVideoLayoutProps) {
+  return <MediaLayout {...props} />;
+}
+
+DefaultVideoLayout.displayName = 'DefaultVideoLayout';
+export { DefaultVideoLayout };
+
+/* -------------------------------------------------------------------------------------------------
+ * VideoLayout
+ * -----------------------------------------------------------------------------------------------*/
+
+function VideoLayout({ streamType, isLoadLayout, isSmallLayout }) {
+  useLayoutName('video');
+
+  return isLoadLayout ? (
+    <DefaultVideoLoadLayout />
+  ) : streamType === 'unknown' ? (
+    <DefaultBufferingIndicator />
+  ) : isSmallLayout ? (
+    <DefaultVideoSmallLayout />
+  ) : (
+    <DefaultVideoLargeLayout />
+  );
+}
+
+VideoLayout.displayName = 'VideoLayout';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultVideoLargeLayout
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultVideoLargeLayout() {
+  const { menuGroup } = useDefaultLayoutContext(),
+    baseSlots = useDefaultVideoLayoutSlots(),
+    slots = { ...baseSlots, ...baseSlots?.largeLayout };
+  return (
+    <>
+      <DefaultAnnouncer />
+      <DefaultVideoGestures />
+      <DefaultVideoKeyboardDisplay />
+      {slot(slots, 'bufferingIndicator', <DefaultBufferingIndicator />)}
+      {slot(slots, 'captions', <DefaultCaptions />)}
+      <Controls.Root className="vds-controls">
+        <Controls.Group className="vds-controls-group">
+          {slot(slots, 'topControlsGroupStart', null)}
+          <DefaultControlsSpacer />
+          {slot(slots, 'topControlsGroupCenter', null)}
+          <DefaultControlsSpacer />
+          {slot(slots, 'topControlsGroupEnd', null)}
+          {menuGroup === 'top' && <DefaultVideoMenus slots={slots} />}
+        </Controls.Group>
+
+        <DefaultControlsSpacer />
+
+        <Controls.Group className="vds-controls-group">
+          {slot(slots, 'centerControlsGroupStart', null)}
+          <DefaultControlsSpacer />
+          {slot(slots, 'centerControlsGroupCenter', null)}
+          <DefaultControlsSpacer />
+          {slot(slots, 'centerControlsGroupEnd', null)}
+        </Controls.Group>
+
+        <DefaultControlsSpacer />
+
+        <Controls.Group className="vds-controls-group">
+          {slot(slots, 'timeSlider', <DefaultTimeSlider />)}
+        </Controls.Group>
+
+        <Controls.Group className="vds-controls-group">
+          {slot(slots, 'playButton', <DefaultPlayButton tooltip="top start" />)}
+          <DefaultVolumePopup orientation="horizontal" tooltip="top" slots={slots} />
+          <DefaultTimeInfo slots={slots} />
+          {slot(slots, 'chapterTitle', <DefaultTitle />)}
+          {slot(slots, 'captionButton', <DefaultCaptionButton tooltip="top" />)}
+          {menuGroup === 'bottom' && <DefaultVideoMenus slots={slots} />}
+          {slot(slots, 'airPlayButton', <DefaultAirPlayButton tooltip="top" />)}
+          {slot(slots, 'googleCastButton', <DefaultGoogleCastButton tooltip="top" />)}
+          {slot(slots, 'downloadButton', <DefaultDownloadButton />)}
+          {slot(slots, 'pipButton', <DefaultPIPButton tooltip="top" />)}
+          {slot(slots, 'fullscreenButton', <DefaultFullscreenButton tooltip="top end" />)}
+        </Controls.Group>
+      </Controls.Root>
+    </>
+  );
+}
+
+DefaultVideoLargeLayout.displayName = 'DefaultVideoLargeLayout';
+export { DefaultVideoLargeLayout };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultVideoSmallLayout
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultVideoSmallLayout() {
+  const baseSlots = useDefaultVideoLayoutSlots(),
+    slots = { ...baseSlots, ...baseSlots?.smallLayout };
+  return (
+    <>
+      <DefaultAnnouncer />
+      <DefaultVideoGestures />
+      <DefaultVideoKeyboardDisplay />
+      {slot(slots, 'bufferingIndicator', <DefaultBufferingIndicator />)}
+      {slot(slots, 'captions', <DefaultCaptions />)}
+      <Controls.Root className="vds-controls">
+        <Controls.Group className="vds-controls-group">
+          {slot(slots, 'topControlsGroupStart', null)}
+          {slot(slots, 'airPlayButton', <DefaultAirPlayButton tooltip="top start" />)}
+          {slot(slots, 'googleCastButton', <DefaultGoogleCastButton tooltip="top start" />)}
+          <DefaultControlsSpacer />
+          {slot(slots, 'topControlsGroupCenter', null)}
+          <DefaultControlsSpacer />
+          {slot(slots, 'captionButton', <DefaultCaptionButton tooltip="bottom" />)}
+          {slot(slots, 'downloadButton', <DefaultDownloadButton />)}
+          <DefaultVideoMenus slots={slots} />
+          <DefaultVolumePopup orientation="vertical" tooltip="bottom end" slots={slots} />
+          {slot(slots, 'topControlsGroupEnd', null)}
+        </Controls.Group>
+        <DefaultControlsSpacer />
+        <Controls.Group className="vds-controls-group" style={{ pointerEvents: 'none' }}>
+          {slot(slots, 'centerControlsGroupStart', null)}
+          <DefaultControlsSpacer />
+          {slot(slots, 'centerControlsGroupCenter', null)}
+          {slot(slots, 'playButton', <DefaultPlayButton tooltip="top" />)}
+          <DefaultControlsSpacer />
+          {slot(slots, 'centerControlsGroupEnd', null)}
+        </Controls.Group>
+        <DefaultControlsSpacer />
+        <Controls.Group className="vds-controls-group">
+          <DefaultTimeInfo slots={slots} />
+          {slot(slots, 'chapterTitle', <DefaultTitle />)}
+          {slot(slots, 'fullscreenButton', <DefaultFullscreenButton tooltip="top end" />)}
+        </Controls.Group>
+        <Controls.Group className="vds-controls-group">
+          {slot(slots, 'timeSlider', <DefaultTimeSlider />)}
+        </Controls.Group>
+      </Controls.Root>
+      {slot(slots, 'startDuration', <DefaultVideoStartDuration />)}
+    </>
+  );
+}
+
+DefaultVideoSmallLayout.displayName = 'DefaultVideoSmallLayout';
+export { DefaultVideoSmallLayout };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultVideoStartDuration
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultVideoStartDuration() {
+  const $duration = useMediaState('duration');
+  if ($duration === 0) return null;
+  return (
+    <div className="vds-start-duration">
+      <Time className="vds-time" type="duration" />
+    </div>
+  );
+}
+
+DefaultVideoStartDuration.displayName = 'DefaultVideoStartDuration';
+/* -------------------------------------------------------------------------------------------------
+ * DefaultVideoGestures
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultVideoGestures() {
+  const { noGestures } = useDefaultLayoutContext();
+
+  if (noGestures) return null;
+
+  return (
+    <div className="vds-gestures">
+      <Gesture className="vds-gesture" event="pointerup" action="toggle:paused" />
+      <Gesture className="vds-gesture" event="pointerup" action="toggle:controls" />
+      <Gesture className="vds-gesture" event="dblpointerup" action="toggle:fullscreen" />
+      <Gesture className="vds-gesture" event="dblpointerup" action="seek:-10" />
+      <Gesture className="vds-gesture" event="dblpointerup" action="seek:10" />
+    </div>
+  );
+}
+
+DefaultVideoGestures.displayName = 'DefaultVideoGestures';
+export { DefaultVideoGestures };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultBufferingIndicator
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultBufferingIndicator() {
+  return (
+    <div className="vds-buffering-indicator">
+      <Spinner.Root className="vds-buffering-spinner">
+        <Spinner.Track className="vds-buffering-track" />
+        <Spinner.TrackFill className="vds-buffering-track-fill" />
+      </Spinner.Root>
+    </div>
+  );
+}
+
+DefaultBufferingIndicator.displayName = 'DefaultBufferingIndicator';
+export { DefaultBufferingIndicator };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultVideoMenus
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultVideoMenus({ slots }: { slots?: Slots<DefaultLayoutMenuSlotName> }) {
+  const { isSmallLayout, noModal, menuGroup } = useDefaultLayoutContext(),
+    side = menuGroup === 'top' || isSmallLayout ? 'bottom' : ('top' as const),
+    tooltip = `${side} end` as const,
+    placement = noModal
+      ? (`${side} end` as const)
+      : !isSmallLayout
+        ? (`${side} end` as const)
+        : null;
+  return (
+    <>
+      {slot(
+        slots,
+        'chaptersMenu',
+        <DefaultChaptersMenu
+          tooltip={tooltip}
+          placement={placement}
+          portalClass="vds-video-layout"
+        />,
+      )}
+      {slot(
+        slots,
+        'settingsMenu',
+        <DefaultSettingsMenu
+          tooltip={tooltip}
+          placement={placement}
+          portalClass="vds-video-layout"
+          slots={slots}
+        />,
+      )}
+    </>
+  );
+}
+
+DefaultVideoMenus.displayName = 'DefaultVideoMenus';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultVideoLoadLayout
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultVideoLoadLayout() {
+  const { isSmallLayout } = useDefaultLayoutContext(),
+    baseSlots = useDefaultVideoLayoutSlots(),
+    slots = { ...baseSlots, ...baseSlots?.[isSmallLayout ? 'smallLayout' : 'largeLayout'] };
+  return (
+    <div className="vds-load-container">
+      {slot(slots, 'bufferingIndicator', <DefaultBufferingIndicator />)}
+      {slot(slots, 'loadButton', <DefaultPlayButton tooltip="top" />)}
+    </div>
+  );
+}
+
+DefaultVideoLoadLayout.displayName = 'DefaultVideoLoadLayout';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultVideoKeyboardDisplay
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultVideoKeyboardDisplay() {
+  const { noKeyboardAnimations, icons, userPrefersKeyboardAnimations } = useDefaultLayoutContext(),
+    $userPrefersKeyboardAnimations = useSignal(userPrefersKeyboardAnimations),
+    disabled = noKeyboardAnimations || !$userPrefersKeyboardAnimations;
+
+  if (disabled || !icons.KeyboardDisplay) return null;
+
+  return <DefaultKeyboardDisplay icons={icons.KeyboardDisplay} />;
+}
+
+DefaultVideoKeyboardDisplay.displayName = 'DefaultVideoKeyboardDisplay';

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { type WriteSignal } from 'maverick.js';
+import type { PlyrLayoutWord } from 'vidstack';
+
+import type { PlyrLayoutProps } from './props';
+
+interface PlyrLayoutContext extends PlyrLayoutProps {
+  previewTime: WriteSignal<number>;
+}
+
+export const PlyrLayoutContext = React.createContext<PlyrLayoutContext>({} as any);
+PlyrLayoutContext.displayName = 'PlyrLayoutContext';
+
+export function usePlyrLayoutContext() {
+  return React.useContext(PlyrLayoutContext);
+}
+
+export function usePlyrLayoutWord(word: PlyrLayoutWord) {
+  const { translations } = usePlyrLayoutContext();
+  return i18n(translations, word);
+}
+
+export function i18n(translations: any, word: string) {
+  return translations?.[word] ?? word;
+}

package/src/components/layouts/plyr/icons/plyr-airplay.js

@@ -0,0 +1 @@
+export default `<g><path d="M16,1 L2,1 C1.447,1 1,1.447 1,2 L1,12 C1,12.553 1.447,13 2,13 L5,13 L5,11 L3,11 L3,3 L15,3 L15,11 L13,11 L13,13 L16,13 C16.553,13 17,12.553 17,12 L17,2 C17,1.447 16.553,1 16,1 L16,1 Z"></path><polygon points="4 17 14 17 9 11"></polygon></g>`;

package/src/components/layouts/plyr/icons/plyr-captions-off.js

@@ -0,0 +1 @@
+export default `<g fill-rule="evenodd" fill-opacity="0.5"><path d="M1,1 C0.4,1 0,1.4 0,2 L0,13 C0,13.6 0.4,14 1,14 L5.6,14 L8.3,16.7 C8.5,16.9 8.7,17 9,17 C9.3,17 9.5,16.9 9.7,16.7 L12.4,14 L17,14 C17.6,14 18,13.6 18,13 L18,2 C18,1.4 17.6,1 17,1 L1,1 Z M5.52,11.15 C7.51,11.15 8.53,9.83 8.8,8.74 L7.51,8.35 C7.32,9.01 6.73,9.8 5.52,9.8 C4.38,9.8 3.32,8.97 3.32,7.46 C3.32,5.85 4.44,5.09 5.5,5.09 C6.73,5.09 7.28,5.84 7.45,6.52 L8.75,6.11 C8.47,4.96 7.46,3.76 5.5,3.76 C3.6,3.76 1.89,5.2 1.89,7.46 C1.89,9.72 3.54,11.15 5.52,11.15 Z M13.09,11.15 C15.08,11.15 16.1,9.83 16.37,8.74 L15.08,8.35 C14.89,9.01 14.3,9.8 13.09,9.8 C11.95,9.8 10.89,8.97 10.89,7.46 C10.89,5.85 12.01,5.09 13.07,5.09 C14.3,5.09 14.85,5.84 15.02,6.52 L16.32,6.11 C16.04,4.96 15.03,3.76 13.07,3.76 C11.17,3.76 9.46,5.2 9.46,7.46 C9.46,9.72 11.11,11.15 13.09,11.15 Z"></path></g>`;

package/src/components/layouts/plyr/icons/plyr-captions-on.js

@@ -0,0 +1 @@
+export default `<g fill-rule="evenodd"><path d="M1,1 C0.4,1 0,1.4 0,2 L0,13 C0,13.6 0.4,14 1,14 L5.6,14 L8.3,16.7 C8.5,16.9 8.7,17 9,17 C9.3,17 9.5,16.9 9.7,16.7 L12.4,14 L17,14 C17.6,14 18,13.6 18,13 L18,2 C18,1.4 17.6,1 17,1 L1,1 Z M5.52,11.15 C7.51,11.15 8.53,9.83 8.8,8.74 L7.51,8.35 C7.32,9.01 6.73,9.8 5.52,9.8 C4.38,9.8 3.32,8.97 3.32,7.46 C3.32,5.85 4.44,5.09 5.5,5.09 C6.73,5.09 7.28,5.84 7.45,6.52 L8.75,6.11 C8.47,4.96 7.46,3.76 5.5,3.76 C3.6,3.76 1.89,5.2 1.89,7.46 C1.89,9.72 3.54,11.15 5.52,11.15 Z M13.09,11.15 C15.08,11.15 16.1,9.83 16.37,8.74 L15.08,8.35 C14.89,9.01 14.3,9.8 13.09,9.8 C11.95,9.8 10.89,8.97 10.89,7.46 C10.89,5.85 12.01,5.09 13.07,5.09 C14.3,5.09 14.85,5.84 15.02,6.52 L16.32,6.11 C16.04,4.96 15.03,3.76 13.07,3.76 C11.17,3.76 9.46,5.2 9.46,7.46 C9.46,9.72 11.11,11.15 13.09,11.15 Z"></path></g>`;

package/src/components/layouts/plyr/icons/plyr-download.js

@@ -0,0 +1 @@
+export default `<g transform="translate(2 1)"><path d="M7,12 C7.3,12 7.5,11.9 7.7,11.7 L13.4,6 L12,4.6 L8,8.6 L8,0 L6,0 L6,8.6 L2,4.6 L0.6,6 L6.3,11.7 C6.5,11.9 6.7,12 7,12 Z" /><rect width="14" height="2" y="14" /></g>`;

package/src/components/layouts/plyr/icons/plyr-enter-fullscreen.js

@@ -0,0 +1 @@
+export default `<polygon points="10 3 13.6 3 9.6 7 11 8.4 15 4.4 15 8 17 8 17 1 10 1"></polygon><polygon points="7 9.6 3 13.6 3 10 1 10 1 17 8 17 8 15 4.4 15 8.4 11"></polygon>`;

package/src/components/layouts/plyr/icons/plyr-exit-fullscreen.js

@@ -0,0 +1 @@
+export default `<polygon points="1 12 4.6 12 0.6 16 2 17.4 6 13.4 6 17 8 17 8 10 1 10"></polygon><polygon points="16 0.6 12 4.6 12 1 10 1 10 8 17 8 17 6 13.4 6 17.4 2"></polygon>`;

package/src/components/layouts/plyr/icons/plyr-fast-forward.js

@@ -0,0 +1 @@
+export default `<polygon points="7.875 7.17142857 0 1 0 17 7.875 10.8285714 7.875 17 18 9 7.875 1"></polygon>`;

package/src/components/layouts/plyr/icons/plyr-muted.js

@@ -0,0 +1 @@
+export default `<polygon points="12.4 12.5 14.5 10.4 16.6 12.5 18 11.1 15.9 9 18 6.9 16.6 5.5 14.5 7.6 12.4 5.5 11 6.9 13.1 9 11 11.1"></polygon><path d="M3.78571429,6.00820648 L0.714285714,6.00820648 C0.285714286,6.00820648 0,6.30901277 0,6.76022222 L0,11.2723167 C0,11.7235261 0.285714286,12.0243324 0.714285714,12.0243324 L3.78571429,12.0243324 L7.85714286,15.8819922 C8.35714286,16.1827985 9,15.8819922 9,15.2803796 L9,2.75215925 C9,2.15054666 8.35714286,1.77453879 7.85714286,2.15054666 L3.78571429,6.00820648 Z"></path>`;