@hanifhan1f/vidstack 1.12.25 → 1.12.26

package/dev/chunks/vidstack-DS7nRfge.js

@@ -0,0 +1,204 @@
+import { Host, effect, setAttribute, isString, useState, BOOLEAN } from './vidstack-C1PwJD_4.js';
+import { Thumbnail, Time, AirPlayButton, CaptionButton, FullscreenButton, LiveButton, MuteButton, PIPButton, PlayButton, SeekButton, AudioRadioGroup, CaptionsRadioGroup, Menu, MenuButton, MenuItem, MenuItems, SpeedRadioGroup, QualityRadioGroup, Radio, Slider, SliderValue, TimeSlider, SliderPreview, VolumeSlider } from './vidstack-DLXCqdYV.js';
+import { cloneTemplateContent, createTemplate, requestScopedAnimationFrame, cloneTemplate } from './vidstack-C0SWkbs7.js';
+import { useMediaContext } from './vidstack-BjxlZzGu.js';
+
+const imgTemplate = /* @__PURE__ */ createTemplate(
+  '<img loading="eager" decoding="async" aria-hidden="true">'
+);
+class MediaThumbnailElement extends Host(HTMLElement, Thumbnail) {
+  static tagName = "media-thumbnail";
+  static attrs = {
+    crossOrigin: "crossorigin"
+  };
+  #media;
+  #img = this.#createImg();
+  onSetup() {
+    this.#media = useMediaContext();
+    this.$state.img.set(this.#img);
+  }
+  onConnect() {
+    const { src, crossOrigin } = this.$state;
+    if (this.#img.parentNode !== this) {
+      this.prepend(this.#img);
+    }
+    effect(() => {
+      setAttribute(this.#img, "src", src());
+      setAttribute(this.#img, "crossorigin", crossOrigin());
+    });
+  }
+  #createImg() {
+    return cloneTemplateContent(imgTemplate);
+  }
+}
+
+class MediaTimeElement extends Host(HTMLElement, Time) {
+  static tagName = "media-time";
+  onConnect() {
+    effect(() => {
+      this.textContent = this.$state.timeText();
+    });
+  }
+}
+
+class MediaAirPlayButtonElement extends Host(HTMLElement, AirPlayButton) {
+  static tagName = "media-airplay-button";
+}
+
+class MediaCaptionButtonElement extends Host(HTMLElement, CaptionButton) {
+  static tagName = "media-caption-button";
+}
+
+class MediaFullscreenButtonElement extends Host(HTMLElement, FullscreenButton) {
+  static tagName = "media-fullscreen-button";
+}
+
+class MediaLiveButtonElement extends Host(HTMLElement, LiveButton) {
+  static tagName = "media-live-button";
+}
+
+class MediaMuteButtonElement extends Host(HTMLElement, MuteButton) {
+  static tagName = "media-mute-button";
+}
+
+class MediaPIPButtonElement extends Host(HTMLElement, PIPButton) {
+  static tagName = "media-pip-button";
+}
+
+class MediaPlayButtonElement extends Host(HTMLElement, PlayButton) {
+  static tagName = "media-play-button";
+}
+
+class MediaSeekButtonElement extends Host(HTMLElement, SeekButton) {
+  static tagName = "media-seek-button";
+}
+
+function renderMenuItemsTemplate(el, onCreate) {
+  requestScopedAnimationFrame(() => {
+    if (!el.connectScope) return;
+    const template = el.querySelector("template");
+    if (!template) return;
+    effect(() => {
+      if (!template.content.firstElementChild?.localName && !template.firstElementChild) {
+        throw Error("[vidstack] menu items template requires root element");
+      }
+      const options = el.getOptions();
+      cloneTemplate(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);
+      });
+    });
+  });
+}
+
+class MediaAudioRadioGroupElement extends Host(HTMLElement, AudioRadioGroup) {
+  static tagName = "media-audio-radio-group";
+  onConnect() {
+    renderMenuItemsTemplate(this);
+  }
+}
+
+class MediaCaptionsRadioGroupElement extends Host(HTMLElement, CaptionsRadioGroup) {
+  static tagName = "media-captions-radio-group";
+  onConnect() {
+    renderMenuItemsTemplate(this);
+  }
+}
+
+class MediaMenuElement extends Host(HTMLElement, Menu) {
+  static tagName = "media-menu";
+}
+
+class MediaMenuButtonElement extends Host(HTMLElement, MenuButton) {
+  static tagName = "media-menu-button";
+}
+
+class MediaMenuItemElement extends Host(HTMLElement, MenuItem) {
+  static tagName = "media-menu-item";
+}
+
+class MediaMenuItemsElement extends Host(HTMLElement, MenuItems) {
+  static tagName = "media-menu-items";
+}
+
+class MediaSpeedRadioGroupElement extends Host(HTMLElement, SpeedRadioGroup) {
+  static tagName = "media-speed-radio-group";
+  onConnect() {
+    renderMenuItemsTemplate(this);
+  }
+}
+
+class MediaQualityRadioGroupElement extends Host(HTMLElement, QualityRadioGroup) {
+  static tagName = "media-quality-radio-group";
+  onConnect() {
+    renderMenuItemsTemplate(this, (el, option) => {
+      const bitrate = option.bitrate, bitrateEl = el.querySelector('[data-part="bitrate"]');
+      if (bitrate && bitrateEl) {
+        effect(() => {
+          bitrateEl.textContent = bitrate() || "";
+        });
+      }
+    });
+  }
+}
+
+class MediaRadioElement extends Host(HTMLElement, Radio) {
+  static tagName = "media-radio";
+}
+
+class MediaSliderThumbnailElement extends MediaThumbnailElement {
+  static tagName = "media-slider-thumbnail";
+  #media;
+  #slider;
+  onSetup() {
+    super.onSetup();
+    this.#media = useMediaContext();
+    this.#slider = useState(Slider.state);
+  }
+  onConnect() {
+    super.onConnect();
+    effect(this.#watchTime.bind(this));
+  }
+  #watchTime() {
+    const { duration, clipStartTime } = this.#media.$state;
+    this.time = clipStartTime() + this.#slider.pointerRate() * duration();
+  }
+}
+
+class MediaSliderValueElement extends Host(HTMLElement, SliderValue) {
+  static tagName = "media-slider-value";
+  static attrs = {
+    padMinutes: {
+      converter: BOOLEAN
+    }
+  };
+  onConnect() {
+    effect(() => {
+      this.textContent = this.getValueText();
+    });
+  }
+}
+
+class MediaTimeSliderElement extends Host(HTMLElement, TimeSlider) {
+  static tagName = "media-time-slider";
+}
+
+class MediaSliderPreviewElement extends Host(HTMLElement, SliderPreview) {
+  static tagName = "media-slider-preview";
+}
+
+class MediaVolumeSliderElement extends Host(HTMLElement, VolumeSlider) {
+  static tagName = "media-volume-slider";
+}
+
+export { MediaAirPlayButtonElement, MediaAudioRadioGroupElement, MediaCaptionButtonElement, MediaCaptionsRadioGroupElement, MediaFullscreenButtonElement, MediaLiveButtonElement, MediaMenuButtonElement, MediaMenuElement, MediaMenuItemElement, MediaMenuItemsElement, MediaMuteButtonElement, MediaPIPButtonElement, MediaPlayButtonElement, MediaQualityRadioGroupElement, MediaRadioElement, MediaSeekButtonElement, MediaSliderPreviewElement, MediaSliderThumbnailElement, MediaSliderValueElement, MediaSpeedRadioGroupElement, MediaThumbnailElement, MediaTimeElement, MediaTimeSliderElement, MediaVolumeSliderElement, renderMenuItemsTemplate };

package/dev/define/plyr-layout.js

@@ -1,8 +1,8 @@
 import { defineCustomElement } from '../chunks/vidstack-C1PwJD_4.js';
-import { MediaPlayButtonElement, MediaMuteButtonElement, MediaCaptionButtonElement, MediaPIPButtonElement, MediaFullscreenButtonElement, MediaSeekButtonElement, MediaAirPlayButtonElement, MediaLiveButtonElement, MediaVolumeSliderElement, MediaTimeSliderElement, MediaSliderPreviewElement, MediaSliderThumbnailElement, MediaSliderValueElement, MediaMenuElement, MediaMenuButtonElement, MediaMenuItemsElement, MediaMenuItemElement, MediaAudioRadioGroupElement, MediaCaptionsRadioGroupElement, MediaSpeedRadioGroupElement, MediaQualityRadioGroupElement, MediaRadioElement, MediaTimeElement, MediaThumbnailElement } from '../chunks/vidstack-CQdFhXSo.js';
+import { MediaPlayButtonElement, MediaMuteButtonElement, MediaCaptionButtonElement, MediaPIPButtonElement, MediaFullscreenButtonElement, MediaSeekButtonElement, MediaAirPlayButtonElement, MediaLiveButtonElement, MediaVolumeSliderElement, MediaTimeSliderElement, MediaSliderPreviewElement, MediaSliderThumbnailElement, MediaSliderValueElement, MediaMenuElement, MediaMenuButtonElement, MediaMenuItemsElement, MediaMenuItemElement, MediaAudioRadioGroupElement, MediaCaptionsRadioGroupElement, MediaSpeedRadioGroupElement, MediaQualityRadioGroupElement, MediaRadioElement, MediaTimeElement, MediaThumbnailElement } from '../chunks/vidstack-DS7nRfge.js';
 import { MediaPlyrLayoutElement } from './templates/plyr-layout.js';
 import { MediaPosterElement } from '../chunks/vidstack-DV4g4XvL.js';
-import '../chunks/vidstack-rvhuswgi.js';
+import '../chunks/vidstack-DLXCqdYV.js';
 import '../chunks/vidstack-BjxlZzGu.js';
 import '../chunks/vidstack-C0SWkbs7.js';
 import '@floating-ui/dom';

package/dev/define/vidstack-player-ui.js

@@ -1,12 +1,12 @@
 import { defineCustomElement } from '../chunks/vidstack-C1PwJD_4.js';
-import { MediaLayoutElement, MediaControlsElement, MediaControlsGroupElement, MediaAnnouncerElement, MediaTooltipElement, MediaTooltipTriggerElement, MediaTooltipContentElement, MediaGoogleCastButtonElement, MediaToggleButtonElement, MediaSliderElement, MediaAudioGainSliderElement, MediaSpeedSliderElement, MediaQualitySliderElement, MediaSliderChaptersElement, MediaSliderStepsElement, MediaSliderVideoElement, MediaMenuPortalElement, MediaAudioGainRadioGroupElement, MediaChaptersRadioGroupElement, MediaRadioGroupElement, MediaGestureElement, MediaCaptionsElement, MediaTitleElement, MediaChapterTitleElement, MediaSpinnerElement } from '../chunks/vidstack-CEjYxSqZ.js';
-import { MediaPlayButtonElement, MediaMuteButtonElement, MediaCaptionButtonElement, MediaFullscreenButtonElement, MediaPIPButtonElement, MediaSeekButtonElement, MediaAirPlayButtonElement, MediaVolumeSliderElement, MediaTimeSliderElement, MediaSliderPreviewElement, MediaSliderValueElement, MediaSliderThumbnailElement, MediaMenuElement, MediaMenuButtonElement, MediaMenuItemsElement, MediaMenuItemElement, MediaAudioRadioGroupElement, MediaCaptionsRadioGroupElement, MediaSpeedRadioGroupElement, MediaQualityRadioGroupElement, MediaRadioElement, MediaThumbnailElement, MediaLiveButtonElement, MediaTimeElement } from '../chunks/vidstack-CQdFhXSo.js';
+import { MediaLayoutElement, MediaControlsElement, MediaControlsGroupElement, MediaAnnouncerElement, MediaTooltipElement, MediaTooltipTriggerElement, MediaTooltipContentElement, MediaGoogleCastButtonElement, MediaToggleButtonElement, MediaSliderElement, MediaAudioGainSliderElement, MediaSpeedSliderElement, MediaQualitySliderElement, MediaSliderChaptersElement, MediaSliderStepsElement, MediaSliderVideoElement, MediaMenuPortalElement, MediaAudioGainRadioGroupElement, MediaChaptersRadioGroupElement, MediaRadioGroupElement, MediaGestureElement, MediaCaptionsElement, MediaTitleElement, MediaChapterTitleElement, MediaSpinnerElement } from '../chunks/vidstack-Cky9ors4.js';
+import { MediaPlayButtonElement, MediaMuteButtonElement, MediaCaptionButtonElement, MediaFullscreenButtonElement, MediaPIPButtonElement, MediaSeekButtonElement, MediaAirPlayButtonElement, MediaVolumeSliderElement, MediaTimeSliderElement, MediaSliderPreviewElement, MediaSliderValueElement, MediaSliderThumbnailElement, MediaMenuElement, MediaMenuButtonElement, MediaMenuItemsElement, MediaMenuItemElement, MediaAudioRadioGroupElement, MediaCaptionsRadioGroupElement, MediaSpeedRadioGroupElement, MediaQualityRadioGroupElement, MediaRadioElement, MediaThumbnailElement, MediaLiveButtonElement, MediaTimeElement } from '../chunks/vidstack-DS7nRfge.js';
 import { MediaPosterElement } from '../chunks/vidstack-DV4g4XvL.js';
-import '../chunks/vidstack-44ILR0Cb.js';
+import '../chunks/vidstack-CSryZFvY.js';
 import '../chunks/vidstack-BjxlZzGu.js';
 import '../chunks/vidstack-C0SWkbs7.js';
 import '@floating-ui/dom';
-import '../chunks/vidstack-rvhuswgi.js';
+import '../chunks/vidstack-DLXCqdYV.js';
 import '../chunks/vidstack-C3N4zIuV.js';
 import '../chunks/vidstack-DdTXMZro.js';
 import '../chunks/vidstack-BnBLcaA5.js';

package/dev/global/plyr.js

@@ -6,8 +6,8 @@ import { isHTMLElement } from '../chunks/vidstack-C0SWkbs7.js';
 import { canPlayVideoType } from '../chunks/vidstack-BnBLcaA5.js';
 import '../chunks/vidstack-B4XOm7dP.js';
 import '../chunks/vidstack-BjxlZzGu.js';
-import '../chunks/vidstack-CQdFhXSo.js';
-import '../chunks/vidstack-rvhuswgi.js';
+import '../chunks/vidstack-DS7nRfge.js';
+import '../chunks/vidstack-DLXCqdYV.js';
 import '../chunks/vidstack-C3N4zIuV.js';
 import '../chunks/vidstack-DdTXMZro.js';
 import '../chunks/vidstack-CcQdBWil.js';

package/dev/vidstack-elements.js

@@ -1,16 +1,16 @@
 export { defineCustomElement } from './chunks/vidstack-C1PwJD_4.js';
-export { MediaAnnouncerElement, MediaAudioGainRadioGroupElement, MediaAudioGainSliderElement, MediaCaptionsElement, MediaChapterTitleElement, MediaChaptersRadioGroupElement, MediaControlsElement, MediaControlsGroupElement, MediaGestureElement, MediaGoogleCastButtonElement, MediaLayoutElement, MediaMenuPortalElement, MediaQualitySliderElement, MediaRadioGroupElement, MediaSliderChaptersElement, MediaSliderElement, MediaSliderStepsElement, MediaSliderVideoElement, MediaSpeedSliderElement, MediaSpinnerElement, MediaTitleElement, MediaToggleButtonElement, MediaTooltipContentElement, MediaTooltipElement, MediaTooltipTriggerElement } from './chunks/vidstack-CEjYxSqZ.js';
+export { MediaAnnouncerElement, MediaAudioGainRadioGroupElement, MediaAudioGainSliderElement, MediaCaptionsElement, MediaChapterTitleElement, MediaChaptersRadioGroupElement, MediaControlsElement, MediaControlsGroupElement, MediaGestureElement, MediaGoogleCastButtonElement, MediaLayoutElement, MediaMenuPortalElement, MediaQualitySliderElement, MediaRadioGroupElement, MediaSliderChaptersElement, MediaSliderElement, MediaSliderStepsElement, MediaSliderVideoElement, MediaSpeedSliderElement, MediaSpinnerElement, MediaTitleElement, MediaToggleButtonElement, MediaTooltipContentElement, MediaTooltipElement, MediaTooltipTriggerElement } from './chunks/vidstack-Cky9ors4.js';
 export { MediaPlayerElement, MediaProviderElement } from './chunks/vidstack-B4XOm7dP.js';
 export { MediaPosterElement } from './chunks/vidstack-DV4g4XvL.js';
-export { MediaAirPlayButtonElement, MediaAudioRadioGroupElement, MediaCaptionButtonElement, MediaCaptionsRadioGroupElement, MediaFullscreenButtonElement, MediaLiveButtonElement, MediaMenuButtonElement, MediaMenuElement, MediaMenuItemElement, MediaMenuItemsElement, MediaMuteButtonElement, MediaPIPButtonElement, MediaPlayButtonElement, MediaQualityRadioGroupElement, MediaRadioElement, MediaSeekButtonElement, MediaSliderPreviewElement, MediaSliderThumbnailElement, MediaSliderValueElement, MediaSpeedRadioGroupElement, MediaThumbnailElement, MediaTimeElement, MediaTimeSliderElement, MediaVolumeSliderElement } from './chunks/vidstack-CQdFhXSo.js';
+export { MediaAirPlayButtonElement, MediaAudioRadioGroupElement, MediaCaptionButtonElement, MediaCaptionsRadioGroupElement, MediaFullscreenButtonElement, MediaLiveButtonElement, MediaMenuButtonElement, MediaMenuElement, MediaMenuItemElement, MediaMenuItemsElement, MediaMuteButtonElement, MediaPIPButtonElement, MediaPlayButtonElement, MediaQualityRadioGroupElement, MediaRadioElement, MediaSeekButtonElement, MediaSliderPreviewElement, MediaSliderThumbnailElement, MediaSliderValueElement, MediaSpeedRadioGroupElement, MediaThumbnailElement, MediaTimeElement, MediaTimeSliderElement, MediaVolumeSliderElement } from './chunks/vidstack-DS7nRfge.js';
 export { MediaAudioLayoutElement } from './define/templates/vidstack-audio-layout.js';
 export { MediaVideoLayoutElement } from './define/templates/vidstack-video-layout.js';
 export { MediaPlyrLayoutElement } from './define/templates/plyr-layout.js';
-import './chunks/vidstack-44ILR0Cb.js';
+import './chunks/vidstack-CSryZFvY.js';
 import './chunks/vidstack-BjxlZzGu.js';
 import './chunks/vidstack-C0SWkbs7.js';
 import '@floating-ui/dom';
-import './chunks/vidstack-rvhuswgi.js';
+import './chunks/vidstack-DLXCqdYV.js';
 import './chunks/vidstack-C3N4zIuV.js';
 import './chunks/vidstack-DdTXMZro.js';
 import './chunks/vidstack-BnBLcaA5.js';

package/dev/vidstack.js

@@ -6,10 +6,10 @@ import { isString, EventsController, DOMEvent, useState } from './chunks/vidstac
 export { appendTriggerEvent, findTriggerEvent, hasTriggerEvent, isKeyboardClick, isKeyboardEvent, isPointerEvent, walkTriggerEventChain } from './chunks/vidstack-C1PwJD_4.js';
 export { findActiveCue, isCueActive, watchActiveTextTrack, watchCueTextChange } from './chunks/vidstack-CcQdBWil.js';
 export { sortVideoQualities } from './chunks/vidstack-BTM4ERc7.js';
-import { Thumbnail, Slider } from './chunks/vidstack-rvhuswgi.js';
-export { ARIAKeyShortcuts, AirPlayButton, AudioRadioGroup, CaptionButton, CaptionsRadioGroup, DEFAULT_PLAYBACK_RATES, FullscreenButton, LiveButton, Menu, MenuButton, MenuItem, MenuItems, MenuPortal, MuteButton, PIPButton, PlayButton, QualityRadioGroup, Radio, SeekButton, SliderController, SliderPreview, SliderValue, SpeedRadioGroup, ThumbnailsLoader, Time, TimeSlider, VolumeSlider, formatSpokenTime, formatTime, menuPortalContext, sliderContext, sliderState, updateSliderPreviewPlacement } from './chunks/vidstack-rvhuswgi.js';
+import { Thumbnail, Slider } from './chunks/vidstack-DLXCqdYV.js';
+export { ARIAKeyShortcuts, AirPlayButton, AudioRadioGroup, CaptionButton, CaptionsRadioGroup, DEFAULT_PLAYBACK_RATES, FullscreenButton, LiveButton, Menu, MenuButton, MenuItem, MenuItems, MenuPortal, MuteButton, PIPButton, PlayButton, QualityRadioGroup, Radio, SeekButton, SliderController, SliderPreview, SliderValue, SpeedRadioGroup, ThumbnailsLoader, Time, TimeSlider, VolumeSlider, formatSpokenTime, formatTime, menuPortalContext, sliderContext, sliderState, updateSliderPreviewPlacement } from './chunks/vidstack-DLXCqdYV.js';
 export { TimeRange, getTimeRangesEnd, getTimeRangesStart, normalizeTimeIntervals, updateTimeIntervals } from './chunks/vidstack-Becy7l6h.js';
-export { AudioGainRadioGroup, AudioGainSlider, Captions, ChaptersRadioGroup, Controls, ControlsGroup, DEFAULT_AUDIO_GAINS, Gesture, GoogleCastButton, MediaAnnouncer, QualitySlider, RadioGroup, SliderChapters, SliderVideo, SpeedSlider, ToggleButton, Tooltip, TooltipContent, TooltipTrigger } from './chunks/vidstack-44ILR0Cb.js';
+export { AudioGainRadioGroup, AudioGainSlider, Captions, ChaptersRadioGroup, Controls, ControlsGroup, DEFAULT_AUDIO_GAINS, Gesture, GoogleCastButton, MediaAnnouncer, QualitySlider, RadioGroup, SliderChapters, SliderVideo, SpeedSlider, ToggleButton, Tooltip, TooltipContent, TooltipTrigger } from './chunks/vidstack-CSryZFvY.js';
 export { Poster } from './chunks/vidstack-CzCQJ29U.js';
 export { usePlyrLayoutClasses } from './chunks/vidstack-DXzRuMtJ.js';
 export { getDownloadFile } from './chunks/vidstack-DdTXMZro.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hanifhan1f/vidstack",
   "description": "UI component library for building high-quality, accessible video and audio experiences on the web.",
-  "version": "1.12.25",
+  "version": "1.12.26",
   "license": "MIT",
   "type": "module",
   "types": "index.d.ts",