@hanifhan1f/vidstack 1.12.13 → 1.12.18

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

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

@@ -1,117 +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 { 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>
-  `;
-}

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

@@ -1,133 +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 { $signal } from '../../../../../lit/directives/signal';
-import { IconSlot } from '../../slots';
-import { MenuPortal } from './menu-portal';
-
-export function DefaultEpisodesMenu({
-  placement,
-  portal,
-  tooltip,
-}: {
-  portal?: boolean;
-  tooltip: TooltipPlacement | ReadSignal<TooltipPlacement>;
-  placement: MenuPlacement | ReadSignal<MenuPlacement | null>;
-}) {
-  return $signal(() => {
-    const { viewType } = useMediaState(),
-      {
-        episodes,
-        episodesTitle,
-        menuPortal,
-        noModal,
-        menuGroup,
-        smallWhen: smWhen,
-      } = useDefaultLayoutContext(),
-      list = episodes() ?? [];
-
-    const $placement = computed(() =>
-        noModal() ? unwrap(placement) : !smWhen() ? unwrap(placement) : null,
-      ),
-      $offset = computed(() =>
-        !smWhen() && menuGroup() === 'bottom' && viewType() === 'video' ? 26 : 0,
-      ),
-      $isOpen = signal(false);
-
-    function onOpen(event: Event) {
-      $isOpen.set(true);
-      (event.currentTarget as HTMLElement | null)?.dispatchEvent(
-        new CustomEvent('vds-episodes-open', { bubbles: true, composed: true }),
-      );
-    }
-
-    function onClose() {
-      $isOpen.set(false);
-    }
-
-    const items = html`
-      <media-menu-items
-        class="vds-episodes-menu-items vds-menu-items"
-        placement=${$signal($placement)}
-        offset=${$signal($offset)}
-      >
-        ${$signal(() => {
-          if (!$isOpen()) return null;
-          return html`
-            <div class="vds-episodes-panel-header">
-              <span class="vds-episodes-panel-title">${episodesTitle()}</span>
-            </div>
-            ${list.length
-              ? html`
-                  <div class="vds-episodes-list" role="list">
-                    ${list.map((episode, index) => {
-                      const episodeName =
-                          episode.episodeTitle || `Episode ${episode.episodeNumber ?? index + 1}`,
-                        runtimeText = Number.isFinite(episode.runtime)
-                          ? `${episode.runtime} min left`
-                          : null;
-                      return html`
-                        <article class="vds-episode-item" role="listitem">
-                          ${episode.thumbnail
-                            ? html`
-                                <img
-                                  class="vds-episode-thumb"
-                                  src=${episode.thumbnail}
-                                  alt=${episode.title || episodeName}
-                                  loading="lazy"
-                                  decoding="async"
-                                />
-                              `
-                            : html`<div
-                                class="vds-episode-thumb vds-episode-thumb-placeholder"
-                              ></div>`}
-                          <div class="vds-episode-body">
-                            <h4 class="vds-episode-title" title=${episode.title || ''}>
-                              ${episode.title || '-'}
-                            </h4>
-                            <p class="vds-episode-subtitle" title=${episodeName}>${episodeName}</p>
-                            ${runtimeText
-                              ? html`<p class="vds-episode-meta">${runtimeText}</p>`
-                              : null}
-                            ${episode.overview
-                              ? html`<p class="vds-episode-desc" title=${episode.overview}>
-                                  ${episode.overview}
-                                </p>`
-                              : null}
-                          </div>
-                        </article>
-                      `;
-                    })}
-                  </div>
-                `
-              : html`<div class="vds-episodes-empty">Episodes belum tersedia.</div>`}
-          `;
-        })}
-      </media-menu-items>
-    `;
-
-    return html`
-      <media-menu class="vds-episodes-menu vds-menu" @open=${onOpen} @close=${onClose}>
-        <media-tooltip class="vds-tooltip">
-          <media-tooltip-trigger>
-            <media-menu-button class="vds-episode-button vds-button" aria-label="Episodes">
-              ${IconSlot('menu-episodes')}
-            </media-menu-button>
-          </media-tooltip-trigger>
-          <media-tooltip-content
-            class="vds-tooltip-content"
-            placement=${isFunction(tooltip) ? $signal(tooltip) : tooltip}
-          >
-            Episodes
-          </media-tooltip-content>
-        </media-tooltip>
-        ${portal ? MenuPortal(menuPortal, items) : items}
-      </media-menu>
-    `;
-  });
-}

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

@@ -1,253 +0,0 @@
-import { html } from 'lit-html';
-import { tick } from 'maverick.js';
-import { camelToKebabCase, isString } 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 {
-  FONT_COLOR_OPTION,
-  FONT_FAMILY_OPTION,
-  FONT_OPACITY_OPTION,
-  FONT_SIGNALS,
-  FONT_SIZE_OPTION,
-  FONT_TEXT_SHADOW_OPTION,
-  onFontReset,
-  type DefaultFontSettingProps,
-} from '../../../../../../core/font/font-options';
-import { $signal } from '../../../../../lit/directives/signal';
-import { $i18n } from '../utils';
-import {
-  createRadioOptions,
-  DefaultMenuButton,
-  DefaultMenuItem,
-  DefaultMenuSection,
-  DefaultRadioGroup,
-} from './items/menu-items';
-import { DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps } from './items/menu-slider';
-
-const FONT_SIZE_OPTION_WITH_ICONS = {
-  ...FONT_SIZE_OPTION,
-  upIcon: 'menu-opacity-up',
-  downIcon: 'menu-opacity-down',
-};
-
-const FONT_OPACITY_OPTION_WITH_ICONS = {
-  ...FONT_OPACITY_OPTION,
-  upIcon: 'menu-opacity-up',
-  downIcon: 'menu-opacity-down',
-};
-
-export function DefaultFontMenu() {
-  return $signal(() => {
-    const { hasCaptions } = useMediaState(),
-      { translations } = useDefaultLayoutContext();
-
-    if (!hasCaptions()) return null;
-
-    return html`
-      <media-menu class="vds-font-menu vds-menu">
-        ${DefaultMenuButton({
-          label: () => i18n(translations, 'Caption Styles'),
-        })}
-        <media-menu-items class="vds-menu-items">
-          ${[
-            DefaultMenuSection({
-              label: $i18n(translations, 'Font'),
-              children: [DefaultFontFamilyMenu(), DefaultFontSizeSlider()],
-            }),
-            DefaultMenuSection({
-              label: $i18n(translations, 'Text'),
-              children: [
-                DefaultTextColorInput(),
-                DefaultTextShadowMenu(),
-                DefaultTextOpacitySlider(),
-              ],
-            }),
-            DefaultMenuSection({
-              label: $i18n(translations, 'Text Background'),
-              children: [DefaultTextBgInput(), DefaultTextBgOpacitySlider()],
-            }),
-            DefaultMenuSection({
-              label: $i18n(translations, 'Display Background'),
-              children: [DefaultDisplayBgInput(), DefaultDisplayOpacitySlider()],
-            }),
-            DefaultMenuSection({
-              children: [DefaultResetMenuItem()],
-            }),
-          ]}
-        </media-menu-items>
-      </media-menu>
-    `;
-  });
-}
-
-function DefaultFontFamilyMenu() {
-  return DefaultFontSetting({
-    label: 'Family',
-    option: FONT_FAMILY_OPTION,
-    type: 'fontFamily',
-  });
-}
-
-function DefaultFontSizeSlider() {
-  return DefaultFontSetting({
-    label: 'Size',
-    option: FONT_SIZE_OPTION_WITH_ICONS,
-    type: 'fontSize',
-  });
-}
-
-function DefaultTextColorInput() {
-  return DefaultFontSetting({
-    label: 'Color',
-    option: FONT_COLOR_OPTION,
-    type: 'textColor',
-  });
-}
-
-function DefaultTextOpacitySlider() {
-  return DefaultFontSetting({
-    label: 'Opacity',
-    option: FONT_OPACITY_OPTION_WITH_ICONS,
-    type: 'textOpacity',
-  });
-}
-
-function DefaultTextShadowMenu() {
-  return DefaultFontSetting({
-    label: 'Shadow',
-    option: FONT_TEXT_SHADOW_OPTION,
-    type: 'textShadow',
-  });
-}
-
-function DefaultTextBgInput() {
-  return DefaultFontSetting({
-    label: 'Color',
-    option: FONT_COLOR_OPTION,
-    type: 'textBg',
-  });
-}
-
-function DefaultTextBgOpacitySlider() {
-  return DefaultFontSetting({
-    label: 'Opacity',
-    option: FONT_OPACITY_OPTION_WITH_ICONS,
-    type: 'textBgOpacity',
-  });
-}
-
-function DefaultDisplayBgInput() {
-  return DefaultFontSetting({
-    label: 'Color',
-    option: FONT_COLOR_OPTION,
-    type: 'displayBg',
-  });
-}
-
-function DefaultDisplayOpacitySlider() {
-  return DefaultFontSetting({
-    label: 'Opacity',
-    option: FONT_OPACITY_OPTION_WITH_ICONS,
-    type: 'displayBgOpacity',
-  });
-}
-
-function DefaultResetMenuItem() {
-  const { translations } = useDefaultLayoutContext(),
-    $label = () => i18n(translations, 'Reset');
-
-  return html`
-    <button class="vds-menu-item" role="menuitem" @click=${onFontReset}>
-      <span class="vds-menu-item-label">${$signal($label)}</span>
-    </button>
-  `;
-}
-
-function DefaultFontSetting({ label, option, type }: DefaultFontSettingProps) {
-  const { player } = useMediaContext(),
-    { translations } = useDefaultLayoutContext(),
-    $currentValue = FONT_SIGNALS[type],
-    $label = () => i18n(translations, label);
-
-  function notify() {
-    tick();
-    player.dispatchEvent(new Event('vds-font-change'));
-  }
-
-  if (option.type === 'color') {
-    function onColorChange(event) {
-      $currentValue.set(event.target.value);
-      notify();
-    }
-
-    return DefaultMenuItem({
-      label: $signal($label),
-      children: html`
-        <input
-          class="vds-color-picker"
-          type="color"
-          .value=${$signal($currentValue)}
-          @input=${onColorChange}
-        />
-      `,
-    });
-  }
-
-  if (option.type === 'slider') {
-    const { min, max, step, upIcon, downIcon } = option;
-
-    function onSliderValueChange(event) {
-      $currentValue.set(event.detail + '%');
-      notify();
-    }
-
-    return DefaultMenuSliderItem({
-      label: $signal($label),
-      value: $signal($currentValue),
-      upIcon,
-      downIcon,
-      isMin: () => $currentValue() === min + '%',
-      isMax: () => $currentValue() === max + '%',
-      children: html`
-        <media-slider
-          class="vds-slider"
-          min=${min}
-          max=${max}
-          step=${step}
-          key-step=${step}
-          .value=${$signal(() => parseInt($currentValue()))}
-          aria-label=${$signal($label)}
-          @value-change=${onSliderValueChange}
-          @drag-value-change=${onSliderValueChange}
-        >
-          ${DefaultSliderParts()}${DefaultSliderSteps()}
-        </media-slider>
-      `,
-    });
-  }
-
-  const radioOptions = createRadioOptions(option.values),
-    $hint = () => {
-      const value = $currentValue(),
-        label = radioOptions.find((radio) => radio.value === value)?.label || '';
-      return i18n(translations, isString(label) ? label : label());
-    };
-
-  return html`
-    <media-menu class=${`vds-${camelToKebabCase(type)}-menu vds-menu`}>
-      ${DefaultMenuButton({ label: $label, hint: $hint })}
-      <media-menu-items class="vds-menu-items">
-        ${DefaultRadioGroup({
-          value: $currentValue,
-          options: radioOptions,
-          onChange({ detail: value }) {
-            $currentValue.set(value);
-            notify();
-          },
-        })}
-      </media-menu-items>
-    </media-menu>
-  `;
-}

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

@@ -1,67 +0,0 @@
-import { html } from 'lit-html';
-import { effect, peek, signal, type ReadSignal } from 'maverick.js';
-import { isKeyboardClick } from 'maverick.js/std';
-
-import { useDefaultLayoutContext } from '../../../../../../../components/layouts/default/context';
-import type { DefaultLayoutWord } from '../../../../../../../components/layouts/default/translations';
-import { $ariaBool } from '../../../../../../../utils/aria';
-import { $signal } from '../../../../../../lit/directives/signal';
-import { $i18n } from '../../utils';
-
-export function DefaultMenuCheckbox({
-  label,
-  checked,
-  defaultChecked = false,
-  storageKey,
-  onChange,
-}: {
-  label: string;
-  storageKey?: string;
-  checked?: ReadSignal<boolean>;
-  defaultChecked?: boolean;
-  onChange(checked: boolean, trigger?: Event): void;
-}) {
-  const { translations } = useDefaultLayoutContext(),
-    savedValue = storageKey ? localStorage.getItem(storageKey) : null,
-    $checked = signal(!!(savedValue ?? defaultChecked)),
-    $active = signal(false),
-    $ariaChecked = $signal($ariaBool($checked)),
-    $label = $i18n(translations, label as DefaultLayoutWord);
-
-  if (storageKey) onChange(peek($checked));
-
-  if (checked) {
-    effect(() => void $checked.set(checked()));
-  }
-
-  function onPress(event?: PointerEvent) {
-    if (event?.button === 1) return;
-    $checked.set((checked) => !checked);
-    if (storageKey) localStorage.setItem(storageKey, $checked() ? '1' : '');
-    onChange($checked(), event);
-    $active.set(false);
-  }
-
-  function onKeyDown(event: KeyboardEvent) {
-    if (isKeyboardClick(event)) onPress();
-  }
-
-  function onActive(event: PointerEvent) {
-    if (event.button !== 0) return;
-    $active.set(true);
-  }
-
-  return html`
-    <div
-      class="vds-menu-checkbox"
-      role="menuitemcheckbox"
-      tabindex="0"
-      aria-label=${$label}
-      aria-checked=${$ariaChecked}
-      data-active=${$signal(() => ($active() ? '' : null))}
-      @pointerup=${onPress}
-      @pointerdown=${onActive}
-      @keydown=${onKeyDown}
-    ></div>
-  `;
-}