@hanifhan1f/vidstack 1.12.13

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

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

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

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

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

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

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

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