@videojs/react 0.1.0-preview.2

package/dist/index.d.ts

@@ -0,0 +1,341 @@
+import { a as useMediaDispatch, c as useMediaStore, i as MediaProvider, l as MediaContext, n as MediaStateOwner, o as useMediaRef, r as MediaStore, s as useMediaSelector, t as MediaState } from "./index-BNR1awZq.js";
+import { t as FrostedSkin } from "./FrostedSkin-t8edr5LV.js";
+import { t as MinimalSkin } from "./MinimalSkin-DzHkJgW-.js";
+import React$1, { CSSProperties, DetailedHTMLProps, ElementType, FC, HTMLProps, MutableRefObject, PropsWithChildren, ReactElement, ReactNode, Ref, RefCallback, VideoHTMLAttributes } from "react";
+import { Placement } from "@floating-ui/react";
+import { TimeSlider as TimeSlider$1, VolumeSlider as VolumeSlider$1 } from "@videojs/core";
+
+//#region src/utils/component-factory.d.ts
+
+type RenderFn<TProps = any, TState = any> = (props: TProps, state: TState) => ReactElement;
+/**
+* Type helper to infer the component type from the factory
+*/
+type ConnectedComponent<TProps extends Record<string, any>, TRenderFn extends RenderFn<any, any>> = React.ForwardRefExoticComponent<React.PropsWithoutRef<TProps & {
+  render?: TRenderFn;
+}> & React.RefAttributes<HTMLElement>>;
+//#endregion
+//#region src/components/CurrentTimeDisplay.d.ts
+declare function useCurrentTimeDisplayState(_props: any): {
+  currentTime: number;
+  duration: number;
+};
+type CurrentTimeDisplayState = ReturnType<typeof useCurrentTimeDisplayState>;
+interface CurrentTimeDisplayProps extends React.ComponentProps<"span"> {
+  showRemaining?: boolean;
+}
+declare function renderCurrentTimeDisplay(props: CurrentTimeDisplayProps, state: CurrentTimeDisplayState): JSX.Element;
+declare const CurrentTimeDisplay: ConnectedComponent<CurrentTimeDisplayProps, typeof renderCurrentTimeDisplay>;
+//#endregion
+//#region src/components/DurationDisplay.d.ts
+declare function useDurationDisplayState(_props: any): {
+  duration: number;
+};
+type useDurationDisplayState = typeof useDurationDisplayState;
+type DurationDisplayState = ReturnType<useDurationDisplayState>;
+declare function useDurationDisplayProps(props: PropsWithChildren): PropsWithChildren<Record<string, unknown>>;
+type useDurationDisplayProps = typeof useDurationDisplayProps;
+type DurationDisplayProps = ReturnType<useDurationDisplayProps>;
+declare function renderDurationDisplay(props: DurationDisplayProps, state: DurationDisplayState): JSX.Element;
+type renderDurationDisplay = typeof renderDurationDisplay;
+declare const DurationDisplay: ConnectedComponent<DurationDisplayProps, typeof renderDurationDisplay>;
+//#endregion
+//#region src/components/FullscreenButton.d.ts
+declare function useFullscreenButtonState(_props: any): {
+  fullscreen: boolean;
+  requestEnterFullscreen: () => void;
+  requestExitFullscreen: () => void;
+};
+type FullscreenButtonState = ReturnType<typeof useFullscreenButtonState>;
+declare function getFullscreenButtonProps(props: PropsWithChildren, state: FullscreenButtonState): PropsWithChildren<Record<string, unknown>>;
+type FullscreenButtonProps = ReturnType<typeof getFullscreenButtonProps>;
+declare function renderFullscreenButton(props: FullscreenButtonProps, state: FullscreenButtonState): JSX.Element;
+declare const FullscreenButton: ConnectedComponent<FullscreenButtonProps, typeof renderFullscreenButton>;
+//#endregion
+//#region src/components/MediaContainer.d.ts
+/**
+* Hook to associate a React element as the fullscreen container for the media store.
+* This is equivalent to Media Chrome's useMediaFullscreenRef but for VJS-10.
+*
+* The ref callback will register the element as the container state owner
+* in the media store, enabling fullscreen functionality.
+*
+* @example
+* import { useMediaContainerRef } from '@videojs/react';
+*
+* const PlayerContainer = ({ children }) => {
+*   const containerRef = useMediaContainerRef();
+*   return <div ref={containerRef}>{children}</div>;
+* };
+*/
+declare function useMediaContainerRef(): RefCallback<HTMLElement | null>;
+/**
+* MediaContainer component that automatically registers itself as the fullscreen container.
+* This provides a simple wrapper component for fullscreen functionality.
+*
+* @example
+* import { MediaContainer } from '@videojs/react';
+*
+* const MyPlayer = () => (
+*   <MediaContainer>
+*     <video src="video.mp4" />
+*     <div>Controls here</div>
+*   </MediaContainer>
+* );
+*/
+declare const MediaContainer: FC<PropsWithChildren<HTMLProps<HTMLDivElement> & {
+  portalId?: string;
+}>>;
+//#endregion
+//#region src/components/MuteButton.d.ts
+declare function useMuteButtonState(_props: any): {
+  volumeLevel: string;
+  muted: boolean;
+  requestMute: () => void;
+  requestUnmute: () => void;
+};
+type MuteButtonState = ReturnType<typeof useMuteButtonState>;
+declare function getMuteButtonProps(props: PropsWithChildren, state: MuteButtonState): PropsWithChildren<Record<string, unknown>>;
+type MuteButtonProps = ReturnType<typeof getMuteButtonProps>;
+declare function renderMuteButton(props: MuteButtonProps, state: MuteButtonState): JSX.Element;
+declare const MuteButton: ConnectedComponent<MuteButtonProps, typeof renderMuteButton>;
+//#endregion
+//#region src/components/PlayButton.d.ts
+declare function usePlayButtonState(_props: any): {
+  paused: boolean;
+  requestPlay: () => void;
+  requestPause: () => void;
+};
+type PlayButtonState = ReturnType<typeof usePlayButtonState>;
+declare function getPlayButtonProps(props: Record<string, unknown>, state: PlayButtonState): PropsWithChildren<Record<string, unknown>>;
+type PlayButtonProps = ReturnType<typeof getPlayButtonProps>;
+declare function renderPlayButton(props: PlayButtonProps, state: PlayButtonState): JSX.Element;
+declare const PlayButton: ConnectedComponent<PlayButtonProps, typeof renderPlayButton>;
+//#endregion
+//#region src/components/Popover.d.ts
+interface PopoverRootProps {
+  openOnHover?: boolean;
+  delay?: number;
+  closeDelay?: number;
+  children: ReactNode;
+}
+interface PopoverTriggerProps {
+  children: ReactNode;
+}
+interface PopoverPositionerProps {
+  side?: Placement;
+  sideOffset?: number;
+  children: ReactNode;
+}
+interface PopoverPopupProps {
+  className?: string;
+  children: ReactNode;
+}
+interface PopoverPortalProps {
+  children: ReactNode;
+  root?: HTMLElement | ShadowRoot | MutableRefObject<HTMLElement | ShadowRoot | null> | null;
+  rootId?: string;
+}
+declare function PopoverRoot({
+  openOnHover,
+  delay,
+  closeDelay,
+  children
+}: PopoverRootProps): JSX.Element;
+declare function PopoverTrigger({
+  children
+}: PopoverTriggerProps): JSX.Element;
+declare function PopoverPositioner({
+  side,
+  sideOffset,
+  children
+}: PopoverPositionerProps): JSX.Element | null;
+declare function PopoverPopup({
+  className,
+  children
+}: PopoverPopupProps): JSX.Element;
+declare function PopoverPortal({
+  children,
+  root,
+  rootId
+}: PopoverPortalProps): JSX.Element;
+declare const Popover: {
+  Root: typeof PopoverRoot;
+  Trigger: typeof PopoverTrigger;
+  Positioner: typeof PopoverPositioner;
+  Popup: typeof PopoverPopup;
+  Portal: typeof PopoverPortal;
+};
+//#endregion
+//#region src/components/PreviewTimeDisplay.d.ts
+declare function usePreviewTimeDisplayState(_props: any): {
+  previewTime: number;
+};
+type PreviewTimeDisplayState = ReturnType<typeof usePreviewTimeDisplayState>;
+interface PreviewTimeDisplayProps extends React.ComponentProps<"span"> {
+  showRemaining?: boolean;
+}
+declare function renderPreviewTimeDisplay(props: PreviewTimeDisplayProps, state: PreviewTimeDisplayState): JSX.Element;
+declare const PreviewTimeDisplay: ConnectedComponent<PreviewTimeDisplayProps, typeof renderPreviewTimeDisplay>;
+//#endregion
+//#region src/components/SimpleVideo.d.ts
+type SimpleVideoProps = PropsWithChildren<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement> & {
+  className?: string | undefined;
+  style?: CSSProperties | undefined;
+}>;
+/**
+* SimpleVideo - A basic video component that works with native HTML5 video formats (MP4, WebM, etc.)
+* without using a playback engine. Use this for simple MP4 files. For HLS/DASH streaming, use the
+* regular Video component instead.
+*
+* This component connects to MediaProvider for play/pause state but sets the src directly on the
+* video element without going through HLS.js or other playback engines.
+*
+* @example
+* ```tsx
+* <MediaProvider>
+*   <MediaSkin>
+*     <SimpleVideo src="video.mp4" />
+*   </MediaSkin>
+* </MediaProvider>
+* ```
+*/
+declare const SimpleVideo: React$1.ForwardRefExoticComponent<SimpleVideoProps & React$1.RefAttributes<HTMLVideoElement>>;
+//#endregion
+//#region src/components/TimeSlider.d.ts
+interface TimeSliderProps extends React.ComponentPropsWithRef<"div"> {
+  orientation?: "horizontal" | "vertical";
+}
+interface TimeSliderRenderProps extends React.ComponentProps<"div"> {
+  "data-orientation"?: "horizontal" | "vertical";
+  "data-current-time"?: number;
+  "data-duration"?: number;
+}
+declare function renderTimeSliderRoot(props: TimeSliderRenderProps): JSX.Element;
+declare const TimeSliderRoot: ConnectedComponent<TimeSliderProps, typeof renderTimeSliderRoot>;
+declare function renderTimeSliderTrack(props: TimeSliderRenderProps): JSX.Element;
+declare const TimeSliderTrack: ConnectedComponent<React.ComponentProps<"div">, typeof renderTimeSliderTrack>;
+declare function renderTimeSliderThumb(props: TimeSliderRenderProps): JSX.Element;
+declare const TimeSliderThumb: ConnectedComponent<React.ComponentProps<"div">, typeof renderTimeSliderThumb>;
+declare function renderTimeSliderPointer(props: TimeSliderRenderProps): JSX.Element;
+declare const TimeSliderPointer: ConnectedComponent<React.ComponentProps<"div">, typeof renderTimeSliderPointer>;
+declare function renderTimeSliderProgress(props: TimeSliderRenderProps): JSX.Element;
+declare const TimeSliderProgress: ConnectedComponent<React.ComponentProps<"div">, typeof renderTimeSliderProgress>;
+declare const TimeSlider: {
+  Root: typeof TimeSliderRoot;
+  Track: typeof TimeSliderTrack;
+  Thumb: typeof TimeSliderThumb;
+  Pointer: typeof TimeSliderPointer;
+  Progress: typeof TimeSliderProgress;
+};
+//#endregion
+//#region src/components/Tooltip.d.ts
+interface TooltipRootProps {
+  delay?: number;
+  closeDelay?: number;
+  children: ReactNode;
+  trackCursorAxis?: "x" | "y" | "both";
+}
+interface TooltipTriggerProps {
+  children: ReactNode;
+}
+interface TooltipPositionerProps {
+  side?: Placement;
+  sideOffset?: number;
+  collisionPadding?: number;
+  children: ReactNode;
+}
+interface TooltipPopupProps {
+  className?: string;
+  children: ReactNode;
+}
+interface TooltipArrowProps {
+  className?: string;
+  children: ReactNode;
+}
+interface TooltipPortalProps {
+  children: ReactNode;
+  root?: HTMLElement | ShadowRoot | MutableRefObject<HTMLElement | ShadowRoot | null> | null;
+  rootId?: string;
+}
+declare function TooltipRoot({
+  delay,
+  closeDelay,
+  trackCursorAxis,
+  children
+}: TooltipRootProps): JSX.Element;
+declare function TooltipTrigger({
+  children
+}: TooltipTriggerProps): JSX.Element;
+declare function TooltipPositioner({
+  side,
+  sideOffset,
+  collisionPadding,
+  children
+}: TooltipPositionerProps): JSX.Element | null;
+declare function TooltipPopup({
+  className,
+  children
+}: TooltipPopupProps): JSX.Element | null;
+declare function TooltipArrow({
+  className,
+  children
+}: TooltipArrowProps): JSX.Element;
+declare function TooltipPortal({
+  children,
+  root,
+  rootId
+}: TooltipPortalProps): JSX.Element;
+declare const Tooltip: {
+  Root: typeof TooltipRoot;
+  Trigger: typeof TooltipTrigger;
+  Positioner: typeof TooltipPositioner;
+  Popup: typeof TooltipPopup;
+  Arrow: typeof TooltipArrow;
+  Portal: typeof TooltipPortal;
+};
+//#endregion
+//#region src/components/Video.d.ts
+type MediaStateOwner$1 = NonNullable<Parameters<ReturnType<typeof useMediaRef>>[0]>;
+/** @TODO Improve type inference and narrowing/widening for different use cases (CJP) */
+type ComponentType = ElementType<Omit<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "ref"> & {
+  ref: Ref<MediaStateOwner$1>;
+}>;
+type VideoProps = PropsWithChildren<{
+  component?: ComponentType;
+  className?: string | undefined;
+  style?: CSSProperties | undefined;
+}>;
+declare function Video({
+  component,
+  children,
+  ...props
+}: VideoProps): JSX.Element;
+declare const MediaElementVideo: FC<VideoProps>;
+//#endregion
+//#region src/components/VolumeSlider.d.ts
+interface VolumeSliderProps extends React.ComponentProps<"div"> {
+  orientation?: "horizontal" | "vertical";
+}
+interface VolumeSliderRenderProps extends React.ComponentProps<"div"> {
+  "data-orientation"?: "horizontal" | "vertical";
+  "data-muted"?: boolean;
+  "data-volume-level"?: string;
+}
+declare function renderVolumeSliderRoot(props: VolumeSliderRenderProps): JSX.Element;
+declare const VolumeSliderRoot: ConnectedComponent<VolumeSliderProps, typeof renderVolumeSliderRoot>;
+declare function renderVolumeSliderTrack(props: VolumeSliderRenderProps): JSX.Element;
+declare const VolumeSliderTrack: ConnectedComponent<React.ComponentProps<"div">, typeof renderVolumeSliderTrack>;
+declare function renderVolumeSliderThumb(props: VolumeSliderRenderProps): JSX.Element;
+declare const VolumeSliderThumb: ConnectedComponent<React.ComponentProps<"div">, typeof renderVolumeSliderThumb>;
+declare function renderVolumeSliderProgress(props: VolumeSliderRenderProps): JSX.Element;
+declare const VolumeSliderProgress: ConnectedComponent<React.ComponentProps<"div">, typeof renderVolumeSliderProgress>;
+declare const VolumeSlider: {
+  Root: typeof VolumeSliderRoot;
+  Track: typeof VolumeSliderTrack;
+  Thumb: typeof VolumeSliderThumb;
+  Progress: typeof VolumeSliderProgress;
+};
+//#endregion
+export { CurrentTimeDisplay, DurationDisplay, FrostedSkin, FullscreenButton, MediaContainer, MediaContext, MediaElementVideo, MediaProvider, MediaState, MediaStateOwner, MediaStore, MinimalSkin, MuteButton, PlayButton, Popover, PreviewTimeDisplay, SimpleVideo, TimeSlider, Tooltip, Video, VolumeSlider, useMediaContainerRef, useMediaDispatch, useMediaRef, useMediaSelector, useMediaStore };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":["CurrentTimeDisplay: ConnectedComponent<CurrentTimeDisplayProps, typeof renderCurrentTimeDisplay>","DurationDisplay: ConnectedComponent<DurationDisplayProps, typeof renderDurationDisplay>","FullscreenButton: ConnectedComponent<FullscreenButtonProps, typeof renderFullscreenButton>","MediaContainer: FC<PropsWithChildren<HTMLProps<HTMLDivElement> & { portalId?: string }>>","MuteButton: ConnectedComponent<MuteButtonProps, typeof renderMuteButton>","PlayButton: ConnectedComponent<PlayButtonProps, typeof renderPlayButton>","Popover: {\n  Root: typeof PopoverRoot;\n  Trigger: typeof PopoverTrigger;\n  Positioner: typeof PopoverPositioner;\n  Popup: typeof PopoverPopup;\n  Portal: typeof PopoverPortal;\n}","PreviewTimeDisplay: ConnectedComponent<PreviewTimeDisplayProps, typeof renderPreviewTimeDisplay>","SimpleVideo: React.ForwardRefExoticComponent<\n  SimpleVideoProps & React.RefAttributes<HTMLVideoElement>\n>","TimeSliderRoot: ConnectedComponent<TimeSliderProps, typeof renderTimeSliderRoot>","TimeSliderTrack: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeSliderTrack>","TimeSliderThumb: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeSliderThumb>","TimeSliderPointer: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderTimeSliderPointer\n>","TimeSliderProgress: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderTimeSliderProgress\n>","Tooltip: {\n  Root: typeof TooltipRoot;\n  Trigger: typeof TooltipTrigger;\n  Positioner: typeof TooltipPositioner;\n  Popup: typeof TooltipPopup;\n  Arrow: typeof TooltipArrow;\n  Portal: typeof TooltipPortal;\n}","MediaElementVideo: FC<VideoProps>","VolumeSliderRoot: ConnectedComponent<VolumeSliderProps, typeof renderVolumeSliderRoot>","VolumeSliderTrack: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderVolumeSliderTrack\n>","VolumeSliderThumb: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderVolumeSliderThumb\n>","VolumeSliderProgress: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderVolumeSliderProgress\n>"],"sources":["../src/utils/component-factory.tsx","../src/components/CurrentTimeDisplay.tsx","../src/components/DurationDisplay.tsx","../src/components/FullscreenButton.tsx","../src/components/MediaContainer.tsx","../src/components/MuteButton.tsx","../src/components/PlayButton.tsx","../src/components/Popover.tsx","../src/components/PreviewTimeDisplay.tsx","../src/components/SimpleVideo.tsx","../src/components/TimeSlider.tsx","../src/components/Tooltip.tsx","../src/components/Video.tsx","../src/components/VolumeSlider.tsx"],"sourcesContent":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,87 @@
+import { a as useMediaStore, i as useMediaSelector, n as useMediaDispatch, o as MediaContext, r as useMediaRef, t as MediaProvider } from "./store-DpQF8Ges.js";
+import { _ as DurationDisplay, a as TimeSlider, c as Popover, f as MuteButton, g as FullscreenButton, h as useMediaContainerRef, m as MediaContainer, o as PreviewTimeDisplay, r as Tooltip, t as VolumeSlider, u as PlayButton, v as CurrentTimeDisplay } from "./VolumeSlider-DoR6idnJ.js";
+import "./icons-BqfV81R8.js";
+import { t as FrostedSkin } from "./frosted-BtDBmsH2.js";
+import { t as MinimalSkin } from "./minimal-DE2x_liR.js";
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { createMediaPlaybackController } from "@videojs/core/media";
+
+//#region src/components/SimpleVideo.tsx
+/**
+* SimpleVideo - A basic video component that works with native HTML5 video formats (MP4, WebM, etc.)
+* without using a playback engine. Use this for simple MP4 files. For HLS/DASH streaming, use the
+* regular Video component instead.
+*
+* This component connects to MediaProvider for play/pause state but sets the src directly on the
+* video element without going through HLS.js or other playback engines.
+*
+* @example
+* ```tsx
+* <MediaProvider>
+*   <MediaSkin>
+*     <SimpleVideo src="video.mp4" />
+*   </MediaSkin>
+* </MediaProvider>
+* ```
+*/
+const SimpleVideo = forwardRef(({ children,...props }, _ref) => {
+	const mediaRefCallback = useMediaRef();
+	return /* @__PURE__ */ jsx("video", {
+		...props,
+		ref: mediaRefCallback,
+		children
+	});
+});
+SimpleVideo.displayName = "SimpleVideo";
+
+//#endregion
+//#region src/components/Video.tsx
+function useMediaStateOwner(ref, createMediaPlaybackController$1) {
+	const mediaStateOwnerRef = useRef(createMediaPlaybackController$1());
+	useImperativeHandle(ref, () => mediaStateOwnerRef.current, []);
+	return { updateMediaElement(mediaEl, props) {
+		mediaStateOwnerRef.current.mediaElement = mediaEl ?? void 0;
+		mediaStateOwnerRef.current.src = props.src;
+		if (props.muted) mediaStateOwnerRef.current.muted = props.muted;
+	} };
+}
+const DefaultVideoComponent = forwardRef(({ children,...props }, ref) => {
+	const { updateMediaElement } = useMediaStateOwner(ref, createMediaPlaybackController);
+	return /* @__PURE__ */ jsx("video", {
+		...props,
+		ref: (mediaEl) => {
+			/** @TODO In later iterations/non-POC, we should be able to have a function that can be used directly for the `ref` prop (CJP) */
+			updateMediaElement(mediaEl, props);
+		},
+		children
+	});
+});
+/**
+* @description This is a "thin wrapper" around the media component whose primary responsibility is to wire up the element
+* to the <MediaProvider/>'s MediaStore for the media state.
+* @param props - Identical to both a <video/>'s props and the <Player/> props, with one addition that may be familiar to
+* MUI users: a `component` prop that allows you to use something other than the <video/> element under the hood.
+* @returns A media react component (e.g. <video/>), wired up as the media element.
+*/
+function ConnectedVideo({ component, children,...props }) {
+	const Component = component;
+	const mediaRefCallback = useMediaRef();
+	return /* @__PURE__ */ jsx(Component, {
+		...props,
+		ref: mediaRefCallback,
+		children
+	});
+}
+function Video({ component = DefaultVideoComponent, children,...props }) {
+	return /* @__PURE__ */ jsx(ConnectedVideo, {
+		...props,
+		component,
+		children
+	});
+}
+const MediaElementVideo = Video;
+
+//#endregion
+export { CurrentTimeDisplay, DurationDisplay, FrostedSkin, FullscreenButton, MediaContainer, MediaContext, MediaElementVideo, MediaProvider, MinimalSkin, MuteButton, PlayButton, Popover, PreviewTimeDisplay, SimpleVideo, TimeSlider, Tooltip, Video, VolumeSlider, useMediaContainerRef, useMediaDispatch, useMediaRef, useMediaSelector, useMediaStore };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["SimpleVideo: React.ForwardRefExoticComponent<\n  SimpleVideoProps & React.RefAttributes<HTMLVideoElement>\n>","createMediaPlaybackController","DefaultVideoComponent: ElementType<\n  Omit<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'ref'> & { ref: Ref<any> }\n>","MediaElementVideo: FC<VideoProps>"],"sources":["../src/components/SimpleVideo.tsx","../src/components/Video.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  CSSProperties,\n  DetailedHTMLProps,\n  PropsWithChildren,\n  VideoHTMLAttributes,\n} from 'react';\n\nimport React, { forwardRef } from 'react';\nimport { useMediaRef } from '@/store';\n\nexport type SimpleVideoProps = PropsWithChildren<\n  DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement> & {\n    className?: string | undefined;\n    style?: CSSProperties | undefined;\n  }\n>;\n\n/**\n * SimpleVideo - A basic video component that works with native HTML5 video formats (MP4, WebM, etc.)\n * without using a playback engine. Use this for simple MP4 files. For HLS/DASH streaming, use the\n * regular Video component instead.\n *\n * This component connects to MediaProvider for play/pause state but sets the src directly on the\n * video element without going through HLS.js or other playback engines.\n *\n * @example\n * ```tsx\n * <MediaProvider>\n *   <MediaSkin>\n *     <SimpleVideo src=\"video.mp4\" />\n *   </MediaSkin>\n * </MediaProvider>\n * ```\n */\nexport const SimpleVideo: React.ForwardRefExoticComponent<\n  SimpleVideoProps & React.RefAttributes<HTMLVideoElement>\n> = forwardRef<HTMLVideoElement, SimpleVideoProps>(\n  ({ children, ...props }, _ref) => {\n    const mediaRefCallback = useMediaRef();\n\n    return (\n      // eslint-disable-next-line jsx-a11y/media-has-caption\n      <video {...props} ref={mediaRefCallback}>\n        {children}\n      </video>\n    );\n  },\n);\n\nSimpleVideo.displayName = 'SimpleVideo';\n\nexport default SimpleVideo;\n","'use client';\n\nimport type {\n  CSSProperties,\n  DetailedHTMLProps,\n  ElementType,\n  FC,\n  PropsWithChildren,\n  Ref,\n  VideoHTMLAttributes,\n} from 'react';\n\nimport { createMediaPlaybackController } from '@videojs/core/media';\n\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { useMediaRef } from '@/store';\n\nexport interface MuxVideoProps {\n  'playback-id'?: string;\n}\n\ntype MediaStateOwner = NonNullable<Parameters<ReturnType<typeof useMediaRef>>[0]>;\n\n/** @TODO Improve type inference and narrowing/widening for different use cases (CJP) */\ntype ComponentType = ElementType<\n  Omit<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'ref'> & {\n    ref: Ref<MediaStateOwner>;\n  }\n>;\n\n// These are the first steps/WIP POC of decoupling the Media State Owner from the DOM.\n// Note that everything will still work if you use:\n// 1. an audio/video element directly\n// 2. a custom element a la media-elements\ntype CreateMediaStateOwner = typeof createMediaPlaybackController;\n\nfunction useMediaStateOwner(ref: Ref<any>, createMediaPlaybackController: CreateMediaStateOwner) {\n  const mediaStateOwnerRef = useRef(createMediaPlaybackController(/* props? */));\n  useImperativeHandle(ref, () => mediaStateOwnerRef.current, []);\n  /** @TODO Parameterize this (CJP) */\n  type ComponentProps = DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;\n  return {\n    updateMediaElement(mediaEl: HTMLMediaElement | null, props: ComponentProps) {\n      // NOTE: The details here will almost definitely change for a less \"bare bones\"/\"POC\" implementation of Media State Owner impl. (CJP)\n      mediaStateOwnerRef.current.mediaElement = mediaEl ?? undefined;\n      mediaStateOwnerRef.current.src = props.src as string;\n      if (props.muted) {\n        mediaStateOwnerRef.current.muted = props.muted;\n      }\n    },\n  };\n}\n\nconst DefaultVideoComponent: ElementType<\n  Omit<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'ref'> & { ref: Ref<any> }\n> = forwardRef<any, any>(({ children, ...props }, ref) => {\n  const { updateMediaElement } = useMediaStateOwner(ref, createMediaPlaybackController);\n  return (\n    // eslint-disable-next-line jsx-a11y/media-has-caption\n    <video\n      {...props}\n      ref={(mediaEl) => {\n        /** @TODO In later iterations/non-POC, we should be able to have a function that can be used directly for the `ref` prop (CJP) */\n        updateMediaElement(mediaEl, props);\n      }}\n    >\n      {children}\n    </video>\n  );\n});\n\n/**\n * @description This is a \"thin wrapper\" around the media component whose primary responsibility is to wire up the element\n * to the <MediaProvider/>'s MediaStore for the media state.\n * @param props - Identical to both a <video/>'s props and the <Player/> props, with one addition that may be familiar to\n * MUI users: a `component` prop that allows you to use something other than the <video/> element under the hood.\n * @returns A media react component (e.g. <video/>), wired up as the media element.\n */\nfunction ConnectedVideo({\n  component,\n  children,\n  ...props\n}: PropsWithChildren<{\n  component: ComponentType;\n  className?: string | undefined;\n  style?: CSSProperties | undefined;\n}>) {\n  const Component = component;\n  const mediaRefCallback = useMediaRef();\n  // NOTE: While this may feel like magic to folks, in the \"default\" use case, you can think of it as:\n  // return (<video ref={mediaRefCallback} {...restProps} >{children}</video>);\n  return (\n    <Component {...props} ref={mediaRefCallback}>\n      {children}\n    </Component>\n  );\n}\n\nexport type VideoProps = PropsWithChildren<{\n  component?: ComponentType;\n  className?: string | undefined;\n  style?: CSSProperties | undefined;\n}>;\n\n// Main Video component with default component\nexport function Video({ component = DefaultVideoComponent, children, ...props }: VideoProps): JSX.Element {\n  return (\n    <ConnectedVideo {...props} component={component}>\n      {children}\n    </ConnectedVideo>\n  );\n}\n\n// MediaElementVideo export (same as Video but for backwards compatibility)\nexport const MediaElementVideo: FC<VideoProps> = Video;\n\nexport default Video;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAaA,cAET,YACD,EAAE,SAAU,GAAG,SAAS,SAAS;CAChC,MAAM,mBAAmB,aAAa;AAEtC,QAEE,oBAAC;EAAM,GAAI;EAAO,KAAK;EACpB;GACK;EAGb;AAED,YAAY,cAAc;;;;ACf1B,SAAS,mBAAmB,KAAe,iCAAsD;CAC/F,MAAM,qBAAqB,OAAOC,iCAA2C,CAAC;AAC9E,qBAAoB,WAAW,mBAAmB,SAAS,EAAE,CAAC;AAG9D,QAAO,EACL,mBAAmB,SAAkC,OAAuB;AAE1E,qBAAmB,QAAQ,eAAe,WAAW;AACrD,qBAAmB,QAAQ,MAAM,MAAM;AACvC,MAAI,MAAM,MACR,oBAAmB,QAAQ,QAAQ,MAAM;IAG9C;;AAGH,MAAMC,wBAEF,YAAsB,EAAE,SAAU,GAAG,SAAS,QAAQ;CACxD,MAAM,EAAE,uBAAuB,mBAAmB,KAAK,8BAA8B;AACrF,QAEE,oBAAC;EACC,GAAI;EACJ,MAAM,YAAY;;AAEhB,sBAAmB,SAAS,MAAM;;EAGnC;GACK;EAEV;;;;;;;;AASF,SAAS,eAAe,EACtB,WACA,SACA,GAAG,SAKD;CACF,MAAM,YAAY;CAClB,MAAM,mBAAmB,aAAa;AAGtC,QACE,oBAAC;EAAU,GAAI;EAAO,KAAK;EACxB;GACS;;AAWhB,SAAgB,MAAM,EAAE,YAAY,uBAAuB,SAAU,GAAG,SAAkC;AACxG,QACE,oBAAC;EAAe,GAAI;EAAkB;EACnC;GACc;;AAKrB,MAAaC,oBAAoC"}

package/dist/minimal-DE2x_liR.js

@@ -0,0 +1,167 @@
+import { _ as DurationDisplay, a as TimeSlider, d as PlayButton_default, g as FullscreenButton, i as Tooltip_default, l as Popover_default, m as MediaContainer, n as VolumeSlider_default, p as MuteButton_default, s as PreviewTimeDisplay_default, v as CurrentTimeDisplay } from "./VolumeSlider-DoR6idnJ.js";
+import { a as Play_default, c as FullscreenExitAlt_default, n as VolumeLow_default, o as Pause_default, r as VolumeHigh_default, t as VolumeOff_default, u as FullscreenEnterAlt_default } from "./icons-BqfV81R8.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/skins/minimal/styles.ts
+function cn(...classes) {
+	return classes.filter(Boolean).join(" ");
+}
+const styles = {
+	MediaContainer: cn("vjs", "vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black", "vjs:text-[0.8125rem]", "vjs:after:absolute vjs:after:inset-0 vjs:after:ring-black/10 vjs:after:ring-1 vjs:dark:after:ring-white/10 vjs:after:ring-inset vjs:after:z-10 vjs:after:pointer-events-none vjs:after:rounded-[inherit]", "vjs:[&:fullscreen]:rounded-none vjs:[&:fullscreen]:[&_video]:h-full vjs:[&:fullscreen]:[&_video]:w-full", "vjs:[&_video]:rounded-[inherit] vjs:[&_video]:w-full vjs:[&_video]:h-auto"),
+	Overlay: cn("vjs:absolute vjs:inset-0 vjs:rounded-[inherit] vjs:pointer-events-none", "vjs:bg-gradient-to-t vjs:from-black/70 vjs:via-black/50 vjs:via-[120px] vjs:to-transparent", "vjs:opacity-0 vjs:delay-500 vjs:duration-300", "vjs:has-[+.controls_[data-paused]]:opacity-100 vjs:has-[+.controls_[data-paused]]:delay-0 vjs:has-[+.controls_[data-paused]]:duration-75", "vjs:has-[+.controls_[aria-expanded=\"true\"]]:opacity-100 vjs:has-[+.controls_[aria-expanded=\"true\"]]:delay-0 vjs:has-[+.controls_[aria-expanded=\"true\"]]:duration-75", "vjs:group-hover/root:opacity-100 vjs:group-hover/root:delay-0 vjs:group-hover/root:duration-75", "vjs:contrast-more:from-black/75"),
+	Controls: cn("controls", "vjs:@container/controls vjs:absolute vjs:inset-x-0 vjs:bottom-0 vjs:flex vjs:items-center vjs:gap-3.5 vjs:z-20 vjs:px-3 vjs:pb-3 vjs:pt-10 vjs:text-white", "vjs:transition vjs:ease-in-out", "vjs:translate-y-full vjs:opacity-0 vjs:delay-500 vjs:duration-300", "vjs:has-[[data-paused]]:translate-y-0 vjs:has-[[data-paused]]:opacity-100 vjs:has-[[data-paused]]:delay-0 vjs:has-[[data-paused]]:duration-75", "vjs:has-[[aria-expanded=\"true\"]]:translate-y-0 vjs:has-[[aria-expanded=\"true\"]]:opacity-100 vjs:has-[[aria-expanded=\"true\"]]:delay-0 vjs:has-[[aria-expanded=\"true\"]]:duration-75", "vjs:group-hover/root:translate-y-0 vjs:group-hover/root:opacity-100 vjs:group-hover/root:delay-0 vjs:group-hover/root:duration-75"),
+	Icon: cn("icon"),
+	Button: cn("vjs:group/button vjs:cursor-pointer vjs:relative vjs:shrink-0 vjs:transition vjs:select-none vjs:p-2.5 vjs:rounded-md", "vjs:bg-transparent vjs:text-white", "vjs:hover:text-white/80 vjs:focus-visible:text-white/80", "vjs:-outline-offset-2 vjs:focus-visible:outline-2 vjs:focus-visible:outline-offset-2 vjs:focus-visible:outline-white", "vjs:aria-disabled:grayscale vjs:aria-disabled:opacity-50 vjs:aria-disabled:cursor-not-allowed", "vjs:aria-busy:pointer-events-none vjs:aria-busy:cursor-not-allowed", "vjs:aria-expanded:text-white/80"),
+	ButtonGroup: cn("vjs:flex vjs:items-center vjs:gap-1.5"),
+	IconButton: cn("vjs:grid vjs:[&_.icon]:[grid-area:1/1]", "vjs:[&_.icon]:shrink-0 vjs:[&_.icon]:transition-[opacity,filter] vjs:[&_.icon]:duration-300 vjs:[&_.icon]:linear vjs:[&_.icon]:drop-shadow-[0_1px_0_var(--tw-shadow-color)] vjs:[&_.icon]:shadow-black/40"),
+	PlayButton: cn("vjs:[&_.pause-icon]:opacity-100 vjs:[&_.pause-icon]:blur-none vjs:[&[data-paused]_.pause-icon]:opacity-0 vjs:[&[data-paused]_.pause-icon]:blur-xs", "vjs:[&_.play-icon]:opacity-0 vjs:[&_.play-icon]:blur-xs vjs:[&[data-paused]_.play-icon]:opacity-100 vjs:[&[data-paused]_.play-icon]:blur-none"),
+	PlayIcon: cn("play-icon"),
+	PauseIcon: cn("pause-icon"),
+	PlayTooltipPopup: cn("vjs:[&_.pause-tooltip]:inline vjs:[&[data-paused]_.pause-tooltip]:hidden", "vjs:[&_.play-tooltip]:hidden vjs:[&[data-paused]_.play-tooltip]:inline"),
+	PlayTooltip: cn("play-tooltip"),
+	PauseTooltip: cn("pause-tooltip"),
+	MuteButton: cn("vjs:[&_.icon]:hidden", "vjs:[&[data-volume-level=\"high\"]_.volume-high-icon]:inline", "vjs:[&[data-volume-level=\"medium\"]_.volume-low-icon]:inline", "vjs:[&[data-volume-level=\"low\"]_.volume-low-icon]:inline", "vjs:[&[data-volume-level=\"off\"]_.volume-off-icon]:inline"),
+	VolumeHighIcon: cn("volume-high-icon"),
+	VolumeLowIcon: cn("volume-low-icon"),
+	VolumeOffIcon: cn("volume-off-icon"),
+	FullscreenButton: cn("vjs:[&_.fullscreen-enter-icon]:opacity-100 vjs:[&[data-fullscreen]_.fullscreen-enter-icon]:opacity-0", "vjs:[&_.fullscreen-exit-icon]:opacity-0 vjs:[&[data-fullscreen]_.fullscreen-exit-icon]:opacity-100", "vjs:[&_path]:transition-transform vjs:ease-out"),
+	FullscreenEnterIcon: cn("fullscreen-enter-icon", "vjs:group-hover/button:[&_.arrow-1]:translate-x-px vjs:group-hover/button:[&_.arrow-1]:-translate-y-px", "vjs:group-hover/button:[&_.arrow-2]:-translate-x-px vjs:group-hover/button:[&_.arrow-2]:translate-y-px"),
+	FullscreenExitIcon: cn("fullscreen-exit-icon", "vjs:[&_.arrow-1]:translate-x-px vjs:[&_.arrow-1]:-translate-y-px", "vjs:[&_.arrow-2]:-translate-x-px vjs:[&_.arrow-2]:translate-y-px", "vjs:group-hover/button:[&_.arrow-1]:translate-0", "vjs:group-hover/button:[&_.arrow-2]:translate-0"),
+	FullscreenTooltipPopup: cn("vjs:[&_.fullscreen-enter-tooltip]:inline vjs:[&[data-fullscreen]_.fullscreen-enter-tooltip]:hidden", "vjs:[&_.fullscreen-exit-tooltip]:hidden vjs:[&[data-fullscreen]_.fullscreen-exit-tooltip]:inline"),
+	FullscreenEnterTooltip: cn("fullscreen-enter-tooltip"),
+	FullscreenExitTooltip: cn("fullscreen-exit-tooltip"),
+	TimeSliderRoot: cn("vjs:mx-2"),
+	TimeDisplay: cn("vjs:tabular-nums vjs:text-shadow-2xs/20"),
+	DurationDisplay: cn("vjs:text-white/50 vjs:contents"),
+	SliderRoot: cn("vjs:flex vjs:items-center vjs:justify-center vjs:flex-1 vjs:group/slider vjs:relative vjs:rounded-sm", "vjs:[&[data-orientation=\"horizontal\"]]:h-5 vjs:[&[data-orientation=\"horizontal\"]]:min-w-20", "vjs:[&[data-orientation=\"vertical\"]]:w-5 vjs:[&[data-orientation=\"vertical\"]]:h-18", "vjs:-outline-offset-8 vjs:focus-visible:outline-2 vjs:focus-visible:outline-offset-8 vjs:focus-visible:outline-white"),
+	SliderTrack: cn("vjs:relative vjs:select-none vjs:rounded-full vjs:bg-white/10 vjs:transition-[height,width] vjs:ease-in-out", "vjs:[&[data-orientation=\"horizontal\"]]:w-full vjs:[&[data-orientation=\"horizontal\"]]:h-[0.1875rem]", "vjs:[&[data-orientation=\"vertical\"]]:w-[0.1875rem]"),
+	SliderProgress: cn("vjs:bg-white vjs:rounded-[inherit]"),
+	SliderPointer: cn("vjs:hidden"),
+	SliderThumb: cn("vjs:opacity-0 vjs:scale-70 vjs:group-hover/slider:opacity-100 vjs:group-hover/slider:scale-100 vjs:focus-visible:opacity-100 vjs:focus-visible:scale-100", "vjs:bg-white vjs:z-10 vjs:size-3 vjs:select-none vjs:ring vjs:ring-black/10 vjs:rounded-full vjs:shadow-sm vjs:shadow-black/15 vjs:transition-[opacity,scale] vjs:ease-out", "vjs:-outline-offset-2 vjs:focus-visible:outline-2 vjs:focus-visible:outline-offset-2 vjs:focus-visible:outline-amber-500", "vjs:[&[data-orientation=\"horizontal\"]]:hover:cursor-ew-resize", "vjs:[&[data-orientation=\"vertical\"]]:hover:cursor-ns-resize"),
+	PopupAnimation: cn("vjs:transition-[transform,scale,opacity,filter] vjs:origin-bottom vjs:duration-200 vjs:data-[instant]:duration-0", "vjs:data-[starting-style]:scale-0 vjs:data-[starting-style]:opacity-0 vjs:data-[starting-style]:blur-sm", "vjs:data-[ending-style]:scale-0 vjs:data-[ending-style]:opacity-0 vjs:data-[ending-style]:blur-sm"),
+	PopoverPopup: cn("vjs:py-2"),
+	TooltipPopup: cn("vjs:whitespace-nowrap vjs:flex vjs:flex-col vjs:rounded vjs:text-white vjs:text-xs vjs:@7xl/root:text-sm vjs:px-2 vjs:py-1 vjs:bg-white/20 vjs:backdrop-blur-3xl vjs:backdrop-saturate-150 vjs:backdrop-brightness-90 vjs:shadow-md vjs:shadow-black/5")
+};
+var styles_default = styles;
+
+//#endregion
+//#region src/skins/minimal/MinimalSkin.tsx
+function MinimalSkin({ children, className = "" }) {
+	return /* @__PURE__ */ jsxs(MediaContainer, {
+		className: `${styles_default.MediaContainer} ${className}`,
+		children: [
+			children,
+			/* @__PURE__ */ jsx("div", {
+				className: styles_default.Overlay,
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: styles_default.Controls,
+				children: [
+					/* @__PURE__ */ jsxs(Tooltip_default.Root, {
+						delay: 500,
+						closeDelay: 0,
+						children: [/* @__PURE__ */ jsx(Tooltip_default.Trigger, { children: /* @__PURE__ */ jsxs(PlayButton_default, {
+							className: `${styles_default.Button} ${styles_default.IconButton} ${styles_default.PlayButton}`,
+							children: [/* @__PURE__ */ jsx(Play_default, { className: `${styles_default.PlayIcon} ${styles_default.Icon}` }), /* @__PURE__ */ jsx(Pause_default, { className: `${styles_default.PauseIcon} ${styles_default.Icon}` })]
+						}) }), /* @__PURE__ */ jsx(Tooltip_default.Portal, { children: /* @__PURE__ */ jsx(Tooltip_default.Positioner, {
+							side: "top-start",
+							sideOffset: 6,
+							collisionPadding: 12,
+							children: /* @__PURE__ */ jsxs(Tooltip_default.Popup, {
+								className: `${styles_default.PopupAnimation} ${styles_default.TooltipPopup} ${styles_default.PlayTooltipPopup}`,
+								children: [/* @__PURE__ */ jsx("span", {
+									className: styles_default.PlayTooltip,
+									children: "Play"
+								}), /* @__PURE__ */ jsx("span", {
+									className: styles_default.PauseTooltip,
+									children: "Pause"
+								})]
+							})
+						}) })]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1",
+						children: [/* @__PURE__ */ jsx(CurrentTimeDisplay, { className: styles_default.TimeDisplay }), /* @__PURE__ */ jsxs("span", {
+							className: styles_default.DurationDisplay,
+							children: ["/", /* @__PURE__ */ jsx(DurationDisplay, { className: `${styles_default.TimeDisplay}` })]
+						})]
+					}),
+					/* @__PURE__ */ jsxs(Tooltip_default.Root, {
+						trackCursorAxis: "x",
+						children: [/* @__PURE__ */ jsx(Tooltip_default.Trigger, { children: /* @__PURE__ */ jsxs(TimeSlider.Root, {
+							className: styles_default.SliderRoot,
+							children: [/* @__PURE__ */ jsxs(TimeSlider.Track, {
+								className: styles_default.SliderTrack,
+								children: [/* @__PURE__ */ jsx(TimeSlider.Progress, { className: styles_default.SliderProgress }), /* @__PURE__ */ jsx(TimeSlider.Pointer, { className: styles_default.SliderPointer })]
+							}), /* @__PURE__ */ jsx(TimeSlider.Thumb, { className: styles_default.SliderThumb })]
+						}) }), /* @__PURE__ */ jsx(Tooltip_default.Portal, { children: /* @__PURE__ */ jsx(Tooltip_default.Positioner, {
+							side: "top",
+							sideOffset: 12,
+							collisionPadding: 12,
+							children: /* @__PURE__ */ jsx(Tooltip_default.Popup, {
+								className: `${styles_default.PopupAnimation} ${styles_default.TooltipPopup}`,
+								children: /* @__PURE__ */ jsx(PreviewTimeDisplay_default, { className: styles_default.TimeDisplay })
+							})
+						}) })]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: styles_default.ButtonGroup,
+						children: [/* @__PURE__ */ jsxs(Popover_default.Root, {
+							openOnHover: true,
+							delay: 200,
+							closeDelay: 300,
+							children: [/* @__PURE__ */ jsx(Popover_default.Trigger, { children: /* @__PURE__ */ jsxs(MuteButton_default, {
+								className: `${styles_default.Button} ${styles_default.IconButton} ${styles_default.MuteButton}`,
+								children: [
+									/* @__PURE__ */ jsx(VolumeHigh_default, { className: `${styles_default.VolumeHighIcon} ${styles_default.Icon}` }),
+									/* @__PURE__ */ jsx(VolumeLow_default, { className: `${styles_default.VolumeLowIcon} ${styles_default.Icon}` }),
+									/* @__PURE__ */ jsx(VolumeOff_default, { className: `${styles_default.VolumeOffIcon} ${styles_default.Icon}` })
+								]
+							}) }), /* @__PURE__ */ jsx(Popover_default.Portal, { children: /* @__PURE__ */ jsx(Popover_default.Positioner, {
+								side: "top",
+								sideOffset: 2,
+								children: /* @__PURE__ */ jsx(Popover_default.Popup, {
+									className: `${styles_default.PopupAnimation} ${styles_default.PopoverPopup}`,
+									children: /* @__PURE__ */ jsxs(VolumeSlider_default.Root, {
+										className: styles_default.SliderRoot,
+										orientation: "vertical",
+										children: [/* @__PURE__ */ jsx(VolumeSlider_default.Track, {
+											className: styles_default.SliderTrack,
+											children: /* @__PURE__ */ jsx(VolumeSlider_default.Progress, { className: styles_default.SliderProgress })
+										}), /* @__PURE__ */ jsx(VolumeSlider_default.Thumb, { className: styles_default.SliderThumb })]
+									})
+								})
+							}) })]
+						}), /* @__PURE__ */ jsxs(Tooltip_default.Root, {
+							delay: 500,
+							closeDelay: 0,
+							children: [/* @__PURE__ */ jsx(Tooltip_default.Trigger, { children: /* @__PURE__ */ jsxs(FullscreenButton, {
+								className: `${styles_default.Button} ${styles_default.IconButton} ${styles_default.FullscreenButton}`,
+								children: [/* @__PURE__ */ jsx(FullscreenEnterAlt_default, { className: `${styles_default.FullscreenEnterIcon} ${styles_default.Icon}` }), /* @__PURE__ */ jsx(FullscreenExitAlt_default, { className: `${styles_default.FullscreenExitIcon} ${styles_default.Icon}` })]
+							}) }), /* @__PURE__ */ jsx(Tooltip_default.Portal, { children: /* @__PURE__ */ jsx(Tooltip_default.Positioner, {
+								side: "top-end",
+								sideOffset: 6,
+								collisionPadding: 12,
+								children: /* @__PURE__ */ jsxs(Tooltip_default.Popup, {
+									className: `${styles_default.PopupAnimation} ${styles_default.TooltipPopup} ${styles_default.FullscreenTooltipPopup}`,
+									children: [/* @__PURE__ */ jsx("span", {
+										className: styles_default.FullscreenEnterTooltip,
+										children: "Enter Fullscreen"
+									}), /* @__PURE__ */ jsx("span", {
+										className: styles_default.FullscreenExitTooltip,
+										children: "Exit Fullscreen"
+									})]
+								})
+							}) })]
+						})]
+					})
+				]
+			})
+		]
+	});
+}
+
+//#endregion
+export { MinimalSkin as t };
+//# sourceMappingURL=minimal-DE2x_liR.js.map