xertica-ui 1.0.0

package/components/media/AudioPlayer.tsx

@@ -0,0 +1,278 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Play, Pause, Volume2, VolumeX, Maximize2 } from 'lucide-react';
+import { Slider } from '../ui/slider';
+import { Button } from '../ui/button';
+import { FloatingMediaWrapper } from './FloatingMediaWrapper';
+import { cn } from '../ui/utils';
+
+export interface AudioPlayerProps {
+  src: string;
+  title?: string;
+  artist?: string;
+  coverArt?: string;
+  autoPlay?: boolean;
+  className?: string;
+}
+
+export function AudioPlayer({ 
+  src, 
+  title = "Audio",
+  artist,
+  autoPlay = false,
+  className 
+}: AudioPlayerProps) {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [volume, setVolume] = useState(1);
+  const [isMuted, setIsMuted] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [isFloating, setIsFloating] = useState(false);
+  const [isManualFloating, setIsManualFloating] = useState(false);
+
+  // Wrapper for setIsFloating to handle scroll-on-restore and sync state
+  const handleSetFloating = (floating: boolean) => {
+    // Capture precise time before switching
+    if (audioRef.current) {
+      setCurrentTime(audioRef.current.currentTime);
+    }
+    
+    setIsFloating(floating);
+    
+    if (!floating) {
+      setIsManualFloating(false);
+      if (containerRef.current) {
+        containerRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }
+    }
+  };
+
+  // Restore state when switching modes (remounting audio element)
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (audio) {
+      // If we are switching modes, restore time and play state
+      if (Math.abs(audio.currentTime - currentTime) > 0.5) {
+         audio.currentTime = currentTime;
+      }
+      if (isPlaying) {
+         const playPromise = audio.play();
+         if (playPromise !== undefined) {
+            playPromise.catch(error => {
+               // Auto-play might be blocked or interrupted
+               console.log("Playback interrupted during switch:", error);
+            });
+         }
+      }
+    }
+    // We depend on isFloating to trigger this check when the DOM node is recreated
+    // But we also need to attach listeners to the new node
+  }, [isFloating]); 
+
+  // Auto-float on scroll logic
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (isPlaying && !entry.isIntersecting && !isFloating) {
+           // Sync time before floating
+           if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
+           setIsFloating(true);
+        }
+        else if (entry.isIntersecting && isFloating && !isManualFloating) {
+           // Sync time before docking
+           if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
+           handleSetFloating(false);
+        }
+      },
+      { threshold: 0.2 } 
+    );
+
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [isPlaying, isFloating, isManualFloating]);
+
+  // Main Audio Event Listeners
+  // We need to re-run this effect when isFloating changes because audioRef.current changes
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    const updateTime = () => {
+      setCurrentTime(audio.currentTime);
+    };
+
+    const updateDuration = () => setDuration(audio.duration);
+    const onPlay = () => setIsPlaying(true);
+    const onPause = () => setIsPlaying(false);
+
+    audio.addEventListener('timeupdate', updateTime);
+    audio.addEventListener('loadedmetadata', updateDuration);
+    audio.addEventListener('play', onPlay);
+    audio.addEventListener('pause', onPause);
+
+    // Initial volume set
+    audio.volume = volume;
+    audio.muted = isMuted;
+
+    return () => {
+      audio.removeEventListener('timeupdate', updateTime);
+      audio.removeEventListener('loadedmetadata', updateDuration);
+      audio.removeEventListener('play', onPlay);
+      audio.removeEventListener('pause', onPause);
+    };
+  }, [isFloating]); // Depend on isFloating to re-attach listeners to new element
+
+  const togglePlay = () => {
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause();
+      } else {
+        audioRef.current.play();
+      }
+    }
+  };
+
+  const handleSeek = (value: number[]) => {
+    if (audioRef.current) {
+      audioRef.current.currentTime = value[0];
+      setCurrentTime(value[0]);
+    }
+  };
+
+  const handleVolumeChange = (value: number[]) => {
+    const newVolume = value[0];
+    if (audioRef.current) {
+      audioRef.current.volume = newVolume;
+      setVolume(newVolume);
+      setIsMuted(newVolume === 0);
+    }
+  };
+
+  const formatTime = (time: number) => {
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60);
+    return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+  };
+
+  const PlayerControls = ({ isCompact = false }) => (
+    <div className={cn("flex items-center gap-3 w-full", isCompact ? "px-3 py-1" : "px-4 py-3")}>
+      <Button 
+        onClick={togglePlay}
+        size="icon"
+        variant="outline"
+        className={cn(
+          "shrink-0 rounded-full border-primary/20 text-primary hover:bg-primary/5 hover:text-primary hover:border-primary/50 transition-colors",
+          isCompact ? "h-8 w-8" : "h-10 w-10"
+        )}
+      >
+        {isPlaying ? <Pause className="w-4 h-4 fill-current" /> : <Play className="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">
+            <div className="flex items-center gap-2 truncate">
+              <span className="font-medium text-foreground truncate">{title}</span>
+              {artist && !isCompact && <span className="text-muted-foreground hidden sm:inline-block border-l pl-2 border-border truncate">{artist}</span>}
+            </div>
+            <div className="text-muted-foreground font-medium tabular-nums shrink-0 text-[10px] sm:text-xs">
+              {formatTime(currentTime)} / {formatTime(duration || 0)}
+            </div>
+          </div>
+          
+          <Slider
+            value={[currentTime]}
+            max={duration || 100}
+            step={1}
+            onValueChange={handleSeek}
+            className="w-full"
+          />
+      </div>
+
+      <div className="flex items-center gap-1 shrink-0">
+          {!isCompact && (
+            <div className="hidden sm:flex items-center gap-2 group/volume mr-2">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 text-muted-foreground hover:text-foreground"
+                onClick={() => {
+                    const newMuted = !isMuted;
+                    setIsMuted(newMuted);
+                    if (audioRef.current) audioRef.current.muted = newMuted;
+                }}
+              >
+                {isMuted ? <VolumeX className="w-4 h-4" /> : <Volume2 className="w-4 h-4" />}
+              </Button>
+              <div className="w-0 overflow-hidden group-hover/volume:w-20 transition-all duration-300">
+                  <Slider
+                    value={[isMuted ? 0 : volume]}
+                    max={1}
+                    step={0.01}
+                    onValueChange={handleVolumeChange}
+                    className="w-20"
+                  />
+              </div>
+            </div>
+          )}
+
+          {!isCompact && (
+             <div className="w-px h-6 bg-border mx-1 hidden sm:block" />
+          )}
+
+          {!isCompact && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 text-muted-foreground hover:text-foreground"
+              onClick={() => {
+                setIsManualFloating(true);
+                handleSetFloating(true);
+              }}
+              title="Modo Flutuante"
+            >
+              <Maximize2 className="w-4 h-4" />
+            </Button>
+          )}
+      </div>
+    </div>
+  );
+
+  return (
+    <div ref={containerRef} className={className}>
+      <FloatingMediaWrapper
+        isFloating={isFloating}
+        setIsFloating={handleSetFloating}
+        onCloseMedia={() => {
+          setIsPlaying(false);
+          setIsFloating(false); 
+          if (audioRef.current) audioRef.current.pause();
+        }}
+        title={title}
+        aspectRatio={320/110} 
+        minHeight={110}
+        minWidth={320}
+        className="w-full"
+      >
+        <div className={cn(
+          "bg-card w-full overflow-hidden flex flex-col justify-center",
+          isFloating 
+            ? "h-full bg-transparent text-primary-foreground [&_.text-muted-foreground]:text-primary-foreground/80 [&_.text-foreground]:text-primary-foreground [&_.text-primary]:text-primary-foreground [&_.border-primary\\/20]:border-primary-foreground/30 [&_.hover\\:bg-primary\\/5]:hover:bg-primary-foreground/10 [&_[data-slot=slider-track]]:bg-primary-foreground/20 [&_[data-slot=slider-range]]:bg-primary-foreground [&_[data-slot=slider-thumb]]:border-primary-foreground" 
+            : "border rounded-md shadow-sm"
+        )}>
+          <audio
+            ref={audioRef}
+            src={src}
+            autoPlay={autoPlay}
+            className="hidden"
+          />
+          <PlayerControls isCompact={isFloating} />
+        </div>
+      </FloatingMediaWrapper>
+    </div>
+  );
+}

package/components/media/FloatingMediaWrapper.tsx

@@ -0,0 +1,166 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { motion } from 'framer-motion';
+import { Resizable } from 're-resizable';
+import { X, GripHorizontal, Maximize2, Minimize2 } from 'lucide-react';
+import { Button } from '../ui/button';
+import { cn } from '../ui/utils';
+
+interface FloatingMediaWrapperProps {
+  children: React.ReactNode;
+  isFloating: boolean;
+  setIsFloating: (floating: boolean) => void;
+  title?: string;
+  onClose?: () => void;
+  aspectRatio?: number;
+  className?: string;
+  minWidth?: number;
+  minHeight?: number;
+}
+
+export function FloatingMediaWrapper({
+  children,
+  isFloating,
+  setIsFloating,
+  title,
+  onClose,
+  aspectRatio = 16 / 9,
+  className,
+  minWidth = 320,
+  minHeight = 180,
+}: FloatingMediaWrapperProps) {
+  const [isMounted, setIsMounted] = useState(false);
+  
+  useEffect(() => {
+    setIsMounted(true);
+    return () => setIsMounted(false);
+  }, []);
+
+  // Placeholder when content is floating
+  if (isFloating) {
+    return (
+      <>
+        <div 
+          className={cn(
+            "w-full rounded-[var(--radius-card)] bg-muted/20 border border-dashed border-muted-foreground/20 flex items-center justify-center flex-col gap-2 p-8 text-muted-foreground transition-all",
+            className
+          )}
+          style={{ aspectRatio }}
+        >
+          <Maximize2 className="w-8 h-8 opacity-50" />
+          <p className="text-sm font-medium">Reproduzindo em janela flutuante</p>
+          <Button variant="outline" size="sm" onClick={() => setIsFloating(false)}>
+            Restaurar para a página
+          </Button>
+        </div>
+        {isMounted && createPortal(
+          <FloatingContainer 
+            onClose={() => setIsFloating(false)}
+            onCloseMedia={onClose}
+            title={title}
+            aspectRatio={aspectRatio}
+            minWidth={minWidth}
+            minHeight={minHeight}
+          >
+            {children}
+          </FloatingContainer>,
+          document.body
+        )}
+      </>
+    );
+  }
+
+  return (
+    <div className={cn("relative w-full overflow-hidden rounded-[var(--radius-card)]", className)}>
+      {children}
+    </div>
+  );
+}
+
+interface FloatingContainerProps {
+  children: React.ReactNode;
+  onClose: () => void;
+  onCloseMedia?: () => void;
+  title?: string;
+  aspectRatio: number;
+  minWidth: number;
+  minHeight: number;
+}
+
+function FloatingContainer({
+  children,
+  onClose,
+  onCloseMedia,
+  title,
+  aspectRatio,
+  minWidth,
+  minHeight
+}: FloatingContainerProps) {
+  // Initial position: bottom right with some margin
+  const initialX = typeof window !== 'undefined' ? window.innerWidth - minWidth - 24 : 0;
+  const initialY = typeof window !== 'undefined' ? window.innerHeight - minHeight - 24 : 0;
+
+  return (
+    <div className="fixed inset-0 pointer-events-none z-50 overflow-hidden">
+      <motion.div
+        drag
+        dragMomentum={false}
+        dragElastic={0.05}
+        initial={{ x: initialX, y: initialY, scale: 0.9, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        exit={{ scale: 0.9, opacity: 0 }}
+        className="pointer-events-auto absolute"
+      >
+        <Resizable
+          defaultSize={{
+            width: minWidth,
+            height: minWidth / aspectRatio,
+          }}
+          minWidth={minWidth}
+          minHeight={minHeight}
+          lockAspectRatio={aspectRatio}
+          enable={{
+            top: true, right: true, bottom: true, left: true,
+            topRight: true, bottomRight: true, bottomLeft: true, topLeft: true
+          }}
+          className="shadow-2xl rounded-[var(--radius-card)] overflow-hidden border border-primary/20 bg-primary/80 backdrop-blur-md text-primary-foreground"
+        >
+          <div className="flex flex-col h-full w-full">
+            {/* Drag Handle & Header */}
+            <div className="h-8 bg-primary-foreground/10 backdrop-blur-sm border-b border-primary-foreground/10 flex items-center justify-between px-2 cursor-move active:cursor-grabbing group z-50">
+              <div className="flex items-center gap-2 text-xs font-medium text-primary-foreground/90 truncate flex-1">
+                <GripHorizontal className="w-4 h-4" />
+                <span className="truncate max-w-[150px]">{title || 'Media Player'}</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <Button 
+                  variant="ghost" 
+                  size="icon" 
+                  className="h-6 w-6 text-primary-foreground/80 hover:bg-primary-foreground/20 hover:text-primary-foreground" 
+                  onClick={onClose}
+                  title="Restaurar"
+                >
+                  <Minimize2 className="w-3 h-3" />
+                </Button>
+                <Button 
+                  variant="ghost" 
+                  size="icon" 
+                  className="h-6 w-6 text-primary-foreground/80 hover:bg-destructive/20 hover:text-destructive" 
+                  onClick={onCloseMedia || onClose}
+                  title="Fechar"
+                >
+                  <X className="w-3 h-3" />
+                </Button>
+              </div>
+            </div>
+            
+            {/* Content */}
+            <div className="flex-1 relative bg-black overflow-hidden group">
+              {children}
+            </div>
+          </div>
+        </Resizable>
+      </motion.div>
+    </div>
+  );
+}