@hanifhan1f/vidstack 1.12.13

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,49 @@
+import { effect } from 'maverick.js';
+import { BOOLEAN, Host, type Attributes } from 'maverick.js/element';
+
+import { SliderValue, type SliderValueProps } from '../../../components/ui/sliders/slider-value';
+
+/**
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/sliders/slider-value}
+ * @example
+ * ```html
+ * <media-time-slider>
+ *   <media-slider-preview>
+ *     <media-slider-value></media-slider-value>
+ *   </media-slider-preview>
+ * </media-time-slider>
+ * ```
+ * @example
+ * ```html
+ * <media-slider-value type="current"></media-slider-value>
+ * ```
+ * @example
+ * ```html
+ * <media-slider-value show-hours pad-hours></media-slider-value>
+ * ```
+ * @example
+ * ```html
+ * <media-slider-value decimal-places="2"></media-slider-value>
+ * ```
+ */
+export class MediaSliderValueElement extends Host(HTMLElement, SliderValue) {
+  static tagName = 'media-slider-value';
+
+  static override attrs: Attributes<SliderValueProps> = {
+    padMinutes: {
+      converter: BOOLEAN,
+    },
+  };
+
+  protected onConnect() {
+    effect(() => {
+      this.textContent = this.getValueText();
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-slider-value': MediaSliderValueElement;
+  }
+}

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

@@ -0,0 +1,59 @@
+import { effect } from 'maverick.js';
+import { Host } from 'maverick.js/element';
+import { setAttribute } from 'maverick.js/std';
+
+import { SliderVideo } from '../../../components/ui/sliders/slider-video';
+import { useMediaContext, type MediaContext } from '../../../core/api/media-context';
+import { cloneTemplateContent, createTemplate } from '../../../utils/dom';
+
+const videoTemplate = /* #__PURE__*/ createTemplate(
+  `<video muted playsinline preload="none" style="max-width: unset;"></video>`,
+);
+
+/**
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/sliders/slider-video}
+ * @example
+ * ```html
+ * <media-time-slider>
+ *   <media-slider-preview>
+ *     <media-slider-video src="/low-res-video.mp4"></media-slider-video>
+ *   </media-slider-preview>
+ * </media-time-slider>
+ * ```
+ */
+export class MediaSliderVideoElement extends Host(HTMLElement, SliderVideo) {
+  static tagName = 'media-slider-video';
+
+  #media!: MediaContext;
+  #video = this.#createVideo();
+
+  protected onSetup(): void {
+    this.#media = useMediaContext();
+    this.$state.video.set(this.#video);
+  }
+
+  protected onConnect(): void {
+    const { canLoad } = this.#media.$state,
+      { src, crossOrigin } = this.$state;
+
+    if (this.#video.parentNode !== this) {
+      this.prepend(this.#video);
+    }
+
+    effect(() => {
+      setAttribute(this.#video, 'crossorigin', crossOrigin());
+      setAttribute(this.#video, 'preload', canLoad() ? 'auto' : 'none');
+      setAttribute(this.#video, 'src', src());
+    });
+  }
+
+  #createVideo() {
+    return cloneTemplateContent<HTMLVideoElement>(videoTemplate);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-slider-video': MediaSliderVideoElement;
+  }
+}

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

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