@hanifhan1f/vidstack 1.12.13

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+import type { DefaultLayoutContext } from '../../../../../components/layouts/default/context';
+import {
+  i18n,
+  type DefaultLayoutWord,
+} from '../../../../../components/layouts/default/translations';
+import { $signal } from '../../../../lit/directives/signal';
+
+export function $i18n(translations: DefaultLayoutContext['translations'], word: DefaultLayoutWord) {
+  return $signal(() => i18n(translations, word));
+}

package/src/elements/define/layouts/default/video-layout-element.ts

@@ -0,0 +1,125 @@
+import { effect } from 'maverick.js';
+import { Host, type Attributes } from 'maverick.js/element';
+
+import { useDefaultLayoutContext } from '../../../../components/layouts/default/context';
+import type { DefaultLayoutProps } from '../../../../components/layouts/default/props';
+import { DefaultVideoLayout } from '../../../../components/layouts/default/video-layout';
+import { useMediaContext, type MediaContext } from '../../../../core/api/media-context';
+import { $signal } from '../../../lit/directives/signal';
+import { LitElement, type LitRenderer } from '../../../lit/lit-element';
+import { setLayoutName } from '../layout-name';
+import { SlotManager } from '../slot-manager';
+import { DefaultLayoutIconsLoader } from './icons-loader';
+import { createMenuContainer } from './ui/menu/menu-portal';
+import {
+  DefaultBufferingIndicator,
+  DefaultVideoLayoutLarge,
+  DefaultVideoLayoutSmall,
+  DefaultVideoLoadLayout,
+} from './video-layout';
+
+/**
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/layouts/default-layout}
+ * @example
+ * ```html
+ * <media-player>
+ *   <media-provider></media-provider>
+ *   <media-video-layout></media-video-layout>
+ * </media-player>
+ * ```
+ */
+export class MediaVideoLayoutElement
+  extends Host(LitElement, DefaultVideoLayout)
+  implements LitRenderer
+{
+  static tagName = 'media-video-layout';
+
+  static override attrs: Attributes<DefaultLayoutProps> = {
+    smallWhen: {
+      converter(value) {
+        return value !== 'never' && !!value;
+      },
+    },
+    episodes: {
+      converter(value) {
+        if (!value) return null;
+        try {
+          const parsed = JSON.parse(value);
+          return Array.isArray(parsed) ? parsed : null;
+        } catch {
+          return null;
+        }
+      },
+    },
+  };
+
+  #media!: MediaContext;
+
+  protected onSetup() {
+    // Avoid memory leaks if `keepAlive` is true. The DOM will re-render regardless.
+    this.forwardKeepAlive = false;
+
+    this.#media = useMediaContext();
+
+    this.classList.add('vds-video-layout');
+  }
+
+  protected onConnect() {
+    setLayoutName('video', () => this.isMatch);
+    this.#setupMenuContainer();
+  }
+
+  render() {
+    return $signal(this.#render.bind(this));
+  }
+
+  #setupMenuContainer() {
+    const { menuPortal } = useDefaultLayoutContext();
+
+    effect(() => {
+      if (!this.isMatch) return;
+
+      const container = createMenuContainer(
+          this,
+          this.menuContainer,
+          'vds-video-layout',
+          () => this.isSmallLayout,
+        ),
+        roots = container ? [this, container] : [this];
+
+      const iconsManager = this.$props.customIcons()
+        ? new SlotManager(roots)
+        : new DefaultLayoutIconsLoader(roots);
+
+      iconsManager.connect();
+
+      menuPortal.set(container);
+
+      return () => {
+        container.remove();
+        menuPortal.set(null);
+      };
+    });
+  }
+
+  #render() {
+    const { load } = this.#media.$props,
+      { canLoad, streamType, nativeControls } = this.#media.$state;
+
+    return !nativeControls() && this.isMatch
+      ? load() === 'play' && !canLoad()
+        ? DefaultVideoLoadLayout()
+        : streamType() === 'unknown'
+          ? DefaultBufferingIndicator()
+          : this.isSmallLayout
+            ? DefaultVideoLayoutSmall()
+            : DefaultVideoLayoutLarge()
+      : null;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-video-layout': MediaVideoLayoutElement;
+  }
+}