@hanifhan1f/vidstack-react 1.12.13

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

@@ -0,0 +1,301 @@
+import * as React from 'react';
+
+import { isString, uppercaseFirstChar } from 'maverick.js/std';
+import { getDownloadFile, isTrackCaptionKind } from 'vidstack';
+
+import { useMediaState } from '../../../../hooks/use-media-state';
+import { appendParamsToURL } from '../../../../utils';
+import { AirPlayButton } from '../../../ui/buttons/airplay-button';
+import { CaptionButton } from '../../../ui/buttons/caption-button';
+import { FullscreenButton } from '../../../ui/buttons/fullscreen-button';
+import { GoogleCastButton } from '../../../ui/buttons/google-cast-button';
+import { LiveButton } from '../../../ui/buttons/live-button';
+import { MuteButton } from '../../../ui/buttons/mute-button';
+import { PIPButton } from '../../../ui/buttons/pip-button';
+import { PlayButton } from '../../../ui/buttons/play-button';
+import { SeekButton } from '../../../ui/buttons/seek-button';
+import * as Tooltip from '../../../ui/tooltip';
+import { useDefaultLayoutContext, useDefaultLayoutWord } from '../context';
+import { DefaultTooltip } from './tooltip';
+
+/* -------------------------------------------------------------------------------------------------
+ * Types
+ * -----------------------------------------------------------------------------------------------*/
+
+interface DefaultMediaButtonProps {
+  tooltip: Tooltip.ContentProps['placement'];
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultPlayButton
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultPlayButton({ tooltip }: DefaultMediaButtonProps) {
+  const { icons: Icons } = useDefaultLayoutContext(),
+    playText = useDefaultLayoutWord('Play'),
+    pauseText = useDefaultLayoutWord('Pause'),
+    $paused = useMediaState('paused'),
+    $ended = useMediaState('ended');
+  return (
+    <DefaultTooltip content={$paused ? playText : pauseText} placement={tooltip}>
+      <PlayButton className="vds-play-button vds-button" aria-label={playText}>
+        {$ended ? (
+          <Icons.PlayButton.Replay className="vds-icon" />
+        ) : $paused ? (
+          <Icons.PlayButton.Play className="vds-icon" />
+        ) : (
+          <Icons.PlayButton.Pause className="vds-icon" />
+        )}
+      </PlayButton>
+    </DefaultTooltip>
+  );
+}
+
+DefaultPlayButton.displayName = 'DefaultPlayButton';
+export { DefaultPlayButton };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultMuteButton
+ * -----------------------------------------------------------------------------------------------*/
+
+const DefaultMuteButton = React.forwardRef<HTMLButtonElement, DefaultMediaButtonProps>(
+  ({ tooltip }, forwardRef) => {
+    const { icons: Icons } = useDefaultLayoutContext(),
+      muteText = useDefaultLayoutWord('Mute'),
+      unmuteText = useDefaultLayoutWord('Unmute'),
+      $muted = useMediaState('muted'),
+      $volume = useMediaState('volume');
+    return (
+      <DefaultTooltip content={$muted ? unmuteText : muteText} placement={tooltip}>
+        <MuteButton className="vds-mute-button vds-button" aria-label={muteText} ref={forwardRef}>
+          {$muted || $volume == 0 ? (
+            <Icons.MuteButton.Mute className="vds-icon" />
+          ) : $volume < 0.5 ? (
+            <Icons.MuteButton.VolumeLow className="vds-icon" />
+          ) : (
+            <Icons.MuteButton.VolumeHigh className="vds-icon" />
+          )}
+        </MuteButton>
+      </DefaultTooltip>
+    );
+  },
+);
+
+DefaultMuteButton.displayName = 'DefaultMuteButton';
+export { DefaultMuteButton };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultCaptionButton
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultCaptionButton({ tooltip }: DefaultMediaButtonProps) {
+  const { icons: Icons } = useDefaultLayoutContext(),
+    captionsText = useDefaultLayoutWord('Captions'),
+    onText = useDefaultLayoutWord('Closed-Captions On'),
+    offText = useDefaultLayoutWord('Closed-Captions Off'),
+    $track = useMediaState('textTrack'),
+    isOn = $track && isTrackCaptionKind($track);
+  return (
+    <DefaultTooltip content={isOn ? onText : offText} placement={tooltip}>
+      <CaptionButton className="vds-caption-button vds-button" aria-label={captionsText}>
+        {isOn ? (
+          <Icons.CaptionButton.On className="vds-icon" />
+        ) : (
+          <Icons.CaptionButton.Off className="vds-icon" />
+        )}
+      </CaptionButton>
+    </DefaultTooltip>
+  );
+}
+
+DefaultCaptionButton.displayName = 'DefaultCaptionButton';
+export { DefaultCaptionButton };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultPIPButton
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultPIPButton({ tooltip }: DefaultMediaButtonProps) {
+  const { icons: Icons } = useDefaultLayoutContext(),
+    pipText = useDefaultLayoutWord('PiP'),
+    enterText = useDefaultLayoutWord('Enter PiP'),
+    exitText = useDefaultLayoutWord('Exit PiP'),
+    $pip = useMediaState('pictureInPicture');
+  return (
+    <DefaultTooltip content={$pip ? exitText : enterText} placement={tooltip}>
+      <PIPButton className="vds-pip-button vds-button" aria-label={pipText}>
+        {$pip ? (
+          <Icons.PIPButton.Exit className="vds-icon" />
+        ) : (
+          <Icons.PIPButton.Enter className="vds-icon" />
+        )}
+      </PIPButton>
+    </DefaultTooltip>
+  );
+}
+
+DefaultPIPButton.displayName = 'DefaultPIPButton';
+export { DefaultPIPButton };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultFullscreenButton
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultFullscreenButton({ tooltip }: DefaultMediaButtonProps) {
+  const { icons: Icons } = useDefaultLayoutContext(),
+    fullscreenText = useDefaultLayoutWord('Fullscreen'),
+    enterText = useDefaultLayoutWord('Enter Fullscreen'),
+    exitText = useDefaultLayoutWord('Exit Fullscreen'),
+    $fullscreen = useMediaState('fullscreen');
+  return (
+    <DefaultTooltip content={$fullscreen ? exitText : enterText} placement={tooltip}>
+      <FullscreenButton className="vds-fullscreen-button vds-button" aria-label={fullscreenText}>
+        {$fullscreen ? (
+          <Icons.FullscreenButton.Exit className="vds-icon" />
+        ) : (
+          <Icons.FullscreenButton.Enter className="vds-icon" />
+        )}
+      </FullscreenButton>
+    </DefaultTooltip>
+  );
+}
+
+DefaultFullscreenButton.displayName = 'DefaultFullscreenButton';
+export { DefaultFullscreenButton };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultSeekButton
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultSeekButton({
+  backward,
+  tooltip,
+}: DefaultMediaButtonProps & { backward?: boolean }) {
+  const { icons: Icons, seekStep } = useDefaultLayoutContext(),
+    seekForwardText = useDefaultLayoutWord('Seek Forward'),
+    seekBackwardText = useDefaultLayoutWord('Seek Backward'),
+    seconds = (backward ? -1 : 1) * seekStep!,
+    label = seconds >= 0 ? seekForwardText : seekBackwardText;
+  return (
+    <DefaultTooltip content={label} placement={tooltip}>
+      <SeekButton className="vds-seek-button vds-button" seconds={seconds} aria-label={label}>
+        {seconds >= 0 ? (
+          <Icons.SeekButton.Forward className="vds-icon" />
+        ) : (
+          <Icons.SeekButton.Backward className="vds-icon" />
+        )}
+      </SeekButton>
+    </DefaultTooltip>
+  );
+}
+
+DefaultSeekButton.displayName = 'DefaultSeekButton';
+export { DefaultSeekButton };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultAirPlayButton
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultAirPlayButton({ tooltip }: DefaultMediaButtonProps) {
+  const { icons: Icons } = useDefaultLayoutContext(),
+    airPlayText = useDefaultLayoutWord('AirPlay'),
+    $state = useMediaState('remotePlaybackState'),
+    stateText = useDefaultLayoutWord(uppercaseFirstChar($state) as Capitalize<RemotePlaybackState>),
+    label = `${airPlayText} ${stateText}`,
+    Icon =
+      ($state === 'connecting'
+        ? Icons.AirPlayButton.Connecting
+        : $state === 'connected'
+          ? Icons.AirPlayButton.Connected
+          : null) ?? Icons.AirPlayButton.Default;
+  return (
+    <DefaultTooltip content={airPlayText} placement={tooltip}>
+      <AirPlayButton className="vds-airplay-button vds-button" aria-label={label}>
+        <Icon className="vds-icon" />
+      </AirPlayButton>
+    </DefaultTooltip>
+  );
+}
+
+DefaultAirPlayButton.displayName = 'DefaultAirPlayButton';
+export { DefaultAirPlayButton };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultGoogleCastButton
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultGoogleCastButton({ tooltip }: DefaultMediaButtonProps) {
+  const { icons: Icons } = useDefaultLayoutContext(),
+    googleCastText = useDefaultLayoutWord('Google Cast'),
+    $state = useMediaState('remotePlaybackState'),
+    stateText = useDefaultLayoutWord(uppercaseFirstChar($state) as Capitalize<RemotePlaybackState>),
+    label = `${googleCastText} ${stateText}`,
+    Icon =
+      ($state === 'connecting'
+        ? Icons.GoogleCastButton.Connecting
+        : $state === 'connected'
+          ? Icons.GoogleCastButton.Connected
+          : null) ?? Icons.GoogleCastButton.Default;
+  return (
+    <DefaultTooltip content={googleCastText} placement={tooltip}>
+      <GoogleCastButton className="vds-google-cast-button vds-button" aria-label={label}>
+        <Icon className="vds-icon" />
+      </GoogleCastButton>
+    </DefaultTooltip>
+  );
+}
+
+DefaultGoogleCastButton.displayName = 'DefaultGoogleCastButton';
+export { DefaultGoogleCastButton };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultLiveButton
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultLiveButton() {
+  const $live = useMediaState('live'),
+    label = useDefaultLayoutWord('Skip To Live'),
+    liveText = useDefaultLayoutWord('LIVE');
+  return $live ? (
+    <LiveButton className="vds-live-button" aria-label={label}>
+      <span className="vds-live-button-text">{liveText}</span>
+    </LiveButton>
+  ) : null;
+}
+
+DefaultLiveButton.displayName = 'DefaultLiveButton';
+export { DefaultLiveButton };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultDownloadButton
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultDownloadButton() {
+  const { download, icons: Icons } = useDefaultLayoutContext(),
+    $src = useMediaState('source'),
+    $title = useMediaState('title'),
+    file = getDownloadFile({
+      title: $title,
+      src: $src,
+      download,
+    }),
+    downloadText = useDefaultLayoutWord('Download');
+
+  return isString(file?.url) ? (
+    <DefaultTooltip content={downloadText} placement="top">
+      <a
+        role="button"
+        className="vds-download-button vds-button"
+        aria-label={downloadText}
+        href={appendParamsToURL(file.url, { download: file.name })}
+        download={file.name}
+        target="_blank"
+      >
+        {Icons.DownloadButton ? <Icons.DownloadButton.Default className="vds-icon" /> : null}
+      </a>
+    </DefaultTooltip>
+  ) : null;
+}
+
+DefaultDownloadButton.displayName = 'DefaultDownloadButton';
+export { DefaultDownloadButton };

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { Captions } from '../../../ui/captions';
+import { useDefaultLayoutWord } from '../context';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultCaptions
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultCaptions() {
+  const exampleText = useDefaultLayoutWord('Captions look like this');
+  return <Captions className="vds-captions" exampleText={exampleText} />;
+}
+
+DefaultCaptions.displayName = 'DefaultCaptions';
+export { DefaultCaptions };

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultControlsSpacer
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultControlsSpacer() {
+  return <div className="vds-controls-spacer" />;
+}
+
+DefaultControlsSpacer.displayName = 'DefaultControlsSpacer';
+export { DefaultControlsSpacer };

package/src/components/layouts/default/ui/keyboard-display.tsx

@@ -0,0 +1,132 @@
+import * as React from 'react';
+
+import { useContext } from 'maverick.js';
+import { useSignal } from 'maverick.js/react';
+import { camelToKebabCase } from 'maverick.js/std';
+import { mediaContext } from 'vidstack';
+
+import { useMediaState } from '../../../../hooks/use-media-state';
+import { createComputed, createEffect } from '../../../../hooks/use-signals';
+import { Primitive, type PrimitivePropsWithRef } from '../../../primitives/nodes';
+import type { DefaultKeyboardDisplayIcons } from '../icons';
+
+export interface DefaultKeyboardDisplayProps
+  extends Omit<PrimitivePropsWithRef<'div'>, 'disabled'> {
+  icons: Partial<DefaultKeyboardDisplayIcons>;
+}
+
+const DefaultKeyboardDisplay = React.forwardRef<HTMLElement, DefaultKeyboardDisplayProps>(
+  ({ icons: Icons, ...props }, forwardRef) => {
+    const [visible, setVisible] = React.useState(false),
+      [Icon, setIcon] = React.useState<any>(null),
+      [count, setCount] = React.useState(0),
+      $lastKeyboardAction = useMediaState('lastKeyboardAction');
+
+    React.useEffect(() => {
+      setCount((n) => n + 1);
+    }, [$lastKeyboardAction]);
+
+    const actionDataAttr = React.useMemo(() => {
+      const action = $lastKeyboardAction?.action;
+      return action && visible ? camelToKebabCase(action) : null;
+    }, [visible, $lastKeyboardAction]);
+
+    const className = React.useMemo(
+      () =>
+        `vds-kb-action${!visible ? ' hidden' : ''}${props.className ? ` ${props.className}` : ''}`,
+      [visible],
+    );
+
+    const $$text = createComputed(getText),
+      $text = useSignal($$text);
+
+    createEffect(() => {
+      const Icon = getIcon(Icons);
+      setIcon(() => Icon);
+    }, [Icons]);
+
+    React.useEffect(() => {
+      setVisible(!!$lastKeyboardAction);
+      const id = setTimeout(() => setVisible(false), 500);
+      return () => {
+        setVisible(false);
+        window.clearTimeout(id);
+      };
+    }, [$lastKeyboardAction]);
+
+    return Icon ? (
+      <Primitive.div
+        {...props}
+        className={className}
+        data-action={actionDataAttr}
+        ref={forwardRef as React.Ref<any>}
+      >
+        <div className="vds-kb-text-wrapper">
+          <div className="vds-kb-text">{$text}</div>
+        </div>
+        <div className="vds-kb-bezel" key={count}>
+          <div className="vds-kb-icon">
+            <Icon />
+          </div>
+        </div>
+      </Primitive.div>
+    ) : null;
+  },
+);
+
+DefaultKeyboardDisplay.displayName = 'DefaultKeyboardDisplay';
+export { DefaultKeyboardDisplay };
+
+function getText() {
+  const { $state } = useContext(mediaContext),
+    action = $state.lastKeyboardAction()?.action,
+    audioGain = $state.audioGain() ?? 1;
+  switch (action) {
+    case 'toggleMuted':
+      return $state.muted() ? '0%' : getVolumeText($state.volume(), audioGain);
+    case 'volumeUp':
+    case 'volumeDown':
+      return getVolumeText($state.volume(), audioGain);
+    default:
+      return '';
+  }
+}
+
+function getVolumeText(volume: number, gain: number) {
+  return `${Math.round(volume * gain * 100)}%`;
+}
+
+function getIcon(Icons: Partial<DefaultKeyboardDisplayIcons>) {
+  const { $state } = useContext(mediaContext),
+    action = $state.lastKeyboardAction()?.action;
+  switch (action) {
+    case 'togglePaused':
+      return !$state.paused() ? Icons.Play : Icons.Pause;
+    case 'toggleMuted':
+      return $state.muted() || $state.volume() === 0
+        ? Icons.Mute
+        : $state.volume() >= 0.5
+          ? Icons.VolumeUp
+          : Icons.VolumeDown;
+    case 'toggleFullscreen':
+      return $state.fullscreen() ? Icons.EnterFullscreen : Icons.ExitFullscreen;
+    case 'togglePictureInPicture':
+      return $state.pictureInPicture() ? Icons.EnterPiP : Icons.ExitPiP;
+    case 'toggleCaptions':
+      return $state.hasCaptions()
+        ? $state.textTrack()
+          ? Icons.CaptionsOn
+          : Icons.CaptionsOff
+        : null;
+    case 'volumeUp':
+      return Icons.VolumeUp;
+    case 'volumeDown':
+      return Icons.VolumeDown;
+    case 'seekForward':
+      return Icons.SeekForward;
+    case 'seekBackward':
+      return Icons.SeekBackward;
+    default:
+      return null;
+  }
+}

package/src/components/layouts/default/ui/menus/accessibility-menu.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+
+import { useMediaState } from '../../../../../hooks/use-media-state';
+import * as Menu from '../../../../ui/menu';
+import { useDefaultLayoutContext, useDefaultLayoutWord } from '../../context';
+import { slot, type DefaultLayoutMenuSlotName, type Slots } from '../../slots';
+import { DefaultFontMenu } from './font-menu';
+import { DefaultMenuCheckbox } from './items/menu-checkbox';
+import { DefaultMenuButton, DefaultMenuItem, DefaultMenuSection } from './items/menu-items';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultAccessibilityMenu
+ * -----------------------------------------------------------------------------------------------*/
+
+interface DefaultAccessibilityMenuProps {
+  slots?: Slots<DefaultLayoutMenuSlotName>;
+}
+
+function DefaultAccessibilityMenu({ slots }: DefaultAccessibilityMenuProps) {
+  const label = useDefaultLayoutWord('Accessibility'),
+    { icons: Icons } = useDefaultLayoutContext();
+
+  return (
+    <Menu.Root className="vds-accessibility-menu vds-menu">
+      <DefaultMenuButton label={label} Icon={Icons.Menu.Accessibility} />
+      <Menu.Content className="vds-menu-items">
+        {slot(slots, 'accessibilityMenuItemsStart', null)}
+
+        <DefaultMenuSection>
+          <DefaultAnnouncementsMenuCheckbox />
+          <DefaultKeyboardAnimationsMenuCheckbox />
+        </DefaultMenuSection>
+
+        <DefaultMenuSection>
+          <DefaultFontMenu />
+        </DefaultMenuSection>
+
+        {slot(slots, 'accessibilityMenuItemsEnd', null)}
+      </Menu.Content>
+    </Menu.Root>
+  );
+}
+
+DefaultAccessibilityMenu.displayName = 'DefaultAccessibilityMenu';
+export { DefaultAccessibilityMenu };
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultAnnouncementsMenuCheckbox
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultAnnouncementsMenuCheckbox() {
+  const { userPrefersAnnouncements } = useDefaultLayoutContext(),
+    label = useDefaultLayoutWord('Announcements');
+
+  function onChange(checked: boolean) {
+    userPrefersAnnouncements.set(checked);
+  }
+
+  return (
+    <DefaultMenuItem label={label}>
+      <DefaultMenuCheckbox
+        label={label}
+        defaultChecked
+        storageKey="vds-player::announcements"
+        onChange={onChange}
+      />
+    </DefaultMenuItem>
+  );
+}
+
+DefaultAnnouncementsMenuCheckbox.displayName = 'DefaultAnnouncementsMenuCheckbox';
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultKeyboardAnimationsMenuCheckbox
+ * -----------------------------------------------------------------------------------------------*/
+
+function DefaultKeyboardAnimationsMenuCheckbox() {
+  const $viewType = useMediaState('viewType'),
+    { userPrefersKeyboardAnimations, noKeyboardAnimations } = useDefaultLayoutContext(),
+    label = useDefaultLayoutWord('Keyboard Animations');
+
+  if ($viewType !== 'video' || noKeyboardAnimations) return null;
+
+  function onChange(checked: boolean) {
+    userPrefersKeyboardAnimations.set(checked);
+  }
+
+  return (
+    <DefaultMenuItem label={label}>
+      <DefaultMenuCheckbox
+        label={label}
+        defaultChecked
+        storageKey="vds-player::keyboard-animations"
+        onChange={onChange}
+      />
+    </DefaultMenuItem>
+  );
+}
+
+DefaultKeyboardAnimationsMenuCheckbox.displayName = 'DefaultKeyboardAnimationsMenuCheckbox';