@hanifhan1f/vidstack 1.12.13 → 1.12.18

package/prod/providers/vidstack-youtube.js

@@ -0,0 +1,286 @@
+import { createScope, signal, effect, isString, deferredPromise, isObject, isNumber, isBoolean } from '../chunks/vidstack-BNpgCJJ1.js';
+import { TimeRange } from '../chunks/vidstack-Fem0yF3c.js';
+import { preconnect } from '../chunks/vidstack-V1jwkH0s.js';
+import { EmbedProvider } from '../chunks/vidstack-IDWYvfna.js';
+import { resolveYouTubeVideoId } from '../chunks/vidstack-Dm1xEU9Q.js';
+import '../chunks/vidstack-bdt7uOlN.js';
+
+const YouTubePlayerState = {
+  Ended: 0,
+  Playing: 1,
+  Paused: 2,
+  Buffering: 3,
+  Cued: 5
+};
+
+class YouTubeProvider extends EmbedProvider {
+  $$PROVIDER_TYPE = "YOUTUBE";
+  scope = createScope();
+  #ctx;
+  #videoId = signal("");
+  #state = -1;
+  #currentSrc = null;
+  #seekingTimer = -1;
+  #invalidPlay = false;
+  #promises = /* @__PURE__ */ new Map();
+  constructor(iframe, ctx) {
+    super(iframe);
+    this.#ctx = ctx;
+  }
+  /**
+   * Sets the player's interface language. The parameter value is an ISO 639-1 two-letter
+   * language code or a fully specified locale. For example, fr and fr-ca are both valid values.
+   * Other language input codes, such as IETF language tags (BCP 47) might also be handled properly.
+   *
+   * The interface language is used for tooltips in the player and also affects the default caption
+   * track. Note that YouTube might select a different caption track language for a particular
+   * user based on the user's individual language preferences and the availability of caption tracks.
+   *
+   * @defaultValue 'en'
+   */
+  language = "en";
+  color = "red";
+  /**
+   * Whether cookies should be enabled on the embed. This is turned off by default to be
+   * GDPR-compliant.
+   *
+   * @defaultValue `false`
+   */
+  cookies = false;
+  get currentSrc() {
+    return this.#currentSrc;
+  }
+  get type() {
+    return "youtube";
+  }
+  get videoId() {
+    return this.#videoId();
+  }
+  preconnect() {
+    preconnect(this.getOrigin());
+  }
+  setup() {
+    super.setup();
+    effect(this.#watchVideoId.bind(this));
+    this.#ctx.notify("provider-setup", this);
+  }
+  destroy() {
+    this.#reset();
+    const message = "provider destroyed";
+    for (const promises of this.#promises.values()) {
+      for (const { reject } of promises) reject(message);
+    }
+    this.#promises.clear();
+  }
+  async play() {
+    return this.#remote("playVideo");
+  }
+  #playFail(message) {
+    this.#getPromise("playVideo")?.reject(message);
+  }
+  async pause() {
+    return this.#remote("pauseVideo");
+  }
+  #pauseFail(message) {
+    this.#getPromise("pauseVideo")?.reject(message);
+  }
+  setMuted(muted) {
+    if (muted) this.#remote("mute");
+    else this.#remote("unMute");
+  }
+  setCurrentTime(time) {
+    this.#remote("seekTo", [time, true]);
+    this.#ctx.notify("seeking", time);
+  }
+  setVolume(volume) {
+    this.#remote("setVolume", volume * 100);
+  }
+  setPlaybackRate(rate) {
+    this.#remote("setPlaybackRate", rate);
+  }
+  async loadSource(src) {
+    if (!isString(src.src)) {
+      this.#currentSrc = null;
+      this.#videoId.set("");
+      return;
+    }
+    const videoId = resolveYouTubeVideoId(src.src);
+    this.#videoId.set(videoId ?? "");
+    this.#currentSrc = src;
+  }
+  getOrigin() {
+    return !this.cookies ? "https://www.youtube-nocookie.com" : "https://www.youtube.com";
+  }
+  #watchVideoId() {
+    this.#reset();
+    const videoId = this.#videoId();
+    if (!videoId) {
+      this.src.set("");
+      return;
+    }
+    this.src.set(`${this.getOrigin()}/embed/${videoId}`);
+    this.#ctx.notify("load-start");
+  }
+  buildParams() {
+    const { keyDisabled } = this.#ctx.$props, { muted, playsInline, nativeControls } = this.#ctx.$state, showControls = nativeControls();
+    return {
+      rel: 0,
+      autoplay: 0,
+      cc_lang_pref: this.language,
+      cc_load_policy: showControls ? 1 : void 0,
+      color: this.color,
+      controls: showControls ? 1 : 0,
+      disablekb: !showControls || keyDisabled() ? 1 : 0,
+      enablejsapi: 1,
+      fs: 1,
+      hl: this.language,
+      iv_load_policy: showControls ? 1 : 3,
+      mute: muted() ? 1 : 0,
+      playsinline: playsInline() ? 1 : 0
+    };
+  }
+  #remote(command, arg) {
+    let promise = deferredPromise(), promises = this.#promises.get(command);
+    if (!promises) this.#promises.set(command, promises = []);
+    promises.push(promise);
+    const args = Array.isArray(arg) ? arg : arg ? [arg] : void 0;
+    this.postMessage({
+      event: "command",
+      func: command,
+      args
+    });
+    return promise.promise;
+  }
+  onLoad() {
+    window.setTimeout(() => this.postMessage({ event: "listening" }), 100);
+  }
+  #onReady(trigger) {
+    this.#ctx.notify("loaded-metadata");
+    this.#ctx.notify("loaded-data");
+    this.#ctx.delegate.ready(void 0, trigger);
+  }
+  #onPause(trigger) {
+    this.#getPromise("pauseVideo")?.resolve();
+    this.#ctx.notify("pause", void 0, trigger);
+  }
+  #onTimeUpdate(time, trigger) {
+    const { duration, realCurrentTime } = this.#ctx.$state, hasEnded = this.#state === YouTubePlayerState.Ended, boundTime = hasEnded ? duration() : time;
+    this.#ctx.notify("time-change", boundTime, trigger);
+    if (!hasEnded && Math.abs(boundTime - realCurrentTime()) > 1) {
+      this.#ctx.notify("seeking", boundTime, trigger);
+    }
+  }
+  #onProgress(buffered, seekable, trigger) {
+    const detail = {
+      buffered: new TimeRange(0, buffered),
+      seekable
+    };
+    this.#ctx.notify("progress", detail, trigger);
+    const { seeking, realCurrentTime } = this.#ctx.$state;
+    if (seeking() && buffered > realCurrentTime()) {
+      this.#onSeeked(trigger);
+    }
+  }
+  #onSeeked(trigger) {
+    const { paused, realCurrentTime } = this.#ctx.$state;
+    window.clearTimeout(this.#seekingTimer);
+    this.#seekingTimer = window.setTimeout(
+      () => {
+        this.#ctx.notify("seeked", realCurrentTime(), trigger);
+        this.#seekingTimer = -1;
+      },
+      paused() ? 100 : 0
+    );
+  }
+  #onEnded(trigger) {
+    const { seeking } = this.#ctx.$state;
+    if (seeking()) this.#onSeeked(trigger);
+    this.#ctx.notify("pause", void 0, trigger);
+    this.#ctx.notify("end", void 0, trigger);
+  }
+  #onStateChange(state, trigger) {
+    const { paused, seeking } = this.#ctx.$state, isPlaying = state === YouTubePlayerState.Playing, isBuffering = state === YouTubePlayerState.Buffering, isPendingPlay = this.#isPending("playVideo"), isPlay = paused() && (isBuffering || isPlaying);
+    if (isBuffering) this.#ctx.notify("waiting", void 0, trigger);
+    if (seeking() && isPlaying) {
+      this.#onSeeked(trigger);
+    }
+    if (this.#invalidPlay && isPlaying) {
+      this.pause();
+      this.#invalidPlay = false;
+      this.setMuted(this.#ctx.$state.muted());
+      return;
+    }
+    if (!isPendingPlay && isPlay) {
+      this.#invalidPlay = true;
+      this.setMuted(true);
+      return;
+    }
+    if (isPlay) {
+      this.#getPromise("playVideo")?.resolve();
+      this.#ctx.notify("play", void 0, trigger);
+    }
+    switch (state) {
+      case YouTubePlayerState.Cued:
+        this.#onReady(trigger);
+        break;
+      case YouTubePlayerState.Playing:
+        this.#ctx.notify("playing", void 0, trigger);
+        break;
+      case YouTubePlayerState.Paused:
+        this.#onPause(trigger);
+        break;
+      case YouTubePlayerState.Ended:
+        this.#onEnded(trigger);
+        break;
+    }
+    this.#state = state;
+  }
+  onMessage({ info }, event) {
+    if (!info) return;
+    const { title, intrinsicDuration, playbackRate } = this.#ctx.$state;
+    if (isObject(info.videoData) && info.videoData.title !== title()) {
+      this.#ctx.notify("title-change", info.videoData.title, event);
+    }
+    if (isNumber(info.duration) && info.duration !== intrinsicDuration()) {
+      if (isNumber(info.videoLoadedFraction)) {
+        const buffered = info.progressState?.loaded ?? info.videoLoadedFraction * info.duration, seekable = new TimeRange(0, info.duration);
+        this.#onProgress(buffered, seekable, event);
+      }
+      this.#ctx.notify("duration-change", info.duration, event);
+    }
+    if (isNumber(info.playbackRate) && info.playbackRate !== playbackRate()) {
+      this.#ctx.notify("rate-change", info.playbackRate, event);
+    }
+    if (info.progressState) {
+      const { current, seekableStart, seekableEnd, loaded, duration } = info.progressState;
+      this.#onTimeUpdate(current, event);
+      this.#onProgress(loaded, new TimeRange(seekableStart, seekableEnd), event);
+      if (duration !== intrinsicDuration()) {
+        this.#ctx.notify("duration-change", duration, event);
+      }
+    }
+    if (isNumber(info.volume) && isBoolean(info.muted) && !this.#invalidPlay) {
+      const detail = {
+        muted: info.muted,
+        volume: info.volume / 100
+      };
+      this.#ctx.notify("volume-change", detail, event);
+    }
+    if (isNumber(info.playerState) && info.playerState !== this.#state) {
+      this.#onStateChange(info.playerState, event);
+    }
+  }
+  #reset() {
+    this.#state = -1;
+    this.#seekingTimer = -1;
+    this.#invalidPlay = false;
+  }
+  #getPromise(command) {
+    return this.#promises.get(command)?.shift();
+  }
+  #isPending(command) {
+    return Boolean(this.#promises.get(command)?.length);
+  }
+}
+
+export { YouTubeProvider };

package/prod/vidstack-elements.js

@@ -0,0 +1,37 @@
+export { defineCustomElement } from './chunks/vidstack-BNpgCJJ1.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-D7hJcnN-.js';
+export { MediaPlayerElement, MediaProviderElement } from './chunks/vidstack-DESBVLFp.js';
+export { MediaPosterElement } from './chunks/vidstack-CA4tDJdF.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-BaaRY-9x.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-C05ipjAK.js';
+import './chunks/vidstack-tt3O1zL6.js';
+import './chunks/vidstack-DB9WDRL5.js';
+import '@floating-ui/dom';
+import './chunks/vidstack-DcMkaIHJ.js';
+import './chunks/vidstack-BpLd9ASW.js';
+import './chunks/vidstack-V1jwkH0s.js';
+import './chunks/vidstack-bdt7uOlN.js';
+import './chunks/vidstack-BP49Gz0m.js';
+import './chunks/vidstack-COLU-zPZ.js';
+import './chunks/vidstack-Dihypf8P.js';
+import './chunks/vidstack-C9vIqaYT.js';
+import './chunks/vidstack-BTM4ERc7.js';
+import 'lit-html';
+import './chunks/vidstack-CwTj4H1w.js';
+import './chunks/vidstack-DwenML7x.js';
+import './chunks/vidstack-Fem0yF3c.js';
+import './chunks/vidstack-D5EzK014.js';
+import './chunks/vidstack-B01xzxC4.js';
+import './chunks/vidstack-BRZe2BNi.js';
+import './chunks/vidstack-BHqGlnGz.js';
+import './chunks/vidstack-zfCm-GM5.js';
+import 'lit-html/directives/if-defined.js';
+import 'lit-html/directives/unsafe-svg.js';
+import 'lit-html/async-directive.js';
+import 'lit-html/directives/ref.js';
+import 'lit-html/directives/keyed.js';
+import './chunks/vidstack-BDIzK77F.js';
+import 'lit-html/directives/unsafe-html.js';

package/prod/vidstack.js

@@ -0,0 +1,159 @@
+import { DOMEvent, isString, EventsController, useState } from './chunks/vidstack-BNpgCJJ1.js';
+export { appendTriggerEvent, findTriggerEvent, hasTriggerEvent, isKeyboardClick, isKeyboardEvent, isPointerEvent, walkTriggerEventChain } from './chunks/vidstack-BNpgCJJ1.js';
+export { AudioProviderLoader, AudioTrackList, DASHProviderLoader, FullscreenController, HLSProviderLoader, List, LocalMediaStorage, MEDIA_KEY_SHORTCUTS, MediaControls, MediaPlayer, MediaProvider, MediaRemoteControl, ScreenOrientationController, TextRenderers, TextTrackList, VideoProviderLoader, VideoQualityList, VimeoProviderLoader, YouTubeProviderLoader, boundTime, canFullscreen, isAudioProvider, isDASHProvider, isGoogleCastProvider, isHLSProvider, isHTMLAudioElement, isHTMLIFrameElement, isHTMLMediaElement, isHTMLVideoElement, isVideoProvider, isVideoQualitySrc, isVimeoProvider, isYouTubeProvider, mediaState, softResetMediaState } from './chunks/vidstack-DwenML7x.js';
+export { mediaContext } from './chunks/vidstack-tt3O1zL6.js';
+import { TextTrackSymbol } from './chunks/vidstack-BpLd9ASW.js';
+export { TextTrack, isTrackCaptionKind, parseJSONCaptionsFile } from './chunks/vidstack-BpLd9ASW.js';
+export { findActiveCue, isCueActive, watchActiveTextTrack, watchCueTextChange } from './chunks/vidstack-BP49Gz0m.js';
+export { sortVideoQualities } from './chunks/vidstack-BTM4ERc7.js';
+import { Thumbnail, Slider } from './chunks/vidstack-DcMkaIHJ.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-DcMkaIHJ.js';
+export { TimeRange, getTimeRangesEnd, getTimeRangesStart, normalizeTimeIntervals, updateTimeIntervals } from './chunks/vidstack-Fem0yF3c.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-C05ipjAK.js';
+export { Poster } from './chunks/vidstack-BRZe2BNi.js';
+export { usePlyrLayoutClasses } from './chunks/vidstack-BDIzK77F.js';
+export { getDownloadFile } from './chunks/vidstack-V1jwkH0s.js';
+export { AUDIO_EXTENSIONS, AUDIO_TYPES, DASH_VIDEO_EXTENSIONS, DASH_VIDEO_TYPES, HLS_VIDEO_EXTENSIONS, HLS_VIDEO_TYPES, VIDEO_EXTENSIONS, VIDEO_TYPES, canChangeVolume, canGoogleCastSrc, canOrientScreen, canPlayHLSNatively, canRotateScreen, canUsePictureInPicture, canUseVideoPresentation, isAudioSrc, isDASHSrc, isHLSSrc, isMediaStream, isVideoSrc } from './chunks/vidstack-bdt7uOlN.js';
+import './chunks/vidstack-D5EzK014.js';
+import './chunks/vidstack-B01xzxC4.js';
+import './chunks/vidstack-DB9WDRL5.js';
+import '@floating-ui/dom';
+import './chunks/vidstack-C9vIqaYT.js';
+import './chunks/vidstack-Dihypf8P.js';
+import './chunks/vidstack-COLU-zPZ.js';
+
+const GROUPED_LOG = Symbol(0);
+class GroupedLog {
+  constructor(logger, level, title, root, parent) {
+    this.logger = logger;
+    this.level = level;
+    this.title = title;
+    this.root = root;
+    this.parent = parent;
+  }
+  [GROUPED_LOG] = true;
+  logs = [];
+  log(...data) {
+    this.logs.push({ data });
+    return this;
+  }
+  labelledLog(label, ...data) {
+    this.logs.push({ label, data });
+    return this;
+  }
+  groupStart(title) {
+    return new GroupedLog(this.logger, this.level, title, this.root ?? this, this);
+  }
+  groupEnd() {
+    this.parent?.logs.push(this);
+    return this.parent ?? this;
+  }
+  dispatch() {
+    return this.logger.dispatch(this.level, this.root ?? this);
+  }
+}
+
+class Logger {
+  #target = null;
+  error(...data) {
+    return this.dispatch("error", ...data);
+  }
+  warn(...data) {
+    return this.dispatch("warn", ...data);
+  }
+  info(...data) {
+    return this.dispatch("info", ...data);
+  }
+  debug(...data) {
+    return this.dispatch("debug", ...data);
+  }
+  errorGroup(title) {
+    return new GroupedLog(this, "error", title);
+  }
+  warnGroup(title) {
+    return new GroupedLog(this, "warn", title);
+  }
+  infoGroup(title) {
+    return new GroupedLog(this, "info", title);
+  }
+  debugGroup(title) {
+    return new GroupedLog(this, "debug", title);
+  }
+  setTarget(newTarget) {
+    this.#target = newTarget;
+  }
+  dispatch(level, ...data) {
+    return this.#target?.dispatchEvent(
+      new DOMEvent("vds-log", {
+        bubbles: true,
+        composed: true,
+        detail: { level, data }
+      })
+    ) || false;
+  }
+}
+
+class LibASSTextRenderer {
+  constructor(loader, config) {
+    this.loader = loader;
+    this.config = config;
+  }
+  priority = 1;
+  #instance = null;
+  #track = null;
+  #typeRE = /(ssa|ass)$/;
+  canRender(track, video) {
+    return !!video && !!track.src && (isString(track.type) && this.#typeRE.test(track.type) || this.#typeRE.test(track.src));
+  }
+  attach(video) {
+    if (!video) return;
+    this.loader().then(async (mod) => {
+      this.#instance = new mod.default({
+        ...this.config,
+        video,
+        subUrl: this.#track?.src || ""
+      });
+      new EventsController(this.#instance).add("ready", () => {
+        const canvas = this.#instance?._canvas;
+        if (canvas) canvas.style.pointerEvents = "none";
+      }).add("error", (event) => {
+        if (!this.#track) return;
+        this.#track[TextTrackSymbol.readyState] = 3;
+        this.#track.dispatchEvent(
+          new DOMEvent("error", {
+            trigger: event,
+            detail: event.error
+          })
+        );
+      });
+    });
+  }
+  changeTrack(track) {
+    if (!track || track.readyState === 3) {
+      this.#freeTrack();
+    } else if (this.#track !== track) {
+      this.#instance?.setTrackByUrl(track.src);
+      this.#track = track;
+    }
+  }
+  detach() {
+    this.#freeTrack();
+  }
+  #freeTrack() {
+    this.#instance?.freeTrack();
+    this.#track = null;
+  }
+}
+
+class SliderThumbnail extends Thumbnail {
+  #slider;
+  onAttach(el) {
+    this.#slider = useState(Slider.state);
+  }
+  getTime() {
+    const { duration, clipStartTime } = this.media.$state;
+    return clipStartTime() + this.#slider.pointerRate() * duration();
+  }
+}
+
+export { LibASSTextRenderer, Logger, Slider, SliderThumbnail, Thumbnail };