@hanifhan1f/vidstack 1.12.13 → 1.12.18

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

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

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

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

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

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

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

@@ -1,53 +0,0 @@
-import { effect } from 'maverick.js';
-import { Host, type Attributes } from 'maverick.js/element';
-import { setAttribute } from 'maverick.js/std';
-
-import { Poster, type PosterProps } from '../../components/ui/poster';
-
-/**
- * @docs {@link https://www.vidstack.io/docs/wc/player/components/display/poster}
- * @example
- * ```html
- * <media-player>
- *   <media-poster src="..." alt="Large alien ship hovering over New York."></media-poster>
- * </media-player>
- * ```
- */
-export class MediaPosterElement extends Host(HTMLElement, Poster) {
-  static tagName = 'media-poster';
-
-  static override attrs: Attributes<PosterProps> = {
-    crossOrigin: 'crossorigin',
-  };
-
-  #img = document.createElement('img');
-
-  protected onSetup(): void {
-    this.$state.img.set(this.#img);
-  }
-
-  protected onConnect(): void {
-    const { src, alt, crossOrigin } = this.$state;
-
-    effect(() => {
-      const { loading, hidden } = this.$state;
-      this.#img.style.display = loading() || hidden() ? 'none' : '';
-    });
-
-    effect(() => {
-      setAttribute(this.#img, 'alt', alt());
-      setAttribute(this.#img, 'crossorigin', crossOrigin());
-      setAttribute(this.#img, 'src', src());
-    });
-
-    if (this.#img.parentNode !== this) {
-      this.prepend(this.#img);
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-poster': MediaPosterElement;
-  }
-}

package/src/elements/define/provider-cast-display.ts

@@ -1,36 +0,0 @@
-import { effect } from 'maverick.js';
-import chromecastIconPaths from 'media-icons/dist/icons/chromecast.js';
-
-import type { MediaStore } from '../../core/api/player-state';
-import { cloneTemplateContent, createTemplate } from '../../utils/dom';
-
-const svgTemplate = /* #__PURE__*/ createTemplate(
-  `<svg viewBox="0 0 32 32" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"></svg>`,
-);
-
-export function insertContent(container: HTMLElement, $state: MediaStore) {
-  const icon = cloneTemplateContent<SVGElement>(svgTemplate);
-  icon.innerHTML = chromecastIconPaths;
-  container.append(icon);
-
-  const text = document.createElement('span');
-  text.classList.add('vds-google-cast-info');
-  container.append(text);
-
-  const deviceName = document.createElement('span');
-  deviceName.classList.add('vds-google-cast-device-name');
-
-  effect(() => {
-    const { remotePlaybackInfo } = $state,
-      info = remotePlaybackInfo();
-
-    if (info?.deviceName) {
-      deviceName.textContent = info.deviceName;
-      text.append('Google Cast on ', deviceName);
-    }
-
-    return () => {
-      text.textContent = '';
-    };
-  });
-}

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

@@ -1,158 +0,0 @@
-import { computed, effect } from 'maverick.js';
-import { Host } from 'maverick.js/element';
-import { setAttribute } from 'maverick.js/std';
-
-import { MediaProvider } from '../../components/provider/provider';
-import { useMediaContext, type MediaContext } from '../../core/api/media-context';
-
-/**
- * @docs {@link https://www.vidstack.io/docs/wc/player/components/core/provider}
- * @example
- * ```html
- * <media-player>
- *   <media-provider></media-provider>
- *   <!-- ... -->
- * </media-player>
- * ```
- */
-export class MediaProviderElement extends Host(HTMLElement, MediaProvider) {
-  static tagName = 'media-provider';
-
-  #media!: MediaContext;
-  #target: HTMLElement | null = null;
-  #blocker: HTMLElement | null = null;
-
-  protected onSetup(): void {
-    this.#media = useMediaContext();
-    this.setAttribute('keep-alive', '');
-  }
-
-  protected onDestroy(): void {
-    this.#blocker?.remove();
-    this.#blocker = null;
-    this.#target?.remove();
-    this.#target = null;
-  }
-
-  protected onConnect(): void {
-    effect(() => {
-      const loader = this.$state.loader(),
-        isYouTubeEmbed = loader?.name === 'youtube',
-        isVimeoEmbed = loader?.name === 'vimeo',
-        isEmbed = isYouTubeEmbed || isVimeoEmbed,
-        isGoogleCast = loader?.name === 'google-cast';
-
-      const target = loader
-        ? isGoogleCast
-          ? this.#createGoogleCastContainer()
-          : isEmbed
-            ? this.#createIFrame()
-            : loader.mediaType() === 'audio'
-              ? this.#createAudio()
-              : this.#createVideo()
-        : null;
-
-      if (this.#target !== target) {
-        const parent = this.#target?.parentElement ?? this;
-
-        this.#target?.remove();
-        this.#target = target;
-        if (target) parent.prepend(target);
-
-        if (isEmbed && target) {
-          effect(() => {
-            const { nativeControls, viewType } = this.#media.$state,
-              showNativeControls = nativeControls(),
-              isAudioView = viewType() === 'audio',
-              showBlocker = !showNativeControls && !isAudioView;
-
-            if (showBlocker) {
-              this.#blocker = this.querySelector('.vds-blocker');
-              if (!this.#blocker) {
-                this.#blocker = document.createElement('div');
-                this.#blocker.classList.add('vds-blocker');
-                target.after(this.#blocker);
-              }
-            } else {
-              this.#blocker?.remove();
-              this.#blocker = null;
-            }
-
-            setAttribute(target, 'data-no-controls', !showNativeControls);
-          });
-        }
-      }
-
-      if (isYouTubeEmbed) target?.classList.add('vds-youtube');
-      else if (isVimeoEmbed) target?.classList.add('vds-vimeo');
-
-      if (!isEmbed) {
-        this.#blocker?.remove();
-        this.#blocker = null;
-      }
-
-      this.load(target);
-    });
-  }
-
-  #createAudio() {
-    const audio =
-      this.#target instanceof HTMLAudioElement ? this.#target : document.createElement('audio');
-
-    const { controls, crossOrigin } = this.#media.$state;
-    effect(() => {
-      setAttribute(audio, 'controls', controls());
-      setAttribute(audio, 'crossorigin', crossOrigin());
-    });
-
-    return audio;
-  }
-
-  #createVideo() {
-    const video =
-      this.#target instanceof HTMLVideoElement ? this.#target : document.createElement('video');
-
-    const { crossOrigin, poster, nativeControls } = this.#media.$state,
-      $controls = computed(() => (nativeControls() ? 'true' : null)),
-      $poster = computed(() => (poster() && nativeControls() ? poster() : null));
-
-    effect(() => {
-      setAttribute(video, 'controls', $controls());
-      setAttribute(video, 'crossorigin', crossOrigin());
-      setAttribute(video, 'poster', $poster());
-    });
-
-    return video;
-  }
-
-  #createIFrame() {
-    const iframe =
-        this.#target instanceof HTMLIFrameElement ? this.#target : document.createElement('iframe'),
-      { nativeControls } = this.#media.$state;
-
-    effect(() => setAttribute(iframe, 'tabindex', !nativeControls() ? -1 : null));
-
-    return iframe;
-  }
-
-  #createGoogleCastContainer() {
-    if (this.#target?.classList.contains('vds-google-cast')) {
-      return this.#target;
-    }
-
-    const container = document.createElement('div');
-    container.classList.add('vds-google-cast');
-
-    import('./provider-cast-display').then(({ insertContent }) => {
-      insertContent(container, this.#media.$state);
-    });
-
-    return container;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-provider': MediaProviderElement;
-  }
-}

package/src/elements/define/sliders/audio-gain-slider-element.ts

@@ -1,34 +0,0 @@
-import { Host } from 'maverick.js/element';
-
-import { AudioGainSlider } from '../../../components/ui/sliders/audio-gain-slider';
-
-/**
- * @docs {@link https://www.vidstack.io/docs/wc/player/components/sliders/audio-gain-slider}
- * @example
- * ```html
- * <media-audio-gain-slider>
- *   <div class="track"></div>
- *   <div class="track-fill"></div>
- *   <div class="track-progress"></div>
- *   <div class="thumb"></div>
- * </media-audio-gain-slider>
- * ```
- * @example
- * ```html
- * <media-audio-gain-slider>
- *   <!-- ... -->
- *   <media-slider-preview>
- *     <media-slider-value></media-slider-value>
- *   </media-slider-preview>
- * </media-audio-gain-slider>
- * ```
- */
-export class MediaAudioGainSliderElement extends Host(HTMLElement, AudioGainSlider) {
-  static tagName = 'media-audio-gain-slider';
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-audio-gain-slider': MediaAudioGainSliderElement;
-  }
-}

package/src/elements/define/sliders/quality-slider-element.ts

@@ -1,34 +0,0 @@
-import { Host } from 'maverick.js/element';
-
-import { QualitySlider } from '../../../components/ui/sliders/quality-slider';
-
-/**
- * @docs {@link https://www.vidstack.io/docs/wc/player/components/sliders/quality-slider}
- * @example
- * ```html
- * <media-quality-slider>
- *   <div class="track"></div>
- *   <div class="track-fill"></div>
- *   <div class="track-progress"></div>
- *   <div class="thumb"></div>
- * </media-quality-slider>
- * ```
- * @example
- * ```html
- * <media-quality-slider>
- *   <!-- ... -->
- *   <media-slider-preview>
- *     <media-slider-value></media-slider-value>
- *   </media-slider-preview>
- * </media-quality-slider>
- * ```
- */
-export class MediaQualitySliderElement extends Host(HTMLElement, QualitySlider) {
-  static tagName = 'media-quality-slider';
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-quality-slider': MediaQualitySliderElement;
-  }
-}

package/src/elements/define/sliders/slider-chapters-element.ts

@@ -1,53 +0,0 @@
-import { effect } from 'maverick.js';
-import { Host } from 'maverick.js/element';
-
-import { SliderChapters } from '../../../components/ui/sliders/time-slider/slider-chapters';
-import { cloneTemplate, requestScopedAnimationFrame } from '../../../utils/dom';
-
-/**
- * @part chapter-title - Contains the current chapter title.
- * @docs {@link https://www.vidstack.io/docs/wc/player/components/sliders/slider-chapters}
- * @example
- * ```html
- * <media-time-slider>
- *   <media-slider-chapters>
- *     <template>
- *       <div class="slider-chapter">
- *         <div class="slider-track"></div>
- *         <div class="slider-track-fill"></div>
- *         <div class="slider-track-progress"></div>
- *       </div>
- *     </template>
- *   </media-slider-chapters>
- * </media-time-slider>
- * ```
- */
-export class MediaSliderChaptersElement extends Host(HTMLElement, SliderChapters) {
-  static tagName = 'media-slider-chapters';
-
-  #template: HTMLTemplateElement | null = null;
-
-  protected onConnect(): void {
-    // Animation frame required as some frameworks append late for some reason.
-    requestScopedAnimationFrame(() => {
-      if (!this.connectScope) return;
-      const template = this.querySelector('template') as HTMLTemplateElement | null;
-      if (template) {
-        this.#template = template;
-        effect(this.#renderTemplate.bind(this));
-      }
-    });
-  }
-
-  #renderTemplate() {
-    if (!this.#template) return;
-    const elements = cloneTemplate(this.#template, this.cues.length || 1);
-    this.setRefs(elements);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-slider-chapters': MediaSliderChaptersElement;
-  }
-}

package/src/elements/define/sliders/slider-element.ts

@@ -1,25 +0,0 @@
-import { Host } from 'maverick.js/element';
-
-import { Slider } from '../../../components/ui/sliders/slider/slider';
-
-/**
- * @docs {@link https://www.vidstack.io/docs/wc/player/components/sliders/slider}
- * @example
- * ```html
- * <media-slider min="0" max="100" value="50" aria-label="...">
- *   <div class="track"></div>
- *   <div class="track-fill"></div>
- *   <div class="track-progress"></div>
- *   <div class="thumb"></div>
- * </media-slider>
- * ```
- */
-export class MediaSliderElement extends Host(HTMLElement, Slider) {
-  static tagName = 'media-slider';
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-slider': MediaSliderElement;
-  }
-}

package/src/elements/define/sliders/slider-preview-element.ts

@@ -1,16 +0,0 @@
-import { Host } from 'maverick.js/element';
-
-import { SliderPreview } from '../../../components/ui/sliders/slider-preview';
-
-/**
- * @docs {@link https://www.vidstack.io/docs/wc/player/components/sliders/slider#preview}
- */
-export class MediaSliderPreviewElement extends Host(HTMLElement, SliderPreview) {
-  static tagName = 'media-slider-preview';
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-slider-preview': MediaSliderPreviewElement;
-  }
-}

package/src/elements/define/sliders/slider-steps-element.ts

@@ -1,50 +0,0 @@
-import { Component, effect, useState } from 'maverick.js';
-import { Host } from 'maverick.js/element';
-
-import { sliderState } from '../../../components/ui/sliders/slider/api/state';
-import { cloneTemplate, requestScopedAnimationFrame } from '../../../utils/dom';
-
-class SliderSteps extends Component {}
-
-/**
- * @docs {@link https://www.vidstack.io/docs/wc/player/components/sliders/slider-steps}
- * @example
- * ```html
- * <media-slider>
- *   <media-slider-steps>
- *     <template>
- *       <div class="slider-step"></div>
- *     </template>
- *   </media-slider-steps>
- * </media-slider>
- * ```
- */
-export class MediaSliderStepsElement extends Host(HTMLElement, SliderSteps) {
-  static tagName = 'media-slider-steps';
-
-  #template: HTMLTemplateElement | null = null;
-
-  onConnect(el: HTMLElement) {
-    // Animation frame required as some frameworks append late for some reason.
-    requestScopedAnimationFrame(() => {
-      if (!this.connectScope) return;
-      this.#template = el.querySelector('template');
-      if (this.#template) effect(this.#render.bind(this));
-    });
-  }
-
-  #render() {
-    if (!this.#template) return;
-
-    const { min, max, step } = useState(sliderState),
-      steps = (max() - min()) / step();
-
-    cloneTemplate(this.#template, Math.floor(steps) + 1);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-slider-steps': MediaSliderStepsElement;
-  }
-}

package/src/elements/define/sliders/slider-thumbnail-element.ts

@@ -1,48 +0,0 @@
-import { effect, useState, type StateContext } from 'maverick.js';
-
-import { Slider } from '../../../components/ui/sliders/slider/slider';
-import { useMediaContext, type MediaContext } from '../../../core/api/media-context';
-import { MediaThumbnailElement } from '../thumbnail-element';
-
-/**
- * @example
- * ```html
- * <media-player >
- *   <media-time-slider>
- *     <media-slider-preview>
- *       <media-slider-thumbnail
- *         src="https://files.vidstack.io/thumbnails.vtt"
- *       ></media-slider-thumbnail>
- *     </media-slider-preview>
- *   </media-time-slider>
- * </media-player>
- * ```
- */
-export class MediaSliderThumbnailElement extends MediaThumbnailElement {
-  static override tagName = 'media-slider-thumbnail';
-
-  #media!: MediaContext;
-  #slider!: StateContext<typeof Slider.state>;
-
-  protected override onSetup(): void {
-    super.onSetup();
-    this.#media = useMediaContext();
-    this.#slider = useState(Slider.state);
-  }
-
-  protected override onConnect(): void {
-    super.onConnect();
-    effect(this.#watchTime.bind(this));
-  }
-
-  #watchTime() {
-    const { duration, clipStartTime } = this.#media.$state;
-    this.time = clipStartTime() + this.#slider.pointerRate() * duration();
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-slider-thumbnail': MediaSliderThumbnailElement;
-  }
-}