@hanifhan1f/vidstack 1.12.13 → 1.12.18

package/src/components/layouts/default/default-layout.ts

@@ -1,67 +0,0 @@
-import { Component, computed, prop, provideContext, signal } from 'maverick.js';
-import { isBoolean } from 'maverick.js/std';
-
-import { useMediaContext, type MediaContext } from '../../../core/api/media-context';
-import type { MediaPlayerQuery } from '../../../core/api/player-state';
-import { watchColorScheme } from '../../../utils/dom';
-import { defaultLayoutContext } from './context';
-import { defaultLayoutProps, type DefaultLayoutProps } from './props';
-
-export class DefaultLayout extends Component<DefaultLayoutProps> {
-  static props = defaultLayoutProps;
-
-  #media!: MediaContext;
-
-  #when = computed(() => {
-    const when = this.$props.when();
-    return this.#matches(when);
-  });
-
-  #smallWhen = computed(() => {
-    const when = this.$props.smallWhen();
-    return this.#matches(when);
-  });
-
-  @prop
-  get isMatch() {
-    return this.#when();
-  }
-
-  @prop
-  get isSmallLayout() {
-    return this.#smallWhen();
-  }
-
-  protected override onSetup(): void {
-    this.#media = useMediaContext();
-
-    this.setAttributes({
-      'data-match': this.#when,
-      'data-sm': () => (this.#smallWhen() ? '' : null),
-      'data-lg': () => (!this.#smallWhen() ? '' : null),
-      'data-size': () => (this.#smallWhen() ? 'sm' : 'lg'),
-      'data-no-scrub-gesture': this.$props.noScrubGesture,
-    });
-
-    const self = this;
-    provideContext(defaultLayoutContext, {
-      ...this.$props,
-      when: this.#when,
-      smallWhen: this.#smallWhen,
-      userPrefersAnnouncements: signal(true),
-      userPrefersKeyboardAnimations: signal(true),
-      menuPortal: signal<HTMLElement | null>(null),
-    });
-  }
-
-  protected override onAttach(el: HTMLElement): void {
-    watchColorScheme(el, this.$props.colorScheme);
-  }
-
-  #matches(query: 'never' | boolean | MediaPlayerQuery) {
-    return (
-      query !== 'never' &&
-      (isBoolean(query) ? query : computed(() => query(this.#media.player.state))())
-    );
-  }
-}

package/src/components/layouts/default/props.ts

@@ -1,143 +0,0 @@
-import type { MediaPlayerQuery } from '../../../core/api/player-state';
-import type { FileDownloadInfo } from '../../../utils/network';
-import type { ThumbnailSrc } from '../../ui/thumbnails/thumbnail-loader';
-import type { DefaultLayoutTranslations } from './translations';
-
-export const defaultLayoutProps: DefaultLayoutProps = {
-  colorScheme: 'system',
-  download: null,
-  customIcons: false,
-  disableTimeSlider: false,
-  menuContainer: null,
-  menuGroup: 'bottom',
-  noAudioGain: false,
-  noGestures: false,
-  noKeyboardAnimations: false,
-  noModal: false,
-  noScrubGesture: false,
-  playbackRates: { min: 0, max: 2, step: 0.25 },
-  audioGains: { min: 0, max: 300, step: 25 },
-  seekStep: 5,
-  sliderChaptersMinWidth: 325,
-  hideQualityBitrate: false,
-  episodes: null,
-  episodesTitle: 'Episodes',
-  smallWhen: false,
-  thumbnails: null,
-  translations: null,
-  when: false,
-};
-
-export interface DefaultLayoutEpisode {
-  title: string;
-  episodeTitle?: string;
-  overview?: string;
-  thumbnail?: string;
-  runtime?: number;
-  episodeNumber?: number;
-  seasonNumber?: number;
-}
-
-export interface DefaultLayoutProps {
-  /**
-   * Determines when the UI should be displayed.
-   */
-  when: boolean | MediaPlayerQuery;
-  /**
-   * Determines when the small (e.g., mobile) UI should be displayed.
-   */
-  smallWhen: 'never' | boolean | MediaPlayerQuery;
-  /**
-   * The thumbnails resource.
-   *
-   * @see {@link https://www.vidstack.io/docs/wc/player/core-concepts/loading#thumbnails}
-   */
-  thumbnails: ThumbnailSrc;
-  /**
-   * Whether light or dark color theme should be active. Defaults to user operating system
-   * preference.
-   *
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme}
-   */
-  colorScheme: 'light' | 'dark' | 'system' | 'default';
-  /**
-   * Sets the download URL and filename for the download button.
-   */
-  download: FileDownloadInfo;
-  /**
-   * Whether the default icons should _not_ be loaded. Set this to `true` when providing your own
-   * icons.
-   */
-  customIcons: boolean;
-  /**
-   * Translation map from english to your desired language for words used throughout the layout.
-   */
-  translations: Partial<DefaultLayoutTranslations> | null;
-  /**
-   * A document query selector string or `HTMLElement` to mount the menu container inside. Defaults
-   * to `document.body` when set to `null`.
-   */
-  menuContainer: string | HTMLElement | null;
-  /**
-   * Specifies whether menu buttons should be placed in the top or bottom controls group. This
-   * only applies to the large video layout.
-   */
-  menuGroup: 'top' | 'bottom';
-  /**
-   * Disable audio boost slider in the settings menu.
-   */
-  noAudioGain: boolean;
-  /**
-   * Whether modal menus should be disabled when the small layout is active. A modal menu is
-   * a floating panel that floats up from the bottom of the screen (outside of the player). It's
-   * enabled by default as it provides a better user experience for touch devices.
-   */
-  noModal: boolean;
-  /**
-   * Whether to disable scrubbing by touch swiping left or right on the player canvas.
-   */
-  noScrubGesture: boolean;
-  /**
-   * The minimum width of the slider to start displaying slider chapters when available.
-   */
-  sliderChaptersMinWidth: number;
-  /**
-   * Whether the time slider should be disabled.
-   */
-  disableTimeSlider: boolean;
-  /**
-   * Whether all gestures such as press to play or seek should not be active.
-   */
-  noGestures: boolean;
-  /**
-   * Whether keyboard actions should not be displayed.
-   */
-  noKeyboardAnimations: boolean;
-  /**
-   * Whether the bitrate should be hidden in the settings quality hint.
-   *
-   * @defaultValue false
-   */
-  hideQualityBitrate: boolean;
-  /**
-   * Episode list shown in the default video layout panel.
-   */
-  episodes: DefaultLayoutEpisode[] | null;
-  /**
-   * Title shown at the top of the episodes panel.
-   */
-  episodesTitle: string;
-  /**
-   * The playback rate options to be displayed in the settings menu.
-   */
-  playbackRates: number[] | { min: number; max: number; step: number };
-  /**
-   * The audio gain options to be displayed in the settings menu.
-   */
-  audioGains: number[] | { min: number; max: number; step: number };
-  /**
-   * The number of seconds to seek forward or backward when pressing the seek button or using
-   * keyboard shortcuts.
-   */
-  seekStep: number;
-}

package/src/components/layouts/default/translations.ts

@@ -1,70 +0,0 @@
-import type { ReadSignal } from 'maverick.js';
-
-export type DefaultLayoutWord =
-  | 'Announcements'
-  | 'Accessibility'
-  | 'AirPlay'
-  | 'Audio'
-  | 'Auto'
-  | 'Boost'
-  | 'Captions'
-  | 'Caption Styles'
-  | 'Captions look like this'
-  | 'Chapters'
-  | 'Closed-Captions Off'
-  | 'Closed-Captions On'
-  | 'Connected'
-  | 'Continue'
-  | 'Connecting'
-  | 'Default'
-  | 'Disabled'
-  | 'Disconnected'
-  | 'Display Background'
-  | 'Download'
-  | 'Enter Fullscreen'
-  | 'Enter PiP'
-  | 'Exit Fullscreen'
-  | 'Exit PiP'
-  | 'Font'
-  | 'Family'
-  | 'Fullscreen'
-  | 'Google Cast'
-  | 'Keyboard Animations'
-  | 'LIVE'
-  | 'Loop'
-  | 'Mute'
-  | 'Normal'
-  | 'Off'
-  | 'Pause'
-  | 'Play'
-  | 'Playback'
-  | 'PiP'
-  | 'Quality'
-  | 'Replay'
-  | 'Reset'
-  | 'Seek Backward'
-  | 'Seek Forward'
-  | 'Seek'
-  | 'Settings'
-  | 'Skip To Live'
-  | 'Speed'
-  | 'Size'
-  | 'Color'
-  | 'Opacity'
-  | 'Shadow'
-  | 'Text'
-  | 'Text Background'
-  | 'Track'
-  | 'Unmute'
-  | 'Volume';
-
-export type DefaultLayoutTranslations = {
-  [word in DefaultLayoutWord]: string;
-};
-
-export function i18n(
-  translations: ReadSignal<Partial<DefaultLayoutTranslations> | null>,
-  word: string,
-) {
-  return translations()?.[word] ?? word;
-}

package/src/components/layouts/default/video-layout.ts

@@ -1,20 +0,0 @@
-import { DefaultLayout } from './default-layout';
-import type { DefaultLayoutProps } from './props';
-
-/**
- * The video layout is our production-ready UI that's displayed when the media view type is set to
- * 'video'. It includes support for picture-in-picture, fullscreen, slider chapters, slider
- * previews, captions, audio/quality settings, live streams, and much more out of the box.
- *
- * @attr data-match - Whether this layout is being used (query match).
- * @attr data-sm - The small layout is active
- * @attr data-lg - The large layout is active.
- * @attr data-size - The active layout size.
- */
-export class DefaultVideoLayout extends DefaultLayout {
-  static override props: DefaultLayoutProps = {
-    ...super.props,
-    when: ({ viewType }) => viewType === 'video',
-    smallWhen: ({ width, height }) => width < 576 || height < 380,
-  };
-}

package/src/components/layouts/plyr/context.ts

@@ -1,13 +0,0 @@
-import { createContext, useContext, type ReadSignalRecord, type WriteSignal } from 'maverick.js';
-
-import type { PlyrLayoutProps } from './props';
-
-export interface PlyrLayoutContext extends ReadSignalRecord<PlyrLayoutProps> {
-  previewTime: WriteSignal<number>;
-}
-
-export const plyrLayoutContext = createContext<PlyrLayoutContext>();
-
-export function usePlyrLayoutContext() {
-  return useContext(plyrLayoutContext);
-}

package/src/components/layouts/plyr/plyr-layout.ts

@@ -1,90 +0,0 @@
-import { Component, effect, provideContext, signal } from 'maverick.js';
-import { createDisposalBin } from 'maverick.js/std';
-
-import { useMediaContext, type MediaContext } from '../../../core/api/media-context';
-import { plyrLayoutContext } from './context';
-import { plyrLayoutProps, type PlyrLayoutProps } from './props';
-
-export class PlyrLayout extends Component<PlyrLayoutProps> {
-  static props = plyrLayoutProps;
-
-  #media!: MediaContext;
-
-  protected override onSetup(): void {
-    this.#media = useMediaContext();
-
-    provideContext(plyrLayoutContext, {
-      ...this.$props,
-      previewTime: signal(0),
-    });
-  }
-}
-
-export function usePlyrLayoutClasses(el: HTMLElement, media: MediaContext) {
-  const {
-    canAirPlay,
-    canFullscreen,
-    canPictureInPicture,
-    controlsHidden,
-    currentTime,
-    fullscreen,
-    hasCaptions,
-    isAirPlayConnected,
-    paused,
-    pictureInPicture,
-    playing,
-    pointer,
-    poster,
-    textTrack,
-    viewType,
-    waiting,
-  } = media.$state;
-
-  el.classList.add('plyr');
-  el.classList.add('plyr--full-ui');
-
-  const classes = {
-    'plyr--airplay-active': isAirPlayConnected,
-    'plyr--airplay-supported': canAirPlay,
-    'plyr--fullscreen-active': fullscreen,
-    'plyr--fullscreen-enabled': canFullscreen,
-    'plyr--hide-controls': controlsHidden,
-    'plyr--is-touch': () => pointer() === 'coarse',
-    'plyr--loading': waiting,
-    'plyr--paused': paused,
-    'plyr--pip-active': pictureInPicture,
-    'plyr--pip-enabled': canPictureInPicture,
-    'plyr--playing': playing,
-    'plyr__poster-enabled': poster,
-    'plyr--stopped': () => paused() && currentTime() === 0,
-    'plyr--captions-active': textTrack,
-    'plyr--captions-enabled': hasCaptions,
-  };
-
-  const disposal = createDisposalBin();
-
-  for (const token of Object.keys(classes)) {
-    disposal.add(effect(() => void el.classList.toggle(token, !!classes[token]())));
-  }
-
-  disposal.add(
-    effect(() => {
-      const token = `plyr--${viewType()}`;
-      el.classList.add(token);
-      return () => el.classList.remove(token);
-    }),
-    effect(() => {
-      const { $provider } = media,
-        type = $provider()?.type,
-        token = `plyr--${isHTMLProvider(type) ? 'html5' : type}`;
-      el.classList.toggle(token, !!type);
-      return () => el.classList.remove(token);
-    }),
-  );
-
-  return () => disposal.empty();
-}
-
-function isHTMLProvider(type: string | undefined) {
-  return type === 'audio' || type === 'video';
-}

package/src/components/layouts/plyr/props.ts

@@ -1,114 +0,0 @@
-import type { FileDownloadInfo } from '../../../utils/network';
-import type { ThumbnailSrc } from '../../ui/thumbnails/thumbnail-loader';
-import type { PlyrLayoutTranslations } from './translations';
-
-export const plyrLayoutProps: PlyrLayoutProps = {
-  clickToPlay: true,
-  clickToFullscreen: true,
-  controls: [
-    'play-large',
-    'play',
-    'progress',
-    'current-time',
-    'mute+volume',
-    'captions',
-    'settings',
-    'pip',
-    'airplay',
-    'fullscreen',
-  ],
-  customIcons: false,
-  displayDuration: false,
-  download: null,
-  markers: null,
-  invertTime: true,
-  thumbnails: null,
-  toggleTime: true,
-  translations: null,
-  seekTime: 10,
-  speed: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4],
-};
-
-export interface PlyrLayoutProps {
-  /**
-   * Press the video container to toggle play/pause.
-   */
-  clickToPlay: boolean;
-  /**
-   * Double-press the video container to toggle fullscreen.
-   */
-  clickToFullscreen: boolean;
-  /**
-   * The controls to be included in the layout and their order specified by the position in the
-   * array.
-   */
-  controls: PlyrControl[];
-  /**
-   * Whether the default icons should _not_ be loaded. Set this to `true` when providing your own
-   * icons.
-   */
-  customIcons: boolean;
-  /**
-   * Whether the duration should be displayed. This is ignored if `toggleTime` is `true`.
-   */
-  displayDuration: boolean;
-  /**
-   * Sets the download URL and filename for the download button. The download button must be
-   * included in the `controls` prop for this to take effect.
-   */
-  download: FileDownloadInfo;
-  /**
-   * Points on the time slider which should be visually marked for the user.
-   */
-  markers: PlyrMarker[] | null;
-  /**
-   * Display the current time as a countdown rather than an incremental counter.
-   */
-  invertTime: boolean;
-  /**
-   * The thumbnails resource.
-   *
-   * @see {@link https://www.vidstack.io/docs/wc/player/core-concepts/loading#thumbnails}
-   */
-  thumbnails: ThumbnailSrc;
-  /**
-   * Allow users to press to toggle the inverted time.
-   */
-  toggleTime: boolean;
-  /**
-   * Translation map from english to your desired language for words used throughout the layout.
-   */
-  translations: Partial<PlyrLayoutTranslations> | null;
-  /**
-   * The time, in seconds, to seek when a user hits fast forward or rewind.
-   */
-  seekTime: number;
-  /**
-   * The speed options to display in the UI.
-   */
-  speed: (string | number)[];
-}
-
-export type PlyrControl =
-  | 'airplay'
-  | 'captions'
-  | 'current-time'
-  | 'download'
-  | 'duration'
-  | 'fast-forward'
-  | 'fullscreen'
-  | 'mute'
-  | 'mute+volume'
-  | 'pip'
-  | 'play-large'
-  | 'play'
-  | 'progress'
-  | 'restart'
-  | 'rewind'
-  | 'settings'
-  | 'volume';
-
-export interface PlyrMarker {
-  time: number;
-  label: string;
-}

package/src/components/layouts/plyr/translations.ts

@@ -1,53 +0,0 @@
-import type { ReadSignal } from 'maverick.js';
-
-export type PlyrLayoutWord =
-  | 'Ad'
-  | 'All'
-  | 'AirPlay'
-  | 'Audio'
-  | 'Auto'
-  | 'Buffered'
-  | 'Captions'
-  | 'Current time'
-  | 'Default'
-  | 'Disable captions'
-  | 'Disabled'
-  | 'Download'
-  | 'Duration'
-  | 'Enable captions'
-  | 'Enabled'
-  | 'End'
-  | 'Enter Fullscreen'
-  | 'Exit Fullscreen'
-  | 'Forward'
-  | 'Go back to previous menu'
-  | 'LIVE'
-  | 'Loop'
-  | 'Mute'
-  | 'Normal'
-  | 'Pause'
-  | 'Enter PiP'
-  | 'Exit PiP'
-  | 'Play'
-  | 'Played'
-  | 'Quality'
-  | 'Reset'
-  | 'Restart'
-  | 'Rewind'
-  | 'Seek'
-  | 'Settings'
-  | 'Speed'
-  | 'Start'
-  | 'Unmute'
-  | 'Volume';
-
-export type PlyrLayoutTranslations = {
-  [word in PlyrLayoutWord]: string;
-};
-
-export function i18n(
-  translations: ReadSignal<Partial<PlyrLayoutTranslations> | null>,
-  word: string,
-) {
-  return translations()?.[word] ?? word;
-}