File size: 5,832 Bytes
921d377 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | import React from 'react';
import { Play, Pause, SkipBack, SkipForward, Plus, Monitor, Volume2, VolumeX, Maximize2, Loader2, BookOpen, Settings, } from 'lucide-react';
// -----------------------------------------------------------------------------
// Component
// -----------------------------------------------------------------------------
/**
* Action bar for Story Mode Studio, styled like Imagine's floating prompt bar.
* Contains playback controls, scene navigation, and generation actions.
*/
export function StudioActions({ isPlaying = false, onTogglePlay, canGoBack = false, canGoForward = false, onPrevScene, onNextScene, isGeneratingScene = false, onGenerateNextScene, isStoryComplete = false, onContinueChapter, isCreatingChapter = false, onShowChapterSettings, currentIndex = 0, totalScenes = 0, onSelectScene, isMuted = false, onToggleMute, onFullscreen, onEnterTVMode, tvModeDisabled = false, className = '', }) {
return (<div className={`border-t border-white/10 bg-black/80 backdrop-blur-md ${className}`}>
<div className="max-w-4xl mx-auto px-4 py-4">
<div className="flex items-center justify-between gap-4">
{/* Left: Playback controls */}
<div className="flex items-center gap-2">
<button onClick={onPrevScene} disabled={!canGoBack} className="p-3 text-white/50 hover:text-white hover:bg-white/5 rounded-full transition-colors disabled:opacity-30 disabled:cursor-not-allowed" type="button" title="Previous scene">
<SkipBack size={20}/>
</button>
<button onClick={onTogglePlay} className="p-4 bg-purple-500 hover:bg-purple-600 rounded-full transition-colors" type="button" title={isPlaying ? 'Pause' : 'Play'}>
{isPlaying ? <Pause size={24}/> : <Play size={24} fill="currentColor"/>}
</button>
<button onClick={onNextScene} disabled={!canGoForward} className="p-3 text-white/50 hover:text-white hover:bg-white/5 rounded-full transition-colors disabled:opacity-30 disabled:cursor-not-allowed" type="button" title="Next scene">
<SkipForward size={20}/>
</button>
</div>
{/* Center: Scene progress bar */}
<div className="flex-1 mx-4">
{totalScenes > 0 && onSelectScene && (<div className="flex gap-1">
{Array.from({ length: totalScenes }, (_, i) => (<button key={i} onClick={() => onSelectScene(i)} className={`flex-1 h-1.5 rounded-full transition-colors ${i === currentIndex
? 'bg-purple-500'
: i < currentIndex
? 'bg-white/30'
: 'bg-white/10'}`} type="button" title={`Scene ${i + 1}`}/>))}
</div>)}
</div>
{/* Right: Actions */}
<div className="flex items-center gap-2">
{/* Mute toggle */}
{onToggleMute && (<button onClick={onToggleMute} className="p-3 text-white/50 hover:text-white hover:bg-white/5 rounded-full transition-colors" type="button" title={isMuted ? 'Unmute' : 'Mute'}>
{isMuted ? <VolumeX size={20}/> : <Volume2 size={20}/>}
</button>)}
{/* Fullscreen */}
{onFullscreen && (<button onClick={onFullscreen} className="p-3 text-white/50 hover:text-white hover:bg-white/5 rounded-full transition-colors" type="button" title="Fullscreen">
<Maximize2 size={20}/>
</button>)}
{/* Chapter Settings (when story is complete) */}
{isStoryComplete && onShowChapterSettings && (<button onClick={onShowChapterSettings} disabled={isCreatingChapter} className="p-3 text-white/50 hover:text-white hover:bg-white/5 rounded-full transition-colors disabled:opacity-50" type="button" title="Chapter settings">
<Settings size={20}/>
</button>)}
{/* Generate next scene or New Chapter */}
{(onGenerateNextScene || (isStoryComplete && onContinueChapter)) && (<button onClick={isStoryComplete ? onContinueChapter : onGenerateNextScene} disabled={isGeneratingScene || isCreatingChapter} className={`flex items-center gap-2 px-4 py-2 rounded-full transition-colors disabled:opacity-50 ${isStoryComplete
? 'bg-gradient-to-r from-purple-500/30 to-pink-500/30 hover:from-purple-500/40 hover:to-pink-500/40 text-purple-200 border border-purple-500/30'
: 'bg-purple-500/20 hover:bg-purple-500/30 text-purple-300'}`} type="button" title={isStoryComplete ? 'Continue with a new chapter' : 'Generate next scene'}>
{isGeneratingScene || isCreatingChapter ? (<>
<Loader2 size={16} className="animate-spin"/>
<span className="text-sm font-medium">{isCreatingChapter ? 'Creating Chapter...' : 'Generating...'}</span>
</>) : isStoryComplete ? (<>
<BookOpen size={16}/>
<span className="text-sm font-medium">New Chapter</span>
</>) : (<>
<Plus size={16}/>
<span className="text-sm font-medium">Next Scene</span>
</>)}
</button>)}
{/* TV Mode */}
{onEnterTVMode && (<button onClick={onEnterTVMode} disabled={tvModeDisabled} className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-purple-500/20 to-pink-500/20 hover:from-purple-500/30 hover:to-pink-500/30 text-purple-300 border border-purple-500/30 rounded-full transition-all disabled:opacity-50" type="button" title="Watch story in immersive TV Mode">
<Monitor size={16}/>
<span className="text-sm font-medium">TV Mode</span>
</button>)}
</div>
</div>
</div>
</div>);
}
export default StudioActions;
|