@hanifhan1f/vidstack 1.12.13 → 1.12.14

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

@@ -1,291 +0,0 @@
-import { html } from 'lit-html';
-import { ref as $ref, type RefOrCallback } from 'lit-html/directives/ref.js';
-import { isNil, isString, noop, uppercaseFirstChar } from 'maverick.js/std';
-
-import { useDefaultLayoutContext } from '../../../../../components/layouts/default/context';
-import { i18n } from '../../../../../components/layouts/default/translations';
-import type { TooltipPlacement } from '../../../../../components/ui/tooltip/tooltip-content';
-import { useMediaState } from '../../../../../core/api/media-context';
-import { appendParamsToURL, getDownloadFile } from '../../../../../utils/network';
-import { $signal } from '../../../../lit/directives/signal';
-import { IconSlot, IconSlots } from '../slots';
-import { $i18n } from './utils';
-
-export function DefaultAirPlayButton({ tooltip }: { tooltip: TooltipPlacement }) {
-  const { translations } = useDefaultLayoutContext(),
-    { remotePlaybackState } = useMediaState(),
-    $label = $signal(() => {
-      const airPlayText = i18n(translations, 'AirPlay'),
-        stateText = uppercaseFirstChar(remotePlaybackState()) as Capitalize<RemotePlaybackState>;
-      return `${airPlayText} ${stateText}`;
-    }),
-    $airPlayText = $i18n(translations, 'AirPlay');
-  return html`
-    <media-tooltip class="vds-airplay-tooltip vds-tooltip">
-      <media-tooltip-trigger>
-        <media-airplay-button class="vds-airplay-button vds-button" aria-label=${$label}>
-          ${IconSlot('airplay')}
-        </media-airplay-button>
-      </media-tooltip-trigger>
-      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
-        <span class="vds-airplay-tooltip-text">${$airPlayText}</span>
-      </media-tooltip-content>
-    </media-tooltip>
-  `;
-}
-
-export function DefaultGoogleCastButton({ tooltip }: { tooltip: TooltipPlacement }) {
-  const { translations } = useDefaultLayoutContext(),
-    { remotePlaybackState } = useMediaState(),
-    $label = $signal(() => {
-      const googleCastText = i18n(translations, 'Google Cast'),
-        stateText = uppercaseFirstChar(remotePlaybackState()) as Capitalize<RemotePlaybackState>;
-      return `${googleCastText} ${stateText}`;
-    }),
-    $googleCastText = $i18n(translations, 'Google Cast');
-  return html`
-    <media-tooltip class="vds-google-cast-tooltip vds-tooltip">
-      <media-tooltip-trigger>
-        <media-google-cast-button class="vds-google-cast-button vds-button" aria-label=${$label}>
-          ${IconSlot('google-cast')}
-        </media-google-cast-button>
-      </media-tooltip-trigger>
-      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
-        <span class="vds-google-cast-tooltip-text">${$googleCastText}</span>
-      </media-tooltip-content>
-    </media-tooltip>
-  `;
-}
-
-export function DefaultPlayButton({ tooltip }: { tooltip: TooltipPlacement }) {
-  const { translations } = useDefaultLayoutContext(),
-    $playText = $i18n(translations, 'Play'),
-    $pauseText = $i18n(translations, 'Pause');
-  return html`
-    <media-tooltip class="vds-play-tooltip vds-tooltip">
-      <media-tooltip-trigger>
-        <media-play-button
-          class="vds-play-button vds-button"
-          aria-label=${$i18n(translations, 'Play')}
-        >
-          ${IconSlots(['play', 'pause', 'replay'])}
-        </media-play-button>
-      </media-tooltip-trigger>
-      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
-        <span class="vds-play-tooltip-text">${$playText}</span>
-        <span class="vds-pause-tooltip-text">${$pauseText}</span>
-      </media-tooltip-content>
-    </media-tooltip>
-  `;
-}
-
-export function DefaultMuteButton({
-  tooltip,
-  ref = noop,
-}: {
-  tooltip: TooltipPlacement;
-  ref?: RefOrCallback;
-}) {
-  const { translations } = useDefaultLayoutContext(),
-    $muteText = $i18n(translations, 'Mute'),
-    $unmuteText = $i18n(translations, 'Unmute');
-  return html`
-    <media-tooltip class="vds-mute-tooltip vds-tooltip">
-      <media-tooltip-trigger>
-        <media-mute-button
-          class="vds-mute-button vds-button"
-          aria-label=${$i18n(translations, 'Mute')}
-          ${$ref(ref)}
-        >
-          ${IconSlots(['mute', 'volume-low', 'volume-high'])}
-        </media-mute-button>
-      </media-tooltip-trigger>
-      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
-        <span class="vds-mute-tooltip-text">${$unmuteText}</span>
-        <span class="vds-unmute-tooltip-text">${$muteText}</span>
-      </media-tooltip-content>
-    </media-tooltip>
-  `;
-}
-
-export function DefaultCaptionButton({ tooltip }: { tooltip: TooltipPlacement }) {
-  const { translations } = useDefaultLayoutContext(),
-    $ccOnText = $i18n(translations, 'Closed-Captions On'),
-    $ccOffText = $i18n(translations, 'Closed-Captions Off');
-  return html`
-    <media-tooltip class="vds-caption-tooltip vds-tooltip">
-      <media-tooltip-trigger>
-        <media-caption-button
-          class="vds-caption-button vds-button"
-          aria-label=${$i18n(translations, 'Captions')}
-        >
-          ${IconSlots(['cc-on', 'cc-off'])}
-        </media-caption-button>
-      </media-tooltip-trigger>
-      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
-        <span class="vds-cc-on-tooltip-text">${$ccOffText}</span>
-        <span class="vds-cc-off-tooltip-text">${$ccOnText}</span>
-      </media-tooltip-content>
-    </media-tooltip>
-  `;
-}
-
-export function DefaultPIPButton() {
-  const { translations } = useDefaultLayoutContext(),
-    $enterText = $i18n(translations, 'Enter PiP'),
-    $exitText = $i18n(translations, 'Exit PiP');
-  return html`
-    <media-tooltip class="vds-pip-tooltip vds-tooltip">
-      <media-tooltip-trigger>
-        <media-pip-button
-          class="vds-pip-button vds-button"
-          aria-label=${$i18n(translations, 'PiP')}
-        >
-          ${IconSlots(['pip-enter', 'pip-exit'])}
-        </media-pip-button>
-      </media-tooltip-trigger>
-      <media-tooltip-content class="vds-tooltip-content">
-        <span class="vds-pip-enter-tooltip-text">${$enterText}</span>
-        <span class="vds-pip-exit-tooltip-text">${$exitText}</span>
-      </media-tooltip-content>
-    </media-tooltip>
-  `;
-}
-
-export function DefaultFullscreenButton({ tooltip }: { tooltip: TooltipPlacement }) {
-  const { translations } = useDefaultLayoutContext(),
-    $enterText = $i18n(translations, 'Enter Fullscreen'),
-    $exitText = $i18n(translations, 'Exit Fullscreen');
-  return html`
-    <media-tooltip class="vds-fullscreen-tooltip vds-tooltip">
-      <media-tooltip-trigger>
-        <media-fullscreen-button
-          class="vds-fullscreen-button vds-button"
-          aria-label=${$i18n(translations, 'Fullscreen')}
-        >
-          ${IconSlots(['fs-enter', 'fs-exit'])}
-        </media-fullscreen-button>
-      </media-tooltip-trigger>
-      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
-        <span class="vds-fs-enter-tooltip-text">${$enterText}</span>
-        <span class="vds-fs-exit-tooltip-text">${$exitText}</span>
-      </media-tooltip-content>
-    </media-tooltip>
-  `;
-}
-
-export function DefaultSeekButton({
-  backward,
-  tooltip,
-}: {
-  backward?: boolean;
-  tooltip: TooltipPlacement;
-}) {
-  const { translations, seekStep } = useDefaultLayoutContext(),
-    seekText = !backward ? 'Seek Forward' : 'Seek Backward',
-    $label = $i18n(translations, seekText),
-    $seconds = () => (backward ? -1 : 1) * seekStep();
-  return html`
-    <media-tooltip class="vds-seek-tooltip vds-tooltip">
-      <media-tooltip-trigger>
-        <media-seek-button
-          class="vds-seek-button vds-button"
-          seconds=${$signal($seconds)}
-          aria-label=${$label}
-        >
-          ${!backward ? IconSlot('seek-forward') : IconSlot('seek-backward')}
-        </media-seek-button>
-      </media-tooltip-trigger>
-      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
-        ${$i18n(translations, seekText)}
-      </media-tooltip-content>
-    </media-tooltip>
-  `;
-}
-
-export function DefaultLiveButton() {
-  const { translations } = useDefaultLayoutContext(),
-    { live } = useMediaState(),
-    $label = $i18n(translations, 'Skip To Live'),
-    $liveText = $i18n(translations, 'LIVE');
-  return live()
-    ? html`
-        <media-live-button class="vds-live-button" aria-label=${$label}>
-          <span class="vds-live-button-text">${$liveText}</span>
-        </media-live-button>
-      `
-    : null;
-}
-
-export function DefaultDownloadButton() {
-  return $signal(() => {
-    const { download, translations } = useDefaultLayoutContext(),
-      $download = download();
-
-    if (isNil($download)) return null;
-
-    const { source, title } = useMediaState(),
-      $src = source(),
-      file = getDownloadFile({
-        title: title(),
-        src: $src,
-        download: $download,
-      });
-
-    return isString(file?.url)
-      ? html`
-          <media-tooltip class="vds-download-tooltip vds-tooltip">
-            <media-tooltip-trigger>
-              <a
-                role="button"
-                class="vds-download-button vds-button"
-                aria-label=${$i18n(translations, 'Download')}
-                href=${appendParamsToURL(file.url, { download: file.name })}
-                download=${file.name}
-                target="_blank"
-              >
-                <slot name="download-icon" data-class="vds-icon" />
-              </a>
-            </media-tooltip-trigger>
-            <media-tooltip-content class="vds-tooltip-content" placement="top">
-              ${$i18n(translations, 'Download')}
-            </media-tooltip-content>
-          </media-tooltip>
-        `
-      : null;
-  });
-}
-
-export function DefaultEpisodeButton({ tooltip }: { tooltip?: TooltipPlacement } = {}) {
-  const $label = 'Episodes',
-    $episodesText = 'Episodes';
-
-  function openEpisodes(e: Event) {
-    e.stopPropagation();
-    (e.currentTarget as HTMLElement | null)?.dispatchEvent(
-      new CustomEvent('vds-episodes-open', { bubbles: true, composed: true }),
-    );
-  }
-
-  const content = html`
-    <button
-      type="button"
-      class="vds-episode-button vds-button"
-      aria-label=${$label}
-      @pointerup=${openEpisodes}
-    >
-      ${IconSlot('menu-episodes')}
-    </button>
-  `;
-
-  if (!tooltip) return content;
-
-  return html`
-    <media-tooltip class="vds-episode-tooltip vds-tooltip">
-      <media-tooltip-trigger> ${content} </media-tooltip-trigger>
-      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
-        <span class="vds-episode-tooltip-text">${$episodesText}</span>
-      </media-tooltip-content>
-    </media-tooltip>
-  `;
-}

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

@@ -1,14 +0,0 @@
-import { html } from 'lit-html';
-
-import { useDefaultLayoutContext } from '../../../../../components/layouts/default/context';
-import { $i18n } from './utils';
-
-export function DefaultCaptions() {
-  const { translations } = useDefaultLayoutContext();
-  return html`
-    <media-captions
-      class="vds-captions"
-      .exampleText=${$i18n(translations, 'Captions look like this')}
-    ></media-captions>
-  `;
-}

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

@@ -1,5 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,135 +0,0 @@
-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;
-}