Initial release v1.0.0

frontend/components/player/VibeOverlayContainer.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useAudioState } from "@/lib/audio-state-context";
+import { EnhancedVibeOverlay } from "./VibeOverlayEnhanced";
+import { useState, useEffect } from "react";
+
+/**
+ * Container component that manages the floating EnhancedVibeOverlay.
+ * Shows automatically when vibe mode is active on desktop.
+ */
+export function VibeOverlayContainer() {
+    const { vibeMode, queue, currentIndex } = useAudioState();
+    const [isVisible, setIsVisible] = useState(false);
+    const [isDismissed, setIsDismissed] = useState(false);
+
+    // Auto-show when vibe mode activates, reset dismissed state
+    useEffect(() => {
+        if (vibeMode) {
+            setIsVisible(true);
+            setIsDismissed(false);
+        } else {
+            setIsVisible(false);
+            setIsDismissed(false);
+        }
+    }, [vibeMode]);
+
+    // Get current track's audio features from the queue
+    const currentTrackFeatures = queue[currentIndex]?.audioFeatures || null;
+
+    // Don't render if not in vibe mode or dismissed
+    if (!vibeMode || isDismissed || !isVisible) return null;
+
+    return (
+        <EnhancedVibeOverlay
+            currentTrackFeatures={currentTrackFeatures}
+            variant="floating"
+            onClose={() => setIsDismissed(true)}
+        />
+    );
+}