xertica-ui 2.1.2 → 2.1.4

package/components/media/audio-player/AudioPlayer.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React from 'react';
 import { createPortal } from 'react-dom';
 import {
   Play,
@@ -11,7 +11,6 @@ import {
   RotateCcw,
   Gauge,
   Info,
-  RefreshCw,
   Download,
   X,
   ExternalLink,
@@ -33,10 +32,10 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
   DropdownMenuSeparator,
-} from "../../ui/dropdown-menu";
+} from '../../ui/dropdown-menu';
 import { FloatingMediaWrapper } from '../FloatingMediaWrapper';
 import { cn } from '../../shared/utils';
-import { useOptionalLayout } from '../../../contexts/LayoutContext';
+import { useAudioPlayer } from './use-audio-player';
 
 export interface AudioPlayerProps {
   /** Source URL of the audio file */
@@ -73,10 +72,13 @@ export interface AudioPlayerProps {
 
 /**
  * Unified Audio Player component.
+ *
+ * All state and logic is managed by the `useAudioPlayer` headless hook.
+ * This component is responsible only for rendering.
  */
 export function AudioPlayer({
   src,
-  title = "Áudio",
+  title = 'Áudio',
   artist,
   subtitle,
   autoPlay = false,
@@ -88,191 +90,102 @@ export function AudioPlayer({
   currentTime: initialTime = 0,
   colorVariant = 'default',
   enableAutoFloat = true,
-  onCloseFloating
+  onCloseFloating,
 }: AudioPlayerProps) {
-  const audioRef = useRef<HTMLAudioElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const layout = useOptionalLayout();
-  const sidebarExpanded = layout?.sidebarExpanded ?? false;
-  const sidebarWidth = layout?.sidebarWidth ?? 256;
-  const assistenteExpanded = layout?.assistenteExpanded ?? false;
-
-  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 [isFloating, setIsFloating] = useState(false);
-  const [isManualFloating, setIsManualFloating] = useState(false);
-  const [enableAutoFloatLocal, setEnableAutoFloatLocal] = useState(enableAutoFloat);
-  const [isVisible, setIsVisible] = useState(variant === 'card');
-  const [isMobile, setIsMobile] = useState(false);
-  const [playbackSpeed, setPlaybackSpeed] = useState(1);
-
-  // Mobile detection
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    const checkMobile = () => setIsMobile(window.innerWidth < 768);
-    checkMobile();
-    window.addEventListener('resize', checkMobile);
-    return () => window.removeEventListener('resize', checkMobile);
-  }, []);
-
-  // 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)
-  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);
-          handleSetFloating(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));
-      }
-    }
-  }, [isFloating, variant]);
-
-  const handleSetFloating = (floating: boolean) => {
-    if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
-    setIsFloating(floating);
-    if (!floating) {
-      setIsManualFloating(false);
-    }
-  };
-
-  const togglePlay = () => {
-    if (audioRef.current) {
-      if (isPlaying) {
-        audioRef.current.pause();
-      } else {
-        audioRef.current.play().catch(err => console.log("Playback error:", err));
-      }
-    }
-  };
-
-  const toggleMute = () => {
-    setIsMuted(!isMuted);
-  };
-
-  const handleSeek = (value: number[]) => {
-    if (audioRef.current) {
-      audioRef.current.currentTime = value[0];
-      setCurrentTime(value[0]);
-    }
-  };
-
-  const handleVolumeChange = (value: number[]) => {
-    const newVolume = value[0];
-    setVolume(newVolume);
-    setIsMuted(newVolume === 0);
-  };
-
-  const formatTime = (time: number) => {
-    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}`;
-  };
-
+  const {
+    audioRef,
+    containerRef,
+    isPlaying,
+    currentTime,
+    duration,
+    volume,
+    isMuted,
+    playbackSpeed,
+    isFloating,
+    isManualFloating,
+    isVisible,
+    isMobile,
+    enableAutoFloatLocal,
+    sidebarExpanded,
+    sidebarWidth,
+    assistenteExpanded,
+    togglePlay,
+    toggleMute,
+    handleSeek,
+    handleVolumeChange,
+    handleSetFloating,
+    handleEnableManualFloat,
+    setPlaybackSpeed,
+    resetAudio,
+    formatTime,
+    onPlay,
+    onPause,
+    onEnded,
+    onTimeUpdate,
+    onLoadedMetadata,
+  } = useAudioPlayer({
+    src,
+    autoPlay,
+    initialTime,
+    initialDuration,
+    variant,
+    isOpen,
+    enableAutoFloat,
+    onCloseFloating,
+  });
+
+  // ── Audio element (hidden) ──────────────────────────────────────────────────
   const audioElement = (
     <audio
       ref={audioRef}
       src={src}
       autoPlay={autoPlay}
       className="hidden"
-      onTimeUpdate={(e) => setCurrentTime(e.currentTarget.currentTime)}
-      onLoadedMetadata={(e) => setDuration(e.currentTarget.duration)}
-      onPlay={() => setIsPlaying(true)}
-      onPause={() => setIsPlaying(false)}
-      onEnded={() => setIsPlaying(false)}
+      onTimeUpdate={onTimeUpdate}
+      onLoadedMetadata={onLoadedMetadata}
+      onPlay={onPlay}
+      onPause={onPause}
+      onEnded={onEnded}
     />
   );
 
+  // ── Bar variant — desktop layout ────────────────────────────────────────────
   const desktopLayout = (
-    <div className={cn("px-6 flex items-center justify-between gap-4", colorVariant === 'primary' ? "h-[80px] gap-6" : "h-[80px]")}>
+    <div className={cn('px-6 flex items-center justify-between gap-4', colorVariant === 'primary' ? 'h-[80px] gap-6' : 'h-[80px]')}>
       {/* Left: Info */}
-      <div className={cn("flex flex-col min-w-0 shrink-0 relative z-10", colorVariant === 'primary' ? "w-[280px]" : "w-[280px]")}>
+      <div className={cn('flex flex-col min-w-0 shrink-0 relative z-10', colorVariant === 'primary' ? 'w-[280px]' : 'w-[280px]')}>
         <div className="flex items-center gap-2 mb-0.5">
           {colorVariant === 'primary' ? (
             <div className="w-2 h-2 rounded-full bg-[var(--chart-4)] animate-pulse shrink-0" />
           ) : (
             <Radio className="w-3 h-3 text-[var(--chart-4)] animate-pulse shrink-0" />
           )}
-          <h4 className={cn("truncate", colorVariant === 'primary' ? "font-semibold text-base tracking-tight" : "font-medium text-base")} title={title}>
+          <h4 className={cn('truncate', colorVariant === 'primary' ? 'font-semibold text-base tracking-tight' : 'font-medium text-base')} title={title}>
             {title}
           </h4>
         </div>
-        <div className={cn("flex items-center gap-1 text-xs text-muted-foreground", colorVariant === 'primary' && "opacity-80")}>
+        <div className={cn('flex items-center gap-1 text-xs text-muted-foreground', colorVariant === 'primary' && 'opacity-80')}>
           <span className="truncate">{subtitle || artist}</span>
-          <ExternalLink className={cn("w-3 h-3 cursor-pointer hover:text-foreground ml-1 transition-opacity", colorVariant === 'primary' ? "opacity-60 hover:opacity-100" : "opacity-70 hover:opacity-100")} />
+          <ExternalLink className={cn('w-3 h-3 cursor-pointer hover:text-foreground ml-1 transition-opacity', colorVariant === 'primary' ? 'opacity-60 hover:opacity-100' : 'opacity-70 hover:opacity-100')} />
         </div>
       </div>
 
       {/* Center: Controls */}
-      <div className={cn("flex-1 flex items-center justify-center gap-4 min-w-0 max-w-xl relative z-10", colorVariant === 'primary' && "gap-4")}>
+      <div className={cn('flex-1 flex items-center justify-center gap-4 min-w-0 max-w-xl relative z-10', colorVariant === 'primary' && 'gap-4')}>
         <button
           onClick={togglePlay}
-          aria-label={isPlaying ? "Pausar" : "Reproduzir"}
-          className={cn("transition-all focus:outline-none shrink-0", colorVariant === 'primary' ? "hover:scale-110" : "text-muted-foreground hover:text-foreground hover:scale-110 active:scale-95 transform duration-100")}
+          aria-label={isPlaying ? 'Pausar' : 'Reproduzir'}
+          className={cn('transition-all focus:outline-none shrink-0', colorVariant === 'primary' ? 'hover:scale-110' : 'text-muted-foreground hover:text-foreground hover:scale-110 active:scale-95 transform duration-100')}
         >
           {isPlaying ? (
-            <PauseCircle className={cn(colorVariant === 'primary' ? "w-12 h-12" : "w-10 h-10")} strokeWidth={colorVariant === 'primary' ? 1 : 1.5} />
+            <PauseCircle className={cn(colorVariant === 'primary' ? 'w-12 h-12' : 'w-10 h-10')} strokeWidth={colorVariant === 'primary' ? 1 : 1.5} />
           ) : (
-            <PlayCircle className={cn(colorVariant === 'primary' ? "w-12 h-12" : "w-10 h-10")} strokeWidth={colorVariant === 'primary' ? 1 : 1.5} />
+            <PlayCircle className={cn(colorVariant === 'primary' ? 'w-12 h-12' : 'w-10 h-10')} strokeWidth={colorVariant === 'primary' ? 1 : 1.5} />
           )}
         </button>
 
         <div className="flex-1 flex items-center gap-3 max-w-lg">
-          <span className={cn("text-xs font-mono shrink-0 w-10 text-right", colorVariant === 'primary' ? "text-[11px] w-12 opacity-80" : "text-muted-foreground")}>
+          <span className={cn('text-xs font-mono shrink-0 w-10 text-right', colorVariant === 'primary' ? 'text-[11px] w-12 opacity-80' : 'text-muted-foreground')}>
             {formatTime(currentTime)}
           </span>
           <Slider
@@ -281,7 +194,7 @@ export function AudioPlayer({
             onValueChange={handleSeek}
             className="cursor-pointer"
           />
-          <span className={cn("text-xs font-mono shrink-0 w-10", colorVariant === 'primary' ? "text-[11px] w-12 opacity-80" : "text-muted-foreground")}>
+          <span className={cn('text-xs font-mono shrink-0 w-10', colorVariant === 'primary' ? 'text-[11px] w-12 opacity-80' : 'text-muted-foreground')}>
             {formatTime(duration)}
           </span>
         </div>
@@ -293,7 +206,7 @@ export function AudioPlayer({
           <button
             onClick={toggleMute}
             className="text-muted-foreground hover:text-foreground"
-            aria-label={isMuted || volume === 0 ? "Ativar som" : "Desativar som"}
+            aria-label={isMuted || volume === 0 ? 'Ativar som' : 'Desativar som'}
           >
             {isMuted || volume === 0 ? <VolumeX className="w-5 h-5" /> : <Volume2 className="w-5 h-5" />}
           </button>
@@ -310,7 +223,7 @@ export function AudioPlayer({
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon" className="rounded-full h-9 w-9" onClick={() => { if (audioRef.current) audioRef.current.currentTime = 0; }} aria-label="Recomecar audio">
+                  <Button variant="ghost" size="icon" className="rounded-full h-9 w-9" onClick={resetAudio} aria-label="Recomecar audio">
                     <RotateCcw className="w-4 h-4" />
                   </Button>
                 </TooltipTrigger>
@@ -342,7 +255,7 @@ export function AudioPlayer({
                   <DropdownMenuItem
                     key={speed}
                     onClick={() => setPlaybackSpeed(speed)}
-                    className={cn("cursor-pointer", playbackSpeed === speed && "bg-accent font-bold")}
+                    className={cn('cursor-pointer', playbackSpeed === speed && 'bg-accent font-bold')}
                   >
                     {speed}x
                   </DropdownMenuItem>
@@ -384,7 +297,7 @@ export function AudioPlayer({
                 </div>
 
                 <div className="md:hidden">
-                  <DropdownMenuItem onClick={() => { if (audioRef.current) audioRef.current.currentTime = 0; }} className="cursor-pointer py-2.5">
+                  <DropdownMenuItem onClick={resetAudio} className="cursor-pointer py-2.5">
                     <RotateCcw className="w-4 h-4 mr-3 text-muted-foreground" /> Recomeçar
                   </DropdownMenuItem>
                   <DropdownMenuItem className="cursor-pointer py-2.5">
@@ -405,8 +318,8 @@ export function AudioPlayer({
                           key={speed}
                           onClick={() => setPlaybackSpeed(speed)}
                           className={cn(
-                            "px-2 py-0.5 text-[10px] rounded border transition-colors",
-                            playbackSpeed === speed ? "bg-primary text-primary-foreground border-primary" : "bg-transparent border-border hover:bg-accent"
+                            'px-2 py-0.5 text-[10px] rounded border transition-colors',
+                            playbackSpeed === speed ? 'bg-primary text-primary-foreground border-primary' : 'bg-transparent border-border hover:bg-accent'
                           )}
                         >
                           {speed}x
@@ -433,8 +346,9 @@ export function AudioPlayer({
     </div>
   );
 
+  // ── Bar variant — mobile layout ─────────────────────────────────────────────
   const mobileLayout = (
-    <div className={cn("flex flex-col py-3 px-4 gap-3", colorVariant === 'primary' && "py-4 px-5 gap-4")}>
+    <div className={cn('flex flex-col py-3 px-4 gap-3', colorVariant === 'primary' && 'py-4 px-5 gap-4')}>
       <div className="flex items-start justify-between gap-3">
         <div className="flex flex-col min-w-0 flex-1">
           <div className="flex items-center gap-2 mb-1">
@@ -443,9 +357,9 @@ export function AudioPlayer({
             ) : (
               <Radio className="w-3 h-3 text-[var(--chart-4)] animate-pulse shrink-0" />
             )}
-            <h4 className={cn("truncate", colorVariant === 'primary' ? "font-semibold text-sm tracking-tight" : "font-medium text-sm")}>{title}</h4>
+            <h4 className={cn('truncate', colorVariant === 'primary' ? 'font-semibold text-sm tracking-tight' : 'font-medium text-sm')}>{title}</h4>
           </div>
-          <div className={cn("flex items-center gap-1.5 text-xs text-muted-foreground", colorVariant === 'primary' && "opacity-70")}>
+          <div className={cn('flex items-center gap-1.5 text-xs text-muted-foreground', colorVariant === 'primary' && 'opacity-70')}>
             <span className="truncate">{subtitle || artist}</span>
           </div>
         </div>
@@ -455,20 +369,20 @@ export function AudioPlayer({
       </div>
 
       <div className="flex items-center gap-3">
-        <button onClick={togglePlay} aria-label={isPlaying ? "Pausar" : "Reproduzir"} className="shrink-0 transition-transform active:scale-95">
+        <button onClick={togglePlay} aria-label={isPlaying ? 'Pausar' : 'Reproduzir'} className="shrink-0 transition-transform active:scale-95">
           {isPlaying ? (
-            <PauseCircle className={cn(colorVariant === 'primary' ? "w-12 h-12" : "w-10 h-10")} strokeWidth={colorVariant === 'primary' ? 1 : 1.5} />
+            <PauseCircle className={cn(colorVariant === 'primary' ? 'w-12 h-12' : 'w-10 h-10')} strokeWidth={colorVariant === 'primary' ? 1 : 1.5} />
           ) : (
-            <PlayCircle className={cn(colorVariant === 'primary' ? "w-12 h-12" : "w-10 h-10")} strokeWidth={colorVariant === 'primary' ? 1 : 1.5} />
+            <PlayCircle className={cn(colorVariant === 'primary' ? 'w-12 h-12' : 'w-10 h-10')} strokeWidth={colorVariant === 'primary' ? 1 : 1.5} />
           )}
         </button>
 
         <div className="flex-1 flex items-center gap-2">
-          <Slider 
-            value={[currentTime]} 
-            max={duration || 100} 
-            onValueChange={handleSeek} 
-            className="cursor-pointer" 
+          <Slider
+            value={[currentTime]}
+            max={duration || 100}
+            onValueChange={handleSeek}
+            className="cursor-pointer"
             aria-label="Progresso da reprodução"
           />
         </div>
@@ -480,33 +394,34 @@ export function AudioPlayer({
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-56 p-2 z-[1001]">
-            <DropdownMenuItem onClick={() => { if (audioRef.current) audioRef.current.currentTime = 0; }}>Recomeçar</DropdownMenuItem>
-            <DropdownMenuItem>Velocidade (1.0x)</DropdownMenuItem>
+            <DropdownMenuItem onClick={resetAudio}>Recomeçar</DropdownMenuItem>
+            <DropdownMenuItem>Velocidade ({playbackSpeed}x)</DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
     </div>
   );
 
+  // ── Card variant — compact layout ───────────────────────────────────────────
   const desktopLayoutCompact = (
-    <div className={cn("flex items-center gap-3 w-full", isFloating ? "px-3 py-1 text-foreground" : "px-4 py-3")}>
+    <div className={cn('flex items-center gap-3 w-full', isFloating ? 'px-3 py-1 text-foreground' : 'px-4 py-3')}>
       <Button
         onClick={togglePlay}
         size="icon"
         variant="outline"
         className={cn(
-          "shrink-0 rounded-full border-border text-foreground hover:bg-accent transition-colors",
-          colorVariant === 'primary' && "border-primary-foreground/20 hover:bg-primary-foreground/10 text-primary-foreground",
-          isFloating ? "h-8 w-8" : "h-10 w-10"
+          'shrink-0 rounded-full border-border text-foreground hover:bg-accent transition-colors',
+          colorVariant === 'primary' && 'border-primary-foreground/20 hover:bg-primary-foreground/10 text-primary-foreground',
+          isFloating ? 'h-8 w-8' : 'h-10 w-10'
         )}
-        aria-label={isPlaying ? "Pausar" : "Reproduzir"}
+        aria-label={isPlaying ? 'Pausar' : 'Reproduzir'}
       >
-        {isPlaying ? <Pause className={cn(isFloating ? "w-3 h-3" : "w-4 h-4", "fill-current")} /> : <Play className={cn(isFloating ? "w-3 h-3" : "w-4 h-4", "fill-current ml-0.5")} />}
+        {isPlaying ? <Pause className={cn(isFloating ? 'w-3 h-3' : 'w-4 h-4', 'fill-current')} /> : <Play className={cn(isFloating ? 'w-3 h-3' : 'w-4 h-4', 'fill-current ml-0.5')} />}
       </Button>
       <div className="flex-1 min-w-0 flex flex-col justify-center gap-1.5">
         <div className="flex items-center justify-between text-xs leading-none">
-          <span className={cn("font-medium truncate", colorVariant === 'primary' ? "text-primary-foreground" : "text-foreground")}>{title}</span>
-          <span className={cn("font-medium tabular-nums text-[10px] sm:text-xs", colorVariant === 'primary' ? "text-primary-foreground/70" : "text-muted-foreground")}>
+          <span className={cn('font-medium truncate', colorVariant === 'primary' ? 'text-primary-foreground' : 'text-foreground')}>{title}</span>
+          <span className={cn('font-medium tabular-nums text-[10px] sm:text-xs', colorVariant === 'primary' ? 'text-primary-foreground/70' : 'text-muted-foreground')}>
             {formatTime(currentTime)} / {formatTime(duration)}
           </span>
         </div>
@@ -523,8 +438,17 @@ export function AudioPlayer({
       <div className="flex items-center gap-1 shrink-0">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className={cn("rounded-full", colorVariant === 'primary' ? "text-primary-foreground/80 hover:text-primary-foreground hover:bg-primary-foreground/10" : "text-muted-foreground hover:text-foreground", isFloating ? "h-7 w-7" : "h-8 w-8")} aria-label="Mais opções">
-              <MoreVertical className={isFloating ? "w-4 h-4" : "w-5 h-5"} />
+            <Button
+              variant="ghost"
+              size="icon"
+              className={cn(
+                'rounded-full',
+                colorVariant === 'primary' ? 'text-primary-foreground/80 hover:text-primary-foreground hover:bg-primary-foreground/10' : 'text-muted-foreground hover:text-foreground',
+                isFloating ? 'h-7 w-7' : 'h-8 w-8'
+              )}
+              aria-label="Mais opções"
+            >
+              <MoreVertical className={isFloating ? 'w-4 h-4' : 'w-5 h-5'} />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-56 p-2 z-[1001]">
@@ -556,8 +480,8 @@ export function AudioPlayer({
                     key={speed}
                     onClick={() => setPlaybackSpeed(speed)}
                     className={cn(
-                      "px-2 py-1 text-[10px] rounded border transition-colors",
-                      playbackSpeed === speed ? "bg-primary text-primary-foreground border-primary" : "bg-transparent border-border hover:bg-accent"
+                      'px-2 py-1 text-[10px] rounded border transition-colors',
+                      playbackSpeed === speed ? 'bg-primary text-primary-foreground border-primary' : 'bg-transparent border-border hover:bg-accent'
                     )}
                   >
                     {speed}x
@@ -568,7 +492,7 @@ export function AudioPlayer({
 
             <DropdownMenuSeparator className="my-2" />
 
-            <DropdownMenuItem onClick={() => { if (audioRef.current) audioRef.current.currentTime = 0; }} className="cursor-pointer py-2.5">
+            <DropdownMenuItem onClick={resetAudio} className="cursor-pointer py-2.5">
               <RotateCcw className="w-4 h-4 mr-3 text-muted-foreground" />
               <span className="text-sm">Recomeçar áudio</span>
             </DropdownMenuItem>
@@ -584,12 +508,11 @@ export function AudioPlayer({
           <Button
             variant="ghost"
             size="icon"
-            className={cn("h-8 w-8", colorVariant === 'primary' ? "text-primary-foreground/80 hover:text-primary-foreground hover:bg-primary-foreground/10" : "text-muted-foreground hover:text-foreground")}
-            onClick={() => {
-              setEnableAutoFloatLocal(true);
-              setIsManualFloating(true);
-              handleSetFloating(true);
-            }}
+            className={cn(
+              'h-8 w-8',
+              colorVariant === 'primary' ? 'text-primary-foreground/80 hover:text-primary-foreground hover:bg-primary-foreground/10' : 'text-muted-foreground hover:text-foreground'
+            )}
+            onClick={handleEnableManualFloat}
             title="Modo Flutuante"
             aria-label="Abrir modo flutuante"
           >
@@ -600,22 +523,24 @@ export function AudioPlayer({
     </div>
   );
 
+  // ── Early return ────────────────────────────────────────────────────────────
   if (!isVisible) return null;
 
+  // ── Bar variant — portal render ─────────────────────────────────────────────
   if (variant === 'bar' && isVisible && typeof document !== 'undefined') {
     return createPortal(
       <div
         className={cn(
-          "fixed bottom-0 z-[100] border-t transition-all duration-300 ease-in-out",
+          'fixed bottom-0 z-[100] border-t transition-all duration-300 ease-in-out',
           colorVariant === 'primary'
-            ? "bg-primary/95 text-primary-foreground border-primary/20 backdrop-blur-sm [&_.text-muted-foreground]:text-primary-foreground/70 [&_.text-foreground]:text-primary-foreground [&_button]:text-primary-foreground [&_[data-slot=slider-track]]:bg-primary-foreground/30 [&_[data-slot=slider-range]]:bg-primary-foreground [&_[data-slot=slider-thumb]]:border-primary-foreground [&_[data-slot=slider-thumb]]:bg-primary-foreground"
-            : "bg-card/95 text-card-foreground border-border backdrop-blur-md shadow-[var(--elevation-sm)]",
-          isOpen ? "translate-y-0 opacity-100" : "translate-y-full opacity-0",
+            ? 'bg-primary/95 text-primary-foreground border-primary/20 backdrop-blur-sm [&_.text-muted-foreground]:text-primary-foreground/70 [&_.text-foreground]:text-primary-foreground [&_button]:text-primary-foreground [&_[data-slot=slider-track]]:bg-primary-foreground/30 [&_[data-slot=slider-range]]:bg-primary-foreground [&_[data-slot=slider-thumb]]:border-primary-foreground [&_[data-slot=slider-thumb]]:bg-primary-foreground'
+            : 'bg-card/95 text-card-foreground border-border backdrop-blur-md shadow-[var(--elevation-sm)]',
+          isOpen ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0',
           className
         )}
         style={{
           left: isMobile ? 0 : (sidebarExpanded ? sidebarWidth : 80),
-          right: isMobile ? 0 : (assistenteExpanded ? 420 : 80)
+          right: isMobile ? 0 : (assistenteExpanded ? 420 : 80),
         }}
       >
         {audioElement}
@@ -625,6 +550,7 @@ export function AudioPlayer({
     );
   }
 
+  // ── Card variant — floating wrapper render ──────────────────────────────────
   return (
     <div ref={containerRef} className={className}>
       {audioElement}
@@ -633,8 +559,7 @@ export function AudioPlayer({
         setIsFloating={handleSetFloating}
         onClose={() => handleSetFloating(false)}
         onCloseMedia={() => {
-          setIsFloating(false);
-          setEnableAutoFloatLocal(false);
+          handleSetFloating(false);
         }}
         title="Reproduzindo Mídia"
         aspectRatio={320 / 110}
@@ -646,13 +571,13 @@ export function AudioPlayer({
         enablePadding
       >
         <div className={cn(
-          "w-full overflow-hidden flex flex-col justify-center",
+          'w-full overflow-hidden flex flex-col justify-center',
           colorVariant === 'primary'
-            ? "bg-primary text-primary-foreground [&_[data-slot=slider-track]]:bg-white/20 [&_[data-slot=slider-range]]:bg-white [&_[data-slot=slider-thumb]]:border-white [&_[data-slot=slider-thumb]]:bg-white"
-            : "bg-card text-card-foreground",
+            ? 'bg-primary text-primary-foreground [&_[data-slot=slider-track]]:bg-white/20 [&_[data-slot=slider-range]]:bg-white [&_[data-slot=slider-thumb]]:border-white [&_[data-slot=slider-thumb]]:bg-white'
+            : 'bg-card text-card-foreground',
           isFloating
-            ? "h-full bg-transparent"
-            : "border rounded-md shadow-sm"
+            ? 'h-full bg-transparent'
+            : 'border rounded-md shadow-sm'
         )}>
           {desktopLayoutCompact}
         </div>