xertica-ui 2.2.1 → 2.4.0

package/components/media/audio-player/index.ts

@@ -1 +1 @@
-export * from './AudioPlayer';
+export * from './AudioPlayer';

package/components/media/audio-player/use-audio-player.ts

@@ -1,312 +1,312 @@
-import { useState, useRef, useEffect, useCallback } from 'react';
-import { useIsMobile } from '../../shared/use-mobile';
-import { useOptionalLayout } from '../../../contexts/LayoutContext';
-
-export interface UseAudioPlayerProps {
-  /** Source URL of the audio file */
-  src?: string;
-  /** Whether to play automatically on mount */
-  autoPlay?: boolean;
-  /** Initial playback time in seconds */
-  initialTime?: number;
-  /** Total duration in seconds (optional — loaded from metadata if not provided) */
-  initialDuration?: number;
-  /** Display variant: 'card' (standard floating) or 'bar' (global fixed bar) */
-  variant?: 'card' | 'bar';
-  /** Whether the player is currently visible and open (only for 'bar' variant) */
-  isOpen?: boolean;
-  /** Whether the player should automatically float when scrolled out of view */
-  enableAutoFloat?: boolean;
-  /** Callback fired when user manually closes the floating player */
-  onCloseFloating?: () => void;
-}
-
-export interface UseAudioPlayerReturn {
-  // ── Refs ──────────────────────────────────────────────────────────────────
-  audioRef: React.RefObject<HTMLAudioElement>;
-  containerRef: React.RefObject<HTMLDivElement>;
-
-  // ── Playback state ────────────────────────────────────────────────────────
-  isPlaying: boolean;
-  currentTime: number;
-  duration: number;
-  volume: number;
-  isMuted: boolean;
-  playbackSpeed: number;
-
-  // ── UI state ──────────────────────────────────────────────────────────────
-  isFloating: boolean;
-  isManualFloating: boolean;
-  isVisible: boolean;
-  isMobile: boolean;
-  enableAutoFloatLocal: boolean;
-
-  // ── Layout context (for 'bar' variant positioning) ────────────────────────
-  sidebarExpanded: boolean;
-  sidebarWidth: number;
-  assistenteExpanded: boolean;
-
-  // ── Handlers ──────────────────────────────────────────────────────────────
-  togglePlay: () => void;
-  toggleMute: () => void;
-  handleSeek: (value: number[]) => void;
-  handleVolumeChange: (value: number[]) => void;
-  handleSetFloating: (floating: boolean) => void;
-  handleEnableManualFloat: () => void;
-  setPlaybackSpeed: (speed: number) => void;
-  resetAudio: () => void;
-
-  // ── Audio element event handlers (for use in <audio> JSX) ─────────────────
-  onPlay: () => void;
-  onPause: () => void;
-  onEnded: () => void;
-  onTimeUpdate: (e: React.SyntheticEvent<HTMLAudioElement>) => void;
-  onLoadedMetadata: (e: React.SyntheticEvent<HTMLAudioElement>) => void;
-
-  // ── Utilities ─────────────────────────────────────────────────────────────
-  formatTime: (time: number) => string;
-}
-
-/**
- * `useAudioPlayer` — Headless hook for the AudioPlayer component.
- *
- * Encapsulates all state management and side effects for audio playback,
- * including auto-float on scroll, mobile detection, and layout context integration.
- *
- * @example
- * ```tsx
- * import { useAudioPlayer } from './use-audio-player';
- *
- * function MyCustomPlayer({ src }: { src: string }) {
- *   const { isPlaying, togglePlay, formatTime, currentTime, duration } = useAudioPlayer({ src });
- *   return (
- *     <div>
- *       <button onClick={togglePlay}>{isPlaying ? 'Pause' : 'Play'}</button>
- *       <span>{formatTime(currentTime)} / {formatTime(duration)}</span>
- *     </div>
- *   );
- * }
- * ```
- */
-export function useAudioPlayer({
-  src,
-  autoPlay = false,
-  initialTime = 0,
-  initialDuration,
-  variant = 'card',
-  isOpen = true,
-  enableAutoFloat = true,
-  onCloseFloating,
-}: UseAudioPlayerProps = {}): UseAudioPlayerReturn {
-  const audioRef = useRef<HTMLAudioElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  // Layout context for 'bar' variant positioning
-  const layout = useOptionalLayout();
-  const sidebarExpanded = layout?.sidebarExpanded ?? false;
-  const sidebarWidth = layout?.sidebarWidth ?? 256;
-  const assistenteExpanded = layout?.assistenteExpanded ?? false;
-
-  // Mobile detection via shared hook (replaces inline window.innerWidth < 768)
-  const isMobile = useIsMobile();
-
-  // ── Playback state ──────────────────────────────────────────────────────────
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [volume, setVolume] = useState(0.8);
-  const [isMuted, setIsMuted] = useState(false);
-  const [currentTime, setCurrentTime] = useState(initialTime);
-  const [duration, setDuration] = useState(initialDuration || 0);
-  const [playbackSpeed, setPlaybackSpeedState] = useState(1);
-
-  // ── Float state ─────────────────────────────────────────────────────────────
-  const [isFloating, setIsFloating] = useState(false);
-  const [isManualFloating, setIsManualFloating] = useState(false);
-  const [enableAutoFloatLocal, setEnableAutoFloatLocal] = useState(enableAutoFloat);
-
-  // ── Visibility state ────────────────────────────────────────────────────────
-  const [isVisible, setIsVisible] = useState(variant === 'card');
-
-  // ── Latest-ref pattern (avoids stale closures in mode-switch effect) ────────
-  const currentTimeRef = useRef(currentTime);
-  const isPlayingRef = useRef(isPlaying);
-
-  // ── Effects ─────────────────────────────────────────────────────────────────
-
-  // Sync latest-refs
-  useEffect(() => {
-    currentTimeRef.current = currentTime;
-  }, [currentTime]);
-  useEffect(() => {
-    isPlayingRef.current = isPlaying;
-  }, [isPlaying]);
-
-  // Handle visibility for 'bar' variant
-  useEffect(() => {
-    if (variant === 'bar') {
-      if (isOpen) {
-        setIsVisible(true);
-      } else {
-        const timer = setTimeout(() => setIsVisible(false), 300);
-        return () => clearTimeout(timer);
-      }
-    } else {
-      setIsVisible(true);
-    }
-  }, [isOpen, variant]);
-
-  // Sync audio ref with state updates (volume, mute, speed)
-  useEffect(() => {
-    const audio = audioRef.current;
-    if (!audio) return;
-    audio.volume = volume;
-    audio.muted = isMuted;
-    audio.playbackRate = playbackSpeed;
-  }, [volume, isMuted, playbackSpeed, src]);
-
-  // Auto-float on scroll logic (only for 'card' variant)
-  useEffect(() => {
-    if (variant !== 'card' || !enableAutoFloatLocal) return;
-    const container = containerRef.current;
-    if (!container) return;
-    if (typeof IntersectionObserver === 'undefined') return;
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (isPlaying && !entry.isIntersecting && !isFloating) {
-          if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
-          setIsFloating(true);
-        } else if (entry.isIntersecting && isFloating && !isManualFloating) {
-          if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
-          setIsFloating(false);
-          setIsManualFloating(false);
-        }
-      },
-      { threshold: 0.2 }
-    );
-
-    observer.observe(container);
-    return () => observer.disconnect();
-  }, [isPlaying, isFloating, isManualFloating, variant, enableAutoFloatLocal]);
-
-  // Restore state when switching modes (remounting audio element)
-  useEffect(() => {
-    const audio = audioRef.current;
-    if (audio) {
-      if (Math.abs(audio.currentTime - currentTimeRef.current) > 0.5) {
-        audio.currentTime = currentTimeRef.current;
-      }
-      if (isPlayingRef.current) {
-        audio.play().catch(err => console.log('Playback interrupted:', err));
-      }
-    }
-  }, [isFloating, variant]); // sem eslint-disable
-
-  // ── Handlers ────────────────────────────────────────────────────────────────
-
-  const handleSetFloating = useCallback(
-    (floating: boolean) => {
-      if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
-      setIsFloating(floating);
-      if (!floating) {
-        setIsManualFloating(false);
-        if (onCloseFloating) onCloseFloating();
-      }
-    },
-    [onCloseFloating]
-  );
-
-  const togglePlay = useCallback(() => {
-    if (audioRef.current) {
-      if (isPlaying) {
-        audioRef.current.pause();
-      } else {
-        audioRef.current.play().catch(err => console.log('Playback error:', err));
-      }
-    }
-  }, [isPlaying]);
-
-  const toggleMute = useCallback(() => {
-    setIsMuted(prev => !prev);
-  }, []);
-
-  const handleSeek = useCallback((value: number[]) => {
-    if (audioRef.current) {
-      audioRef.current.currentTime = value[0];
-      setCurrentTime(value[0]);
-    }
-  }, []);
-
-  const handleVolumeChange = useCallback((value: number[]) => {
-    const newVolume = value[0];
-    setVolume(newVolume);
-    setIsMuted(newVolume === 0);
-  }, []);
-
-  const handleEnableManualFloat = useCallback(() => {
-    setEnableAutoFloatLocal(true);
-    setIsManualFloating(true);
-    if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
-    setIsFloating(true);
-  }, []);
-
-  const setPlaybackSpeed = useCallback((speed: number) => {
-    setPlaybackSpeedState(speed);
-  }, []);
-
-  const resetAudio = useCallback(() => {
-    if (audioRef.current) {
-      audioRef.current.currentTime = 0;
-    }
-  }, []);
-
-  const formatTime = useCallback((time: number): string => {
-    if (isNaN(time) || time === Infinity || !isFinite(time)) return '0:00';
-    const minutes = Math.floor(time / 60);
-    const seconds = Math.floor(time % 60);
-    return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
-  }, []);
-
-  // ── Audio element event handlers ─────────────────────────────────────────────
-  const onPlay = useCallback(() => setIsPlaying(true), []);
-  const onPause = useCallback(() => setIsPlaying(false), []);
-  const onEnded = useCallback(() => setIsPlaying(false), []);
-  const onTimeUpdate = useCallback((e: React.SyntheticEvent<HTMLAudioElement>) => {
-    setCurrentTime(e.currentTarget.currentTime);
-  }, []);
-  const onLoadedMetadata = useCallback((e: React.SyntheticEvent<HTMLAudioElement>) => {
-    setDuration(e.currentTarget.duration);
-  }, []);
-
-  return {
-    audioRef,
-    containerRef,
-    isPlaying,
-    currentTime,
-    duration,
-    volume,
-    isMuted,
-    playbackSpeed,
-    isFloating,
-    isManualFloating,
-    isVisible,
-    isMobile,
-    enableAutoFloatLocal,
-    sidebarExpanded,
-    sidebarWidth,
-    assistenteExpanded,
-    togglePlay,
-    toggleMute,
-    handleSeek,
-    handleVolumeChange,
-    handleSetFloating,
-    handleEnableManualFloat,
-    setPlaybackSpeed,
-    resetAudio,
-    onPlay,
-    onPause,
-    onEnded,
-    onTimeUpdate,
-    onLoadedMetadata,
-    formatTime,
-  };
-}
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { useIsMobile } from '../../shared/use-mobile';
+import { useOptionalLayout } from '../../../contexts/LayoutContext';
+
+export interface UseAudioPlayerProps {
+  /** Source URL of the audio file */
+  src?: string;
+  /** Whether to play automatically on mount */
+  autoPlay?: boolean;
+  /** Initial playback time in seconds */
+  initialTime?: number;
+  /** Total duration in seconds (optional — loaded from metadata if not provided) */
+  initialDuration?: number;
+  /** Display variant: 'card' (standard floating) or 'bar' (global fixed bar) */
+  variant?: 'card' | 'bar';
+  /** Whether the player is currently visible and open (only for 'bar' variant) */
+  isOpen?: boolean;
+  /** Whether the player should automatically float when scrolled out of view */
+  enableAutoFloat?: boolean;
+  /** Callback fired when user manually closes the floating player */
+  onCloseFloating?: () => void;
+}
+
+export interface UseAudioPlayerReturn {
+  // ── Refs ──────────────────────────────────────────────────────────────────
+  audioRef: React.RefObject<HTMLAudioElement>;
+  containerRef: React.RefObject<HTMLDivElement>;
+
+  // ── Playback state ────────────────────────────────────────────────────────
+  isPlaying: boolean;
+  currentTime: number;
+  duration: number;
+  volume: number;
+  isMuted: boolean;
+  playbackSpeed: number;
+
+  // ── UI state ──────────────────────────────────────────────────────────────
+  isFloating: boolean;
+  isManualFloating: boolean;
+  isVisible: boolean;
+  isMobile: boolean;
+  enableAutoFloatLocal: boolean;
+
+  // ── Layout context (for 'bar' variant positioning) ────────────────────────
+  sidebarExpanded: boolean;
+  sidebarWidth: number;
+  assistenteExpanded: boolean;
+
+  // ── Handlers ──────────────────────────────────────────────────────────────
+  togglePlay: () => void;
+  toggleMute: () => void;
+  handleSeek: (value: number[]) => void;
+  handleVolumeChange: (value: number[]) => void;
+  handleSetFloating: (floating: boolean) => void;
+  handleEnableManualFloat: () => void;
+  setPlaybackSpeed: (speed: number) => void;
+  resetAudio: () => void;
+
+  // ── Audio element event handlers (for use in <audio> JSX) ─────────────────
+  onPlay: () => void;
+  onPause: () => void;
+  onEnded: () => void;
+  onTimeUpdate: (e: React.SyntheticEvent<HTMLAudioElement>) => void;
+  onLoadedMetadata: (e: React.SyntheticEvent<HTMLAudioElement>) => void;
+
+  // ── Utilities ─────────────────────────────────────────────────────────────
+  formatTime: (time: number) => string;
+}
+
+/**
+ * `useAudioPlayer` — Headless hook for the AudioPlayer component.
+ *
+ * Encapsulates all state management and side effects for audio playback,
+ * including auto-float on scroll, mobile detection, and layout context integration.
+ *
+ * @example
+ * ```tsx
+ * import { useAudioPlayer } from './use-audio-player';
+ *
+ * function MyCustomPlayer({ src }: { src: string }) {
+ *   const { isPlaying, togglePlay, formatTime, currentTime, duration } = useAudioPlayer({ src });
+ *   return (
+ *     <div>
+ *       <button onClick={togglePlay}>{isPlaying ? 'Pause' : 'Play'}</button>
+ *       <span>{formatTime(currentTime)} / {formatTime(duration)}</span>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useAudioPlayer({
+  src,
+  autoPlay = false,
+  initialTime = 0,
+  initialDuration,
+  variant = 'card',
+  isOpen = true,
+  enableAutoFloat = true,
+  onCloseFloating,
+}: UseAudioPlayerProps = {}): UseAudioPlayerReturn {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Layout context for 'bar' variant positioning
+  const layout = useOptionalLayout();
+  const sidebarExpanded = layout?.sidebarExpanded ?? false;
+  const sidebarWidth = layout?.sidebarWidth ?? 256;
+  const assistenteExpanded = layout?.assistenteExpanded ?? false;
+
+  // Mobile detection via shared hook (replaces inline window.innerWidth < 768)
+  const isMobile = useIsMobile();
+
+  // ── Playback state ──────────────────────────────────────────────────────────
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [volume, setVolume] = useState(0.8);
+  const [isMuted, setIsMuted] = useState(false);
+  const [currentTime, setCurrentTime] = useState(initialTime);
+  const [duration, setDuration] = useState(initialDuration || 0);
+  const [playbackSpeed, setPlaybackSpeedState] = useState(1);
+
+  // ── Float state ─────────────────────────────────────────────────────────────
+  const [isFloating, setIsFloating] = useState(false);
+  const [isManualFloating, setIsManualFloating] = useState(false);
+  const [enableAutoFloatLocal, setEnableAutoFloatLocal] = useState(enableAutoFloat);
+
+  // ── Visibility state ────────────────────────────────────────────────────────
+  const [isVisible, setIsVisible] = useState(variant === 'card');
+
+  // ── Latest-ref pattern (avoids stale closures in mode-switch effect) ────────
+  const currentTimeRef = useRef(currentTime);
+  const isPlayingRef = useRef(isPlaying);
+
+  // ── Effects ─────────────────────────────────────────────────────────────────
+
+  // Sync latest-refs
+  useEffect(() => {
+    currentTimeRef.current = currentTime;
+  }, [currentTime]);
+  useEffect(() => {
+    isPlayingRef.current = isPlaying;
+  }, [isPlaying]);
+
+  // Handle visibility for 'bar' variant
+  useEffect(() => {
+    if (variant === 'bar') {
+      if (isOpen) {
+        setIsVisible(true);
+      } else {
+        const timer = setTimeout(() => setIsVisible(false), 300);
+        return () => clearTimeout(timer);
+      }
+    } else {
+      setIsVisible(true);
+    }
+  }, [isOpen, variant]);
+
+  // Sync audio ref with state updates (volume, mute, speed)
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    audio.volume = volume;
+    audio.muted = isMuted;
+    audio.playbackRate = playbackSpeed;
+  }, [volume, isMuted, playbackSpeed, src]);
+
+  // Auto-float on scroll logic (only for 'card' variant)
+  useEffect(() => {
+    if (variant !== 'card' || !enableAutoFloatLocal) return;
+    const container = containerRef.current;
+    if (!container) return;
+    if (typeof IntersectionObserver === 'undefined') return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (isPlaying && !entry.isIntersecting && !isFloating) {
+          if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
+          setIsFloating(true);
+        } else if (entry.isIntersecting && isFloating && !isManualFloating) {
+          if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
+          setIsFloating(false);
+          setIsManualFloating(false);
+        }
+      },
+      { threshold: 0.2 }
+    );
+
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [isPlaying, isFloating, isManualFloating, variant, enableAutoFloatLocal]);
+
+  // Restore state when switching modes (remounting audio element)
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (audio) {
+      if (Math.abs(audio.currentTime - currentTimeRef.current) > 0.5) {
+        audio.currentTime = currentTimeRef.current;
+      }
+      if (isPlayingRef.current) {
+        audio.play().catch(err => console.log('Playback interrupted:', err));
+      }
+    }
+  }, [isFloating, variant]); // sem eslint-disable
+
+  // ── Handlers ────────────────────────────────────────────────────────────────
+
+  const handleSetFloating = useCallback(
+    (floating: boolean) => {
+      if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
+      setIsFloating(floating);
+      if (!floating) {
+        setIsManualFloating(false);
+        if (onCloseFloating) onCloseFloating();
+      }
+    },
+    [onCloseFloating]
+  );
+
+  const togglePlay = useCallback(() => {
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause();
+      } else {
+        audioRef.current.play().catch(err => console.log('Playback error:', err));
+      }
+    }
+  }, [isPlaying]);
+
+  const toggleMute = useCallback(() => {
+    setIsMuted(prev => !prev);
+  }, []);
+
+  const handleSeek = useCallback((value: number[]) => {
+    if (audioRef.current) {
+      audioRef.current.currentTime = value[0];
+      setCurrentTime(value[0]);
+    }
+  }, []);
+
+  const handleVolumeChange = useCallback((value: number[]) => {
+    const newVolume = value[0];
+    setVolume(newVolume);
+    setIsMuted(newVolume === 0);
+  }, []);
+
+  const handleEnableManualFloat = useCallback(() => {
+    setEnableAutoFloatLocal(true);
+    setIsManualFloating(true);
+    if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
+    setIsFloating(true);
+  }, []);
+
+  const setPlaybackSpeed = useCallback((speed: number) => {
+    setPlaybackSpeedState(speed);
+  }, []);
+
+  const resetAudio = useCallback(() => {
+    if (audioRef.current) {
+      audioRef.current.currentTime = 0;
+    }
+  }, []);
+
+  const formatTime = useCallback((time: number): string => {
+    if (isNaN(time) || time === Infinity || !isFinite(time)) return '0:00';
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60);
+    return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+  }, []);
+
+  // ── Audio element event handlers ─────────────────────────────────────────────
+  const onPlay = useCallback(() => setIsPlaying(true), []);
+  const onPause = useCallback(() => setIsPlaying(false), []);
+  const onEnded = useCallback(() => setIsPlaying(false), []);
+  const onTimeUpdate = useCallback((e: React.SyntheticEvent<HTMLAudioElement>) => {
+    setCurrentTime(e.currentTarget.currentTime);
+  }, []);
+  const onLoadedMetadata = useCallback((e: React.SyntheticEvent<HTMLAudioElement>) => {
+    setDuration(e.currentTarget.duration);
+  }, []);
+
+  return {
+    audioRef,
+    containerRef,
+    isPlaying,
+    currentTime,
+    duration,
+    volume,
+    isMuted,
+    playbackSpeed,
+    isFloating,
+    isManualFloating,
+    isVisible,
+    isMobile,
+    enableAutoFloatLocal,
+    sidebarExpanded,
+    sidebarWidth,
+    assistenteExpanded,
+    togglePlay,
+    toggleMute,
+    handleSeek,
+    handleVolumeChange,
+    handleSetFloating,
+    handleEnableManualFloat,
+    setPlaybackSpeed,
+    resetAudio,
+    onPlay,
+    onPause,
+    onEnded,
+    onTimeUpdate,
+    onLoadedMetadata,
+    formatTime,
+  };
+}

package/components/media/index.ts

@@ -1,3 +1,3 @@
-export * from './video-player';
-export * from './audio-player';
-export { FloatingMediaWrapper } from './FloatingMediaWrapper';
+export * from './video-player';
+export * from './audio-player';
+export { FloatingMediaWrapper } from './FloatingMediaWrapper';