xertica-ui 2.2.0 → 2.3.0

package/dist/AudioPlayer-9psiEucT.cjs

@@ -0,0 +1,1282 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const reactI18next = require('react-i18next');
+const lucideReact = require('lucide-react');
+const slider = require('./slider-B00b9SVK.cjs');
+const button = require('./button-0BlA47It.cjs');
+const reactDom = require('react-dom');
+const tooltip = require('./tooltip-D8n9UYoU.cjs');
+const dropdownMenu = require('./dropdown-menu-BMcykFDf.cjs');
+const useAudioPlayer = require('./use-audio-player-DGvhPrgR.cjs');
+
+function FloatingMediaWrapper({
+  children,
+  isFloating,
+  setIsFloating,
+  title,
+  onClose,
+  onCloseMedia,
+  aspectRatio = 16 / 9,
+  className,
+  minWidth = 320,
+  minHeight = 110,
+  colorVariant = "default",
+  playerId = "default",
+  enablePadding = false
+}) {
+  const { t } = reactI18next.useTranslation();
+  const [isMounted, setIsMounted] = React.useState(false);
+  React.useEffect(() => {
+    setIsMounted(true);
+    return () => setIsMounted(false);
+  }, []);
+  if (isFloating) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: button.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__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "w-8 h-8 opacity-50" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: t("media.playingFloating") }),
+            /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", size: "sm", onClick: () => setIsFloating(false), children: t("media.restoreToPage") })
+          ]
+        }
+      ),
+      isMounted && reactDom.createPortal(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FloatingContainer,
+          {
+            setIsFloating,
+            onClose,
+            onCloseMedia,
+            title,
+            aspectRatio,
+            minWidth,
+            minHeight,
+            colorVariant,
+            playerId,
+            enablePadding,
+            children
+          }
+        ),
+        document.body
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: button.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 { t } = reactI18next.useTranslation();
+  const minPlayerHeight = minWidth / aspectRatio;
+  const containerRef = React.useRef(null);
+  const resizeHandleRef = React.useRef(null);
+  const getInitialState = React.useCallback(() => {
+    const storageKey = `xertica-media-player-${playerId}`;
+    const stored = typeof window !== "undefined" ? window.localStorage?.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] = React.useState(getInitialState);
+  const { position, size } = state;
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [isResizing, setIsResizing] = React.useState(false);
+  const dragStartPos = React.useRef({ x: 0, y: 0 });
+  const dragStartOffset = React.useRef({ x: 0, y: 0 });
+  const resizeStartState = React.useRef({ position: { x: 0, y: 0 }, size: { width: 0, height: 0 } });
+  const saveState = React.useCallback(
+    (newPosition, newSize) => {
+      if (typeof window === "undefined") return;
+      const storageKey = `xertica-media-player-${playerId}`;
+      window.localStorage?.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 = React.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 = React.useCallback(() => {
+    setIsDragging(false);
+    setIsResizing(false);
+    resizeHandleRef.current = null;
+  }, []);
+  React.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__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 pointer-events-none z-50 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.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 || t("media.playingMedia"),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: button.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full w-full", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: button.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__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        className: button.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__ */ jsxRuntime.jsx(lucideReact.GripHorizontal, { className: "w-3.5 h-3.5" }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate max-w-[150px]", children: title || t("media.playingMedia") })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      button.Button,
+                      {
+                        variant: "ghost",
+                        size: "icon",
+                        className: button.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: t("common.close"),
+                        "aria-label": t("media.closePlayer"),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: button.cn(
+                    "flex-1 relative overflow-hidden group",
+                    enablePadding && "p-2",
+                    colorVariant === "primary" ? "bg-primary" : "bg-card"
+                  ),
+                  children
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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,
+  autoPlay = false,
+  enableAutoFloat = true,
+  className
+}) {
+  const { t } = reactI18next.useTranslation();
+  const videoRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const [isPlaying, setIsPlaying] = React.useState(false);
+  const [progress, setProgress] = React.useState(0);
+  const [volume, setVolume] = React.useState(1);
+  const [isMuted, setIsMuted] = React.useState(false);
+  const [currentTime, setCurrentTime] = React.useState(0);
+  const [duration, setDuration] = React.useState(0);
+  const [isFloating, setIsFloating] = React.useState(false);
+  const [isManualFloating, setIsManualFloating] = React.useState(false);
+  const [showControls, setShowControls] = React.useState(true);
+  const [enableAutoFloatLocal, setEnableAutoFloatLocal] = React.useState(enableAutoFloat);
+  let controlsTimeout;
+  const handleSetFloating = (floating) => {
+    if (videoRef.current) {
+      setCurrentTime(videoRef.current.currentTime);
+    }
+    setIsFloating(floating);
+    if (!floating) {
+      setIsManualFloating(false);
+    }
+  };
+  React.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]);
+  React.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]);
+  React.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__ */ jsxRuntime.jsx("div", { ref: containerRef, className, children: /* @__PURE__ */ jsxRuntime.jsx(
+    FloatingMediaWrapper,
+    {
+      isFloating,
+      setIsFloating: handleSetFloating,
+      onClose: () => handleSetFloating(false),
+      onCloseMedia: () => {
+        setIsFloating(false);
+        setEnableAutoFloatLocal(false);
+      },
+      title: title || t("media.untitledVideo"),
+      aspectRatio: 16 / 9,
+      className: "w-full h-full",
+      playerId: "video-player",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "relative w-full h-full bg-black group overflow-hidden",
+          onMouseMove: handleMouseMove,
+          onMouseLeave: () => isPlaying && setShowControls(false),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "video",
+              {
+                ref: videoRef,
+                src,
+                poster,
+                className: "w-full h-full object-contain",
+                onClick: togglePlay,
+                autoPlay,
+                title: title || t("media.video")
+              }
+            ),
+            !isPlaying && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Play, { className: "w-8 h-8 text-white ml-1", fill: "white" }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: button.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__ */ jsxRuntime.jsx("div", { className: "mb-4 group/slider", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    slider.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": t("media.videoProgress")
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        button.Button,
+                        {
+                          variant: "ghost",
+                          size: "icon",
+                          className: "text-white hover:text-white hover:bg-black/50 h-8 w-8",
+                          onClick: togglePlay,
+                          "aria-label": isPlaying ? t("media.pause") : t("media.play"),
+                          children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pause, { className: "w-5 h-5", fill: "currentColor" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: "w-5 h-5", fill: "currentColor" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 group/vol", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          button.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 ? t("media.unmute") : t("media.mute"),
+                            children: isMuted || volume === 0 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VolumeX, { className: "w-5 h-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Volume2, { className: "w-5 h-5" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-0 overflow-hidden group-hover/vol:w-20 transition-all duration-300", children: /* @__PURE__ */ jsxRuntime.jsx(
+                          slider.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": t("media.volume")
+                          }
+                        ) })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-white text-xs font-medium tabular-nums select-none drop-shadow-md", children: [
+                        formatTime(currentTime),
+                        " / ",
+                        formatTime(duration)
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      button.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 ? t("media.restore") : t("media.popOut"),
+                        "aria-label": isFloating ? t("media.restore") : t("media.popOut"),
+                        children: isFloating ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PictureInPicture, { className: "w-4 h-4" })
+                      }
+                    ) })
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+}
+
+function AudioPlayer({
+  src,
+  title,
+  artist,
+  subtitle,
+  autoPlay = false,
+  className,
+  variant = "card",
+  isOpen = true,
+  onClose,
+  duration: initialDuration,
+  currentTime: initialTime = 0,
+  colorVariant = "default",
+  enableAutoFloat = true,
+  onCloseFloating
+}) {
+  const { t } = reactI18next.useTranslation();
+  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.useAudioPlayer({
+    src,
+    autoPlay,
+    initialTime,
+    initialDuration,
+    variant,
+    isOpen,
+    enableAutoFloat,
+    onCloseFloating
+  });
+  const audioElement = /* @__PURE__ */ jsxRuntime.jsx(
+    "audio",
+    {
+      ref: audioRef,
+      src,
+      autoPlay,
+      className: "hidden",
+      onTimeUpdate,
+      onLoadedMetadata,
+      onPlay,
+      onPause,
+      onEnded
+    }
+  );
+  const desktopLayout = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: button.cn(
+        "px-6 flex items-center justify-between gap-4",
+        colorVariant === "primary" ? "h-[80px] gap-6" : "h-[80px]"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: button.cn(
+              "flex flex-col min-w-0 shrink-0 relative z-10",
+              colorVariant === "primary" ? "w-[280px]" : "w-[280px]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-0.5", children: [
+                colorVariant === "primary" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full bg-[var(--chart-4)] animate-pulse shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Radio, { className: "w-3 h-3 text-[var(--chart-4)] animate-pulse shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "h4",
+                  {
+                    className: button.cn(
+                      "truncate",
+                      colorVariant === "primary" ? "font-semibold text-base tracking-tight" : "font-medium text-base"
+                    ),
+                    title: title || t("media.audioTitle"),
+                    children: title || t("media.audioTitle")
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: button.cn(
+                    "flex items-center gap-1 text-xs text-muted-foreground",
+                    colorVariant === "primary" && "opacity-80"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: subtitle || artist }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      lucideReact.ExternalLink,
+                      {
+                        className: button.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__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: button.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__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: togglePlay,
+                  "aria-label": isPlaying ? t("media.pause") : t("media.play"),
+                  className: button.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__ */ jsxRuntime.jsx(
+                    lucideReact.PauseCircle,
+                    {
+                      className: button.cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"),
+                      strokeWidth: colorVariant === "primary" ? 1 : 1.5
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    lucideReact.PlayCircle,
+                    {
+                      className: button.cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"),
+                      strokeWidth: colorVariant === "primary" ? 1 : 1.5
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex items-center gap-3 max-w-lg", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: button.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__ */ jsxRuntime.jsx(
+                  slider.Slider,
+                  {
+                    value: [currentTime],
+                    max: duration || 100,
+                    onValueChange: handleSeek,
+                    className: "cursor-pointer"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: button.cn(
+                      "text-xs font-mono shrink-0 w-10",
+                      colorVariant === "primary" ? "text-[11px] w-12 opacity-80" : "text-muted-foreground"
+                    ),
+                    children: formatTime(duration)
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 shrink-0 relative z-10", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden lg:flex items-center gap-2 w-28 mr-2 group", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: toggleMute,
+                className: "text-muted-foreground hover:text-foreground",
+                "aria-label": isMuted || volume === 0 ? t("media.unmute") : t("media.mute"),
+                children: isMuted || volume === 0 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VolumeX, { className: "w-5 h-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Volume2, { className: "w-5 h-5" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              slider.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden md:flex", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "rounded-full h-9 w-9",
+                    onClick: resetAudio,
+                    "aria-label": t("media.restart"),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "w-4 h-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { className: "z-[1001]", children: t("media.restart") })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "text-[var(--chart-3)] hover:bg-accent rounded-full h-9 w-9",
+                    "aria-label": t("media.audioInfo"),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "w-4 h-4 fill-current" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { className: "z-[1001]", children: t("media.info") })
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden xl:flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "rounded-full h-9 w-9",
+                    "aria-label": t("media.selectSpeed"),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Gauge, { className: "w-4 h-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuContent, { align: "center", className: "w-32 z-[1001]", children: [0.5, 1, 1.5, 2].map((speed) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  dropdownMenu.DropdownMenuItem,
+                  {
+                    onClick: () => setPlaybackSpeed(speed),
+                    className: button.cn(
+                      "cursor-pointer",
+                      playbackSpeed === speed && "bg-accent font-bold"
+                    ),
+                    children: [
+                      speed,
+                      "x"
+                    ]
+                  },
+                  speed
+                )) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "rounded-full h-9 w-9",
+                    "aria-label": t("media.downloadAudio"),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "w-4 h-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { className: "z-[1001]", children: t("media.downloadAudio") })
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "xl:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                button.Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "rounded-full h-9 w-9",
+                  "aria-label": t("media.moreOptions"),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "w-5 h-5" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", className: "w-56 p-2 z-[1001]", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:hidden", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 py-3", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between mb-3 px-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                      isMuted || volume === 0 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VolumeX, { className: "w-4 h-4 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Volume2, { className: "w-4 h-4 text-muted-foreground" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70", children: "Volume" })
+                    ] }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      slider.Slider,
+                      {
+                        value: [isMuted ? 0 : volume * 100],
+                        max: 100,
+                        onValueChange: (val) => handleVolumeChange([val[0] / 100])
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, { className: "my-1" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: resetAudio, className: "cursor-pointer py-2.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "w-4 h-4 mr-3 text-muted-foreground" }),
+                    " ",
+                    t("media.restart")
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { className: "cursor-pointer py-2.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "w-4 h-4 mr-3 text-muted-foreground" }),
+                    " ",
+                    t("media.info")
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, { className: "my-1" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "xl:hidden", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 flex flex-col gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Gauge, { className: "w-4 h-4 text-muted-foreground" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: t("media.speed") })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: [0.5, 1, 1.5, 2].map((speed) => /* @__PURE__ */ jsxRuntime.jsxs(
+                      "button",
+                      {
+                        onClick: () => setPlaybackSpeed(speed),
+                        className: button.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__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, { className: "my-1" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { className: "cursor-pointer py-2.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "w-4 h-4 mr-3 text-muted-foreground" }),
+                    " ",
+                    t("media.downloadAudio")
+                  ] })
+                ] })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-8 bg-border mx-1" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                onClick: onClose,
+                variant: "ghost",
+                size: "icon",
+                className: "rounded-full h-9 w-9",
+                "aria-label": t("media.closePlayer"),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-5 h-5" })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+  const mobileLayout = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: button.cn(
+        "flex flex-col py-3 px-4 gap-3",
+        colorVariant === "primary" && "py-4 px-5 gap-4"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+              colorVariant === "primary" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full bg-[var(--chart-4)] animate-pulse shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Radio, { className: "w-3 h-3 text-[var(--chart-4)] animate-pulse shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "h4",
+                {
+                  className: button.cn(
+                    "truncate",
+                    colorVariant === "primary" ? "font-semibold text-sm tracking-tight" : "font-medium text-sm"
+                  ),
+                  children: title
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: button.cn(
+                  "flex items-center gap-1.5 text-xs text-muted-foreground",
+                  colorVariant === "primary" && "opacity-70"
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: subtitle || artist })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              onClick: onClose,
+              variant: "ghost",
+              size: "icon",
+              className: "rounded-full h-8 w-8 shrink-0",
+              "aria-label": t("media.closePlayer"),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: togglePlay,
+              "aria-label": isPlaying ? t("media.pause") : t("media.play"),
+              className: "shrink-0 transition-transform active:scale-95",
+              children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.PauseCircle,
+                {
+                  className: button.cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"),
+                  strokeWidth: colorVariant === "primary" ? 1 : 1.5
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.PlayCircle,
+                {
+                  className: button.cn(colorVariant === "primary" ? "w-12 h-12" : "w-10 h-10"),
+                  strokeWidth: colorVariant === "primary" ? 1 : 1.5
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+            slider.Slider,
+            {
+              value: [currentTime],
+              max: duration || 100,
+              onValueChange: handleSeek,
+              className: "cursor-pointer",
+              "aria-label": t("media.playbackProgress")
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-9 w-9 rounded-full",
+                "aria-label": t("media.moreOptions"),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: "w-5 h-5" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", className: "w-56 p-2 z-[1001]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuItem, { onClick: resetAudio, children: t("media.restart") }),
+              /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuItem, { children: t("media.speedLabel", { speed: playbackSpeed }) })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+  const desktopLayoutCompact = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: button.cn(
+        "flex items-center gap-3 w-full",
+        isFloating ? "px-3 py-1 text-foreground" : "px-4 py-3"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          button.Button,
+          {
+            onClick: togglePlay,
+            size: "icon",
+            variant: "outline",
+            className: button.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 ? t("media.pause") : t("media.play"),
+            children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pause, { className: button.cn(isFloating ? "w-3 h-3" : "w-4 h-4", "fill-current") }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: button.cn(isFloating ? "w-3 h-3" : "w-4 h-4", "fill-current ml-0.5") })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex flex-col justify-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs leading-none", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: button.cn(
+                  "font-medium truncate",
+                  colorVariant === "primary" ? "text-primary-foreground" : "text-foreground"
+                ),
+                children: title
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                className: button.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__ */ jsxRuntime.jsx(
+            slider.Slider,
+            {
+              value: [currentTime],
+              max: duration || 100,
+              step: 1,
+              onValueChange: handleSeek,
+              className: "w-full",
+              "aria-label": t("media.playbackProgress")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: button.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__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: isFloating ? "w-4 h-4" : "w-5 h-5" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", className: "w-56 p-2 z-[1001]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 py-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between mb-3 px-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  isMuted || volume === 0 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VolumeX, { className: "w-4 h-4 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Volume2, { className: "w-4 h-4 text-muted-foreground" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70", children: "Volume" })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  slider.Slider,
+                  {
+                    value: [isMuted ? 0 : volume * 100],
+                    max: 100,
+                    onValueChange: (val) => handleVolumeChange([val[0] / 100]),
+                    "aria-label": "Volume"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, { className: "my-2" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 py-1 flex flex-col gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Gauge, { className: "w-4 h-4 text-muted-foreground" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: t("media.speed") })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: [0.5, 1, 1.5, 2].map((speed) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    onClick: () => setPlaybackSpeed(speed),
+                    className: button.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__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, { className: "my-2" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: resetAudio, className: "cursor-pointer py-2.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "w-4 h-4 mr-3 text-muted-foreground" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: t("media.restart") })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { className: "cursor-pointer py-2.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "w-4 h-4 mr-3 text-muted-foreground" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: t("media.downloadFile") })
+              ] })
+            ] })
+          ] }),
+          !isFloating && /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: button.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: t("media.floatingMode"),
+              "aria-label": t("media.openFloatingMode"),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "w-4 h-4" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  if (!isVisible) return null;
+  if (variant === "bar" && isVisible && typeof document !== "undefined") {
+    return reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: button.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__ */ jsxRuntime.jsxs("div", { ref: containerRef, className, children: [
+    audioElement,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FloatingMediaWrapper,
+      {
+        isFloating,
+        setIsFloating: handleSetFloating,
+        onClose: () => handleSetFloating(false),
+        onCloseMedia: () => {
+          handleSetFloating(false);
+        },
+        title: t("media.playingMedia"),
+        aspectRatio: 320 / 110,
+        minHeight: 110,
+        minWidth: 320,
+        colorVariant,
+        className: "w-full",
+        playerId: "audio-player",
+        enablePadding: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: button.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
+          }
+        )
+      }
+    )
+  ] });
+}
+
+exports.AudioPlayer = AudioPlayer;
+exports.FloatingMediaWrapper = FloatingMediaWrapper;
+exports.VideoPlayer = VideoPlayer;