xertica-ui 2.1.2 → 2.1.4

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

@@ -0,0 +1,298 @@
+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');
+
+    // ── Effects ─────────────────────────────────────────────────────────────────
+
+    // 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 - currentTime) > 0.5) {
+                audio.currentTime = currentTime;
+            }
+            if (isPlaying) {
+                audio.play().catch(err => console.log('Playback interrupted:', err));
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isFloating, variant]);
+
+    // ── 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/pages/home-page/HomePage.tsx

@@ -48,7 +48,7 @@ export function HomePage({ user, onLogout }: HomePageProps) {
   const [localSidebarExpanded, setLocalSidebarExpanded] = React.useState(false);
   const [localAssistantExpanded, setLocalAssistantExpanded] = React.useState(false);
   const sidebarExpanded = layout?.sidebarExpanded ?? localSidebarExpanded;
-  const sidebarWidth = layout?.sidebarWidth ?? 256;
+  const sidebarWidth = layout?.sidebarWidth ?? 280;
   const assistenteExpanded = layout?.assistenteExpanded ?? localAssistantExpanded;
   const toggleSidebar = layout?.toggleSidebar ?? (() => setLocalSidebarExpanded((value) => !value));
   const toggleAssistente = layout?.toggleAssistente ?? (() => setLocalAssistantExpanded((value) => !value));

package/components/pages/template-content/TemplateContent.tsx

@@ -72,7 +72,7 @@ interface TemplateContentProps {
 export function TemplateContent({ user, onLogout, onSettings }: TemplateContentProps) {
   const layout = useOptionalLayout();
   const [localSidebarExpanded, setLocalSidebarExpanded] = useState(false);
-  const [localSidebarWidth, setLocalSidebarWidth] = useState(256);
+  const [localSidebarWidth, setLocalSidebarWidth] = useState(280);
   const sidebarExpanded = layout?.sidebarExpanded ?? localSidebarExpanded;
   const sidebarWidth = layout?.sidebarWidth ?? localSidebarWidth;
   const setSidebarWidth = layout?.setSidebarWidth ?? setLocalSidebarWidth;
@@ -118,7 +118,7 @@ export function TemplateContent({ user, onLogout, onSettings }: TemplateContentP
           <div className="p-2 sm:p-4 md:p-6">
             <div className="max-w-6xl mx-auto space-y-8">
               {/* Page header */}
-              <PageHeader 
+              <PageHeader
                 title="Página de Template"
                 subtitle="Template completo com componentes do Design System"
               />
@@ -413,10 +413,10 @@ export function TemplateContent({ user, onLogout, onSettings }: TemplateContentP
                         <div className="mb-4">
                           <div className="relative">
                             <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-                            <Input 
-                              placeholder="Buscar usuários..." 
+                            <Input
+                              placeholder="Buscar usuários..."
                               aria-label="Buscar usuários"
-                              className="pl-10" 
+                              className="pl-10"
                             />
                           </div>
                         </div>

package/components/pages/template-page/TemplatePage.tsx

@@ -32,7 +32,7 @@ export function TemplatePage({ user, onLogout }: TemplatePageProps) {
   const [localSidebarExpanded, setLocalSidebarExpanded] = React.useState(false);
   const [localAssistantExpanded, setLocalAssistantExpanded] = React.useState(false);
   const sidebarExpanded = layout?.sidebarExpanded ?? localSidebarExpanded;
-  const sidebarWidth = layout?.sidebarWidth ?? 256;
+  const sidebarWidth = layout?.sidebarWidth ?? 280;
   const assistenteExpanded = layout?.assistenteExpanded ?? localAssistantExpanded;
   const toggleSidebar = layout?.toggleSidebar ?? (() => setLocalSidebarExpanded((value) => !value));
   const toggleAssistente = layout?.toggleAssistente ?? (() => setLocalAssistantExpanded((value) => !value));
@@ -56,10 +56,10 @@ export function TemplatePage({ user, onLogout }: TemplatePageProps) {
         navigate={navigate}
         routes={routes}
       />
-      <TemplateContent 
-        user={user} 
-        onLogout={onLogout} 
-        onSettings={() => navigate('/settings')} 
+      <TemplateContent
+        user={user}
+        onLogout={onLogout}
+        onSettings={() => navigate('/settings')}
       />
       <XerticaAssistant
         isExpanded={assistenteExpanded}

package/components/shared/CustomTooltipContent.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from './utils';
+
+/**
+ * CustomTooltipContent — Tooltip com portal e seta estilo sidebar/assistente.
+ *
+ * Substitui os componentes `SidebarTooltipContent` e `AssistantTooltipContent`
+ * que eram definidos inline em `sidebar.tsx` e `xertica-assistant.tsx`.
+ *
+ * @example
+ * ```tsx
+ * import { Tooltip, TooltipTrigger } from '../ui/tooltip';
+ * import { CustomTooltipContent } from '../shared/CustomTooltipContent';
+ *
+ * <Tooltip>
+ *   <TooltipTrigger asChild><Button>Hover me</Button></TooltipTrigger>
+ *   <CustomTooltipContent side="right">Minha dica</CustomTooltipContent>
+ * </Tooltip>
+ * ```
+ */
+export function CustomTooltipContent({
+    className,
+    sideOffset = 0,
+    children,
+    ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+    return (
+        <TooltipPrimitive.Portal>
+            <TooltipPrimitive.Content
+                data-slot="tooltip-content"
+                sideOffset={sideOffset}
+                className={cn(
+                    'bg-popover text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95',
+                    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+                    'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
+                    'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                    'z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+                    className,
+                )}
+                {...props}
+            >
+                {children}
+                <TooltipPrimitive.Arrow
+                    className="fill-popover z-50 drop-shadow-sm"
+                    width={8}
+                    height={4}
+                />
+            </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+    );
+}

package/components/shared/layout-constants.ts

@@ -1,5 +1,5 @@
 /** Width of the sidebar when expanded (Desktop) */
-export const SIDEBAR_EXPANDED_WIDTH = 256;
+export const SIDEBAR_EXPANDED_WIDTH = 280;
 /** Width of the sidebar when collapsed (Desktop) */
 export const SIDEBAR_COLLAPSED_WIDTH = 80;
 /** Width of the assistant panel when expanded (Desktop) */