debate-player.tsx
1,989 bytes
| 1 | 'use client'; |
|---|---|
| 2 | |
| 3 | import { Pause, Play, RotateCcw, SkipForward } from 'lucide-react'; |
| 4 | import { DebateConsole } from '@/components/debate/debate-console'; |
| 5 | import { Button } from '@/components/ui/button'; |
| 6 | import { Progress } from '@/components/ui/progress'; |
| 7 | import type { DebateResult } from '@/core/types'; |
| 8 | import { useDebatePlayback } from '@/hooks/use-debate-playback'; |
| 9 | |
| 10 | const SPEEDS = [1, 2, 4] as const; |
| 11 | |
| 12 | /** Animated replay of a recorded debate - the demo experience. */ |
| 13 | export function DebatePlayer({ result }: { result: DebateResult }) { |
| 14 | const { view, state, progress, speed, setSpeed, play, pause, restart, skipToEnd } = useDebatePlayback(result); |
| 15 | |
| 16 | return ( |
| 17 | <div className="space-y-4"> |
| 18 | <div className="sticky top-14 z-30 flex flex-wrap items-center gap-2 rounded-xl border bg-card/90 p-2 backdrop-blur"> |
| 19 | {state === 'playing' ? ( |
| 20 | <Button size="sm" onClick={pause}> |
| 21 | <Pause className="h-3.5 w-3.5" /> Pause |
| 22 | </Button> |
| 23 | ) : ( |
| 24 | <Button size="sm" onClick={play}> |
| 25 | <Play className="h-3.5 w-3.5" /> {state === 'finished' ? 'Replay' : 'Play'} |
| 26 | </Button> |
| 27 | )} |
| 28 | <Button size="sm" variant="outline" onClick={restart}> |
| 29 | <RotateCcw className="h-3.5 w-3.5" /> Restart |
| 30 | </Button> |
| 31 | <Button size="sm" variant="outline" onClick={skipToEnd}> |
| 32 | <SkipForward className="h-3.5 w-3.5" /> Skip to end |
| 33 | </Button> |
| 34 | <div className="ml-1 flex items-center gap-1"> |
| 35 | {SPEEDS.map((s) => ( |
| 36 | <Button |
| 37 | key={s} |
| 38 | size="sm" |
| 39 | variant={speed === s ? 'default' : 'ghost'} |
| 40 | className="h-8 w-9 px-0" |
| 41 | onClick={() => setSpeed(s)} |
| 42 | > |
| 43 | {s}× |
| 44 | </Button> |
| 45 | ))} |
| 46 | </div> |
| 47 | <div className="ml-auto w-40"> |
| 48 | <Progress value={progress} /> |
| 49 | </div> |
| 50 | </div> |
| 51 | |
| 52 | <DebateConsole view={view} showActions={false} /> |
| 53 | </div> |
| 54 | ); |
| 55 | } |
| 56 | |