@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/src/components/media-player-hls.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { MediaPlayerRootProps } from "./media-player-root";
+import { VideoSource, TextTrack } from "../adapters/videojs-adapter";
+import "../styles/videojs.css";
+export interface MediaPlayerHLSProps extends Omit<MediaPlayerRootProps, "children"> {
+    sources: VideoSource[];
+    poster?: string;
+    textTracks?: TextTrack[];
+    showControls?: boolean;
+    customControls?: React.ReactNode;
+    hlsConfig?: any;
+    enableQualitySelector?: boolean;
+    enableSubtitles?: boolean;
+    containerClassName?: string;
+    videoClassName?: string;
+    onPlayerReady?: (player: any) => void;
+    onPlayerError?: (error: any) => void;
+}
+export declare function MediaPlayerHLS(props: MediaPlayerHLSProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MediaPlayerHLS {
+    var displayName: string;
+}
+//# sourceMappingURL=media-player-hls.d.ts.map

package/dist/src/components/media-player-hls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-hls.d.ts","sourceRoot":"","sources":["media-player-hls.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAmB,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAC3E,OAAO,EAAkB,WAAW,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAA;AAMpF,OAAO,uBAAuB,CAAA;AAE9B,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IACjF,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,SAAS,EAAE,CAAA;IACxB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,SAAS,CAAC,EAAE,GAAG,CAAA;IACf,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAA;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;CACrC;AAgDD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CAmCxD;yBAnCe,cAAc"}

package/dist/src/components/media-player-hls.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MediaPlayerRoot } from "./media-player-root";
+import { VideoJSAdapter } from "../adapters/videojs-adapter";
+import { MediaPlayerLoading } from "./media-player-loading";
+import { MediaPlayerError } from "./media-player-error";
+import { useMediaSelector } from "../context/media-context";
+import { cn } from "../lib/utils";
+import "../styles/videojs.css"; // Import Video.js styles
+function MediaPlayerHLSContent({ sources, poster, textTracks = [], showControls = true, customControls, hlsConfig, enableQualitySelector = true, enableSubtitles = true, containerClassName, videoClassName, onPlayerReady, onPlayerError }) {
+    const isLoading = useMediaSelector(state => state.isLoading);
+    const isBuffering = useMediaSelector(state => state.isBuffering);
+    const error = useMediaSelector(state => state.error);
+    return (_jsxs("div", { className: cn("relative h-full w-full", containerClassName), children: [_jsx(VideoJSAdapter, { sources: sources, poster: poster, textTracks: textTracks, controls: true, autoplay: false, muted: true, preload: "auto", className: videoClassName, hlsConfig: hlsConfig, enableQualitySelector: enableQualitySelector, enableSubtitles: enableSubtitles, onReady: onPlayerReady, onError: onPlayerError }), (isLoading || isBuffering) && _jsx(MediaPlayerLoading, {}), error && _jsx(MediaPlayerError, { children: error })] }));
+}
+export function MediaPlayerHLS(props) {
+    const { sources, poster, textTracks, showControls, customControls, hlsConfig, enableQualitySelector, enableSubtitles, containerClassName, videoClassName, onPlayerReady, onPlayerError, ...rootProps } = props;
+    return (_jsx(MediaPlayerRoot, { ...rootProps, children: _jsx(MediaPlayerHLSContent, { sources: sources, poster: poster, textTracks: textTracks, showControls: showControls, customControls: customControls, hlsConfig: hlsConfig, enableQualitySelector: enableQualitySelector, enableSubtitles: enableSubtitles, containerClassName: containerClassName, videoClassName: videoClassName, onPlayerReady: onPlayerReady, onPlayerError: onPlayerError }) }));
+}
+MediaPlayerHLS.displayName = "MediaPlayerHLS";

package/dist/src/components/media-player-hls.tsx

@@ -0,0 +1,111 @@
+"use client"
+
+import React from "react"
+import { MediaPlayerRoot, MediaPlayerRootProps } from "./media-player-root"
+import { VideoJSAdapter, VideoSource, TextTrack } from "../adapters/videojs-adapter"
+import { MediaPlayerControls } from "./media-player-controls"
+import { MediaPlayerLoading } from "./media-player-loading"
+import { MediaPlayerError } from "./media-player-error"
+import { useMediaSelector } from "../context/media-context"
+import { cn } from "../lib/utils"
+import "../styles/videojs.css" // Import Video.js styles
+
+export interface MediaPlayerHLSProps extends Omit<MediaPlayerRootProps, "children"> {
+  sources: VideoSource[]
+  poster?: string
+  textTracks?: TextTrack[]
+  showControls?: boolean
+  customControls?: React.ReactNode
+  hlsConfig?: any
+  enableQualitySelector?: boolean
+  enableSubtitles?: boolean
+  containerClassName?: string
+  videoClassName?: string
+  onPlayerReady?: (player: any) => void
+  onPlayerError?: (error: any) => void
+}
+
+function MediaPlayerHLSContent({
+  sources,
+  poster,
+  textTracks = [],
+  showControls = true,
+  customControls,
+  hlsConfig,
+  enableQualitySelector = true,
+  enableSubtitles = true,
+  containerClassName,
+  videoClassName,
+  onPlayerReady,
+  onPlayerError
+}: MediaPlayerHLSProps) {
+  const isLoading = useMediaSelector(state => state.isLoading)
+  const isBuffering = useMediaSelector(state => state.isBuffering)
+  const error = useMediaSelector(state => state.error)
+
+  return (
+    <div className={cn("relative h-full w-full", containerClassName)}>
+      {/* Video.js Adapter */}
+      <VideoJSAdapter
+        sources={sources}
+        poster={poster}
+        textTracks={textTracks}
+        controls={true} // Enable Video.js controls
+        autoplay={false}
+        muted={true} // Muted for autoplay policy
+        preload="auto"
+        className={videoClassName}
+        hlsConfig={hlsConfig}
+        enableQualitySelector={enableQualitySelector}
+        enableSubtitles={enableSubtitles}
+        onReady={onPlayerReady}
+        onError={onPlayerError}
+      />
+
+      {/* Loading state */}
+      {(isLoading || isBuffering) && <MediaPlayerLoading />}
+
+      {/* Error state */}
+      {error && <MediaPlayerError>{error}</MediaPlayerError>}
+    </div>
+  )
+}
+
+export function MediaPlayerHLS(props: MediaPlayerHLSProps) {
+  const {
+    sources,
+    poster,
+    textTracks,
+    showControls,
+    customControls,
+    hlsConfig,
+    enableQualitySelector,
+    enableSubtitles,
+    containerClassName,
+    videoClassName,
+    onPlayerReady,
+    onPlayerError,
+    ...rootProps
+  } = props
+
+  return (
+    <MediaPlayerRoot {...rootProps}>
+      <MediaPlayerHLSContent
+        sources={sources}
+        poster={poster}
+        textTracks={textTracks}
+        showControls={showControls}
+        customControls={customControls}
+        hlsConfig={hlsConfig}
+        enableQualitySelector={enableQualitySelector}
+        enableSubtitles={enableSubtitles}
+        containerClassName={containerClassName}
+        videoClassName={videoClassName}
+        onPlayerReady={onPlayerReady}
+        onPlayerError={onPlayerError}
+      />
+    </MediaPlayerRoot>
+  )
+}
+
+MediaPlayerHLS.displayName = "MediaPlayerHLS"

package/dist/src/components/media-player-loading.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface MediaPlayerLoadingProps {
+    className?: string;
+    delayMs?: number;
+    asChild?: boolean;
+    children?: React.ReactNode;
+}
+export declare function MediaPlayerLoading({ className, delayMs, asChild, children, ...props }: MediaPlayerLoadingProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace MediaPlayerLoading {
+    var displayName: string;
+}
+//# sourceMappingURL=media-player-loading.d.ts.map

package/dist/src/components/media-player-loading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-loading.d.ts","sourceRoot":"","sources":["media-player-loading.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,uBAAuB;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,kBAAkB,CAAC,EAClC,SAAS,EACT,OAAa,EACb,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,uBAAuB,kDAqDzB;yBA3De,kBAAkB"}

package/dist/src/components/media-player-loading.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Loader2Icon } from "lucide-react";
+import React from "react";
+import { useMediaSelector } from "../context/media-context";
+import { cn } from "../lib/utils";
+export function MediaPlayerLoading({ className, delayMs = 300, asChild = false, children, ...props }) {
+    const isLoading = useMediaSelector((state) => state.isLoading);
+    const [shouldRender, setShouldRender] = React.useState(false);
+    const timeoutRef = React.useRef(undefined);
+    React.useEffect(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = undefined;
+        }
+        if (isLoading) {
+            if (delayMs > 0) {
+                timeoutRef.current = setTimeout(() => {
+                    setShouldRender(true);
+                    timeoutRef.current = undefined;
+                }, delayMs);
+            }
+            else {
+                setShouldRender(true);
+            }
+        }
+        else {
+            setShouldRender(false);
+        }
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+                timeoutRef.current = undefined;
+            }
+        };
+    }, [isLoading, delayMs]);
+    if (!shouldRender)
+        return null;
+    const loadingProps = {
+        role: "status",
+        "aria-live": "polite",
+        "data-slot": "media-player-loading",
+        className: cn("fade-in-0 zoom-in-95 pointer-events-none absolute inset-0 z-50 flex animate-in items-center justify-center duration-200", className),
+        ...props
+    };
+    const content = _jsx(Loader2Icon, { className: "size-8 animate-spin text-white" });
+    if (asChild) {
+        const child = React.Children.only(children);
+        return React.cloneElement(child, loadingProps, content);
+    }
+    return _jsx("div", { ...loadingProps, children: content });
+}
+MediaPlayerLoading.displayName = "MediaPlayerLoading";

package/dist/src/components/media-player-loading.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import { Loader2Icon } from "lucide-react"
+import React from "react"
+import { useMediaSelector } from "../context/media-context"
+import { cn } from "../lib/utils"
+
+export interface MediaPlayerLoadingProps {
+	className?: string
+	delayMs?: number
+	asChild?: boolean
+	children?: React.ReactNode
+}
+
+export function MediaPlayerLoading({
+	className,
+	delayMs = 300,
+	asChild = false,
+	children,
+	...props
+}: MediaPlayerLoadingProps) {
+	const isLoading = useMediaSelector((state) => state.isLoading)
+	const [shouldRender, setShouldRender] = React.useState(false)
+	const timeoutRef = React.useRef<NodeJS.Timeout | undefined>(undefined)
+
+	React.useEffect(() => {
+		if (timeoutRef.current) {
+			clearTimeout(timeoutRef.current)
+			timeoutRef.current = undefined
+		}
+
+		if (isLoading) {
+			if (delayMs > 0) {
+				timeoutRef.current = setTimeout(() => {
+					setShouldRender(true)
+					timeoutRef.current = undefined
+				}, delayMs)
+			} else {
+				setShouldRender(true)
+			}
+		} else {
+			setShouldRender(false)
+		}
+
+		return () => {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current)
+				timeoutRef.current = undefined
+			}
+		}
+	}, [isLoading, delayMs])
+
+	if (!shouldRender) return null
+
+	const loadingProps = {
+		role: "status",
+		"aria-live": "polite" as const,
+		"data-slot": "media-player-loading",
+		className: cn(
+			"fade-in-0 zoom-in-95 pointer-events-none absolute inset-0 z-50 flex animate-in items-center justify-center duration-200",
+			className
+		),
+		...props
+	}
+
+	const content = <Loader2Icon className="size-8 animate-spin text-white" />
+
+	if (asChild) {
+		const child = React.Children.only(children) as React.ReactElement
+		return React.cloneElement(child, loadingProps as any, content)
+	}
+
+	return <div {...loadingProps}>{content}</div>
+}
+
+MediaPlayerLoading.displayName = "MediaPlayerLoading"

package/dist/src/components/media-player-play.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface MediaPlayerPlayProps {
+    className?: string;
+    asChild?: boolean;
+    children?: React.ReactNode;
+}
+export declare function MediaPlayerPlay({ className, asChild, children, ...props }: MediaPlayerPlayProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MediaPlayerPlay {
+    var displayName: string;
+}
+//# sourceMappingURL=media-player-play.d.ts.map

package/dist/src/components/media-player-play.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-play.d.ts","sourceRoot":"","sources":["media-player-play.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,MAAM,WAAW,oBAAoB;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,eAAe,CAAC,EAC/B,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,oBAAoB,2CAgDtB;yBArDe,eAAe"}

package/dist/src/components/media-player-play.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "@rp/ui/components/button";
+import { PauseIcon, PlayIcon } from "lucide-react";
+import React from "react";
+import { MediaActionTypes, useMediaContext, useMediaDispatch, useMediaSelector } from "../context/media-context";
+import { MediaPlayerTooltip } from "./media-player-tooltip";
+export function MediaPlayerPlay({ className, asChild = false, children, ...props }) {
+    const context = useMediaContext();
+    const dispatch = useMediaDispatch();
+    const isPlaying = useMediaSelector((state) => state.isPlaying);
+    const disabled = useMediaSelector((state) => state.error !== null);
+    const handleClick = React.useCallback((event) => {
+        event.preventDefault();
+        const mediaElement = context.mediaRef.current;
+        if (!mediaElement || disabled)
+            return;
+        dispatch({
+            type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
+        });
+    }, [dispatch, context.mediaRef, isPlaying, disabled]);
+    const buttonProps = {
+        type: "button",
+        "aria-controls": context.mediaId,
+        "aria-label": isPlaying ? "Pause" : "Play",
+        "aria-pressed": isPlaying,
+        "data-disabled": disabled ? "" : undefined,
+        "data-slot": "media-player-play",
+        "data-state": isPlaying ? "playing" : "paused",
+        disabled,
+        variant: "ghost",
+        size: "icon",
+        className: "size-8 [&_svg:not([class*='fill-'])]:fill-current",
+        onClick: handleClick,
+        ...props
+    };
+    const content = isPlaying ? _jsx(PauseIcon, { className: "size-4" }) : _jsx(PlayIcon, { className: "size-4" });
+    if (asChild) {
+        const child = React.Children.only(children);
+        return React.cloneElement(child, buttonProps, content);
+    }
+    return (_jsx(MediaPlayerTooltip, { tooltip: isPlaying ? "Pause" : "Play", shortcut: "Space", children: _jsx(Button, { ...buttonProps, children: content }) }));
+}
+MediaPlayerPlay.displayName = "MediaPlayerPlay";

package/dist/src/components/media-player-play.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import { Button } from "@rp/ui/components/button"
+import { PauseIcon, PlayIcon } from "lucide-react"
+import React from "react"
+import {
+	MediaActionTypes,
+	useMediaContext,
+	useMediaDispatch,
+	useMediaSelector
+} from "../context/media-context"
+import { MediaPlayerTooltip } from "./media-player-tooltip"
+
+export interface MediaPlayerPlayProps {
+	className?: string
+	asChild?: boolean
+	children?: React.ReactNode
+}
+
+export function MediaPlayerPlay({
+	className,
+	asChild = false,
+	children,
+	...props
+}: MediaPlayerPlayProps) {
+	const context = useMediaContext()
+	const dispatch = useMediaDispatch()
+	const isPlaying = useMediaSelector((state) => state.isPlaying)
+	const disabled = useMediaSelector((state) => state.error !== null)
+
+	const handleClick = React.useCallback(
+		(event: React.MouseEvent) => {
+			event.preventDefault()
+
+			const mediaElement = context.mediaRef.current
+			if (!mediaElement || disabled) return
+
+			dispatch({
+				type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
+			})
+		},
+		[dispatch, context.mediaRef, isPlaying, disabled]
+	)
+
+	const buttonProps = {
+		type: "button" as const,
+		"aria-controls": context.mediaId,
+		"aria-label": isPlaying ? "Pause" : "Play",
+		"aria-pressed": isPlaying,
+		"data-disabled": disabled ? "" : undefined,
+		"data-slot": "media-player-play",
+		"data-state": isPlaying ? "playing" : "paused",
+		disabled,
+		variant: "ghost" as const,
+		size: "icon" as const,
+		className: "size-8 [&_svg:not([class*='fill-'])]:fill-current",
+		onClick: handleClick,
+		...props
+	}
+
+	const content = isPlaying ? <PauseIcon className="size-4" /> : <PlayIcon className="size-4" />
+
+	if (asChild) {
+		const child = React.Children.only(children) as React.ReactElement
+		return React.cloneElement(child, buttonProps as any, content)
+	}
+
+	return (
+		<MediaPlayerTooltip tooltip={isPlaying ? "Pause" : "Play"} shortcut="Space">
+			<Button {...buttonProps}>{content}</Button>
+		</MediaPlayerTooltip>
+	)
+}
+
+MediaPlayerPlay.displayName = "MediaPlayerPlay"

package/dist/src/components/media-player-root.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+export interface MediaPlayerRootProps {
+    children: React.ReactNode;
+    className?: string;
+    dir?: "ltr" | "rtl";
+    disabled?: boolean;
+    asChild?: boolean;
+    autoHide?: boolean;
+    tooltipDelayDuration?: number;
+    tooltipSideOffset?: number;
+    withoutTooltip?: boolean;
+    enableGestures?: boolean;
+    enableMobileOptimizations?: boolean;
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+    onTimeUpdate?: (currentTime: number) => void;
+    onVolumeChange?: (volume: number) => void;
+    onMuted?: (muted: boolean) => void;
+    onMediaError?: (error: string) => void;
+    onPipError?: (error: Error) => void;
+    onFullscreenChange?: (isFullscreen: boolean) => void;
+}
+export declare function MediaPlayerRoot(props: MediaPlayerRootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MediaPlayerRoot {
+    var displayName: string;
+}
+//# sourceMappingURL=media-player-root.d.ts.map

package/dist/src/components/media-player-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-root.d.ts","sourceRoot":"","sources":["media-player-root.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AA0BzB,MAAM,WAAW,oBAAoB;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAA;IAGxB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,yBAAyB,CAAC,EAAE,OAAO,CAAA;IAGnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IACnC,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAA;CACpD;AAsRD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAM1D;yBANe,eAAe"}