@hanifhan1f/vidstack-react 1.12.13 → 1.12.15

package/src/index.ts

@@ -1,181 +0,0 @@
-export * from 'vidstack/exports/core.ts';
-export * from 'vidstack/exports/events.ts';
-export * from 'vidstack/exports/foundation.ts';
-export * from 'vidstack/exports/maverick.ts';
-export * from 'vidstack/exports/providers.ts';
-export * from 'vidstack/exports/utils.ts';
-
-export {
-  DEFAULT_AUDIO_GAINS,
-  DEFAULT_PLAYBACK_RATES,
-  sliderState,
-  type AudioGainSliderState,
-  type GestureAction,
-  type MediaAnnouncerState,
-  type MediaAnnouncerTranslations,
-  type MediaAnnouncerWord,
-  type MediaProviderState,
-  type MenuPlacement,
-  type MenuPlacementAlign,
-  type MenuPlacementSide,
-  type PosterState,
-  type QualitySliderState,
-  type SliderCSSVars,
-  type SliderOrientation,
-  type SliderState,
-  type SliderVideoState,
-  type SpeedSliderState,
-  type ThumbnailState,
-  type TimeSliderState,
-  type TimeState,
-  type TooltipPlacement,
-  type TooltipPlacementAlign,
-  type TooltipPlacementSide,
-  type VolumeSliderState,
-} from 'vidstack/exports/components.ts';
-
-// Primitives
-export * from './components/primitives/instances';
-
-// Core
-export type { PlayerSrc } from './source';
-export { type MediaPlayerProps, MediaPlayer } from './components/player';
-export { type MediaAnnouncerProps, MediaAnnouncer } from './components/announcer';
-export { type MediaProviderProps, MediaProvider } from './components/provider';
-export { type IconProps, Icon, type IconComponent } from './icon';
-export { Track, type TrackProps } from './components/text-track';
-
-// Controls
-export * as Controls from './components/ui/controls';
-export type {
-  RootProps as ControlsProps,
-  GroupProps as ControlsGroupProps,
-} from './components/ui/controls';
-
-// Tooltip
-export * as Tooltip from './components/ui/tooltip';
-export type {
-  RootProps as TooltipProps,
-  TriggerProps as TooltipTriggerProps,
-  ContentProps as TooltipContentProps,
-} from './components/ui/tooltip';
-
-// Buttons
-export { type ToggleButtonProps, ToggleButton } from './components/ui/buttons/toggle-button';
-export { type AirPlayButtonProps, AirPlayButton } from './components/ui/buttons/airplay-button';
-export {
-  type GoogleCastButtonProps,
-  GoogleCastButton,
-} from './components/ui/buttons/google-cast-button';
-export { type PlayButtonProps, PlayButton } from './components/ui/buttons/play-button';
-export { type CaptionButtonProps, CaptionButton } from './components/ui/buttons/caption-button';
-export {
-  type FullscreenButtonProps,
-  FullscreenButton,
-} from './components/ui/buttons/fullscreen-button';
-export { type MuteButtonProps, MuteButton } from './components/ui/buttons/mute-button';
-export { type PIPButtonProps, PIPButton } from './components/ui/buttons/pip-button';
-export { type SeekButtonProps, SeekButton } from './components/ui/buttons/seek-button';
-export { type LiveButtonProps, LiveButton } from './components/ui/buttons/live-button';
-
-// Slider
-export * as Slider from './components/ui/sliders/slider';
-export * as VolumeSlider from './components/ui/sliders/volume-slider';
-export * as QualitySlider from './components/ui/sliders/quality-slider';
-export * as AudioGainSlider from './components/ui/sliders/audio-gain-slider';
-export * as SpeedSlider from './components/ui/sliders/speed-slider';
-export * as TimeSlider from './components/ui/sliders/time-slider';
-export type {
-  RootProps as SliderProps,
-  ValueProps as SliderValueProps,
-  PreviewProps as SliderPreviewProps,
-  StepsProps as SliderStepsProps,
-} from './components/ui/sliders/slider';
-export type { RootProps as VolumeSliderProps } from './components/ui/sliders/volume-slider';
-export type { RootProps as AudioGainSliderProps } from './components/ui/sliders/audio-gain-slider';
-export type { RootProps as SpeedSliderProps } from './components/ui/sliders/speed-slider';
-export type { RootProps as QualitySliderProps } from './components/ui/sliders/quality-slider';
-export type {
-  RootProps as TimeSliderProps,
-  ChaptersProps as SliderChapterProps,
-  ChapterTitleProps as SliderChapterTitleProps,
-  ThumbnailProps as SliderThumbnailProps,
-  ThumbnailImgProps as SliderThumbnailImgProps,
-  VideoProps as SliderVideoProps,
-} from './components/ui/sliders/time-slider';
-
-// Radio
-export * as RadioGroup from './components/ui/radio-group';
-export type {
-  RootProps as RadioGroupProps,
-  ItemProps as RadioProps,
-} from './components/ui/radio-group';
-
-// Menu
-export * as Menu from './components/ui/menu';
-export type {
-  RootProps as MenuProps,
-  ButtonProps as MenuButtonProps,
-  PortalProps as MenuPortalProps,
-  ItemsProps as MenuItemsProps,
-  ContentProps as MenuContentProps,
-  ItemProps as MenuItemProps,
-  RadioGroupProps as MenuRadioGroupProps,
-  RadioProps as MenuRadioProps,
-} from './components/ui/menu';
-
-// Display
-export { Title, type TitleProps } from './components/ui/title';
-export { ChapterTitle, type ChapterTitleProps } from './components/ui/chapter-title';
-export { type GestureProps, Gesture } from './components/ui/gesture';
-export { Captions, type CaptionsProps } from './components/ui/captions';
-export { type PosterProps, Poster } from './components/ui/poster';
-export { type TimeProps, Time } from './components/ui/time';
-
-// Caption
-export * as Caption from './components/ui/caption';
-export type {
-  RootProps as CaptionProps,
-  TextProps as CaptionTextProps,
-} from './components/ui/caption';
-
-// Thumbnail
-export * as Thumbnail from './components/ui/thumbnail';
-export type {
-  RootProps as ThumbnailProps,
-  ImgProps as ThumbnailImgProps,
-} from './components/ui/thumbnail';
-
-// Spinner
-export * as Spinner from './components/ui/spinner';
-export type {
-  RootProps as SpinnerProps,
-  TrackProps as SpinnerTrackProps,
-  TrackFillProps as SpinnerTrackFillProps,
-} from './components/ui/spinner';
-
-// Hooks
-export * from './hooks/use-state';
-export * from './hooks/use-media-context';
-export * from './hooks/use-media-player';
-export * from './hooks/use-media-provider';
-export * from './hooks/use-media-remote';
-export * from './hooks/use-media-state';
-export * from './hooks/use-thumbnails';
-export * from './hooks/use-slider-state';
-export * from './hooks/use-slider-preview';
-export * from './hooks/use-text-cues';
-export * from './hooks/use-active-text-cues';
-export * from './hooks/use-active-text-track';
-export * from './hooks/use-chapter-title';
-export * from './hooks/create-text-track';
-export * from './hooks/options/use-audio-gain-options';
-export * from './hooks/options/use-audio-options';
-export * from './hooks/options/use-caption-options';
-export * from './hooks/options/use-chapter-options';
-export * from './hooks/options/use-video-quality-options';
-export * from './hooks/options/use-playback-rate-options';
-
-// Layouts
-export type { DefaultLayoutProps } from './components/layouts/default';
-export type { PlyrLayoutProps } from './components/layouts/plyr';

package/src/providers/remotion/index.ts

@@ -1,10 +0,0 @@
-export { type RemotionThumbnailProps, default as RemotionThumbnail } from './ui/thumbnail';
-export { type RemotionPosterProps, default as RemotionPoster } from './ui/poster';
-export {
-  type RemotionSliderThumbnailProps,
-  default as RemotionSliderThumbnail,
-} from './ui/slider-thumbnail';
-export { RemotionProviderLoader } from './loader';
-export type { RemotionProvider } from './provider';
-export type * from './types';
-export { isRemotionProvider, isRemotionSrc as isRemotionSource, isRemotionSrc } from './type-check';

package/src/providers/remotion/layout-engine.ts

@@ -1,123 +0,0 @@
-import { animationFrameThrottle, createDisposalBin } from 'maverick.js/std';
-
-import type { RemotionSrc } from './types';
-
-export class RemotionLayoutEngine {
-  #src: RemotionSrc | null = null;
-  #viewport: HTMLElement | null = null;
-  #canvas: HTMLElement | null = null;
-  #container: HTMLElement | null = null;
-  #disposal = createDisposalBin();
-
-  constructor() {}
-
-  setSrc(src: RemotionSrc | null) {
-    this.#src = src;
-    this.setContainer(this.#container);
-  }
-
-  setContainer(container: HTMLElement | null) {
-    if (__SERVER__) return;
-
-    this.#disposal.empty();
-
-    this.#container = container;
-    this.#canvas = container?.parentElement ?? null;
-    this.#viewport = this.#canvas?.parentElement ?? null;
-
-    if (this.#src && this.#viewport) {
-      const onResize = animationFrameThrottle(this.#onResize.bind(this));
-
-      onResize();
-      const observer = new ResizeObserver(onResize);
-      observer.observe(this.#viewport);
-
-      this.#disposal.add(() => observer.disconnect());
-    }
-  }
-
-  destroy() {
-    this.#disposal.empty();
-  }
-
-  #onResize(entries?: ResizeObserverEntry[]) {
-    if (!this.#viewport || !this.#src) return;
-
-    const rect = this.#getRect(this.#viewport, entries?.[0]),
-      scale = this.#calcScale(rect),
-      transform = this.#calcTransform(rect, scale);
-
-    Object.assign(this.#canvas!.style, {
-      width: this.#src.compositionWidth! * scale + 'px',
-      height: this.#src.compositionHeight! * scale + 'px',
-      display: 'flex',
-      flexDirection: 'column',
-      position: 'absolute',
-      left: transform.centerX,
-      top: transform.centerY,
-      overflow: 'hidden',
-    });
-
-    Object.assign(this.#container!.style, {
-      position: 'absolute',
-      width: this.#src.compositionWidth + 'px',
-      height: this.#src.compositionHeight + 'px',
-      display: 'flex',
-      transform: `scale(${scale})`,
-      marginLeft: transform.x,
-      marginTop: transform.y,
-      overflow: 'hidden',
-    });
-  }
-
-  #getRect(el: HTMLElement, entry?: ResizeObserverEntry): LayoutRect {
-    const rect = el.getBoundingClientRect();
-    if (!entry) return rect;
-
-    const { contentRect, target } = entry,
-      newSize = target.getClientRects();
-
-    if (!newSize?.[0]) return rect;
-
-    const scale = contentRect.width === 0 ? 1 : newSize[0].width / contentRect.width,
-      width = newSize[0].width * (1 / scale),
-      height = newSize[0].height * (1 / scale);
-
-    return {
-      width,
-      height,
-      top: newSize[0].y,
-      left: newSize[0].x,
-    };
-  }
-
-  #calcScale(rect: LayoutRect) {
-    if (!this.#src) return 0;
-
-    const heightRatio = rect.height / this.#src.compositionHeight!,
-      widthRatio = rect.width / this.#src.compositionWidth!;
-
-    return Math.min(heightRatio || 0, widthRatio || 0);
-  }
-
-  #calcTransform(rect: LayoutRect, scale: number) {
-    if (!this.#src) return {};
-
-    const correction = 0 - (1 - scale) / 2,
-      x = correction * this.#src.compositionWidth!,
-      y = correction * this.#src.compositionHeight!,
-      width = this.#src.compositionWidth! * scale,
-      height = this.#src.compositionHeight! * scale,
-      centerX = rect.width / 2 - width / 2,
-      centerY = rect.height / 2 - height / 2;
-
-    return { x, y, centerX, centerY };
-  }
-}
-
-interface LayoutRect {
-  width: number;
-  height: number;
-  top: number;
-  left: number;
-}

package/src/providers/remotion/loader.ts

@@ -1,35 +0,0 @@
-import * as React from 'react';
-
-import type {
-  MediaContext,
-  MediaProviderAdapter,
-  MediaProviderLoader,
-  MediaType,
-  Src,
-} from 'vidstack';
-
-import * as UI from '../../components/layouts/remotion-ui';
-
-export class RemotionProviderLoader implements MediaProviderLoader {
-  readonly name = 'remotion';
-
-  target!: HTMLElement;
-
-  constructor() {
-    UI.RemotionThumbnail.set(React.lazy(() => import('./ui/thumbnail')));
-    UI.RemotionSliderThumbnail.set(React.lazy(() => import('./ui/slider-thumbnail')));
-    UI.RemotionPoster.set(React.lazy(() => import('./ui/poster')));
-  }
-
-  canPlay(src: Src): boolean {
-    return src.type === 'video/remotion';
-  }
-
-  mediaType(): MediaType {
-    return 'video';
-  }
-
-  async load(ctx: MediaContext): Promise<MediaProviderAdapter> {
-    return new (await import('./provider')).RemotionProvider(this.target, ctx);
-  }
-}

package/src/providers/remotion/playback-engine.ts

@@ -1,142 +0,0 @@
-import { createDisposalBin, listenEvent } from 'maverick.js/std';
-
-import type { RemotionSrc } from './types';
-
-export class RemotionPlaybackEngine {
-  #src: RemotionSrc;
-  #onFrameChange: (frame: number) => void;
-  #onEnd: () => void;
-  #disposal = createDisposalBin();
-  #frame = 0;
-  #framesAdvanced = 0;
-  #playbackRate = 1;
-  #playing = false;
-  #rafId = -1;
-  #timerId = -1;
-  #startedAt = 0;
-  #isRunningInBackground = false;
-
-  get frame() {
-    return this.#frame;
-  }
-
-  set frame(frame) {
-    this.#frame = frame;
-    this.#onFrameChange(frame);
-  }
-
-  constructor(src: RemotionSrc, onFrameChange: (frame: number) => void, onEnd: () => void) {
-    this.#src = src;
-    this.#onFrameChange = onFrameChange;
-    this.#onEnd = onEnd;
-    this.#frame = src.initialFrame ?? 0;
-    this.#disposal.add(
-      listenEvent(document, 'visibilitychange' as any, this.#onVisibilityChange.bind(this)),
-    );
-  }
-
-  play() {
-    this.#framesAdvanced = 0;
-    this.#playing = true;
-    this.#startedAt = performance.now();
-    this.#tick();
-  }
-
-  stop() {
-    this.#playing = false;
-
-    if (this.#rafId >= 0) {
-      cancelAnimationFrame(this.#rafId);
-      this.#rafId = -1;
-    }
-
-    if (this.#timerId >= 0) {
-      clearTimeout(this.#timerId);
-      this.#timerId = -1;
-    }
-  }
-
-  setPlaybackRate(rate: number) {
-    this.#playbackRate = rate;
-  }
-
-  destroy() {
-    this.#disposal.empty();
-    this.stop();
-  }
-
-  #update() {
-    const { nextFrame, framesToAdvance, ended } = this.#calculateNextFrame();
-    this.#framesAdvanced += framesToAdvance;
-
-    if (nextFrame !== this.#frame) {
-      this.#onFrameChange(nextFrame);
-      this.#frame = nextFrame;
-    }
-
-    if (ended) {
-      this.#frame = this.#src.outFrame!;
-      this.stop();
-      this.#onEnd();
-    }
-  }
-
-  #tick = () => {
-    this.#update();
-    if (this.#playing) {
-      this.#queueNextFrame(this.#tick);
-    }
-  };
-
-  #queueNextFrame(callback: () => void) {
-    if (this.#isRunningInBackground) {
-      this.#timerId = window.setTimeout(callback, 1000 / this.#src.fps!);
-    } else {
-      this.#rafId = requestAnimationFrame(callback);
-    }
-  }
-
-  #calculateNextFrame() {
-    const round = this.#playbackRate < 0 ? Math.ceil : Math.floor,
-      time = performance.now() - this.#startedAt,
-      framesToAdvance =
-        round((time * this.#playbackRate) / (1000 / this.#src.fps!)) - this.#framesAdvanced,
-      nextFrame = framesToAdvance + this.#frame,
-      isCurrentFrameOutOfBounds =
-        this.#frame > this.#src.outFrame! || this.#frame < this.#src.inFrame!,
-      isNextFrameOutOfBounds = nextFrame > this.#src.outFrame! || nextFrame < this.#src.inFrame!,
-      ended = isNextFrameOutOfBounds && !isCurrentFrameOutOfBounds;
-
-    if (this.#playbackRate > 0 && !ended) {
-      // Play forwards
-      if (isNextFrameOutOfBounds) {
-        return {
-          nextFrame: this.#src.inFrame!,
-          framesToAdvance,
-          ended,
-        };
-      }
-
-      return { nextFrame, framesToAdvance, ended };
-    }
-
-    // Reverse playback
-    if (isNextFrameOutOfBounds) {
-      return {
-        nextFrame: this.#src.outFrame!,
-        framesToAdvance,
-        ended,
-      };
-    }
-
-    return { nextFrame, framesToAdvance, ended };
-  }
-
-  #onVisibilityChange() {
-    this.#isRunningInBackground = document.visibilityState === 'hidden';
-    if (this.#playing) {
-      this.stop();
-      this.play();
-    }
-  }
-}