@hanifhan1f/vidstack-react 1.12.13

package/src/index.ts

@@ -0,0 +1,181 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,123 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,142 @@
+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();
+    }
+  }
+}