xertica-ui 2.5.2 → 2.6.0

package/dist/AudioPlayer-DuKXrCfy.js

@@ -1,937 +0,0 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, useEffect, useRef, useCallback } from "react";
-import { Maximize2, GripHorizontal, X, Play, Pause, VolumeX, Volume2, Maximize, PictureInPicture, Radio, ExternalLink, PauseCircle, PlayCircle, RotateCcw, Info, Gauge, Download, MoreHorizontal, MoreVertical } from "lucide-react";
-import { S as Slider } from "./slider-C0JKA9k3.js";
-import { B as Button, c as cn } from "./button-qkz7Icqf.js";
-import { createPortal } from "react-dom";
-import { b as TooltipProvider, T as Tooltip, c as TooltipTrigger, a as TooltipContent } from "./tooltip-CTyZCD8h.js";
-import { D as DropdownMenu, n as DropdownMenuTrigger, b as DropdownMenuContent, d as DropdownMenuItem, i as DropdownMenuSeparator } from "./dropdown-menu-nc_Lvg-u.js";
-import { u as useAudioPlayer } from "./use-audio-player-Bkh23vQ3.js";
-function FloatingMediaWrapper({
-  children,
-  isFloating,
-  setIsFloating,
-  title,
-  onClose,
-  onCloseMedia,
-  aspectRatio = 16 / 9,
-  className,
-  minWidth = 320,
-  minHeight = 110,
-  colorVariant = "default",
-  playerId = "default",
-  enablePadding = false
-}) {
-  const [isMounted, setIsMounted] = useState(false);
-  useEffect(() => {
-    setIsMounted(true);
-    return () => setIsMounted(false);
-  }, []);
-  if (isFloating) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(
-        "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 },
-          children: [
-            /* @__PURE__ */ jsx(Maximize2, { className: "w-8 h-8 opacity-50" }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Reproduzindo em janela flutuante" }),
-            /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => setIsFloating(false), children: "Restaurar para a página" })
-          ]
-        }
-      ),
-      isMounted && createPortal(
-        /* @__PURE__ */ jsx(
-          FloatingContainer,
-          {
-            setIsFloating,
-            onClose,
-            onCloseMedia,
-            title,
-            aspectRatio,
-            minWidth,
-            minHeight,
-            colorVariant,
-            playerId,
-            enablePadding,
-            children
-          }
-        ),
-        document.body
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsx("div", { className: cn("relative w-full overflow-hidden rounded-[var(--radius-card)]", className), children });
-}
-function FloatingContainer({
-  children,
-  setIsFloating,
-  onClose,
-  onCloseMedia,
-  title,
-  aspectRatio,
-  minWidth,
-  minHeight,
-  colorVariant,
-  playerId = "default",
-  enablePadding = false
-}) {
-  const minPlayerHeight = minWidth / aspectRatio;
-  const containerRef = useRef(null);
-  const resizeHandleRef = useRef(null);
-  const getInitialState = useCallback(() => {
-    var _a;
-    const storageKey = `xertica-media-player-${playerId}`;
-    const stored = typeof window !== "undefined" ? (_a = window.localStorage) == null ? void 0 : _a.getItem(storageKey) : null;
-    if (stored) {
-      try {
-        return JSON.parse(stored);
-      } catch {
-      }
-    }
-    return {
-      position: {
-        x: typeof window !== "undefined" ? window.innerWidth - minWidth - 24 : 0,
-        y: typeof window !== "undefined" ? window.innerHeight - minPlayerHeight - 24 : 0
-      },
-      size: {
-        width: minWidth,
-        height: minPlayerHeight
-      }
-    };
-  }, [minWidth, minPlayerHeight, playerId]);
-  const [state, setState] = useState(getInitialState);
-  const { position, size } = state;
-  const [isDragging, setIsDragging] = useState(false);
-  const [isResizing, setIsResizing] = useState(false);
-  const dragStartPos = useRef({ x: 0, y: 0 });
-  const dragStartOffset = useRef({ x: 0, y: 0 });
-  const resizeStartState = useRef({ position: { x: 0, y: 0 }, size: { width: 0, height: 0 } });
-  const saveState = useCallback((newPosition, newSize) => {
-    var _a;
-    if (typeof window === "undefined") return;
-    const storageKey = `xertica-media-player-${playerId}`;
-    (_a = window.localStorage) == null ? void 0 : _a.setItem(storageKey, JSON.stringify({ position: newPosition, size: newSize }));
-  }, [playerId]);
-  const handleMouseDown = (e) => {
-    setIsDragging(true);
-    dragStartPos.current = { x: e.clientX, y: e.clientY };
-    dragStartOffset.current = { x: position.x, y: position.y };
-  };
-  const handleResizeStart = (e, direction) => {
-    e.stopPropagation();
-    setIsResizing(true);
-    resizeHandleRef.current = direction;
-    dragStartPos.current = { x: e.clientX, y: e.clientY };
-    resizeStartState.current = { position: { ...position }, size: { ...size } };
-  };
-  const handleMouseMove = useCallback((e) => {
-    if (isDragging) {
-      const deltaX = e.clientX - dragStartPos.current.x;
-      const deltaY = e.clientY - dragStartPos.current.y;
-      const newPos = {
-        x: dragStartOffset.current.x + deltaX,
-        y: dragStartOffset.current.y + deltaY
-      };
-      setState((prev) => ({ ...prev, position: newPos }));
-      saveState(newPos, state.size);
-    }
-    if (isResizing && resizeHandleRef.current) {
-      const deltaX = e.clientX - dragStartPos.current.x;
-      const deltaY = e.clientY - dragStartPos.current.y;
-      const direction = resizeHandleRef.current;
-      let newPos = { ...resizeStartState.current.position };
-      let newSize = { ...resizeStartState.current.size };
-      if (direction.includes("right")) {
-        newSize.width = Math.max(minWidth, resizeStartState.current.size.width + deltaX);
-      }
-      if (direction.includes("left")) {
-        const newW = Math.max(minWidth, resizeStartState.current.size.width - deltaX);
-        newPos.x = resizeStartState.current.position.x + (resizeStartState.current.size.width - newW);
-        newSize.width = newW;
-      }
-      if (direction.includes("bottom")) {
-        newSize.height = Math.max(minHeight, resizeStartState.current.size.height + deltaY);
-      }
-      if (direction.includes("top")) {
-        const newH = Math.max(minHeight, resizeStartState.current.size.height - deltaY);
-        newPos.y = resizeStartState.current.position.y + (resizeStartState.current.size.height - newH);
-        newSize.height = newH;
-      }
-      setState({ position: newPos, size: newSize });
-      saveState(newPos, newSize);
-    }
-  }, [isDragging, isResizing, state.size, minWidth, minHeight, saveState]);
-  const handleMouseUp = useCallback(() => {
-    setIsDragging(false);
-    setIsResizing(false);
-    resizeHandleRef.current = null;
-  }, []);
-  useEffect(() => {
-    if (!isDragging && !isResizing) return;
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isDragging, isResizing, handleMouseMove, handleMouseUp]);
-  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 pointer-events-none z-50 overflow-hidden", children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: containerRef,
-      className: "pointer-events-auto absolute",
-      style: {
-        transform: `translate(${position.x}px, ${position.y}px)`,
-        width: size.width,
-        height: size.height
-      },
-      role: "dialog",
-      "aria-label": title || "Reproduzindo Mídia",
-      children: /* @__PURE__ */ jsxs("div", { className: cn(
-        "shadow-2xl rounded-[var(--radius-card)] overflow-hidden border backdrop-blur-sm",
-        colorVariant === "primary" ? "bg-primary border-primary-foreground/20 text-primary-foreground" : "border-border bg-card/95 text-card-foreground"
-      ), children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full w-full", children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "h-9 backdrop-blur-sm border-b flex items-center justify-between px-2 cursor-move select-none",
-                colorVariant === "primary" ? "bg-primary-foreground/10 border-primary-foreground/10" : "bg-muted/20 border-border/40"
-              ),
-              onMouseDown: handleMouseDown,
-              style: { touchAction: "none", userSelect: "none" },
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: cn(
-                  "flex items-center gap-2 text-[10px] uppercase tracking-wider font-bold truncate flex-1",
-                  colorVariant === "primary" ? "text-primary-foreground" : "text-muted-foreground"
-                ), children: [
-                  /* @__PURE__ */ jsx(GripHorizontal, { className: "w-3.5 h-3.5" }),
-                  /* @__PURE__ */ jsx("span", { className: "truncate max-w-[150px]", children: title || "Reproduzindo Mídia" })
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "icon",
-                    className: cn(
-                      "h-7 w-7 rounded-full transition-colors",
-                      colorVariant === "primary" ? "text-primary-foreground/70 hover:bg-destructive/20 hover:text-destructive-foreground" : "text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
-                    ),
-                    onClick: onCloseMedia || onClose,
-                    title: "Fechar",
-                    "aria-label": "Fechar player",
-                    children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
-                  }
-                ) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: cn("flex-1 relative overflow-hidden group", enablePadding && "p-2", colorVariant === "primary" ? "bg-primary" : "bg-card"), children })
-        ] }),
-        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "absolute top-0 left-0 w-2 h-full cursor-ew-resize hover:bg-primary/20 transition-colors", onMouseDown: (e) => handleResizeStart(e, "left") }),
-        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "absolute top-0 right-0 w-2 h-full cursor-ew-resize hover:bg-primary/20 transition-colors", onMouseDown: (e) => handleResizeStart(e, "right") }),
-        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "absolute top-0 left-0 w-full h-2 cursor-ns-resize hover:bg-primary/20 transition-colors", onMouseDown: (e) => handleResizeStart(e, "top") }),
-        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "absolute bottom-0 left-0 w-full h-2 cursor-ns-resize hover:bg-primary/20 transition-colors", onMouseDown: (e) => handleResizeStart(e, "bottom") }),
-        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "absolute top-0 left-0 w-4 h-4 cursor-nwse-resize hover:bg-primary/20 transition-colors", onMouseDown: (e) => handleResizeStart(e, "top-left") }),
-        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "absolute top-0 right-0 w-4 h-4 cursor-nesw-resize hover:bg-primary/20 transition-colors", onMouseDown: (e) => handleResizeStart(e, "top-right") }),
-        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "absolute bottom-0 left-0 w-4 h-4 cursor-nesw-resize hover:bg-primary/20 transition-colors", onMouseDown: (e) => handleResizeStart(e, "bottom-left") }),
-        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "absolute bottom-0 right-0 w-4 h-4 cursor-nwse-resize hover:bg-primary/20 transition-colors", onMouseDown: (e) => handleResizeStart(e, "bottom-right") })
-      ] })
-    }
-  ) });
-}
-function VideoPlayer({
-  src,
-  poster,
-  title = "Untitled Video",
-  autoPlay = false,
-  enableAutoFloat = true,
-  className
-}) {
-  const videoRef = useRef(null);
-  const containerRef = useRef(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);
-  const [showControls, setShowControls] = useState(true);
-  const [enableAutoFloatLocal, setEnableAutoFloatLocal] = useState(enableAutoFloat);
-  let controlsTimeout;
-  const handleSetFloating = (floating) => {
-    if (videoRef.current) {
-      setCurrentTime(videoRef.current.currentTime);
-    }
-    setIsFloating(floating);
-    if (!floating) {
-      setIsManualFloating(false);
-    }
-  };
-  useEffect(() => {
-    const video = videoRef.current;
-    if (video) {
-      if (Math.abs(video.currentTime - currentTime) > 0.5) {
-        video.currentTime = currentTime;
-      }
-      if (isPlaying) {
-        const playPromise = video.play();
-        if (playPromise !== void 0) {
-          playPromise.catch((error) => {
-            console.log("Playback interrupted during switch:", error);
-          });
-        }
-      }
-    }
-  }, [isFloating]);
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container || !enableAutoFloatLocal) return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const entry = entries[0];
-        if (!entry) return;
-        if (isPlaying && !entry.isIntersecting && !isFloating) {
-          if (videoRef.current) setCurrentTime(videoRef.current.currentTime);
-          setIsFloating(true);
-        } else if (entry.isIntersecting && isFloating && !isManualFloating) {
-          if (videoRef.current) setCurrentTime(videoRef.current.currentTime);
-          handleSetFloating(false);
-        }
-      },
-      { threshold: 0.2 }
-    );
-    observer.observe(container);
-    return () => observer.disconnect();
-  }, [isPlaying, isFloating, isManualFloating, enableAutoFloatLocal]);
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!video) return;
-    const updateTime = () => {
-      setCurrentTime(video.currentTime);
-    };
-    const updateDuration = () => setDuration(video.duration);
-    const onPlay = () => setIsPlaying(true);
-    const onPause = () => setIsPlaying(false);
-    video.addEventListener("timeupdate", updateTime);
-    video.addEventListener("loadedmetadata", updateDuration);
-    video.addEventListener("play", onPlay);
-    video.addEventListener("pause", onPause);
-    video.volume = volume;
-    video.muted = isMuted;
-    return () => {
-      video.removeEventListener("timeupdate", updateTime);
-      video.removeEventListener("loadedmetadata", updateDuration);
-      video.removeEventListener("play", onPlay);
-      video.removeEventListener("pause", onPause);
-    };
-  }, [isFloating]);
-  const togglePlay = () => {
-    if (videoRef.current) {
-      if (isPlaying) {
-        videoRef.current.pause();
-      } else {
-        videoRef.current.play();
-      }
-    }
-  };
-  const handleSeek = (value) => {
-    if (videoRef.current) {
-      videoRef.current.currentTime = value[0];
-      setCurrentTime(value[0]);
-    }
-  };
-  const handleVolumeChange = (value) => {
-    const newVolume = value[0];
-    if (videoRef.current) {
-      videoRef.current.volume = newVolume;
-      setVolume(newVolume);
-      setIsMuted(newVolume === 0);
-    }
-  };
-  const toggleMute = () => {
-    if (videoRef.current) {
-      const newMutedState = !isMuted;
-      videoRef.current.muted = newMutedState;
-      setIsMuted(newMutedState);
-      if (newMutedState) {
-        setVolume(0);
-      } else {
-        setVolume(1);
-        videoRef.current.volume = 1;
-      }
-    }
-  };
-  const handleMouseMove = () => {
-    setShowControls(true);
-    clearTimeout(controlsTimeout);
-    controlsTimeout = setTimeout(() => {
-      if (isPlaying) setShowControls(false);
-    }, 2500);
-  };
-  const formatTime = (time) => {
-    const minutes = Math.floor(time / 60);
-    const seconds = Math.floor(time % 60);
-    return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
-  };
-  return /* @__PURE__ */ jsx("div", { ref: containerRef, className, children: /* @__PURE__ */ jsx(
-    FloatingMediaWrapper,
-    {
-      isFloating,
-      setIsFloating: handleSetFloating,
-      onClose: () => handleSetFloating(false),
-      onCloseMedia: () => {
-        setIsFloating(false);
-        setEnableAutoFloatLocal(false);
-      },
-      title,
-      aspectRatio: 16 / 9,
-      className: "w-full h-full",
-      playerId: "video-player",
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "relative w-full h-full bg-black group overflow-hidden",
-          onMouseMove: handleMouseMove,
-          onMouseLeave: () => isPlaying && setShowControls(false),
-          children: [
-            /* @__PURE__ */ jsx(
-              "video",
-              {
-                ref: videoRef,
-                src,
-                poster,
-                className: "w-full h-full object-contain",
-                onClick: togglePlay,
-                autoPlay,
-                title: title || "Vídeo"
-              }
-            ),
-            !isPlaying && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full bg-black/40 backdrop-blur-sm flex items-center justify-center border border-white/20 shadow-2xl", children: /* @__PURE__ */ jsx(Play, { className: "w-8 h-8 text-white ml-1", fill: "white" }) }) }),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn(
-                  "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent pt-12 pb-4 px-4 transition-opacity duration-300",
-                  showControls ? "opacity-100" : "opacity-0"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "mb-4 group/slider", children: /* @__PURE__ */ jsx(
-                    Slider,
-                    {
-                      value: [currentTime],
-                      max: duration || 100,
-                      step: 1,
-                      onValueChange: handleSeek,
-                      className: "cursor-pointer [&_[data-slot=slider-track]]:bg-white/30 [&_[data-slot=slider-range]]:bg-white [&_[data-slot=slider-thumb]]:bg-white [&_[data-slot=slider-thumb]]:border-white",
-                      "aria-label": "Progresso do vídeo"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-                      /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          variant: "ghost",
-                          size: "icon",
-                          className: "text-white hover:text-white hover:bg-black/50 h-8 w-8",
-                          onClick: togglePlay,
-                          "aria-label": isPlaying ? "Pausar" : "Reproduzir",
-                          children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: "w-5 h-5", fill: "currentColor" }) : /* @__PURE__ */ jsx(Play, { className: "w-5 h-5", fill: "currentColor" })
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 group/vol", children: [
-                        /* @__PURE__ */ jsx(
-                          Button,
-                          {
-                            variant: "ghost",
-                            size: "icon",
-                            className: "text-white hover:text-white hover:bg-black/50 h-8 w-8",
-                            onClick: toggleMute,
-                            "aria-label": isMuted || volume === 0 ? "Ativar som" : "Desativar som",
-                            children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(Volume2, { className: "w-5 h-5" })
-                          }
-                        ),
-                        /* @__PURE__ */ jsx("div", { className: "w-0 overflow-hidden group-hover/vol:w-20 transition-all duration-300", children: /* @__PURE__ */ jsx(
-                          Slider,
-                          {
-                            value: [isMuted ? 0 : volume],
-                            max: 1,
-                            step: 0.01,
-                            onValueChange: handleVolumeChange,
-                            className: "w-20 [&_[data-slot=slider-track]]:bg-white/30 [&_[data-slot=slider-range]]:bg-white [&_[data-slot=slider-thumb]]:bg-white [&_[data-slot=slider-thumb]]:border-white",
-                            "aria-label": "Volume"
-                          }
-                        ) })
-                      ] }),
-                      /* @__PURE__ */ jsxs("div", { className: "text-white text-xs font-medium tabular-nums select-none drop-shadow-md", children: [
-                        formatTime(currentTime),
-                        " / ",
-                        formatTime(duration)
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        variant: "ghost",
-                        size: "icon",
-                        className: "text-white hover:text-white hover:bg-black/50 h-8 w-8",
-                        onClick: () => {
-                          setEnableAutoFloatLocal(true);
-                          if (!isFloating) setIsManualFloating(true);
-                          handleSetFloating(!isFloating);
-                        },
-                        title: isFloating ? "Restaurar" : "Pop-out Player",
-                        "aria-label": isFloating ? "Restaurar" : "Pop-out Player",
-                        children: isFloating ? /* @__PURE__ */ jsx(Maximize, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(PictureInPicture, { className: "w-4 h-4" })
-                      }
-                    ) })
-                  ] })
-                ]
-              }
-            )
-          ]
-        }
-      )
-    }
-  ) });
-}
-function AudioPlayer({
-  src,
-  title = "Áudio",
-  artist,
-  subtitle,
-  autoPlay = false,
-  className,
-  variant = "card",
-  isOpen = true,
-  onClose,
-  duration: initialDuration,
-  currentTime: initialTime = 0,
-  colorVariant = "default",
-  enableAutoFloat = true,
-  onCloseFloating
-}) {
-  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
-  });
-  const audioElement = /* @__PURE__ */ jsx(
-    "audio",
-    {
-      ref: audioRef,
-      src,
-      autoPlay,
-      className: "hidden",
-      onTimeUpdate,
-      onLoadedMetadata,
-      onPlay,
-      onPause,
-      onEnded
-    }
-  );
-  const desktopLayout = /* @__PURE__ */ jsxs("div", { className: cn("px-6 flex items-center justify-between gap-4", colorVariant === "primary" ? "h-[80px] gap-6" : "h-[80px]"), children: [
-    /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col min-w-0 shrink-0 relative z-10", colorVariant === "primary" ? "w-[280px]" : "w-[280px]"), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-0.5", children: [
-        colorVariant === "primary" ? /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[var(--chart-4)] animate-pulse shrink-0" }) : /* @__PURE__ */ jsx(Radio, { className: "w-3 h-3 text-[var(--chart-4)] animate-pulse shrink-0" }),
-        /* @__PURE__ */ jsx("h4", { className: cn("truncate", colorVariant === "primary" ? "font-semibold text-base tracking-tight" : "font-medium text-base"), title, children: title })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1 text-xs text-muted-foreground", colorVariant === "primary" && "opacity-80"), children: [
-        /* @__PURE__ */ jsx("span", { className: "truncate", children: subtitle || artist }),
-        /* @__PURE__ */ jsx(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") })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("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"), children: [
-      /* @__PURE__ */ jsx(
-        "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"),
-          children: isPlaying ? /* @__PURE__ */ jsx(PauseCircle, { className: cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"), strokeWidth: colorVariant === "primary" ? 1 : 1.5 }) : /* @__PURE__ */ jsx(PlayCircle, { className: cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"), strokeWidth: colorVariant === "primary" ? 1 : 1.5 })
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center gap-3 max-w-lg", children: [
-        /* @__PURE__ */ jsx("span", { className: cn("text-xs font-mono shrink-0 w-10 text-right", colorVariant === "primary" ? "text-[11px] w-12 opacity-80" : "text-muted-foreground"), children: formatTime(currentTime) }),
-        /* @__PURE__ */ jsx(
-          Slider,
-          {
-            value: [currentTime],
-            max: duration || 100,
-            onValueChange: handleSeek,
-            className: "cursor-pointer"
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: cn("text-xs font-mono shrink-0 w-10", colorVariant === "primary" ? "text-[11px] w-12 opacity-80" : "text-muted-foreground"), children: formatTime(duration) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0 relative z-10", children: [
-      /* @__PURE__ */ jsxs("div", { className: "hidden lg:flex items-center gap-2 w-28 mr-2 group", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: toggleMute,
-            className: "text-muted-foreground hover:text-foreground",
-            "aria-label": isMuted || volume === 0 ? "Ativar som" : "Desativar som",
-            children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(Volume2, { className: "w-5 h-5" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Slider,
-          {
-            value: [isMuted ? 0 : volume * 100],
-            max: 100,
-            onValueChange: (val) => handleVolumeChange([val[0] / 100]),
-            className: "w-full opacity-60 group-hover:opacity-100 transition-opacity"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxs("div", { className: "hidden md:flex", children: [
-          /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "rounded-full h-9 w-9", onClick: resetAudio, "aria-label": "Recomecar audio", children: /* @__PURE__ */ jsx(RotateCcw, { className: "w-4 h-4" }) }) }),
-            /* @__PURE__ */ jsx(TooltipContent, { className: "z-[1001]", children: "Recomeçar" })
-          ] }) }),
-          /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "text-[var(--chart-3)] hover:bg-accent rounded-full h-9 w-9", "aria-label": "Informacoes do audio", children: /* @__PURE__ */ jsx(Info, { className: "w-4 h-4 fill-current" }) }) }),
-            /* @__PURE__ */ jsx(TooltipContent, { className: "z-[1001]", children: "Informações" })
-          ] }) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "hidden xl:flex items-center gap-1", children: [
-          /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "rounded-full h-9 w-9", "aria-label": "Selecionar velocidade", children: /* @__PURE__ */ jsx(Gauge, { className: "w-4 h-4" }) }) }),
-            /* @__PURE__ */ jsx(DropdownMenuContent, { align: "center", className: "w-32 z-[1001]", children: [0.5, 1, 1.5, 2].map((speed) => /* @__PURE__ */ jsxs(
-              DropdownMenuItem,
-              {
-                onClick: () => setPlaybackSpeed(speed),
-                className: cn("cursor-pointer", playbackSpeed === speed && "bg-accent font-bold"),
-                children: [
-                  speed,
-                  "x"
-                ]
-              },
-              speed
-            )) })
-          ] }),
-          /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "rounded-full h-9 w-9", "aria-label": "Baixar audio", children: /* @__PURE__ */ jsx(Download, { className: "w-4 h-4" }) }) }),
-            /* @__PURE__ */ jsx(TooltipContent, { className: "z-[1001]", children: "Baixar Áudio" })
-          ] }) })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "xl:hidden", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "rounded-full h-9 w-9", "aria-label": "Mais opcoes", children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "w-5 h-5" }) }) }),
-          /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56 p-2 z-[1001]", children: [
-            /* @__PURE__ */ jsxs("div", { className: "lg:hidden", children: [
-              /* @__PURE__ */ jsxs("div", { className: "px-2 py-3", children: [
-                /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-3 px-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "w-4 h-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(Volume2, { className: "w-4 h-4 text-muted-foreground" }),
-                  /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70", children: "Volume" })
-                ] }) }),
-                /* @__PURE__ */ jsx(Slider, { value: [isMuted ? 0 : volume * 100], max: 100, onValueChange: (val) => handleVolumeChange([val[0] / 100]) })
-              ] }),
-              /* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "my-1" })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "md:hidden", children: [
-              /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: resetAudio, className: "cursor-pointer py-2.5", children: [
-                /* @__PURE__ */ jsx(RotateCcw, { className: "w-4 h-4 mr-3 text-muted-foreground" }),
-                " Recomeçar"
-              ] }),
-              /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "cursor-pointer py-2.5", children: [
-                /* @__PURE__ */ jsx(Info, { className: "w-4 h-4 mr-3 text-muted-foreground" }),
-                " Informações"
-              ] }),
-              /* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "my-1" })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "xl:hidden", children: [
-              /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 flex flex-col gap-2", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx(Gauge, { className: "w-4 h-4 text-muted-foreground" }),
-                  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Velocidade" })
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: [0.5, 1, 1.5, 2].map((speed) => /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    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"
-                    ),
-                    children: [
-                      speed,
-                      "x"
-                    ]
-                  },
-                  speed
-                )) })
-              ] }),
-              /* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "my-1" }),
-              /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "cursor-pointer py-2.5", children: [
-                /* @__PURE__ */ jsx(Download, { className: "w-4 h-4 mr-3 text-muted-foreground" }),
-                " Baixar Áudio"
-              ] })
-            ] })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsx("div", { className: "w-px h-8 bg-border mx-1" }),
-        /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "ghost", size: "icon", className: "rounded-full h-9 w-9", "aria-label": "Fechar player", children: /* @__PURE__ */ jsx(X, { className: "w-5 h-5" }) })
-      ] })
-    ] })
-  ] });
-  const mobileLayout = /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col py-3 px-4 gap-3", colorVariant === "primary" && "py-4 px-5 gap-4"), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
-          colorVariant === "primary" ? /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[var(--chart-4)] animate-pulse shrink-0" }) : /* @__PURE__ */ jsx(Radio, { className: "w-3 h-3 text-[var(--chart-4)] animate-pulse shrink-0" }),
-          /* @__PURE__ */ jsx("h4", { className: cn("truncate", colorVariant === "primary" ? "font-semibold text-sm tracking-tight" : "font-medium text-sm"), children: title })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1.5 text-xs text-muted-foreground", colorVariant === "primary" && "opacity-70"), children: /* @__PURE__ */ jsx("span", { className: "truncate", children: subtitle || artist }) })
-      ] }),
-      /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "ghost", size: "icon", className: "rounded-full h-8 w-8 shrink-0", "aria-label": "Fechar player", children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" }) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx("button", { onClick: togglePlay, "aria-label": isPlaying ? "Pausar" : "Reproduzir", className: "shrink-0 transition-transform active:scale-95", children: isPlaying ? /* @__PURE__ */ jsx(PauseCircle, { className: cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"), strokeWidth: colorVariant === "primary" ? 1 : 1.5 }) : /* @__PURE__ */ jsx(PlayCircle, { className: cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"), strokeWidth: colorVariant === "primary" ? 1 : 1.5 }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center gap-2", children: /* @__PURE__ */ jsx(
-        Slider,
-        {
-          value: [currentTime],
-          max: duration || 100,
-          onValueChange: handleSeek,
-          className: "cursor-pointer",
-          "aria-label": "Progresso da reprodução"
-        }
-      ) }),
-      /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-9 w-9 rounded-full", "aria-label": "Mais opcoes", children: /* @__PURE__ */ jsx(MoreVertical, { className: "w-5 h-5" }) }) }),
-        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56 p-2 z-[1001]", children: [
-          /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: resetAudio, children: "Recomeçar" }),
-          /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
-            "Velocidade (",
-            playbackSpeed,
-            "x)"
-          ] })
-        ] })
-      ] })
-    ] })
-  ] });
-  const desktopLayoutCompact = /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3 w-full", isFloating ? "px-3 py-1 text-foreground" : "px-4 py-3"), children: [
-    /* @__PURE__ */ jsx(
-      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"
-        ),
-        "aria-label": isPlaying ? "Pausar" : "Reproduzir",
-        children: isPlaying ? /* @__PURE__ */ jsx(Pause, { className: cn(isFloating ? "w-3 h-3" : "w-4 h-4", "fill-current") }) : /* @__PURE__ */ jsx(Play, { className: cn(isFloating ? "w-3 h-3" : "w-4 h-4", "fill-current ml-0.5") })
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex flex-col justify-center gap-1.5", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs leading-none", children: [
-        /* @__PURE__ */ jsx("span", { className: cn("font-medium truncate", colorVariant === "primary" ? "text-primary-foreground" : "text-foreground"), children: title }),
-        /* @__PURE__ */ jsxs("span", { className: cn("font-medium tabular-nums text-[10px] sm:text-xs", colorVariant === "primary" ? "text-primary-foreground/70" : "text-muted-foreground"), children: [
-          formatTime(currentTime),
-          " / ",
-          formatTime(duration)
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(
-        Slider,
-        {
-          value: [currentTime],
-          max: duration || 100,
-          step: 1,
-          onValueChange: handleSeek,
-          className: "w-full",
-          "aria-label": "Progresso da reprodução"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
-      /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-          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",
-            children: /* @__PURE__ */ jsx(MoreVertical, { className: isFloating ? "w-4 h-4" : "w-5 h-5" })
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56 p-2 z-[1001]", children: [
-          /* @__PURE__ */ jsxs("div", { className: "px-2 py-3", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-3 px-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeX, { className: "w-4 h-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(Volume2, { className: "w-4 h-4 text-muted-foreground" }),
-              /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70", children: "Volume" })
-            ] }) }),
-            /* @__PURE__ */ jsx(
-              Slider,
-              {
-                value: [isMuted ? 0 : volume * 100],
-                max: 100,
-                onValueChange: (val) => handleVolumeChange([val[0] / 100]),
-                "aria-label": "Volume"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "my-2" }),
-          /* @__PURE__ */ jsxs("div", { className: "px-2 py-1 flex flex-col gap-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(Gauge, { className: "w-4 h-4 text-muted-foreground" }),
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Velocidade" })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: [0.5, 1, 1.5, 2].map((speed) => /* @__PURE__ */ jsxs(
-              "button",
-              {
-                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"
-                ),
-                children: [
-                  speed,
-                  "x"
-                ]
-              },
-              speed
-            )) })
-          ] }),
-          /* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "my-2" }),
-          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: resetAudio, className: "cursor-pointer py-2.5", children: [
-            /* @__PURE__ */ jsx(RotateCcw, { className: "w-4 h-4 mr-3 text-muted-foreground" }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Recomeçar áudio" })
-          ] }),
-          /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "cursor-pointer py-2.5", children: [
-            /* @__PURE__ */ jsx(Download, { className: "w-4 h-4 mr-3 text-muted-foreground" }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Baixar arquivo" })
-          ] })
-        ] })
-      ] }),
-      !isFloating && /* @__PURE__ */ jsx(
-        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: handleEnableManualFloat,
-          title: "Modo Flutuante",
-          "aria-label": "Abrir modo flutuante",
-          children: /* @__PURE__ */ jsx(Maximize2, { className: "w-4 h-4" })
-        }
-      )
-    ] })
-  ] });
-  if (!isVisible) return null;
-  if (variant === "bar" && isVisible && typeof document !== "undefined") {
-    return createPortal(
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "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",
-            className
-          ),
-          style: {
-            left: isMobile ? 0 : sidebarExpanded ? sidebarWidth : 80,
-            right: isMobile ? 0 : assistenteExpanded ? 420 : 80
-          },
-          children: [
-            audioElement,
-            !isMobile ? desktopLayout : mobileLayout
-          ]
-        }
-      ),
-      document.body
-    );
-  }
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className, children: [
-    audioElement,
-    /* @__PURE__ */ jsx(
-      FloatingMediaWrapper,
-      {
-        isFloating,
-        setIsFloating: handleSetFloating,
-        onClose: () => handleSetFloating(false),
-        onCloseMedia: () => {
-          handleSetFloating(false);
-        },
-        title: "Reproduzindo Mídia",
-        aspectRatio: 320 / 110,
-        minHeight: 110,
-        minWidth: 320,
-        colorVariant,
-        className: "w-full",
-        playerId: "audio-player",
-        enablePadding: true,
-        children: /* @__PURE__ */ jsx("div", { className: cn(
-          "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",
-          isFloating ? "h-full bg-transparent" : "border rounded-md shadow-sm"
-        ), children: desktopLayoutCompact })
-      }
-    )
-  ] });
-}
-export {
-  AudioPlayer as A,
-  FloatingMediaWrapper as F,
-  VideoPlayer as V
-};