dillon_stuff/TalkEdit
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feature 10,11

Browse Source
This commit is contained in:
dillonj
2026-04-15 20:57:43 -06:00
parent f121d71f5f
commit 3fa67383c4
5 changed files with 191 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/components/WaveformTimeline.tsx
View File

@ -243,6 +243,8 @@ export default function WaveformTimeline({
const muteRanges = useEditorStore((s) => s.muteRanges);
const gainRanges = useEditorStore((s) => s.gainRanges);
const speedRanges = useEditorStore((s) => s.speedRanges);
const markInTime = useEditorStore((s) => s.markInTime);
const markOutTime = useEditorStore((s) => s.markOutTime);
const setCurrentTime = useEditorStore((s) => s.setCurrentTime);
const addCutRange = useEditorStore((s) => s.addCutRange);
const addMuteRange = useEditorStore((s) => s.addMuteRange);
@ -570,6 +572,33 @@ export default function WaveformTimeline({
ctx.strokeRect(x1, waveTop, x2 - x1, waveH);
}
// Draw mark in/out range and markers
if (markInTime !== null && markOutTime !== null) {
const x1 = (sourceToDisplayTime(Math.min(markInTime, markOutTime), timelineSegments, dur) - scroll) * pxPerSec;
const x2 = (sourceToDisplayTime(Math.max(markInTime, markOutTime), timelineSegments, dur) - scroll) * pxPerSec;
ctx.fillStyle = 'rgba(250, 204, 21, 0.14)';
ctx.fillRect(x1, waveTop, x2 - x1, waveH);
}
const drawMarkLine = (time: number, label: string) => {
const x = (sourceToDisplayTime(time, timelineSegments, dur) - scroll) * pxPerSec;
if (x < -4 || x > width + 4) return;
ctx.strokeStyle = '#facc15';
ctx.lineWidth = 1.5;
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, height);
ctx.stroke();
ctx.fillStyle = '#facc15';
ctx.font = '9px sans-serif';
ctx.textBaseline = 'top';
ctx.fillText(label, Math.min(width - 12, Math.max(2, x + 2)), 2);
ctx.textBaseline = 'alphabetic';
};
if (markInTime !== null) drawMarkLine(markInTime, 'I');
if (markOutTime !== null) drawMarkLine(markOutTime, 'O');
const mid = waveTop + waveH / 2;
ctx.beginPath();
ctx.strokeStyle = '#4a4d5e';
@ -605,6 +634,8 @@ export default function WaveformTimeline({
gainMode,
speedMode,
selectedZone,
markInTime,
markOutTime,
displayDuration,
showCutZones,
showMuteZones,
@ -1149,6 +1180,8 @@ export default function WaveformTimeline({
{muteMode && <span className="text-[10px] text-blue-400">Mute mode</span>}
{gainMode && <span className="text-[10px] text-amber-400">Gain mode ({gainModeDb.toFixed(1)} dB)</span>}
{speedMode && <span className="text-[10px] text-emerald-400">Speed mode ({speedModeValue.toFixed(2)}x)</span>}
{markInTime !== null && <span className="text-[10px] text-yellow-300">I {markInTime.toFixed(2)}s</span>}
{markOutTime !== null && <span className="text-[10px] text-yellow-300">O {markOutTime.toFixed(2)}s</span>}
</div>
<div className="flex items-center gap-2">
<button