@hanifhan1f/vidstack 1.12.13

package/src/providers/vimeo/embed/command.ts

@@ -0,0 +1,118 @@
+import type { VimeoEvent } from './event';
+import type { VimeoChapter, VimeoQuality, VimeoTextTrack } from './misc';
+
+/**
+ * @see https://github.com/vimeo/player.js#methods
+ */
+export type VimeoCommand =
+  | 'addEventListener'
+  | 'disableTextTrack'
+  | 'enableTextTrack'
+  | 'exitFullscreen'
+  | 'exitPictureInPicture'
+  | 'getBuffered'
+  | 'getCuePoints'
+  | 'getChapters'
+  | 'getCurrentTime'
+  | 'getDuration'
+  | 'getFullscreen'
+  | 'getMuted'
+  | 'getPictureInPicture'
+  | 'getPlayed'
+  | 'getQualities'
+  | 'getQuality'
+  | 'getSeekable'
+  | 'getSeeking'
+  | 'getTextTracks'
+  | 'getVideoTitle'
+  | '_hideOverlay'
+  | 'pause'
+  | 'play'
+  | 'requestFullscreen'
+  | 'requestPictureInPicture'
+  | 'seekTo'
+  | 'setMuted'
+  | 'setPlaybackRate'
+  | 'setQuality'
+  | 'setVolume'
+  | '_showOverlay'
+  | 'destroy'
+  | 'loadVideo'
+  | 'unload';
+
+export interface VimeoCommandArg {
+  play: void;
+  pause: void;
+  setMuted: boolean;
+  setVolume: number;
+  getDuration: void;
+  getChapters: void;
+  getCurrentTime: void;
+  seekTo: number;
+  setPlaybackRate: number;
+  addEventListener: VimeoEvent;
+  getCuePoints: void;
+  getVideoTitle: string;
+  getTextTracks: void;
+  enableTextTrack: {
+    language: string;
+    kind: string;
+  };
+  disableTextTrack: string;
+  setQuality: string;
+  _showOverlay: void;
+  _hideOverlay: void;
+  getBuffered: void;
+  requestFullscreen: void;
+  exitFullscreen: void;
+  requestPictureInPicture: void;
+  exitPictureInPicture: void;
+  getQuality: void;
+  getQualities: void;
+  getPlayed: void;
+  getSeekable: void;
+  getSeeking: void;
+  getFullscreen: void;
+  getMuted: void;
+  getPictureInPicture: void;
+  destroy: void;
+  loadVideo: number;
+  unload: void;
+}
+
+export interface VimeoCommandData {
+  play: void;
+  pause: void;
+  setMuted: boolean;
+  setVolume: void;
+  getDuration: number;
+  getChapters: VimeoChapter[];
+  getCurrentTime: number;
+  seekTo: void;
+  setPlaybackRate: void;
+  addEventListener: void;
+  getCuePoints: void;
+  getVideoTitle: string;
+  getTextTracks: VimeoTextTrack[];
+  enableTextTrack: void;
+  disableTextTrack: void;
+  setQuality: void;
+  _showOverlay: void;
+  _hideOverlay: void;
+  getBuffered: number;
+  requestFullscreen: void;
+  exitFullscreen: void;
+  requestPictureInPicture: void;
+  exitPictureInPicture: void;
+  getQuality: string;
+  getQualities: VimeoQuality[];
+  getPlayed: number[];
+  getSeekable: number[];
+  getSeeking: boolean;
+  getFullscreen: boolean;
+  getMuted: boolean;
+  getPictureInPicture: boolean;
+  destroy: void;
+  loadVideo: void;
+  unload: void;
+}

package/src/providers/vimeo/embed/event.ts

@@ -0,0 +1,124 @@
+/**
+ * @see {@link https://github.com/vimeo/player.js#events}
+ */
+export const trackedVimeoEvents: VimeoEvent[] = [
+  'bufferend',
+  'bufferstart',
+  // 'cuechange',
+  'durationchange',
+  'ended',
+  'enterpictureinpicture',
+  'error',
+  'fullscreenchange',
+  'leavepictureinpicture',
+  'loaded',
+  // 'loadeddata',
+  // 'loadedmetadata',
+  // 'loadstart',
+  'playProgress',
+  'loadProgress',
+  'pause',
+  'play',
+  'playbackratechange',
+  // 'progress',
+  'qualitychange',
+  'seeked',
+  'seeking',
+  // 'texttrackchange',
+  'timeupdate',
+  'volumechange',
+  'waiting',
+  // 'adstarted',
+  // 'adcompleted',
+  // 'aderror',
+  // 'adskipped',
+  // 'adallcompleted',
+  // 'adclicked',
+  // 'chapterchange',
+  // 'chromecastconnected',
+  // 'remoteplaybackavailabilitychange',
+  // 'remoteplaybackconnecting',
+  // 'remoteplaybackconnect',
+  // 'remoteplaybackdisconnect',
+  // 'liveeventended',
+  // 'liveeventstarted',
+  // 'livestreamoffline',
+  // 'livestreamonline',
+];
+
+export type VimeoEvent =
+  | 'bufferend'
+  | 'bufferstart'
+  | 'cuechange'
+  | 'durationchange'
+  | 'ended'
+  | 'enterpictureinpicture'
+  | 'error'
+  | 'fullscreenchange'
+  | 'leavepictureinpicture'
+  | 'loaded'
+  | 'loadeddata'
+  | 'loadedmetadata'
+  | 'loadProgress'
+  | 'loadstart'
+  | 'pause'
+  | 'play'
+  | 'playbackratechange'
+  | 'playProgress'
+  | 'progress'
+  | 'qualitychange'
+  | 'ready'
+  | 'seek'
+  | 'seeked'
+  | 'seeking'
+  | 'texttrackchange'
+  | 'volumechange'
+  | 'waiting'
+  | 'timeupdate';
+
+export interface VimeoProgressPayload {
+  seconds: number;
+  percent: number;
+  duration: number;
+}
+
+export interface VimeoPlayPayload {
+  seconds: number;
+  percent: number;
+  duration: number;
+}
+
+export interface VimeoErrorPayload {
+  name: string;
+  message: string;
+  method?: string;
+}
+
+export interface VimeoEventPayload {
+  play: VimeoPlayPayload;
+  pause: void;
+  ready: void;
+  playProgress: VimeoProgressPayload;
+  loadProgress: VimeoProgressPayload;
+  bufferstart: void;
+  bufferend: void;
+  loaded: { id: number };
+  ended: void;
+  seeking: void;
+  seek: void;
+  seeked: void;
+  cuechange: void;
+  fullscreenchange: { fullscreen: boolean };
+  volumechange: { volume: number };
+  durationchange: { duration: number };
+  playbackratechange: { playbackRate: number };
+  texttrackchange: void;
+  error: any;
+  loadeddata: any;
+  loadstart: any;
+  loadedmetadata: any;
+  enterpictureinpicture: void;
+  leavepictureinpicture: void;
+  qualitychange: any;
+  waiting: void;
+}

package/src/providers/vimeo/embed/message.ts

@@ -0,0 +1,9 @@
+import type { VimeoCommand } from './command';
+import type { VimeoEventPayload } from './event';
+
+export interface VimeoMessage {
+  data?: any;
+  value?: any;
+  method?: VimeoCommand;
+  event?: keyof VimeoEventPayload;
+}

package/src/providers/vimeo/embed/misc.ts

@@ -0,0 +1,57 @@
+export interface VimeoVideoInfo {
+  title: string;
+  poster: string;
+  duration: number;
+  pro: boolean;
+}
+
+export interface VimeoChapter {
+  startTime: number;
+  title: string;
+  index: number;
+}
+
+export interface VimeoTextTrack {
+  label: string;
+  language: string;
+  kind: 'captions' | 'subtitles';
+  mode: 'showing' | 'disabled';
+}
+
+export interface VimeoTextCue {
+  html: string;
+  kind: 'captions' | 'subtitles';
+  label: string;
+  language: string;
+  text: string;
+}
+
+export interface VimeoQuality {
+  id: string;
+  label: string;
+  active: boolean;
+}
+
+export interface VimeoOEmbedData {
+  account_type: 'basic' | 'pro' | 'business';
+  author_name: string;
+  author_url: string;
+  description: string;
+  duration: number;
+  height: number;
+  html: string;
+  is_plus: '0' | '1';
+  provider_name: string;
+  provider_url: string;
+  thumbnail_height: number;
+  thumbnail_url_with_play_button: string;
+  thumbnail_url: string;
+  thumbnail_width: number;
+  title: string;
+  type: 'audio' | 'video';
+  upload_date: string;
+  uri: string;
+  version: string;
+  video_id: number;
+  width: number;
+}

package/src/providers/vimeo/embed/params.ts

@@ -0,0 +1,168 @@
+/**
+ * Vimeo Player Parameters.
+ *
+ * @see {@link https://developer.vimeo.com/player/sdk/embed}
+ */
+export interface VimeoParams {
+  /**
+   * The ID or the URL of the video on Vimeo. You must supply one of these values to identify the
+   * video.
+   *
+   * @default undefined
+   */
+  id?: string;
+
+  /**
+   * Whether to pause the current video when another Vimeo video on the same page starts to play.
+   * Set this value to false to permit simultaneous playback of all the videos on the page.
+   *
+   * @default true
+   */
+  autopause?: boolean;
+
+  /**
+   * Whether to start playback of the video automatically. This feature might not work on all
+   * devices.
+   *
+   * @default false
+   */
+  autoplay?: boolean;
+
+  /**
+   * Whether the player is in background mode, which hides the playback controls, enables autoplay,
+   * and loops the video.
+   *
+   * @default false
+   */
+  background?: boolean;
+
+  /**
+   * Whether to display the video owner's name.
+   *
+   * @default true
+   */
+  byline?: boolean;
+
+  /**
+   * The hexadecimal color value of the playback controls. The embed settings of the video
+   * might override this value.
+   *
+   * @default '00ADEF'
+   */
+  color?: string;
+
+  /**
+   * This parameter will hide all elements in the player (play bar, sharing buttons, etc) for a
+   * chromeless experience. When using this parameter, the play/pause button will be hidden. To
+   * start playback for your viewers, you'll need to either enable autoplay, use keyboard controls,
+   * or implement our player SDK to start and control playback.
+   *
+   * Note: setting this parameter will not disable keyboard controls.
+   *
+   * @default true
+   */
+  controls?: boolean;
+
+  /**
+   * Whether to enable keyboard input to trigger player events. This setting doesn't affect tab
+   * control.
+   *
+   * @default true
+   */
+  keyboard?: boolean;
+
+  /**
+   * Hash for private videos.
+   */
+  h: string | null;
+
+  /**
+   * The height of the video in pixels.
+   *
+   * @default undefined
+   */
+  height?: number;
+
+  /**
+   * Whether to restart the video automatically after reaching the end.
+   *
+   * @default false
+   */
+  loop?: boolean;
+
+  /**
+   * The height of the video in pixels, where the video won't exceed its native height, no matter
+   * the value of this field.
+   *
+   * @default undefined
+   */
+  maxheight?: number;
+
+  /**
+   * The width of the video in pixels, where the video won't exceed its native width, no matter the
+   * value of this field.
+   *
+   * @default undefined
+   */
+  maxwidth?: number;
+
+  /**
+   * Whether the video is muted upon loading. The true value is required for the autoplay behavior
+   * in some browsers.
+   *
+   * @default false
+   */
+  muted?: boolean;
+
+  /**
+   * Whether the video plays inline on supported mobile devices. To force the device to play the
+   * video in fullscreen mode instead, set this value to false.
+   *
+   * @default true
+   */
+  playsinline?: boolean;
+
+  /**
+   * Whether to display the video owner's portrait.
+   *
+   * @default true
+   */
+  portrait?: boolean;
+
+  /**
+   * Whether the player displays speed controls in the preferences menu and enables the playback
+   * rate API.
+   *
+   * @default false
+   */
+  speed?: boolean;
+
+  /**
+   * Whether the player displays the title overlay.
+   *
+   * @default true
+   */
+  title?: boolean;
+
+  /**
+   * Whether the responsive player and transparent background are enabled.
+   *
+   * @default true
+   */
+  transparent?: boolean;
+
+  /**
+   * The width of the video in pixels.
+   *
+   * @default undefined
+   */
+  width?: number;
+
+  /**
+   * Setting this parameter to "true" will block the player from tracking any session data,
+   * including all cookies and analytics.
+   *
+   * @default false
+   */
+  dnt?: boolean;
+}

package/src/providers/vimeo/loader.ts

@@ -0,0 +1,61 @@
+import { isString } from 'maverick.js/std';
+
+import type { MediaContext } from '../../core/api/media-context';
+import type { Src } from '../../core/api/src-types';
+import type { MediaType } from '../../core/api/types';
+import { preconnect } from '../../utils/network';
+import type { MediaProviderLoader } from '../types';
+import type { VimeoProvider } from './provider';
+
+export class VimeoProviderLoader implements MediaProviderLoader<VimeoProvider> {
+  readonly name = 'vimeo';
+
+  target!: HTMLIFrameElement;
+
+  preconnect(): void {
+    const connections = [
+      'https://i.vimeocdn.com',
+      'https://f.vimeocdn.com',
+      'https://fresnel.vimeocdn.com',
+    ];
+
+    for (const url of connections) {
+      preconnect(url);
+    }
+  }
+
+  canPlay(src: Src): boolean {
+    return isString(src.src) && src.type === 'video/vimeo';
+  }
+
+  mediaType(): MediaType {
+    return 'video';
+  }
+
+  async load(ctx: MediaContext): Promise<VimeoProvider> {
+    if (__SERVER__) {
+      throw Error('[vidstack] can not load vimeo provider server-side');
+    }
+
+    if (__DEV__ && !this.target) {
+      throw Error(
+        '[vidstack] `<iframe>` element was not found - did you forget to include media provider?',
+      );
+    }
+
+    return new (await import('./provider')).VimeoProvider(this.target, ctx);
+  }
+
+  async loadPoster(src: Src, ctx: MediaContext, abort: AbortController): Promise<string | null> {
+    const { resolveVimeoVideoId, getVimeoVideoInfo } = await import('./utils');
+
+    if (!isString(src.src)) return null;
+
+    const { videoId, hash } = resolveVimeoVideoId(src.src);
+    if (videoId) {
+      return getVimeoVideoInfo(videoId, abort, hash).then((info) => (info ? info.poster : null));
+    }
+
+    return null;
+  }
+}