@hanifhan1f/vidstack 1.12.13

package/src/elements/define/layouts/default/ui/controls.ts

@@ -0,0 +1,5 @@
+import { html } from 'lit-html';
+
+export function DefaultControlsSpacer() {
+  return html`<div class="vds-controls-spacer"></div>`;
+}

package/src/elements/define/layouts/default/ui/keyboard-display.ts

@@ -0,0 +1,114 @@
+import { html } from 'lit-html';
+import { keyed } from 'lit-html/directives/keyed.js';
+import { computed, effect, signal } from 'maverick.js';
+import { camelToKebabCase } from 'maverick.js/std';
+
+import { useDefaultLayoutContext } from '../../../../../components/layouts/default/context';
+import { useMediaContext } from '../../../../../core/api/media-context';
+import { createSlot } from '../../../../../utils/dom';
+import { $signal } from '../../../../lit/directives/signal';
+
+export function DefaultKeyboardDisplay() {
+  return $signal(() => {
+    const media = useMediaContext(),
+      { noKeyboardAnimations, userPrefersKeyboardAnimations } = useDefaultLayoutContext(),
+      $disabled = computed(() => noKeyboardAnimations() || !userPrefersKeyboardAnimations());
+
+    if ($disabled()) {
+      return null;
+    }
+
+    const visible = signal(false),
+      { lastKeyboardAction } = media.$state;
+
+    effect(() => {
+      visible.set(!!lastKeyboardAction());
+      const id = setTimeout(() => visible.set(false), 500);
+      return () => {
+        visible.set(false);
+        window.clearTimeout(id);
+      };
+    });
+
+    const $actionDataAttr = computed(() => {
+      const action = lastKeyboardAction()?.action;
+      return action && visible() ? camelToKebabCase(action) : null;
+    });
+
+    const $classList = computed(() => `vds-kb-action${!visible() ? ' hidden' : ''}`),
+      $text = computed(getText),
+      $iconSlot = computed(() => {
+        const name = getIconName();
+        return name ? createSlot(name) : null;
+      });
+
+    function Icon() {
+      const $slot = $iconSlot();
+      if (!$slot) return null;
+      return html`
+        <div class="vds-kb-bezel">
+          <div class="vds-kb-icon">${$slot}</div>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class=${$signal($classList)} data-action=${$signal($actionDataAttr)}>
+        <div class="vds-kb-text-wrapper">
+          <div class="vds-kb-text">${$signal($text)}</div>
+        </div>
+        ${$signal(() => keyed(lastKeyboardAction(), Icon()))}
+      </div>
+    `;
+  });
+}
+
+function getText() {
+  const { $state } = useMediaContext(),
+    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 getIconName() {
+  const { $state } = useMediaContext(),
+    action = $state.lastKeyboardAction()?.action;
+  switch (action) {
+    case 'togglePaused':
+      return !$state.paused() ? 'kb-play-icon' : 'kb-pause-icon';
+    case 'toggleMuted':
+      return $state.muted() || $state.volume() === 0
+        ? 'kb-mute-icon'
+        : $state.volume() >= 0.5
+          ? 'kb-volume-up-icon'
+          : 'kb-volume-down-icon';
+    case 'toggleFullscreen':
+      return `kb-fs-${$state.fullscreen() ? 'enter' : 'exit'}-icon`;
+    case 'togglePictureInPicture':
+      return `kb-pip-${$state.pictureInPicture() ? 'enter' : 'exit'}-icon`;
+    case 'toggleCaptions':
+      return $state.hasCaptions() ? `kb-cc-${$state.textTrack() ? 'on' : 'off'}-icon` : null;
+    case 'volumeUp':
+      return 'kb-volume-up-icon';
+    case 'volumeDown':
+      return 'kb-volume-down-icon';
+    case 'seekForward':
+      return 'kb-seek-forward-icon';
+    case 'seekBackward':
+      return 'kb-seek-backward-icon';
+    default:
+      return null;
+  }
+}

package/src/elements/define/layouts/default/ui/menu/accessibility-menu.ts

@@ -0,0 +1,79 @@
+import { html } from 'lit-html';
+import { computed } from 'maverick.js';
+
+import { useDefaultLayoutContext } from '../../../../../../components/layouts/default/context';
+import { i18n } from '../../../../../../components/layouts/default/translations';
+import { useMediaState } from '../../../../../../core/api/media-context';
+import { $signal } from '../../../../../lit/directives/signal';
+import { $i18n } from '../utils';
+import { DefaultFontMenu } from './font-menu';
+import { DefaultMenuCheckbox } from './items/menu-checkbox';
+import { DefaultMenuButton, DefaultMenuItem, DefaultMenuSection } from './items/menu-items';
+
+export function DefaultAccessibilityMenu() {
+  return $signal(() => {
+    const { translations } = useDefaultLayoutContext();
+    return html`
+      <media-menu class="vds-accessibility-menu vds-menu">
+        ${DefaultMenuButton({
+          label: () => i18n(translations, 'Accessibility'),
+          icon: 'menu-accessibility',
+        })}
+        <media-menu-items class="vds-menu-items">
+          ${[
+            DefaultMenuSection({
+              children: [
+                DefaultAnnouncementsMenuCheckbox(),
+                DefaultKeyboardAnimationsMenuCheckbox(),
+              ],
+            }),
+            DefaultMenuSection({
+              children: [DefaultFontMenu()],
+            }),
+          ]}
+        </media-menu-items>
+      </media-menu>
+    `;
+  });
+}
+
+function DefaultAnnouncementsMenuCheckbox() {
+  const { userPrefersAnnouncements, translations } = useDefaultLayoutContext(),
+    label = 'Announcements';
+
+  return DefaultMenuItem({
+    label: $i18n(translations, label),
+    children: DefaultMenuCheckbox({
+      label,
+      storageKey: 'vds-player::announcements',
+      onChange(checked) {
+        userPrefersAnnouncements.set(checked);
+      },
+    }),
+  });
+}
+
+function DefaultKeyboardAnimationsMenuCheckbox() {
+  return $signal(() => {
+    const { translations, userPrefersKeyboardAnimations, noKeyboardAnimations } =
+        useDefaultLayoutContext(),
+      { viewType } = useMediaState(),
+      $disabled = computed(() => viewType() !== 'video' || noKeyboardAnimations());
+
+    if ($disabled()) return null;
+
+    const label = 'Keyboard Animations';
+
+    return DefaultMenuItem({
+      label: $i18n(translations, label),
+      children: DefaultMenuCheckbox({
+        label,
+        defaultChecked: true,
+        storageKey: 'vds-player::keyboard-animations',
+        onChange(checked) {
+          userPrefersKeyboardAnimations.set(checked);
+        },
+      }),
+    });
+  });
+}

package/src/elements/define/layouts/default/ui/menu/audio-menu.ts

@@ -0,0 +1,135 @@
+import { html } from 'lit-html';
+import { computed } from 'maverick.js';
+import { isArray } from 'maverick.js/std';
+
+import { useDefaultLayoutContext } from '../../../../../../components/layouts/default/context';
+import { i18n } from '../../../../../../components/layouts/default/translations';
+import { useMediaState } from '../../../../../../core/api/media-context';
+import { $signal } from '../../../../../lit/directives/signal';
+import { $i18n } from '../utils';
+import { DefaultMenuButton, DefaultMenuSection } from './items/menu-items';
+import { DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps } from './items/menu-slider';
+
+export function DefaultAudioMenu() {
+  return $signal(() => {
+    const { noAudioGain, translations } = useDefaultLayoutContext(),
+      { audioTracks, canSetAudioGain } = useMediaState(),
+      $disabled = computed(() => {
+        const hasGainSlider = canSetAudioGain() && !noAudioGain();
+        return !hasGainSlider && audioTracks().length <= 1;
+      });
+
+    if ($disabled()) return null;
+
+    return html`
+      <media-menu class="vds-audio-menu vds-menu">
+        ${DefaultMenuButton({
+          label: () => i18n(translations, 'Audio'),
+          icon: 'menu-audio',
+        })}
+        <media-menu-items class="vds-menu-items">
+          ${[DefaultAudioTracksMenu(), DefaultAudioBoostSection()]}
+        </media-menu-items>
+      </media-menu>
+    `;
+  });
+}
+
+function DefaultAudioTracksMenu() {
+  return $signal(() => {
+    const { translations } = useDefaultLayoutContext(),
+      { audioTracks } = useMediaState(),
+      $defaultText = $i18n(translations, 'Default'),
+      $disabled = computed(() => audioTracks().length <= 1);
+
+    if ($disabled()) return null;
+
+    return DefaultMenuSection({
+      children: html`
+        <media-menu class="vds-audio-tracks-menu vds-menu">
+          ${DefaultMenuButton({
+            label: () => i18n(translations, 'Track'),
+          })}
+          <media-menu-items class="vds-menu-items">
+            <media-audio-radio-group
+              class="vds-audio-track-radio-group vds-radio-group"
+              empty-label=${$defaultText}
+            >
+              <template>
+                <media-radio class="vds-audio-track-radio vds-radio">
+                  <slot name="menu-radio-check-icon" data-class="vds-icon"></slot>
+                  <span class="vds-radio-label" data-part="label"></span>
+                </media-radio>
+              </template>
+            </media-audio-radio-group>
+          </media-menu-items>
+        </media-menu>
+      `,
+    });
+  });
+}
+
+function DefaultAudioBoostSection() {
+  return $signal(() => {
+    const { noAudioGain, translations } = useDefaultLayoutContext(),
+      { canSetAudioGain } = useMediaState(),
+      $disabled = computed(() => !canSetAudioGain() || noAudioGain());
+
+    if ($disabled()) return null;
+
+    const { audioGain } = useMediaState();
+
+    return DefaultMenuSection({
+      label: $i18n(translations, 'Boost'),
+      value: $signal(() => Math.round(((audioGain() ?? 1) - 1) * 100) + '%'),
+      children: [
+        DefaultMenuSliderItem({
+          upIcon: 'menu-audio-boost-up',
+          downIcon: 'menu-audio-boost-down',
+          children: DefaultAudioGainSlider(),
+          isMin: () => ((audioGain() ?? 1) - 1) * 100 <= getGainMin(),
+          isMax: () => ((audioGain() ?? 1) - 1) * 100 === getGainMax(),
+        }),
+      ],
+    });
+  });
+}
+
+function DefaultAudioGainSlider() {
+  const { translations } = useDefaultLayoutContext(),
+    $label = $i18n(translations, 'Boost'),
+    $min = getGainMin,
+    $max = getGainMax,
+    $step = getGainStep;
+
+  return html`
+    <media-audio-gain-slider
+      class="vds-audio-gain-slider vds-slider"
+      aria-label=${$label}
+      min=${$signal($min)}
+      max=${$signal($max)}
+      step=${$signal($step)}
+      key-step=${$signal($step)}
+    >
+      ${DefaultSliderParts()}${DefaultSliderSteps()}
+    </media-audio-gain-slider>
+  `;
+}
+
+function getGainMin() {
+  const { audioGains } = useDefaultLayoutContext(),
+    gains = audioGains();
+  return isArray(gains) ? gains[0] ?? 0 : gains.min;
+}
+
+function getGainMax() {
+  const { audioGains } = useDefaultLayoutContext(),
+    gains = audioGains();
+  return isArray(gains) ? gains[gains.length - 1] ?? 300 : gains.max;
+}
+
+function getGainStep() {
+  const { audioGains } = useDefaultLayoutContext(),
+    gains = audioGains();
+  return isArray(gains) ? gains[1] - gains[0] || 25 : gains.step;
+}

package/src/elements/define/layouts/default/ui/menu/captions-menu.ts

@@ -0,0 +1,114 @@
+import { html } from 'lit-html';
+
+import { useDefaultLayoutContext } from '../../../../../../components/layouts/default/context';
+import { i18n } from '../../../../../../components/layouts/default/translations';
+import { useMediaState } from '../../../../../../core/api/media-context';
+import { $signal } from '../../../../../lit/directives/signal';
+import { $i18n } from '../utils';
+import { DefaultMenuButton } from './items/menu-items';
+
+const LANG_FLAGS: Record<string, string> = {
+  en: '🇬🇧',
+  eng: '🇬🇧',
+  english: '🇬🇧',
+  id: '🇮🇩',
+  ind: '🇮🇩',
+  indonesian: '🇮🇩',
+  ja: '🇯🇵',
+  jpn: '🇯🇵',
+  japanese: '🇯🇵',
+  ko: '🇰🇷',
+  kor: '🇰🇷',
+  korean: '🇰🇷',
+  zh: '🇨🇳',
+  zho: '🇨🇳',
+  chi: '🇨🇳',
+  chinese: '🇨🇳',
+  es: '🇪🇸',
+  spa: '🇪🇸',
+  spanish: '🇪🇸',
+  fr: '🇫🇷',
+  fra: '🇫🇷',
+  french: '🇫🇷',
+  de: '🇩🇪',
+  deu: '🇩🇪',
+  ger: '🇩🇪',
+  german: '🇩🇪',
+  pt: '🇧🇷',
+  por: '🇧🇷',
+  portuguese: '🇧🇷',
+  ru: '🇷🇺',
+  rus: '🇷🇺',
+  russian: '🇷🇺',
+  ar: '🇸🇦',
+  ara: '🇸🇦',
+  arabic: '🇸🇦',
+  hi: '🇮🇳',
+  hin: '🇮🇳',
+  hindi: '🇮🇳',
+  th: '🇹🇭',
+  tha: '🇹🇭',
+  thai: '🇹🇭',
+  vi: '🇻🇳',
+  vie: '🇻🇳',
+  vietnamese: '🇻🇳',
+  it: '🇮🇹',
+  ita: '🇮🇹',
+  italian: '🇮🇹',
+  tr: '🇹🇷',
+  tur: '🇹🇷',
+  turkish: '🇹🇷',
+  pl: '🇵🇱',
+  pol: '🇵🇱',
+  polish: '🇵🇱',
+  nl: '🇳🇱',
+  nld: '🇳🇱',
+  dutch: '🇳🇱',
+  ms: '🇲🇾',
+  msa: '🇲🇾',
+  malay: '🇲🇾',
+};
+
+function getFlagForLabel(label: string): string {
+  const lower = label.toLowerCase().trim();
+  // Check direct match first
+  if (LANG_FLAGS[lower]) return LANG_FLAGS[lower];
+  // Check if the label starts with a known language code
+  for (const [key, flag] of Object.entries(LANG_FLAGS)) {
+    if (lower.startsWith(key) || lower.includes(key)) return flag;
+  }
+  return '🏳️';
+}
+
+export function DefaultCaptionsMenu() {
+  return $signal(() => {
+    const { translations } = useDefaultLayoutContext(),
+      { hasCaptions, textTracks } = useMediaState(),
+      $offText = $i18n(translations, 'Off');
+
+    if (!hasCaptions()) return null;
+
+    return html`
+      <media-menu class="vds-captions-menu vds-menu">
+        ${DefaultMenuButton({
+          label: () => i18n(translations, 'Captions'),
+          icon: 'menu-captions',
+        })}
+        <media-menu-items class="vds-menu-items">
+          <media-captions-radio-group
+            class="vds-captions-radio-group vds-radio-group"
+            off-label=${$offText}
+          >
+            <template>
+              <media-radio class="vds-caption-radio vds-radio">
+                <slot name="menu-radio-check-icon" data-class="vds-icon"></slot>
+                <span class="vds-caption-flag" data-part="flag"></span>
+                <span class="vds-radio-label" data-part="label"></span>
+              </media-radio>
+            </template>
+          </media-captions-radio-group>
+        </media-menu-items>
+      </media-menu>
+    `;
+  });
+}

package/src/elements/define/layouts/default/ui/menu/chapters-menu.ts

@@ -0,0 +1,117 @@
+import { html } from 'lit-html';
+import { computed, signal, type ReadSignal } from 'maverick.js';
+import { isFunction, unwrap } from 'maverick.js/std';
+
+import { useDefaultLayoutContext } from '../../../../../../components/layouts/default/context';
+import type { MenuPlacement } from '../../../../../../components/ui/menu/menu-items';
+import type { TooltipPlacement } from '../../../../../../components/ui/tooltip/tooltip-content';
+import { useMediaContext, useMediaState } from '../../../../../../core/api/media-context';
+import type { TextTrack } from '../../../../../../core/tracks/text/text-track';
+import { watchActiveTextTrack } from '../../../../../../core/tracks/text/utils';
+import { $signal } from '../../../../../lit/directives/signal';
+import { IconSlot } from '../../slots';
+import { $i18n } from '../utils';
+import { MenuPortal } from './menu-portal';
+
+export function DefaultChaptersMenu({
+  placement,
+  tooltip,
+  portal,
+}: {
+  portal?: boolean;
+  placement: MenuPlacement | ReadSignal<MenuPlacement | null>;
+  tooltip: TooltipPlacement | ReadSignal<TooltipPlacement>;
+}) {
+  const { textTracks } = useMediaContext(),
+    { viewType, seekableStart, seekableEnd } = useMediaState(),
+    {
+      translations,
+      thumbnails,
+      menuPortal,
+      noModal,
+      menuGroup,
+      smallWhen: smWhen,
+    } = useDefaultLayoutContext(),
+    $disabled = computed(() => {
+      const $startTime = seekableStart(),
+        $endTime = seekableEnd(),
+        $track = signal<TextTrack | null>(null);
+
+      watchActiveTextTrack(textTracks, 'chapters', $track.set);
+
+      const cues = $track()?.cues.filter(
+        (cue) => cue.startTime <= $endTime && cue.endTime >= $startTime,
+      );
+
+      return !cues?.length;
+    });
+
+  if ($disabled()) return null;
+
+  const $placement = computed(() =>
+      noModal() ? unwrap(placement) : !smWhen() ? unwrap(placement) : null,
+    ),
+    $offset = computed(() =>
+      !smWhen() && menuGroup() === 'bottom' && viewType() === 'video' ? 26 : 0,
+    ),
+    $isOpen = signal(false);
+
+  function onOpen() {
+    $isOpen.set(true);
+  }
+
+  function onClose() {
+    $isOpen.set(false);
+  }
+
+  const items = html`
+    <media-menu-items
+      class="vds-chapters-menu-items vds-menu-items"
+      placement=${$signal($placement)}
+      offset=${$signal($offset)}
+    >
+      ${$signal(() => {
+        if (!$isOpen()) return null;
+        return html`
+          <media-chapters-radio-group
+            class="vds-chapters-radio-group vds-radio-group"
+            .thumbnails=${$signal(thumbnails)}
+          >
+            <template>
+              <media-radio class="vds-chapter-radio vds-radio">
+                <media-thumbnail class="vds-thumbnail"></media-thumbnail>
+                <div class="vds-chapter-radio-content">
+                  <span class="vds-chapter-radio-label" data-part="label"></span>
+                  <span class="vds-chapter-radio-start-time" data-part="start-time"></span>
+                  <span class="vds-chapter-radio-duration" data-part="duration"></span>
+                </div>
+              </media-radio>
+            </template>
+          </media-chapters-radio-group>
+        `;
+      })}
+    </media-menu-items>
+  `;
+
+  return html`
+    <media-menu class="vds-chapters-menu vds-menu" @open=${onOpen} @close=${onClose}>
+      <media-tooltip class="vds-tooltip">
+        <media-tooltip-trigger>
+          <media-menu-button
+            class="vds-menu-button vds-button"
+            aria-label=${$i18n(translations, 'Chapters')}
+          >
+            ${IconSlot('menu-chapters')}
+          </media-menu-button>
+        </media-tooltip-trigger>
+        <media-tooltip-content
+          class="vds-tooltip-content"
+          placement=${isFunction(tooltip) ? $signal(tooltip) : tooltip}
+        >
+          ${$i18n(translations, 'Chapters')}
+        </media-tooltip-content>
+      </media-tooltip>
+      ${portal ? MenuPortal(menuPortal, items) : items}
+    </media-menu>
+  `;
+}