140 lines
5.5 KiB
TypeScript
140 lines
5.5 KiB
TypeScript
"use client";
|
|
|
|
import { EnhancedVibeOverlay } from "../../components/player/VibeOverlayEnhanced";
|
|
import { useAudioState } from "@/lib/audio-state-context";
|
|
import { useState } from "react";
|
|
import { cn } from "@/utils/cn";
|
|
|
|
/**
|
|
* Test page for enhanced vibe overlay
|
|
*/
|
|
export default function EnhancedVibeTest() {
|
|
const { vibeMode } = useAudioState();
|
|
const [isTestMode, setIsTestMode] = useState(false);
|
|
|
|
// Mock track data for testing
|
|
const mockTrackFeatures = {
|
|
bpm: 128,
|
|
energy: 0.75,
|
|
valence: 0.60,
|
|
arousal: 0.85,
|
|
danceability: 0.90,
|
|
keyScale: "major",
|
|
instrumentalness: 0.15,
|
|
danceabilityMl: 0.92,
|
|
// ML mood predictions
|
|
moodHappy: 0.85,
|
|
moodSad: 0.25,
|
|
moodRelaxed: 0.70,
|
|
moodAggressive: 0.45,
|
|
moodParty: 0.60,
|
|
moodAcoustic: 0.30,
|
|
moodElectronic: 0.80,
|
|
analysisMode: "enhanced"
|
|
};
|
|
|
|
const mockSourceFeatures = {
|
|
bpm: 126,
|
|
energy: 0.78,
|
|
valence: 0.65,
|
|
arousal: 0.80,
|
|
danceability: 0.88,
|
|
keyScale: "minor",
|
|
instrumentalness: 0.20,
|
|
danceabilityMl: 0.90,
|
|
moodHappy: 0.90,
|
|
moodSad: 0.20,
|
|
moodRelaxed: 0.75,
|
|
moodAggressive: 0.50,
|
|
moodParty: 0.70,
|
|
moodAcoustic: 0.25,
|
|
moodElectronic: 0.85,
|
|
analysisMode: "enhanced"
|
|
};
|
|
|
|
// Simulate vibe mode
|
|
const testVibeMode = isTestMode ? {
|
|
isActive: true,
|
|
sourceFeatures: mockSourceFeatures,
|
|
queue: []
|
|
} : {
|
|
isActive: false,
|
|
sourceFeatures: null,
|
|
queue: []
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-black flex flex-col items-center justify-center p-4">
|
|
<div className="w-full max-w-4xl space-y-6">
|
|
<div className="text-center space-y-4">
|
|
<h1 className="text-4xl font-bold text-white mb-2">
|
|
Enhanced Vibe Overlay Test
|
|
</h1>
|
|
<p className="text-gray-400 text-lg">
|
|
Testing the new 11-point radar visualization with particle effects
|
|
</p>
|
|
|
|
<div className="flex justify-center gap-4">
|
|
<button
|
|
onClick={() => setIsTestMode(!isTestMode)}
|
|
className={cn(
|
|
"px-6 py-3 rounded-lg font-semibold transition-all",
|
|
isTestMode
|
|
? "bg-brand text-black"
|
|
: "bg-white/10 text-white hover:bg-white/20"
|
|
)}
|
|
>
|
|
{isTestMode ? "Stop Test Mode" : "Start Test Mode"}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="text-sm text-gray-500">
|
|
Vibe Mode: {vibeMode ? "Active" : "Inactive"} | Test Mode: {isTestMode ? "Active" : "Inactive"}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Enhanced Vibe Overlay */}
|
|
{(vibeMode || isTestMode) && (
|
|
<div className="w-full">
|
|
<EnhancedVibeOverlay
|
|
currentTrackFeatures={mockTrackFeatures}
|
|
variant="inline"
|
|
onClose={() => setIsTestMode(false)}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Feature Data Display */}
|
|
{isTestMode && (
|
|
<div className="bg-white/5 rounded-lg p-6 border border-white/10">
|
|
<h2 className="text-xl font-bold text-white mb-4">Mock Track Features</h2>
|
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<h3 className="font-semibold text-brand mb-2">Current Track</h3>
|
|
<div className="space-y-1 text-gray-300">
|
|
<div>BPM: {mockTrackFeatures.bpm}</div>
|
|
<div>Energy: {mockTrackFeatures.energy}</div>
|
|
<div>Valence: {mockTrackFeatures.valence}</div>
|
|
<div>Arousal: {mockTrackFeatures.arousal}</div>
|
|
<div>Danceability: {mockTrackFeatures.danceability}</div>
|
|
<div>Key: {mockTrackFeatures.keyScale}</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-yellow-400 mb-2">Source Track</h3>
|
|
<div className="space-y-1 text-gray-300">
|
|
<div>BPM: {mockSourceFeatures.bpm}</div>
|
|
<div>Energy: {mockSourceFeatures.energy}</div>
|
|
<div>Valence: {mockSourceFeatures.valence}</div>
|
|
<div>Arousal: {mockSourceFeatures.arousal}</div>
|
|
<div>Danceability: {mockSourceFeatures.danceability}</div>
|
|
<div>Key: {mockSourceFeatures.keyScale}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |