@hanifhan1f/vidstack 1.12.13

package/src/providers/youtube/provider.ts

@@ -0,0 +1,403 @@
+import { createScope, effect, signal } from 'maverick.js';
+import {
+  deferredPromise,
+  isBoolean,
+  isNumber,
+  isObject,
+  isString,
+  isUndefined,
+  type DeferredPromise,
+} from 'maverick.js/std';
+
+import type { MediaContext } from '../../core/api/media-context';
+import type { Src } from '../../core/api/src-types';
+import { TimeRange } from '../../core/time-ranges';
+import { preconnect } from '../../utils/network';
+import { EmbedProvider } from '../embed/EmbedProvider';
+import type { MediaProviderAdapter } from '../types';
+import type { YouTubeCommand, YouTubeCommandArg } from './embed/command';
+import type { YouTubeMessage } from './embed/message';
+import type { YouTubeParams } from './embed/params';
+import { YouTubePlayerState, type YouTubePlayerStateValue } from './embed/state';
+import { resolveYouTubeVideoId } from './utils';
+
+/**
+ * This provider enables loading videos uploaded to YouTube (youtube.com) via embeds.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/providers/youtube}
+ * @see {@link https://developers.google.com/youtube/iframe_api_reference}
+ * @example
+ * ```html
+ * <media-player src="youtube/_cMxraX_5RE">
+ *   <media-provider></media-provider>
+ * </media-player>
+ * ```
+ */
+export class YouTubeProvider
+  extends EmbedProvider<YouTubeMessage>
+  implements MediaProviderAdapter, Pick<YouTubeParams, 'color' | 'start' | 'end'>
+{
+  protected readonly $$PROVIDER_TYPE = 'YOUTUBE';
+
+  readonly scope = createScope();
+
+  readonly #ctx: MediaContext;
+
+  #videoId = signal('');
+  #state: YouTubePlayerStateValue = -1;
+  #currentSrc: Src<string> | null = null;
+
+  #seekingTimer = -1;
+  #invalidPlay = false;
+
+  #promises = new Map<string, DeferredPromise<any, string>[]>();
+
+  constructor(iframe: HTMLIFrameElement, ctx: MediaContext) {
+    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: 'white' | 'red' = '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(): Src<string> | null {
+    return this.#currentSrc;
+  }
+
+  get type() {
+    return 'youtube';
+  }
+
+  get videoId() {
+    return this.#videoId();
+  }
+
+  preconnect() {
+    preconnect(this.getOrigin());
+  }
+
+  override setup() {
+    super.setup();
+    effect(this.#watchVideoId.bind(this));
+    this.#ctx.notify('provider-setup', this);
+  }
+
+  destroy() {
+    this.#reset();
+
+    // Release all pending promises.
+    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: string) {
+    this.#getPromise('playVideo')?.reject(message);
+  }
+
+  async pause() {
+    return this.#remote('pauseVideo');
+  }
+
+  #pauseFail(message: string) {
+    this.#getPromise('pauseVideo')?.reject(message);
+  }
+
+  setMuted(muted: boolean) {
+    if (muted) this.#remote('mute');
+    else this.#remote('unMute');
+  }
+
+  setCurrentTime(time: number) {
+    this.#remote('seekTo', [time, true]);
+    this.#ctx.notify('seeking', time);
+  }
+
+  setVolume(volume: number) {
+    this.#remote('setVolume', volume * 100);
+  }
+
+  setPlaybackRate(rate: number) {
+    this.#remote('setPlaybackRate', rate);
+  }
+
+  async loadSource(src: Src) {
+    if (!isString(src.src)) {
+      this.#currentSrc = null;
+      this.#videoId.set('');
+      return;
+    }
+
+    const videoId = resolveYouTubeVideoId(src.src);
+    this.#videoId.set(videoId ?? '');
+
+    this.#currentSrc = src as Src<string>;
+  }
+
+  protected override 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');
+  }
+
+  protected override buildParams(): YouTubeParams {
+    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 : undefined,
+      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<T extends keyof YouTubeCommandArg>(command: T, arg?: YouTubeCommandArg[T]) {
+    let promise = deferredPromise<void, string>(),
+      promises = this.#promises.get(command);
+
+    if (!promises) this.#promises.set(command, (promises = []));
+
+    promises.push(promise);
+
+    const args = Array.isArray(arg) ? arg : arg ? [arg] : undefined;
+
+    this.postMessage({
+      event: 'command',
+      func: command,
+      args,
+    });
+
+    return promise.promise;
+  }
+
+  protected override onLoad(): void {
+    // Seems like we have to wait a random small delay or else YT player isn't ready.
+    window.setTimeout(() => this.postMessage({ event: 'listening' }), 100);
+  }
+
+  #onReady(trigger: Event) {
+    this.#ctx.notify('loaded-metadata');
+    this.#ctx.notify('loaded-data');
+    this.#ctx.delegate.ready(undefined, trigger);
+  }
+
+  #onPause(trigger: Event) {
+    this.#getPromise('pauseVideo')?.resolve();
+    this.#ctx.notify('pause', undefined, trigger);
+  }
+
+  #onTimeUpdate(time: number, trigger: Event) {
+    const { duration, realCurrentTime } = this.#ctx.$state,
+      hasEnded = this.#state === YouTubePlayerState.Ended,
+      boundTime = hasEnded ? duration() : time;
+
+    this.#ctx.notify('time-change', boundTime, trigger);
+
+    // // This is the only way to detect `seeking`.
+    if (!hasEnded && Math.abs(boundTime - realCurrentTime()) > 1) {
+      this.#ctx.notify('seeking', boundTime, trigger);
+    }
+  }
+
+  #onProgress(buffered: number, seekable: TimeRange, trigger: Event) {
+    const detail = {
+      buffered: new TimeRange(0, buffered),
+      seekable,
+    };
+
+    this.#ctx.notify('progress', detail, trigger);
+
+    const { seeking, realCurrentTime } = this.#ctx.$state;
+
+    /**
+     * This is the only way to detect `seeked`. Unfortunately while the player is `paused` `seeking`
+     * and `seeked` will fire at the same time, there are no updates in-between -_-. We need an
+     * artificial delay between the two events.
+     */
+    if (seeking() && buffered > realCurrentTime()) {
+      this.#onSeeked(trigger);
+    }
+  }
+
+  #onSeeked(trigger: Event) {
+    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: Event) {
+    const { seeking } = this.#ctx.$state;
+    if (seeking()) this.#onSeeked(trigger);
+    this.#ctx.notify('pause', undefined, trigger);
+    this.#ctx.notify('end', undefined, trigger);
+  }
+
+  #onStateChange(state: YouTubePlayerStateValue, trigger: Event) {
+    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', undefined, trigger);
+
+    if (seeking() && isPlaying) {
+      this.#onSeeked(trigger);
+    }
+
+    if (this.#invalidPlay && isPlaying) {
+      this.pause();
+      this.#invalidPlay = false;
+      this.setMuted(this.#ctx.$state.muted());
+      return;
+    }
+
+    // Embed incorrectly plays on seek operations.
+    if (!isPendingPlay && isPlay) {
+      this.#invalidPlay = true;
+      // Prevent any audio between time of play and playing which is when we pause so
+      // frame is loaded.
+      this.setMuted(true);
+      return;
+    }
+
+    // Attempt to detect `play` events early.
+    if (isPlay) {
+      this.#getPromise('playVideo')?.resolve();
+      this.#ctx.notify('play', undefined, trigger);
+    }
+
+    switch (state) {
+      case YouTubePlayerState.Cued:
+        this.#onReady(trigger);
+        break;
+      case YouTubePlayerState.Playing:
+        this.#ctx.notify('playing', undefined, trigger);
+        break;
+      case YouTubePlayerState.Paused:
+        this.#onPause(trigger);
+        break;
+      case YouTubePlayerState.Ended:
+        this.#onEnded(trigger);
+        break;
+    }
+
+    this.#state = state;
+  }
+
+  protected override onMessage({ info }: YouTubeMessage, event: MessageEvent) {
+    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: YouTubeCommand) {
+    return this.#promises.get(command)?.shift();
+  }
+
+  #isPending(command: YouTubeCommand) {
+    return Boolean(this.#promises.get(command)?.length);
+  }
+}

package/src/providers/youtube/utils.ts

@@ -0,0 +1,45 @@
+const videoIdRE =
+  /(?:youtu\.be|youtube|youtube\.com|youtube-nocookie\.com)(?:\/shorts)?\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=|)((?:\w|-){11})/;
+
+const posterCache = new Map<string, string>();
+
+const pendingFetch = new Map<string, Promise<string>>();
+
+export function resolveYouTubeVideoId(src: string) {
+  return src.match(videoIdRE)?.[1];
+}
+
+export async function findYouTubePoster(videoId: string, abort: AbortController) {
+  if (posterCache.has(videoId)) return posterCache.get(videoId)!;
+
+  if (pendingFetch.has(videoId)) return pendingFetch.get(videoId)!;
+
+  const pending = new Promise<string>(async (resolve) => {
+    const sizes = ['maxresdefault', 'sddefault', 'hqdefault'];
+    for (const size of sizes) {
+      for (const webp of [true, false]) {
+        const url = resolveYouTubePosterURL(videoId, size, webp),
+          response = await fetch(url, {
+            mode: 'no-cors',
+            signal: abort.signal,
+          });
+
+        if (response.status < 400) {
+          posterCache.set(videoId, url);
+          resolve(url);
+          return;
+        }
+      }
+    }
+  })
+    .catch(() => '')
+    .finally(() => pendingFetch.delete(videoId));
+
+  pendingFetch.set(videoId, pending);
+  return pending;
+}
+
+function resolveYouTubePosterURL(videoId: string, size: string, webp: boolean) {
+  const type = webp ? 'webp' : 'jpg';
+  return `https://i.ytimg.com/${webp ? 'vi_webp' : 'vi'}/${videoId}/${size}.${type}`;
+}