working on cutscenes
This commit is contained in:
Vladislav Khorev committed
1 parent
54cc118df7
commit
6349859e66
47 files changed
+6234
-21
No files matched your search
@@ -0,0 +1,285 @@
|
||||
import { useRef, useCallback, useState, useEffect } from 'react';
|
||||
import { useCutsceneStore, useSelectedCutscene } from '../../store/cutsceneStore';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import styles from './Timeline.module.css';
|
||||
|
||||
const LABEL_WIDTH = 140;
|
||||
const ROW_HEIGHT = 32;
|
||||
const SUBTITLE_ROW_HEIGHT = 14;
|
||||
const MIN_ZOOM = 20; // px per second
|
||||
const MAX_ZOOM = 400;
|
||||
|
||||
const LAYER_COLORS = ['#4a7fc1', '#c17a4a', '#4ac17a', '#c14a7a', '#7a4ac1', '#c1b44a', '#4ac1c1'];
|
||||
|
||||
function layerColor(i: number) { return LAYER_COLORS[i % LAYER_COLORS.length]; }
|
||||
|
||||
function basename(path: string) {
|
||||
return path.split('/').pop() ?? path;
|
||||
}
|
||||
|
||||
export default function Timeline() {
|
||||
const cutscene = useSelectedCutscene();
|
||||
const { selectedLayerIndex, currentTimeMs, playState } = useCutsceneStore(useShallow(s => ({
|
||||
selectedLayerIndex: s.selectedLayerIndex,
|
||||
currentTimeMs: s.currentTimeMs,
|
||||
playState: s.playState,
|
||||
})));
|
||||
const { selectLayer, addLayer, removeLayer, moveLayerUp, moveLayerDown, updateLayer, setCurrentTime, setPlayState } = useCutsceneStore(useShallow(s => ({
|
||||
selectLayer: s.selectLayer,
|
||||
addLayer: s.addLayer,
|
||||
removeLayer: s.removeLayer,
|
||||
moveLayerUp: s.moveLayerUp,
|
||||
moveLayerDown: s.moveLayerDown,
|
||||
updateLayer: s.updateLayer,
|
||||
setCurrentTime: s.setCurrentTime,
|
||||
setPlayState: s.setPlayState,
|
||||
})));
|
||||
|
||||
const [pxPerSec, setPxPerSec] = useState(60);
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const isDraggingPlayhead = useRef(false);
|
||||
const dragState = useRef<{
|
||||
type: 'move' | 'left' | 'right';
|
||||
layerIndex: number;
|
||||
startX: number;
|
||||
startMs: number;
|
||||
endMs: number;
|
||||
durationMs: number;
|
||||
} | null>(null);
|
||||
|
||||
const msToX = useCallback((ms: number) => (ms / 1000) * pxPerSec, [pxPerSec]);
|
||||
const xToMs = useCallback((x: number) => Math.max(0, Math.round((x / pxPerSec) * 1000)), [pxPerSec]);
|
||||
|
||||
const totalMs = cutscene
|
||||
? Math.max(
|
||||
cutscene.durationMs,
|
||||
cutscene.imageSegments.reduce((m, s) => Math.max(m, s.endMs), 0),
|
||||
10000,
|
||||
) + 2000
|
||||
: 12000;
|
||||
|
||||
const rulerWidth = Math.ceil(msToX(totalMs));
|
||||
|
||||
// Ruler ticks
|
||||
const tickStepMs = pxPerSec >= 100 ? 500 : pxPerSec >= 50 ? 1000 : 2000;
|
||||
const labelStepMs = pxPerSec >= 100 ? 1000 : pxPerSec >= 50 ? 2000 : 4000;
|
||||
const ticks: number[] = [];
|
||||
for (let ms = 0; ms <= totalMs; ms += tickStepMs) ticks.push(ms);
|
||||
|
||||
// Scroll wheel zoom
|
||||
useEffect(() => {
|
||||
const el = scrollRef.current;
|
||||
if (!el) return;
|
||||
function onWheel(e: WheelEvent) {
|
||||
if (!e.ctrlKey && !e.metaKey) return;
|
||||
e.preventDefault();
|
||||
setPxPerSec(prev => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, prev * (e.deltaY < 0 ? 1.15 : 0.87))));
|
||||
}
|
||||
el.addEventListener('wheel', onWheel, { passive: false });
|
||||
return () => el.removeEventListener('wheel', onWheel);
|
||||
}, []);
|
||||
|
||||
// Auto-scroll playhead into view while playing
|
||||
useEffect(() => {
|
||||
if (playState !== 'playing') return;
|
||||
const el = scrollRef.current;
|
||||
if (!el) return;
|
||||
const x = msToX(currentTimeMs) + LABEL_WIDTH;
|
||||
const { scrollLeft, clientWidth } = el;
|
||||
if (x > scrollLeft + clientWidth - 40) {
|
||||
el.scrollLeft = x - clientWidth + 80;
|
||||
}
|
||||
}, [currentTimeMs, playState, msToX]);
|
||||
|
||||
// ── Playhead drag ──────────────────────────────────────────────────────────
|
||||
function onRulerMouseDown(e: React.MouseEvent) {
|
||||
if (e.button !== 0) return;
|
||||
isDraggingPlayhead.current = true;
|
||||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
||||
const x = e.clientX - rect.left - LABEL_WIDTH + (scrollRef.current?.scrollLeft ?? 0);
|
||||
setCurrentTime(xToMs(x));
|
||||
if (playState === 'playing') setPlayState('paused');
|
||||
|
||||
function onMove(ev: MouseEvent) {
|
||||
const x2 = ev.clientX - rect.left - LABEL_WIDTH + (scrollRef.current?.scrollLeft ?? 0);
|
||||
setCurrentTime(xToMs(x2));
|
||||
}
|
||||
function onUp() {
|
||||
isDraggingPlayhead.current = false;
|
||||
window.removeEventListener('mousemove', onMove);
|
||||
window.removeEventListener('mouseup', onUp);
|
||||
}
|
||||
window.addEventListener('mousemove', onMove);
|
||||
window.addEventListener('mouseup', onUp);
|
||||
}
|
||||
|
||||
// ── Segment bar drag ───────────────────────────────────────────────────────
|
||||
function onBarMouseDown(e: React.MouseEvent, layerIndex: number, type: 'move' | 'left' | 'right') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
selectLayer(layerIndex);
|
||||
const seg = cutscene!.imageSegments[layerIndex];
|
||||
dragState.current = {
|
||||
type,
|
||||
layerIndex,
|
||||
startX: e.clientX,
|
||||
startMs: seg.startMs,
|
||||
endMs: seg.endMs,
|
||||
durationMs: seg.endMs - seg.startMs,
|
||||
};
|
||||
|
||||
function onMove(ev: MouseEvent) {
|
||||
if (!dragState.current) return;
|
||||
const dx = ev.clientX - dragState.current.startX;
|
||||
const dMs = Math.round((dx / pxPerSec) * 1000);
|
||||
const { type, layerIndex: li, startMs, endMs, durationMs } = dragState.current;
|
||||
|
||||
if (type === 'move') {
|
||||
const newStart = Math.max(0, startMs + dMs);
|
||||
updateLayer(li, { startMs: newStart, endMs: newStart + durationMs });
|
||||
} else if (type === 'left') {
|
||||
const newStart = Math.max(0, Math.min(endMs - 100, startMs + dMs));
|
||||
updateLayer(li, { startMs: newStart });
|
||||
} else {
|
||||
const newEnd = Math.max(startMs + 100, endMs + dMs);
|
||||
updateLayer(li, { endMs: newEnd });
|
||||
}
|
||||
}
|
||||
function onUp() {
|
||||
dragState.current = null;
|
||||
window.removeEventListener('mousemove', onMove);
|
||||
window.removeEventListener('mouseup', onUp);
|
||||
}
|
||||
window.addEventListener('mousemove', onMove);
|
||||
window.addEventListener('mouseup', onUp);
|
||||
}
|
||||
|
||||
const playheadX = msToX(currentTimeMs) + LABEL_WIDTH;
|
||||
|
||||
// Subtitle timing for display
|
||||
let subtitleBlocks: { x: number; w: number; text: string }[] = [];
|
||||
if (cutscene) {
|
||||
let elapsed = 0;
|
||||
for (const line of cutscene.lines) {
|
||||
const dur = line.durationMs > 0
|
||||
? line.durationMs
|
||||
: Math.max(1500, Math.round((line.text.length / 17) * 1000));
|
||||
subtitleBlocks.push({ x: msToX(elapsed), w: msToX(dur), text: line.text || '…' });
|
||||
elapsed += dur;
|
||||
}
|
||||
}
|
||||
|
||||
const layerCount = cutscene?.imageSegments.length ?? 0;
|
||||
const totalHeight = layerCount * ROW_HEIGHT + SUBTITLE_ROW_HEIGHT + 20;
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
{/* Toolbar */}
|
||||
<div className={styles.toolbar}>
|
||||
<button className={styles.tbBtn} onClick={addLayer} disabled={!cutscene} title="Add layer">+ Layer</button>
|
||||
{selectedLayerIndex !== null && cutscene && (
|
||||
<>
|
||||
<button className={styles.tbBtn} onClick={() => moveLayerUp(selectedLayerIndex!)} disabled={selectedLayerIndex! <= 0} title="Move up">↑</button>
|
||||
<button className={styles.tbBtn} onClick={() => moveLayerDown(selectedLayerIndex!)} disabled={selectedLayerIndex! >= layerCount - 1} title="Move down">↓</button>
|
||||
<button className={styles.tbBtn} onClick={() => removeLayer(selectedLayerIndex!)} title="Remove layer" style={{ color: '#e06c6c' }}>✕ Layer</button>
|
||||
</>
|
||||
)}
|
||||
<div className={styles.spacer} />
|
||||
<span className={styles.zoomLabel}>Zoom:</span>
|
||||
<button className={styles.tbBtn} onClick={() => setPxPerSec(p => Math.max(MIN_ZOOM, p * 0.75))}>−</button>
|
||||
<button className={styles.tbBtn} onClick={() => setPxPerSec(p => Math.min(MAX_ZOOM, p * 1.33))}>+</button>
|
||||
<button className={styles.tbBtn} onClick={() => setPxPerSec(60)}>Reset</button>
|
||||
</div>
|
||||
|
||||
{/* Scrollable area */}
|
||||
<div className={styles.scroll} ref={scrollRef}>
|
||||
{/* Ruler */}
|
||||
<div
|
||||
className={styles.ruler}
|
||||
style={{ width: LABEL_WIDTH + rulerWidth }}
|
||||
onMouseDown={onRulerMouseDown}
|
||||
>
|
||||
<div style={{ width: LABEL_WIDTH, flexShrink: 0 }} />
|
||||
<div style={{ position: 'relative', flex: 1 }}>
|
||||
{ticks.map(ms => (
|
||||
<div
|
||||
key={ms}
|
||||
className={styles.tick}
|
||||
style={{ left: msToX(ms) }}
|
||||
>
|
||||
{ms % labelStepMs === 0 && (
|
||||
<span className={styles.tickLabel}>{ms / 1000}s</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Layers + playhead overlay */}
|
||||
<div
|
||||
className={styles.layersArea}
|
||||
style={{ width: LABEL_WIDTH + rulerWidth, minHeight: totalHeight }}
|
||||
>
|
||||
{/* Playhead */}
|
||||
<div className={styles.playhead} style={{ left: playheadX }} />
|
||||
|
||||
{/* Grid lines */}
|
||||
{ticks.filter(ms => ms % labelStepMs === 0).map(ms => (
|
||||
<div key={ms} className={styles.gridLine} style={{ left: LABEL_WIDTH + msToX(ms) }} />
|
||||
))}
|
||||
|
||||
{/* Layer rows */}
|
||||
{cutscene?.imageSegments.map((seg, i) => {
|
||||
const isSelected = selectedLayerIndex === i;
|
||||
const color = layerColor(i);
|
||||
const barX = LABEL_WIDTH + msToX(seg.startMs);
|
||||
const barW = Math.max(4, msToX(seg.endMs) - msToX(seg.startMs));
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`${styles.row} ${isSelected ? styles.rowSelected : ''}`}
|
||||
style={{ top: i * ROW_HEIGHT }}
|
||||
onClick={() => selectLayer(i)}
|
||||
>
|
||||
{/* Label */}
|
||||
<div className={styles.rowLabel} style={{ borderLeft: `3px solid ${color}` }}>
|
||||
<span className={styles.layerName}>{basename(seg.path) || `Layer ${i + 1}`}</span>
|
||||
</div>
|
||||
|
||||
{/* Bar */}
|
||||
<div
|
||||
className={styles.bar}
|
||||
style={{ left: barX, width: barW, background: color + (isSelected ? 'cc' : '88') }}
|
||||
onMouseDown={e => onBarMouseDown(e, i, 'move')}
|
||||
>
|
||||
<div className={`${styles.handle} ${styles.handleLeft}`}
|
||||
onMouseDown={e => onBarMouseDown(e, i, 'left')} />
|
||||
<div className={`${styles.handle} ${styles.handleRight}`}
|
||||
onMouseDown={e => onBarMouseDown(e, i, 'right')} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Subtitle blocks row */}
|
||||
{cutscene && (
|
||||
<div
|
||||
className={styles.subtitleRow}
|
||||
style={{ top: layerCount * ROW_HEIGHT }}
|
||||
>
|
||||
<div className={styles.subtitleLabel}>Subtitles</div>
|
||||
{subtitleBlocks.map((b, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={styles.subtitleBlock}
|
||||
style={{ left: LABEL_WIDTH + b.x, width: Math.max(2, b.w) }}
|
||||
title={b.text}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user