@hanifhan1f/vidstack-react 1.12.13 → 1.12.14

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

@@ -1,104 +0,0 @@
-import type {
-  FileDownloadInfo,
-  PlyrControl,
-  PlyrLayoutTranslations,
-  PlyrMarker,
-  ThumbnailSrc,
-} from 'vidstack';
-
-import type { PlyrLayoutIcons } from './icons';
-import type { PlyrLayoutSlots } from './slots';
-
-export const defaultPlyrLayoutProps: Omit<PlyrLayoutProps, 'icons' | 'slots' | 'posterFrame'> = {
-  clickToPlay: true,
-  clickToFullscreen: true,
-  controls: [
-    'play-large',
-    'play',
-    'progress',
-    'current-time',
-    'mute+volume',
-    'captions',
-    'settings',
-    'pip',
-    'airplay',
-    'fullscreen',
-  ],
-  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 {
-  /**
-   * The icons to be rendered and displayed inside the layout.
-   */
-  icons: PlyrLayoutIcons;
-  /**
-   * The frame of the video to use as the poster. This only works with Remotion sources at the
-   * moment.
-   */
-  posterFrame?: number;
-  /**
-   * 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 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)[];
-  /**
-   * Provide additional content to be inserted in specific positions.
-   */
-  slots?: PlyrLayoutSlots;
-}

package/src/components/layouts/plyr/slots.tsx

@@ -1,52 +0,0 @@
-import * as React from 'react';
-
-import { isUndefined, uppercaseFirstChar } from 'maverick.js/std';
-
-import { usePlyrLayoutContext } from './context';
-
-export type SlotPositions<Name extends string> =
-  | `before${Capitalize<Name>}`
-  | Name
-  | `after${Capitalize<Name>}`;
-
-export type Slots<Names extends string> = {
-  [slotName in SlotPositions<Names>]?: React.ReactNode;
-};
-
-export type PlyrLayoutSlotName =
-  | 'airPlayButton'
-  | 'captionsButton'
-  | 'currentTime'
-  | 'download'
-  | 'duration'
-  | 'fastForwardButton'
-  | 'fullscreenButton'
-  | 'liveButton'
-  | 'muteButton'
-  | 'pipButton'
-  | 'playButton'
-  | 'playLargeButton'
-  | 'poster'
-  | 'restartButton'
-  | 'rewindButton'
-  | 'rewindButton'
-  | 'settings'
-  | 'settingsButton'
-  | 'timeSlider'
-  | 'volumeSlider'
-  | 'settingsMenu';
-
-export interface PlyrLayoutSlots extends Slots<PlyrLayoutSlotName> {}
-
-export function slot(name: PlyrLayoutSlotName, defaultValue: React.ReactNode): React.ReactNode {
-  const { slots } = usePlyrLayoutContext(),
-    slot = slots?.[name],
-    capitalizedName = uppercaseFirstChar(name as string);
-  return (
-    <>
-      {slots?.[`before${capitalizedName}`]}
-      {isUndefined(slot) ? defaultValue : slot}
-      {slots?.[`after${capitalizedName}`]}
-    </>
-  );
-}

package/src/components/layouts/remotion-ui.ts

@@ -1,13 +0,0 @@
-import { signal } from 'maverick.js';
-
-export const RemotionThumbnail = /* @__PURE__ */ signal<React.LazyExoticComponent<
-  React.ComponentType<any>
-> | null>(null);
-
-export const RemotionSliderThumbnail = /* @__PURE__ */ signal<React.LazyExoticComponent<
-  React.ComponentType<any>
-> | null>(null);
-
-export const RemotionPoster = /* @__PURE__ */ signal<React.LazyExoticComponent<
-  React.ComponentType<any>
-> | null>(null);

package/src/components/layouts/utils.ts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-import { effect } from 'maverick.js';
-
-import { useMediaPlayer } from '../../hooks/use-media-player';
-
-export function useLayoutName(name: string) {
-  const player = useMediaPlayer();
-  React.useEffect(() => {
-    if (!player) return;
-    return effect(() => {
-      const el = player.$el;
-      el?.setAttribute('data-layout', name);
-      return () => el?.removeAttribute('data-layout');
-    });
-  }, [player]);
-}

package/src/components/player-callbacks.ts

@@ -1,67 +0,0 @@
-import type { InferComponentEvents } from 'maverick.js';
-import type { ReactEventCallbacks } from 'maverick.js/react';
-
-import type { MediaPlayerInstance } from './primitives/instances';
-
-type PlayerCallbacks = keyof ReactEventCallbacks<InferComponentEvents<MediaPlayerInstance>>;
-
-export const playerCallbacks: PlayerCallbacks[] = [
-  'onAbort',
-  'onAudioTrackChange',
-  'onAudioTracksChange',
-  'onAutoPlay',
-  'onAutoPlayChange',
-  'onAutoPlayFail',
-  'onCanLoad',
-  'onCanPlay',
-  'onCanPlayThrough',
-  'onControlsChange',
-  'onDestroy',
-  'onDurationChange',
-  'onEmptied',
-  'onEnd',
-  'onEnded',
-  'onError',
-  'onFindMediaPlayer',
-  'onFullscreenChange',
-  'onFullscreenError',
-  'onLiveChange',
-  'onLiveEdgeChange',
-  'onLoadedData',
-  'onLoadedMetadata',
-  'onLoadStart',
-  'onLoopChange',
-  'onOrientationChange',
-  'onPause',
-  'onPictureInPictureChange',
-  'onPictureInPictureError',
-  'onPlay',
-  'onPlayFail',
-  'onPlaying',
-  'onPlaysInlineChange',
-  'onPosterChange',
-  'onProgress',
-  'onProviderChange',
-  'onProviderLoaderChange',
-  'onProviderSetup',
-  'onQualitiesChange',
-  'onQualityChange',
-  'onRateChange',
-  'onReplay',
-  'onSeeked',
-  'onSeeking',
-  'onSourceChange',
-  'onSourceChange',
-  'onStalled',
-  'onStarted',
-  'onStreamTypeChange',
-  'onSuspend',
-  'onTextTrackChange',
-  'onTextTracksChange',
-  'onTimeUpdate',
-  'onTitleChange',
-  'onVdsLog',
-  'onVideoPresentationChange',
-  'onVolumeChange',
-  'onWaiting',
-];

package/src/components/player.tsx

@@ -1,67 +0,0 @@
-import * as React from 'react';
-
-import { createReactComponent, type ReactElementProps } from 'maverick.js/react';
-import type { MediaSrc } from 'vidstack';
-
-import type { PlayerSrc } from '../source';
-import { playerCallbacks } from './player-callbacks';
-import { MediaPlayerInstance } from './primitives/instances';
-import { Primitive } from './primitives/nodes';
-
-/* -------------------------------------------------------------------------------------------------
- * MediaPlayer
- * -----------------------------------------------------------------------------------------------*/
-
-const MediaPlayerBridge = createReactComponent(MediaPlayerInstance, {
-  events: playerCallbacks,
-  eventsRegex: /^onHls/,
-  domEventsRegex: /^onMedia/,
-});
-
-export interface MediaPlayerProps extends Omit<ReactElementProps<MediaPlayerInstance>, 'src'> {
-  /**
-   * The URL or object of the current media resource/s to be considered for playback.
-   *
-   * @see {@link https://vidstack.io/docs/player/core-concepts/loading#sources}
-   */
-  src?: PlayerSrc;
-  aspectRatio?: string;
-  asChild?: boolean;
-  children: React.ReactNode;
-  ref?: React.Ref<MediaPlayerInstance>;
-}
-
-/**
- * All media components exist inside the `<MediaPlayer>` component. This component's main
- * responsibilities are to manage media state updates, dispatch media events, handle media
- * requests, and expose media state through HTML attributes and CSS properties for styling
- * purposes.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/media/player}
- * @example
- * ```tsx
- * <MediaPlayer src="...">
- *   <MediaProvider />
- * </MediaPlayer>
- * ```
- */
-const MediaPlayer = React.forwardRef<MediaPlayerInstance, MediaPlayerProps>(
-  ({ aspectRatio, children, ...props }, forwardRef) => {
-    return (
-      <MediaPlayerBridge
-        {...props}
-        src={props.src as MediaSrc}
-        ref={forwardRef}
-        style={{
-          aspectRatio,
-          ...props.style,
-        }}
-      >
-        {(props) => <Primitive.div {...props}>{children}</Primitive.div>}
-      </MediaPlayerBridge>
-    );
-  },
-);
-
-MediaPlayer.displayName = 'MediaPlayer';
-export { MediaPlayer };

package/src/components/primitives/instances.ts

@@ -1,92 +0,0 @@
-import {
-  AirPlayButton,
-  AudioGainSlider,
-  CaptionButton,
-  Captions,
-  Controls,
-  ControlsGroup,
-  FullscreenButton,
-  Gesture,
-  GoogleCastButton,
-  LiveButton,
-  MediaAnnouncer,
-  MediaPlayer,
-  MediaProvider,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuItems,
-  MenuPortal,
-  MuteButton,
-  PIPButton,
-  PlayButton,
-  Poster,
-  QualitySlider,
-  Radio,
-  RadioGroup,
-  SeekButton,
-  Slider,
-  SliderChapters,
-  SliderPreview,
-  SliderThumbnail,
-  SliderValue,
-  SliderVideo,
-  SpeedSlider,
-  Thumbnail,
-  Time,
-  TimeSlider,
-  ToggleButton,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-  VolumeSlider,
-} from 'vidstack';
-
-// Core
-export class MediaPlayerInstance extends MediaPlayer {}
-export class MediaProviderInstance extends MediaProvider {}
-export class MediaAnnouncerInstance extends MediaAnnouncer {}
-// Controls
-export class ControlsInstance extends Controls {}
-export class ControlsGroupInstance extends ControlsGroup {}
-// Buttons
-export class ToggleButtonInstance extends ToggleButton {}
-export class CaptionButtonInstance extends CaptionButton {}
-export class FullscreenButtonInstance extends FullscreenButton {}
-export class LiveButtonInstance extends LiveButton {}
-export class MuteButtonInstance extends MuteButton {}
-export class PIPButtonInstance extends PIPButton {}
-export class PlayButtonInstance extends PlayButton {}
-export class AirPlayButtonInstance extends AirPlayButton {}
-export class GoogleCastButtonInstance extends GoogleCastButton {}
-export class SeekButtonInstance extends SeekButton {}
-// Tooltip
-export class TooltipInstance extends Tooltip {}
-export class TooltipTriggerInstance extends TooltipTrigger {}
-export class TooltipContentInstance extends TooltipContent {}
-// Sliders
-export class SliderInstance extends Slider {}
-export class TimeSliderInstance extends TimeSlider {}
-export class VolumeSliderInstance extends VolumeSlider {}
-export class AudioGainSliderInstance extends AudioGainSlider {}
-export class SpeedSliderInstance extends SpeedSlider {}
-export class QualitySliderInstance extends QualitySlider {}
-export class SliderThumbnailInstance extends SliderThumbnail {}
-export class SliderValueInstance extends SliderValue {}
-export class SliderVideoInstance extends SliderVideo {}
-export class SliderPreviewInstance extends SliderPreview {}
-export class SliderChaptersInstance extends SliderChapters {}
-// Menus
-export class MenuInstance extends Menu {}
-export class MenuButtonInstance extends MenuButton {}
-export class MenuItemsInstance extends MenuItems {}
-export class MenuItemInstance extends MenuItem {}
-export class MenuPortalInstance extends MenuPortal {}
-export class RadioGroupInstance extends RadioGroup {}
-export class RadioInstance extends Radio {}
-// Display
-export class CaptionsInstance extends Captions {}
-export class GestureInstance extends Gesture {}
-export class PosterInstance extends Poster {}
-export class ThumbnailInstance extends Thumbnail {}
-export class TimeInstance extends Time {}

package/src/components/primitives/nodes.tsx

@@ -1,58 +0,0 @@
-/* -------------------------------------------------------------------------------------------------
- * Credit: https://github.com/radix-ui/primitives/blob/main/packages/react/primitive/src/Primitive.tsx
- * -----------------------------------------------------------------------------------------------*/
-
-import * as React from 'react';
-
-import { Slot } from './slot';
-
-/* -------------------------------------------------------------------------------------------------
- * Primitive
- * -----------------------------------------------------------------------------------------------*/
-
-const NODES = ['button', 'div', 'span', 'img', 'video', 'audio'] as const;
-
-export const Primitive = NODES.reduce((primitives, node) => {
-  const Node = React.forwardRef((props: PrimitivePropsWithRef<typeof node>, forwardedRef: any) => {
-    const { asChild, ...primitiveProps } = props;
-    const Comp: any = asChild ? Slot : node;
-    return <Comp {...primitiveProps} ref={forwardedRef} />;
-  });
-
-  Node.displayName = `Primitive.${node}`;
-
-  return { ...primitives, [node]: Node };
-}, {} as Primitives);
-
-/* -------------------------------------------------------------------------------------------------
- * Types
- * -----------------------------------------------------------------------------------------------*/
-
-// Temporary while we await merge of this fix:
-// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396
-type PropsWithoutRef<P> = P extends any
-  ? 'ref' extends keyof P
-    ? Pick<P, Exclude<keyof P, 'ref'>>
-    : P
-  : P;
-
-export type ComponentPropsWithoutRef<T extends React.ElementType> = PropsWithoutRef<
-  React.ComponentProps<T>
->;
-
-type Primitives = { [E in (typeof NODES)[number]]: PrimitiveForwardRefComponent<E> };
-
-export type PrimitivePropsWithRef<E extends React.ElementType> = Omit<
-  React.ComponentProps<E>,
-  'style'
-> &
-  React.Attributes & {
-    asChild?: boolean;
-    style?:
-      | React.CSSProperties
-      | (React.CSSProperties & Record<`--${string}`, string | null | undefined>)
-      | undefined;
-  };
-
-interface PrimitiveForwardRefComponent<E extends React.ElementType>
-  extends React.ForwardRefExoticComponent<PrimitivePropsWithRef<E>> {}

package/src/components/primitives/slot.tsx

@@ -1,132 +0,0 @@
-/* -------------------------------------------------------------------------------------------------
- * Credit: https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx
- * -----------------------------------------------------------------------------------------------*/
-
-import * as React from 'react';
-
-import { composeRefs } from 'maverick.js/react';
-
-/* -------------------------------------------------------------------------------------------------
- * Slot
- * -----------------------------------------------------------------------------------------------*/
-
-interface SlotProps extends React.HTMLAttributes<HTMLElement> {
-  children?: React.ReactNode;
-}
-
-const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
-  const { children, ...slotProps } = props;
-  const childrenArray = React.Children.toArray(children);
-  const slottable = childrenArray.find(isSlottable);
-
-  if (slottable) {
-    // the new element to render is the one passed as a child of `Slottable`
-    const newElement = (slottable.props as { children: React.ReactNode }).children;
-
-    const newChildren = childrenArray.map((child) => {
-      if (child === slottable) {
-        // because the new element will be the one rendered, we are only interested
-        // in grabbing its children (`newElement.props.children`)
-        if (React.Children.count(newElement) > 1) return React.Children.only(null);
-        return React.isValidElement(newElement)
-          ? (newElement.props as { children: React.ReactNode }).children
-          : null;
-      } else {
-        return child;
-      }
-    });
-
-    return (
-      <SlotClone {...slotProps} ref={forwardedRef}>
-        {React.isValidElement(newElement)
-          ? React.cloneElement(newElement, undefined, newChildren)
-          : null}
-      </SlotClone>
-    );
-  }
-
-  return (
-    <SlotClone {...slotProps} ref={forwardedRef}>
-      {children}
-    </SlotClone>
-  );
-});
-
-Slot.displayName = 'Slot';
-
-/* -------------------------------------------------------------------------------------------------
- * SlotClone
- * -----------------------------------------------------------------------------------------------*/
-
-interface SlotCloneProps {
-  children: React.ReactNode;
-}
-
-const SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {
-  const { children, ...slotProps } = props;
-
-  if (React.isValidElement(children)) {
-    return React.cloneElement<any>(children, {
-      ...mergeProps(slotProps, children.props as any),
-      ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,
-    });
-  }
-
-  return React.Children.count(children) > 1 ? React.Children.only(null) : null;
-});
-
-SlotClone.displayName = 'SlotClone';
-
-/* -------------------------------------------------------------------------------------------------
- * Slottable
- * -----------------------------------------------------------------------------------------------*/
-
-const Slottable = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
-
-/* ---------------------------------------------------------------------------------------------- */
-
-type AnyProps = Record<string, any>;
-
-function isSlottable(child: React.ReactNode): child is React.ReactElement {
-  return React.isValidElement(child) && child.type === Slottable;
-}
-
-function mergeProps(slotProps: AnyProps, childProps: AnyProps) {
-  // all child props should override
-  const overrideProps = { ...childProps };
-
-  for (const propName in childProps) {
-    const slotPropValue = slotProps[propName];
-    const childPropValue = childProps[propName];
-
-    const isHandler = /^on[A-Z]/.test(propName);
-    if (isHandler) {
-      // if the handler exists on both, we compose them
-      if (slotPropValue && childPropValue) {
-        overrideProps[propName] = (...args: unknown[]) => {
-          childPropValue(...args);
-          slotPropValue(...args);
-        };
-      }
-      // but if it exists only on the slot, we use only this one
-      else if (slotPropValue) {
-        overrideProps[propName] = slotPropValue;
-      }
-    }
-    // if it's `style`, we merge them
-    else if (propName === 'style') {
-      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
-    } else if (propName === 'className') {
-      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ');
-    }
-  }
-
-  return { ...slotProps, ...overrideProps };
-}
-
-const Root = Slot;
-
-export { Slot, Slottable, Root };
-export type { SlotProps };