@hanifhan1f/vidstack 1.12.13

package/src/elements/define/layouts/slot-manager.ts

@@ -0,0 +1,61 @@
+import { onDispose } from 'maverick.js';
+import { animationFrameThrottle } from 'maverick.js/std';
+
+import { SlotObserver } from './slot-observer';
+
+let id = 0,
+  slotIdAttr = 'data-slot-id';
+
+export class SlotManager {
+  readonly #roots: HTMLElement[];
+  readonly slots: SlotObserver;
+
+  constructor(roots: HTMLElement[]) {
+    this.#roots = roots;
+    this.slots = new SlotObserver(roots, this.#update.bind(this));
+  }
+
+  connect() {
+    this.slots.connect();
+    this.#update();
+
+    const mutations = new MutationObserver(this.#onMutation);
+    for (const root of this.#roots) mutations.observe(root, { childList: true });
+    onDispose(() => mutations.disconnect());
+  }
+
+  #onMutation = animationFrameThrottle(this.#update.bind(this));
+
+  #update() {
+    for (const root of this.#roots) {
+      for (const node of root.children) {
+        if (node.nodeType !== 1) continue;
+
+        const name = node.getAttribute('slot');
+        if (!name) continue;
+
+        (node as HTMLElement).style.display = 'none';
+
+        let slotId = node.getAttribute(slotIdAttr);
+        if (!slotId) {
+          node.setAttribute(slotIdAttr, (slotId = ++id + ''));
+        }
+
+        for (const slot of this.slots.elements) {
+          if (slot.getAttribute('name') !== name || slot.getAttribute(slotIdAttr) === slotId) {
+            continue;
+          }
+
+          const clone = document.importNode(node, true);
+
+          if (name.includes('-icon')) clone.classList.add('vds-icon');
+          (clone as HTMLElement).style.display = '';
+          clone.removeAttribute('slot');
+
+          this.slots.assign(clone, slot);
+          slot.setAttribute(slotIdAttr, slotId);
+        }
+      }
+    }
+  }
+}

package/src/elements/define/layouts/slot-observer.ts

@@ -0,0 +1,70 @@
+import { render, type TemplateResult } from 'lit-html';
+import { onDispose } from 'maverick.js';
+import { animationFrameThrottle, isDOMNode } from 'maverick.js/std';
+
+export class SlotObserver {
+  #roots: HTMLElement[];
+  #callback: SlotObserverCallback;
+
+  readonly elements = new Set<HTMLSlotElement>();
+
+  constructor(roots: HTMLElement[], callback: SlotObserverCallback) {
+    this.#roots = roots;
+    this.#callback = callback;
+  }
+
+  connect() {
+    this.#update();
+
+    const observer = new MutationObserver(this.#onMutation);
+    for (const root of this.#roots) observer.observe(root, { childList: true, subtree: true });
+    onDispose(() => observer.disconnect());
+
+    onDispose(this.disconnect.bind(this));
+  }
+
+  disconnect() {
+    this.elements.clear();
+  }
+
+  assign(template: Element | TemplateResult, slot: HTMLSlotElement) {
+    if (isDOMNode(template)) {
+      slot.textContent = '';
+      slot.append(template);
+    } else {
+      render(null, slot);
+      render(template, slot);
+    }
+
+    if (!slot.style.display) {
+      slot.style.display = 'contents';
+    }
+
+    const el = slot.firstElementChild;
+    if (!el) return;
+
+    const classList = slot.getAttribute('data-class');
+    if (classList) el.classList.add(...classList.split(' '));
+  }
+
+  #onMutation = animationFrameThrottle(this.#update.bind(this));
+
+  #update(entries?: MutationRecord[]) {
+    if (entries && !entries.some((e) => e.addedNodes.length)) return;
+
+    let changed = false,
+      slots = this.#roots.flatMap((root) => [...root.querySelectorAll('slot')]);
+
+    for (const slot of slots) {
+      if (!slot.hasAttribute('name') || this.elements.has(slot)) continue;
+      this.elements.add(slot);
+      changed = true;
+    }
+
+    if (changed) this.#callback(this.elements);
+  }
+}
+
+export interface SlotObserverCallback {
+  (slots: Set<HTMLSlotElement>): void;
+}

package/src/elements/define/menus/_template.ts

@@ -0,0 +1,47 @@
+import { effect, type Scope } from 'maverick.js';
+import { isString } from 'maverick.js/std';
+
+import type { RadioOption } from '../../../components/ui/menu/radio/radio';
+import { cloneTemplate, requestScopedAnimationFrame } from '../../../utils/dom';
+import type { MediaRadioElement } from './radio-element';
+
+export function renderMenuItemsTemplate(
+  el: HTMLElement & { connectScope: Scope | null; getOptions(): RadioOption[] },
+  onCreate?: (el: MediaRadioElement, option: RadioOption, index: number) => void,
+) {
+  // Animation frame required as some frameworks append late for some reason.
+  requestScopedAnimationFrame(() => {
+    if (!el.connectScope) return;
+
+    const template = el.querySelector('template') as HTMLTemplateElement | null;
+    if (!template) return;
+
+    effect(() => {
+      if (
+        __DEV__ &&
+        !template.content.firstElementChild?.localName &&
+        !template.firstElementChild
+      ) {
+        throw Error('[vidstack] menu items template requires root element');
+      }
+
+      const options = el.getOptions();
+
+      cloneTemplate<MediaRadioElement>(template, options.length, (radio, i) => {
+        const { label, value } = options[i],
+          labelEl = radio.querySelector(`[data-part="label"]`);
+        radio.setAttribute('value', value);
+        if (labelEl) {
+          if (isString(label)) {
+            labelEl.textContent = label;
+          } else {
+            effect(() => {
+              labelEl.textContent = label();
+            });
+          }
+        }
+        onCreate?.(radio, options[i], i);
+      });
+    });
+  });
+}

package/src/elements/define/menus/audio-gain-group-element.ts

@@ -0,0 +1,37 @@
+import { Host } from 'maverick.js/element';
+
+import { AudioGainRadioGroup } from '../../../components/ui/menu/radio-groups/audio-gain-radio-group';
+import { renderMenuItemsTemplate } from './_template';
+
+/**
+ * @part label - Contains the audio gain option label.
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/menu/audio-gain-group}
+ * @example
+ * ```html
+ * <media-menu>
+ *   <!-- ... -->
+ *   <media-menu-items>
+ *     <media-audio-gain-radio-group>
+ *       <template>
+ *         <media-radio>
+ *           <span data-part="label"></span>
+ *         </media-radio>
+ *       </template>
+ *     </media-audio-gain-radio-group>
+ *   </media-menu-items>
+ * </media-menu>
+ * ```
+ */
+export class MediaAudioGainRadioGroupElement extends Host(HTMLElement, AudioGainRadioGroup) {
+  static tagName = 'media-audio-gain-radio-group';
+
+  protected onConnect(): void {
+    renderMenuItemsTemplate(this);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-audio-gain-radio-group': MediaAudioGainRadioGroupElement;
+  }
+}

package/src/elements/define/menus/audio-radio-group-element.ts

@@ -0,0 +1,37 @@
+import { Host } from 'maverick.js/element';
+
+import { AudioRadioGroup } from '../../../components/ui/menu/radio-groups/audio-radio-group';
+import { renderMenuItemsTemplate } from './_template';
+
+/**
+ * @part label - Contains the audio track option label.
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/menu/audio-radio-group}
+ * @example
+ * ```html
+ * <media-menu>
+ *   <!-- ... -->
+ *   <media-menu-items>
+ *     <media-audio-radio-group>
+ *       <template>
+ *         <media-radio>
+ *           <span data-part="label"></span>
+ *         </media-radio>
+ *       </template>
+ *     </media-audio-radio-group>
+ *   </media-menu-items>
+ * </media-menu>
+ * ```
+ */
+export class MediaAudioRadioGroupElement extends Host(HTMLElement, AudioRadioGroup) {
+  static tagName = 'media-audio-radio-group';
+
+  protected onConnect(): void {
+    renderMenuItemsTemplate(this);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-audio-radio-group': MediaAudioRadioGroupElement;
+  }
+}

package/src/elements/define/menus/captions-radio-group-element.ts

@@ -0,0 +1,37 @@
+import { Host } from 'maverick.js/element';
+
+import { CaptionsRadioGroup } from '../../../components/ui/menu/radio-groups/captions-radio-group';
+import { renderMenuItemsTemplate } from './_template';
+
+/**
+ * @part label - Contains the caption/subtitle option label.
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/menu/captions-radio-group}
+ * @example
+ * ```html
+ * <media-menu>
+ *   <!-- ... -->
+ *   <media-menu-items>
+ *     <media-captions-radio-group>
+ *       <template>
+ *         <media-radio>
+ *           <span data-part="label"></span>
+ *         </media-radio>
+ *       </template>
+ *     </media-captions-radio-group>
+ *   </media-menu-items>
+ * </media-menu>
+ * ```
+ */
+export class MediaCaptionsRadioGroupElement extends Host(HTMLElement, CaptionsRadioGroup) {
+  static tagName = 'media-captions-radio-group';
+
+  protected onConnect(): void {
+    renderMenuItemsTemplate(this);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-captions-radio-group': MediaCaptionsRadioGroupElement;
+  }
+}

package/src/elements/define/menus/chapters-radio-group-element.ts

@@ -0,0 +1,68 @@
+import { effect } from 'maverick.js';
+import { Host } from 'maverick.js/element';
+import { isString } from 'maverick.js/std';
+
+import {
+  ChaptersRadioGroup,
+  type ChaptersRadioOption,
+} from '../../../components/ui/menu/radio-groups/chapters-radio-group';
+import { renderMenuItemsTemplate } from './_template';
+
+/**
+ * @part label - Contains the chapter option title.
+ * @part start-time - Contains the chapter option start time.
+ * @part duration - Contains the chapter option duration.
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/menu/chapters-radio-group}
+ * @example
+ * ```html
+ * <media-menu>
+ *   <media-menu-button aria-label="Chapters">
+ *     <media-icon type="chapters"></media-icon>
+ *   </media-menu-button>
+ *   <media-chapters-radio-group thumbnails="...">
+ *     <template>
+ *       <media-radio>
+ *         <media-thumbnail></media-thumbnail>
+ *         <span data-part="label"></span>
+ *         <span data-part="start-time"></span>
+ *         <span data-part="duration"></span>
+ *       </media-radio>
+ *     </template>
+ *    </media-chapters-radio-group>
+ * </media-menu>
+ * ```
+ */
+export class MediaChaptersRadioGroupElement extends Host(HTMLElement, ChaptersRadioGroup) {
+  static tagName = 'media-chapters-radio-group';
+
+  protected onConnect(): void {
+    renderMenuItemsTemplate(this, (el, option) => {
+      const { cue, startTime, duration } = option as ChaptersRadioOption,
+        thumbnailEl = el.querySelector('.vds-thumbnail,media-thumbnail'),
+        startEl = el.querySelector('[data-part="start-time"]'),
+        durationEl = el.querySelector('[data-part="duration"]');
+
+      if (startEl) startEl.textContent = startTime;
+
+      if (durationEl) durationEl.textContent = duration;
+
+      if (thumbnailEl) {
+        thumbnailEl.setAttribute('time', cue.startTime + '');
+        effect(() => {
+          const thumbnails = this.$props.thumbnails();
+          if ('src' in thumbnailEl) {
+            thumbnailEl.src = thumbnails;
+          } else if (isString(thumbnails)) {
+            thumbnailEl.setAttribute('src', thumbnails);
+          }
+        });
+      }
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-chapters-radio-group': MediaChaptersRadioGroupElement;
+  }
+}

package/src/elements/define/menus/menu-button-element.ts

@@ -0,0 +1,27 @@
+import { Host } from 'maverick.js/element';
+
+import { MenuButton } from '../../../components/ui/menu/menu-button';
+
+/**
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/menu/menu}
+ * @example
+ * ```html
+ * <media-menu>
+ *   <media-menu-button aria-label="Settings">
+ *     <media-icon type="settings"></media-icon>
+ *   </media-menu-button>
+ *   <media-menu-items>
+ *     <!-- ... -->
+ *   </media-menu-items>
+ * </media-menu>
+ * ```
+ */
+export class MediaMenuButtonElement extends Host(HTMLElement, MenuButton) {
+  static tagName = 'media-menu-button';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-menu-button': MediaMenuButtonElement;
+  }
+}

package/src/elements/define/menus/menu-element.ts

@@ -0,0 +1,28 @@
+import { Host } from 'maverick.js/element';
+
+import { Menu } from '../../../components/ui/menu/menu';
+
+/**
+ * @part close-target - Closes menu when pressed.
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/menu/menu}
+ * @example
+ * ```html
+ * <media-menu>
+ *   <media-menu-button aria-label="Settings">
+ *     <media-icon type="settings"></media-icon>
+ *   </media-menu-button>
+ *   <media-menu-items>
+ *     <!-- ... -->
+ *   </media-menu-items>
+ * </media-menu>
+ * ```
+ */
+export class MediaMenuElement extends Host(HTMLElement, Menu) {
+  static tagName = 'media-menu';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-menu': MediaMenuElement;
+  }
+}

package/src/elements/define/menus/menu-item-element.ts

@@ -0,0 +1,24 @@
+import { Host } from 'maverick.js/element';
+
+import { MenuItem } from '../../../components/ui/menu/menu-item';
+
+/**
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/menu/menu}
+ * @example
+ * ```html
+ * <media-menu>
+ *   <media-menu-items>
+ *      <media-menu-item></media-menu-item>
+ *   </media-menu-items>
+ * </media-menu>
+ * ```
+ */
+export class MediaMenuItemElement extends Host(HTMLElement, MenuItem) {
+  static tagName = 'media-menu-item';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-menu-item': MediaMenuItemElement;
+  }
+}

package/src/elements/define/menus/menu-items-element.ts

@@ -0,0 +1,27 @@
+import { Host } from 'maverick.js/element';
+
+import { MenuItems } from '../../../components/ui/menu/menu-items';
+
+/**
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/menu/menu}
+ * @example
+ * ```html
+ * <media-menu>
+ *   <media-menu-button aria-label="Settings">
+ *     <media-icon type="settings"></media-icon>
+ *   </media-menu-button>
+ *   <media-menu-items>
+ *     <!-- ... -->
+ *   </media-menu-items>
+ * </media-menu>
+ * ```
+ */
+export class MediaMenuItemsElement extends Host(HTMLElement, MenuItems) {
+  static tagName = 'media-menu-items';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-menu-items': MediaMenuItemsElement;
+  }
+}

package/src/elements/define/menus/menu-portal-element.ts

@@ -0,0 +1,35 @@
+import { Host, type Attributes } from 'maverick.js/element';
+import { isString } from 'maverick.js/std';
+
+import { MenuPortal, type MenuPortalProps } from '../../../components/ui/menu/menu-portal';
+
+/**
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/menu/menu#portal}
+ * @example
+ * ```html
+ * <media-menu>
+ *   <!-- ... -->
+ *   <media-menu-portal>
+ *     <media-menu-items></media-menu-items>
+ *   </media-menu-portal>
+ * </media-menu>
+ * ```
+ */
+export class MediaMenuPortalElement extends Host(HTMLElement, MenuPortal) {
+  static tagName = 'media-menu-portal';
+
+  static override attrs: Attributes<MenuPortalProps> = {
+    disabled: {
+      converter(value) {
+        if (isString(value)) return value as 'fullscreen';
+        return value !== null;
+      },
+    },
+  };
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-menu-portal': MediaMenuPortalElement;
+  }
+}

package/src/elements/define/menus/quality-radio-group-element.ts

@@ -0,0 +1,51 @@
+import { effect } from 'maverick.js';
+import { Host } from 'maverick.js/element';
+
+import {
+  QualityRadioGroup,
+  type QualityRadioOption,
+} from '../../../components/ui/menu/radio-groups/quality-radio-group';
+import { renderMenuItemsTemplate } from './_template';
+
+/**
+ * @part label - Contains the quality option label.
+ * @part bitrate - Contains the quality option bitrate.
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/menu/quality-radio-group}
+ * @example
+ * ```html
+ * <media-menu>
+ *   <!-- ... -->
+ *   <media-menu-items>
+ *     <media-quality-radio-group>
+ *       <template>
+ *         <media-radio>
+ *           <span data-part="label"></span>
+ *           <span data-part="bitrate"></span>
+ *         </media-radio>
+ *       </template>
+ *     </media-quality-radio-group>
+ *   </media-menu-items>
+ * </media-menu>
+ * ```
+ */
+export class MediaQualityRadioGroupElement extends Host(HTMLElement, QualityRadioGroup) {
+  static tagName = 'media-quality-radio-group';
+
+  protected onConnect(): void {
+    renderMenuItemsTemplate(this, (el, option) => {
+      const bitrate = (option as QualityRadioOption).bitrate,
+        bitrateEl = el.querySelector('[data-part="bitrate"]');
+      if (bitrate && bitrateEl) {
+        effect(() => {
+          bitrateEl.textContent = bitrate() || '';
+        });
+      }
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-quality-radio-group': MediaQualityRadioGroupElement;
+  }
+}

package/src/elements/define/menus/radio-element.ts

@@ -0,0 +1,24 @@
+import { Host } from 'maverick.js/element';
+
+import { Radio } from '../../../components/ui/menu/radio/radio';
+
+/**
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/menu/radio}
+ * @example
+ * ```html
+ * <media-radio-group value="720">
+ *   <media-radio value="1080">1080p</media-radio>
+ *   <media-radio value="720">720p</media-radio>
+ *   <!-- ... -->
+ * </media-radio-group>
+ * ```
+ */
+export class MediaRadioElement extends Host(HTMLElement, Radio) {
+  static tagName = 'media-radio';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-radio': MediaRadioElement;
+  }
+}

package/src/elements/define/menus/radio-group-element.ts

@@ -0,0 +1,24 @@
+import { Host } from 'maverick.js/element';
+
+import { RadioGroup } from '../../../components/ui/menu/radio/radio-group';
+
+/**
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/menu/radio-group}
+ * @example
+ * ```html
+ * <media-radio-group value="720">
+ *   <media-radio value="1080">1080p</media-radio>
+ *   <media-radio value="720">720p</media-radio>
+ *   <!-- ... -->
+ * </media-radio-group>
+ * ```
+ */
+export class MediaRadioGroupElement extends Host(HTMLElement, RadioGroup) {
+  static tagName = 'media-radio-group';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-radio-group': MediaRadioGroupElement;
+  }
+}

package/src/elements/define/menus/speed-radio-group-element.ts

@@ -0,0 +1,37 @@
+import { Host } from 'maverick.js/element';
+
+import { SpeedRadioGroup } from '../../../components/ui/menu/radio-groups/speed-radio-group';
+import { renderMenuItemsTemplate } from './_template';
+
+/**
+ * @part label - Contains the speed option label.
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/menu/speed-radio-group}
+ * @example
+ * ```html
+ * <media-menu>
+ *   <!-- ... -->
+ *   <media-menu-items>
+ *     <media-speed-radio-group>
+ *       <template>
+ *         <media-radio>
+ *           <span data-part="label"></span>
+ *         </media-radio>
+ *       </template>
+ *     </media-speed-radio-group>
+ *   </media-menu-items>
+ * </media-menu>
+ * ```
+ */
+export class MediaSpeedRadioGroupElement extends Host(HTMLElement, SpeedRadioGroup) {
+  static tagName = 'media-speed-radio-group';
+
+  protected onConnect(): void {
+    renderMenuItemsTemplate(this);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-speed-radio-group': MediaSpeedRadioGroupElement;
+  }
+}

package/src/elements/define/player-element.ts

@@ -0,0 +1,33 @@
+import { Host } from 'maverick.js/element';
+import type { Attributes } from 'maverick.js/element';
+
+import { MediaPlayer } from '../../components/player';
+import type { MediaPlayerProps } from '../../core/api/player-props';
+
+/**
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/core/player}
+ * @example
+ * ```html
+ * <media-player src="...">
+ *   <media-provider></media-provider>
+ *   <!-- Other components that use/manage media state here. -->
+ * </media-player>
+ * ```
+ */
+export class MediaPlayerElement extends Host(HTMLElement, MediaPlayer) {
+  static tagName = 'media-player';
+
+  static override attrs: Attributes<MediaPlayerProps> = {
+    autoPlay: 'autoplay',
+    crossOrigin: 'crossorigin',
+    playsInline: 'playsinline',
+    preferNativeHLS: 'prefer-native-hls',
+    minLiveDVRWindow: 'min-live-dvr-window',
+  };
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-player': MediaPlayerElement;
+  }
+}