@hanifhan1f/vidstack 1.12.13

package/src/global/plyr.ts

@@ -0,0 +1,917 @@
+import '../elements/bundles/player';
+import '../elements/bundles/player-layouts/plyr';
+
+import {
+  createDisposalBin,
+  DOMEvent,
+  isBoolean,
+  isString,
+  kebabToCamelCase,
+  listenEvent,
+  setAttribute,
+  setStyle,
+} from 'maverick.js/std';
+
+import type { PlyrLayoutProps } from '../components/layouts/plyr/props';
+import type { PlyrLayoutTranslations } from '../components/layouts/plyr/translations';
+import type * as ME from '../core/api/media-events';
+import type { MediaPlayerProps, PlayerSrc } from '../core/api/player-props';
+import { mediaState, type MediaPlayerState } from '../core/api/player-state';
+import type { MediaViewType } from '../core/api/types';
+import type { TextTrackInit } from '../core/tracks/text/text-track';
+import type { MediaPlayerElement, MediaPlyrLayoutElement, MediaProviderElement } from '../elements';
+import type { LogLevel } from '../foundation/logger/log-level';
+import type { HTMLMediaProvider } from '../providers/html/provider';
+import {
+  isHTMLAudioElement,
+  isHTMLIFrameElement,
+  isHTMLVideoElement,
+} from '../providers/type-check';
+import { isHTMLElement } from '../utils/dom';
+import type { FileDownloadInfo } from '../utils/network';
+import { canPlayVideoType } from '../utils/support';
+
+let activePlyr: Plyr | null = null,
+  defaults = mediaState.record,
+  forwardedPlayerState = [
+    'playing',
+    'paused',
+    'ended',
+    'currentTime',
+    'seeking',
+    'duration',
+    'volume',
+    'muted',
+    'loop',
+    'poster',
+  ],
+  eventMap: Record<string, keyof ME.MediaEvents> = {
+    ratechange: 'rate-change',
+    ready: 'can-play',
+    timeupdate: 'time-update',
+    volumechange: 'volume-change',
+  },
+  icons = [
+    'airplay',
+    'captions-off',
+    'captions-on',
+    'download',
+    'enter-fullscreen',
+    'exit-fullscreen',
+    'fast-forward',
+    'muted',
+    'pause',
+    'pip',
+    'play',
+    'restart',
+    'rewind',
+    'settings',
+    'volume',
+  ];
+
+export class Plyr implements PlyrProps, PlyrMethods {
+  static setup(targets: string | NodeList | HTMLElement[], config?: PlyrConfig) {
+    if (isString(targets)) {
+      targets = document.querySelectorAll<HTMLElement>(targets);
+    }
+
+    return [...targets].map((target) => new Plyr(target as HTMLElement, config));
+  }
+
+  static supported(type: 'audio' | 'video', provider: 'html5' | 'youtube' | 'vimeo') {
+    // Nothing really to check here, added for legacy reasons.
+    return true;
+  }
+
+  readonly player: MediaPlayerElement;
+  readonly provider: MediaProviderElement;
+  readonly layout: MediaPlyrLayoutElement;
+  readonly fullscreen = new PlyrFullscreenAdapter(this);
+
+  // These are only included for type defs, props are defined in constructor.
+  playing = defaults.playing;
+  paused = defaults.paused;
+  ended = defaults.ended;
+  currentTime = defaults.currentTime;
+  seeking = defaults.seeking;
+  duration = defaults.duration;
+  volume = defaults.volume;
+  muted = defaults.muted;
+  loop = defaults.loop;
+  poster = defaults.poster;
+
+  get type() {
+    return this.player.provider?.type ?? '';
+  }
+
+  get isHTML5() {
+    return /audio|video|hls/.test(this.type);
+  }
+
+  get isEmbed() {
+    return /youtube|vimeo/.test(this.type);
+  }
+
+  get buffered() {
+    const { bufferedEnd, seekableEnd } = this.player.state;
+    return seekableEnd > 0 ? bufferedEnd / seekableEnd : 0;
+  }
+
+  get stopped() {
+    return this.paused && this.currentTime === 0;
+  }
+
+  get hasAudio() {
+    if (!this.isHTML5) return true;
+
+    const media: any = (this.player.provider as HTMLMediaProvider).media;
+
+    return Boolean(
+      media.mozHasAudio ||
+        media.webkitAudioDecodedByteCount ||
+        media.audioTracks?.length ||
+        this.player.audioTracks.length,
+    );
+  }
+
+  get speed() {
+    return this.player.playbackRate;
+  }
+
+  set speed(speed) {
+    this.player.remoteControl.changePlaybackRate(speed);
+  }
+
+  get currentTrack() {
+    return this.player.textTracks.selectedIndex;
+  }
+
+  set currentTrack(index) {
+    this.player.remoteControl.changeTextTrackMode(index, 'showing');
+  }
+
+  get pip() {
+    return this.player.state.pictureInPicture;
+  }
+
+  set pip(isActive) {
+    if (isActive) this.player.enterPictureInPicture();
+    else this.player.exitPictureInPicture();
+  }
+
+  get quality() {
+    return this.player.state.quality?.height ?? null;
+  }
+
+  set quality(value) {
+    let qualities = this.player.qualities,
+      index = -1;
+
+    if (value !== null) {
+      let minScore = Infinity;
+      for (let i = 0; i < qualities.length; i++) {
+        const score = Math.abs(qualities[i]!.height - value);
+        if (score < minScore) {
+          index = i;
+          minScore = score;
+        }
+      }
+    }
+
+    this.player.remoteControl.changeQuality(index);
+  }
+
+  #source: PlyrSource | null = null;
+  get source() {
+    return this.#source;
+  }
+
+  set source(source) {
+    const {
+      type: viewType = 'video',
+      sources = '',
+      title = '',
+      poster = '',
+      thumbnails = '',
+      tracks = [],
+    } = source ?? {};
+
+    this.player.src = sources;
+    this.player.viewType = viewType;
+    this.player.title = title;
+    this.player.poster = poster;
+    this.layout.thumbnails = thumbnails;
+
+    this.player.textTracks.clear();
+    for (const track of tracks) this.player.textTracks.add(track);
+
+    this.#source = source;
+  }
+
+  #ratio: string | null = null;
+  get ratio() {
+    return this.#ratio;
+  }
+
+  set ratio(ratio) {
+    if (ratio) ratio = ratio.replace(/\s*:\s*/, ' / ');
+    setStyle(this.player, 'aspect-ratio', ratio ?? 'unset');
+    this.#ratio = ratio;
+  }
+
+  get download() {
+    return this.layout.download;
+  }
+
+  set download(download) {
+    this.layout.download = download;
+  }
+
+  #disposal = createDisposalBin();
+
+  constructor(
+    readonly target: PlyrTarget,
+    readonly config: Partial<PlyrConfig> = {},
+  ) {
+    if (__SERVER__) {
+      throw Error('[plyr] can not create player on server.');
+    }
+
+    if (isString(target)) {
+      target = document.querySelector(target) as HTMLElement;
+    } else if (!isHTMLElement(target)) {
+      target = target[0] as HTMLElement;
+    }
+
+    if (!isHTMLElement(target)) {
+      throw Error(`[plyr] target must be of type \`HTMLElement\`, found \`${typeof target}\``);
+    }
+
+    const dataConfig = target.getAttribute('data-plyr-config');
+    if (dataConfig) {
+      try {
+        config = { ...config, ...JSON.parse(dataConfig) };
+      } catch (error) {
+        if (__DEV__) {
+          console.error(`[plyr] failed to parse \`data-plyr-config\`\n\n`, error);
+        }
+      }
+    }
+
+    const {
+      enabled = true,
+      debug = __DEV__ ? 'warn' : 'error',
+      autoPause = true,
+      ratio = null,
+      hideControls = true,
+      resetOnEnd = false,
+      disableContextMenu = true,
+      iconUrl = null,
+      iconPrefix = 'plyr',
+      keyboard = { focused: true, global: false },
+      i18n = null,
+      tracks,
+      ...props
+    } = config;
+
+    this.player = document.createElement('media-player');
+    this.provider = document.createElement('media-provider');
+    this.layout = document.createElement('media-plyr-layout');
+
+    if (!enabled) return;
+
+    for (const prop of forwardedPlayerState) {
+      Object.defineProperty(this, prop, {
+        get: () => this.player[prop],
+        set: (value) => void (this.player[prop] = value),
+      });
+    }
+
+    if (isString(debug)) {
+      this.player.logLevel = debug;
+    } else if (debug) {
+      this.player.logLevel = 'warn';
+    }
+
+    if (autoPause) {
+      this.#disposal.add(listenEvent(this.player, 'play', this.#onPlay.bind(this)));
+    }
+
+    this.ratio = ratio;
+    this.layout.translations = i18n;
+
+    if (!hideControls) {
+      this.player.controls.canIdle = false;
+    }
+
+    if (resetOnEnd) {
+      this.#disposal.add(listenEvent(this.player, 'ended', this.#onReset.bind(this)));
+    }
+
+    if (disableContextMenu) {
+      // need to activate blocker somehow in provider element.
+    }
+
+    if (iconUrl) {
+      this.layout.customIcons = true;
+
+      const id = `sprite-${iconPrefix}`,
+        exists = document.getElementById(id);
+
+      const addIcons = () => {
+        for (const icon of icons) {
+          const namepsace = 'http://www.w3.org/2000/svg';
+
+          const svg = document.createElementNS(namepsace, 'svg');
+          setAttribute(svg, 'fill', 'none');
+          setAttribute(svg, 'slot', `${icon}-icon`);
+          setAttribute(svg, 'aria-hidden', 'true');
+          setAttribute(svg, 'viewBox', '0 0 18 18');
+
+          const use = document.createElementNS(namepsace, 'use');
+          use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', `#${iconPrefix}-${icon}`);
+          svg.append(use);
+
+          this.layout.append(svg);
+        }
+      };
+
+      if (!exists) {
+        fetch(iconUrl)
+          .then((response) => response.text())
+          .then((data) => {
+            const container = document.createElement('div');
+            setAttribute(container, 'id', id);
+            setAttribute(container, 'hidden', '');
+
+            container.innerHTML = data;
+
+            document.body.insertAdjacentElement('afterbegin', container);
+
+            addIcons();
+          })
+          .catch((error) => {
+            if (__DEV__) {
+              console.error('[plyr] failed tol oad sprite:\n\n', error);
+            }
+
+            this.layout.customIcons = false;
+          });
+      } else {
+        addIcons();
+      }
+    }
+
+    if (keyboard.global) {
+      this.player.keyTarget = 'document';
+    } else if (keyboard.focused) {
+      this.player.keyTarget = 'player';
+    } else {
+      this.player.keyDisabled = true;
+    }
+
+    target.removeAttribute('controls');
+
+    const title = target.getAttribute('title');
+    if (title) this.player.setAttribute('title', title);
+
+    const width = target.getAttribute('width'),
+      height = target.getAttribute('height');
+
+    if (width || height) {
+      if (width) this.player.style.width = width;
+      if (height) this.player.style.height = height;
+      this.player.style.aspectRatio = 'unset';
+    }
+
+    for (const attr of target.attributes) {
+      const name = attr.name.replace('data-', ''),
+        propName = kebabToCamelCase(name);
+      if (propName in this.player) {
+        this.player.setAttribute(name, attr.value);
+      } else if (propName in this.layout) {
+        this.layout.setAttribute(name, attr.value);
+      }
+    }
+
+    for (const [prop, value] of Object.entries(props)) {
+      if (prop in this.player) {
+        this.player[prop] = value;
+      } else if (prop in this.layout) {
+        this.layout[prop] = value;
+      }
+    }
+
+    if (tracks) {
+      for (const track of tracks) this.player.textTracks.add(track);
+    }
+
+    this.player.append(this.provider, this.layout);
+
+    const isTargetContainer =
+      !isHTMLAudioElement(target) && !isHTMLVideoElement(target) && !isHTMLIFrameElement(target);
+
+    if (isTargetContainer) {
+      target.append(this.player);
+    } else {
+      // Copy over source/track elements.
+      for (const child of [...target.children]) this.provider.append(child);
+      target.replaceWith(this.player);
+    }
+
+    const embedProvider = target.getAttribute('data-plyr-provider'),
+      embedId = target.getAttribute('data-plyr-embed-id');
+
+    if (embedProvider && /youtube|vimeo/.test(embedProvider) && embedId) {
+      this.player.src = `${embedProvider}/${embedId}`;
+    }
+  }
+
+  #onPlay() {
+    if (activePlyr !== this) activePlyr?.pause();
+    activePlyr = this;
+  }
+
+  #onReset() {
+    this.currentTime = 0;
+    this.paused = true;
+  }
+
+  play() {
+    return this.player.play();
+  }
+
+  pause() {
+    return this.player.pause();
+  }
+
+  togglePlay(toggle = this.paused) {
+    if (toggle) {
+      return this.player.play();
+    } else {
+      return this.player.pause();
+    }
+  }
+
+  toggleCaptions(toggle = !this.player.textTracks.selected) {
+    const controller = this.player.remoteControl;
+    if (toggle) {
+      controller.showCaptions();
+    } else {
+      controller.disableCaptions();
+    }
+  }
+
+  toggleControls(toggle = !this.player.controls.showing) {
+    const controls = this.player.controls;
+    if (toggle) {
+      controls.show();
+    } else {
+      controls.hide();
+    }
+  }
+
+  restart() {
+    this.currentTime = 0;
+  }
+
+  stop() {
+    this.pause();
+    this.player.currentTime = 0;
+  }
+
+  forward(seekTime = this.config.seekTime ?? 10) {
+    this.currentTime += seekTime;
+  }
+
+  rewind(seekTime = this.config.seekTime ?? 10) {
+    this.currentTime -= seekTime;
+  }
+
+  increaseVolume(step = 5) {
+    this.volume += step;
+  }
+
+  decreaseVolume(step = 5) {
+    this.volume -= step;
+  }
+
+  airplay() {
+    return this.player.requestAirPlay();
+  }
+
+  on<T extends keyof PlyrEvents>(type: T, callback: (event: PlyrEvents[T]) => void) {
+    this.#listen(type, callback);
+  }
+
+  once<T extends keyof PlyrEvents>(type: T, callback: (event: PlyrEvents[T]) => void) {
+    this.#listen(type, callback, { once: true });
+  }
+
+  off<T extends keyof PlyrEvents>(type: T, callback: (event: PlyrEvents[T]) => void) {
+    this.#listen(type, callback, { remove: true });
+  }
+
+  #listeners: {
+    type: string;
+    callback: any;
+    listener: any;
+  }[] = [];
+
+  #listen<T extends keyof PlyrEvents>(
+    type: T,
+    callback: (event: any) => void,
+    options: { remove?: boolean; once?: boolean } = {},
+  ) {
+    let eventType: string = type,
+      toggle: boolean | null = null;
+
+    switch (type) {
+      case 'captionsenabled':
+      case 'captionsdisabled':
+        eventType = 'text-track-change';
+        toggle = type === 'captionsenabled';
+        break;
+      case 'controlsshown':
+      case 'controlshidden':
+        eventType = 'controls-change';
+        toggle = type === 'controlsshown';
+        break;
+      case 'enterfullscreen':
+      case 'exitfullscreen':
+        eventType = 'fullscreen-change';
+        toggle = type === 'enterfullscreen';
+        break;
+      default:
+    }
+
+    const mappedEventType = eventMap[eventType] ?? eventType;
+
+    const listener: any = (event: CustomEvent<unknown>) => {
+      if (isBoolean(toggle) && !!event.detail !== toggle) return;
+
+      if (mappedEventType !== type) {
+        callback(new DOMEvent(type, { ...event, trigger: event }));
+        return;
+      }
+
+      callback(event);
+    };
+
+    if (options.remove) {
+      let index = -1;
+      do {
+        index = this.#listeners.findIndex((t) => t.type === type && t.callback === callback);
+        if (index >= 0) {
+          const { listener } = this.#listeners[index]!;
+          this.player.removeEventListener(mappedEventType, listener);
+          this.#listeners.splice(index, 1);
+        }
+      } while (index >= 0);
+    } else {
+      this.#listeners.push({ type, callback, listener });
+      this.player.addEventListener(mappedEventType, listener, { once: options.once });
+    }
+  }
+
+  supports(type: string) {
+    return !!type && canPlayVideoType(null, type);
+  }
+
+  destroy() {
+    for (const { type, listener } of this.#listeners) {
+      this.player.removeEventListener(eventMap[type] ?? type, listener);
+    }
+
+    this.#source = null;
+    this.#listeners.length = 0;
+    if (activePlyr === this) activePlyr = null;
+
+    this.#disposal.empty();
+    this.player.destroy();
+  }
+}
+
+export type PlyrTarget = string | HTMLElement | NodeList | HTMLElement[];
+
+export interface PlyrConfig
+  extends Partial<Omit<MediaPlayerProps, 'controls'>>,
+    Partial<PlyrLayoutProps> {
+  /**
+   * Completely disable Plyr. This would allow you to do a User Agent check or similar to
+   * programmatically enable or disable Plyr for a certain UA.
+   *
+   * @defaultValue true
+   * @example
+   * ```ts
+   * enabled: !/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
+   * ```
+   */
+  enabled: boolean;
+  /**
+   * Display debugging information in the console.
+   *
+   * @defaultValue 'warn'
+   */
+  debug: boolean | LogLevel;
+  /**
+   * Only allow one player playing at once.
+   *
+   * @defaultValue true
+   */
+  autoPause: boolean;
+  /**
+   * Gets or sets the video aspect ratio.
+   *
+   * @defaultValue 16/9
+   */
+  ratio: string | null;
+  /**
+   * Hide video controls automatically after 2s of no mouse or focus movement, on control element
+   * blur (tab out), on playback start or entering fullscreen. As soon as the mouse is moved,
+   * a control element is focused or playback is paused, the controls reappear instantly.
+   *
+   * @defaultValue true
+   */
+  hideControls: boolean;
+  /**
+   * Reset the playback to the start once playback is complete.
+   *
+   * @defaultValue false
+   */
+  resetOnEnd: boolean;
+  /**
+   * Disable right click menu on video to help as very primitive obfuscation to prevent downloads
+   * of content.
+   *
+   * @defaultValue true
+   */
+  disableContextMenu: boolean;
+  /**
+   * Specify a URL or path to the SVG sprite. See the SVG section for more info.
+   *
+   * @defaultValue null
+   */
+  iconUrl: string | null;
+  /**
+   * Specify the id prefix for the icons used in the default controls (e.g. "plyr-play" would be
+   * "plyr"). This is to prevent clashes if you're using your own SVG sprite but with the default
+   * controls. Most people can ignore this option.
+   *
+   * @defaultValue 'plyr'
+   */
+  iconPrefix: 'plyr';
+  /**
+   * Enable keyboard shortcuts for focused players only or globally.
+   *
+   * @defaultValue `{ focused: true, global: false }`
+   */
+  keyboard: PlyrKeyboardConfig;
+  /**
+   * Used for internationalization (i18n) of the text within the UI.
+   *
+   * @defaultValue  null
+   */
+  i18n: PlyrI18nConfig | null;
+  /**
+   * Text tracks to be included on initialization.
+   */
+  tracks?: TextTrackInit[];
+}
+
+export interface PlyrKeyboardConfig {
+  /**
+   * Enable keyboard shortcuts when the player is focused.
+   *
+   * @defaultValue true
+   */
+  focused: boolean;
+  /**
+   * Enable keyboard shortcuts globally.
+   *
+   * @defaultValue false
+   */
+  global: boolean;
+}
+
+export interface PlyrStorageConfig {
+  /**
+   * Allow use of local storage to store user settings.
+   *
+   * @defaultValue true
+   */
+  enabled: boolean;
+  /**
+   * The storage key prefix to use.
+   *
+   * @defaultValue 'plyr'
+   */
+  key: string;
+}
+
+export interface PlyrI18nConfig extends Partial<PlyrLayoutTranslations> {}
+
+export interface PlyrProps
+  extends Pick<
+    MediaPlayerState,
+    | 'playing'
+    | 'paused'
+    | 'ended'
+    | 'currentTime'
+    | 'seeking'
+    | 'duration'
+    | 'volume'
+    | 'muted'
+    | 'loop'
+    | 'poster'
+  > {
+  /**
+   * Returns a boolean indicating if the current player is HTML5.
+   */
+  readonly isHTML5: boolean;
+  /**
+   * Returns a boolean indicating if the current player is an embedded player.
+   */
+  readonly isEmbed: boolean;
+  /**
+   * Returns a float between 0 and 1 indicating how much of the media is buffered
+   */
+  readonly buffered: number;
+  /**
+   * Returns a boolean indicating if the current player is stopped.
+   */
+  readonly stopped: boolean;
+  /**
+   *  Returns a boolean indicating if the current media has an audio track.
+   */
+  readonly hasAudio: boolean;
+  /**
+   * Fullscreen state and methods.
+   */
+  readonly fullscreen: PlyrFullscreenAdapter;
+  /**
+   * Gets or sets the speed for the player. Generally the minimum should be 0.5.
+   */
+  speed: number;
+  /**
+   * Gets or sets the caption track by index. -1 means the track is missing or captions is not
+   * active.
+   */
+  currentTrack: number;
+  /**
+   * Gets or sets the picture-in-picture state of the player.
+   */
+  pip: boolean;
+  /**
+   * Gets or sets the quality for the player based on height. Setting to -1 will use auto quality.
+   */
+  quality: number | null;
+  /**
+   * Gets or sets the current source for the player.
+   */
+  source: PlyrSource | null;
+  /**
+   * Gets or sets the video aspect ratio.
+   */
+  ratio: string | null;
+  /**
+   * Gets or sets the URL for the download button.
+   */
+  download: FileDownloadInfo;
+}
+
+export interface PlyrSource {
+  title?: string;
+  type?: MediaViewType;
+  sources: PlayerSrc;
+  poster?: string;
+  thumbnails?: string;
+  tracks?: TextTrackInit[];
+}
+
+export class PlyrFullscreenAdapter {
+  readonly #plyr: Plyr;
+
+  constructor(plyr: Plyr) {
+    this.#plyr = plyr;
+  }
+
+  get #player() {
+    return this.#plyr.player;
+  }
+
+  /**
+   * 	Returns a boolean indicating if the current player has fullscreen enabled.
+   */
+  get enabled() {
+    return this.#player.state.canFullscreen;
+  }
+  /**
+   * Returns a boolean indicating if the current player is in fullscreen mode.
+   */
+  get active() {
+    return this.#player.state.fullscreen;
+  }
+  /**
+   * Request to enter fullscreen.
+   */
+  enter() {
+    return this.#player.requestFullscreen();
+  }
+  /**
+   * Request to exit fullscreen.
+   */
+  exit() {
+    return this.#player.exitFullscreen();
+  }
+  /**
+   * Request to toggle fullscreen.
+   */
+  toggle() {
+    if (this.active) return this.exit();
+    else return this.enter();
+  }
+}
+
+export interface PlyrMethods extends Pick<MediaPlayerElement, 'play' | 'pause' | 'destroy'> {
+  /**
+   * Toggle playback, if no parameters are passed, it will toggle based on current status.
+   */
+  togglePlay(toggle?: boolean): Promise<void>;
+  /**
+   * Stop playback and reset to start.
+   */
+  stop(): void;
+  /**
+   * Restart playback.
+   */
+  restart(): void;
+  /**
+   * Rewind playback by the specified seek time. If no parameter is passed, the default seek time
+   * will be used.
+   */
+  rewind(seekTime?: number): void;
+  /**
+   * Fast forward by the specified seek time. If no parameter is passed, the default seek time
+   * will be used.
+   */
+  forward(seekTime?: number): void;
+  /**
+   * Increase volume by the specified step. If no parameter is passed, the default step will be used.
+   */
+  increaseVolume(step?: number): void;
+  /**
+   * Reduce volume by the specified step. If no parameter is passed, the default step will be used.
+   */
+  decreaseVolume(step?: number): void;
+  /**
+   * Toggle captions display. If no parameter is passed, it will toggle based on current status.
+   */
+  toggleCaptions(toggle?: boolean): void;
+  /**
+   * Trigger the airplay dialog on supported devices.
+   */
+  airplay(): void;
+  /**
+   * Toggle the controls (video only). Takes optional truthy value to force it on/off.
+   */
+  toggleControls(toggle?: boolean): void;
+  /**
+   * Add an event listener for the specified event.
+   */
+  on<T extends keyof PlyrEvents>(type: T, callback: (event: PlyrEvents[T]) => void): void;
+  /**
+   * Add an event listener for the specified event once.
+   */
+  once<T extends keyof PlyrEvents>(type: T, callback: (event: PlyrEvents[T]) => void): void;
+  /**
+   * Remove an event listener for the specified event.
+   */
+  off<T extends keyof PlyrEvents>(type: T, callback: (event: PlyrEvents[T]) => void): void;
+  /**
+   * Check support for a mime type.
+   */
+  supports(type: string): boolean;
+}
+
+export interface PlyrEvents
+  extends Pick<
+    ME.MediaEvents,
+    'ended' | 'pause' | 'play' | 'playing' | 'progress' | 'seeked' | 'seeking'
+  > {
+  captionsdisabled: ME.MediaTextTrackChangeEvent;
+  captionsenabled: ME.MediaTextTrackChangeEvent;
+  controlshidden: ME.MediaControlsChangeEvent;
+  controlsshown: ME.MediaControlsChangeEvent;
+  enterfullscreen: ME.MediaFullscreenChangeEvent;
+  exitfullscreen: ME.MediaFullscreenChangeEvent;
+  languagechange: Event;
+  ratechange: ME.MediaRateChangeEvent;
+  ready: ME.MediaCanPlayEvent;
+  timeupdate: ME.MediaTimeUpdateEvent;
+  volumechange: ME.MediaVolumeChangeEvent;
+}
+
+if (__CDN__) {
+  (window as any).Plyr = Plyr;
+}