3959 lines
218 KiB
HTML
3959 lines
218 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SonicForge Studio - Professional DAW Editor</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
|
|
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
|
|
<script src="https://unpkg.com/@babel/standalone@7.26.0/babel.min.js"></script>
|
|
<style>
|
|
body {
|
|
background-color: #1a1a1a;
|
|
color: #c0c0c0;
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
}
|
|
.daw-bg { background-color: #1e1e1e; }
|
|
.daw-panel { background-color: #262626; }
|
|
.daw-header { background-color: #2e2e2e; }
|
|
.daw-border { border-color: #181818; }
|
|
.daw-track-active { background-color: #333333; }
|
|
::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
::-webkit-scrollbar-track { background: #141414; }
|
|
::-webkit-scrollbar-thumb { background: #3a3a3a; border: 2px solid #141414; border-radius: 4px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }
|
|
.knob-container { position: relative; width: 28px; height: 28px; }
|
|
.knob-dial { transform-origin: center; transition: transform 0.1s ease; }
|
|
.selection-interactive-box {
|
|
min-width: 4px;
|
|
}
|
|
.no-scrollbar {
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE 10+ */
|
|
}
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none; /* Safari and Chrome */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="h-screen w-screen flex flex-col">
|
|
<div id="root" class="h-full w-full flex flex-col"></div>
|
|
|
|
<script type="text/babel">
|
|
const { useState, useRef, useEffect, useMemo } = React;
|
|
|
|
// ── FastAPI Backend Configuration ──
|
|
const API_BASE_URL = window.location.origin;
|
|
const API_AUDIO = `${API_BASE_URL}/api/v1/audio`;
|
|
const API_MULTITRACK = `${API_BASE_URL}/api/v1/multitrack`;
|
|
const API_TASKS = `${API_BASE_URL}/api/v1/audio/tasks`;
|
|
|
|
// Storage for server-side file IDs mapped to track IDs
|
|
let serverFileIdMap = {};
|
|
|
|
let audioCtx;
|
|
function getAudioContext() {
|
|
if (!audioCtx) {
|
|
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
|
}
|
|
if (audioCtx.state === 'suspended') {
|
|
audioCtx.resume();
|
|
}
|
|
return audioCtx;
|
|
}
|
|
|
|
const formatTime = (secs) => {
|
|
if (isNaN(secs) || secs < 0) return "0:00.000";
|
|
const m = Math.floor(secs / 60);
|
|
const s = Math.floor(secs % 60);
|
|
const ms = Math.floor((secs % 1) * 1000).toString().padStart(3, '0');
|
|
return `${m}:${s.toString().padStart(2, '0')}.${ms}`;
|
|
};
|
|
|
|
const formatBeat = (secs, bpmVal) => {
|
|
if (isNaN(secs) || secs < 0) return "1.1.1";
|
|
const beatDuration = 60 / bpmVal;
|
|
const barDuration = beatDuration * 4;
|
|
const bar = Math.floor(secs / barDuration) + 1;
|
|
const beat = Math.floor((secs % barDuration) / beatDuration) + 1;
|
|
const sub = Math.floor((secs % beatDuration) / (beatDuration / 4)) + 1;
|
|
return `${bar}.${beat}.${sub}`;
|
|
};
|
|
|
|
const getBeatMarkers = (maxDur, bpmVal) => {
|
|
const beatDuration = 60 / bpmVal;
|
|
const barDuration = beatDuration * 4;
|
|
const markers = [];
|
|
for (let t = 0; t <= maxDur; t += beatDuration) {
|
|
const isBar = Math.abs(t % barDuration) < 0.001 || Math.abs(t % barDuration - barDuration) < 0.001;
|
|
markers.push({ time: t, isBar, beatNum: Math.floor(t / beatDuration) + 1 });
|
|
}
|
|
return markers;
|
|
};
|
|
|
|
const findZeroCrossing = (buffer, targetTime) => {
|
|
if (!buffer) return targetTime;
|
|
const sampleRate = buffer.sampleRate;
|
|
const data = buffer.getChannelData(0);
|
|
const targetSample = Math.floor(targetTime * sampleRate);
|
|
const windowSize = Math.floor(0.04 * sampleRate);
|
|
const start = Math.max(0, targetSample - windowSize);
|
|
const end = Math.min(data.length - 2, targetSample + windowSize);
|
|
|
|
let bestSample = targetSample;
|
|
let minDistance = Infinity;
|
|
|
|
for (let i = start; i <= end; i++) {
|
|
if ((data[i] >= 0 && data[i+1] <= 0) || (data[i] <= 0 && data[i+1] >= 0)) {
|
|
const dist = Math.abs(i - targetSample);
|
|
if (dist < minDistance) {
|
|
minDistance = dist;
|
|
bestSample = i;
|
|
}
|
|
}
|
|
}
|
|
return bestSample / sampleRate;
|
|
};
|
|
|
|
const VolumeKnob = ({ value, onChange, min = 0, max = 1 }) => {
|
|
const [isDragging, setIsDragging] = useState(false);
|
|
const startY = useRef(0);
|
|
const startValue = useRef(0);
|
|
|
|
const rotation = useMemo(() => {
|
|
const percent = (value - min) / (max - min);
|
|
return -135 + percent * 270;
|
|
}, [value, min, max]);
|
|
|
|
const handleMouseDown = (e) => {
|
|
setIsDragging(true);
|
|
startY.current = e.clientY;
|
|
startValue.current = value;
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
};
|
|
|
|
const handleMouseMove = (e) => {
|
|
const deltaY = startY.current - e.clientY;
|
|
const sensitivity = 0.005;
|
|
const newValue = Math.max(min, Math.min(max, startValue.current + deltaY * sensitivity));
|
|
onChange(parseFloat(newValue.toFixed(2)));
|
|
};
|
|
|
|
const handleMouseUp = () => {
|
|
setIsDragging(false);
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="knob-container cursor-ns-resize flex flex-col items-center"
|
|
onMouseDown={handleMouseDown}
|
|
title={`Volume: ${Math.round(value * 100)}%`}
|
|
>
|
|
<svg className="w-7 h-7" viewBox="0 0 40 40">
|
|
<circle cx="20" cy="20" r="16" fill="#141414" stroke="#444" strokeWidth="2" />
|
|
<g transform={`rotate(${rotation} 20 20)`} className="knob-dial">
|
|
<line x1="20" y1="20" x2="20" y2="6" stroke="#ef4444" strokeWidth="3" strokeLinecap="round" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const WaveformLane = ({
|
|
track,
|
|
zoom,
|
|
timelineWidth,
|
|
onSelectRange,
|
|
onPlayheadSet,
|
|
isSelected,
|
|
onSelectTrack,
|
|
markers,
|
|
selectionMode,
|
|
localSelectionTrackId,
|
|
localSelLeft,
|
|
localSelRight,
|
|
onTrackLaneMouseDown,
|
|
onContextMenu,
|
|
onClipDragStart,
|
|
onClipStretchStart,
|
|
onSelectionEdgeDragStart,
|
|
setSelectedClipId,
|
|
activeTool,
|
|
onSplitTrackAtTime,
|
|
onEditClipInSubTab,
|
|
snapValue,
|
|
bpm,
|
|
}) => {
|
|
const canvasRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
const ctx = canvas.getContext('2d');
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const width = timelineWidth;
|
|
const height = canvas.parentElement.clientHeight;
|
|
|
|
canvas.width = width * dpr;
|
|
canvas.height = height * dpr;
|
|
ctx.scale(dpr, dpr);
|
|
|
|
ctx.fillStyle = isSelected ? '#2a2a2a' : (track.id % 2 === 0 ? '#181818' : '#1d1d1d');
|
|
ctx.fillRect(0, 0, width, height);
|
|
|
|
// Grid lines based on Snap value
|
|
ctx.strokeStyle = 'rgba(255, 255, 255, 0.03)';
|
|
ctx.lineWidth = 1;
|
|
const totalSec = width / zoom;
|
|
|
|
let gridSpacing = 1.0; // default 1 second
|
|
if (snapValue && snapValue !== 'free') {
|
|
const beatDuration = 60 / parseFloat(bpm || 120);
|
|
let divisor = 1;
|
|
if (snapValue === '1') divisor = 1;
|
|
else if (snapValue === '1/2') divisor = 0.5;
|
|
else if (snapValue === '1/4') divisor = 0.25;
|
|
else if (snapValue === '1/8') divisor = 0.125;
|
|
else if (snapValue === '1/16') divisor = 0.0625;
|
|
else if (snapValue === '1/32') divisor = 0.03125;
|
|
|
|
gridSpacing = beatDuration * divisor;
|
|
} else {
|
|
gridSpacing = 60 / parseFloat(bpm || 120); // default to 1 beat
|
|
}
|
|
|
|
// Guard: if lines are too close, scale grid spacing by multiples of 2
|
|
let drawSpacing = gridSpacing;
|
|
while (drawSpacing * zoom < 10) {
|
|
drawSpacing *= 2;
|
|
}
|
|
|
|
for (let s = 0; s <= totalSec; s += drawSpacing) {
|
|
const x = s * zoom;
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, 0);
|
|
ctx.lineTo(x, height);
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Draw waveform lane
|
|
const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
|
|
id: 'default',
|
|
buffer: track.buffer,
|
|
startTime: track.startTime || 0,
|
|
name: track.name,
|
|
speed: track.speed || 1.0
|
|
}] : []);
|
|
|
|
if (clips.length > 0) {
|
|
clips.forEach(clip => {
|
|
const data = clip.buffer.getChannelData(0);
|
|
const sampleRate = clip.buffer.sampleRate;
|
|
const totalSamples = data.length;
|
|
const originalDuration = totalSamples / sampleRate;
|
|
const clipSpeed = clip.speed || 1.0;
|
|
const duration = originalDuration / clipSpeed;
|
|
|
|
const xStart = (clip.startTime || 0) * zoom;
|
|
const wClip = duration * zoom;
|
|
const xEnd = xStart + wClip;
|
|
|
|
// 1. Draw Clip Layer Background & Border
|
|
ctx.fillStyle = track.color ? track.color + '22' : 'rgba(6, 182, 212, 0.12)';
|
|
ctx.strokeStyle = track.color || '#06b6d4';
|
|
ctx.lineWidth = 1.5;
|
|
|
|
const clipTop = 8;
|
|
const clipHeight = height - 16;
|
|
|
|
ctx.beginPath();
|
|
if (ctx.roundRect) {
|
|
ctx.roundRect(xStart, clipTop, wClip, clipHeight, 4);
|
|
} else {
|
|
ctx.rect(xStart, clipTop, wClip, clipHeight);
|
|
}
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
// 2. Draw Clip Label & Speed Label (Speed Math: D/D' * 100)
|
|
ctx.fillStyle = '#e4e4e7';
|
|
ctx.font = 'bold 9px sans-serif';
|
|
ctx.fillText(clip.name || 'Clip', xStart + 8, clipTop + 14);
|
|
|
|
if (clipSpeed !== 1.0) {
|
|
ctx.fillStyle = '#fbbf24'; // Yellow color
|
|
ctx.font = 'bold 8px sans-serif';
|
|
ctx.fillText(`Speed: ${(clipSpeed * 100).toFixed(1)}%`, xStart + 8, clipTop + 24);
|
|
}
|
|
|
|
// Draw markers
|
|
if (markers && markers.length > 0) {
|
|
markers.forEach(m => {
|
|
const mx = m.time * zoom;
|
|
ctx.fillStyle = '#fbbf24';
|
|
ctx.fillRect(mx - 1, 0, 2, height);
|
|
ctx.fillStyle = 'rgba(251, 191, 36, 0.1)';
|
|
ctx.fillRect(mx - 1, 0, 2, height);
|
|
});
|
|
}
|
|
|
|
// 3. Peak waveform drawing only within clip bounds (speed adjusted)
|
|
ctx.strokeStyle = isSelected ? '#22d3ee' : '#a7f3d0';
|
|
ctx.lineWidth = 1;
|
|
|
|
const drawXStart = Math.max(0, Math.floor(xStart));
|
|
const drawXEnd = Math.min(width, Math.ceil(xEnd));
|
|
const samplesPerPixel = (sampleRate / zoom) * clipSpeed;
|
|
|
|
for (let px = drawXStart; px < drawXEnd; px++) {
|
|
const timeInClip = ((px - xStart) / zoom) * clipSpeed;
|
|
const sampleIdx = Math.floor(timeInClip * sampleRate);
|
|
const chunkSize = Math.max(1, Math.floor(samplesPerPixel));
|
|
const chunkStart = Math.max(0, sampleIdx - Math.floor(chunkSize / 2));
|
|
const chunkEnd = Math.min(totalSamples, chunkStart + chunkSize);
|
|
|
|
let maxVal = 0;
|
|
for (let i = chunkStart; i < chunkEnd; i++) {
|
|
const abs = Math.abs(data[i]);
|
|
if (abs > maxVal) maxVal = abs;
|
|
}
|
|
|
|
const mid = height / 2;
|
|
const peakHeight = maxVal * (clipHeight * 0.45);
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(px, mid - peakHeight);
|
|
ctx.lineTo(px, mid + peakHeight);
|
|
ctx.stroke();
|
|
}
|
|
});
|
|
} else {
|
|
ctx.fillStyle = '#444';
|
|
ctx.font = '12px Inter, sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText('Kéo thả hoặc tải file âm thanh vào Track này', width / 2, height / 2);
|
|
}
|
|
|
|
// Selection highlight - local selection on this track
|
|
if (selectionMode === 'local' && localSelectionTrackId === track.id &&
|
|
localSelLeft !== null && localSelRight !== null && localSelRight > localSelLeft) {
|
|
const hlLeft = localSelLeft * zoom;
|
|
const hlWidth = (localSelRight - localSelLeft) * zoom;
|
|
ctx.fillStyle = 'rgba(245, 158, 11, 0.15)';
|
|
ctx.fillRect(hlLeft, 0, hlWidth, height);
|
|
ctx.strokeStyle = '#f59e0b';
|
|
ctx.lineWidth = 1.5;
|
|
ctx.strokeRect(hlLeft, 0, hlWidth, height);
|
|
}
|
|
|
|
}, [track, zoom, timelineWidth, isSelected, markers, selectionMode, localSelectionTrackId, localSelLeft, localSelRight, snapValue, bpm]);
|
|
|
|
return (
|
|
<canvas
|
|
ref={canvasRef}
|
|
className="w-full h-full cursor-crosshair"
|
|
onMouseMove={(e) => {
|
|
if (!canvasRef.current) return;
|
|
const rect = canvasRef.current.getBoundingClientRect();
|
|
const wrapper = canvasRef.current?.parentElement?.parentElement;
|
|
const scrollLeft = wrapper ? wrapper.scrollLeft : 0;
|
|
const x = e.clientX - rect.left + scrollLeft;
|
|
const time = x / zoom;
|
|
|
|
const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
|
|
id: 'default',
|
|
buffer: track.buffer,
|
|
startTime: track.startTime || 0,
|
|
name: track.name,
|
|
speed: track.speed || 1.0
|
|
}] : []);
|
|
|
|
// Check if hovering near local selection boundaries of this track
|
|
const isLocal = selectionMode === 'local' && localSelectionTrackId === track.id;
|
|
if (isLocal && localSelLeft !== null && localSelRight !== null) {
|
|
const leftPx = localSelLeft * zoom;
|
|
const rightPx = localSelRight * zoom;
|
|
const distToLeft = Math.abs(x - leftPx);
|
|
const distToRight = Math.abs(x - rightPx);
|
|
if (distToLeft <= 5 || distToRight <= 5) {
|
|
canvasRef.current.style.cursor = 'ew-resize';
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Check if hovering near right edge of a clip for time-stretching (Alt key required)
|
|
const toleranceSec = 8 / zoom;
|
|
const rightEdgeClip = clips.find(c => {
|
|
const duration = c.buffer.duration / (c.speed || 1.0);
|
|
return Math.abs(time - (c.startTime + duration)) <= toleranceSec;
|
|
});
|
|
|
|
if (rightEdgeClip && e.altKey) {
|
|
canvasRef.current.style.cursor = 'ew-resize';
|
|
return;
|
|
}
|
|
|
|
const hoveredClip = clips.find(c => time >= c.startTime && time < c.startTime + c.buffer.duration / (c.speed || 1.0));
|
|
const isOverClip = !!hoveredClip;
|
|
|
|
if (activeTool === 'grab') {
|
|
canvasRef.current.style.cursor = isOverClip ? 'grab' : 'default';
|
|
} else if (activeTool === 'razor') {
|
|
canvasRef.current.style.cursor = isOverClip ? 'cell' : 'not-allowed';
|
|
} else {
|
|
// select tool
|
|
canvasRef.current.style.cursor = (isOverClip && (e.altKey || e.ctrlKey)) ? 'grab' : 'crosshair';
|
|
}
|
|
}}
|
|
onMouseDown={(e) => {
|
|
// Ignore right-click for local selection drag (context menu handles it)
|
|
if (e.button === 2) return;
|
|
const rect = canvasRef.current.getBoundingClientRect();
|
|
const wrapper = canvasRef.current?.parentElement?.parentElement;
|
|
const scrollLeft = wrapper ? wrapper.scrollLeft : 0;
|
|
const x = e.clientX - rect.left + scrollLeft;
|
|
const time = Math.max(0, x / zoom);
|
|
onSelectTrack(track.id);
|
|
|
|
const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
|
|
id: 'default',
|
|
buffer: track.buffer,
|
|
startTime: track.startTime || 0,
|
|
name: track.name,
|
|
speed: track.speed || 1.0
|
|
}] : []);
|
|
|
|
// Check if dragging selection boundaries (local mode)
|
|
const isLocal = selectionMode === 'local' && localSelectionTrackId === track.id;
|
|
if (isLocal && localSelLeft !== null && localSelRight !== null) {
|
|
const leftPx = localSelLeft * zoom;
|
|
const rightPx = localSelRight * zoom;
|
|
const distToLeft = Math.abs(x - leftPx);
|
|
const distToRight = Math.abs(x - rightPx);
|
|
if (distToLeft <= 5) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (onSelectionEdgeDragStart) onSelectionEdgeDragStart(e, track.id, 'left');
|
|
return;
|
|
} else if (distToRight <= 5) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (onSelectionEdgeDragStart) onSelectionEdgeDragStart(e, track.id, 'right');
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Check if time-stretching (Alt + Right Edge)
|
|
const toleranceSec = 8 / zoom;
|
|
const rightEdgeClip = clips.find(c => {
|
|
const duration = c.buffer.duration / (c.speed || 1.0);
|
|
return Math.abs(time - (c.startTime + duration)) <= toleranceSec;
|
|
});
|
|
|
|
if (rightEdgeClip && e.altKey) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (onClipStretchStart) {
|
|
onClipStretchStart(track.id, rightEdgeClip.id, time);
|
|
}
|
|
return;
|
|
}
|
|
|
|
const clickedClip = clips.find(c => time >= c.startTime && time < c.startTime + c.buffer.duration / (c.speed || 1.0));
|
|
|
|
// Set selected clip ID
|
|
if (clickedClip) {
|
|
setSelectedClipId({ trackId: track.id, clipId: clickedClip.id === 'default' ? 'default_' + track.id : clickedClip.id });
|
|
} else {
|
|
setSelectedClipId(null);
|
|
}
|
|
|
|
if (activeTool === 'razor') {
|
|
if (clickedClip) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (onSplitTrackAtTime) {
|
|
onSplitTrackAtTime(track.id, clickedClip.id, time);
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (activeTool === 'grab') {
|
|
if (clickedClip) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (onClipDragStart) {
|
|
onClipDragStart(track.id, clickedClip.id, time - clickedClip.startTime, e.ctrlKey);
|
|
}
|
|
} else {
|
|
onPlayheadSet(time);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Check for click drag clip (Alt to move, Ctrl to duplicate)
|
|
if (clickedClip && (e.altKey || e.ctrlKey)) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (onClipDragStart) {
|
|
onClipDragStart(track.id, clickedClip.id, time - clickedClip.startTime, e.ctrlKey);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Check if Ctrl+Click outside active local selection to clear
|
|
if (e.ctrlKey) {
|
|
const minSel = localSelLeft !== null && localSelRight !== null ? Math.min(localSelLeft, localSelRight) : null;
|
|
const maxSel = localSelLeft !== null && localSelRight !== null ? Math.max(localSelLeft, localSelRight) : null;
|
|
const isInsideSelection = isLocal && minSel !== null && maxSel !== null && time >= minSel && time <= maxSel;
|
|
if (!isInsideSelection) {
|
|
clearLocalSelection();
|
|
setSelectionMode(null);
|
|
}
|
|
return;
|
|
}
|
|
|
|
onPlayheadSet(time);
|
|
if (onTrackLaneMouseDown) {
|
|
onTrackLaneMouseDown(track.id, time, e);
|
|
}
|
|
e.stopPropagation();
|
|
}}
|
|
onDoubleClick={(e) => {
|
|
const rect = canvasRef.current.getBoundingClientRect();
|
|
const wrapper = canvasRef.current?.parentElement?.parentElement;
|
|
const scrollLeft = wrapper ? wrapper.scrollLeft : 0;
|
|
const x = e.clientX - rect.left + scrollLeft;
|
|
const time = Math.max(0, x / zoom);
|
|
|
|
const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
|
|
id: 'default',
|
|
buffer: track.buffer,
|
|
startTime: track.startTime || 0,
|
|
name: track.name,
|
|
speed: track.speed || 1.0
|
|
}] : []);
|
|
|
|
const clickedClip = clips.find(c => time >= c.startTime && time < c.startTime + c.buffer.duration / (c.speed || 1.0));
|
|
if (clickedClip) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (onEditClipInSubTab) {
|
|
onEditClipInSubTab(track.id, clickedClip.id);
|
|
}
|
|
}
|
|
}}
|
|
onContextMenu={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onSelectTrack(track.id);
|
|
const rect = canvasRef.current.getBoundingClientRect();
|
|
const wrapper = canvasRef.current?.parentElement?.parentElement;
|
|
const scrollLeft = wrapper ? wrapper.scrollLeft : 0;
|
|
const x = e.clientX - rect.left + scrollLeft;
|
|
const time = Math.max(0, x / zoom);
|
|
if (onContextMenu) onContextMenu(e, track.id, time);
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const TempoTrackLane = ({ bpm, zoom, timelineWidth, onPlayheadSet, snapValue }) => {
|
|
const canvasRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
const ctx = canvas.getContext('2d');
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const width = timelineWidth;
|
|
const parent = canvas.parentElement;
|
|
const height = parent ? parent.clientHeight : 40;
|
|
|
|
canvas.width = width * dpr;
|
|
canvas.height = height * dpr;
|
|
ctx.scale(dpr, dpr);
|
|
|
|
ctx.fillStyle = '#1a1a2e';
|
|
ctx.fillRect(0, 0, width, height);
|
|
|
|
const beatDuration = 60 / bpm;
|
|
const barDuration = beatDuration * 4;
|
|
const totalSec = width / zoom;
|
|
|
|
for (let t = 0; t <= totalSec; t += beatDuration) {
|
|
const beatNum = Math.floor(t / beatDuration) + 1;
|
|
const isBar = beatNum % 4 === 1;
|
|
const x = t * zoom;
|
|
|
|
if (isBar) {
|
|
ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
|
|
ctx.lineWidth = 1.5;
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, 0);
|
|
ctx.lineTo(x, height);
|
|
ctx.stroke();
|
|
|
|
ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
|
|
ctx.font = 'bold 9px Inter, sans-serif';
|
|
ctx.textAlign = 'left';
|
|
ctx.fillText(`${Math.ceil(beatNum / 4)}`, x + 3, 11);
|
|
} else {
|
|
ctx.strokeStyle = 'rgba(255, 255, 255, 0.08)';
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, 0);
|
|
ctx.lineTo(x, height);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
// Draw snap sub-ticks at the bottom
|
|
if (snapValue && snapValue !== 'free') {
|
|
ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)';
|
|
ctx.lineWidth = 0.8;
|
|
let divisor = 1;
|
|
if (snapValue === '1') divisor = 1;
|
|
else if (snapValue === '1/2') divisor = 0.5;
|
|
else if (snapValue === '1/4') divisor = 0.25;
|
|
else if (snapValue === '1/8') divisor = 0.125;
|
|
else if (snapValue === '1/16') divisor = 0.0625;
|
|
else if (snapValue === '1/32') divisor = 0.03125;
|
|
|
|
const snapInterval = beatDuration * divisor;
|
|
if (snapInterval * zoom >= 4) {
|
|
for (let t = 0; t <= totalSec; t += snapInterval) {
|
|
const onBeat = Math.abs((t / beatDuration) - Math.round(t / beatDuration)) < 0.001;
|
|
if (!onBeat) {
|
|
const x = t * zoom;
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, height - 6);
|
|
ctx.lineTo(x, height);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ctx.fillStyle = 'rgba(255, 255, 255, 0.35)';
|
|
ctx.font = 'bold 10px Inter, sans-serif';
|
|
ctx.textAlign = 'right';
|
|
ctx.fillText(`${bpm} BPM`, width - 6, 12);
|
|
|
|
}, [bpm, zoom, timelineWidth, snapValue]);
|
|
|
|
return (
|
|
<canvas
|
|
ref={canvasRef}
|
|
className="w-full h-full cursor-crosshair"
|
|
onMouseDown={(e) => {
|
|
const wrapper = canvasRef.current?.parentElement?.parentElement;
|
|
const scrollLeft = wrapper ? wrapper.scrollLeft : 0;
|
|
const rect = canvasRef.current.getBoundingClientRect();
|
|
const x = e.clientX - rect.left + scrollLeft;
|
|
const time = Math.max(0, x / zoom);
|
|
onPlayheadSet(time);
|
|
e.stopPropagation();
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
// ── Sub-Tab Waveform Component (LOOP_EDITOR_2.md §1.2) ──
|
|
const SubTabWaveform = ({ buffer }) => {
|
|
const canvasRef = useRef(null);
|
|
useEffect(() => {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas || !buffer) return;
|
|
const ctx = canvas.getContext('2d');
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const rect = canvas.getBoundingClientRect();
|
|
canvas.width = rect.width * dpr;
|
|
canvas.height = rect.height * dpr;
|
|
ctx.scale(dpr, dpr);
|
|
|
|
const w = rect.width;
|
|
const h = rect.height;
|
|
ctx.fillStyle = '#181818';
|
|
ctx.fillRect(0, 0, w, h);
|
|
|
|
const data = buffer.getChannelData(0);
|
|
const len = data.length;
|
|
if (len === 0) return;
|
|
|
|
ctx.strokeStyle = '#6ee7b7';
|
|
ctx.lineWidth = 1;
|
|
for (let px = 0; px < w; px++) {
|
|
const start = Math.floor((px / w) * len);
|
|
const end = Math.floor(((px + 1) / w) * len);
|
|
let maxVal = 0;
|
|
for (let i = start; i < end && i < len; i++) {
|
|
const abs = Math.abs(data[i]);
|
|
if (abs > maxVal) maxVal = abs;
|
|
}
|
|
const mid = h / 2;
|
|
const peakHeight = maxVal * (h * 0.4);
|
|
ctx.beginPath();
|
|
ctx.moveTo(px, mid - peakHeight);
|
|
ctx.lineTo(px, mid + peakHeight);
|
|
ctx.stroke();
|
|
}
|
|
}, [buffer]);
|
|
return <canvas ref={canvasRef} className="w-full h-full rounded border border-zinc-800"></canvas>;
|
|
};
|
|
|
|
const App = () => {
|
|
// ── State Definitions ──
|
|
const [tracks, setTracks] = useState([
|
|
{ id: '1', name: 'Track 01', buffer: null, startTime: 0, height: 96, volume: 0.8, muted: false, solo: false, color: '#0f766e', markers: [], serverFileId: null },
|
|
{ id: '2', name: 'Track 02', buffer: null, startTime: 0, height: 96, volume: 0.8, muted: false, solo: false, color: '#1d4ed8', markers: [], serverFileId: null },
|
|
]);
|
|
const [bpm, setBpm] = useState(localStorage.getItem('studio_bpm') || '120');
|
|
const [draggedClip, setDraggedClip] = useState(null); // { trackId, clickOffset, buffer, name, volume, color }
|
|
const [hoveredTrackId, setHoveredTrackId] = useState(null);
|
|
const [activeTool, setActiveTool] = useState('select'); // 'select' | 'grab' | 'razor'
|
|
const [snapValue, setSnapValue] = useState('free'); // 'free', '1', '1/2', '1/4', '1/8', '1/16', '1/32'
|
|
|
|
const snapTime = (time, snapVal, bpmVal) => {
|
|
if (snapVal === 'free') return time;
|
|
const beatDuration = 60 / parseFloat(bpmVal || 120);
|
|
let divisor = 1;
|
|
if (snapVal === '1') divisor = 1;
|
|
else if (snapVal === '1/2') divisor = 0.5;
|
|
else if (snapVal === '1/4') divisor = 0.25;
|
|
else if (snapVal === '1/8') divisor = 0.125;
|
|
else if (snapVal === '1/16') divisor = 0.0625;
|
|
else if (snapVal === '1/32') divisor = 0.03125;
|
|
|
|
const gridSpacing = beatDuration * divisor;
|
|
return Math.round(time / gridSpacing) * gridSpacing;
|
|
};
|
|
|
|
const snapValueRef = useRef(snapValue);
|
|
snapValueRef.current = snapValue;
|
|
const bpmRef = useRef(bpm);
|
|
bpmRef.current = bpm;
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
if (window.lucide) {
|
|
window.lucide.createIcons();
|
|
}
|
|
}, 50);
|
|
}, [activeTool]);
|
|
// BMP for Tempo Track - LOOP_EDITOR_2.md §6
|
|
const [selectedTrackId, setSelectedTrackId] = useState('1');
|
|
const [currentTime, setCurrentTime] = useState(0);
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
const [selectionStart, setSelectionStart] = useState(null);
|
|
const [selectionEnd, setSelectionEnd] = useState(null);
|
|
const [selectionMode, setSelectionMode] = useState(null); // 'global' (from ruler) | 'local' (from track)
|
|
const [localSelectionTrackId, setLocalSelectionTrackId] = useState(null);
|
|
const [localSelectionStart, setLocalSelectionStart] = useState(null);
|
|
const [localSelectionEnd, setLocalSelectionEnd] = useState(null);
|
|
const [zoom, setZoom] = useState(100);
|
|
const [isLoopingSelection, setIsLoopingSelection] = useState(false);
|
|
const [isExporting, setIsExporting] = useState(false);
|
|
const [soloedTrackId, setSoloedTrackId] = useState(null);
|
|
const [toastMessage, setToastMessage] = useState(null);
|
|
const [showAIConfig, setShowAIConfig] = useState(false);
|
|
const [aiConfig, setAiConfig] = useState({
|
|
baseUrl: localStorage.getItem('ai_base_url') || `${API_BASE_URL}`,
|
|
apiKey: localStorage.getItem('ai_api_key') || '',
|
|
model: localStorage.getItem('ai_model') || 'deepseek-chat',
|
|
});
|
|
const [analysisState, setAnalysisState] = useState({
|
|
status: 'Sẵn sàng. Chạy AI để phân tích nhịp.',
|
|
data: null,
|
|
isRunning: false,
|
|
});
|
|
const [exportSettings, setExportSettings] = useState({
|
|
sampleRate: '44100',
|
|
bitDepth: '16',
|
|
format: 'wav',
|
|
});
|
|
const [serverStatus, setServerStatus] = useState('checking...');
|
|
const [menuOpen, setMenuOpen] = useState(null);
|
|
const [selectedClipId, setSelectedClipId] = useState(null); // { trackId, clipId }
|
|
const [stretchedClip, setStretchedClip] = useState(null); // { trackId, clipId, originalDuration, startTime, originalSpeed, beforeSnap }
|
|
|
|
// ── Context Menu & Clipboard ──
|
|
const [contextMenu, setContextMenu] = useState(null); // { x, y, trackId }
|
|
const clipboardRef = useRef(null); // { buffer, name, volume, color } for copy/paste
|
|
|
|
// ── Undo/Redo Engine (LOOP_EDITOR.md §4) ──
|
|
const [undoStack, setUndoStack] = useState([]);
|
|
const [redoStack, setRedoStack] = useState([]);
|
|
const MAX_UNDO = 30;
|
|
|
|
const pushAction = (actionType, trackId, beforeState, afterState) => {
|
|
const node = {
|
|
action_type: actionType,
|
|
track_id: trackId,
|
|
timestamp: Date.now(),
|
|
before_state: beforeState,
|
|
after_state: afterState,
|
|
};
|
|
setUndoStack(prev => {
|
|
const next = [...prev, node];
|
|
if (next.length > MAX_UNDO) next.shift();
|
|
return next;
|
|
});
|
|
setRedoStack([]);
|
|
};
|
|
|
|
const handleUndo = () => {
|
|
if (undoStack.length === 0) return;
|
|
const last = undoStack[undoStack.length - 1];
|
|
setUndoStack(prev => prev.slice(0, -1));
|
|
setRedoStack(prev => [...prev, last]);
|
|
applyTrackState(last.track_id, last.before_state);
|
|
showToast(`Undo: ${last.action_type}`, 'info');
|
|
};
|
|
|
|
const handleRedo = () => {
|
|
if (redoStack.length === 0) return;
|
|
const last = redoStack[redoStack.length - 1];
|
|
setRedoStack(prev => prev.slice(0, -1));
|
|
setUndoStack(prev => [...prev, last]);
|
|
applyTrackState(last.track_id, last.after_state);
|
|
showToast(`Redo: ${last.action_type}`, 'info');
|
|
};
|
|
|
|
const applyTrackState = (trackId, state) => {
|
|
setTracks(prev => prev.map(t => {
|
|
if (t.id !== trackId) return t;
|
|
return { ...t, ...state };
|
|
}));
|
|
};
|
|
|
|
const captureTrackSnapshot = (trackId) => {
|
|
const track = tracks.find(t => t.id === trackId);
|
|
if (!track) return null;
|
|
return {
|
|
volume: track.volume,
|
|
muted: track.muted,
|
|
name: track.name,
|
|
markers: JSON.parse(JSON.stringify(track.markers || [])),
|
|
// buffer is captured via reference copy for undo; we store a clone for redo
|
|
buffer: track.buffer,
|
|
startTime: track.startTime || 0,
|
|
clips: track.clips ? track.clips.map(c => ({
|
|
id: c.id,
|
|
buffer: c.buffer,
|
|
startTime: c.startTime,
|
|
name: c.name
|
|
})) : null
|
|
};
|
|
};
|
|
|
|
// ── Tab System (LOOP_EDITOR_2.md §1) ──
|
|
const [activeTab, setActiveTab] = useState('main');
|
|
const [subTabs, setSubTabs] = useState([]); // [{id, label, trackId, startTime, endTime, buffer}, ...]
|
|
const [selectionCleared, setSelectionCleared] = useState(false); // LOOP_EDITOR_2.md §4.2
|
|
|
|
// ── Temp Edit Tab (LOOP_EDITOR_2.md §1.2 Sub Tab) ──
|
|
const [tempTabActive, setTempTabActive] = useState(false);
|
|
const [tempTabBuffer, setTempTabBuffer] = useState(null);
|
|
const [tempTabTrackId, setTempTabTrackId] = useState(null);
|
|
const [tempTabOrigStart, setTempTabOrigStart] = useState(0);
|
|
const [tempTabOrigEnd, setTempTabOrigEnd] = useState(0);
|
|
const tempTabCanvasRef = useRef(null);
|
|
|
|
// Effect parameters for temp tab
|
|
const [tempTabEffects, setTempTabEffects] = useState({
|
|
reverse: false,
|
|
gainDb: 0,
|
|
fadeInMs: 0,
|
|
fadeOutMs: 0,
|
|
});
|
|
|
|
const timelineWrapperRef = useRef(null);
|
|
const tcpContainerRef = useRef(null);
|
|
|
|
const handleTimelineScroll = (e) => {
|
|
if (tcpContainerRef.current) {
|
|
tcpContainerRef.current.scrollTop = e.currentTarget.scrollTop;
|
|
}
|
|
};
|
|
const rulerRef = useRef(null);
|
|
const activeSourcesRef = useRef([]);
|
|
const startOffsetTimeRef = useRef(0);
|
|
const startAudioTimeRef = useRef(0);
|
|
const animationFrameIdRef = useRef(null);
|
|
const toastTimeoutRef = useRef(null);
|
|
const rulerDragStartRef = useRef(null);
|
|
const isDraggingRulerRef = useRef(false);
|
|
const handlePlayPauseRef = useRef(null);
|
|
|
|
// ── Keyboard Shortcuts ──
|
|
const handleUndoRef = useRef(handleUndo);
|
|
const handleRedoRef = useRef(handleRedo);
|
|
handleUndoRef.current = handleUndo;
|
|
handleRedoRef.current = handleRedo;
|
|
|
|
const selectedClipIdRef = useRef(null);
|
|
selectedClipIdRef.current = selectedClipId;
|
|
|
|
useEffect(() => {
|
|
const handler = (e) => {
|
|
const ctrl = e.ctrlKey || e.metaKey;
|
|
const alt = e.altKey;
|
|
if (e.key === ' ' || e.code === 'Space') { e.preventDefault(); if (handlePlayPauseRef.current) handlePlayPauseRef.current(); return; }
|
|
if (ctrl && e.key === 'z' && !e.shiftKey) { e.preventDefault(); handleUndoRef.current(); return; }
|
|
if (ctrl && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) { e.preventDefault(); handleRedoRef.current(); return; }
|
|
if (ctrl && !alt && e.key === 'o') { e.preventDefault(); showToast('Open Project dialog','info'); return; }
|
|
if (ctrl && !alt && e.key === 'n') { e.preventDefault(); setTracks([{ id:'1', name:'Track 01', buffer:null, startTime:0, height:96, volume:0.8, muted:false, solo:false, color:'#0f766e', markers:[], serverFileId:null }, { id:'2', name:'Track 02', buffer:null, startTime:0, height:96, volume:0.8, muted:false, solo:false, color:'#1d4ed8', markers:[], serverFileId:null }]); setSelectedTrackId('1'); showToast('New project created','info'); return; }
|
|
if (ctrl && !alt && e.key === 's') { e.preventDefault(); showToast('Project saved','success'); return; }
|
|
if ((ctrl && alt && e.key === 's') || (ctrl && e.shiftKey && e.key === 's')) { e.preventDefault(); showToast('Save As dialog','info'); return; }
|
|
if (ctrl && !alt && e.key === 'i') { e.preventDefault(); addNewTrack(); return; }
|
|
if (ctrl && alt && e.key === 'i') { e.preventDefault(); showToast('Import audio','info'); return; }
|
|
if (ctrl && !alt && e.key === 'e') { e.preventDefault(); openTempTab(); return; }
|
|
if (ctrl && !alt && e.key === 'm') { e.preventDefault(); handleMergeTracks(); return; }
|
|
if (ctrl && !alt && e.key === 'c') { e.preventDefault(); handleCopyTrack(); return; }
|
|
if (ctrl && !alt && e.key === 'x') { e.preventDefault(); handleCutTrack(); return; }
|
|
if (ctrl && !alt && e.key === 'v') { e.preventDefault(); handlePasteTrack(); return; }
|
|
if (e.key === 'Delete' || e.key === 'Backspace' || e.key === 'Del') {
|
|
const selClip = selectedClipIdRef.current;
|
|
if (selClip) {
|
|
e.preventDefault();
|
|
const { trackId, clipId } = selClip;
|
|
setTracks(prev => {
|
|
const track = prev.find(t => t.id === trackId);
|
|
if (!track) return prev;
|
|
|
|
const beforeSnap = captureTrackSnapshotRef.current ? captureTrackSnapshotRef.current(trackId) : null;
|
|
const updatedClips = (track.clips || []).filter(c => c.id !== clipId);
|
|
const updatedTracks = prev.map(t => {
|
|
if (t.id === trackId) {
|
|
return {
|
|
...t,
|
|
clips: updatedClips,
|
|
buffer: updatedClips.length > 0 ? updatedClips[0].buffer : null,
|
|
startTime: updatedClips.length > 0 ? updatedClips[0].startTime : 0,
|
|
name: updatedClips.length > 0 ? updatedClips[0].name : `Track ${t.id}`
|
|
};
|
|
}
|
|
return t;
|
|
});
|
|
|
|
setTimeout(() => {
|
|
const afterSnap = captureTrackSnapshotRef.current ? captureTrackSnapshotRef.current(trackId) : null;
|
|
pushAction('DELETE_CLIP', trackId, beforeSnap, afterSnap);
|
|
}, 50);
|
|
|
|
return updatedTracks;
|
|
});
|
|
setSelectedClipId(null);
|
|
showToast('Đã xóa clip.', 'info');
|
|
return;
|
|
} else {
|
|
e.preventDefault();
|
|
handleDeleteTrack();
|
|
return;
|
|
}
|
|
}
|
|
if (!ctrl && !alt && e.key === 's') { e.preventDefault(); handleSplitTrack(selectedTrackId); return; }
|
|
};
|
|
window.addEventListener('keydown', handler);
|
|
return () => window.removeEventListener('keydown', handler);
|
|
}, []);
|
|
|
|
// ── Temp Tab: draw isolated waveform ──
|
|
useEffect(() => {
|
|
if (!tempTabActive || !tempTabBuffer || !tempTabCanvasRef.current) return;
|
|
const canvas = tempTabCanvasRef.current;
|
|
const ctx = canvas.getContext('2d');
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const rect = canvas.getBoundingClientRect();
|
|
canvas.width = rect.width * dpr;
|
|
canvas.height = rect.height * dpr;
|
|
ctx.scale(dpr, dpr);
|
|
|
|
const w = rect.width;
|
|
const h = rect.height;
|
|
ctx.fillStyle = '#181818';
|
|
ctx.fillRect(0, 0, w, h);
|
|
|
|
const data = tempTabBuffer.getChannelData(0);
|
|
const sr = tempTabBuffer.sampleRate;
|
|
const totalSamples = data.length;
|
|
if (totalSamples === 0) return;
|
|
|
|
ctx.strokeStyle = '#6ee7b7';
|
|
ctx.lineWidth = 1;
|
|
|
|
for (let px = 0; px < w; px++) {
|
|
const startSample = Math.floor((px / w) * totalSamples);
|
|
const endSample = Math.floor(((px + 1) / w) * totalSamples);
|
|
let maxVal = 0;
|
|
for (let i = startSample; i < endSample && i < totalSamples; i++) {
|
|
const abs = Math.abs(data[i]);
|
|
if (abs > maxVal) maxVal = abs;
|
|
}
|
|
const mid = h / 2;
|
|
const peakHeight = maxVal * (h * 0.4);
|
|
ctx.beginPath();
|
|
ctx.moveTo(px, mid - peakHeight);
|
|
ctx.lineTo(px, mid + peakHeight);
|
|
ctx.stroke();
|
|
}
|
|
}, [tempTabActive, tempTabBuffer]);
|
|
|
|
// ── Sub Tab: open as new tab instead of modal (LOOP_EDITOR_2.md §1) ──
|
|
const openTempTab = () => {
|
|
const useLocal = selectionMode === 'local' && localSelectionTrackId;
|
|
const trackId = useLocal ? localSelectionTrackId : selectedTrackId;
|
|
const t = tracks.find(x => x.id === trackId);
|
|
if (!t || !t.buffer) {
|
|
showToast('Vui lòng chọn track có dữ liệu âm thanh.', 'warning');
|
|
return;
|
|
}
|
|
if (selLeft === null || selRight === null || selRight <= selLeft) {
|
|
showToast('Vui lòng chọn một khoảng thời gian trên sóng âm.', 'warning');
|
|
return;
|
|
}
|
|
const sr = t.buffer.sampleRate;
|
|
const trackStart = t.startTime || 0;
|
|
const relSelLeft = Math.max(0, selLeft - trackStart);
|
|
const relSelRight = Math.max(0, selRight - trackStart);
|
|
const startSample = Math.max(0, Math.floor(relSelLeft * sr));
|
|
const endSample = Math.min(t.buffer.length, Math.floor(relSelRight * sr));
|
|
const len = endSample - startSample;
|
|
if (len < 100) {
|
|
showToast('Khoảng chọn quá ngắn.', 'warning');
|
|
return;
|
|
}
|
|
|
|
const ctx = getAudioContext();
|
|
const subBuffer = ctx.createBuffer(1, len, sr);
|
|
subBuffer.copyToChannel(t.buffer.getChannelData(0).subarray(startSample, endSample), 0);
|
|
|
|
const tabId = 'subtab_' + Date.now();
|
|
const tabLabel = `Edit_${t.name.replace('.wav','').slice(0,10)}_${selLeft.toFixed(1)}s`;
|
|
|
|
setSubTabs(prev => [...prev, {
|
|
id: tabId,
|
|
label: tabLabel,
|
|
trackId: trackId,
|
|
startTime: selLeft,
|
|
endTime: selRight,
|
|
buffer: subBuffer,
|
|
effects: { reverse: false, gainDb: 0, fadeInMs: 0, fadeOutMs: 0 },
|
|
}]);
|
|
setActiveTab(tabId);
|
|
showToast(`Đã tạo Sub Tab: ${tabLabel}. Chỉnh sửa và Apply để gộp lại.`, 'info');
|
|
};
|
|
|
|
const handleEditClipInSubTab = (trackId, clipId) => {
|
|
const track = tracks.find(t => t.id === trackId);
|
|
if (!track) return;
|
|
|
|
const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
|
|
id: 'default_' + track.id,
|
|
buffer: track.buffer,
|
|
startTime: track.startTime || 0,
|
|
name: track.name
|
|
}] : []);
|
|
|
|
const clip = clips.find(c => c.id === clipId || (clipId === 'default' && c.id === 'default_' + trackId));
|
|
if (!clip || !clip.buffer) return;
|
|
|
|
const sr = clip.buffer.sampleRate;
|
|
const len = clip.buffer.length;
|
|
const ctx = getAudioContext();
|
|
const subBuffer = ctx.createBuffer(1, len, sr);
|
|
subBuffer.copyToChannel(clip.buffer.getChannelData(0), 0);
|
|
|
|
const tabId = 'subtab_' + Date.now();
|
|
const tabLabel = `Edit_${clip.name.replace('.wav','').slice(0,10)}`;
|
|
|
|
setSubTabs(prev => [...prev, {
|
|
id: tabId,
|
|
label: tabLabel,
|
|
trackId: trackId,
|
|
clipId: clip.id === 'default' ? 'default_' + trackId : clip.id,
|
|
startTime: clip.startTime,
|
|
endTime: clip.startTime + clip.buffer.duration,
|
|
buffer: subBuffer,
|
|
effects: { reverse: false, gainDb: 0, fadeInMs: 0, fadeOutMs: 0 },
|
|
}]);
|
|
setActiveTab(tabId);
|
|
showToast(`Đã tạo Sub Tab: ${tabLabel}. Chỉnh sửa và Apply để gộp lại.`, 'info');
|
|
};
|
|
|
|
// ── Sub Tab: apply effects & merge back (LOOP_EDITOR_2.md §1.2) ──
|
|
const applySubTab = (tabId) => {
|
|
const subTab = subTabs.find(s => s.id === tabId);
|
|
if (!subTab || !subTab.buffer) return;
|
|
const track = tracks.find(t => t.id === subTab.trackId);
|
|
if (!track || !track.buffer) return;
|
|
|
|
const beforeSnap = captureTrackSnapshot(subTab.trackId);
|
|
|
|
// Clone buffer and apply effects
|
|
const ctx = getAudioContext();
|
|
const eff = subTab.buffer.getChannelData(0);
|
|
const edBuffer = ctx.createBuffer(1, eff.length, subTab.buffer.sampleRate);
|
|
const edData = edBuffer.getChannelData(0);
|
|
edData.set(eff);
|
|
|
|
// Apply effects inline
|
|
const fx = subTab.effects || {};
|
|
// Reverse
|
|
if (fx.reverse) {
|
|
const reversed = new Float32Array(edData);
|
|
for (let i = 0; i < edData.length; i++) reversed[i] = edData[edData.length - 1 - i];
|
|
edBuffer.copyToChannel(reversed, 0);
|
|
}
|
|
// Gain
|
|
if (fx.gainDb !== 0) {
|
|
const gain = Math.pow(10, fx.gainDb / 20);
|
|
for (let i = 0; i < edData.length; i++) edData[i] = Math.max(-1, Math.min(1, edData[i] * gain));
|
|
}
|
|
// Fade in
|
|
if (fx.fadeInMs > 0) {
|
|
const sr = edBuffer.sampleRate;
|
|
const fadeSamples = Math.min(edData.length, Math.floor(fx.fadeInMs / 1000 * sr));
|
|
for (let i = 0; i < fadeSamples; i++) edData[i] = edData[i] * (i / fadeSamples);
|
|
}
|
|
// Fade out
|
|
if (fx.fadeOutMs > 0) {
|
|
const sr = edBuffer.sampleRate;
|
|
const fadeSamples = Math.min(edData.length, Math.floor(fx.fadeOutMs / 1000 * sr));
|
|
for (let i = edData.length - fadeSamples; i < edData.length; i++) {
|
|
edData[i] = edData[i] * ((edData.length - 1 - i) / fadeSamples);
|
|
}
|
|
}
|
|
|
|
if (subTab.clipId) {
|
|
// Clip-based merge
|
|
setTracks(prev => prev.map(t => {
|
|
if (t.id !== subTab.trackId) return t;
|
|
const updatedClips = (t.clips || []).map(c => {
|
|
if (c.id === subTab.clipId) {
|
|
return {
|
|
...c,
|
|
buffer: edBuffer,
|
|
name: c.name.endsWith('(edited)') ? c.name : c.name + ' (edited)'
|
|
};
|
|
}
|
|
return c;
|
|
});
|
|
return {
|
|
...t,
|
|
clips: updatedClips,
|
|
buffer: updatedClips[0]?.buffer,
|
|
startTime: updatedClips[0]?.startTime || 0,
|
|
name: updatedClips[0]?.name || t.name
|
|
};
|
|
}));
|
|
} else {
|
|
// Crossfade merge into original track (§2.2)
|
|
const sr = track.buffer.sampleRate;
|
|
const origData = track.buffer.getChannelData(0);
|
|
const trackStart = track.startTime || 0;
|
|
const startSample = Math.floor((subTab.startTime - trackStart) * sr);
|
|
const endSample = Math.floor((subTab.endTime - trackStart) * sr);
|
|
const crossfadeLen = Math.min(100, Math.floor(0.01 * sr)); // 10ms
|
|
|
|
const mergedBuffer = ctx.createBuffer(1, track.buffer.length, sr);
|
|
const mergedData = mergedBuffer.getChannelData(0);
|
|
for (let i = 0; i < startSample; i++) mergedData[i] = origData[i];
|
|
for (let i = endSample; i < track.buffer.length; i++) mergedData[i] = origData[i];
|
|
|
|
for (let i = 0; i < edData.length; i++) {
|
|
const globalIdx = startSample + i;
|
|
let val = edData[i];
|
|
if (i < crossfadeLen) {
|
|
const alpha = i / crossfadeLen;
|
|
val = (1 - alpha) * (origData[globalIdx] || 0) + alpha * edData[i];
|
|
} else if (i > edData.length - crossfadeLen) {
|
|
const distFromEnd = edData.length - 1 - i;
|
|
const alpha = distFromEnd / crossfadeLen;
|
|
const origEndIdx = endSample - (edData.length - i);
|
|
val = alpha * (origEndIdx >= 0 ? origData[origEndIdx] : 0) + (1 - alpha) * edData[i];
|
|
}
|
|
mergedData[globalIdx] = val;
|
|
}
|
|
|
|
setTracks(prev => prev.map(t => {
|
|
if (t.id !== subTab.trackId) return t;
|
|
return { ...t, buffer: mergedBuffer, name: t.name + ' (edited)' };
|
|
}));
|
|
}
|
|
|
|
const afterSnap = captureTrackSnapshot(subTab.trackId);
|
|
pushAction('EDIT_TAB', subTab.trackId, beforeSnap, afterSnap);
|
|
|
|
// Tab Lifetime: Engaging the Apply trigger propagates data back to the primary environment but does not close down the active sub-tab view.
|
|
// closeSubTab(tabId);
|
|
showToast('Đã áp dụng chỉnh sửa vào track chính.', 'success');
|
|
};
|
|
|
|
const closeSubTab = (tabId) => {
|
|
setSubTabs(prev => prev.filter(s => s.id !== tabId));
|
|
if (activeTab === tabId) setActiveTab('main');
|
|
};
|
|
|
|
const updateSubTabEffects = (tabId, effects) => {
|
|
setSubTabs(prev => prev.map(s => s.id === tabId ? { ...s, effects: { ...s.effects, ...effects } } : s));
|
|
};
|
|
|
|
// ── Context Menu Handlers ──
|
|
const handleContextMenu = (e, trackId, clickTime) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setContextMenu({ x: e.clientX, y: e.clientY, trackId, time: clickTime || currentTime });
|
|
};
|
|
|
|
const closeContextMenu = () => setContextMenu(null);
|
|
|
|
// Close context menu on any click outside
|
|
useEffect(() => {
|
|
const handler = () => { if (contextMenu) closeContextMenu(); };
|
|
if (contextMenu) {
|
|
window.addEventListener('click', handler);
|
|
return () => window.removeEventListener('click', handler);
|
|
}
|
|
}, [contextMenu]);
|
|
|
|
const contextMenuEdit = () => {
|
|
const track = tracks.find(t => t.id === contextMenu.trackId);
|
|
if (track) setSelectedTrackId(contextMenu.trackId);
|
|
closeContextMenu();
|
|
|
|
const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
|
|
id: 'default',
|
|
buffer: track.buffer,
|
|
startTime: track.startTime || 0,
|
|
name: track.name,
|
|
speed: track.speed || 1.0
|
|
}] : []);
|
|
const clickedClip = clips.find(c => contextMenu.time >= c.startTime && contextMenu.time < c.startTime + c.buffer.duration / (c.speed || 1.0));
|
|
|
|
if (clickedClip) {
|
|
handleEditClipInSubTab(contextMenu.trackId, clickedClip.id);
|
|
} else {
|
|
openTempTab();
|
|
}
|
|
};
|
|
|
|
const contextMenuSplit = () => {
|
|
closeContextMenu();
|
|
handleSplitTrack(contextMenu.trackId);
|
|
};
|
|
|
|
const contextMenuDelete = () => {
|
|
const tid = contextMenu.trackId;
|
|
const beforeSnap = captureTrackSnapshot(tid);
|
|
setTracks(prev => prev.filter(t => t.id !== tid));
|
|
const afterSnap = captureTrackSnapshot(tid);
|
|
pushAction('DELETE', tid, beforeSnap, afterSnap);
|
|
if (selectedTrackId === tid) {
|
|
setSelectedTrackId(tracks.filter(t => t.id !== tid)[0]?.id || '1');
|
|
}
|
|
closeContextMenu();
|
|
showToast('Đã xoá track.', 'info');
|
|
};
|
|
|
|
const contextMenuCopy = () => {
|
|
const track = tracks.find(t => t.id === contextMenu.trackId);
|
|
if (!track) return;
|
|
clipboardRef.current = {
|
|
buffer: track.buffer,
|
|
name: track.name,
|
|
volume: track.volume,
|
|
color: track.color,
|
|
};
|
|
closeContextMenu();
|
|
showToast('Đã sao chép track vào clipboard.', 'info');
|
|
};
|
|
|
|
const contextMenuCut = () => {
|
|
const t = tracks.find(x => x.id === contextMenu.trackId);
|
|
if (!t || !t.buffer) { contextMenuDelete(); return; }
|
|
const beforeSnap = captureTrackSnapshot(contextMenu.trackId);
|
|
const sr = t.buffer.sampleRate;
|
|
const data = t.buffer.getChannelData(0);
|
|
if (selLeft !== null && selRight !== null && selRight > selLeft) {
|
|
const trackStart = t.startTime || 0;
|
|
const relSelLeft = Math.max(0, selLeft - trackStart);
|
|
const relSelRight = Math.max(0, selRight - trackStart);
|
|
const startSample = Math.floor(relSelLeft * sr);
|
|
const endSample = Math.min(data.length, Math.floor(relSelRight * sr));
|
|
const len = endSample - startSample;
|
|
if (len > 0) {
|
|
const ctx = getAudioContext();
|
|
const clipBuffer = ctx.createBuffer(1, len, sr);
|
|
clipBuffer.copyToChannel(data.subarray(startSample, endSample), 0);
|
|
clipboardRef.current = { buffer: clipBuffer, name: t.name, volume: t.volume, color: t.color };
|
|
const newLen = data.length - len;
|
|
const newBuffer = ctx.createBuffer(1, newLen, sr);
|
|
const newData = newBuffer.getChannelData(0);
|
|
let idx = 0;
|
|
for (let i = 0; i < startSample; i++) newData[idx++] = data[i];
|
|
for (let i = endSample; i < data.length; i++) newData[idx++] = data[i];
|
|
setTracks(p => p.map(tr => tr.id === contextMenu.trackId ? { ...tr, buffer: newBuffer } : tr));
|
|
const afterSnap = captureTrackSnapshot(contextMenu.trackId);
|
|
pushAction('CUT', contextMenu.trackId, beforeSnap, afterSnap);
|
|
closeContextMenu();
|
|
showToast('Đã cắt vùng chọn vào clipboard.', 'info');
|
|
return;
|
|
}
|
|
}
|
|
contextMenuCopy();
|
|
contextMenuDelete();
|
|
};
|
|
|
|
const doPaste = (targetTrackId, pasteTime) => {
|
|
if (!clipboardRef.current || !clipboardRef.current.buffer) {
|
|
showToast('Clipboard trống.', 'warning');
|
|
return null;
|
|
}
|
|
const { buffer: clipBuffer, name, volume, color } = clipboardRef.current;
|
|
const ctx = getAudioContext();
|
|
|
|
const targetTrack = tracks.find(t => t.id === targetTrackId);
|
|
const newClip = {
|
|
id: 'clip_' + Date.now() + '_' + Math.floor(Math.random() * 1000),
|
|
startTime: pasteTime,
|
|
buffer: clipBuffer,
|
|
name: name || 'Pasted Clip'
|
|
};
|
|
|
|
if (targetTrack) {
|
|
setTracks(p => p.map(t => {
|
|
if (t.id === targetTrackId) {
|
|
const existingClips = t.clips && t.clips.length > 0 ? t.clips : (t.buffer ? [{
|
|
id: 'default_' + t.id,
|
|
buffer: t.buffer,
|
|
startTime: t.startTime || 0,
|
|
name: t.name
|
|
}] : []);
|
|
|
|
const updatedClips = [...existingClips, newClip];
|
|
|
|
return {
|
|
...t,
|
|
clips: updatedClips,
|
|
buffer: updatedClips[0].buffer,
|
|
startTime: updatedClips[0].startTime,
|
|
name: name || t.name,
|
|
volume: volume || t.volume,
|
|
color: color || t.color
|
|
};
|
|
}
|
|
return t;
|
|
}));
|
|
setCurrentTime(pasteTime);
|
|
showToast('Đã dán clip vào track.', 'success');
|
|
return targetTrackId;
|
|
}
|
|
|
|
// No matching track — create a new one
|
|
const colors = ['#0f766e', '#1d4ed8', '#701a75', '#a21caf', '#b45309'];
|
|
const newId = 'track_pasted_' + Date.now();
|
|
setTracks(prev => [...prev, {
|
|
id: newId,
|
|
name: `Pasted_${name || 'track'}`,
|
|
buffer: clipBuffer,
|
|
startTime: pasteTime,
|
|
clips: [newClip],
|
|
volume: volume || 0.8, muted: false, solo: false,
|
|
color: color || colors[prev.length % colors.length],
|
|
markers: [], serverFileId: null,
|
|
}]);
|
|
setSelectedTrackId(newId);
|
|
setCurrentTime(pasteTime);
|
|
showToast('Đã dán track mới từ clipboard.', 'success');
|
|
return newId;
|
|
};
|
|
|
|
const handlePasteTrack = () => doPaste(selectedTrackId, currentTime);
|
|
|
|
const contextMenuPaste = () => {
|
|
const result = doPaste(contextMenu.trackId, contextMenu.time || currentTime);
|
|
closeContextMenu();
|
|
};
|
|
|
|
const contextMenuMerge = () => {
|
|
const activeTracks = tracks.filter(t => t.buffer && !t.muted);
|
|
if (activeTracks.length < 2) {
|
|
showToast('Cần ít nhất 2 track có dữ liệu để merge.', 'warning');
|
|
closeContextMenu();
|
|
return;
|
|
}
|
|
const ctx = getAudioContext();
|
|
const maxDur = Math.max(...activeTracks.map(t => (t.startTime || 0) + t.buffer.duration));
|
|
const sr = activeTracks[0].buffer.sampleRate;
|
|
const merged = ctx.createBuffer(1, Math.ceil(maxDur * sr), sr);
|
|
const mergedData = merged.getChannelData(0);
|
|
activeTracks.forEach(t => {
|
|
const data = t.buffer.getChannelData(0);
|
|
const startSample = Math.floor((t.startTime || 0) * sr);
|
|
for (let i = 0; i < data.length; i++) {
|
|
if (startSample + i < mergedData.length) {
|
|
mergedData[startSample + i] += data[i] * t.volume;
|
|
}
|
|
}
|
|
});
|
|
let maxPeak = 0;
|
|
for (let i = 0; i < mergedData.length; i++) {
|
|
const abs = Math.abs(mergedData[i]);
|
|
if (abs > maxPeak) maxPeak = abs;
|
|
}
|
|
if (maxPeak > 1.0) {
|
|
for (let i = 0; i < mergedData.length; i++) mergedData[i] /= maxPeak;
|
|
}
|
|
const colors = ['#0f766e', '#1d4ed8', '#701a75', '#a21caf', '#b45309'];
|
|
const newId = 'track_merged_' + Date.now();
|
|
const names = activeTracks.map(t => t.name).join('+').slice(0, 30);
|
|
setTracks(prev => [...prev, {
|
|
id: newId, name: `Merged_${names}.wav`, buffer: merged, startTime: 0,
|
|
volume: 0.8, muted: false, solo: false,
|
|
color: colors[prev.length % colors.length], markers: [], serverFileId: null,
|
|
}]);
|
|
setSelectedTrackId(newId);
|
|
closeContextMenu();
|
|
showToast(`Đã merge ${activeTracks.length} tracks.`, 'success');
|
|
};
|
|
|
|
// Menu bar direct handlers (don't rely on contextMenu state)
|
|
const handleMergeTracks = () => {
|
|
const at = tracks.filter(t => t.buffer && !t.muted);
|
|
if (at.length < 2) { showToast('Cần 2+ tracks để merge.','warning'); return; }
|
|
const actx = getAudioContext();
|
|
const maxDur = Math.max(...at.map(t => (t.startTime || 0) + t.buffer.duration));
|
|
const sr = at[0].buffer.sampleRate;
|
|
const mb = actx.createBuffer(1, Math.ceil(maxDur * sr), sr);
|
|
const mdata = mb.getChannelData(0);
|
|
at.forEach(t => {
|
|
const d = t.buffer.getChannelData(0);
|
|
const startSample = Math.floor((t.startTime || 0) * sr);
|
|
for (let i = 0; i < d.length; i++) {
|
|
if (startSample + i < mdata.length) {
|
|
mdata[startSample + i] += d[i] * t.volume;
|
|
}
|
|
}
|
|
});
|
|
let mp = 0; for (let i=0;i<mdata.length;i++) { const a=Math.abs(mdata[i]); if (a>mp) mp=a; }
|
|
if (mp > 1.0) for (let i=0;i<mdata.length;i++) mdata[i] /= mp;
|
|
setTracks(p => [...p, { id:'merged_'+Date.now(), name:'Merged_mix.wav', buffer:mb, startTime: 0, height: 96, volume:0.8, muted:false, solo:false, color:['#0f766e','#1d4ed8'][p.length%2], markers:[], serverFileId:null }]);
|
|
showToast('Merged all unmuted tracks.','success');
|
|
};
|
|
const handleCopyTrack = () => {
|
|
const t = tracks.find(x => x.id === selectedTrackId);
|
|
if (!t || !t.buffer) return;
|
|
const sr = t.buffer.sampleRate;
|
|
const data = t.buffer.getChannelData(0);
|
|
// If selection exists, copy only the selected region
|
|
if (selLeft !== null && selRight !== null && selRight > selLeft) {
|
|
const trackStart = t.startTime || 0;
|
|
const relSelLeft = Math.max(0, selLeft - trackStart);
|
|
const relSelRight = Math.max(0, selRight - trackStart);
|
|
const startSample = Math.floor(relSelLeft * sr);
|
|
const endSample = Math.min(data.length, Math.floor(relSelRight * sr));
|
|
const len = endSample - startSample;
|
|
if (len > 0) {
|
|
const ctx = getAudioContext();
|
|
const clipBuffer = ctx.createBuffer(1, len, sr);
|
|
clipBuffer.copyToChannel(data.subarray(startSample, endSample), 0);
|
|
clipboardRef.current = { buffer: clipBuffer, name: t.name, volume: t.volume, color: t.color };
|
|
showToast('Copied selection to clipboard.', 'info');
|
|
return;
|
|
}
|
|
}
|
|
// No selection: copy entire track
|
|
clipboardRef.current = { buffer: t.buffer, name: t.name, volume: t.volume, color: t.color };
|
|
showToast('Copied track to clipboard.', 'info');
|
|
};
|
|
const handleCutTrack = () => {
|
|
const t = tracks.find(x => x.id === selectedTrackId);
|
|
if (!t || !t.buffer) return;
|
|
const beforeSnap = captureTrackSnapshot(selectedTrackId);
|
|
const sr = t.buffer.sampleRate;
|
|
const data = t.buffer.getChannelData(0);
|
|
// If selection exists, cut only the selected region
|
|
if (selLeft !== null && selRight !== null && selRight > selLeft) {
|
|
const trackStart = t.startTime || 0;
|
|
const relSelLeft = Math.max(0, selLeft - trackStart);
|
|
const relSelRight = Math.max(0, selRight - trackStart);
|
|
const startSample = Math.floor(relSelLeft * sr);
|
|
const endSample = Math.min(data.length, Math.floor(relSelRight * sr));
|
|
const len = endSample - startSample;
|
|
if (len > 0) {
|
|
// Copy selection to clipboard
|
|
const ctx = getAudioContext();
|
|
const clipBuffer = ctx.createBuffer(1, len, sr);
|
|
clipBuffer.copyToChannel(data.subarray(startSample, endSample), 0);
|
|
clipboardRef.current = { buffer: clipBuffer, name: t.name, volume: t.volume, color: t.color };
|
|
// Remove selection from track, glue the two remaining parts
|
|
const newLen = data.length - len;
|
|
const newBuffer = ctx.createBuffer(1, newLen, sr);
|
|
const newData = newBuffer.getChannelData(0);
|
|
let idx = 0;
|
|
for (let i = 0; i < startSample; i++) newData[idx++] = data[i];
|
|
for (let i = endSample; i < data.length; i++) newData[idx++] = data[i];
|
|
setTracks(p => p.map(tr => tr.id === selectedTrackId ? { ...tr, buffer: newBuffer } : tr));
|
|
const afterSnap = captureTrackSnapshot(selectedTrackId);
|
|
pushAction('CUT', selectedTrackId, beforeSnap, afterSnap);
|
|
showToast('Cut selection to clipboard.', 'info');
|
|
return;
|
|
}
|
|
}
|
|
// No selection: cut entire track (copy + delete)
|
|
handleCopyTrack();
|
|
handleDeleteTrack();
|
|
};
|
|
const handleDeleteTrack = () => {
|
|
const tid = selectedTrackId;
|
|
setTracks(p => p.filter(t => t.id !== tid));
|
|
setSelectedTrackId(tracks.filter(t => t.id !== tid)[0]?.id || '1');
|
|
showToast('Deleted track.','info');
|
|
};
|
|
|
|
// ── Server Health Check ──
|
|
const [viewportWidth, setViewportWidth] = useState(1200);
|
|
|
|
useEffect(() => {
|
|
const wrapper = timelineWrapperRef.current;
|
|
if (!wrapper) return;
|
|
const observer = new ResizeObserver(entries => {
|
|
for (let entry of entries) {
|
|
setViewportWidth(entry.contentRect.width);
|
|
}
|
|
});
|
|
observer.observe(wrapper);
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
fetch(API_BASE_URL)
|
|
.then(r => { if (r.ok) setServerStatus('connected'); else setServerStatus('error'); })
|
|
.catch(() => setServerStatus('offline'));
|
|
}, []);
|
|
|
|
// ── Computed Values ──
|
|
const maxDuration = useMemo(() => {
|
|
let max = 10;
|
|
tracks.forEach(t => {
|
|
const clips = t.clips && t.clips.length > 0 ? t.clips : (t.buffer ? [{
|
|
id: 'default',
|
|
buffer: t.buffer,
|
|
startTime: t.startTime || 0,
|
|
name: t.name,
|
|
speed: t.speed || 1.0
|
|
}] : []);
|
|
clips.forEach(c => {
|
|
if (c.buffer) {
|
|
const cStart = c.startTime || 0;
|
|
const cDur = c.buffer.duration / (c.speed || 1.0);
|
|
max = Math.max(max, cStart + cDur);
|
|
}
|
|
});
|
|
});
|
|
return max;
|
|
}, [tracks]);
|
|
|
|
const maxDurationRef = useRef(maxDuration);
|
|
maxDurationRef.current = maxDuration;
|
|
|
|
const minZoom = useMemo(() => {
|
|
return viewportWidth / maxDuration;
|
|
}, [viewportWidth, maxDuration]);
|
|
|
|
const timelineWidth = useMemo(() => {
|
|
return Math.max(zoom * maxDuration, viewportWidth);
|
|
}, [zoom, maxDuration, viewportWidth]);
|
|
|
|
useEffect(() => {
|
|
if (zoom < minZoom) {
|
|
setZoom(minZoom);
|
|
}
|
|
}, [minZoom]);
|
|
|
|
const playheadLeftPos = useMemo(() => currentTime * zoom, [currentTime, zoom]);
|
|
|
|
const selLeft = useMemo(() => {
|
|
if (selectionMode === 'local' && localSelectionStart !== null && localSelectionEnd !== null) {
|
|
return Math.min(localSelectionStart, localSelectionEnd);
|
|
}
|
|
if (selectionStart === null || selectionEnd === null) return null;
|
|
return Math.min(selectionStart, selectionEnd);
|
|
}, [selectionStart, selectionEnd, selectionMode, localSelectionStart, localSelectionEnd]);
|
|
|
|
const selRight = useMemo(() => {
|
|
if (selectionMode === 'local' && localSelectionStart !== null && localSelectionEnd !== null) {
|
|
return Math.max(localSelectionStart, localSelectionEnd);
|
|
}
|
|
if (selectionStart === null || selectionEnd === null) return null;
|
|
return Math.max(selectionStart, selectionEnd);
|
|
}, [selectionStart, selectionEnd, selectionMode, localSelectionStart, localSelectionEnd]);
|
|
|
|
// ── Toast helper ──
|
|
const showToast = (text, type = 'info') => {
|
|
if (toastTimeoutRef.current) clearTimeout(toastTimeoutRef.current);
|
|
setToastMessage({ text, type });
|
|
toastTimeoutRef.current = setTimeout(() => setToastMessage(null), 3500);
|
|
};
|
|
|
|
// ── Server-side upload ──
|
|
const uploadToServer = async (file, trackId) => {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
try {
|
|
const resp = await fetch(`${API_AUDIO}/upload`, {
|
|
method: 'POST',
|
|
body: formData,
|
|
});
|
|
if (!resp.ok) throw new Error(`Upload failed: ${resp.status}`);
|
|
const data = await resp.json();
|
|
serverFileIdMap[trackId] = data.file_id;
|
|
return data;
|
|
} catch (err) {
|
|
console.warn('Server upload failed, using client-side only:', err.message);
|
|
return null;
|
|
}
|
|
};
|
|
|
|
// ── Server-side waveform loading ──
|
|
const loadServerWaveform = async (fileId) => {
|
|
try {
|
|
const resp = await fetch(`${API_AUDIO}/waveform/${fileId}?num_peaks=800`);
|
|
if (!resp.ok) return null;
|
|
return await resp.json();
|
|
} catch {
|
|
return null;
|
|
}
|
|
};
|
|
|
|
// ── Check Celery task result ──
|
|
const pollTaskResult = async (taskId, maxPoll = 10) => {
|
|
for (let i = 0; i < maxPoll; i++) {
|
|
await new Promise(r => setTimeout(r, 1500));
|
|
try {
|
|
const resp = await fetch(`${API_TASKS}/${taskId}`);
|
|
if (!resp.ok) continue;
|
|
const data = await resp.json();
|
|
if (data.status === 'SUCCESS') return data.result;
|
|
if (data.status === 'FAILURE') throw new Error(data.error || 'Task failed');
|
|
} catch (err) {
|
|
throw err;
|
|
}
|
|
}
|
|
throw new Error('Task polling timeout');
|
|
};
|
|
|
|
// ── Wheel Zoom ──
|
|
useEffect(() => {
|
|
const timeline = timelineWrapperRef.current;
|
|
if (!timeline) return;
|
|
|
|
const handleWheel = (e) => {
|
|
if (e.ctrlKey || e.metaKey) {
|
|
e.preventDefault();
|
|
const rect = timeline.getBoundingClientRect();
|
|
const mouseXInViewport = e.clientX - rect.left;
|
|
const mouseXInCanvas = mouseXInViewport + timeline.scrollLeft;
|
|
const anchorTime = mouseXInCanvas / zoom;
|
|
|
|
const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
|
|
|
|
setZoom(prevZoom => {
|
|
let newZoom = prevZoom * zoomFactor;
|
|
if (newZoom < minZoom) newZoom = minZoom;
|
|
if (newZoom > 2000) newZoom = 2000;
|
|
|
|
const newMouseXInCanvas = anchorTime * newZoom;
|
|
requestAnimationFrame(() => {
|
|
timeline.scrollLeft = newMouseXInCanvas - mouseXInViewport;
|
|
});
|
|
return newZoom;
|
|
});
|
|
} else if (e.shiftKey) {
|
|
e.preventDefault();
|
|
timeline.scrollLeft += e.deltaY;
|
|
}
|
|
};
|
|
|
|
timeline.addEventListener('wheel', handleWheel, { passive: false });
|
|
return () => timeline.removeEventListener('wheel', handleWheel);
|
|
}, [zoom, minZoom, maxDuration]);
|
|
|
|
// ── Update Playhead ──
|
|
const updatePlayhead = () => {
|
|
if (!isPlaying) return;
|
|
const context = getAudioContext();
|
|
const elapsed = context.currentTime - startAudioTimeRef.current;
|
|
const updatedTime = startOffsetTimeRef.current + elapsed;
|
|
|
|
// Selection Loop - LOOP_MAKER.md + LOOP_EDITOR_2.md §4.2
|
|
// If selection cleared by user, play linearly (don't loop)
|
|
if (!selectionCleared && isLoopingSelection && selLeft !== null && selRight !== null) {
|
|
if (selRight > selLeft && updatedTime >= selRight) {
|
|
if (selectionMode === 'local') {
|
|
// Local Solo Loop: only restart the selected track
|
|
stopAllPlayback();
|
|
startOffsetTimeRef.current = selLeft;
|
|
startAudioTimeRef.current = context.currentTime;
|
|
startLocalTrackPlayback(localSelectionTrackId, selLeft);
|
|
setCurrentTime(selLeft);
|
|
setIsPlaying(true);
|
|
} else {
|
|
// Global Master Loop: restart all tracks
|
|
stopAllPlayback();
|
|
startOffsetTimeRef.current = selLeft;
|
|
startAudioTimeRef.current = context.currentTime;
|
|
startTrackPlayback(selLeft);
|
|
setCurrentTime(selLeft);
|
|
setIsPlaying(true);
|
|
}
|
|
animationFrameIdRef.current = requestAnimationFrame(updatePlayhead);
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (updatedTime >= maxDurationRef.current) {
|
|
stopAllPlayback();
|
|
setCurrentTime(0);
|
|
return;
|
|
}
|
|
|
|
setCurrentTime(updatedTime);
|
|
animationFrameIdRef.current = requestAnimationFrame(updatePlayhead);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isPlaying) {
|
|
animationFrameIdRef.current = requestAnimationFrame(updatePlayhead);
|
|
} else {
|
|
cancelAnimationFrame(animationFrameIdRef.current);
|
|
}
|
|
return () => cancelAnimationFrame(animationFrameIdRef.current);
|
|
}, [isPlaying, isLoopingSelection, selLeft, selRight, selectionMode, localSelectionTrackId, selectionCleared]);
|
|
|
|
// ── Playback ──
|
|
const startTrackPlayback = (offsetTime) => {
|
|
const context = getAudioContext();
|
|
const hasSolo = tracks.some(t => t.solo) || soloedTrackId !== null;
|
|
|
|
tracks.forEach(track => {
|
|
const isPlayable = hasSolo
|
|
? (track.id === soloedTrackId || track.solo)
|
|
: !track.muted;
|
|
|
|
if (!isPlayable) return;
|
|
|
|
const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
|
|
id: 'default',
|
|
buffer: track.buffer,
|
|
startTime: track.startTime || 0,
|
|
name: track.name,
|
|
speed: track.speed || 1.0
|
|
}] : []);
|
|
|
|
clips.forEach(clip => {
|
|
if (!clip.buffer) return;
|
|
|
|
const source = context.createBufferSource();
|
|
source.buffer = clip.buffer;
|
|
source.playbackRate.value = clip.speed || 1.0;
|
|
|
|
const gainNode = context.createGain();
|
|
gainNode.gain.setValueAtTime(track.volume, context.currentTime);
|
|
|
|
source.connect(gainNode);
|
|
gainNode.connect(context.destination);
|
|
|
|
const clipStart = clip.startTime || 0;
|
|
const clipDuration = clip.buffer.duration / (clip.speed || 1.0);
|
|
const clipEnd = clipStart + clipDuration;
|
|
|
|
if (offsetTime < clipStart) {
|
|
const delay = clipStart - offsetTime;
|
|
source.start(context.currentTime + delay, 0);
|
|
activeSourcesRef.current.push(source);
|
|
} else if (offsetTime < clipEnd) {
|
|
const playOffset = offsetTime - clipStart;
|
|
source.start(context.currentTime, playOffset * (clip.speed || 1.0));
|
|
activeSourcesRef.current.push(source);
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
// Solo playback for Local Selection Loop (LOOP_MAKER.md §2.2)
|
|
const startLocalTrackPlayback = (trackId, offsetTime) => {
|
|
const context = getAudioContext();
|
|
const track = tracks.find(t => t.id === trackId);
|
|
if (!track) return;
|
|
|
|
const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
|
|
id: 'default',
|
|
buffer: track.buffer,
|
|
startTime: track.startTime || 0,
|
|
name: track.name,
|
|
speed: track.speed || 1.0
|
|
}] : []);
|
|
|
|
clips.forEach(clip => {
|
|
if (!clip.buffer) return;
|
|
|
|
const source = context.createBufferSource();
|
|
source.buffer = clip.buffer;
|
|
source.playbackRate.value = clip.speed || 1.0;
|
|
|
|
const gainNode = context.createGain();
|
|
gainNode.gain.setValueAtTime(track.volume, context.currentTime);
|
|
|
|
source.connect(gainNode);
|
|
gainNode.connect(context.destination);
|
|
|
|
const clipStart = clip.startTime || 0;
|
|
const clipDuration = clip.buffer.duration / (clip.speed || 1.0);
|
|
const clipEnd = clipStart + clipDuration;
|
|
|
|
if (offsetTime < clipStart) {
|
|
const delay = clipStart - offsetTime;
|
|
source.start(context.currentTime + delay, 0);
|
|
activeSourcesRef.current.push(source);
|
|
} else if (offsetTime < clipEnd) {
|
|
const playOffset = offsetTime - clipStart;
|
|
source.start(context.currentTime, playOffset * (clip.speed || 1.0));
|
|
activeSourcesRef.current.push(source);
|
|
}
|
|
});
|
|
};
|
|
|
|
const handlePlayPause = () => {
|
|
const context = getAudioContext();
|
|
if (isPlaying) {
|
|
stopAllPlayback();
|
|
} else {
|
|
startOffsetTimeRef.current = currentTime;
|
|
startAudioTimeRef.current = context.currentTime;
|
|
startTrackPlayback(currentTime);
|
|
setIsPlaying(true);
|
|
}
|
|
};
|
|
handlePlayPauseRef.current = handlePlayPause;
|
|
|
|
const handlePause = () => {
|
|
if (isPlaying) stopAllPlayback();
|
|
};
|
|
|
|
const stopAllPlayback = () => {
|
|
activeSourcesRef.current.forEach(src => {
|
|
try { src.stop(); } catch(e) {}
|
|
});
|
|
activeSourcesRef.current = [];
|
|
setIsPlaying(false);
|
|
};
|
|
|
|
const handleStop = () => {
|
|
stopAllPlayback();
|
|
setCurrentTime(0);
|
|
};
|
|
|
|
// ── Selection ──
|
|
const clearLocalSelection = () => {
|
|
setSelectionMode(null);
|
|
setLocalSelectionTrackId(null);
|
|
setLocalSelectionStart(null);
|
|
setLocalSelectionEnd(null);
|
|
};
|
|
|
|
const handleRulerMouseDown = (e) => {
|
|
const wrapper = timelineWrapperRef.current;
|
|
if (!wrapper) return;
|
|
const rect = wrapper.getBoundingClientRect();
|
|
const scrollLeft = wrapper.scrollLeft;
|
|
const mouseX = e.clientX - rect.left + scrollLeft;
|
|
const time = mouseX / zoom;
|
|
|
|
clearLocalSelection();
|
|
setSelectionMode('global');
|
|
rulerDragStartRef.current = time;
|
|
isDraggingRulerRef.current = true;
|
|
setSelectionStart(time);
|
|
setSelectionEnd(time);
|
|
setCurrentTime(time);
|
|
};
|
|
|
|
// Global Ruler mousemove is tracked via document listener set up in useEffect
|
|
useEffect(() => {
|
|
const handleMouseMove = (e) => {
|
|
if (!isDraggingRulerRef.current) return;
|
|
const wrapper = timelineWrapperRef.current;
|
|
if (!wrapper) return;
|
|
const rect = wrapper.getBoundingClientRect();
|
|
const scrollLeft = wrapper.scrollLeft;
|
|
const mouseX = e.clientX - rect.left + scrollLeft;
|
|
const time = Math.max(0, Math.min(maxDuration, mouseX / zoom));
|
|
|
|
setSelectionEnd(time);
|
|
};
|
|
const handleMouseUp = () => {
|
|
if (isDraggingRulerRef.current) {
|
|
isDraggingRulerRef.current = false;
|
|
rulerDragStartRef.current = null;
|
|
}
|
|
};
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
return () => {
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
};
|
|
}, [zoom, maxDuration]);
|
|
|
|
// ── Track Lane Local Selection Drag ──
|
|
const localDragInProgressRef = useRef(false);
|
|
const localDragTrackRef = useRef(null);
|
|
const localDragStartTimeRef = useRef(0);
|
|
|
|
const handleTrackLaneMouseDown = (trackId, time) => {
|
|
clearLocalSelection();
|
|
setSelectionMode('local');
|
|
setLocalSelectionTrackId(trackId);
|
|
setLocalSelectionStart(time);
|
|
setLocalSelectionEnd(time);
|
|
|
|
localDragInProgressRef.current = true;
|
|
localDragTrackRef.current = trackId;
|
|
localDragStartTimeRef.current = time;
|
|
};
|
|
|
|
// Document-level mousemove/mouseup for local selection drag
|
|
useEffect(() => {
|
|
const handleMouseMove = (e) => {
|
|
if (!localDragInProgressRef.current) return;
|
|
const wrapper = timelineWrapperRef.current;
|
|
if (!wrapper) return;
|
|
const rect = wrapper.getBoundingClientRect();
|
|
const scrollLeft = wrapper.scrollLeft;
|
|
const mouseX = e.clientX - rect.left + scrollLeft;
|
|
const time = Math.max(0, Math.min(maxDuration, mouseX / zoom));
|
|
setLocalSelectionEnd(time);
|
|
};
|
|
const handleMouseUp = () => {
|
|
if (localDragInProgressRef.current) {
|
|
localDragInProgressRef.current = false;
|
|
localDragTrackRef.current = null;
|
|
localDragStartTimeRef.current = 0;
|
|
}
|
|
};
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
return () => {
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
};
|
|
}, [zoom, maxDuration]);
|
|
|
|
const draggedClipRef = useRef(null);
|
|
draggedClipRef.current = draggedClip;
|
|
const hoveredTrackIdRef = useRef(null);
|
|
hoveredTrackIdRef.current = hoveredTrackId;
|
|
const captureTrackSnapshotRef = useRef(null);
|
|
captureTrackSnapshotRef.current = captureTrackSnapshot;
|
|
|
|
const handleClipDragStart = (trackId, clipId, clickOffset, isDuplicate = false) => {
|
|
const track = tracks.find(t => t.id === trackId);
|
|
if (!track) return;
|
|
|
|
const existingClips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
|
|
id: 'default_' + track.id,
|
|
buffer: track.buffer,
|
|
startTime: track.startTime || 0,
|
|
name: track.name
|
|
}] : []);
|
|
|
|
const clip = existingClips.find(c => c.id === clipId || (clipId === 'default' && c.id === 'default_' + track.id));
|
|
if (!clip) return;
|
|
|
|
const beforeSnap = captureTrackSnapshot(trackId);
|
|
|
|
let targetClipId = clip.id;
|
|
|
|
if (isDuplicate) {
|
|
const cloneId = clip.id + '_copy_' + Date.now();
|
|
const clone = {
|
|
...clip,
|
|
id: cloneId,
|
|
name: clip.name + ' (Copy)'
|
|
};
|
|
|
|
setTracks(prev => prev.map(t => {
|
|
if (t.id === trackId) {
|
|
const newClips = [...existingClips, clone];
|
|
return {
|
|
...t,
|
|
clips: newClips,
|
|
buffer: newClips[0].buffer,
|
|
startTime: newClips[0].startTime,
|
|
name: newClips[0].name
|
|
};
|
|
}
|
|
return t;
|
|
}));
|
|
|
|
targetClipId = cloneId;
|
|
} else {
|
|
if (!track.clips || track.clips.length === 0) {
|
|
setTracks(prev => prev.map(t => {
|
|
if (t.id === trackId) {
|
|
return {
|
|
...t,
|
|
clips: existingClips
|
|
};
|
|
}
|
|
return t;
|
|
}));
|
|
}
|
|
}
|
|
|
|
setDraggedClip({
|
|
trackId: trackId,
|
|
clipId: targetClipId,
|
|
clickOffset: clickOffset,
|
|
buffer: clip.buffer,
|
|
name: clip.name,
|
|
beforeSnap: beforeSnap
|
|
});
|
|
};
|
|
|
|
const stretchedClipRef = useRef(null);
|
|
stretchedClipRef.current = stretchedClip;
|
|
|
|
const handleClipStretchStart = (trackId, clipId, clickTime) => {
|
|
const track = tracks.find(t => t.id === trackId);
|
|
if (!track) return;
|
|
const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
|
|
id: 'default_' + track.id,
|
|
buffer: track.buffer,
|
|
startTime: track.startTime || 0,
|
|
name: track.name,
|
|
speed: track.speed || 1.0
|
|
}] : []);
|
|
|
|
const clip = clips.find(c => c.id === clipId || (clipId === 'default' && c.id === 'default_' + trackId));
|
|
if (!clip || !clip.buffer) return;
|
|
|
|
const beforeSnap = captureTrackSnapshot(trackId);
|
|
|
|
if (!track.clips || track.clips.length === 0) {
|
|
setTracks(prev => prev.map(t => t.id === trackId ? { ...t, clips } : t));
|
|
}
|
|
|
|
setStretchedClip({
|
|
trackId,
|
|
clipId: clip.id === 'default' ? 'default_' + trackId : clip.id,
|
|
originalDuration: clip.buffer.duration,
|
|
startTime: clip.startTime,
|
|
originalSpeed: clip.speed || 1.0,
|
|
beforeSnap
|
|
});
|
|
};
|
|
|
|
const handleSelectionEdgeDragStart = (e, trackId, side) => {
|
|
const startX = e.clientX;
|
|
const initialLeft = Math.min(localSelectionStart, localSelectionEnd);
|
|
const initialRight = Math.max(localSelectionStart, localSelectionEnd);
|
|
|
|
const handleMouseMove = (moveEvent) => {
|
|
const deltaX = moveEvent.clientX - startX;
|
|
const deltaSec = deltaX / zoom;
|
|
if (side === 'left') {
|
|
const newLeft = Math.max(0, Math.min(initialRight - 0.05, initialLeft + deltaSec));
|
|
setLocalSelectionStart(newLeft);
|
|
setLocalSelectionEnd(initialRight);
|
|
} else {
|
|
const newRight = Math.max(initialLeft + 0.05, Math.min(maxDuration, initialRight + deltaSec));
|
|
setLocalSelectionStart(initialLeft);
|
|
setLocalSelectionEnd(newRight);
|
|
}
|
|
};
|
|
|
|
const handleMouseUp = () => {
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
};
|
|
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
};
|
|
|
|
const handleTrackResizeMouseDown = (e, trackId) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const startY = e.clientY;
|
|
const track = tracks.find(t => t.id === trackId);
|
|
const startHeight = track ? (track.height || 96) : 96;
|
|
|
|
const handleMouseMove = (moveEvent) => {
|
|
const deltaY = moveEvent.clientY - startY;
|
|
const newHeight = Math.max(48, Math.min(200, startHeight + deltaY));
|
|
setTracks(prev => prev.map(t => t.id === trackId ? { ...t, height: newHeight } : t));
|
|
};
|
|
|
|
const handleMouseUp = () => {
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
};
|
|
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
};
|
|
|
|
const deleteTrack = (trackId) => {
|
|
const beforeSnap = captureTrackSnapshot(trackId);
|
|
setTracks(prev => {
|
|
const filtered = prev.filter(t => t.id !== trackId);
|
|
if (filtered.length > 0) {
|
|
setSelectedTrackId(filtered[0].id);
|
|
}
|
|
return filtered;
|
|
});
|
|
showToast('Đã xóa track.', 'info');
|
|
};
|
|
|
|
useEffect(() => {
|
|
const handleMouseMove = (e) => {
|
|
const drag = draggedClipRef.current;
|
|
if (!drag) return;
|
|
|
|
const wrapper = timelineWrapperRef.current;
|
|
if (!wrapper) return;
|
|
|
|
const rect = wrapper.getBoundingClientRect();
|
|
const scrollLeft = wrapper.scrollLeft;
|
|
const mouseX = e.clientX - rect.left + scrollLeft;
|
|
const time = mouseX / zoom;
|
|
const rawStart = Math.max(0, time - drag.clickOffset);
|
|
const newStart = snapTime(rawStart, snapValueRef.current, bpmRef.current);
|
|
|
|
const targetTrackId = hoveredTrackIdRef.current || drag.trackId;
|
|
|
|
setTracks(prev => prev.map(t => {
|
|
// Clear the clip from its previous track if it moved to a new track
|
|
if (t.id === drag.trackId && drag.trackId !== targetTrackId) {
|
|
const updatedClips = (t.clips || []).filter(c => c.id !== drag.clipId);
|
|
return {
|
|
...t,
|
|
clips: updatedClips,
|
|
buffer: updatedClips.length > 0 ? updatedClips[0].buffer : null,
|
|
startTime: updatedClips.length > 0 ? updatedClips[0].startTime : 0,
|
|
name: updatedClips.length > 0 ? updatedClips[0].name : `Track ${t.id}`
|
|
};
|
|
}
|
|
// Update/set clip on target track
|
|
if (t.id === targetTrackId) {
|
|
const existingClips = t.clips && t.clips.length > 0 ? t.clips : (t.buffer ? [{
|
|
id: 'default_' + t.id,
|
|
buffer: t.buffer,
|
|
startTime: t.startTime || 0,
|
|
name: t.name
|
|
}] : []);
|
|
|
|
const hasClip = existingClips.some(c => c.id === drag.clipId);
|
|
let updatedClips;
|
|
if (hasClip) {
|
|
updatedClips = existingClips.map(c => c.id === drag.clipId ? { ...c, startTime: newStart } : c);
|
|
} else {
|
|
updatedClips = [...existingClips, {
|
|
id: drag.clipId,
|
|
buffer: drag.buffer,
|
|
startTime: newStart,
|
|
name: drag.name
|
|
}];
|
|
}
|
|
return {
|
|
...t,
|
|
clips: updatedClips,
|
|
buffer: updatedClips[0].buffer,
|
|
startTime: updatedClips[0].startTime,
|
|
name: updatedClips[0].name
|
|
};
|
|
}
|
|
return t;
|
|
}));
|
|
|
|
if (drag.trackId !== targetTrackId) {
|
|
setDraggedClip(prev => ({ ...prev, trackId: targetTrackId }));
|
|
}
|
|
};
|
|
|
|
const handleMouseUp = () => {
|
|
const drag = draggedClipRef.current;
|
|
if (!drag) return;
|
|
|
|
const afterSnap = captureTrackSnapshotRef.current(drag.trackId);
|
|
pushAction('MOVE_CLIP', drag.trackId, drag.beforeSnap, afterSnap);
|
|
|
|
setDraggedClip(null);
|
|
showToast('Đã di chuyển clip.', 'success');
|
|
};
|
|
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
return () => {
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
};
|
|
}, [zoom]);
|
|
|
|
// Document-level mousemove/mouseup for clip stretching
|
|
useEffect(() => {
|
|
const handleMouseMove = (e) => {
|
|
const stretch = stretchedClipRef.current;
|
|
if (!stretch) return;
|
|
|
|
const wrapper = timelineWrapperRef.current;
|
|
if (!wrapper) return;
|
|
|
|
const rect = wrapper.getBoundingClientRect();
|
|
const scrollLeft = wrapper.scrollLeft;
|
|
const mouseX = e.clientX - rect.left + scrollLeft;
|
|
const time = mouseX / zoom;
|
|
|
|
const newDuration = Math.max(0.1, time - stretch.startTime);
|
|
const speedRatio = stretch.originalDuration / newDuration;
|
|
|
|
setTracks(prev => prev.map(t => {
|
|
if (t.id === stretch.trackId) {
|
|
const updatedClips = (t.clips || []).map(c => {
|
|
if (c.id === stretch.clipId) {
|
|
return {
|
|
...c,
|
|
speed: speedRatio
|
|
};
|
|
}
|
|
return c;
|
|
});
|
|
return {
|
|
...t,
|
|
clips: updatedClips,
|
|
buffer: updatedClips[0]?.buffer,
|
|
startTime: updatedClips[0]?.startTime || 0,
|
|
speed: updatedClips[0]?.speed || 1.0
|
|
};
|
|
}
|
|
return t;
|
|
}));
|
|
};
|
|
|
|
const handleMouseUp = () => {
|
|
const stretch = stretchedClipRef.current;
|
|
if (!stretch) return;
|
|
|
|
const afterSnap = captureTrackSnapshotRef.current(stretch.trackId);
|
|
pushAction('STRETCH_CLIP', stretch.trackId, stretch.beforeSnap, afterSnap);
|
|
|
|
setStretchedClip(null);
|
|
showToast('Đã giãn thời gian clip.', 'success');
|
|
};
|
|
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
return () => {
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
};
|
|
}, [zoom]);
|
|
|
|
const handleSelectRange = (start, end, reset) => {
|
|
const maxLen = maxDuration;
|
|
const cleanStart = Math.max(0, Math.min(maxLen, start));
|
|
const cleanEnd = Math.max(0, Math.min(maxLen, end));
|
|
|
|
if (reset) {
|
|
setSelectionStart(cleanStart);
|
|
setSelectionEnd(cleanEnd);
|
|
} else {
|
|
setSelectionEnd(cleanEnd);
|
|
}
|
|
// LOOP_EDITOR_2.md §4.2: new selection = enable looping
|
|
setSelectionCleared(false);
|
|
};
|
|
|
|
const handleSelectionInputChange = (field, val) => {
|
|
const numericVal = Math.max(0, parseFloat(val) || 0);
|
|
if (selectionMode === 'local') {
|
|
// Editing local selection directly
|
|
if (field === 'start') {
|
|
setLocalSelectionStart(numericVal);
|
|
} else {
|
|
setLocalSelectionEnd(numericVal);
|
|
}
|
|
} else {
|
|
if (field === 'start') {
|
|
setSelectionStart(numericVal);
|
|
} else {
|
|
setSelectionEnd(numericVal);
|
|
}
|
|
}
|
|
};
|
|
|
|
const selectionStats = useMemo(() => {
|
|
if (selLeft === null || selRight === null) {
|
|
return { start: 0, end: 0, length: 0 };
|
|
}
|
|
const s = Math.min(selLeft, selRight);
|
|
const e = Math.max(selLeft, selRight);
|
|
return {
|
|
start: parseFloat(s.toFixed(3)),
|
|
end: parseFloat(e.toFixed(3)),
|
|
length: parseFloat((e - s).toFixed(3))
|
|
};
|
|
}, [selLeft, selRight]);
|
|
|
|
// ── Handle Drag (selection resize) ──
|
|
const handleHandleDragStart = (e, side) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const startX = e.clientX;
|
|
const useLocal = selectionMode === 'local';
|
|
const currentStart = useLocal ? localSelectionStart : selectionStart;
|
|
const currentEnd = useLocal ? localSelectionEnd : selectionEnd;
|
|
const initialLeft = Math.min(currentStart, currentEnd);
|
|
const initialRight = Math.max(currentStart, currentEnd);
|
|
const setStart = useLocal ? setLocalSelectionStart : setSelectionStart;
|
|
const setEnd = useLocal ? setLocalSelectionEnd : setSelectionEnd;
|
|
|
|
const handleMouseMove = (moveEvent) => {
|
|
const deltaX = moveEvent.clientX - startX;
|
|
const deltaSec = deltaX / zoom;
|
|
if (side === 'left') {
|
|
const newLeft = Math.max(0, Math.min(initialRight - 0.05, initialLeft + deltaSec));
|
|
setStart(newLeft);
|
|
setEnd(initialRight);
|
|
} else {
|
|
const newRight = Math.max(initialLeft + 0.05, Math.min(maxDuration, initialRight + deltaSec));
|
|
setStart(initialLeft);
|
|
setEnd(newRight);
|
|
}
|
|
};
|
|
|
|
const handleMouseUp = () => {
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
};
|
|
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
};
|
|
|
|
const handleSelectionBodyDragStart = (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const startX = e.clientX;
|
|
const useLocal = selectionMode === 'local';
|
|
const currentStart = useLocal ? localSelectionStart : selectionStart;
|
|
const currentEnd = useLocal ? localSelectionEnd : selectionEnd;
|
|
const initialLeft = Math.min(currentStart, currentEnd);
|
|
const initialRight = Math.max(currentStart, currentEnd);
|
|
const widthSec = initialRight - initialLeft;
|
|
const setStart = useLocal ? setLocalSelectionStart : setSelectionStart;
|
|
const setEnd = useLocal ? setLocalSelectionEnd : setSelectionEnd;
|
|
|
|
const handleMouseMove = (moveEvent) => {
|
|
const deltaX = moveEvent.clientX - startX;
|
|
const deltaSec = deltaX / zoom;
|
|
let newLeft = initialLeft + deltaSec;
|
|
let newRight = initialRight + deltaSec;
|
|
|
|
if (newLeft < 0) {
|
|
newLeft = 0;
|
|
newRight = widthSec;
|
|
}
|
|
if (newRight > maxDuration) {
|
|
newRight = maxDuration;
|
|
newLeft = maxDuration - widthSec;
|
|
}
|
|
|
|
setStart(newLeft);
|
|
setEnd(newRight);
|
|
};
|
|
|
|
const handleMouseUp = () => {
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
};
|
|
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
};
|
|
|
|
// ── Track Controls ──
|
|
const toggleTrackSoloEvaluate = (trackId) => {
|
|
const wasPlaying = isPlaying;
|
|
stopAllPlayback();
|
|
|
|
setTracks(prev => prev.map(t => {
|
|
if (t.id === trackId) {
|
|
return { ...t, solo: !t.solo, muted: false };
|
|
}
|
|
return { ...t, solo: false };
|
|
}));
|
|
|
|
setSoloedTrackId(prev => prev === trackId ? null : trackId);
|
|
|
|
if (wasPlaying) {
|
|
setTimeout(() => {
|
|
startOffsetTimeRef.current = currentTime;
|
|
startAudioTimeRef.current = getAudioContext().currentTime;
|
|
setIsPlaying(true);
|
|
}, 50);
|
|
}
|
|
};
|
|
|
|
const toggleTrackMute = (trackId) => {
|
|
const beforeSnap = captureTrackSnapshot(trackId);
|
|
setTracks(prev => prev.map(t => t.id === trackId ? { ...t, muted: !t.muted } : t));
|
|
setUndoStack(prev => {
|
|
const next = [...prev, {
|
|
action_type: 'MUTE',
|
|
track_id: trackId,
|
|
timestamp: Date.now(),
|
|
before_state: beforeSnap,
|
|
after_state: captureTrackSnapshot(trackId),
|
|
}];
|
|
if (next.length > MAX_UNDO) next.shift();
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const updateTrackVolume = (trackId, val) => {
|
|
const beforeSnap = captureTrackSnapshot(trackId);
|
|
setTracks(prev => prev.map(t => t.id === trackId ? { ...t, volume: val } : t));
|
|
setUndoStack(prev => {
|
|
const next = [...prev, {
|
|
action_type: 'VOLUME_CHANGE',
|
|
track_id: trackId,
|
|
timestamp: Date.now(),
|
|
before_state: beforeSnap,
|
|
after_state: captureTrackSnapshot(trackId),
|
|
}];
|
|
if (next.length > MAX_UNDO) next.shift();
|
|
return next;
|
|
});
|
|
};
|
|
|
|
// ── Load File on Track (with server upload) ──
|
|
const loadFileOnTrack = async (trackId, file) => {
|
|
if (!file) return;
|
|
const context = getAudioContext();
|
|
showToast(`Đang nạp file ${file.name}...`, 'info');
|
|
|
|
try {
|
|
// Upload to server
|
|
uploadToServer(file, trackId);
|
|
|
|
// Decode locally for playback
|
|
const reader = new FileReader();
|
|
reader.onload = async (e) => {
|
|
try {
|
|
const decodedBuffer = await context.decodeAudioData(e.target.result);
|
|
setTracks(prev => prev.map(t => t.id === trackId ? {
|
|
...t,
|
|
name: file.name,
|
|
buffer: decodedBuffer
|
|
} : t));
|
|
showToast(`Nạp file thành công: ${file.name}`, 'success');
|
|
} catch (err) {
|
|
showToast("Lỗi giải mã âm thanh. Định dạng file không tương thích.", 'error');
|
|
}
|
|
};
|
|
reader.readAsArrayBuffer(file);
|
|
} catch (err) {
|
|
showToast("Lỗi: " + err.message, 'error');
|
|
}
|
|
};
|
|
|
|
// ── Synth Generators ──
|
|
const generateSynthToTrack = (trackId, type) => {
|
|
const sampleRate = 44100;
|
|
const duration = 12.0;
|
|
const context = getAudioContext();
|
|
const frameCount = sampleRate * duration;
|
|
const newBuffer = context.createBuffer(1, frameCount, sampleRate);
|
|
const channelData = newBuffer.getChannelData(0);
|
|
|
|
if (type === 'kick') {
|
|
for (let i = 0; i < frameCount; i++) {
|
|
const t = i / sampleRate;
|
|
const beatTime = t % 0.5;
|
|
const freq = 120 * Math.exp(-35 * beatTime);
|
|
channelData[i] = Math.sin(2 * Math.PI * freq * beatTime) * Math.exp(-6 * beatTime);
|
|
}
|
|
} else {
|
|
const notes = [220.00, 261.63, 293.66, 329.63, 392.00];
|
|
for (let i = 0; i < frameCount; i++) {
|
|
const t = i / sampleRate;
|
|
const noteIdx = Math.floor(t * 2) % notes.length;
|
|
const freq = notes[noteIdx];
|
|
channelData[i] = Math.sin(2 * Math.PI * freq * t) * 0.25 * (1.0 - (t % 0.5) / 0.5);
|
|
}
|
|
}
|
|
|
|
setTracks(prev => prev.map(t => t.id === trackId ? {
|
|
...t, name: `Demo_${type.toUpperCase()}.wav`, buffer: newBuffer
|
|
} : t));
|
|
showToast(`Đã nạp sóng âm tổng hợp: ${type.toUpperCase()}`, 'success');
|
|
};
|
|
|
|
// ── Add Track ──
|
|
const addNewTrack = () => {
|
|
const newId = (tracks.length + 1).toString();
|
|
const colors = ['#0f766e', '#1d4ed8', '#701a75', '#a21caf', '#b45309'];
|
|
const selectColor = colors[tracks.length % colors.length];
|
|
|
|
setTracks(prev => [...prev, {
|
|
id: newId, name: `Track ${newId}`, buffer: null, startTime: 0, height: 96,
|
|
volume: 0.8, muted: false, solo: false,
|
|
color: selectColor, markers: [], serverFileId: null
|
|
}]);
|
|
showToast(`Đã thêm Track ${newId}.`, 'info');
|
|
setTimeout(() => lucide.createIcons(), 200);
|
|
return newId;
|
|
};
|
|
|
|
// ── Server-side Export ──
|
|
const triggerWavExport = async () => {
|
|
const activeTracks = tracks.filter(t => t.buffer && !t.muted);
|
|
if (activeTracks.length === 0) {
|
|
showToast("Không tìm thấy dữ liệu âm thanh hợp lệ để xuất.", "warning");
|
|
return;
|
|
}
|
|
|
|
// Check if all active tracks have server file IDs
|
|
const allOnServer = activeTracks.every(t => serverFileIdMap[t.id]);
|
|
|
|
if (allOnServer && serverStatus === 'connected') {
|
|
// Use server-side export
|
|
setIsExporting(true);
|
|
showToast("Đang gửi yêu cầu xuất âm thanh đến máy chủ...", "info");
|
|
|
|
try {
|
|
const sessionId = `session_${Date.now()}`;
|
|
const tracksMeta = activeTracks.map(t => ({
|
|
track_id: t.id,
|
|
file_id: serverFileIdMap[t.id],
|
|
volume: t.volume,
|
|
muted: false,
|
|
clips: [{
|
|
clip_id: `clip_${t.id}`,
|
|
start_time_seconds: t.startTime || 0,
|
|
end_time_seconds: (t.startTime || 0) + t.buffer.duration,
|
|
loop_count: 1,
|
|
apply_zero_crossing: true,
|
|
fade_in_ms: 0,
|
|
fade_out_ms: 0,
|
|
}]
|
|
}));
|
|
|
|
const resp = await fetch(`${API_MULTITRACK}/mix`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
session_id: sessionId,
|
|
export_settings: {
|
|
sample_rate: parseInt(exportSettings.sampleRate),
|
|
bit_depth: parseInt(exportSettings.bitDepth),
|
|
format: exportSettings.format,
|
|
},
|
|
tracks: tracksMeta,
|
|
}),
|
|
});
|
|
|
|
if (!resp.ok) throw new Error(`Server export failed: ${resp.status}`);
|
|
const data = await resp.json();
|
|
|
|
showToast("Đang xử lý trên máy chủ...", "info");
|
|
|
|
// Poll for result
|
|
const result = await pollTaskResult(data.task_id, 20);
|
|
|
|
if (result.success) {
|
|
// Get the uploaded file from server
|
|
const fileId = result.output_file_id || result.output_path?.split('/').pop();
|
|
if (fileId) {
|
|
const downloadUrl = `${API_AUDIO}/download/${fileId}`;
|
|
const a = document.createElement('a');
|
|
a.href = downloadUrl;
|
|
a.download = fileId;
|
|
a.click();
|
|
showToast("Xuất bản âm thanh từ máy chủ hoàn tất!", "success");
|
|
}
|
|
} else {
|
|
throw new Error(result.error || 'Server processing failed');
|
|
}
|
|
} catch (err) {
|
|
showToast("Lỗi xuất máy chủ: " + err.message + ". Chuyển sang xuất client.", "warning");
|
|
// Fall back to client-side export
|
|
clientSideExport(activeTracks);
|
|
} finally {
|
|
setIsExporting(false);
|
|
}
|
|
} else {
|
|
// Client-side export (existing working code)
|
|
clientSideExport(activeTracks);
|
|
}
|
|
};
|
|
|
|
const clientSideExport = async (activeTracks) => {
|
|
setIsExporting(true);
|
|
showToast("Đang trộn âm thanh đa kênh (Offline Mixdown)...", "info");
|
|
|
|
try {
|
|
const targetRate = parseInt(exportSettings.sampleRate);
|
|
const bitDepth = parseInt(exportSettings.bitDepth);
|
|
|
|
const durationLimit = Math.max(...activeTracks.map(t => {
|
|
const clips = t.clips && t.clips.length > 0 ? t.clips : (t.buffer ? [{
|
|
id: 'default',
|
|
buffer: t.buffer,
|
|
startTime: t.startTime || 0,
|
|
name: t.name,
|
|
speed: t.speed || 1.0
|
|
}] : []);
|
|
if (clips.length === 0) return 0;
|
|
return Math.max(...clips.map(c => (c.startTime || 0) + c.buffer.duration / (c.speed || 1.0)));
|
|
}));
|
|
|
|
const offlineCtx = new OfflineAudioContext(1, Math.ceil(targetRate * Math.max(0.1, durationLimit)), targetRate);
|
|
|
|
activeTracks.forEach(t => {
|
|
const clips = t.clips && t.clips.length > 0 ? t.clips : (t.buffer ? [{
|
|
id: 'default',
|
|
buffer: t.buffer,
|
|
startTime: t.startTime || 0,
|
|
name: t.name,
|
|
speed: t.speed || 1.0
|
|
}] : []);
|
|
|
|
clips.forEach(clip => {
|
|
if (!clip.buffer) return;
|
|
const source = offlineCtx.createBufferSource();
|
|
source.buffer = clip.buffer;
|
|
source.playbackRate.value = clip.speed || 1.0;
|
|
|
|
const gain = offlineCtx.createGain();
|
|
gain.gain.setValueAtTime(t.volume, 0);
|
|
|
|
source.connect(gain);
|
|
gain.connect(offlineCtx.destination);
|
|
|
|
const clipStart = clip.startTime || 0;
|
|
source.start(clipStart);
|
|
});
|
|
});
|
|
|
|
const renderedBuffer = await offlineCtx.startRendering();
|
|
const monoData = renderedBuffer.getChannelData(0);
|
|
const bufferLength = monoData.length;
|
|
const bytesPerSample = bitDepth / 8;
|
|
const headerSize = 44;
|
|
const fileSizeBytes = headerSize + (bufferLength * bytesPerSample);
|
|
const fileBuffer = new ArrayBuffer(fileSizeBytes);
|
|
const view = new DataView(fileBuffer);
|
|
|
|
const writeString = (offset, string) => {
|
|
for (let i = 0; i < string.length; i++) {
|
|
view.setUint8(offset + i, string.charCodeAt(i));
|
|
}
|
|
};
|
|
|
|
writeString(0, 'RIFF');
|
|
view.setUint32(4, fileSizeBytes - 8, true);
|
|
writeString(8, 'WAVE');
|
|
writeString(12, 'fmt ');
|
|
view.setUint32(16, 16, true);
|
|
view.setUint16(20, 1, true);
|
|
view.setUint16(22, 1, true);
|
|
view.setUint32(24, targetRate, true);
|
|
view.setUint32(28, targetRate * bytesPerSample, true);
|
|
view.setUint16(32, bytesPerSample, true);
|
|
view.setUint16(34, bitDepth, true);
|
|
writeString(36, 'data');
|
|
view.setUint32(40, bufferLength * bytesPerSample, true);
|
|
|
|
let offset = 44;
|
|
for (let i = 0; i < bufferLength; i++) {
|
|
const sample = Math.max(-1, Math.min(1, monoData[i]));
|
|
if (bitDepth === 8) {
|
|
view.setUint8(offset, Math.floor((sample + 1.0) * 127.5));
|
|
} else if (bitDepth === 16) {
|
|
view.setInt16(offset, Math.floor(sample < 0 ? sample * 0x8000 : sample * 0x7FFF), true);
|
|
} else if (bitDepth === 24) {
|
|
const val24 = Math.floor(sample < 0 ? sample * 0x800000 : sample * 0x7FFFFF);
|
|
view.setUint8(offset, val24 & 0xFF);
|
|
view.setUint8(offset + 1, (val24 >> 8) & 0xFF);
|
|
view.setUint8(offset + 2, (val24 >> 16) & 0xFF);
|
|
}
|
|
offset += bytesPerSample;
|
|
}
|
|
|
|
const blob = new Blob([view], { type: 'audio/wav' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `sonicforge-session-${targetRate}hz-${bitDepth}bit.wav`;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
showToast("Xuất bản âm thanh hoàn tất!", "success");
|
|
} catch (err) {
|
|
showToast("Lỗi xuất âm thanh: " + err.message, "error");
|
|
} finally {
|
|
setIsExporting(false);
|
|
}
|
|
};
|
|
|
|
// ── AI Analysis (server-side with fallback) ──
|
|
const triggerAIAnalysis = async () => {
|
|
setAnalysisState({ status: 'Connecting to AI Engine...', data: null, isRunning: true });
|
|
|
|
// Check if we have a file on the server to analyze
|
|
const activeTrack = tracks.find(t => t.id === selectedTrackId);
|
|
const serverFileId = serverFileIdMap[selectedTrackId];
|
|
|
|
if (serverFileId && serverStatus === 'connected') {
|
|
try {
|
|
const resp = await fetch(`${API_AUDIO}/analyze-ai`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
file_id: serverFileId,
|
|
api_base_url: aiConfig.baseUrl !== API_BASE_URL ? aiConfig.baseUrl : null,
|
|
model: aiConfig.model,
|
|
}),
|
|
});
|
|
if (resp.ok) {
|
|
const data = await resp.json();
|
|
showToast("Đang phân tích cấu trúc trên máy chủ...", "info");
|
|
|
|
try {
|
|
const result = await pollTaskResult(data.task_id, 15);
|
|
if (result.bpm) {
|
|
if (selLeft !== null && selRight !== null && activeTrack && activeTrack.buffer) {
|
|
const snapStart = findZeroCrossing(activeTrack.buffer, selLeft);
|
|
const snapEnd = findZeroCrossing(activeTrack.buffer, selRight);
|
|
if (selectionMode === 'local') {
|
|
setLocalSelectionStart(snapStart);
|
|
setLocalSelectionEnd(snapEnd);
|
|
} else {
|
|
setSelectionStart(snapStart);
|
|
setSelectionEnd(snapEnd);
|
|
}
|
|
}
|
|
setAnalysisState({
|
|
status: 'Hoàn thành phân tích (Server)',
|
|
data: result,
|
|
isRunning: false,
|
|
});
|
|
showToast(`AI Server: ${result.bpm} BPM | ${result.beats?.length || 0} beats detected (Zero-Crossing Aligned)`, 'success');
|
|
return;
|
|
}
|
|
} catch (e) {
|
|
console.warn('Server AI poll failed, using fallback:', e);
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.warn('Server AI analysis failed, using fallback:', err);
|
|
}
|
|
}
|
|
|
|
// Fallback: client-side analysis with simulated BPM
|
|
setAnalysisState({ status: 'Processing structural detection...', data: null, isRunning: true });
|
|
|
|
setTimeout(() => {
|
|
let bpm = 120;
|
|
// Try to detect BPM from buffer
|
|
if (activeTrack && activeTrack.buffer) {
|
|
const data = activeTrack.buffer.getChannelData(0);
|
|
const sr = activeTrack.buffer.sampleRate;
|
|
// Simple autocorrelation for BPM estimation
|
|
const windowSize = Math.min(sr * 3, data.length);
|
|
if (windowSize > sr) {
|
|
let maxCorr = 0;
|
|
let bestLag = Math.floor(sr * 0.25); // ~240 BPM max
|
|
for (let lag = Math.floor(sr * 0.25); lag < Math.floor(sr * 2); lag++) {
|
|
let corr = 0;
|
|
const n = Math.floor(windowSize / 2);
|
|
for (let i = 0; i < n; i++) {
|
|
corr += data[i] * data[i + lag];
|
|
}
|
|
corr /= n;
|
|
if (corr > maxCorr) {
|
|
maxCorr = corr;
|
|
bestLag = lag;
|
|
}
|
|
}
|
|
if (bestLag > 0) {
|
|
bpm = Math.round(60 * sr / bestLag);
|
|
bpm = Math.max(60, Math.min(200, bpm));
|
|
}
|
|
}
|
|
}
|
|
|
|
if (selLeft !== null && selRight !== null && activeTrack && activeTrack.buffer) {
|
|
const snapStart = findZeroCrossing(activeTrack.buffer, selLeft);
|
|
const snapEnd = findZeroCrossing(activeTrack.buffer, selRight);
|
|
if (selectionMode === 'local') {
|
|
setLocalSelectionStart(snapStart);
|
|
setLocalSelectionEnd(snapEnd);
|
|
} else {
|
|
setSelectionStart(snapStart);
|
|
setSelectionEnd(snapEnd);
|
|
}
|
|
}
|
|
|
|
setAnalysisState({
|
|
status: 'Hoàn thành phân tích (Client)',
|
|
data: { bpm, bars: Math.max(4, Math.round(bpm / 30)), timeSig: '4/4', detectedKey: 'Am' },
|
|
isRunning: false,
|
|
});
|
|
showToast(`Phân tích: ${bpm} BPM (Zero-Crossing Aligned)`, 'success');
|
|
}, 1500);
|
|
};
|
|
|
|
// ── Mark Selection ──
|
|
const handleMarkSelection = () => {
|
|
if (selLeft === null || selRight === null || selectionStats.length === 0) {
|
|
showToast("Vui lòng chọn một khoảng thời gian trên sóng âm trước.", "warning");
|
|
return;
|
|
}
|
|
|
|
const targetTrack = tracks.find(t => t.id === selectedTrackId);
|
|
if (!targetTrack || !targetTrack.buffer) {
|
|
showToast("Vui lòng nhấp chọn một Track có sóng âm để gán Marker.", "warning");
|
|
return;
|
|
}
|
|
|
|
// For local selection, force mark on the local-selected track
|
|
const markTrackId = selectionMode === 'local' && localSelectionTrackId
|
|
? localSelectionTrackId : selectedTrackId;
|
|
|
|
setTracks(prev => prev.map(t => {
|
|
if (t.id !== markTrackId) return t;
|
|
const snapStart = findZeroCrossing(t.buffer, selLeft);
|
|
const snapEnd = findZeroCrossing(t.buffer, selRight);
|
|
|
|
const newMarkers = [
|
|
...t.markers,
|
|
{ id: Date.now() + '_s', time: snapStart },
|
|
{ id: Date.now() + '_e', time: snapEnd }
|
|
].sort((a,b) => a.time - b.time);
|
|
|
|
return { ...t, markers: newMarkers };
|
|
}));
|
|
|
|
showToast(`Đã tạo 2 Markers tại đầu và cuối dải chọn (Snap Zero-Crossing)`, "success");
|
|
};
|
|
|
|
// ── AI Cut to New Track (server-side with client fallback) ──
|
|
const handleAICutToNewTrack = () => {
|
|
const activeTrack = tracks.find(t => t.id === selectedTrackId);
|
|
if (!activeTrack || !activeTrack.buffer) {
|
|
showToast("Vui lòng chọn một Track có dữ liệu âm thanh trước.", "warning");
|
|
return;
|
|
}
|
|
if (selectionStart === null || selectionEnd === null || selectionStats.length === 0) {
|
|
showToast("Vui lòng kéo chọn một khoảng thời gian trên sóng âm.", "warning");
|
|
return;
|
|
}
|
|
|
|
setAnalysisState({ status: 'AI đang phân tích điểm Zero-crossing...', data: null, isRunning: true });
|
|
showToast("AI đang dò tìm Zero-crossing...", "info");
|
|
|
|
const buffer = activeTrack.buffer;
|
|
const sampleRate = buffer.sampleRate;
|
|
const channelData = buffer.getChannelData(0);
|
|
|
|
const snapStart = findZeroCrossing(buffer, selectionStats.start);
|
|
const snapEnd = findZeroCrossing(buffer, selectionStats.end);
|
|
|
|
const startSample = Math.max(0, Math.min(channelData.length - 1, Math.floor(snapStart * sampleRate)));
|
|
const endSample = Math.max(0, Math.min(channelData.length, Math.floor(snapEnd * sampleRate)));
|
|
const sliceLength = endSample - startSample;
|
|
|
|
if (sliceLength <= 0) {
|
|
showToast("Dải cắt không hợp lệ hoặc khoảng thời gian quá ngắn.", "error");
|
|
setAnalysisState({ status: 'Thất bại', data: null, isRunning: false });
|
|
return;
|
|
}
|
|
|
|
setTimeout(() => {
|
|
try {
|
|
const context = getAudioContext();
|
|
const slicedBuffer = context.createBuffer(1, sliceLength, sampleRate);
|
|
const slicedData = slicedBuffer.getChannelData(0);
|
|
slicedData.set(channelData.subarray(startSample, endSample));
|
|
|
|
const newId = 'track_ai_cut_' + Date.now();
|
|
const colors = ['#0f766e', '#1d4ed8', '#701a75', '#a21caf', '#b45309'];
|
|
const selectColor = colors[tracks.length % colors.length];
|
|
|
|
const newTrack = {
|
|
id: newId,
|
|
name: `AI_Cut_${activeTrack.name.replace('.wav', '')}_${snapStart.toFixed(1)}s.wav`,
|
|
buffer: slicedBuffer,
|
|
startTime: snapStart,
|
|
clips: [{
|
|
id: 'clip_' + newId,
|
|
buffer: slicedBuffer,
|
|
startTime: snapStart,
|
|
name: `AI_Cut_${activeTrack.name.replace('.wav', '')}_${snapStart.toFixed(1)}s`
|
|
}],
|
|
volume: 0.8,
|
|
muted: false,
|
|
solo: false,
|
|
color: selectColor,
|
|
markers: [
|
|
{ id: Date.now() + '_s', time: 0 },
|
|
{ id: Date.now() + '_e', time: snapEnd - snapStart }
|
|
],
|
|
serverFileId: null,
|
|
};
|
|
|
|
setTracks(prev => {
|
|
const idx = prev.findIndex(t => t.id === selectedTrackId);
|
|
const updated = [...prev];
|
|
if (idx !== -1) {
|
|
updated.splice(idx + 1, 0, newTrack);
|
|
} else {
|
|
updated.push(newTrack);
|
|
}
|
|
return updated;
|
|
});
|
|
|
|
setSelectedTrackId(newId);
|
|
setAnalysisState({
|
|
status: 'Phân đoạn AI hoàn tất!',
|
|
data: { bpm: 120, bars: 4, timeSig: '4/4', detectedKey: 'Am' },
|
|
isRunning: false
|
|
});
|
|
showToast(`AI đã cắt & gộp thành công vào Track mới (Zero-Crossing aligned)`, "success");
|
|
setTimeout(() => lucide.createIcons(), 200);
|
|
} catch (err) {
|
|
showToast("Lỗi giải mã dải cắt: " + err.message, "error");
|
|
setAnalysisState({ status: 'Lỗi biên tập', data: null, isRunning: false });
|
|
}
|
|
}, 1000);
|
|
};
|
|
|
|
// ── Split Track at Playhead ──
|
|
const handleSplitTrackAtTime = (trackId, clipId, time) => {
|
|
const track = tracks.find(t => t.id === trackId);
|
|
if (!track) return;
|
|
|
|
const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
|
|
id: 'default',
|
|
buffer: track.buffer,
|
|
startTime: track.startTime || 0,
|
|
name: track.name
|
|
}] : []);
|
|
|
|
const targetClipId = clipId || (clips.find(c => time >= c.startTime && time < c.startTime + c.buffer.duration)?.id);
|
|
if (!targetClipId) return;
|
|
|
|
const clip = clips.find(c => c.id === targetClipId);
|
|
if (!clip || !clip.buffer) return;
|
|
|
|
const relTime = Math.max(0, time - clip.startTime);
|
|
const sr = clip.buffer.sampleRate;
|
|
const cutSample = Math.floor(relTime * sr);
|
|
const originalData = clip.buffer.getChannelData(0);
|
|
|
|
if (cutSample <= 0 || cutSample >= originalData.length) {
|
|
showToast("Vị trí cắt nằm ngoài dải âm thanh của clip.", "warning");
|
|
return;
|
|
}
|
|
|
|
const beforeSnap = captureTrackSnapshot(trackId);
|
|
|
|
const ctx = getAudioContext();
|
|
const b1 = ctx.createBuffer(1, cutSample, sr);
|
|
b1.copyToChannel(originalData.subarray(0, cutSample), 0);
|
|
|
|
const b2 = ctx.createBuffer(1, originalData.length - cutSample, sr);
|
|
b2.copyToChannel(originalData.subarray(cutSample), 0);
|
|
|
|
const clip1 = {
|
|
id: 'clip_' + Date.now() + '_p1',
|
|
name: `${clip.name.replace(' (Part 1)', '').replace(' (Part 2)', '')} (Part 1)`,
|
|
buffer: b1,
|
|
startTime: clip.startTime
|
|
};
|
|
|
|
const clip2 = {
|
|
id: 'clip_' + Date.now() + '_p2',
|
|
name: `${clip.name.replace(' (Part 1)', '').replace(' (Part 2)', '')} (Part 2)`,
|
|
buffer: b2,
|
|
startTime: clip.startTime + (cutSample / sr)
|
|
};
|
|
|
|
setTracks(prev => prev.map(t => {
|
|
if (t.id === trackId) {
|
|
const remainingClips = clips.filter(c => c.id !== targetClipId);
|
|
const updatedClips = [...remainingClips, clip1, clip2];
|
|
return {
|
|
...t,
|
|
clips: updatedClips,
|
|
buffer: updatedClips[0]?.buffer || null,
|
|
startTime: updatedClips[0]?.startTime || 0,
|
|
name: updatedClips[0]?.name || t.name
|
|
};
|
|
}
|
|
return t;
|
|
}));
|
|
|
|
setTimeout(() => {
|
|
const afterSnap = captureTrackSnapshot(trackId);
|
|
pushAction('SPLIT_CLIP', trackId, beforeSnap, afterSnap);
|
|
}, 50);
|
|
|
|
showToast(`Đã chia nhỏ clip tại ${formatTime(time)}.`, "info");
|
|
};
|
|
|
|
const handleSplitTrack = (trackId) => {
|
|
handleSplitTrackAtTime(trackId, null, currentTime);
|
|
};
|
|
|
|
// ── Glue (Merge) Clips on Selected Track ──
|
|
const handleGlueTracks = () => {
|
|
const track = tracks.find(t => t.id === selectedTrackId);
|
|
if (!track) {
|
|
showToast('Vui lòng chọn một track để thực hiện gộp (glue).', 'warning');
|
|
return;
|
|
}
|
|
|
|
const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
|
|
id: 'default',
|
|
buffer: track.buffer,
|
|
startTime: track.startTime || 0,
|
|
name: track.name
|
|
}] : []);
|
|
|
|
if (clips.length < 2) {
|
|
showToast('Cần ít nhất 2 clip trên track này để gộp (glue).', 'warning');
|
|
return;
|
|
}
|
|
|
|
const beforeSnap = captureTrackSnapshot(track.id);
|
|
|
|
const ctx = getAudioContext();
|
|
const sr = clips[0].buffer.sampleRate;
|
|
|
|
let minStart = Infinity;
|
|
let maxEnd = -Infinity;
|
|
clips.forEach(c => {
|
|
const start = c.startTime || 0;
|
|
const end = start + c.buffer.duration;
|
|
minStart = Math.min(minStart, start);
|
|
maxEnd = Math.max(maxEnd, end);
|
|
});
|
|
|
|
const newDur = maxEnd - minStart;
|
|
const newBuffer = ctx.createBuffer(1, Math.ceil(newDur * sr), sr);
|
|
const newData = newBuffer.getChannelData(0);
|
|
|
|
clips.forEach(c => {
|
|
const data = c.buffer.getChannelData(0);
|
|
const offset = Math.floor(((c.startTime || 0) - minStart) * sr);
|
|
for (let i = 0; i < data.length; i++) {
|
|
if (offset + i < newData.length) {
|
|
newData[offset + i] += data[i];
|
|
}
|
|
}
|
|
});
|
|
|
|
let maxPeak = 0;
|
|
for (let i = 0; i < newData.length; i++) {
|
|
const abs = Math.abs(newData[i]);
|
|
if (abs > maxPeak) maxPeak = abs;
|
|
}
|
|
if (maxPeak > 1.0) {
|
|
for (let i = 0; i < newData.length; i++) newData[i] /= maxPeak;
|
|
}
|
|
|
|
const mergedClip = {
|
|
id: 'clip_merged_' + Date.now(),
|
|
name: `${track.name.replace(' (Part 1)', '').replace(' (Part 2)', '')} (Glued)`,
|
|
buffer: newBuffer,
|
|
startTime: minStart
|
|
};
|
|
|
|
setTracks(prev => prev.map(t => {
|
|
if (t.id === track.id) {
|
|
return {
|
|
...t,
|
|
clips: [mergedClip],
|
|
buffer: newBuffer,
|
|
startTime: minStart,
|
|
name: mergedClip.name
|
|
};
|
|
}
|
|
return t;
|
|
}));
|
|
|
|
setTimeout(() => {
|
|
const afterSnap = captureTrackSnapshot(track.id);
|
|
pushAction('GLUE', track.id, beforeSnap, afterSnap);
|
|
}, 50);
|
|
|
|
showToast(`Đã gộp ${clips.length} clips thành công.`, 'success');
|
|
};
|
|
|
|
// ── Save AI config to localStorage ──
|
|
useEffect(() => {
|
|
localStorage.setItem('ai_base_url', aiConfig.baseUrl);
|
|
localStorage.setItem('ai_api_key', aiConfig.apiKey);
|
|
localStorage.setItem('ai_model', aiConfig.model);
|
|
}, [aiConfig]);
|
|
|
|
return (
|
|
<div className="h-full w-full flex flex-col bg-[#1e1e1e]">
|
|
{/* ── Header ── */}
|
|
{/* ── Menu Bar ── */}
|
|
<header className="h-9 bg-[#2e2e2e] border-b border-[#181818] flex items-center px-1 shrink-0 select-none">
|
|
{[
|
|
{ label: 'File', items: [
|
|
{ label: 'New Project', icon: 'file-plus', shortcut: 'Ctrl+N', action: () => { setTracks([{ id:'1', name:'Track 01', buffer:null, startTime:0, height:96, volume:0.8, muted:false, solo:false, color:'#0f766e', markers:[], serverFileId:null }, { id:'2', name:'Track 02', buffer:null, startTime:0, height:96, volume:0.8, muted:false, solo:false, color:'#1d4ed8', markers:[], serverFileId:null }]); setSelectedTrackId('1'); showToast('New project created','info'); } },
|
|
{ label: 'Open Project...', icon: 'folder-open', shortcut: 'Ctrl+O', action: () => showToast('Open project dialog','info') },
|
|
{ label: 'Save Project', icon: 'save', shortcut: 'Ctrl+S', action: () => showToast('Project saved','success') },
|
|
{ label: 'Save As...', icon: 'save', shortcut: 'Ctrl+Alt+S', action: () => showToast('Save as dialog','info') },
|
|
{ label: 'Save to Cloud', icon: 'upload-cloud', action: () => showToast('Saving to cloud...','info') },
|
|
{ sep: true },
|
|
{ label: 'Import Audio...', icon: 'file-input', shortcut: 'Ctrl+Alt+I', action: () => { const input = document.createElement('input'); input.type='file'; input.accept='audio/*'; input.onchange=async (e)=>{ if(e.target.files[0]){ addNewTrack(); const newId=(tracks.length+1).toString(); setTimeout(()=>loadFileOnTrack(newId,e.target.files[0]),100); } }; input.click(); showToast('Import audio','info'); } },
|
|
{ label: 'Export Mix...', icon: 'file-output', action: () => triggerWavExport() },
|
|
{ sep: true },
|
|
{ label: 'Logout', icon: 'log-out', action: () => showToast('Logged out','info') },
|
|
]},
|
|
{ label: 'Edit', items: [
|
|
{ label: 'Insert New Track', icon: 'plus', shortcut: 'Ctrl+I', action: addNewTrack },
|
|
{ label: 'Insert Music to Track', icon: 'music', shortcut: 'Ctrl+Alt+I', action: () => showToast('Select music file to insert','info') },
|
|
{ sep: true },
|
|
{ label: 'Edit in New Tab', icon: 'file-edit', shortcut: 'Ctrl+E', action: () => openTempTab() },
|
|
{ label: 'Split at Playhead', icon: 'scissors', shortcut: 'S', action: () => handleSplitTrack(selectedTrackId) },
|
|
{ label: 'Merge Tracks', icon: 'combine', shortcut: 'Ctrl+M', action: () => { handleMergeTracks(); } },
|
|
{ sep: true },
|
|
{ label: 'Copy', icon: 'copy', shortcut: 'Ctrl+C', action: () => { handleCopyTrack(); } },
|
|
{ label: 'Cut', icon: 'scissors', shortcut: 'Ctrl+X', action: () => { handleCutTrack(); } },
|
|
{ label: 'Paste', icon: 'clipboard', shortcut: 'Ctrl+V', action: handlePasteTrack },
|
|
{ sep: true },
|
|
{ label: 'Delete Track', icon: 'trash-2', shortcut: 'Del', action: () => { handleDeleteTrack(); } },
|
|
]},
|
|
{ label: 'View', items: [
|
|
{ label: 'Master Track', icon: 'disc', action: () => showToast('Master track view','info') },
|
|
{ label: 'Maker View', icon: 'layout', action: () => showToast('Maker view','info') },
|
|
{ label: 'Mixer', icon: 'sliders', action: () => showToast('Mixer panel','info') },
|
|
{ label: 'Tempo Track', icon: 'timer', action: () => showToast('Tempo track','info') },
|
|
{ label: 'Video', icon: 'film', action: () => showToast('Video panel','info') },
|
|
{ label: 'Media Explorer', icon: 'folder-search', action: () => showToast('Media explorer','info') },
|
|
]},
|
|
{ label: 'Tools', items: [
|
|
{ label: 'Config', icon: 'settings', action: () => setShowAIConfig(true) },
|
|
]},
|
|
{ label: 'Help', items: [
|
|
{ label: 'About SonicForge', icon: 'info', action: () => showToast('SonicForge Studio v1.0 - Professional DAW','info') },
|
|
]},
|
|
].map(menu => (
|
|
<div key={menu.label} className="relative">
|
|
<button
|
|
onClick={() => setMenuOpen(menuOpen === menu.label ? null : menu.label)}
|
|
className={`px-3 py-1 text-[11px] font-medium transition rounded ${
|
|
menuOpen === menu.label ? 'bg-zinc-700 text-zinc-100' : 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800'
|
|
}`}
|
|
>
|
|
{menu.label}
|
|
</button>
|
|
{menuOpen === menu.label && (
|
|
<div className="absolute top-full left-0 mt-0.5 bg-[#2a2a2a] border border-zinc-700 rounded-lg shadow-2xl py-1 w-52 z-50"
|
|
onClick={() => setMenuOpen(null)}>
|
|
{menu.items.map((item, i) => item.sep ? (
|
|
<div key={i} className="h-px bg-zinc-700 my-1"></div>
|
|
) : (
|
|
<button key={item.label} onClick={(e) => { e.stopPropagation(); item.action(); setMenuOpen(null); }}
|
|
className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
|
|
<i data-lucide={item.icon} className="w-3.5 h-3.5 text-zinc-500 shrink-0"></i>
|
|
<span className="flex-1">{item.label}</span>
|
|
{item.shortcut && <span className="text-purple-400 text-[12px] font-semibold font-mono ml-auto pl-8">{item.shortcut}</span>}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
<div className="flex-1"></div>
|
|
<div className="flex items-center gap-2 px-2">
|
|
<span className={`text-[9px] font-bold uppercase px-1.5 py-0.5 rounded ${
|
|
serverStatus === 'connected' ? 'bg-emerald-950 text-emerald-400' :
|
|
serverStatus === 'checking' ? 'bg-amber-950 text-amber-400' :
|
|
'bg-red-950 text-red-400'
|
|
}`}>Server: {serverStatus}</span>
|
|
<button onClick={() => setShowAIConfig(!showAIConfig)}
|
|
className={`px-1.5 py-0.5 rounded text-[10px] border transition ${
|
|
showAIConfig ? 'bg-purple-900 text-purple-200 border-purple-700' : 'bg-zinc-800 text-zinc-400 border-zinc-700 hover:text-zinc-200'
|
|
}`}>
|
|
<i data-lucide="cpu" className="w-3 h-3"></i>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
{/* Close menu on outside click */}
|
|
{menuOpen && <div className="fixed inset-0 z-40" onClick={() => setMenuOpen(null)}></div>}
|
|
|
|
{/* ── Tab Bar (LOOP_EDITOR_2.md §1) ── */}
|
|
<div className="h-7 bg-[#222] border-b border-zinc-800 flex items-stretch px-2 gap-0.5 shrink-0 overflow-x-auto">
|
|
<button onClick={() => setActiveTab('main')}
|
|
className={`px-3 text-[10px] font-bold uppercase tracking-wider border-b-2 transition flex items-center gap-1 ${
|
|
activeTab === 'main'
|
|
? 'text-cyan-400 border-cyan-500 bg-zinc-800/50'
|
|
: 'text-zinc-500 border-transparent hover:text-zinc-300 hover:bg-zinc-800/30'
|
|
}`}>
|
|
<i data-lucide="layout-dashboard" className="w-3 h-3"></i> Main Session
|
|
</button>
|
|
{subTabs.map(st => (
|
|
<div key={st.id} className="flex items-stretch">
|
|
<button onClick={() => setActiveTab(st.id)}
|
|
className={`px-2 text-[10px] font-medium border-b-2 transition flex items-center gap-1 ${
|
|
activeTab === st.id
|
|
? 'text-amber-400 border-amber-500 bg-zinc-800/50'
|
|
: 'text-zinc-500 border-transparent hover:text-zinc-300 hover:bg-zinc-800/30'
|
|
}`}>
|
|
<i data-lucide="file-edit" className="w-3 h-3"></i>
|
|
<span className="max-w-[100px] truncate">{st.label}</span>
|
|
</button>
|
|
<button onClick={() => closeSubTab(st.id)}
|
|
className="px-1 text-zinc-600 hover:text-red-400 transition text-[9px]"
|
|
title="Close tab">
|
|
<i data-lucide="x" className="w-3 h-3"></i>
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* ── AI Config Drawer ── */}
|
|
{showAIConfig && (
|
|
<div className="bg-zinc-900 border-b border-purple-900 p-3 flex flex-col gap-2 transition-all">
|
|
<div className="text-xs font-bold text-purple-400 uppercase tracking-wider flex items-center gap-1">
|
|
<i data-lucide="cpu" className="w-4 h-4"></i> Cấu hình cổng kết nối API
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs">
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-[10px] text-zinc-500 font-bold uppercase">Endpoint Base URL</span>
|
|
<input
|
|
type="text"
|
|
value={aiConfig.baseUrl}
|
|
onChange={(e) => setAiConfig(prev => ({ ...prev, baseUrl: e.target.value }))}
|
|
className="bg-zinc-850 text-zinc-200 p-1.5 rounded border border-zinc-800 focus:outline-none focus:border-purple-600 font-mono text-[11px]"
|
|
placeholder="https://api.openai.com/v1"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-[10px] text-zinc-500 font-bold uppercase">API Token Key</span>
|
|
<input
|
|
type="password"
|
|
value={aiConfig.apiKey}
|
|
onChange={(e) => setAiConfig(prev => ({ ...prev, apiKey: e.target.value }))}
|
|
className="bg-zinc-850 text-zinc-200 p-1.5 rounded border border-zinc-800 focus:outline-none focus:border-purple-600 font-mono text-[11px]"
|
|
placeholder="sk-..."
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-[10px] text-zinc-500 font-bold uppercase">Model Name</span>
|
|
<input
|
|
type="text"
|
|
value={aiConfig.model}
|
|
onChange={(e) => setAiConfig(prev => ({ ...prev, model: e.target.value }))}
|
|
className="bg-zinc-850 text-zinc-200 p-1.5 rounded border border-zinc-800 focus:outline-none focus:border-purple-600 font-mono text-[11px]"
|
|
placeholder="gpt-4o-mini"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Workspace (Split Dual-Column — 11_REFACTOR_UI.md) ── */}
|
|
<div
|
|
className="flex-1 flex overflow-hidden select-none daw-bg relative"
|
|
style={{ display: activeTab !== 'main' ? 'none' : '' }}
|
|
>
|
|
{/* ══ LEFT COLUMN: TCP PANEL (fixed 300px, overflow hidden, z-30, solid bg) ══ */}
|
|
<div
|
|
ref={tcpContainerRef}
|
|
className="w-[300px] shrink-0 relative z-30 bg-[#262626] overflow-y-scroll no-scrollbar flex flex-col border-r border-zinc-900"
|
|
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
|
|
>
|
|
{/* [TCP] Header Row (Channels & Tools) — height 40px (h-10) */}
|
|
<div className="sticky top-0 z-50 flex items-center h-10 border-b border-zinc-900 bg-[#242424] px-2 justify-between select-none shrink-0">
|
|
<span className="text-[10px] font-bold text-zinc-500 uppercase shrink-0 mr-2">Kênh</span>
|
|
|
|
{/* Timeline Toolbar (scaled up buttons, height locked at 40px) */}
|
|
<div className="flex items-center gap-1 bg-zinc-900 border border-zinc-800 rounded px-1.5 py-1 shadow-sm h-8">
|
|
<button
|
|
onClick={() => { setActiveTool('select'); showToast('Công cụ chọn (Select Tool) đã kích hoạt.', 'info'); }}
|
|
className={`p-1 rounded transition text-sm flex items-center justify-center ${activeTool === 'select' ? 'bg-cyan-950/80 text-cyan-400 border border-cyan-800/50 font-bold' : 'text-zinc-400 hover:bg-zinc-800 border border-transparent'}`}
|
|
title="Select Tool: Chọn khoảng, Đặt playhead (Alt+Kéo để di chuyển clip, Ctrl+Kéo để nhân bản)"
|
|
>
|
|
<i data-lucide="mouse-pointer" className="w-4 h-4"></i>
|
|
</button>
|
|
<button
|
|
onClick={() => { setActiveTool('grab'); showToast('Công cụ di chuyển (Hand Tool) đã kích hoạt.', 'info'); }}
|
|
className={`p-1 rounded transition text-sm flex items-center justify-center ${activeTool === 'grab' ? 'bg-cyan-950/80 text-cyan-400 border border-cyan-700/50 font-bold' : 'text-zinc-400 hover:bg-zinc-800 border border-transparent'}`}
|
|
title="Grab Tool: Click kéo trực tiếp để di chuyển clip"
|
|
>
|
|
<i data-lucide="hand" className="w-4 h-4"></i>
|
|
</button>
|
|
<button
|
|
onClick={() => { setActiveTool('razor'); showToast('Công cụ chia đoạn (Razor Tool) đã kích hoạt.', 'info'); }}
|
|
className={`p-1 rounded transition text-sm flex items-center justify-center ${activeTool === 'razor' ? 'bg-cyan-950/80 text-cyan-400 border border-cyan-700/50 font-bold' : 'text-zinc-400 hover:bg-zinc-800 border border-transparent'}`}
|
|
title="Razor Tool: Click trên clip để chia nhỏ tại điểm click"
|
|
>
|
|
<svg className="w-4 h-4 text-orange-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M6 3h12a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/>
|
|
<path d="M4 9h16l-3 9H7z"/>
|
|
<circle cx="12" cy="6" r="1"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<div className="w-[1px] h-4 bg-zinc-800 mx-0.5"></div>
|
|
|
|
<button
|
|
onClick={handleGlueTracks}
|
|
className="p-0.5 rounded text-zinc-400 hover:bg-zinc-800 hover:text-purple-400 transition"
|
|
title="Glue: Gộp track hiện tại với track liền dưới"
|
|
>
|
|
<i data-lucide="link" className="w-3.5 h-3.5"></i>
|
|
</button>
|
|
<button
|
|
onClick={handleCutTrack}
|
|
className="p-0.5 rounded text-zinc-400 hover:bg-zinc-800 hover:text-red-400 transition"
|
|
title="Cut Clip (Ctrl+X)"
|
|
>
|
|
<i data-lucide="scissors" className="w-3.5 h-3.5"></i>
|
|
</button>
|
|
<button
|
|
onClick={handleCopyTrack}
|
|
className="p-0.5 rounded text-zinc-400 hover:bg-zinc-800 hover:text-blue-400 transition"
|
|
title="Copy Clip (Ctrl+C)"
|
|
>
|
|
<i data-lucide="copy" className="w-3.5 h-3.5"></i>
|
|
</button>
|
|
<button
|
|
onClick={handlePasteTrack}
|
|
className="p-0.5 rounded text-zinc-400 hover:bg-zinc-800 hover:text-emerald-400 transition"
|
|
title="Paste Clip (Ctrl+V)"
|
|
>
|
|
<i data-lucide="clipboard" className="w-3.5 h-3.5"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="w-[1px] h-4 bg-zinc-800 mx-0.5"></div>
|
|
<div className="flex items-center gap-1 pl-0.5 select-none">
|
|
<span className="text-[9px] text-zinc-500 font-bold uppercase">Snap</span>
|
|
<select
|
|
value={snapValue}
|
|
onChange={(e) => setSnapValue(e.target.value)}
|
|
className="bg-zinc-850 text-zinc-300 text-[10px] px-1 py-0.5 rounded border border-zinc-800 focus:outline-none focus:border-cyan-550 font-mono"
|
|
>
|
|
<option value="free">Free</option>
|
|
<option value="1">1</option>
|
|
<option value="1/2">1/2</option>
|
|
<option value="1/4">1/4</option>
|
|
<option value="1/8">1/8</option>
|
|
<option value="1/16">1/16</option>
|
|
<option value="1/32">1/32</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* [TCP] Tempo Track Row — height 40px (h-[40px]) */}
|
|
<div className="sticky top-10 z-40 flex h-[40px] border-b border-purple-500/30 bg-[#1a1a2e] p-2 flex-col justify-between border-l-4 border-purple-500 shrink-0">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-[10px] font-bold text-purple-400 font-mono">TM</span>
|
|
<span className="text-xs font-semibold text-zinc-300">Tempo Track</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<input
|
|
type="number"
|
|
value={bpm}
|
|
onChange={(e) => setBpm(e.target.value)}
|
|
onBlur={() => localStorage.setItem('studio_bpm', bpm)}
|
|
className="w-12 bg-zinc-800 border border-zinc-700 rounded text-[10px] text-zinc-300 text-center font-mono focus:outline-none focus:border-purple-500"
|
|
min="40"
|
|
max="300"
|
|
/>
|
|
<span className="text-[9px] text-zinc-500">BPM</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* [TCP] Dynamic Track Controls */}
|
|
<div className="flex-1 flex flex-col divide-y divide-[#141414] bg-[#262626]">
|
|
{tracks.map((track, idx) => {
|
|
const isSelected = selectedTrackId === track.id;
|
|
return (
|
|
<div
|
|
key={track.id}
|
|
style={{ height: `${track.height || 96}px` }}
|
|
className={`shrink-0 relative flex flex-col justify-between p-2.5 bg-[#1e1e1e] border-r border-zinc-900 cursor-pointer border-l-4 border-b border-[#141414] overflow-hidden ${isSelected ? 'border-cyan-500 bg-[#252525]' : 'border-transparent hover:bg-zinc-800/20'}`}
|
|
onClick={() => setSelectedTrackId(track.id)}
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-[10px] font-bold text-zinc-500 font-mono">{(idx+1).toString().padStart(2, '0')}</span>
|
|
<div className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: track.color }} />
|
|
<span className="text-xs font-semibold text-zinc-300 truncate max-w-[100px]" title={track.name}>
|
|
{track.name}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); toggleTrackMute(track.id); }}
|
|
className={`px-1.5 py-0.5 text-[10px] rounded font-mono font-bold border transition ${
|
|
track.muted
|
|
? 'bg-red-950 text-red-400 border-red-700'
|
|
: 'bg-zinc-800 text-zinc-400 border-transparent hover:text-zinc-200'
|
|
}`}
|
|
>M</button>
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); toggleTrackSoloEvaluate(track.id); }}
|
|
className={`px-1.5 py-0.5 text-[10px] rounded font-mono font-bold border transition ${
|
|
soloedTrackId === track.id || track.solo
|
|
? 'bg-amber-950 text-amber-400 border-amber-600'
|
|
: 'bg-zinc-800 text-zinc-400 border-transparent hover:text-zinc-200'
|
|
}`}
|
|
title="Solo nghe thử"
|
|
>S</button>
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); deleteTrack(track.id); }}
|
|
className="p-0.5 rounded text-red-500 hover:bg-red-950/40 hover:text-red-400 transition flex items-center justify-center"
|
|
title="Xóa Track"
|
|
>
|
|
<i data-lucide="trash-2" className="w-3.5 h-3.5"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1 text-[9px] text-zinc-400" onClick={e => e.stopPropagation()}>
|
|
<span className="font-semibold uppercase text-[8px] text-zinc-500">Mô phỏng:</span>
|
|
<button
|
|
onClick={() => generateSynthToTrack(track.id, 'kick')}
|
|
className="px-1 bg-zinc-800 hover:bg-zinc-700 rounded border border-zinc-700"
|
|
>Kick</button>
|
|
<button
|
|
onClick={() => generateSynthToTrack(track.id, 'synth')}
|
|
className="px-1 bg-zinc-800 hover:bg-zinc-700 rounded border border-zinc-700"
|
|
>Synth</button>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between gap-2" onClick={e => e.stopPropagation()}>
|
|
<div className="flex items-center gap-1.5">
|
|
<VolumeKnob value={track.volume} onChange={(v) => updateTrackVolume(track.id, v)} />
|
|
<span className="text-[10px] font-mono text-zinc-500">Gain: {Math.round(track.volume * 100)}%</span>
|
|
</div>
|
|
|
|
<div>
|
|
<input
|
|
type="file"
|
|
id={`upload-${track.id}`}
|
|
accept="audio/*"
|
|
className="hidden"
|
|
onChange={(e) => loadFileOnTrack(track.id, e.target.files[0])}
|
|
/>
|
|
<label
|
|
htmlFor={`upload-${track.id}`}
|
|
className="px-2 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded text-[10px] flex items-center gap-1 cursor-pointer transition border border-zinc-700"
|
|
>
|
|
<i data-lucide="upload" className="w-3 h-3"></i> Tải file
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Resize handle at bottom of TCP */}
|
|
<div
|
|
onMouseDown={(e) => handleTrackResizeMouseDown(e, track.id)}
|
|
className="absolute bottom-0 left-0 right-0 h-1 cursor-ns-resize z-30 hover:bg-cyan-500/50 transition-colors"
|
|
onClick={e => e.stopPropagation()}
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* [TCP] Bottom Drop Zone spacer */}
|
|
<div className="h-[48px] border-r border-zinc-900 bg-[#1e1e1e]/50 shrink-0" />
|
|
</div>
|
|
|
|
{/* ══ RIGHT COLUMN: TIMELINE SCROLL VIEWPORT ══ */}
|
|
<div
|
|
ref={timelineWrapperRef}
|
|
onScroll={handleTimelineScroll}
|
|
className="flex-1 relative z-10 overflow-x-auto overflow-y-auto min-w-0"
|
|
>
|
|
<div style={{ width: `${timelineWidth}px` }} className="relative flex flex-col min-h-full">
|
|
|
|
{/* [ZONE A] Time Ruler — height 40px (h-10) */}
|
|
<div className="sticky top-0 z-45 flex h-10 border-b border-zinc-900 bg-[#242424] shrink-0">
|
|
<div ref={rulerRef} className="flex-1 relative h-full flex items-center select-none cursor-ew-resize overflow-hidden" onMouseDown={handleRulerMouseDown}>
|
|
{Array.from({ length: Math.ceil(maxDuration) }).map((_, i) => {
|
|
const sec = i;
|
|
const x = sec * zoom;
|
|
return (
|
|
<div key={i} className="absolute h-full border-l border-zinc-800 pl-1 pt-1 text-[9px] font-mono text-zinc-500 pointer-events-none" style={{ left: `${x}px` }}>
|
|
{formatTime(sec)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* [ZONE A] Tempo Lane — height 40px (h-[40px]) */}
|
|
<div className="sticky top-10 z-35 flex h-[40px] border-b border-purple-500/30 bg-[#1a1a2e] shrink-0">
|
|
<div className="flex-1 relative h-full overflow-hidden bg-[#1a1a2e]">
|
|
<TempoTrackLane bpm={parseInt(bpm) || 120} zoom={zoom} timelineWidth={timelineWidth}
|
|
onPlayheadSet={setCurrentTime} snapValue={snapValue} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* [ZONE B] Dynamic Waveform Lanes */}
|
|
<div className="flex-1 flex flex-col divide-y divide-[#141414] relative bg-[#111111] min-h-full">
|
|
{tracks.map((track, idx) => {
|
|
const isSelected = selectedTrackId === track.id;
|
|
return (
|
|
<div
|
|
key={track.id}
|
|
style={{ height: `${track.height || 96}px` }}
|
|
className={`shrink-0 relative overflow-hidden border-b border-[#141414] hover:bg-zinc-850/5 transition-colors ${isSelected ? 'bg-zinc-800/10' : ''}`}
|
|
onDragOver={(e) => e.preventDefault()}
|
|
onDrop={(e) => {
|
|
e.preventDefault();
|
|
if (e.dataTransfer.files[0]) {
|
|
loadFileOnTrack(track.id, e.dataTransfer.files[0]);
|
|
}
|
|
}}
|
|
onMouseEnter={() => setHoveredTrackId(track.id)}
|
|
>
|
|
<WaveformLane track={track} zoom={zoom} timelineWidth={timelineWidth}
|
|
onSelectRange={handleSelectRange} onPlayheadSet={setCurrentTime}
|
|
isSelected={isSelected} onSelectTrack={setSelectedTrackId} markers={track.markers}
|
|
onTrackLaneMouseDown={handleTrackLaneMouseDown}
|
|
onContextMenu={handleContextMenu}
|
|
onClipDragStart={handleClipDragStart}
|
|
onClipStretchStart={handleClipStretchStart}
|
|
onSelectionEdgeDragStart={handleSelectionEdgeDragStart}
|
|
setSelectedClipId={setSelectedClipId}
|
|
activeTool={activeTool}
|
|
onSplitTrackAtTime={handleSplitTrackAtTime}
|
|
onEditClipInSubTab={handleEditClipInSubTab}
|
|
snapValue={snapValue}
|
|
bpm={bpm}
|
|
selectionMode={selectionMode}
|
|
localSelectionTrackId={localSelectionTrackId}
|
|
localSelLeft={localSelectionStart !== null && localSelectionEnd !== null ? Math.min(localSelectionStart, localSelectionEnd) : null}
|
|
localSelRight={localSelectionStart !== null && localSelectionEnd !== null ? Math.max(localSelectionStart, localSelectionEnd) : null} />
|
|
|
|
{track.buffer && (
|
|
<div className="absolute right-2 top-2 flex items-center gap-1 z-10 opacity-70 hover:opacity-100 transition">
|
|
<button onClick={() => handleSplitTrack(track.id)}
|
|
className="px-1.5 py-0.5 bg-zinc-900/95 text-zinc-300 rounded text-[9px] flex items-center gap-1 border border-zinc-700/50"
|
|
title="Cắt đoạn tại Playhead">
|
|
<i data-lucide="scissors" className="w-2.5 h-2.5 text-cyan-400"></i> Cắt
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Resize handle at bottom of Waveform Lane */}
|
|
<div
|
|
onMouseDown={(e) => handleTrackResizeMouseDown(e, track.id)}
|
|
className="absolute bottom-0 left-0 right-0 h-1 cursor-ns-resize z-30 hover:bg-cyan-500/50 transition-colors"
|
|
onClick={e => e.stopPropagation()}
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
{/* Bottom Drop Zone to create new track */}
|
|
<div
|
|
className="h-[48px] flex items-center justify-center text-xs text-zinc-500 hover:bg-zinc-900/20 cursor-pointer select-none border-t border-dashed border-zinc-800"
|
|
onMouseEnter={() => {
|
|
if (draggedClipRef.current) {
|
|
const newId = addNewTrack();
|
|
setHoveredTrackId(newId);
|
|
}
|
|
}}
|
|
onClick={addNewTrack}
|
|
>
|
|
<span className="flex items-center gap-1 text-zinc-400">
|
|
<i data-lucide="plus" className="w-3.5 h-3.5"></i> Kéo clip xuống đây hoặc Click để tạo Track mới
|
|
</span>
|
|
</div>
|
|
|
|
{/* Selection Overlay */}
|
|
{selectionMode !== 'local' && selLeft !== null && selRight !== null && selRight > selLeft && (
|
|
<div className="absolute top-0 bottom-0 border-l border-r border-amber-500 bg-amber-500/10 z-20 selection-interactive-box cursor-grab active:cursor-grabbing"
|
|
style={{ left: `${selLeft * zoom}px`, width: `${(selRight - selLeft) * zoom}px` }}
|
|
onMouseDown={handleSelectionBodyDragStart}
|
|
title="Kéo để di chuyển vùng chọn"
|
|
>
|
|
<div className="absolute -left-1.5 top-0 bottom-0 w-3 bg-amber-500 hover:bg-amber-400 cursor-ew-resize flex items-center justify-center z-30 transition-colors"
|
|
onMouseDown={(e) => handleHandleDragStart(e, 'left')}
|
|
title="Kéo giãn mốc bắt đầu">
|
|
<div className="w-[1.5px] h-4 bg-zinc-950/70 rounded"></div>
|
|
</div>
|
|
<div className="absolute -right-1.5 top-0 bottom-0 w-3 bg-amber-500 hover:bg-amber-400 cursor-ew-resize flex items-center justify-center z-30 transition-colors"
|
|
onMouseDown={(e) => handleHandleDragStart(e, 'right')}
|
|
title="Kéo giãn mốc kết thúc">
|
|
<div className="w-[1.5px] h-4 bg-zinc-950/70 rounded"></div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Playhead */}
|
|
<div className="absolute top-0 bottom-0 w-[2px] bg-[#ef4444] z-20 pointer-events-none"
|
|
style={{ left: `${playheadLeftPos}px` }}>
|
|
<div className="w-3 h-3 bg-[#ef4444] rotate-45 transform -translate-x-1/2 -translate-y-1/2 absolute top-0"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Footer ── */}
|
|
<footer className="h-44 bg-[#1c1c1c] border-t border-zinc-900 p-4 grid grid-cols-1 md:grid-cols-12 gap-4 text-xs shrink-0 select-none" style={{ display: activeTab !== 'main' ? 'none' : '' }}>
|
|
|
|
{/* Export Section */}
|
|
<section className="md:col-span-4 bg-[#262626] border border-zinc-800 rounded p-3 flex flex-col justify-between">
|
|
<div>
|
|
<h3 className="font-bold text-zinc-200 flex items-center gap-1.5 mb-1.5">
|
|
<i data-lucide="save" className="w-4 h-4 text-cyan-400"></i> Trộn & Xuất bản
|
|
</h3>
|
|
<div className="grid grid-cols-3 gap-2 mt-1">
|
|
<div>
|
|
<label className="block text-[8px] text-zinc-500 font-bold uppercase mb-0.5">Sample Rate</label>
|
|
<select value={exportSettings.sampleRate}
|
|
onChange={(e) => setExportSettings(prev => ({ ...prev, sampleRate: e.target.value }))}
|
|
className="w-full bg-[#141414] border border-zinc-800 rounded px-1.5 py-1 text-[10px] text-zinc-300 focus:outline-none">
|
|
<option value="22500">22.5 kHz</option>
|
|
<option value="44100">44.1 kHz</option>
|
|
<option value="48000">48.0 kHz</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[8px] text-zinc-500 font-bold uppercase mb-0.5">Bit Depth</label>
|
|
<select value={exportSettings.bitDepth}
|
|
onChange={(e) => setExportSettings(prev => ({ ...prev, bitDepth: e.target.value }))}
|
|
className="w-full bg-[#141414] border border-zinc-800 rounded px-1.5 py-1 text-[10px] text-zinc-300 focus:outline-none">
|
|
<option value="8">8-bit</option>
|
|
<option value="16">16-bit</option>
|
|
<option value="24">24-bit</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[8px] text-zinc-500 font-bold uppercase mb-0.5">Mã Hóa</label>
|
|
<select value={exportSettings.format}
|
|
onChange={(e) => setExportSettings(prev => ({ ...prev, format: e.target.value }))}
|
|
className="w-full bg-[#141414] border border-zinc-800 rounded px-1.5 py-1 text-[10px] text-zinc-300 focus:outline-none">
|
|
<option value="wav">WAV (.wav)</option>
|
|
<option value="mp3">MP3 (.mp3)</option>
|
|
<option value="ogg">OGG (.ogg)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button onClick={triggerWavExport} disabled={isExporting}
|
|
className="w-full py-1.5 mt-2 bg-cyan-700 hover:bg-cyan-600 active:bg-cyan-800 text-zinc-100 font-bold rounded flex items-center justify-center gap-1.5 transition text-xs shadow-md">
|
|
<i data-lucide="download-cloud" className="w-4 h-4"></i>
|
|
{isExporting ? 'Đang xuất...' : 'Xuất bản bản phối'}
|
|
</button>
|
|
</section>
|
|
|
|
{/* Transport Section */}
|
|
<section className="md:col-span-4 bg-[#242424] border border-zinc-800 rounded p-3 flex flex-col justify-between items-center text-center">
|
|
<div className="flex w-full items-center justify-between">
|
|
<span className="text-[10px] text-zinc-500 font-bold uppercase tracking-wider">Transport Controls</span>
|
|
<div className="text-sm font-bold font-mono text-zinc-100">{formatTime(currentTime)}</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-2 w-full mt-1 bg-[#141414] p-1.5 rounded border border-zinc-800">
|
|
<div>
|
|
<span className="block text-[8px] text-zinc-500 font-bold uppercase mb-0.5">Vùng Chọn Đầu</span>
|
|
<input type="number" step="0.01" value={selectionStats.start}
|
|
onChange={(e) => handleSelectionInputChange('start', e.target.value)}
|
|
className="w-full bg-[#242424] text-amber-400 text-center font-mono text-[11px] rounded py-0.5 border border-zinc-700 focus:outline-none" />
|
|
</div>
|
|
<div>
|
|
<span className="block text-[8px] text-zinc-500 font-bold uppercase mb-0.5">Vùng Chọn Cuối</span>
|
|
<input type="number" step="0.01" value={selectionStats.end}
|
|
onChange={(e) => handleSelectionInputChange('end', e.target.value)}
|
|
className="w-full bg-[#242424] text-amber-400 text-center font-mono text-[11px] rounded py-0.5 border border-zinc-700 focus:outline-none" />
|
|
</div>
|
|
<div className="flex flex-col justify-center">
|
|
<span className="text-[8px] text-zinc-500 font-bold uppercase">Thời Lượng</span>
|
|
<span className="text-zinc-200 font-mono text-[11px] font-semibold mt-0.5">{selectionStats.length}s</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1 justify-center w-full mt-1.5">
|
|
<button onClick={() => setCurrentTime(0)}
|
|
className="w-8 h-8 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition"
|
|
title="Quay lại đầu"><i data-lucide="skip-back" className="w-4 h-4"></i></button>
|
|
<button onClick={() => { if (selLeft !== null) setCurrentTime(selLeft); }}
|
|
className="w-8 h-8 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition"
|
|
title="Đầu vùng chọn"><i data-lucide="step-back" className="w-4 h-4"></i></button>
|
|
<button onClick={handlePlayPause}
|
|
className={`w-8 h-8 flex items-center justify-center rounded border transition ${
|
|
isPlaying
|
|
? 'bg-emerald-600 text-black border-emerald-500 hover:bg-emerald-500'
|
|
: 'bg-cyan-600 text-white border-cyan-500 hover:bg-cyan-500'
|
|
}`}
|
|
title={isPlaying ? "Tạm dừng" : "Play"}>
|
|
<i data-lucide="play" className="w-4 h-4 fill-current"></i>
|
|
</button>
|
|
<button onClick={handlePause}
|
|
className="w-8 h-8 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition"
|
|
title="Pause"><i data-lucide="pause" className="w-4 h-4"></i></button>
|
|
<button onClick={handleStop}
|
|
className="w-8 h-8 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition"
|
|
title="Stop"><i data-lucide="square" className="w-4 h-4 fill-current"></i></button>
|
|
<button onClick={() => { if (selRight !== null) setCurrentTime(selRight); }}
|
|
className="w-8 h-8 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition"
|
|
title="Cuối vùng chọn"><i data-lucide="step-forward" className="w-4 h-4"></i></button>
|
|
<button onClick={() => setCurrentTime(maxDuration)}
|
|
className="w-8 h-8 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition"
|
|
title="Đến cuối"><i data-lucide="skip-forward" className="w-4 h-4"></i></button>
|
|
<button onClick={() => setIsLoopingSelection(prev => !prev)}
|
|
className={`w-8 h-8 flex items-center justify-center rounded border transition ${
|
|
isLoopingSelection
|
|
? 'bg-amber-600 text-black border-amber-500 hover:bg-amber-500'
|
|
: 'bg-zinc-800 text-zinc-200 border-zinc-700 hover:bg-zinc-700'
|
|
}`} title="Bật/Tắt Lặp vùng chọn">
|
|
<i data-lucide="repeat" className="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
{/* AI Analysis & Edit Section */}
|
|
<section className="md:col-span-4 bg-[#262626] border border-zinc-800 rounded p-3 flex flex-col justify-between">
|
|
<div>
|
|
<h3 className="font-bold text-zinc-200 flex items-center gap-1.5 mb-1">
|
|
<i data-lucide="cpu" className="text-purple-400 w-4 h-4"></i> Edit & AI Engine
|
|
</h3>
|
|
<div className="p-1.5 bg-[#141414] rounded border border-zinc-800 text-[10px] font-mono min-h-[46px] flex flex-col justify-center">
|
|
<div className="text-zinc-500">// Status: <span className="text-zinc-300">{analysisState.status}</span></div>
|
|
{analysisState.data && (
|
|
<div className="text-emerald-500 font-semibold mt-0.5">
|
|
BPM: {analysisState.data.bpm} | Bars: {analysisState.data.bars}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2 mt-1.5">
|
|
<button onClick={handleMarkSelection}
|
|
className="flex-1 py-1 px-1 bg-purple-900 hover:bg-purple-800 text-purple-100 font-bold rounded flex items-center justify-center gap-1 border border-purple-700 transition"
|
|
title="Tạo Marker">
|
|
<i data-lucide="map-pin" className="w-3.5 h-3.5"></i> Mark
|
|
</button>
|
|
<button onClick={handleAICutToNewTrack} disabled={analysisState.isRunning}
|
|
className="flex-[2] py-1 px-1 bg-purple-700 hover:bg-purple-600 text-white font-bold rounded flex items-center justify-center gap-1 transition shadow-md"
|
|
title="AI Zero-crossing Cut">
|
|
<i data-lucide="scissors" className="w-3.5 h-3.5"></i> AI Cut
|
|
</button>
|
|
<button onClick={triggerAIAnalysis} disabled={analysisState.isRunning}
|
|
className="p-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded border border-zinc-700"
|
|
title="AI Analysis">
|
|
<i data-lucide="sparkles" className="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
<div className="flex gap-2 mt-1">
|
|
<button onClick={openTempTab}
|
|
className="flex-1 py-1 px-1 bg-amber-800 hover:bg-amber-700 text-amber-100 font-bold rounded flex items-center justify-center gap-1 border border-amber-700 transition text-[11px]"
|
|
title={selLeft !== null ? "Edit in Temp Tab (LOOP_EDITOR.md §2)" : "Select a region first"}>
|
|
<i data-lucide="file-edit" className="w-3.5 h-3.5"></i> Edit in Temp Tab
|
|
</button>
|
|
<button onClick={handleUndo} disabled={undoStack.length === 0}
|
|
className="px-2 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded border border-zinc-700 transition text-[11px]"
|
|
title="Undo (Ctrl+Z)">
|
|
<i data-lucide="undo" className="w-3.5 h-3.5"></i>
|
|
</button>
|
|
<button onClick={handleRedo} disabled={redoStack.length === 0}
|
|
className="px-2 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded border border-zinc-700 transition text-[11px]"
|
|
title="Redo (Ctrl+Y)">
|
|
<i data-lucide="redo" className="w-3.5 h-3.5"></i>
|
|
</button>
|
|
<span className="text-[9px] text-zinc-600 flex items-center font-mono">{undoStack.length}/{MAX_UNDO}</span>
|
|
</div>
|
|
</section>
|
|
</footer>
|
|
|
|
{/* ── Status Bar ── */}
|
|
<div className="h-6 bg-[#141414] border-t border-zinc-900 px-4 flex items-center justify-between text-[10px] text-zinc-500 select-none shrink-0" style={{ display: activeTab !== 'main' ? 'none' : '' }}>
|
|
<div className="flex items-center gap-4">
|
|
<span>Status: {isPlaying ? 'Playing' : 'Stopped'}</span>
|
|
<span className="text-cyan-400 font-semibold uppercase">Track: ID {selectedTrackId}</span>
|
|
{selectionMode === 'local' && <span className="text-amber-400 font-semibold uppercase text-[9px]">Local Sel</span>}
|
|
{selectionMode === 'global' && <span className="text-purple-400 font-semibold uppercase text-[9px]">Global Sel</span>}
|
|
{soloedTrackId && <span className="text-amber-500 font-semibold">Solo: ID {soloedTrackId}</span>}
|
|
{isLoopingSelection && selectionMode === 'local' && <span className="text-emerald-400 font-semibold uppercase text-[9px]">Solo Loop</span>}
|
|
{isLoopingSelection && selectionMode !== 'local' && <span className="text-cyan-400 font-semibold uppercase text-[9px]">Master Loop</span>}
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className="flex items-center gap-1">
|
|
<i data-lucide="info" className="w-3 h-3 text-zinc-600"></i> Scroll: Zoom
|
|
</span>
|
|
<span>|</span>
|
|
<span className="flex items-center gap-1">
|
|
<i data-lucide="keyboard" className="w-3 h-3 text-zinc-600"></i> Ctrl+Scroll: Playhead
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Sub-Tab Editor Panel (replaces workspace when active) ── */}
|
|
{activeTab !== 'main' && (() => {
|
|
const st = subTabs.find(s => s.id === activeTab);
|
|
if (!st) return null;
|
|
const fx = st.effects || {};
|
|
return (
|
|
<div className="flex-1 flex flex-col bg-[#1e1e1e]">
|
|
<div className="h-8 bg-[#2a2a2a] border-b border-zinc-700 flex items-center px-3 gap-2 shrink-0">
|
|
<i data-lucide="file-edit" className="w-4 h-4 text-amber-400"></i>
|
|
<span className="text-xs font-bold text-zinc-200">{st.label}</span>
|
|
<span className="text-[10px] text-zinc-500 font-mono">
|
|
({formatTime(st.startTime)} - {formatTime(st.endTime)})
|
|
| {st.buffer ? formatTime(st.buffer.duration) : '0s'}
|
|
| {st.buffer ? st.buffer.sampleRate : 0} Hz
|
|
</span>
|
|
<div className="flex-1"></div>
|
|
<button onClick={() => closeSubTab(st.id)}
|
|
className="px-2 py-0.5 bg-zinc-800 hover:bg-zinc-700 text-zinc-400 rounded text-[10px] border border-zinc-700 transition">
|
|
<i data-lucide="x" className="w-3 h-3"></i> Close
|
|
</button>
|
|
</div>
|
|
<div className="flex-1 flex flex-col p-3 gap-3 overflow-y-auto">
|
|
<SubTabWaveform buffer={st.buffer} />
|
|
<div className="grid grid-cols-4 gap-3 max-w-2xl">
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-[9px] text-zinc-500 font-bold uppercase">Reverse</span>
|
|
<button onClick={() => updateSubTabEffects(st.id, { reverse: !fx.reverse })}
|
|
className={`py-2 rounded text-xs font-bold border transition ${
|
|
fx.reverse
|
|
? 'bg-amber-800 text-amber-100 border-amber-600'
|
|
: 'bg-zinc-800 text-zinc-400 border-zinc-700 hover:text-zinc-200'
|
|
}`}>
|
|
<i data-lucide="arrow-left-right" className="w-4 h-4 mx-auto"></i>
|
|
</button>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-[9px] text-zinc-500 font-bold uppercase">Gain (dB)</span>
|
|
<input type="number" step="0.5" value={fx.gainDb || 0}
|
|
onChange={(e) => updateSubTabEffects(st.id, { gainDb: parseFloat(e.target.value) || 0 })}
|
|
className="bg-zinc-800 text-zinc-200 text-center font-mono text-xs rounded border border-zinc-700 p-1.5 focus:outline-none focus:border-amber-600" />
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-[9px] text-zinc-500 font-bold uppercase">Fade In (ms)</span>
|
|
<input type="number" step="10" min="0" value={fx.fadeInMs || 0}
|
|
onChange={(e) => updateSubTabEffects(st.id, { fadeInMs: parseInt(e.target.value) || 0 })}
|
|
className="bg-zinc-800 text-zinc-200 text-center font-mono text-xs rounded border border-zinc-700 p-1.5 focus:outline-none focus:border-amber-600" />
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-[9px] text-zinc-500 font-bold uppercase">Fade Out (ms)</span>
|
|
<input type="number" step="10" min="0" value={fx.fadeOutMs || 0}
|
|
onChange={(e) => updateSubTabEffects(st.id, { fadeOutMs: parseInt(e.target.value) || 0 })}
|
|
className="bg-zinc-800 text-zinc-200 text-center font-mono text-xs rounded border border-zinc-700 p-1.5 focus:outline-none focus:border-amber-600" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="h-10 bg-[#2a2a2a] border-t border-zinc-700 flex items-center justify-end px-3 gap-2 shrink-0">
|
|
<button onClick={() => closeSubTab(st.id)}
|
|
className="px-3 py-1.5 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded text-xs font-bold border border-zinc-700 transition">
|
|
Cancel
|
|
</button>
|
|
<button onClick={() => applySubTab(st.id)}
|
|
className="px-3 py-1.5 bg-amber-700 hover:bg-amber-600 text-white rounded text-xs font-bold transition shadow-md">
|
|
<i data-lucide="check" className="w-3.5 h-3.5 inline mr-1"></i> Apply & Merge
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})()}
|
|
|
|
{/* ── Context Menu ── */}
|
|
{contextMenu && (
|
|
<div className="fixed z-[60] bg-[#2a2a2a] border border-zinc-700 rounded-lg shadow-2xl py-1 w-64" style={{ left: contextMenu.x, top: contextMenu.y }}
|
|
onClick={(e) => e.stopPropagation()}>
|
|
<button onClick={contextMenuEdit} className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
|
|
<i data-lucide="file-edit" className="w-3.5 h-3.5 text-amber-400 shrink-0"></i>
|
|
<span className="flex-1">Edit</span>
|
|
<span className="text-purple-400 text-[12px] font-semibold font-mono ml-auto pl-8">Ctrl+E</span>
|
|
</button>
|
|
<button onClick={contextMenuSplit} className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
|
|
<i data-lucide="scissors" className="w-3.5 h-3.5 text-cyan-400 shrink-0"></i>
|
|
<span className="flex-1">Split</span>
|
|
<span className="text-purple-400 text-[12px] font-semibold font-mono ml-auto pl-8">S</span>
|
|
</button>
|
|
<button onClick={contextMenuMerge} className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
|
|
<i data-lucide="combine" className="w-3.5 h-3.5 text-purple-400 shrink-0"></i>
|
|
<span className="flex-1">Merge</span>
|
|
<span className="text-purple-400 text-[12px] font-semibold font-mono ml-auto pl-8">Ctrl+M</span>
|
|
</button>
|
|
<div className="h-px bg-zinc-700 my-1"></div>
|
|
<button onClick={contextMenuCopy} className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
|
|
<i data-lucide="copy" className="w-3.5 h-3.5 text-zinc-400 shrink-0"></i>
|
|
<span className="flex-1">Copy</span>
|
|
<span className="text-purple-400 text-[12px] font-semibold font-mono ml-auto pl-8">Ctrl+C</span>
|
|
</button>
|
|
<button onClick={contextMenuCut} className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
|
|
<i data-lucide="scissors" className="w-3.5 h-3.5 text-rose-400 shrink-0"></i>
|
|
<span className="flex-1">Cut</span>
|
|
<span className="text-purple-400 text-[12px] font-semibold font-mono ml-auto pl-8">Ctrl+X</span>
|
|
</button>
|
|
<button onClick={contextMenuPaste} className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
|
|
<i data-lucide="clipboard" className="w-3.5 h-3.5 text-emerald-400 shrink-0"></i>
|
|
<span className="flex-1">Paste</span>
|
|
<span className="text-purple-400 text-[12px] font-semibold font-mono ml-auto pl-8">Ctrl+V</span>
|
|
</button>
|
|
<div className="h-px bg-zinc-700 my-1"></div>
|
|
<button onClick={contextMenuDelete} className="w-full px-3 py-1.5 text-xs text-red-300 hover:bg-red-950 text-left flex items-center gap-2">
|
|
<i data-lucide="trash-2" className="w-3.5 h-3.5 text-red-400 shrink-0"></i>
|
|
<span className="flex-1">Delete</span>
|
|
<span className="text-amber-400 text-[12px] font-semibold font-mono ml-auto pl-8">Del</span>
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Toast ── */}
|
|
{toastMessage && (
|
|
<div className="absolute top-14 right-4 z-50 px-4 py-2.5 rounded shadow-lg text-xs font-semibold flex items-center gap-2 border bg-zinc-900 text-zinc-100 border-zinc-800">
|
|
<i data-lucide="bell" className={`w-4 h-4 ${
|
|
toastMessage.type === 'success' ? 'text-emerald-400' :
|
|
toastMessage.type === 'error' ? 'text-rose-400' :
|
|
toastMessage.type === 'warning' ? 'text-amber-400' : 'text-cyan-400'
|
|
}`}></i>
|
|
{toastMessage.text}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
|
root.render(<App />);
|
|
setTimeout(() => lucide.createIcons(), 300);
|
|
</script>
|
|
</body>
|
|
</html> |