@hanifhan1f/vidstack 1.12.13 → 1.12.18

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

@@ -1,108 +0,0 @@
-import { html, type TemplateResult } from 'lit-html';
-import { type ReadSignal } from 'maverick.js';
-import { isArray, isFunction, isString } from 'maverick.js/std';
-
-import type { RadioOption } from '../../../../../../../components/ui/menu/radio/radio';
-import type { RadioGroupChangeEvent } from '../../../../../../../components/ui/menu/radio/radio-group';
-import { $signal } from '../../../../../../lit/directives/signal';
-import { IconSlot } from '../../../slots';
-
-let sectionId = 0;
-
-export function DefaultMenuSection({ label = '', value = '', children }) {
-  if (!label) {
-    return html`
-      <div class="vds-menu-section">
-        <div class="vds-menu-section-body">${children}</div>
-      </div>
-    `;
-  }
-
-  const id = `vds-menu-section-${++sectionId}`;
-
-  return html`
-    <section class="vds-menu-section" role="group" aria-labelledby=${id}>
-      <div class="vds-menu-section-title">
-        <header id=${id}>${label}</header>
-        ${value ? html`<div class="vds-menu-section-value">${value}</div>` : null}
-      </div>
-      <div class="vds-menu-section-body">${children}</div>
-    </section>
-  `;
-}
-
-export function DefaultMenuItem({ label, children }) {
-  return html`
-    <div class="vds-menu-item">
-      <div class="vds-menu-item-label">${label}</div>
-      ${children}
-    </div>
-  `;
-}
-
-export function DefaultMenuButton({
-  label,
-  icon,
-  hint,
-}: {
-  label: ReadSignal<string>;
-  icon?: string;
-  hint?: ReadSignal<string> | null;
-}) {
-  return html`
-    <media-menu-button class="vds-menu-item">
-      ${IconSlot('menu-arrow-left', 'vds-menu-close-icon')}
-      ${icon ? IconSlot(icon, 'vds-menu-item-icon') : null}
-      <span class="vds-menu-item-label">${$signal(label)}</span>
-      <span class="vds-menu-item-hint" data-part="hint">${hint ? $signal(hint) : null} </span>
-      ${IconSlot('menu-arrow-right', 'vds-menu-open-icon')}
-    </media-menu-button>
-  `;
-}
-
-export function DefaultRadioGroup({
-  value = null,
-  options,
-  hideLabel = false,
-  children = null,
-  onChange = null,
-}: {
-  value?: string | ReadSignal<string> | null;
-  options: RadioOption[] | ReadSignal<RadioOption[]>;
-  hideLabel?: boolean;
-  children?: TemplateResult | ((option: RadioOption) => TemplateResult | null) | null;
-  onChange?: ((event: RadioGroupChangeEvent) => void) | null;
-}) {
-  function renderRadio(option: RadioOption) {
-    const { value, label: content } = option;
-    return html`
-      <media-radio class="vds-radio" value=${value}>
-        ${IconSlot('menu-radio-check')}
-        ${!hideLabel
-          ? html`
-              <span class="vds-radio-label" data-part="label">
-                ${isString(content) ? content : $signal(content)}
-              </span>
-            `
-          : null}
-        ${isFunction(children) ? children(option) : children}
-      </media-radio>
-    `;
-  }
-
-  return html`
-    <media-radio-group
-      class="vds-radio-group"
-      value=${isString(value) ? value : value ? $signal(value) : ''}
-      @change=${onChange}
-    >
-      ${isArray(options) ? options.map(renderRadio) : $signal(() => options().map(renderRadio))}
-    </media-radio-group>
-  `;
-}
-
-export function createRadioOptions(entries: string[] | Record<string, string>): RadioOption[] {
-  return isArray(entries)
-    ? entries.map((entry) => ({ label: entry, value: entry.toLowerCase() }))
-    : Object.keys(entries).map((label) => ({ label, value: entries[label] }));
-}

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

@@ -1,59 +0,0 @@
-import { html } from 'lit-html';
-
-import { $signal } from '../../../../../../lit/directives/signal';
-import { IconSlot } from '../../../slots';
-
-export function DefaultSliderParts() {
-  return html`
-    <div class="vds-slider-track"></div>
-    <div class="vds-slider-track-fill vds-slider-track"></div>
-    <div class="vds-slider-thumb"></div>
-  `;
-}
-
-export function DefaultSliderSteps() {
-  return html`
-    <media-slider-steps class="vds-slider-steps">
-      <template>
-        <div class="vds-slider-step"></div>
-      </template>
-    </media-slider-steps>
-  `;
-}
-
-export function DefaultMenuSliderItem({
-  label = null,
-  value = null,
-  upIcon = '',
-  downIcon = '',
-  children,
-  isMin,
-  isMax,
-}: any) {
-  const hasTitle = label || value,
-    content = [
-      downIcon ? IconSlot(downIcon, 'down') : null,
-      children,
-      upIcon ? IconSlot(upIcon, 'up') : null,
-    ];
-
-  return html`
-    <div
-      class=${`vds-menu-item vds-menu-slider-item${hasTitle ? ' group' : ''}`}
-      data-min=${$signal(() => (isMin() ? '' : null))}
-      data-max=${$signal(() => (isMax() ? '' : null))}
-    >
-      ${hasTitle
-        ? html`
-            <div class="vds-menu-slider-title">
-              ${[
-                label ? html`<div>${label}</div>` : null,
-                value ? html`<div>${value}</div>` : null,
-              ]}
-            </div>
-            <div class="vds-menu-slider-body">${content}</div>
-          `
-        : content}
-    </div>
-  `;
-}

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

@@ -1,56 +0,0 @@
-import { html, type TemplateResult } from 'lit-html';
-import { effect, type ReadSignal } from 'maverick.js';
-import { isString, setAttribute } from 'maverick.js/std';
-
-import { useDefaultLayoutContext } from '../../../../../../components/layouts/default/context';
-import { useMediaState } from '../../../../../../core/api/media-context';
-import { watchColorScheme } from '../../../../../../utils/dom';
-import { $signal } from '../../../../../lit/directives/signal';
-
-export function MenuPortal(
-  container: ReadSignal<string | HTMLElement | null>,
-  template: TemplateResult,
-) {
-  return html`
-    <media-menu-portal .container=${$signal(container)} disabled="fullscreen">
-      ${template}
-    </media-menu-portal>
-  `;
-}
-
-export function createMenuContainer(
-  layoutEl: HTMLElement,
-  rootSelector: string | HTMLElement | null,
-  className: string,
-  isSmallLayout: ReadSignal<boolean>,
-) {
-  let root = isString(rootSelector) ? document.querySelector(rootSelector) : rootSelector;
-
-  // Check whether we can find a parent <dialog> element.
-  if (!root) root = layoutEl?.closest('dialog');
-
-  // Default to body.
-  if (!root) root = document.body;
-
-  const container = document.createElement('div');
-  container.style.display = 'contents';
-  container.classList.add(className);
-  root.append(container);
-
-  effect(() => {
-    if (!container) return;
-
-    const { viewType } = useMediaState(),
-      isSmall = isSmallLayout();
-
-    setAttribute(container, 'data-view-type', viewType());
-    setAttribute(container, 'data-sm', isSmall);
-    setAttribute(container, 'data-lg', !isSmall);
-    setAttribute(container, 'data-size', isSmall ? 'sm' : 'lg');
-  });
-
-  const { colorScheme } = useDefaultLayoutContext();
-  watchColorScheme(container, colorScheme);
-
-  return container;
-}

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

@@ -1,183 +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 { useMediaContext, useMediaState } from '../../../../../../core/api/media-context';
-import { sortVideoQualities } from '../../../../../../core/quality/utils';
-import { $signal } from '../../../../../lit/directives/signal';
-import { $i18n } from '../utils';
-import { DefaultMenuCheckbox } from './items/menu-checkbox';
-import { DefaultMenuButton, DefaultMenuItem, DefaultMenuSection } from './items/menu-items';
-import { DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps } from './items/menu-slider';
-
-export function DefaultPlaybackMenu() {
-  return $signal(() => {
-    const { translations } = useDefaultLayoutContext();
-    return html`
-      <media-menu class="vds-playback-menu vds-menu">
-        ${DefaultMenuButton({
-          label: () => i18n(translations, 'Playback'),
-          icon: 'menu-playback',
-        })}
-        <media-menu-items class="vds-menu-items">
-          ${[
-            DefaultMenuSection({
-              children: DefaultLoopCheckbox(),
-            }),
-            DefaultSpeedMenuSection(),
-            DefaultQualityMenuSection(),
-          ]}
-        </media-menu-items>
-      </media-menu>
-    `;
-  });
-}
-
-function DefaultLoopCheckbox() {
-  const { remote } = useMediaContext(),
-    { translations } = useDefaultLayoutContext(),
-    label = 'Loop';
-
-  return DefaultMenuItem({
-    label: $i18n(translations, label),
-    children: DefaultMenuCheckbox({
-      label,
-      storageKey: 'vds-player::user-loop',
-      onChange(checked, trigger) {
-        remote.userPrefersLoopChange(checked, trigger);
-      },
-    }),
-  });
-}
-
-function DefaultSpeedMenuSection() {
-  return $signal(() => {
-    const { translations } = useDefaultLayoutContext(),
-      { canSetPlaybackRate, playbackRate } = useMediaState();
-
-    if (!canSetPlaybackRate()) return null;
-
-    return DefaultMenuSection({
-      label: $i18n(translations, 'Speed'),
-      value: $signal(() =>
-        playbackRate() === 1 ? i18n(translations, 'Normal') : playbackRate() + 'x',
-      ),
-      children: [
-        DefaultMenuSliderItem({
-          upIcon: 'menu-speed-up',
-          downIcon: 'menu-speed-down',
-          children: DefaultSpeedSlider(),
-          isMin: () => playbackRate() === getSpeedMin(),
-          isMax: () => playbackRate() === getSpeedMax(),
-        }),
-      ],
-    });
-  });
-}
-
-function getSpeedMin() {
-  const { playbackRates } = useDefaultLayoutContext(),
-    rates = playbackRates();
-  return isArray(rates) ? rates[0] ?? 0 : rates.min;
-}
-
-function getSpeedMax() {
-  const { playbackRates } = useDefaultLayoutContext(),
-    rates = playbackRates();
-  return isArray(rates) ? rates[rates.length - 1] ?? 2 : rates.max;
-}
-
-function getSpeedStep() {
-  const { playbackRates } = useDefaultLayoutContext(),
-    rates = playbackRates();
-  return isArray(rates) ? rates[1] - rates[0] || 0.25 : rates.step;
-}
-
-function DefaultSpeedSlider() {
-  const { translations } = useDefaultLayoutContext(),
-    $label = $i18n(translations, 'Speed'),
-    $min = getSpeedMin,
-    $max = getSpeedMax,
-    $step = getSpeedStep;
-
-  return html`
-    <media-speed-slider
-      class="vds-speed-slider vds-slider"
-      aria-label=${$label}
-      min=${$signal($min)}
-      max=${$signal($max)}
-      step=${$signal($step)}
-      key-step=${$signal($step)}
-    >
-      ${DefaultSliderParts()}${DefaultSliderSteps()}
-    </media-speed-slider>
-  `;
-}
-function DefaultAutoQualityCheckbox() {
-  const { remote, qualities } = useMediaContext(),
-    { autoQuality, canSetQuality, qualities: $qualities } = useMediaState(),
-    { translations } = useDefaultLayoutContext(),
-    label = 'Auto',
-    $disabled = computed(() => !canSetQuality() || $qualities().length <= 1);
-
-  if ($disabled()) return null;
-
-  return DefaultMenuItem({
-    label: $i18n(translations, label),
-    children: DefaultMenuCheckbox({
-      label,
-      checked: autoQuality,
-      onChange(checked, trigger) {
-        if (checked) {
-          remote.requestAutoQuality(trigger);
-        } else {
-          remote.changeQuality(qualities.selectedIndex, trigger);
-        }
-      },
-    }),
-  });
-}
-
-function DefaultQualityMenuSection() {
-  return $signal(() => {
-    const { hideQualityBitrate, translations } = useDefaultLayoutContext(),
-      { canSetQuality, qualities, quality } = useMediaState(),
-      $disabled = computed(() => !canSetQuality() || qualities().length <= 1),
-      $sortedQualities = computed(() => sortVideoQualities(qualities()));
-
-    if ($disabled()) return null;
-
-    return DefaultMenuSection({
-      label: $i18n(translations, 'Quality'),
-      value: $signal(() => {
-        const height = quality()?.height,
-          bitrate = !hideQualityBitrate() ? quality()?.bitrate : null,
-          bitrateText = bitrate && bitrate > 0 ? `${(bitrate / 1000000).toFixed(2)} Mbps` : null,
-          autoText = i18n(translations, 'Auto');
-        return height ? `${height}p${bitrateText ? ` (${bitrateText})` : ''}` : autoText;
-      }),
-      children: [
-        DefaultMenuSliderItem({
-          upIcon: 'menu-quality-up',
-          downIcon: 'menu-quality-down',
-          children: DefaultQualitySlider(),
-          isMin: () => $sortedQualities()[0] === quality(),
-          isMax: () => $sortedQualities().at(-1) === quality(),
-        }),
-        DefaultAutoQualityCheckbox(),
-      ],
-    });
-  });
-}
-
-function DefaultQualitySlider() {
-  const { translations } = useDefaultLayoutContext(),
-    $label = $i18n(translations, 'Quality');
-  return html`
-    <media-quality-slider class="vds-quality-slider vds-slider" aria-label=${$label}>
-      ${DefaultSliderParts()}${DefaultSliderSteps()}
-    </media-quality-slider>
-  `;
-}

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

@@ -1,98 +0,0 @@
-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 { useMediaState } from '../../../../../../core/api/media-context';
-import { updateFontCssVars } from '../../../../../../core/font/font-vars';
-import { $signal } from '../../../../../lit/directives/signal';
-import { IconSlot } from '../../slots';
-import { $i18n } from '../utils';
-import { DefaultAccessibilityMenu } from './accessibility-menu';
-import { DefaultAudioMenu } from './audio-menu';
-import { DefaultCaptionsMenu } from './captions-menu';
-import { MenuPortal } from './menu-portal';
-import { DefaultPlaybackMenu } from './playback-menu';
-
-export function DefaultSettingsMenu({
-  placement,
-  portal,
-  tooltip,
-}: {
-  portal?: boolean;
-  tooltip: TooltipPlacement | ReadSignal<TooltipPlacement>;
-  placement: MenuPlacement | ReadSignal<MenuPlacement | null>;
-}) {
-  return $signal(() => {
-    const { viewType } = useMediaState(),
-      {
-        translations,
-        menuPortal,
-        noModal,
-        menuGroup,
-        smallWhen: smWhen,
-      } = useDefaultLayoutContext(),
-      $placement = computed(() =>
-        noModal() ? unwrap(placement) : !smWhen() ? unwrap(placement) : null,
-      ),
-      $offset = computed(() =>
-        !smWhen() && menuGroup() === 'bottom' && viewType() === 'video' ? 26 : 0,
-      ),
-      $isOpen = signal(false);
-
-    updateFontCssVars();
-
-    function onOpen() {
-      $isOpen.set(true);
-    }
-
-    function onClose() {
-      $isOpen.set(false);
-    }
-
-    const items = html`
-      <media-menu-items
-        class="vds-settings-menu-items vds-menu-items"
-        placement=${$signal($placement)}
-        offset=${$signal($offset)}
-      >
-        ${$signal(() => {
-          if (!$isOpen()) {
-            return null;
-          }
-
-          return [
-            DefaultPlaybackMenu(),
-            DefaultAccessibilityMenu(),
-            DefaultAudioMenu(),
-            DefaultCaptionsMenu(),
-          ];
-        })}
-      </media-menu-items>
-    `;
-
-    return html`
-      <media-menu class="vds-settings-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, 'Settings')}
-            >
-              ${IconSlot('menu-settings', 'vds-rotate-icon')}
-            </media-menu-button>
-          </media-tooltip-trigger>
-          <media-tooltip-content
-            class="vds-tooltip-content"
-            placement=${isFunction(tooltip) ? $signal(tooltip) : tooltip}
-          >
-            ${$i18n(translations, 'Settings')}
-          </media-tooltip-content>
-        </media-tooltip>
-        ${portal ? MenuPortal(menuPortal, items) : items}
-      </media-menu>
-    `;
-  });
-}

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

@@ -1,112 +0,0 @@
-import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { ref } from 'lit-html/directives/ref.js';
-import { signal } from 'maverick.js';
-
-import { useDefaultLayoutContext } from '../../../../../components/layouts/default/context';
-import type { SliderOrientation } from '../../../../../components/ui/sliders/slider/types';
-import type { TooltipPlacement } from '../../../../../components/ui/tooltip/tooltip-content';
-import { useMediaState } from '../../../../../core/api/media-context';
-import { useActive, useResizeObserver } from '../../../../../utils/dom';
-import { $signal } from '../../../../lit/directives/signal';
-import { DefaultMuteButton } from './buttons';
-import { $i18n } from './utils';
-
-export function DefaultVolumePopup({
-  orientation,
-  tooltip,
-}: {
-  orientation: SliderOrientation;
-  tooltip: TooltipPlacement;
-}) {
-  return $signal(() => {
-    const { pointer, muted, canSetVolume } = useMediaState();
-
-    if (pointer() === 'coarse' && !muted()) return null;
-
-    if (!canSetVolume()) {
-      return DefaultMuteButton({ tooltip });
-    }
-
-    const $rootRef = signal<Element | undefined>(undefined),
-      $isRootActive = useActive($rootRef);
-
-    return html`
-      <div class="vds-volume" ?data-active=${$signal($isRootActive)} ${ref($rootRef.set)}>
-        ${DefaultMuteButton({ tooltip })}
-        <div class="vds-volume-popup">${DefaultVolumeSlider({ orientation })}</div>
-      </div>
-    `;
-  });
-}
-
-export function DefaultVolumeSlider({ orientation }: { orientation?: SliderOrientation } = {}) {
-  const { translations } = useDefaultLayoutContext(),
-    $label = $i18n(translations, 'Volume');
-  return html`
-    <media-volume-slider
-      class="vds-volume-slider vds-slider"
-      aria-label=${$label}
-      orientation=${ifDefined(orientation)}
-    >
-      <div class="vds-slider-track"></div>
-      <div class="vds-slider-track-fill vds-slider-track"></div>
-      <media-slider-preview class="vds-slider-preview" no-clamp>
-        <media-slider-value class="vds-slider-value"></media-slider-value>
-      </media-slider-preview>
-      <div class="vds-slider-thumb"></div>
-    </media-volume-slider>
-  `;
-}
-
-export function DefaultTimeSlider() {
-  const $ref = signal<Element | undefined>(undefined),
-    $width = signal(0),
-    {
-      thumbnails,
-      translations,
-      sliderChaptersMinWidth,
-      disableTimeSlider,
-      seekStep,
-      noScrubGesture,
-    } = useDefaultLayoutContext(),
-    $label = $i18n(translations, 'Seek'),
-    $isDisabled = $signal(disableTimeSlider),
-    $isChaptersDisabled = $signal(() => $width() < sliderChaptersMinWidth()),
-    $thumbnails = $signal(thumbnails);
-
-  useResizeObserver($ref, () => {
-    const el = $ref();
-    el && $width.set(el.clientWidth);
-  });
-
-  return html`
-    <media-time-slider
-      class="vds-time-slider vds-slider"
-      aria-label=${$label}
-      key-step=${$signal(seekStep)}
-      ?disabled=${$isDisabled}
-      ?no-swipe-gesture=${$signal(noScrubGesture)}
-      ${ref($ref.set)}
-    >
-      <media-slider-chapters class="vds-slider-chapters" ?disabled=${$isChaptersDisabled}>
-        <template>
-          <div class="vds-slider-chapter">
-            <div class="vds-slider-track"></div>
-            <div class="vds-slider-track-fill vds-slider-track"></div>
-            <div class="vds-slider-progress vds-slider-track"></div>
-          </div>
-        </template>
-      </media-slider-chapters>
-      <div class="vds-slider-thumb"></div>
-      <media-slider-preview class="vds-slider-preview">
-        <media-slider-thumbnail
-          class="vds-slider-thumbnail vds-thumbnail"
-          .src=${$thumbnails}
-        ></media-slider-thumbnail>
-        <div class="vds-slider-chapter-title" data-part="chapter-title"></div>
-        <media-slider-value class="vds-slider-value"></media-slider-value>
-      </media-slider-preview>
-    </media-time-slider>
-  `;
-}

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

@@ -1,41 +0,0 @@
-import { html } from 'lit-html';
-
-import { useMediaState } from '../../../../../core/api/media-context';
-import { $signal } from '../../../../lit/directives/signal';
-import { DefaultLiveButton } from './buttons';
-
-export function DefaultTimeGroup() {
-  return html`
-    <div class="vds-time-group">
-      ${$signal(() => {
-        const { duration } = useMediaState();
-
-        if (!duration()) return null;
-
-        return [
-          html`<media-time class="vds-time" type="current"></media-time>`,
-          html`<div class="vds-time-divider">/</div>`,
-          html`<media-time class="vds-time" type="duration"></media-time>`,
-        ];
-      })}
-    </div>
-  `;
-}
-
-export function DefaultTimeInvert() {
-  return $signal(() => {
-    const { live, duration } = useMediaState();
-    return live()
-      ? DefaultLiveButton()
-      : duration()
-        ? html`<media-time class="vds-time" type="current" toggle remainder></media-time>`
-        : null;
-  });
-}
-
-export function DefaultTimeInfo(): any {
-  return $signal(() => {
-    const { live } = useMediaState();
-    return live() ? DefaultLiveButton() : DefaultTimeGroup();
-  });
-}

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

@@ -1,25 +0,0 @@
-import { html } from 'lit-html';
-import { signal } from 'maverick.js';
-
-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';
-
-export function DefaultTitle() {
-  return $signal(() => {
-    const { textTracks } = useMediaContext(),
-      { title, started } = useMediaState(),
-      $hasChapters = signal<TextTrack | null>(null);
-
-    watchActiveTextTrack(textTracks, 'chapters', $hasChapters.set);
-
-    return $hasChapters() && (started() || !title())
-      ? DefaultChapterTitle()
-      : html`<media-title class="vds-chapter-title"></media-title>`;
-  });
-}
-
-export function DefaultChapterTitle() {
-  return html`<media-chapter-title class="vds-chapter-title"></media-chapter-title>`;
-}