285 lines
13 KiB
TypeScript
285 lines
13 KiB
TypeScript
import React, { useEffect, useState, useMemo, useRef } from 'react';
|
|
import { X, Pause, Play, AlertTriangle } from 'lucide-react';
|
|
import { AreaChart, Area, ResponsiveContainer, YAxis, XAxis, ReferenceDot } from 'recharts';
|
|
import { Scenario } from '../types';
|
|
|
|
interface PlayerProps {
|
|
scenario: Scenario | null;
|
|
onClose: () => void;
|
|
}
|
|
|
|
// Mock script synced with progress (0-100)
|
|
const DIALOGUE_SCRIPT = [
|
|
{ time: 0, text: "正在建立神经连接..." },
|
|
{ time: 5, text: "(检测到心率轻微上升)" },
|
|
{ time: 12, text: "“放松，把控制权交给我。”" },
|
|
{ time: 20, text: "“很好，保持呼吸频率...”" },
|
|
{ time: 28, text: "正在启动触觉反馈模块" },
|
|
{ time: 35, text: "“感觉到那个节奏了吗？”" },
|
|
{ time: 45, text: "强度正在逐渐增加..." },
|
|
{ time: 55, text: "“不要抵抗，顺从它。”" },
|
|
{ time: 65, text: "“我会稍微加快一点速度。”" },
|
|
{ time: 75, text: "(设备输出功率提升至 80%)" },
|
|
{ time: 85, text: "“就是现在...”" },
|
|
{ time: 92, text: "“做得很好，指挥官。”" },
|
|
{ time: 100, text: "连接结束。" },
|
|
];
|
|
|
|
const Player: React.FC<PlayerProps> = ({ scenario, onClose }) => {
|
|
const [isPlaying, setIsPlaying] = useState(true);
|
|
const [progress, setProgress] = useState(0);
|
|
const [isDragging, setIsDragging] = useState(false); // Track dragging state
|
|
const [showAlert, setShowAlert] = useState(false);
|
|
|
|
// Generate 101 data points (0 to 100) to map perfectly to progress
|
|
const data = useMemo(() => {
|
|
return Array.from({ length: 101 }, (_, i) => {
|
|
// Create a realistic wave: Warmup -> Build up -> Climax -> Cooldown
|
|
let hz = 10;
|
|
if (i < 20) hz = 10 + (i * 1.5) + (Math.random() * 5); // Warmup
|
|
else if (i < 50) hz = 40 + Math.sin(i * 0.5) * 10 + (Math.random() * 10); // Plateau/Tease
|
|
else if (i < 85) hz = 70 + (i - 50) * 0.8 + (Math.random() * 15); // Build up to climax
|
|
else hz = 90 - ((i - 85) * 5) + (Math.random() * 5); // Cooldown
|
|
|
|
return {
|
|
time: i,
|
|
hz: Math.max(0, Math.min(100, hz))
|
|
};
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
let interval: any;
|
|
|
|
if (isPlaying && !isDragging) {
|
|
interval = setInterval(() => {
|
|
setProgress(p => {
|
|
if (p >= 100) {
|
|
setIsPlaying(false);
|
|
return 100;
|
|
}
|
|
return p + 0.1;
|
|
});
|
|
}, 50);
|
|
}
|
|
|
|
return () => {
|
|
if (interval) clearInterval(interval);
|
|
};
|
|
}, [isPlaying, isDragging]);
|
|
|
|
const handleEmergencyStop = () => {
|
|
setIsPlaying(false);
|
|
setShowAlert(true);
|
|
if (window.navigator && window.navigator.vibrate) {
|
|
window.navigator.vibrate([100, 50, 100]);
|
|
}
|
|
setTimeout(() => {
|
|
onClose();
|
|
}, 1500);
|
|
};
|
|
|
|
// Handle Seek / Drag
|
|
const handleSeek = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const newVal = parseFloat(e.target.value);
|
|
setProgress(newVal);
|
|
};
|
|
|
|
const handleDragStart = () => {
|
|
setIsDragging(true);
|
|
};
|
|
|
|
const handleDragEnd = () => {
|
|
setIsDragging(false);
|
|
};
|
|
|
|
|
|
// Calculate active line based on progress
|
|
const activeLineIndex = DIALOGUE_SCRIPT.findIndex((line, index) => {
|
|
const nextLine = DIALOGUE_SCRIPT[index + 1];
|
|
return progress >= line.time && (!nextLine || progress < nextLine.time);
|
|
});
|
|
|
|
// Get current HZ for the dot
|
|
const currentHz = data[Math.min(100, Math.floor(progress))]?.hz || 0;
|
|
|
|
if (!scenario) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[100] bg-[#2e1065] flex flex-col" onDoubleClick={handleEmergencyStop}>
|
|
{/* Background Visual */}
|
|
<div className="absolute inset-0 opacity-40">
|
|
<img src={scenario.cover} className="w-full h-full object-cover blur-lg scale-110" alt="bg" />
|
|
<div className="absolute inset-0 bg-gradient-to-t from-[#2e1065] via-[#2e1065]/80 to-[#4c1d95]/60"></div>
|
|
</div>
|
|
|
|
{/* Emergency Overlay */}
|
|
{showAlert && (
|
|
<div className="absolute inset-0 z-[110] bg-[#2e1065]/95 flex flex-col items-center justify-center animate-pulse">
|
|
<AlertTriangle size={64} className="text-[#F43F5E] mb-4" />
|
|
<h2 className="text-2xl font-bold text-[#F43F5E] tracking-widest">EMERGENCY STOP</h2>
|
|
<p className="text-[#E2E8F0] mt-2">系统已强制中断</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Header - Seamless Gradient */}
|
|
<div className="relative z-10 flex justify-between items-center p-6 bg-gradient-to-b from-[#2e1065] via-[#2e1065]/60 to-transparent">
|
|
<div className="flex flex-col">
|
|
<h2 className="text-lg font-bold text-white tracking-wide drop-shadow-md">{scenario.title}</h2>
|
|
<span className="text-[10px] text-[#C084FC] uppercase tracking-wider font-medium">{scenario.category} SCENARIO</span>
|
|
</div>
|
|
<button onClick={onClose} className="p-2 rounded-full bg-white/10 backdrop-blur-md active:bg-white/20 transition-colors border border-white/10 hover:border-white/30">
|
|
<X size={20} className="text-white/90" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Central Content (Rolling Lyrics) */}
|
|
<div className="flex-1 relative z-10 w-full overflow-hidden">
|
|
{/* Top Gradient Mask */}
|
|
<div className="absolute top-0 left-0 w-full h-24 bg-gradient-to-b from-[#2e1065]/0 to-transparent z-20 pointer-events-none"></div>
|
|
|
|
<div
|
|
className="flex flex-col items-center w-full transition-transform duration-700 ease-[cubic-bezier(0.25,1,0.5,1)]"
|
|
style={{
|
|
marginTop: 'calc(50vh - 64px)',
|
|
transform: `translateY(-${activeLineIndex * 64}px)`
|
|
}}
|
|
>
|
|
{DIALOGUE_SCRIPT.map((line, i) => {
|
|
const isActive = i === activeLineIndex;
|
|
const distance = Math.abs(activeLineIndex - i);
|
|
const isFar = distance > 2;
|
|
|
|
return (
|
|
<div
|
|
key={i}
|
|
className={`h-16 w-full px-8 flex items-center justify-center text-center transition-all duration-500 ${
|
|
isActive
|
|
? 'scale-110 opacity-100 blur-0'
|
|
: isFar
|
|
? 'opacity-10 scale-90 blur-[2px]'
|
|
: 'opacity-40 scale-95 blur-[0.5px]'
|
|
}`}
|
|
>
|
|
<p className={`font-medium leading-tight ${isActive ? 'text-white text-lg drop-shadow-[0_0_15px_rgba(192,132,252,0.6)]' : 'text-[#CBD5E1] text-base'}`}>
|
|
{line.text}
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Controls & Viz - Unified Gradient */}
|
|
<div className="relative z-20 pb-12 px-0 bg-gradient-to-t from-[#2e1065] via-[#2e1065] to-transparent pt-32 -mt-32 pointer-events-none">
|
|
|
|
{/* Chart Visualizer */}
|
|
<div className="h-28 w-full mb-2 px-0 relative opacity-90">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<AreaChart data={data} margin={{ top: 10, right: 0, left: 0, bottom: 0 }}>
|
|
<defs>
|
|
<linearGradient id="colorHz" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="#C084FC" stopOpacity={0.6}/>
|
|
<stop offset="95%" stopColor="#C084FC" stopOpacity={0}/>
|
|
</linearGradient>
|
|
<linearGradient id="strokeGradient" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0%" stopColor="#C084FC" stopOpacity={0.6} />
|
|
<stop offset="50%" stopColor="#F472B6" stopOpacity={1} />
|
|
<stop offset="100%" stopColor="#C084FC" stopOpacity={0.6} />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<XAxis dataKey="time" type="number" domain={[0, 100]} hide />
|
|
<YAxis hide domain={[0, 100]} />
|
|
|
|
<Area
|
|
type="monotone"
|
|
dataKey="hz"
|
|
stroke="url(#strokeGradient)"
|
|
strokeWidth={3}
|
|
fillOpacity={1}
|
|
fill="url(#colorHz)"
|
|
isAnimationActive={false}
|
|
/>
|
|
|
|
<ReferenceDot
|
|
x={progress}
|
|
y={currentHz}
|
|
r={6}
|
|
fill="#F8FAFC"
|
|
stroke="#F472B6"
|
|
strokeWidth={3}
|
|
/>
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
|
|
{/* Controls (Pointer events enabled) */}
|
|
<div className="px-8 flex items-center gap-6 pointer-events-auto">
|
|
<button
|
|
onClick={() => setIsPlaying(!isPlaying)}
|
|
className="shrink-0 w-12 h-12 rounded-full bg-white text-[#2e1065] flex items-center justify-center shadow-[0_0_25px_rgba(255,255,255,0.3)] active:scale-95 transition-all hover:scale-105"
|
|
>
|
|
{isPlaying ? <Pause size={20} fill="currentColor" /> : <Play size={20} fill="currentColor" className="ml-0.5" />}
|
|
</button>
|
|
|
|
<div className="flex-1">
|
|
<div className="flex justify-between items-end mb-2">
|
|
<div className="flex flex-col">
|
|
<span className="text-[10px] text-[#CBD5E1] font-bold uppercase tracking-wider mb-0.5">Device Intensity</span>
|
|
<span className="text-sm text-[#F472B6] font-mono font-bold drop-shadow-sm">
|
|
伸缩频率: {Math.max(1, Math.ceil(progress / 10))}档
|
|
</span>
|
|
</div>
|
|
<span className="text-[10px] text-[#CBD5E1] font-mono">{(progress * 1.5).toFixed(0)}s / {scenario.duration}</span>
|
|
</div>
|
|
|
|
{/* Draggable Progress Bar Container */}
|
|
<div className="relative h-6 flex items-center group">
|
|
|
|
{/* 1. Visual Track (Background) */}
|
|
<div className="absolute w-full h-1 bg-white/20 rounded-full overflow-hidden pointer-events-none backdrop-blur-sm">
|
|
{/* Visual Progress Fill */}
|
|
<div
|
|
className="h-full bg-gradient-to-r from-[#C084FC] to-[#F472B6] shadow-[0_0_15px_#F472B6]"
|
|
style={{ width: `${progress}%` }}
|
|
></div>
|
|
</div>
|
|
|
|
{/* 2. Visual Thumb (Knob) - Moves with progress */}
|
|
<div
|
|
className="absolute h-4 w-4 bg-white rounded-full shadow-[0_0_15px_rgba(255,255,255,0.8)] pointer-events-none transition-transform duration-75 border-2 border-[#F472B6]"
|
|
style={{
|
|
left: `${progress}%`,
|
|
transform: `translateX(-50%) scale(${isDragging ? 1.2 : 1})`
|
|
}}
|
|
></div>
|
|
|
|
{/* 3. Invisible Input Range (The actual interaction layer) */}
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
step="0.1"
|
|
value={progress}
|
|
onChange={handleSeek}
|
|
onMouseDown={handleDragStart}
|
|
onMouseUp={handleDragEnd}
|
|
onTouchStart={handleDragStart}
|
|
onTouchEnd={handleDragEnd}
|
|
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-center mt-8 pointer-events-auto">
|
|
<p className="text-[10px] text-[#CBD5E1]/60 font-medium tracking-widest uppercase">双击屏幕紧急停止</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Player; |