9999 lines
405 KiB
JavaScript
9999 lines
405 KiB
JavaScript
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`;
|
|
|
|
// Handle ?sfs=<encoded> from double-clicking a .sfs file (opens domain -> loads project)
|
|
(function handleSfsDeepLink() {
|
|
try {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const sfsParam = params.get('sfs');
|
|
if (!sfsParam) return;
|
|
const decoded = JSON.parse(decodeURIComponent(sfsParam));
|
|
window.__pendingSfsProject = decoded; // consumed after auth in App
|
|
if (window.history.replaceState) {
|
|
window.history.replaceState({}, document.title, window.location.pathname);
|
|
}
|
|
} catch (e) {
|
|
window.__pendingSfsProject = null;
|
|
}
|
|
})();
|
|
|
|
// 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 (window.SonicAudio && window.SonicAudio.initAudioWorklet) {
|
|
window.SonicAudio.initAudioWorklet();
|
|
}
|
|
}
|
|
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 formatTimeSimple = secs => {
|
|
if (isNaN(secs) || secs < 0) return "0.00s";
|
|
return `${secs.toFixed(2)}s`;
|
|
};
|
|
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 /*#__PURE__*/React.createElement("div", {
|
|
className: "knob-container cursor-ns-resize flex flex-col items-center",
|
|
onMouseDown: handleMouseDown,
|
|
title: `Volume: ${Math.round(value * 100)}%`
|
|
}, /*#__PURE__*/React.createElement("svg", {
|
|
className: "w-7 h-7",
|
|
viewBox: "0 0 40 40"
|
|
}, /*#__PURE__*/React.createElement("circle", {
|
|
cx: "20",
|
|
cy: "20",
|
|
r: "16",
|
|
fill: "#141414",
|
|
stroke: "#444",
|
|
strokeWidth: "2"
|
|
}), /*#__PURE__*/React.createElement("g", {
|
|
transform: `rotate(${rotation} 20 20)`,
|
|
className: "knob-dial"
|
|
}, /*#__PURE__*/React.createElement("line", {
|
|
x1: "20",
|
|
y1: "20",
|
|
x2: "20",
|
|
y2: "6",
|
|
stroke: "#ef4444",
|
|
strokeWidth: "3",
|
|
strokeLinecap: "round"
|
|
}))));
|
|
};
|
|
const WaveformLane = ({
|
|
track,
|
|
zoom,
|
|
timelineWidth,
|
|
viewportWidth,
|
|
onSelectRange,
|
|
onPlayheadSet,
|
|
isSelected,
|
|
onSelectTrack,
|
|
markers,
|
|
selectionMode,
|
|
localSelectionTrackId,
|
|
localSelectionStart,
|
|
currentTime,
|
|
getLocalAnchor,
|
|
onClearLocalSelection,
|
|
onSetSelectionMode,
|
|
onSetSelectionStart,
|
|
onSetSelectionEnd,
|
|
onSetCurrentTime,
|
|
onSetLocalSelectionTrackId,
|
|
onSetLocalSelectionStart,
|
|
onSetLocalSelectionEnd,
|
|
localSelLeft,
|
|
localSelRight,
|
|
onTrackLaneMouseDown,
|
|
onContextMenu,
|
|
onClipDragStart,
|
|
onClipStretchStart,
|
|
onSelectionEdgeDragStart,
|
|
setSelectedClipId,
|
|
selectedClipId,
|
|
activeTool,
|
|
onSplitTrackAtTime,
|
|
onEditClipInSubTab,
|
|
snapValue,
|
|
bpm,
|
|
scrollLeft
|
|
}) => {
|
|
const canvasRef = useRef(null);
|
|
const drawWidth = Math.min(timelineWidth, viewportWidth);
|
|
useEffect(() => {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
const ctx = canvas.getContext('2d');
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const scrollLeftVal = scrollLeft || 0;
|
|
const vWidth = viewportWidth || 1200;
|
|
const height = canvas.parentElement ? canvas.parentElement.clientHeight : 96;
|
|
canvas.width = Math.min(Math.round(drawWidth * dpr), 32768);
|
|
canvas.height = Math.min(Math.round(height * dpr), 32768);
|
|
ctx.scale(dpr, dpr);
|
|
ctx.imageSmoothingEnabled = false;
|
|
canvas.style.width = `${drawWidth}px`;
|
|
canvas.style.height = `${height}px`;
|
|
ctx.fillStyle = isSelected ? '#2a2a2a' : track.id % 2 === 0 ? '#181818' : '#1d1d1d';
|
|
ctx.fillRect(0, 0, drawWidth, height);
|
|
|
|
// Grid lines based on Snap value
|
|
ctx.strokeStyle = 'rgba(255, 255, 255, 0.03)';
|
|
ctx.lineWidth = 1;
|
|
const tStart = scrollLeft / zoom;
|
|
const tEnd = (scrollLeft + drawWidth) / zoom;
|
|
let gridSpacing = 1.0;
|
|
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);
|
|
}
|
|
let drawSpacing = gridSpacing;
|
|
while (drawSpacing * zoom < 10) {
|
|
drawSpacing *= 2;
|
|
}
|
|
const firstGridStep = Math.floor(tStart / drawSpacing) * drawSpacing;
|
|
for (let s = firstGridStep; s <= tEnd; s += drawSpacing) {
|
|
const localX = (s - tStart) * zoom;
|
|
ctx.beginPath();
|
|
ctx.moveTo(localX, 0);
|
|
ctx.lineTo(localX, 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 numChannels = clip.buffer.numberOfChannels || 1;
|
|
const dataL = clip.buffer.getChannelData(0);
|
|
const dataR = numChannels >= 2 ? clip.buffer.getChannelData(1) : dataL;
|
|
const sampleRate = clip.buffer.sampleRate;
|
|
const totalSamples = dataL.length;
|
|
const originalDuration = totalSamples / sampleRate;
|
|
const clipSpeed = clip.speed || 1.0;
|
|
const duration = originalDuration / clipSpeed;
|
|
const clipStartTime = clip.startTime || 0;
|
|
const clipEndTime = clipStartTime + duration;
|
|
|
|
// Culling: Skip rendering if clip is outside visible viewport window
|
|
if (clipEndTime < tStart || clipStartTime > tEnd) return;
|
|
const xStartGlobal = clipStartTime * zoom;
|
|
const wClip = duration * zoom;
|
|
const xStartLocal = xStartGlobal - scrollLeft;
|
|
const xEndLocal = xStartLocal + wClip;
|
|
|
|
// 1. Draw Clip Layer Background & Border
|
|
const clipIdentifier = clip.id === 'default' ? 'default_' + track.id : clip.id;
|
|
const isClipSelected = selectedClipId && selectedClipId.trackId === track.id && selectedClipId.clipId === clipIdentifier;
|
|
ctx.fillStyle = isClipSelected ? track.color ? track.color + '44' : 'rgba(6, 182, 212, 0.30)' : track.color ? track.color + '22' : 'rgba(6, 182, 212, 0.12)';
|
|
ctx.strokeStyle = isClipSelected ? '#fbbf24' : track.color || '#06b6d4';
|
|
ctx.lineWidth = isClipSelected ? 1 : 1.5;
|
|
const clipTop = 4;
|
|
const clipHeight = height - 8;
|
|
ctx.beginPath();
|
|
if (ctx.roundRect) {
|
|
ctx.roundRect(xStartLocal, clipTop, wClip, clipHeight, 4);
|
|
} else {
|
|
ctx.rect(xStartLocal, clipTop, wClip, clipHeight);
|
|
}
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
// 2. Draw Clip Label & Speed Label
|
|
ctx.fillStyle = '#e4e4e7';
|
|
ctx.font = 'bold 9px sans-serif';
|
|
ctx.fillText(clip.name || 'Clip', Math.max(xStartLocal + 8, 8), clipTop + 12);
|
|
if (clipSpeed !== 1.0) {
|
|
ctx.fillStyle = '#fbbf24';
|
|
ctx.font = 'bold 8px sans-serif';
|
|
ctx.fillText(`Speed: ${(clipSpeed * 100).toFixed(1)}%`, Math.max(xStartLocal + 8, 8), clipTop + 22);
|
|
}
|
|
|
|
// Draw markers
|
|
if (markers && markers.length > 0) {
|
|
markers.forEach(m => {
|
|
const mxLocal = m.time * zoom - scrollLeft;
|
|
if (mxLocal >= 0 && mxLocal <= drawWidth) {
|
|
ctx.fillStyle = '#fbbf24';
|
|
ctx.fillRect(mxLocal - 1, 0, 2, height);
|
|
}
|
|
});
|
|
}
|
|
|
|
// 3. Peak / Vector Waveform Drawing (Sound Forge Dual Stereo Channel Split Match)
|
|
const drawXStartLocal = Math.max(0, Math.floor(xStartLocal));
|
|
const drawXEndLocal = Math.min(drawWidth, Math.ceil(xEndLocal));
|
|
const samplesPerPixel = sampleRate / zoom * clipSpeed;
|
|
const isStereo = numChannels >= 2;
|
|
const channelConfigs = isStereo ? [{
|
|
data: dataL,
|
|
mid: height / 4,
|
|
chHeight: height / 2 - 8,
|
|
label: '1'
|
|
}, {
|
|
data: dataR,
|
|
mid: 3 * height / 4,
|
|
chHeight: height / 2 - 8,
|
|
label: '2'
|
|
}] : [{
|
|
data: dataL,
|
|
mid: height / 2,
|
|
chHeight: clipHeight - 12,
|
|
label: 'MONO'
|
|
}];
|
|
if (isStereo) {
|
|
ctx.strokeStyle = 'rgba(255, 255, 255, 0.12)';
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath();
|
|
ctx.moveTo(xStartLocal, height / 2);
|
|
ctx.lineTo(xStartLocal + wClip, height / 2);
|
|
ctx.stroke();
|
|
}
|
|
channelConfigs.forEach(ch => {
|
|
const data = ch.data;
|
|
const mid = ch.mid;
|
|
const peakRatio = ch.chHeight * 0.42;
|
|
|
|
// Decibel Amplitude Grid Lines (+6.0dB, -Inf, -6.0dB)
|
|
const yPlus6 = mid - peakRatio * 0.8;
|
|
const yMinus6 = mid + peakRatio * 0.8;
|
|
ctx.strokeStyle = 'rgba(255, 255, 255, 0.08)';
|
|
ctx.lineWidth = 0.5;
|
|
ctx.beginPath();
|
|
ctx.moveTo(xStartLocal, yPlus6);
|
|
ctx.lineTo(xStartLocal + wClip, yPlus6);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.moveTo(xStartLocal, mid);
|
|
ctx.lineTo(xStartLocal + wClip, mid);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.moveTo(xStartLocal, yMinus6);
|
|
ctx.lineTo(xStartLocal + wClip, yMinus6);
|
|
ctx.stroke();
|
|
|
|
// Decibel Text Labels (Sound Forge Monospace)
|
|
ctx.fillStyle = '#71717a';
|
|
ctx.font = '8px monospace';
|
|
const labelX = Math.max(xStartLocal + 4, 4);
|
|
ctx.fillText('+6.0', labelX, yPlus6 - 2);
|
|
ctx.fillText('-Inf', labelX, mid - 2);
|
|
ctx.fillText('-6.0', labelX, yMinus6 + 8);
|
|
|
|
// Sound Forge Channel ID Badge (1 or 2)
|
|
if (isStereo) {
|
|
ctx.fillStyle = 'rgba(6, 182, 212, 0.85)';
|
|
ctx.font = 'bold 9px monospace';
|
|
ctx.fillText(ch.label, Math.min(xStartLocal + wClip - 12, drawWidth - 16), mid - ch.chHeight * 0.35);
|
|
}
|
|
ctx.strokeStyle = '#5bc0be'; // Cornflower Blue
|
|
ctx.lineWidth = 1.2;
|
|
if (samplesPerPixel < 4) {
|
|
// High-zoom continuous vector line rendering (#5bc0be Cornflower Blue)
|
|
const visibleTStart = (drawXStartLocal - xStartLocal) / zoom;
|
|
const visibleTEnd = (drawXEndLocal - xStartLocal) / zoom;
|
|
const startSample = Math.max(0, Math.floor(visibleTStart * clipSpeed * sampleRate));
|
|
const endSample = Math.min(totalSamples, Math.ceil(visibleTEnd * clipSpeed * sampleRate));
|
|
ctx.beginPath();
|
|
let first = true;
|
|
const maxSamples = 50000;
|
|
const vectorStep = Math.max(1, Math.floor((endSample - startSample) / maxSamples));
|
|
for (let i = startSample; i < endSample; i += vectorStep) {
|
|
const sampleTime = i / sampleRate / clipSpeed;
|
|
const pxLocal = xStartLocal + sampleTime * zoom;
|
|
const y = mid - data[i] * peakRatio;
|
|
if (first) {
|
|
ctx.moveTo(pxLocal, y);
|
|
first = false;
|
|
} else {
|
|
ctx.lineTo(pxLocal, y);
|
|
}
|
|
}
|
|
ctx.stroke();
|
|
|
|
// Draw granular sample nodes only at extreme zoom (samplesPerPixel < 0.3)
|
|
if (samplesPerPixel < 0.3) {
|
|
const maxNodes = 5000;
|
|
const step = Math.max(1, Math.floor((endSample - startSample) / maxNodes));
|
|
ctx.fillStyle = '#6ee7b7';
|
|
let drawn = 0;
|
|
for (let i = startSample; i < endSample && drawn < maxNodes; i += step) {
|
|
const sampleTime = i / sampleRate / clipSpeed;
|
|
const pxLocal = xStartLocal + sampleTime * zoom;
|
|
const y = mid - data[i] * peakRatio;
|
|
ctx.fillRect(pxLocal - 1, y - 1, 2, 2);
|
|
drawn++;
|
|
}
|
|
}
|
|
} else {
|
|
// Coarse view vertical peak min/max bars per pixel
|
|
for (let pxLocal = drawXStartLocal; pxLocal < drawXEndLocal; pxLocal++) {
|
|
const timeInClip = (pxLocal - xStartLocal) / 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 peakHeight = maxVal * peakRatio;
|
|
ctx.beginPath();
|
|
ctx.moveTo(pxLocal, mid - peakHeight);
|
|
ctx.lineTo(pxLocal, 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', drawWidth / 2, height / 2);
|
|
}
|
|
|
|
// Selection highlight - local selection on this track
|
|
if (selectionMode === 'local' && localSelectionTrackId === track.id && localSelLeft !== null && localSelRight !== null && localSelRight > localSelLeft) {
|
|
const hlLeftLocal = localSelLeft * zoom - scrollLeft;
|
|
const hlWidth = (localSelRight - localSelLeft) * zoom;
|
|
ctx.fillStyle = 'rgba(245, 158, 11, 0.15)';
|
|
ctx.fillRect(hlLeftLocal, 0, hlWidth, height);
|
|
ctx.strokeStyle = '#f59e0b';
|
|
ctx.lineWidth = 1;
|
|
ctx.strokeRect(hlLeftLocal, 0, hlWidth, height);
|
|
}
|
|
}, [track, zoom, timelineWidth, viewportWidth, isSelected, markers, selectionMode, localSelectionTrackId, localSelLeft, localSelRight, snapValue, bpm, scrollLeft]);
|
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
key: "virtual-spacer",
|
|
style: {
|
|
width: `${timelineWidth}px`,
|
|
height: '1px',
|
|
pointerEvents: 'none'
|
|
}
|
|
}), /*#__PURE__*/React.createElement("canvas", {
|
|
ref: canvasRef,
|
|
style: {
|
|
position: 'sticky',
|
|
left: 0,
|
|
imageRendering: 'pixelated'
|
|
},
|
|
className: "cursor-crosshair",
|
|
onMouseMove: e => {
|
|
if (!canvasRef.current) return;
|
|
const rect = canvasRef.current.getBoundingClientRect();
|
|
const x = e.clientX - rect.left + (scrollLeft || 0);
|
|
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
|
|
}] : [];
|
|
|
|
// 1. Shift+Drag (TOP PRIORITY): Range selection on track waveform
|
|
if (e.shiftKey && e.buttons > 0) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const currentAnchor = getLocalAnchor ? getLocalAnchor() : null;
|
|
const anchor = currentAnchor !== null && currentAnchor !== undefined ? currentAnchor : localSelectionStart !== null ? localSelectionStart : currentTime;
|
|
const selS = Math.min(anchor, time);
|
|
const selE = Math.max(anchor, time);
|
|
if (onSetSelectionMode) onSetSelectionMode('local');
|
|
if (onSetLocalSelectionTrackId) onSetLocalSelectionTrackId(track.id);
|
|
if (onSetLocalSelectionStart) onSetLocalSelectionStart(selS);
|
|
if (onSetLocalSelectionEnd) onSetLocalSelectionEnd(selE);
|
|
if (onSetSelectionStart) onSetSelectionStart(selS);
|
|
if (onSetSelectionEnd) onSetSelectionEnd(selE);
|
|
if (onSetCurrentTime) onSetCurrentTime(time);
|
|
if (onSelectTrack) onSelectTrack(track.id);
|
|
return;
|
|
}
|
|
|
|
// 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 === 'pen') {
|
|
canvasRef.current.style.cursor = isOverClip ? 'copy' : 'not-allowed';
|
|
} else 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 x = e.clientX - rect.left + (scrollLeft || 0);
|
|
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
|
|
}] : [];
|
|
|
|
// 1. Shift+Click (TOP PRIORITY): Range selection on track waveform
|
|
if (e.shiftKey) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const currentAnchor = getLocalAnchor ? getLocalAnchor() : null;
|
|
const anchor = currentAnchor !== null && currentAnchor !== undefined ? currentAnchor : localSelectionStart !== null ? localSelectionStart : currentTime;
|
|
const selS = Math.min(anchor, time);
|
|
const selE = Math.max(anchor, time);
|
|
if (onSetSelectionMode) onSetSelectionMode('local');
|
|
if (onSetLocalSelectionTrackId) onSetLocalSelectionTrackId(track.id);
|
|
if (onSetLocalSelectionStart) onSetLocalSelectionStart(selS);
|
|
if (onSetLocalSelectionEnd) onSetLocalSelectionEnd(selE);
|
|
if (onSetSelectionStart) onSetSelectionStart(selS);
|
|
if (onSetSelectionEnd) onSetSelectionEnd(selE);
|
|
if (onSetCurrentTime) onSetCurrentTime(time);
|
|
if (onSelectTrack) onSelectTrack(track.id);
|
|
return;
|
|
}
|
|
|
|
// 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 === 'pen' && !e.ctrlKey) {
|
|
if (clickedClip) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (onEditClipInSubTab) {
|
|
onEditClipInSubTab(track.id, clickedClip.id);
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
if (activeTool === 'razor' && !e.ctrlKey) {
|
|
if (clickedClip) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (onSplitTrackAtTime) {
|
|
onSplitTrackAtTime(track.id, clickedClip.id, time);
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
if (activeTool === 'grab') {
|
|
if (onTrackLaneMouseDown) {
|
|
onTrackLaneMouseDown(track.id, time, e);
|
|
}
|
|
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) {
|
|
if (onClearLocalSelection) onClearLocalSelection();
|
|
if (onSetSelectionMode) onSetSelectionMode(null);
|
|
if (onSetSelectionStart) onSetSelectionStart(null);
|
|
if (onSetSelectionEnd) onSetSelectionEnd(null);
|
|
return;
|
|
}
|
|
onPlayheadSet(time);
|
|
if (onTrackLaneMouseDown) {
|
|
onTrackLaneMouseDown(track.id, time, e);
|
|
}
|
|
e.stopPropagation();
|
|
},
|
|
onDoubleClick: e => {
|
|
const rect = canvasRef.current.getBoundingClientRect();
|
|
const x = e.clientX - rect.left + (scrollLeft || 0);
|
|
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 x = e.clientX - rect.left + (scrollLeft || 0);
|
|
const time = Math.max(0, x / zoom);
|
|
if (onContextMenu) onContextMenu(e, track.id, time);
|
|
}
|
|
}));
|
|
};
|
|
const TempoTrackLane = ({
|
|
bpm,
|
|
zoom,
|
|
timelineWidth,
|
|
viewportWidth,
|
|
onPlayheadSet,
|
|
snapValue,
|
|
onRulerMouseDown,
|
|
scrollLeft
|
|
}) => {
|
|
const canvasRef = useRef(null);
|
|
const drawWidth = Math.min(timelineWidth, viewportWidth);
|
|
useEffect(() => {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
const ctx = canvas.getContext('2d');
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const scrollLeftVal = scrollLeft || 0;
|
|
const height = canvas.parentElement ? canvas.parentElement.clientHeight : 40;
|
|
canvas.width = Math.min(Math.round(drawWidth * dpr), 32768);
|
|
canvas.height = Math.min(Math.round(height * dpr), 32768);
|
|
ctx.scale(dpr, dpr);
|
|
ctx.imageSmoothingEnabled = false;
|
|
canvas.style.width = `${drawWidth}px`;
|
|
canvas.style.height = `${height}px`;
|
|
ctx.fillStyle = '#1a1a2e';
|
|
ctx.fillRect(0, 0, drawWidth, height);
|
|
const beatDuration = 60 / bpm;
|
|
const barDuration = beatDuration * 4;
|
|
const tStart = scrollLeft / zoom;
|
|
const tEnd = (scrollLeft + drawWidth) / zoom;
|
|
const firstBeat = Math.floor(tStart / beatDuration) * beatDuration;
|
|
for (let t = firstBeat; t <= tEnd; t += beatDuration) {
|
|
const beatNum = Math.floor(t / beatDuration) + 1;
|
|
const isBar = beatNum % 4 === 1;
|
|
const localX = (t - tStart) * zoom;
|
|
if (isBar) {
|
|
ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
|
|
ctx.lineWidth = 1.5;
|
|
ctx.beginPath();
|
|
ctx.moveTo(localX, 0);
|
|
ctx.lineTo(localX, 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)}`, localX + 3, 11);
|
|
} else {
|
|
ctx.strokeStyle = 'rgba(255, 255, 255, 0.08)';
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath();
|
|
ctx.moveTo(localX, 0);
|
|
ctx.lineTo(localX, 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) {
|
|
const firstSnap = Math.floor(tStart / snapInterval) * snapInterval;
|
|
for (let t = firstSnap; t <= tEnd; t += snapInterval) {
|
|
const onBeat = Math.abs(t / beatDuration - Math.round(t / beatDuration)) < 0.001;
|
|
if (!onBeat) {
|
|
const localX = (t - tStart) * zoom;
|
|
ctx.beginPath();
|
|
ctx.moveTo(localX, height - 6);
|
|
ctx.lineTo(localX, 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`, drawWidth - 6, 12);
|
|
}, [bpm, zoom, timelineWidth, viewportWidth, snapValue, scrollLeft]);
|
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
key: "virtual-spacer-tempo",
|
|
style: {
|
|
width: `${timelineWidth}px`,
|
|
height: '1px',
|
|
pointerEvents: 'none'
|
|
}
|
|
}), /*#__PURE__*/React.createElement("canvas", {
|
|
ref: canvasRef,
|
|
style: {
|
|
position: 'sticky',
|
|
left: 0,
|
|
imageRendering: 'pixelated'
|
|
},
|
|
className: "cursor-crosshair",
|
|
onMouseDown: e => {
|
|
const rect = canvasRef.current.getBoundingClientRect();
|
|
const x = e.clientX - rect.left + (scrollLeft || 0);
|
|
const time = Math.max(0, x / zoom);
|
|
if (e.shiftKey) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
if (onRulerMouseDown) {
|
|
onRulerMouseDown(e);
|
|
} else {
|
|
onPlayheadSet(time, e.shiftKey);
|
|
}
|
|
}
|
|
}));
|
|
};
|
|
|
|
// ── Sub-Tab Waveform Component (LOOP_EDITOR_2.md §1.2 & SUB_EDITOR.md) ──
|
|
const SubTabWaveform = ({
|
|
buffer,
|
|
subTabId,
|
|
activeTab,
|
|
currentTime,
|
|
selectionStart,
|
|
selectionEnd,
|
|
onSelectRange,
|
|
onPlayheadSet,
|
|
onContextMenu,
|
|
activeTool,
|
|
zoom,
|
|
timelineWidth,
|
|
color,
|
|
name,
|
|
speed = 1.0,
|
|
onSpeedChange,
|
|
volumeNodes = [],
|
|
panningNodes = [],
|
|
fadeInLen = 0,
|
|
fadeOutLen = 0,
|
|
graphMode = null,
|
|
onUpdateNodes,
|
|
onUpdateFade,
|
|
onModeToggle,
|
|
selectedNodeTime,
|
|
setSelectedNodeTime,
|
|
channelInfo = null
|
|
}) => {
|
|
const canvasRef = useRef(null);
|
|
const isStretchingRef = useRef(false);
|
|
const stretchStartRef = useRef({
|
|
mouseX: 0,
|
|
originalDuration: 0,
|
|
originalSpeed: 1.0
|
|
});
|
|
const subTabAnchorRef = useRef(null);
|
|
const isStereo = channelInfo ? channelInfo.isStereo : buffer && buffer.numberOfChannels >= 2;
|
|
const channelLabel = channelInfo ? channelInfo.label : isStereo ? 'STEREO' : 'MONO';
|
|
// Mono: force volume mode (panning not applicable)
|
|
const effectiveGraphMode = !isStereo && graphMode === 'pan' ? null : graphMode;
|
|
useEffect(() => {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas || !buffer) return;
|
|
const ctx = canvas.getContext('2d');
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const wrapper = canvas.parentElement ? canvas.parentElement.parentElement : null;
|
|
const scrollLeft = wrapper ? wrapper.scrollLeft : 0;
|
|
const vWidth = wrapper ? wrapper.clientWidth : 1200;
|
|
const drawWidth = Math.min(timelineWidth, Math.max(vWidth, 1200));
|
|
const h = canvas.parentElement ? canvas.parentElement.clientHeight : 200;
|
|
canvas.width = Math.round(drawWidth * dpr);
|
|
canvas.height = Math.round(h * dpr);
|
|
ctx.scale(dpr, dpr);
|
|
ctx.imageSmoothingEnabled = false;
|
|
canvas.style.position = 'absolute';
|
|
canvas.style.left = `${scrollLeft}px`;
|
|
canvas.style.width = `${drawWidth}px`;
|
|
canvas.style.height = `${h}px`;
|
|
ctx.fillStyle = '#181818';
|
|
ctx.fillRect(0, 0, drawWidth, h);
|
|
const data = buffer.getChannelData(0);
|
|
const len = data.length;
|
|
if (len === 0) return;
|
|
|
|
// Helper to compute volume gain at a specific time in clip using Monotone Cubic Hermite Spline
|
|
const computeHermiteTangents = pts => {
|
|
const n = pts.length;
|
|
if (n < 2) return [];
|
|
const m = new Array(n);
|
|
for (let i = 1; i < n - 1; i++) {
|
|
const hP = pts[i].time - pts[i - 1].time;
|
|
const hN = pts[i + 1].time - pts[i].time;
|
|
const sP = (pts[i].db - pts[i - 1].db) / hP;
|
|
const sN = (pts[i + 1].db - pts[i].db) / hN;
|
|
m[i] = (sP + sN) / 2;
|
|
}
|
|
m[0] = n > 1 ? (pts[1].db - pts[0].db) / (pts[1].time - pts[0].time) : 0;
|
|
m[n - 1] = n > 1 ? (pts[n - 1].db - pts[n - 2].db) / (pts[n - 1].time - pts[n - 2].time) : 0;
|
|
return m;
|
|
};
|
|
const getVolumeDbAtTime = t => {
|
|
const volNodes = volumeNodes || [];
|
|
if (volNodes.length === 0) return 0.0;
|
|
const sortedNodes = [...volNodes].sort((a, b) => a.time - b.time);
|
|
if (sortedNodes.length === 1) return sortedNodes[0].db;
|
|
if (t <= sortedNodes[0].time) return sortedNodes[0].db;
|
|
if (t >= sortedNodes[sortedNodes.length - 1].time) return sortedNodes[sortedNodes.length - 1].db;
|
|
const tangents = computeHermiteTangents(sortedNodes);
|
|
for (let i = 0; i < sortedNodes.length - 1; i++) {
|
|
const n1 = sortedNodes[i];
|
|
const n2 = sortedNodes[i + 1];
|
|
if (t >= n1.time && t <= n2.time) {
|
|
const h = n2.time - n1.time;
|
|
if (h <= 0) return n1.db;
|
|
const frac = (t - n1.time) / h;
|
|
const frac2 = frac * frac,
|
|
frac3 = frac2 * frac;
|
|
return (2 * frac3 - 3 * frac2 + 1) * n1.db + (frac3 - 2 * frac2 + frac) * h * tangents[i] + (-2 * frac3 + 3 * frac2) * n2.db + (frac3 - frac2) * h * tangents[i + 1];
|
|
}
|
|
}
|
|
return 0.0;
|
|
};
|
|
const getVolumeGainAtTime = t => {
|
|
return Math.pow(10, getVolumeDbAtTime(t) / 20);
|
|
};
|
|
const computeHermiteTangentsForPan = pts => {
|
|
const n = pts.length;
|
|
if (n < 2) return [];
|
|
const m = new Array(n);
|
|
for (let i = 1; i < n - 1; i++) {
|
|
const hP = pts[i].time - pts[i - 1].time;
|
|
const hN = pts[i + 1].time - pts[i].time;
|
|
const sP = (pts[i].pan - pts[i - 1].pan) / hP;
|
|
const sN = (pts[i + 1].pan - pts[i].pan) / hN;
|
|
m[i] = (sP + sN) / 2;
|
|
}
|
|
m[0] = n > 1 ? (pts[1].pan - pts[0].pan) / (pts[1].time - pts[0].time) : 0;
|
|
m[n - 1] = n > 1 ? (pts[n - 1].pan - pts[n - 2].pan) / (pts[n - 1].time - pts[n - 2].time) : 0;
|
|
return m;
|
|
};
|
|
const getPanningValueAtTime = t => {
|
|
const panNodes = panningNodes || [];
|
|
if (panNodes.length === 0) return 0;
|
|
const sortedNodes = [...panNodes].sort((a, b) => a.time - b.time);
|
|
if (sortedNodes.length === 1) return Math.round(sortedNodes[0].pan * 100);
|
|
if (t <= sortedNodes[0].time) return Math.round(sortedNodes[0].pan * 100);
|
|
if (t >= sortedNodes[sortedNodes.length - 1].time) return Math.round(sortedNodes[sortedNodes.length - 1].pan * 100);
|
|
const tangents = computeHermiteTangentsForPan(sortedNodes);
|
|
for (let i = 0; i < sortedNodes.length - 1; i++) {
|
|
const n1 = sortedNodes[i];
|
|
const n2 = sortedNodes[i + 1];
|
|
if (t >= n1.time && t <= n2.time) {
|
|
const h = n2.time - n1.time;
|
|
if (h <= 0) return Math.round(n1.pan * 100);
|
|
const frac = (t - n1.time) / h;
|
|
const frac2 = frac * frac,
|
|
frac3 = frac2 * frac;
|
|
const val = (2 * frac3 - 3 * frac2 + 1) * n1.pan + (frac3 - 2 * frac2 + frac) * h * tangents[i] + (-2 * frac3 + 3 * frac2) * n2.pan + (frac3 - frac2) * h * tangents[i + 1];
|
|
return Math.round(val * 100);
|
|
}
|
|
}
|
|
return 0;
|
|
};
|
|
|
|
// Draw clip container (like main session clips)
|
|
const xStart = 0;
|
|
const wClip = buffer.duration / speed * zoom; // speed-adjusted width
|
|
const xEnd = xStart + wClip;
|
|
const clipTop = 8;
|
|
const clipHeight = h - 16;
|
|
const clipColor = color || '#06b6d4';
|
|
ctx.fillStyle = clipColor + '22';
|
|
ctx.strokeStyle = clipColor;
|
|
ctx.lineWidth = 1.5;
|
|
if (ctx.roundRect) {
|
|
ctx.beginPath();
|
|
ctx.roundRect(xStart, clipTop, wClip, clipHeight, 4);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
} else {
|
|
ctx.fillRect(xStart, clipTop, wClip, clipHeight);
|
|
ctx.strokeRect(xStart, clipTop, wClip, clipHeight);
|
|
}
|
|
|
|
// Draw clip label with speed %
|
|
ctx.fillStyle = '#e4e4e7';
|
|
ctx.font = 'bold 10px sans-serif';
|
|
let displayName = name || 'Audio Clip';
|
|
if (speed !== 1.0) {
|
|
displayName += ` (${Math.round(speed * 100)}%)`;
|
|
}
|
|
ctx.fillText(displayName, xStart + 8, clipTop + 14);
|
|
|
|
// ── Graph Grid & Axes ──
|
|
const drawGrid = true;
|
|
if (drawGrid) {
|
|
// Background fill
|
|
ctx.fillStyle = '#181818';
|
|
ctx.fillRect(xStart, clipTop, wClip, clipHeight);
|
|
|
|
// Vertical grid lines (time markers)
|
|
ctx.strokeStyle = '#2a2a2a';
|
|
ctx.lineWidth = 0.5;
|
|
ctx.setLineDash([]);
|
|
const timeStep = Math.max(0.1, Math.ceil(buffer.duration / 20 * 10) / 10);
|
|
for (let t = 0; t <= buffer.duration; t += timeStep) {
|
|
const px = t * zoom;
|
|
ctx.beginPath();
|
|
ctx.moveTo(px, clipTop);
|
|
ctx.lineTo(px, clipTop + clipHeight);
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Always draw the reference Volume 0dB Axis (White) and Panning Center Axis (Brown)
|
|
const volZeroY = clipTop + 1 / 3 * clipHeight;
|
|
const panZeroY = clipTop + 1 / 2 * clipHeight;
|
|
|
|
// White line for volume 0dB
|
|
ctx.strokeStyle = '#ffffff';
|
|
ctx.lineWidth = 1.2;
|
|
ctx.beginPath();
|
|
ctx.moveTo(xStart, volZeroY);
|
|
ctx.lineTo(xStart + wClip, volZeroY);
|
|
ctx.stroke();
|
|
|
|
// Brown line for panning center
|
|
ctx.strokeStyle = '#854d0e';
|
|
ctx.lineWidth = 1.2;
|
|
ctx.beginPath();
|
|
ctx.moveTo(xStart, panZeroY);
|
|
ctx.lineTo(xStart + wClip, panZeroY);
|
|
ctx.stroke();
|
|
|
|
// Horizontal grid lines (other value markers)
|
|
const isPanMode = effectiveGraphMode === 'pan';
|
|
if (isPanMode) {
|
|
for (let p = -100; p <= 100; p += 20) {
|
|
if (p === 0) continue;
|
|
const y = clipTop + clipHeight * (1 - (p / 100 + 1) / 2);
|
|
ctx.strokeStyle = '#2a2a2a';
|
|
ctx.lineWidth = 0.5;
|
|
ctx.beginPath();
|
|
ctx.moveTo(xStart, y);
|
|
ctx.lineTo(xStart + wClip, y);
|
|
ctx.stroke();
|
|
}
|
|
} else {
|
|
for (let db = -30; db <= 3; db += 3) {
|
|
if (db === 0) continue;
|
|
const y = db >= 0 ? volZeroY - db / 3 * (2 / 3 * clipHeight) : volZeroY + -db / 30 * (1 / 3 * clipHeight);
|
|
ctx.strokeStyle = '#2a2a2a';
|
|
ctx.lineWidth = 0.5;
|
|
ctx.beginPath();
|
|
ctx.moveTo(xStart, y);
|
|
ctx.lineTo(xStart + wClip, y);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
// Y-axis labels (left side)
|
|
ctx.fillStyle = '#71717a';
|
|
ctx.font = '7px monospace';
|
|
ctx.textAlign = 'right';
|
|
if (isPanMode) {
|
|
ctx.fillText('L100', xStart - 2, clipTop + 8);
|
|
ctx.fillText('R50', xStart - 2, clipTop + clipHeight * 0.25 + 2);
|
|
ctx.fillStyle = '#854d0e'; // Brown label for active Panning Center
|
|
ctx.fillText('C (Pan)', xStart - 2, clipTop + clipHeight * 0.5 + 2);
|
|
ctx.fillStyle = '#71717a';
|
|
ctx.fillText('L50', xStart - 2, clipTop + clipHeight * 0.75 + 2);
|
|
ctx.fillText('R100', xStart - 2, clipTop + clipHeight - 2);
|
|
} else {
|
|
ctx.fillText('+3dB', xStart - 2, clipTop + 8);
|
|
ctx.fillStyle = '#ffffff'; // White label for active Volume 0dB
|
|
ctx.fillText('0dB (Vol)', xStart - 2, volZeroY + 2);
|
|
ctx.fillStyle = '#71717a';
|
|
ctx.fillText('-15dB', xStart - 2, volZeroY + clipHeight / 6 + 2);
|
|
ctx.fillText('-30dB', xStart - 2, clipTop + clipHeight - 2);
|
|
}
|
|
ctx.textAlign = 'start';
|
|
}
|
|
|
|
// Drag hint labels for fade endpoints
|
|
ctx.fillStyle = '#71717a';
|
|
ctx.font = '8px sans-serif';
|
|
ctx.fillText('Kéo FI/FO trên đường cong để điều chỉnh', 8, clipTop + clipHeight + 12);
|
|
|
|
// Display speed percentage in the bottom left corner of the waveform area
|
|
ctx.fillStyle = '#e4e4e7';
|
|
ctx.font = 'bold 9px sans-serif';
|
|
ctx.fillText(`Tốc độ: ${Math.round(speed * 100)}%`, xStart + 8, clipTop + clipHeight - 8);
|
|
|
|
// Mode toggle button on waveform (bottom-right)
|
|
const modeBtnW = 28;
|
|
const modeBtnH = 14;
|
|
const modeBtnX = wClip - modeBtnW - 4;
|
|
const modeBtnY = clipTop + clipHeight - modeBtnH - 2;
|
|
const isPanMode = effectiveGraphMode === 'pan';
|
|
ctx.fillStyle = isPanMode ? 'rgba(168, 85, 247, 0.5)' : 'rgba(6, 182, 212, 0.5)';
|
|
ctx.beginPath();
|
|
ctx.roundRect(modeBtnX, modeBtnY, modeBtnW, modeBtnH, 3);
|
|
ctx.fill();
|
|
ctx.fillStyle = '#fff';
|
|
ctx.font = 'bold 7px sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(isPanMode ? 'PAN' : 'VOL', modeBtnX + modeBtnW / 2, modeBtnY + 10);
|
|
ctx.textAlign = 'start';
|
|
|
|
// Channel label (L / R for stereo, M for mono)
|
|
ctx.fillStyle = '#a1a1aa';
|
|
ctx.font = 'bold 8px monospace';
|
|
if (isStereo) {
|
|
ctx.fillText('L', xStart + 2, clipTop + clipHeight * 0.28);
|
|
ctx.fillText('R', xStart + 2, clipTop + clipHeight * 0.72);
|
|
} else {
|
|
ctx.fillText('M', xStart + 2, clipTop + clipHeight / 2);
|
|
}
|
|
|
|
// Draw waveform inside clip (speed-adjusted) with fade envelope applied
|
|
const drawXStart = Math.max(0, Math.floor(xStart));
|
|
const drawXEnd = Math.min(drawWidth, Math.ceil(xEnd));
|
|
const samplesPerPixel = buffer.sampleRate / zoom * speed;
|
|
const bufDur = buffer.duration;
|
|
const mid = h / 2;
|
|
const peakRatio = clipHeight * 0.45;
|
|
const getFadeGainAtTime = t => {
|
|
if (fadeInLen > 0 && t < fadeInLen) {
|
|
return (1 - Math.cos(Math.PI * t / fadeInLen)) / 2;
|
|
} else if (fadeOutLen > 0 && t > bufDur - fadeOutLen) {
|
|
const ratio = (t - (bufDur - fadeOutLen)) / fadeOutLen;
|
|
return (1 + Math.cos(Math.PI * ratio)) / 2;
|
|
}
|
|
return 1;
|
|
};
|
|
ctx.strokeStyle = '#5bc0be';
|
|
ctx.lineWidth = 1.2;
|
|
if (samplesPerPixel < 4) {
|
|
// High-zoom continuous vector line rendering (#5bc0be Cornflower Blue)
|
|
const startSample = Math.max(0, Math.floor((drawXStart - xStart) / zoom * speed * buffer.sampleRate));
|
|
const endSample = Math.min(len, Math.ceil((drawXEnd - xStart) / zoom * speed * buffer.sampleRate));
|
|
ctx.beginPath();
|
|
let first = true;
|
|
const maxSamples = 50000;
|
|
const vectorStep = Math.max(1, Math.floor((endSample - startSample) / maxSamples));
|
|
for (let i = startSample; i < endSample; i += vectorStep) {
|
|
const timeInClip = i / buffer.sampleRate / speed;
|
|
const px = xStart + timeInClip * zoom;
|
|
const fadeGain = getFadeGainAtTime(timeInClip);
|
|
const volGain = getVolumeGainAtTime(px / zoom);
|
|
const totalGain = fadeGain * volGain;
|
|
const y = mid - data[i] * totalGain * peakRatio;
|
|
if (first) {
|
|
ctx.moveTo(px, y);
|
|
first = false;
|
|
} else {
|
|
ctx.lineTo(px, y);
|
|
}
|
|
}
|
|
ctx.stroke();
|
|
|
|
// Draw granular sample nodes only at extreme zoom (samplesPerPixel < 0.3)
|
|
if (samplesPerPixel < 0.3) {
|
|
const maxNodes = 5000;
|
|
const step = Math.max(1, Math.floor((endSample - startSample) / maxNodes));
|
|
ctx.fillStyle = '#6ee7b7';
|
|
let drawn = 0;
|
|
for (let i = startSample; i < endSample && drawn < maxNodes; i += step) {
|
|
const timeInClip = i / buffer.sampleRate / speed;
|
|
const px = xStart + timeInClip * zoom;
|
|
const fadeGain = getFadeGainAtTime(timeInClip);
|
|
const volGain = getVolumeGainAtTime(px / zoom);
|
|
const totalGain = fadeGain * volGain;
|
|
const y = mid - data[i] * totalGain * peakRatio;
|
|
ctx.fillRect(px - 1, y - 1, 2, 2);
|
|
drawn++;
|
|
}
|
|
}
|
|
} else {
|
|
// Coarse view vertical peak min/max bars
|
|
for (let px = drawXStart; px < drawXEnd; px++) {
|
|
const timeInClip = px / zoom * speed;
|
|
const sampleIdx = Math.floor(timeInClip * buffer.sampleRate);
|
|
const chunkSize = Math.max(1, Math.floor(samplesPerPixel));
|
|
const chunkStart = Math.max(0, sampleIdx - Math.floor(chunkSize / 2));
|
|
const chunkEnd = Math.min(len, chunkStart + chunkSize);
|
|
let fadeGain = getFadeGainAtTime(timeInClip);
|
|
const volGain = getVolumeGainAtTime(px / zoom);
|
|
const totalGain = fadeGain * volGain;
|
|
let maxVal = 0;
|
|
let minVal = 0;
|
|
for (let i = chunkStart; i < chunkEnd; i++) {
|
|
const val = data[i];
|
|
if (val > maxVal) maxVal = val;
|
|
if (val < minVal) minVal = val;
|
|
}
|
|
maxVal *= totalGain;
|
|
minVal *= totalGain;
|
|
const yTop = mid + minVal * peakRatio;
|
|
const yBottom = mid + maxVal * peakRatio;
|
|
ctx.beginPath();
|
|
ctx.moveTo(px, yTop);
|
|
ctx.lineTo(px, yBottom);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
// Volume: 0dB at 1/3 from top
|
|
const autoY = node => {
|
|
const db = typeof node === 'number' ? node : node.db;
|
|
const zeroY = clipTop + 1 / 3 * clipHeight;
|
|
return db >= 0 ? zeroY - db / 3 * (1 / 3 * clipHeight) : zeroY + -db / 30 * (2 / 3 * clipHeight);
|
|
};
|
|
// Panning: 0 at center
|
|
const autoPanY = node => {
|
|
const pan = typeof node === 'number' ? node : node.pan;
|
|
return clipTop + (1 - (pan + 1) / 2) * clipHeight;
|
|
};
|
|
|
|
// Helper: compute tangents for monotone Hermite spline
|
|
const computeTangents = (pts, yFn) => {
|
|
const n = pts.length;
|
|
if (n < 2) return [];
|
|
const m = new Array(n);
|
|
for (let i = 1; i < n - 1; i++) {
|
|
const hP = pts[i].time - pts[i - 1].time;
|
|
const hN = pts[i + 1].time - pts[i].time;
|
|
const sP = (yFn(pts[i]) - yFn(pts[i - 1])) / hP;
|
|
const sN = (yFn(pts[i + 1]) - yFn(pts[i])) / hN;
|
|
m[i] = (sP + sN) / 2;
|
|
}
|
|
m[0] = n > 1 ? (yFn(pts[1]) - yFn(pts[0])) / (pts[1].time - pts[0].time) : 0;
|
|
m[n - 1] = n > 1 ? (yFn(pts[n - 1]) - yFn(pts[n - 2])) / (pts[n - 1].time - pts[n - 2].time) : 0;
|
|
return m;
|
|
};
|
|
|
|
// Helper: evaluate Hermite at pixel position px
|
|
const hermiteY = (px, x0, y0, m0, x1, y1, m1) => {
|
|
const h = x1 - x0;
|
|
if (h <= 0) return y0;
|
|
const t = (px - x0) / h;
|
|
const t2 = t * t,
|
|
t3 = t2 * t;
|
|
return (2 * t3 - 3 * t2 + 1) * y0 + (t3 - 2 * t2 + t) * h * m0 + (-2 * t3 + 3 * t2) * y1 + (t3 - t2) * h * m1;
|
|
};
|
|
|
|
// Draw automation curve with Hermite spline
|
|
const drawSpline = (nodes, yFn, color, lineDash) => {
|
|
if (nodes.length < 2) {
|
|
if (nodes.length === 1) {
|
|
const px = nodes[0].time * zoom;
|
|
const y = yFn(nodes[0]);
|
|
ctx.fillStyle = color;
|
|
ctx.beginPath();
|
|
ctx.arc(px, y, 4, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
}
|
|
return;
|
|
}
|
|
const tangents = computeTangents(nodes, yFn);
|
|
ctx.strokeStyle = color;
|
|
ctx.lineWidth = 2;
|
|
ctx.setLineDash(lineDash || []);
|
|
ctx.beginPath();
|
|
for (let i = 0; i < nodes.length - 1; i++) {
|
|
const x0 = nodes[i].time * zoom,
|
|
y0 = yFn(nodes[i]);
|
|
const x1 = nodes[i + 1].time * zoom,
|
|
y1 = yFn(nodes[i + 1]);
|
|
const t0 = nodes[i].time,
|
|
t1 = nodes[i + 1].time;
|
|
const m0 = tangents[i],
|
|
m1 = tangents[i + 1];
|
|
for (let px = Math.floor(x0); px < Math.ceil(x1); px++) {
|
|
const t = px / zoom;
|
|
const y = hermiteY(t, t0, y0, m0, t1, y1, m1);
|
|
if (px === Math.floor(x0) && i === 0) ctx.moveTo(px, y);else ctx.lineTo(px, y);
|
|
}
|
|
}
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
|
|
// Draw node handles
|
|
nodes.forEach(n => {
|
|
const px = n.time * zoom,
|
|
y = yFn(n);
|
|
const isSelected = n.time === selectedNodeTime;
|
|
ctx.fillStyle = isSelected ? '#ffebb3' : '#fff';
|
|
ctx.beginPath();
|
|
ctx.arc(px, y, isSelected ? 6 : 4, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
ctx.strokeStyle = isSelected ? '#fbbf24' : color;
|
|
ctx.lineWidth = isSelected ? 2.5 : 1.5;
|
|
ctx.beginPath();
|
|
ctx.arc(px, y, isSelected ? 6 : 4, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
|
|
// Display value at node
|
|
ctx.fillStyle = '#ffffff';
|
|
ctx.font = 'bold 12px sans-serif';
|
|
const labelText = isPanMode ? n.pan > 0 ? 'R' + Math.round(n.pan * 100) : n.pan < 0 ? 'L' + Math.round(Math.abs(n.pan) * 100) : 'C' : `${n.db >= 0 ? '+' : ''}${n.db.toFixed(1)}dB`;
|
|
ctx.fillText(labelText, px + 8, y + 4);
|
|
});
|
|
};
|
|
drawSpline(volumeNodes, autoY, '#f43f5e');
|
|
drawSpline(panningNodes, autoPanY, '#a855f7', [4, 4]);
|
|
|
|
// ── Fade Curves (transparent, only curve lines + endpoint handles) ──
|
|
const FADE_COLOR = '#b91c1c';
|
|
const HANDLE_RADIUS = 5;
|
|
if (fadeInLen >= 0) {
|
|
const fiPx = fadeInLen * zoom;
|
|
if (fadeInLen > 0) {
|
|
ctx.strokeStyle = FADE_COLOR;
|
|
ctx.lineWidth = 1.8;
|
|
ctx.setLineDash([]);
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, clipTop + clipHeight);
|
|
for (let px = 0; px <= fiPx; px++) {
|
|
const ratio = px / fiPx;
|
|
const amp = (1 - Math.cos(Math.PI * ratio)) / 2;
|
|
const y = clipTop + clipHeight - amp * clipHeight;
|
|
ctx.lineTo(px, y);
|
|
}
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Endpoint handle (draggable)
|
|
const endX = fiPx,
|
|
endY = clipTop;
|
|
ctx.fillStyle = '#fff';
|
|
ctx.beginPath();
|
|
ctx.arc(endX, endY, HANDLE_RADIUS, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
ctx.strokeStyle = FADE_COLOR;
|
|
ctx.lineWidth = 1.5;
|
|
ctx.beginPath();
|
|
ctx.arc(endX, endY, HANDLE_RADIUS, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
// Label
|
|
ctx.fillStyle = '#b91c1c';
|
|
ctx.font = 'bold 7px sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText('FI', endX, endY - HANDLE_RADIUS - 3);
|
|
ctx.textAlign = 'start';
|
|
}
|
|
if (fadeOutLen >= 0) {
|
|
const foPx = fadeOutLen * zoom;
|
|
const startX = wClip - foPx;
|
|
if (fadeOutLen > 0) {
|
|
ctx.strokeStyle = FADE_COLOR;
|
|
ctx.lineWidth = 1.8;
|
|
ctx.setLineDash([]);
|
|
ctx.beginPath();
|
|
ctx.moveTo(startX, clipTop);
|
|
for (let px = 0; px <= foPx; px++) {
|
|
const ratio = px / foPx;
|
|
const amp = (1 + Math.cos(Math.PI * ratio)) / 2;
|
|
const y = clipTop + clipHeight - amp * clipHeight;
|
|
ctx.lineTo(startX + px, y);
|
|
}
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Endpoint handle (draggable)
|
|
const handleX = startX,
|
|
handleY = clipTop;
|
|
ctx.fillStyle = '#fff';
|
|
ctx.beginPath();
|
|
ctx.arc(handleX, handleY, HANDLE_RADIUS, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
ctx.strokeStyle = FADE_COLOR;
|
|
ctx.lineWidth = 1.5;
|
|
ctx.beginPath();
|
|
ctx.arc(handleX, handleY, HANDLE_RADIUS, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
ctx.fillStyle = '#b91c1c';
|
|
ctx.font = 'bold 7px sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText('FO', handleX, handleY - HANDLE_RADIUS - 3);
|
|
ctx.textAlign = 'start';
|
|
}
|
|
|
|
// Draw right-edge stretch handle indicator
|
|
if (wClip > 0 && wClip < drawWidth) {
|
|
ctx.strokeStyle = clipColor;
|
|
ctx.lineWidth = 1.5;
|
|
ctx.setLineDash([3, 3]);
|
|
ctx.beginPath();
|
|
ctx.moveTo(wClip + xStart, clipTop);
|
|
ctx.lineTo(wClip + xStart, clipTop + clipHeight);
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
}
|
|
|
|
// Highlight selection if active
|
|
if (selectionStart !== null && selectionEnd !== null && selectionStart !== selectionEnd) {
|
|
const left = Math.min(selectionStart, selectionEnd);
|
|
const right = Math.max(selectionStart, selectionEnd);
|
|
const leftPx = left * zoom;
|
|
const rightPx = right * zoom;
|
|
ctx.fillStyle = 'rgba(245, 158, 11, 0.15)';
|
|
ctx.fillRect(leftPx, 0, rightPx - leftPx, h);
|
|
ctx.strokeStyle = '#f59e0b';
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath();
|
|
ctx.moveTo(leftPx, 0);
|
|
ctx.lineTo(leftPx, h);
|
|
ctx.moveTo(rightPx, 0);
|
|
ctx.lineTo(rightPx, h);
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Draw playhead
|
|
if (currentTime !== null && currentTime >= 0 && currentTime <= buffer.duration / speed) {
|
|
const playheadPx = currentTime * zoom;
|
|
ctx.strokeStyle = '#ef4444';
|
|
ctx.lineWidth = 2;
|
|
ctx.beginPath();
|
|
ctx.moveTo(playheadPx, 0);
|
|
ctx.lineTo(playheadPx, h);
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Update TCP slider values in real-time to match the curve at currentTime
|
|
const volInput = document.getElementById(`tcp-vol-${subTabId}`);
|
|
const volLabel = document.getElementById(`tcp-vol-label-${subTabId}`);
|
|
if (volInput && volLabel) {
|
|
const dbVal = getVolumeDbAtTime(currentTime || 0);
|
|
volInput.value = dbVal.toFixed(1);
|
|
volLabel.textContent = `${dbVal.toFixed(1)}dB`;
|
|
}
|
|
const panInput = document.getElementById(`tcp-pan-${subTabId}`);
|
|
const panLabel = document.getElementById(`tcp-pan-label-${subTabId}`);
|
|
if (panInput && panLabel) {
|
|
const panVal = getPanningValueAtTime(currentTime || 0);
|
|
panInput.value = panVal;
|
|
panLabel.textContent = panVal > 0 ? 'R' : panVal < 0 ? 'L' : 'C';
|
|
const panLabelDetailed = document.getElementById(`tcp-pan-label-detailed-${subTabId}`);
|
|
if (panLabelDetailed) {
|
|
panLabelDetailed.textContent = panVal > 0 ? 'R' + panVal : panVal < 0 ? 'L' + Math.abs(panVal) : 'C';
|
|
}
|
|
}
|
|
}, [buffer, currentTime, selectionStart, selectionEnd, zoom, timelineWidth, color, name, speed, volumeNodes, panningNodes, fadeInLen, fadeOutLen, graphMode, selectedNodeTime, subTabId]);
|
|
const handleMouseDown = e => {
|
|
if (e.button === 2) return;
|
|
const canvas = canvasRef.current;
|
|
const rect = canvas.getBoundingClientRect();
|
|
const parent = canvas.parentElement;
|
|
const scrollContainer = parent ? parent.parentElement : null;
|
|
const scrollLeft = scrollContainer ? scrollContainer.scrollLeft : 0;
|
|
const bufDuration = buffer.duration;
|
|
const wallDuration = bufDuration / (speed || 1.0);
|
|
const mouseX = e.clientX - rect.left + scrollLeft;
|
|
const startTime = Math.max(0, Math.min(wallDuration, mouseX / zoom));
|
|
|
|
// Shift + Click range selection in SubTab Waveform
|
|
if (e.shiftKey) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const anchor = subTabAnchorRef.current !== null && subTabAnchorRef.current !== undefined ? subTabAnchorRef.current : selectionStart !== null && selectionStart !== undefined ? selectionStart : currentTime;
|
|
const selS = Math.min(anchor, startTime);
|
|
const selE = Math.max(anchor, startTime);
|
|
onSelectRange(selS, selE);
|
|
onPlayheadSet(startTime);
|
|
return;
|
|
}
|
|
|
|
// Alt+Click near right edge → speed stretch
|
|
if (e.altKey && onSpeedChange) {
|
|
const clipRightEdge = bufDuration / (speed || 1.0) * zoom;
|
|
const tolerance = 8;
|
|
if (Math.abs(mouseX - clipRightEdge) <= tolerance) {
|
|
isStretchingRef.current = true;
|
|
stretchStartRef.current = {
|
|
mouseX,
|
|
originalDuration: bufDuration,
|
|
originalSpeed: speed
|
|
};
|
|
canvas.style.cursor = 'ew-resize';
|
|
const handleMouseMove = moveEvent => {
|
|
const currentX = moveEvent.clientX - rect.left + scrollLeft;
|
|
const wClipPx = stretchStartRef.current.originalDuration / stretchStartRef.current.originalSpeed * zoom;
|
|
const deltaX = currentX - stretchStartRef.current.mouseX;
|
|
const newWClip = Math.max(10, wClipPx + deltaX);
|
|
const newSpeed = stretchStartRef.current.originalDuration / (newWClip / zoom);
|
|
if (onSpeedChange) onSpeedChange(Math.max(0.05, Math.min(10, newSpeed)));
|
|
};
|
|
const handleMouseUp = () => {
|
|
isStretchingRef.current = false;
|
|
canvas.style.cursor = 'default';
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
};
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Mode toggle button click (bottom-right VOL/PAN)
|
|
const wClipPx = bufDuration / (speed || 1.0) * zoom;
|
|
const cTop = 8;
|
|
const cSize = 16;
|
|
const cHeight = rect.height - 16;
|
|
const modeBtnX = wClipPx - 28 - 4;
|
|
const modeBtnY = cTop + cHeight - 14 - 2;
|
|
if (mouseX >= modeBtnX && mouseX <= modeBtnX + 28 && e.clientY - rect.top >= modeBtnY && e.clientY - rect.top <= modeBtnY + 14) {
|
|
if (onModeToggle) onModeToggle();
|
|
return;
|
|
}
|
|
|
|
// Fade endpoint handle drag (click on FI/FO handle circles)
|
|
const HANDLE_R = 5;
|
|
const fiEndPx = fadeInLen * zoom;
|
|
const foStartPx = wClipPx - fadeOutLen * zoom;
|
|
const distToFiHandle = Math.abs(mouseX - fiEndPx) + Math.abs(e.clientY - rect.top - cTop);
|
|
const distToFoHandle = Math.abs(mouseX - foStartPx) + Math.abs(e.clientY - rect.top - cTop);
|
|
if (distToFiHandle <= HANDLE_R + 6) {
|
|
const handleMouseMove = moveEvent => {
|
|
const x = moveEvent.clientX - rect.left + scrollLeft;
|
|
const t = Math.max(0, Math.min(wallDuration, x / zoom));
|
|
if (onUpdateFade) onUpdateFade({
|
|
fadeInLen: t
|
|
});
|
|
};
|
|
const handleMouseUp = () => {
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
};
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
return;
|
|
}
|
|
if (distToFoHandle <= HANDLE_R + 6) {
|
|
const handleMouseMove = moveEvent => {
|
|
const x = moveEvent.clientX - rect.left + scrollLeft;
|
|
const t = Math.max(0, Math.min(wallDuration, (wClipPx - x) / zoom));
|
|
if (onUpdateFade) onUpdateFade({
|
|
fadeOutLen: t
|
|
});
|
|
};
|
|
const handleMouseUp = () => {
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
};
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
return;
|
|
}
|
|
|
|
// Tool-specific behavior
|
|
if (activeTool === 'grab') {
|
|
setSelectedNodeTime(null);
|
|
onPlayheadSet(startTime);
|
|
const handleMouseMove = moveEvent => {
|
|
const currentX = moveEvent.clientX - rect.left + scrollLeft;
|
|
const ct = Math.max(0, Math.min(wallDuration, currentX / zoom));
|
|
onPlayheadSet(ct);
|
|
};
|
|
const handleMouseUp = () => {
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
};
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
return;
|
|
}
|
|
if (activeTool === 'razor') {
|
|
setSelectedNodeTime(null);
|
|
onPlayheadSet(startTime);
|
|
showToast(`Cut point at ${formatTime(startTime)}`, 'info');
|
|
return;
|
|
}
|
|
if (activeTool === 'pen') {
|
|
// Deduplicate by time: keep last occurrence per time key
|
|
const mergeNodes = (existing, incoming) => {
|
|
const map = new Map();
|
|
existing.forEach(n => map.set(n.time, n));
|
|
incoming.forEach(n => map.set(n.time, n));
|
|
return Array.from(map.values()).sort((a, b) => a.time - b.time);
|
|
};
|
|
onPlayheadSet(startTime);
|
|
canvas.style.cursor = 'crosshair';
|
|
const isPan = (graphMode || 'volume') === 'pan';
|
|
const isCtrl = e.ctrlKey || e.metaKey;
|
|
const cTop = 8;
|
|
const cHeight = rect.height - 16;
|
|
const curNodes = isPan ? panningNodes : volumeNodes;
|
|
const valFromY = y => {
|
|
if (isPan) return Math.max(-1, Math.min(1, -(y - cTop) / cHeight * 2 + 1));
|
|
const yOff = (y - cTop) / cHeight;
|
|
return yOff <= 1 / 3 ? Math.max(0, Math.min(3, 3 * (1 - yOff * 3))) : Math.max(-30, Math.min(0, -30 * (yOff - 1 / 3) * (3 / 2)));
|
|
};
|
|
const snapVal = v => isPan ? Math.round(v * 20) / 20 : Math.round(v * 2) / 2;
|
|
const snapTime = t => Math.round(t * 10) / 10;
|
|
|
|
// Check if clicking near existing node (any mode)
|
|
const volNodeY = v => {
|
|
const z = cTop + 1 / 3 * cHeight;
|
|
return v >= 0 ? z - v / 3 * (1 / 3 * cHeight) : z + -v / 30 * (2 / 3 * cHeight);
|
|
};
|
|
const nearNode = curNodes.findIndex(n => {
|
|
const t = Math.abs(n.time - startTime);
|
|
const val = isPan ? n.pan : n.db;
|
|
const ny = isPan ? cTop + (1 - (val + 1) / 2) * cHeight : volNodeY(val);
|
|
const dy = Math.abs(e.clientY - rect.top - ny);
|
|
return t < 0.1 / (speed || 1) && dy < 10;
|
|
});
|
|
if (nearNode >= 0) {
|
|
// Drag existing node
|
|
setSelectedNodeTime(curNodes[nearNode].time);
|
|
let working = [...curNodes];
|
|
let dragIdx = nearNode;
|
|
const handleMouseMove = moveEvent => {
|
|
const currentX = moveEvent.clientX - rect.left + scrollLeft;
|
|
const ct = Math.max(0, Math.min(wallDuration, currentX / zoom));
|
|
const val = snapVal(valFromY(moveEvent.clientY - rect.top));
|
|
const updated = isPan ? {
|
|
time: Math.min(snapTime(ct), wallDuration),
|
|
pan: val
|
|
} : {
|
|
time: Math.min(snapTime(ct), wallDuration),
|
|
db: val
|
|
};
|
|
const cleaned = mergeNodes(working.filter((_, i) => i !== dragIdx), [updated]);
|
|
if (onUpdateNodes) onUpdateNodes(cleaned);
|
|
working = [...cleaned];
|
|
dragIdx = working.findIndex(n => n.time === updated.time && (isPan ? n.pan === updated.pan : n.db === updated.db));
|
|
// Follow the selected node during dragging
|
|
setSelectedNodeTime(updated.time);
|
|
};
|
|
const handleMouseUp = () => {
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
canvas.style.cursor = 'crosshair';
|
|
};
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
return;
|
|
}
|
|
if (isCtrl) {
|
|
setSelectedNodeTime(null);
|
|
const pts = [];
|
|
let lastKey = '';
|
|
const handleMouseMove = moveEvent => {
|
|
const currentX = moveEvent.clientX - rect.left + scrollLeft;
|
|
const ct = Math.max(0, Math.min(wallDuration, currentX / zoom));
|
|
const t = +snapTime(ct).toFixed(3);
|
|
const v = isPan ? +snapVal(valFromY(moveEvent.clientY - rect.top)).toFixed(2) : +snapVal(valFromY(moveEvent.clientY - rect.top)).toFixed(1);
|
|
const key = t + '|' + v;
|
|
if (key !== lastKey) {
|
|
pts.push({
|
|
time: t,
|
|
[isPan ? 'pan' : 'db']: v
|
|
});
|
|
lastKey = key;
|
|
}
|
|
};
|
|
const handleMouseUp = () => {
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
canvas.style.cursor = 'crosshair';
|
|
const merged = mergeNodes(curNodes, pts);
|
|
if (onUpdateNodes) onUpdateNodes(merged);
|
|
};
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
} else {
|
|
const newNode = isPan ? {
|
|
time: +snapTime(startTime).toFixed(3),
|
|
pan: +snapVal(valFromY(e.clientY - rect.top)).toFixed(2)
|
|
} : {
|
|
time: +snapTime(startTime).toFixed(3),
|
|
db: +snapVal(valFromY(e.clientY - rect.top)).toFixed(1)
|
|
};
|
|
setSelectedNodeTime(newNode.time);
|
|
const merged = mergeNodes(curNodes, [newNode]);
|
|
if (onUpdateNodes) onUpdateNodes(merged);
|
|
|
|
// Now drag this newly created node
|
|
let working = [...merged];
|
|
let dragIdx = working.findIndex(n => n.time === newNode.time && (isPan ? n.pan === newNode.pan : n.db === newNode.db));
|
|
const handleMouseMove = moveEvent => {
|
|
const currentX = moveEvent.clientX - rect.left + scrollLeft;
|
|
const ct = Math.max(0, Math.min(wallDuration, currentX / zoom));
|
|
const val = snapVal(valFromY(moveEvent.clientY - rect.top));
|
|
const updated = isPan ? {
|
|
time: Math.min(snapTime(ct), wallDuration),
|
|
pan: val
|
|
} : {
|
|
time: Math.min(snapTime(ct), wallDuration),
|
|
db: val
|
|
};
|
|
const cleaned = mergeNodes(working.filter((_, i) => i !== dragIdx), [updated]);
|
|
if (onUpdateNodes) onUpdateNodes(cleaned);
|
|
working = [...cleaned];
|
|
dragIdx = working.findIndex(n => n.time === updated.time && (isPan ? n.pan === updated.pan : n.db === updated.db));
|
|
setSelectedNodeTime(updated.time);
|
|
};
|
|
const handleMouseUp = () => {
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
canvas.style.cursor = 'crosshair';
|
|
};
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Select tool (default): drag to select range
|
|
subTabAnchorRef.current = startTime;
|
|
setSelectedNodeTime(null);
|
|
onSelectRange(startTime, startTime);
|
|
onPlayheadSet(startTime);
|
|
const handleMouseMove = moveEvent => {
|
|
const currentX = moveEvent.clientX - rect.left + scrollLeft;
|
|
const ct = Math.max(0, Math.min(wallDuration, currentX / zoom));
|
|
const anchor = subTabAnchorRef.current ?? startTime;
|
|
onSelectRange(Math.min(anchor, ct), Math.max(anchor, ct));
|
|
};
|
|
const handleMouseUp = () => {
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
};
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
};
|
|
const handleContextMenuInternal = e => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const canvas = canvasRef.current;
|
|
const rect = canvas.getBoundingClientRect();
|
|
const parent = canvas.parentElement;
|
|
const scrollContainer = parent ? parent.parentElement : null;
|
|
const scrollLeft = scrollContainer ? scrollContainer.scrollLeft : 0;
|
|
const x = e.clientX - rect.left + scrollLeft;
|
|
const clickTime = Math.max(0, Math.min(buffer.duration / (speed || 1.0), x / zoom));
|
|
onContextMenu(e, clickTime);
|
|
};
|
|
|
|
// Double-click on automation curve to create a new node
|
|
const handleDoubleClick = e => {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas || !buffer) return;
|
|
if (activeTool !== 'select' && activeTool !== 'pen') return;
|
|
const rect = canvas.getBoundingClientRect();
|
|
const parent = canvas.parentElement;
|
|
const scrollContainer = parent ? parent.parentElement : null;
|
|
const scrollLeft = scrollContainer ? scrollContainer.scrollLeft : 0;
|
|
const x = e.clientX - rect.left + scrollLeft;
|
|
const clickTime = Math.max(0, Math.min(buffer.duration / (speed || 1.0), x / zoom));
|
|
const isPan = (graphMode || 'volume') === 'pan';
|
|
const curNodes = isPan ? panningNodes : volumeNodes;
|
|
const cTop = 8;
|
|
const cHeight = rect.height - 16;
|
|
const valFromY = y => {
|
|
if (isPan) return Math.max(-1, Math.min(1, -(y - cTop) / cHeight * 2 + 1));
|
|
const yOff = (y - cTop) / cHeight;
|
|
return yOff <= 2 / 3 ? Math.max(0, Math.min(3, 3 * (1 - yOff * 3 / 2))) : Math.max(-30, Math.min(0, -30 * (yOff - 2 / 3) * 3));
|
|
};
|
|
|
|
// Interpolate value at click position from existing curve
|
|
let interpolatedVal = valFromY(e.clientY - rect.top);
|
|
if (curNodes.length >= 2) {
|
|
const sorted = [...curNodes].sort((a, b) => a.time - b.time);
|
|
for (let i = 0; i < sorted.length - 1; i++) {
|
|
if (clickTime >= sorted[i].time && clickTime <= sorted[i + 1].time) {
|
|
const t = (clickTime - sorted[i].time) / (sorted[i + 1].time - sorted[i].time);
|
|
const v1 = isPan ? sorted[i].pan : sorted[i].db;
|
|
const v2 = isPan ? sorted[i + 1].pan : sorted[i + 1].db;
|
|
interpolatedVal = v1 + t * (v2 - v1);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
const newNode = isPan ? {
|
|
time: +Math.round(clickTime * 10) / 10,
|
|
pan: +Math.round(interpolatedVal * 20) / 20
|
|
} : {
|
|
time: +Math.round(clickTime * 10) / 10,
|
|
db: +Math.round(interpolatedVal * 2) / 2
|
|
};
|
|
const merged = (() => {
|
|
const map = new Map();
|
|
curNodes.forEach(n => map.set(n.time, n));
|
|
map.set(newNode.time, newNode);
|
|
return Array.from(map.values()).sort((a, b) => a.time - b.time);
|
|
})();
|
|
if (onUpdateNodes) onUpdateNodes(merged);
|
|
};
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
width: `${timelineWidth}px`,
|
|
height: '100%',
|
|
position: 'relative',
|
|
overflow: 'hidden'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("canvas", {
|
|
ref: canvasRef,
|
|
style: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
imageRendering: 'pixelated'
|
|
},
|
|
className: "cursor-crosshair rounded border border-zinc-800",
|
|
onMouseDown: handleMouseDown,
|
|
onDoubleClick: handleDoubleClick,
|
|
onContextMenu: handleContextMenuInternal,
|
|
onMouseMove: e => {
|
|
if (canvasRef.current && e.altKey && onSpeedChange) {
|
|
const rect = canvasRef.current.getBoundingClientRect();
|
|
const parent = canvasRef.current.parentElement;
|
|
const scrollContainer = parent ? parent.parentElement : null;
|
|
const scrollLeft = scrollContainer ? scrollContainer.scrollLeft : 0;
|
|
const mx = e.clientX - rect.left + scrollLeft;
|
|
const wClip = buffer.duration / speed * zoom;
|
|
const tolerance = 8;
|
|
canvasRef.current.style.cursor = Math.abs(mx - wClip) <= tolerance && !isStretchingRef.current ? 'ew-resize' : 'crosshair';
|
|
} else if (canvasRef.current && !isStretchingRef.current) {
|
|
const rect = canvasRef.current.getBoundingClientRect();
|
|
const parent = canvasRef.current.parentElement;
|
|
const scrollContainer = parent ? parent.parentElement : null;
|
|
const scrollLeft = scrollContainer ? scrollContainer.scrollLeft : 0;
|
|
const mx = e.clientX - rect.left + scrollLeft;
|
|
const wClipPx = buffer.duration / (speed || 1.0) * zoom;
|
|
const cH = canvasRef.current.height / (window.devicePixelRatio || 1) - 16;
|
|
const btnX = wClipPx - 28 - 4;
|
|
const btnY = 8 + cH - 14 - 2;
|
|
const overBtn = mx >= btnX && mx <= btnX + 28 && e.clientY - rect.top >= btnY && e.clientY - rect.top <= btnY + 14;
|
|
canvasRef.current.style.cursor = overBtn ? 'pointer' : 'crosshair';
|
|
}
|
|
}
|
|
}));
|
|
};
|
|
const SubTabToolbar = ({
|
|
st,
|
|
activeTool,
|
|
setActiveTool,
|
|
handleSubTabNormalizeWithValue,
|
|
handleSubTabGainWithValue,
|
|
handleSubTabPitch,
|
|
handleSubTabStretch,
|
|
handleSubTabFade,
|
|
onPlayPause,
|
|
onStop,
|
|
onRewind,
|
|
onForward,
|
|
onLoop,
|
|
onRecord,
|
|
onRateChange,
|
|
onCut,
|
|
onCopy,
|
|
onPaste,
|
|
onGlue,
|
|
snapValue,
|
|
onSnapChange
|
|
}) => {
|
|
const isPlaying = st?.isPlaying || false;
|
|
const isLooping = st?.isLooping || false;
|
|
const isRecording = st?.isRecording || false;
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: "daw-header flex h-16 items-center px-4 border-b daw-border gap-3 bg-zinc-800"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center space-x-1 border-r border-zinc-700 pr-3"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
className: `p-1 rounded ${activeTool === 'select' ? 'bg-cyan-700' : 'bg-zinc-700'}`,
|
|
onClick: () => setActiveTool('select'),
|
|
title: "Select Tool"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "mouse-pointer",
|
|
className: "w-4 h-4"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
className: `p-1 rounded ${activeTool === 'grab' ? 'bg-cyan-700' : 'bg-zinc-700'}`,
|
|
onClick: () => setActiveTool('grab'),
|
|
title: "Grab Tool"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "hand",
|
|
className: "w-4 h-4"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
className: `p-1 rounded ${activeTool === 'razor' ? 'bg-cyan-700' : 'bg-zinc-700'}`,
|
|
onClick: () => setActiveTool('razor'),
|
|
title: "Razor Tool"
|
|
}, /*#__PURE__*/React.createElement("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"
|
|
}, /*#__PURE__*/React.createElement("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"
|
|
}), /*#__PURE__*/React.createElement("path", {
|
|
d: "M4 9h16l-3 9H7z"
|
|
}), /*#__PURE__*/React.createElement("circle", {
|
|
cx: "12",
|
|
cy: "6",
|
|
r: "1"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
className: `p-1 rounded ${activeTool === 'pen' ? 'bg-cyan-700' : 'bg-zinc-700'}`,
|
|
onClick: () => setActiveTool('pen'),
|
|
title: "Pen Tool"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "pen-tool",
|
|
className: "w-4 h-4"
|
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
className: "w-[1px] h-4 bg-zinc-800 mx-0.5"
|
|
}), /*#__PURE__*/React.createElement("button", {
|
|
onClick: onGlue,
|
|
className: "p-0.5 rounded text-zinc-400 hover:bg-zinc-800 hover:text-purple-400 transition",
|
|
title: "Glue Clips"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "link",
|
|
className: "w-3.5 h-3.5"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: onCut,
|
|
className: "p-0.5 rounded text-zinc-400 hover:bg-zinc-800 hover:text-red-400 transition",
|
|
title: "Cut (Ctrl+X)"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "scissors",
|
|
className: "w-3.5 h-3.5"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: onCopy,
|
|
className: "p-0.5 rounded text-zinc-400 hover:bg-zinc-800 hover:text-blue-400 transition",
|
|
title: "Copy (Ctrl+C)"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "copy",
|
|
className: "w-3.5 h-3.5"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: onPaste,
|
|
className: "p-0.5 rounded text-zinc-400 hover:bg-zinc-800 hover:text-emerald-400 transition",
|
|
title: "Paste (Ctrl+V)"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "clipboard",
|
|
className: "w-3.5 h-3.5"
|
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-1 border-r border-zinc-700 pr-3"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs text-zinc-500 font-bold uppercase"
|
|
}, "Snap"), /*#__PURE__*/React.createElement("select", {
|
|
value: snapValue || 'free',
|
|
onChange: e => onSnapChange(e.target.value),
|
|
className: "bg-zinc-850 text-zinc-300 text-xs px-1 py-0.5 rounded border border-zinc-800 focus:outline-none font-mono"
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: "free"
|
|
}, "Free"), /*#__PURE__*/React.createElement("option", {
|
|
value: "1"
|
|
}, "1"), /*#__PURE__*/React.createElement("option", {
|
|
value: "1/2"
|
|
}, "1/2"), /*#__PURE__*/React.createElement("option", {
|
|
value: "1/4"
|
|
}, "1/4"), /*#__PURE__*/React.createElement("option", {
|
|
value: "1/8"
|
|
}, "1/8"), /*#__PURE__*/React.createElement("option", {
|
|
value: "1/16"
|
|
}, "1/16"), /*#__PURE__*/React.createElement("option", {
|
|
value: "1/32"
|
|
}, "1/32"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center space-x-2 flex-1 overflow-x-auto no-scrollbar"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs text-zinc-400"
|
|
}, "Normalize:"), /*#__PURE__*/React.createElement("input", {
|
|
type: "range",
|
|
min: "-12",
|
|
max: "0",
|
|
value: st.effects?.normalizeDb || 0,
|
|
step: "0.1",
|
|
onChange: e => handleSubTabNormalizeWithValue(st.id, parseFloat(e.target.value)),
|
|
className: "w-20 h-1.5"
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs text-zinc-500 w-10 text-right"
|
|
}, st.effects?.normalizeDb || 0, " dB")), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs text-zinc-400"
|
|
}, "Gain:"), /*#__PURE__*/React.createElement("input", {
|
|
type: "range",
|
|
min: "-40",
|
|
max: "24",
|
|
value: st.effects?.gainDb || 0,
|
|
step: "0.1",
|
|
onChange: e => handleSubTabGainWithValue(st.id, parseFloat(e.target.value)),
|
|
className: "w-20 h-1.5"
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs text-zinc-500 w-10 text-right"
|
|
}, st.effects?.gainDb || 0, " dB")), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs text-zinc-400"
|
|
}, "Pitch:"), /*#__PURE__*/React.createElement("input", {
|
|
type: "range",
|
|
min: "-12",
|
|
max: "12",
|
|
value: st.effects?.pitch || 0,
|
|
step: "0.1",
|
|
onChange: e => handleSubTabPitch(st.id, parseFloat(e.target.value)),
|
|
className: "w-20 h-1.5"
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs text-zinc-500 w-10 text-right"
|
|
}, st.effects?.pitch || 0, " st")), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs text-zinc-400"
|
|
}, "Stretch:"), /*#__PURE__*/React.createElement("input", {
|
|
type: "range",
|
|
min: "50",
|
|
max: "200",
|
|
value: st.effects?.speedStretch || 100,
|
|
step: "1",
|
|
onChange: e => handleSubTabStretch(st.id, parseInt(e.target.value)),
|
|
className: "w-20 h-1.5"
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs text-zinc-500 w-10 text-right"
|
|
}, st.effects?.speedStretch || 100, "%"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center space-x-1 border-r border-zinc-700 pr-3"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => handleSubTabFade(st.id, 'in'),
|
|
className: "px-2 py-1 text-xs rounded hover:bg-zinc-700"
|
|
}, "Fade In"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => handleSubTabFade(st.id, 'out'),
|
|
className: "px-2 py-1 text-xs rounded hover:bg-zinc-700"
|
|
}, "Fade Out")), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center space-x-1 border-r border-zinc-700 pr-3"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
onClick: onRewind,
|
|
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: "Rewind"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "skip-back",
|
|
className: "w-4 h-4"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: onPlayPause,
|
|
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 ? "Pause" : "Play"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": isPlaying ? 'pause' : 'play',
|
|
className: "w-4 h-4 fill-current"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: onStop,
|
|
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"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "square",
|
|
className: "w-4 h-4 fill-current"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: onForward,
|
|
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: "Forward"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "skip-forward",
|
|
className: "w-4 h-4"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: onLoop,
|
|
className: `w-8 h-8 flex items-center justify-center rounded border transition ${isLooping ? '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: isLooping ? "Loop On" : "Loop Off"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "repeat",
|
|
className: "w-4 h-4"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: onRecord,
|
|
className: `w-8 h-8 flex items-center justify-center rounded border transition ${isRecording ? 'bg-red-600 text-white border-red-500' : 'bg-zinc-800 text-zinc-200 border-zinc-700 hover:bg-zinc-700'}`,
|
|
title: isRecording ? "Recording" : "Record"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "circle",
|
|
className: "w-4 h-4"
|
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center space-x-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs text-zinc-400"
|
|
}, "Rate:"), /*#__PURE__*/React.createElement("select", {
|
|
value: st.playbackRate || 1,
|
|
onChange: e => onRateChange(parseFloat(e.target.value)),
|
|
className: "bg-zinc-700 text-zinc-100 text-xs px-1 py-0.5 rounded border border-zinc-600"
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: "0.5"
|
|
}, "0.5x"), /*#__PURE__*/React.createElement("option", {
|
|
value: "0.75"
|
|
}, "0.75x"), /*#__PURE__*/React.createElement("option", {
|
|
value: "1"
|
|
}, "1x"), /*#__PURE__*/React.createElement("option", {
|
|
value: "1.25"
|
|
}, "1.25x"), /*#__PURE__*/React.createElement("option", {
|
|
value: "1.5"
|
|
}, "1.5x"), /*#__PURE__*/React.createElement("option", {
|
|
value: "2"
|
|
}, "2x"))));
|
|
};
|
|
|
|
// ── Graph Editor Canvas for Volume/Pan/Fade Automation ──
|
|
const GraphEditorCanvas = ({
|
|
buffer,
|
|
zoom,
|
|
timelineWidth,
|
|
volumeNodes,
|
|
panningNodes,
|
|
fadeInLen,
|
|
fadeOutLen,
|
|
onUpdateNodes,
|
|
graphMode
|
|
}) => {
|
|
const canvasRef = useRef(null);
|
|
const isDraggingNode = useRef(false);
|
|
const dragNodeIdx = useRef(-1);
|
|
const isCreatingNode = useRef(false);
|
|
const getNodes = () => graphMode === 'pan' ? panningNodes : volumeNodes;
|
|
const nodeLabel = n => graphMode === 'pan' ? `${n.pan.toFixed(2)}` : `${n.db.toFixed(1)}dB`;
|
|
const nodeY = (n, h) => {
|
|
if (graphMode === 'pan') return (1 - (n.pan + 1) / 2) * h;
|
|
const zeroY = 2 / 3 * h;
|
|
return n.db >= 0 ? zeroY - n.db / 3 * (2 / 3 * h) : zeroY + -n.db / 30 * (1 / 3 * h);
|
|
};
|
|
const nodeValFromY = (y, h) => {
|
|
if (graphMode === 'pan') return -(y / h * 2 - 1);
|
|
const yOff = y / h;
|
|
return yOff <= 2 / 3 ? 3 * (1 - yOff * 3 / 2) : -30 * (yOff - 2 / 3) * 3;
|
|
};
|
|
useEffect(() => {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas || !buffer) return;
|
|
const ctx = canvas.getContext('2d');
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const wrapper = canvas.parentElement ? canvas.parentElement.parentElement : null;
|
|
const scrollLeft = wrapper ? wrapper.scrollLeft : 0;
|
|
const vWidth = wrapper ? wrapper.clientWidth : 1200;
|
|
const drawWidth = Math.min(timelineWidth, Math.max(vWidth, 1200));
|
|
const h = canvas.parentElement ? canvas.parentElement.clientHeight : 200;
|
|
canvas.width = Math.round(drawWidth * dpr);
|
|
canvas.height = Math.round(h * dpr);
|
|
ctx.scale(dpr, dpr);
|
|
ctx.imageSmoothingEnabled = false;
|
|
canvas.style.position = 'absolute';
|
|
canvas.style.left = `${scrollLeft}px`;
|
|
canvas.style.width = `${drawWidth}px`;
|
|
canvas.style.height = `${h}px`;
|
|
ctx.fillStyle = '#1a1a2e';
|
|
ctx.fillRect(0, 0, drawWidth, h);
|
|
ctx.strokeStyle = '#2a2a4e';
|
|
ctx.lineWidth = 0.5;
|
|
for (let t = 0; t <= buffer.duration; t += 0.5) {
|
|
const x = t / buffer.duration * drawWidth;
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, 0);
|
|
ctx.lineTo(x, h);
|
|
ctx.stroke();
|
|
}
|
|
for (let i = 0; i <= 10; i++) {
|
|
const y = i / 10 * h;
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, y);
|
|
ctx.lineTo(drawWidth, y);
|
|
ctx.stroke();
|
|
}
|
|
if (fadeInLen > 0) {
|
|
const fadeX = fadeInLen / buffer.duration * drawWidth;
|
|
ctx.fillStyle = 'rgba(16, 185, 129, 0.12)';
|
|
ctx.fillRect(0, 0, fadeX, h);
|
|
}
|
|
if (fadeOutLen > 0) {
|
|
const fadeX = (buffer.duration - fadeOutLen) / buffer.duration * drawWidth;
|
|
const fadeW = fadeOutLen / buffer.duration * drawWidth;
|
|
ctx.fillStyle = 'rgba(239, 68, 68, 0.12)';
|
|
ctx.fillRect(fadeX, 0, fadeW, h);
|
|
}
|
|
const nodes = getNodes();
|
|
if (nodes.length > 0) {
|
|
ctx.strokeStyle = graphMode === 'pan' ? '#a855f7' : '#06b6d4';
|
|
ctx.lineWidth = 2;
|
|
ctx.beginPath();
|
|
nodes.forEach((n, i) => {
|
|
const x = n.time / buffer.duration * drawWidth;
|
|
const y = nodeY(n, h);
|
|
if (i === 0) ctx.moveTo(x, y);else ctx.lineTo(x, y);
|
|
});
|
|
ctx.stroke();
|
|
nodes.forEach((n, i) => {
|
|
const x = n.time / buffer.duration * drawWidth;
|
|
const y = nodeY(n, h);
|
|
ctx.fillStyle = graphMode === 'pan' ? '#a855f7' : '#06b6d4';
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, 5, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
ctx.fillStyle = '#e4e4e7';
|
|
ctx.font = '9px monospace';
|
|
ctx.fillText(nodeLabel(n), x + 8, y + 3);
|
|
});
|
|
} else {
|
|
ctx.fillStyle = '#52525b';
|
|
ctx.font = '11px sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(graphMode === 'pan' ? 'Click to add Pan points' : 'Click to add Volume points', drawWidth / 2, h / 2);
|
|
ctx.textAlign = 'start';
|
|
}
|
|
const zeroY = graphMode === 'pan' ? h / 2 : nodeY({
|
|
db: 0
|
|
}, h);
|
|
ctx.strokeStyle = graphMode === 'pan' ? '#a855f744' : '#06b6d444';
|
|
ctx.lineWidth = 1;
|
|
ctx.setLineDash([4, 4]);
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, zeroY);
|
|
ctx.lineTo(drawWidth, zeroY);
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
}, [buffer, zoom, timelineWidth, volumeNodes, panningNodes, fadeInLen, fadeOutLen, graphMode]);
|
|
const handleMouseDown = e => {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas || !buffer) return;
|
|
const rect = canvas.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
const time = x / rect.width * buffer.duration;
|
|
const val = nodeValFromY(y, rect.height);
|
|
const nodes = getNodes();
|
|
const snapped = Math.max(-30, Math.min(3, val));
|
|
const snappedPan = Math.max(-1, Math.min(1, val));
|
|
const threshold = 12 / rect.width * buffer.duration;
|
|
const nearIdx = nodes.findIndex(n => Math.abs(n.time - time) < threshold);
|
|
if (nearIdx >= 0) {
|
|
isDraggingNode.current = true;
|
|
dragNodeIdx.current = nearIdx;
|
|
return;
|
|
}
|
|
const newNode = graphMode === 'pan' ? {
|
|
time: +time.toFixed(3),
|
|
pan: +snappedPan.toFixed(2)
|
|
} : {
|
|
time: +time.toFixed(3),
|
|
db: +snapped.toFixed(1)
|
|
};
|
|
const sorted = [...nodes, newNode].sort((a, b) => a.time - b.time);
|
|
onUpdateNodes(sorted);
|
|
const newIdx = sorted.findIndex(n => n.time === newNode.time && (graphMode === 'pan' ? n.pan : n.db) === (graphMode === 'pan' ? newNode.pan : newNode.db));
|
|
isDraggingNode.current = true;
|
|
dragNodeIdx.current = newIdx;
|
|
isCreatingNode.current = true;
|
|
};
|
|
const handleMouseMove = e => {
|
|
if (!isDraggingNode.current || dragNodeIdx.current < 0) return;
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
const rect = canvas.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
const time = Math.max(0, Math.min(buffer.duration, x / rect.width * buffer.duration));
|
|
const val = nodeValFromY(y, rect.height);
|
|
const nodes = [...getNodes()];
|
|
nodes[dragNodeIdx.current] = graphMode === 'pan' ? {
|
|
time: +time.toFixed(3),
|
|
pan: +Math.max(-1, Math.min(1, val)).toFixed(2)
|
|
} : {
|
|
time: +time.toFixed(3),
|
|
db: +Math.max(-30, Math.min(3, val)).toFixed(1)
|
|
};
|
|
onUpdateNodes(nodes.sort((a, b) => a.time - b.time));
|
|
};
|
|
const handleMouseUp = () => {
|
|
isDraggingNode.current = false;
|
|
dragNodeIdx.current = -1;
|
|
isCreatingNode.current = false;
|
|
};
|
|
const handleContextMenu = e => {
|
|
e.preventDefault();
|
|
const canvas = canvasRef.current;
|
|
if (!canvas || !buffer) return;
|
|
const rect = canvas.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const time = x / rect.width * buffer.duration;
|
|
const threshold = 12 / rect.width * buffer.duration;
|
|
const nodes = getNodes();
|
|
const nearIdx = nodes.findIndex(n => Math.abs(n.time - time) < threshold);
|
|
if (nearIdx >= 0) onUpdateNodes(nodes.filter((_, i) => i !== nearIdx));
|
|
};
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
width: `${timelineWidth}px`,
|
|
height: '100%',
|
|
position: 'relative',
|
|
overflow: 'hidden'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("canvas", {
|
|
ref: canvasRef,
|
|
style: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
imageRendering: 'pixelated'
|
|
},
|
|
className: "cursor-crosshair rounded border border-zinc-700",
|
|
onMouseDown: handleMouseDown,
|
|
onMouseMove: handleMouseMove,
|
|
onMouseUp: handleMouseUp,
|
|
onMouseLeave: handleMouseUp,
|
|
onContextMenu: handleContextMenu
|
|
}));
|
|
};
|
|
const AuthModal = ({
|
|
isOpen,
|
|
mode,
|
|
forceMandatory,
|
|
onClose,
|
|
onSuccess
|
|
}) => {
|
|
if (!isOpen) return null;
|
|
const [activeTab, setActiveTab] = useState(mode || 'login');
|
|
const [username, setUsername] = useState('admin');
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [oldPassword, setOldPassword] = useState('');
|
|
const [newPassword, setNewPassword] = useState('');
|
|
const [error, setError] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
useEffect(() => {
|
|
if (mode) setActiveTab(mode);
|
|
if (mode === 'force_change' && !oldPassword) {
|
|
setOldPassword('admin123');
|
|
}
|
|
}, [mode]);
|
|
const handleSubmit = async e => {
|
|
e.preventDefault();
|
|
setError('');
|
|
setLoading(true);
|
|
try {
|
|
if (activeTab === 'login') {
|
|
const targetUsername = username.trim() || 'admin';
|
|
const targetPwd = password.trim() || 'admin123';
|
|
const res = await window.SonicAPI.login(targetUsername, targetPwd);
|
|
localStorage.setItem('sonic_token', res.access_token);
|
|
localStorage.setItem('sonic_user', JSON.stringify(res.user));
|
|
if (res.user && res.user.must_change_password) {
|
|
setOldPassword(targetPwd);
|
|
}
|
|
onSuccess(res.user, res.access_token);
|
|
} else if (activeTab === 'register') {
|
|
const res = await window.SonicAPI.register(username.trim(), email.trim(), password.trim());
|
|
localStorage.setItem('sonic_token', res.access_token);
|
|
localStorage.setItem('sonic_user', JSON.stringify(res.user));
|
|
onSuccess(res.user, res.access_token);
|
|
} else if (activeTab === 'force_change') {
|
|
const res = await window.SonicAPI.changePassword(oldPassword.trim(), newPassword.trim());
|
|
localStorage.setItem('sonic_token', res.access_token);
|
|
const user = JSON.parse(localStorage.getItem('sonic_user') || '{}');
|
|
user.must_change_password = false;
|
|
localStorage.setItem('sonic_user', JSON.stringify(user));
|
|
onSuccess(user, res.access_token);
|
|
}
|
|
} catch (err) {
|
|
setError(err.message || (activeTab === 'login' ? 'Tài khoản hoặc mật khẩu không chính xác. (Nếu bạn đã đổi mật khẩu trước đó, vui lòng nhập mật khẩu mới mà bạn đã tạo)' : 'Thao tác không thành công'));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
const isForceMode = activeTab === 'force_change';
|
|
const canClose = !forceMandatory && !isForceMode;
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-md"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "bg-[#262626] border border-[#383838] rounded-xl shadow-2xl w-full max-w-md p-6 text-slate-200"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex justify-between items-center pb-4 border-b border-[#383838]"
|
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
className: "text-lg font-bold text-teal-400"
|
|
}, isForceMode ? '⚠️ Bắt Buộc Đổi Mật Khẩu Khởi Tạo' : activeTab === 'login' ? '🔐 Đăng Nhập Hệ Thống' : '📝 Đăng Ký Tài Khoản'), canClose && /*#__PURE__*/React.createElement("button", {
|
|
onClick: onClose,
|
|
className: "text-slate-400 hover:text-slate-200"
|
|
}, "✕")), error && /*#__PURE__*/React.createElement("div", {
|
|
className: "mt-4 p-3 bg-red-900/40 border border-red-700 rounded-lg text-red-200 text-sm"
|
|
}, error), /*#__PURE__*/React.createElement("form", {
|
|
onSubmit: handleSubmit,
|
|
className: "mt-4 space-y-4"
|
|
}, isForceMode ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
|
|
className: "text-xs text-amber-400 bg-amber-950/60 p-2.5 border border-amber-800/80 rounded leading-relaxed"
|
|
}, "🔒 Tài khoản của bạn đang dùng mật khẩu khởi tạo mặc định. Để bảo mật hệ thống, bạn phải đổi mật khẩu mới trước khi tiếp tục."), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
className: "block text-xs font-semibold mb-1 text-slate-400"
|
|
}, "Mật khẩu hiện tại (Mặc định: admin123)"), /*#__PURE__*/React.createElement("input", {
|
|
type: "password",
|
|
autoComplete: "current-password",
|
|
required: true,
|
|
value: oldPassword,
|
|
onChange: e => setOldPassword(e.target.value),
|
|
className: "w-full bg-[#1e1e1e] border border-[#383838] rounded px-3 py-2 text-sm focus:outline-none focus:border-teal-500"
|
|
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
className: "block text-xs font-semibold mb-1 text-slate-400"
|
|
}, "Mật khẩu mới"), /*#__PURE__*/React.createElement("input", {
|
|
type: "password",
|
|
autoComplete: "new-password",
|
|
required: true,
|
|
value: newPassword,
|
|
onChange: e => setNewPassword(e.target.value),
|
|
className: "w-full bg-[#1e1e1e] border border-[#383838] rounded px-3 py-2 text-sm focus:outline-none focus:border-teal-500"
|
|
}))) : /*#__PURE__*/React.createElement(React.Fragment, null, activeTab === 'login' ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
className: "block text-xs font-semibold mb-1 text-slate-400"
|
|
}, "Tên đăng nhập ", /*#__PURE__*/React.createElement("span", {
|
|
className: "text-teal-400 font-normal"
|
|
}, "(Tùy chọn - Admin có thể bỏ trống)")), /*#__PURE__*/React.createElement("input", {
|
|
type: "text",
|
|
placeholder: "Mặc định: admin",
|
|
value: username,
|
|
onChange: e => setUsername(e.target.value),
|
|
className: "w-full bg-[#1e1e1e] border border-[#383838] rounded px-3 py-2 text-sm focus:outline-none focus:border-teal-500"
|
|
})) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
className: "block text-xs font-semibold mb-1 text-slate-400"
|
|
}, "Tên đăng nhập"), /*#__PURE__*/React.createElement("input", {
|
|
type: "text",
|
|
required: true,
|
|
value: username,
|
|
onChange: e => setUsername(e.target.value),
|
|
className: "w-full bg-[#1e1e1e] border border-[#383838] rounded px-3 py-2 text-sm focus:outline-none focus:border-teal-500"
|
|
})), activeTab === 'register' && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
className: "block text-xs font-semibold mb-1 text-slate-400"
|
|
}, "Email"), /*#__PURE__*/React.createElement("input", {
|
|
type: "email",
|
|
required: true,
|
|
value: email,
|
|
onChange: e => setEmail(e.target.value),
|
|
className: "w-full bg-[#1e1e1e] border border-[#383838] rounded px-3 py-2 text-sm focus:outline-none focus:border-teal-500"
|
|
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
className: "block text-xs font-semibold mb-1 text-slate-400"
|
|
}, "Mật khẩu ", activeTab === 'login' && /*#__PURE__*/React.createElement("span", {
|
|
className: "text-amber-400 font-normal"
|
|
}, "(Lần đầu: admin123)")), /*#__PURE__*/React.createElement("input", {
|
|
type: "password",
|
|
autoComplete: activeTab === 'login' ? 'current-password' : 'new-password',
|
|
required: true,
|
|
value: password,
|
|
onChange: e => setPassword(e.target.value),
|
|
className: "w-full bg-[#1e1e1e] border border-[#383838] rounded px-3 py-2 text-sm focus:outline-none focus:border-teal-500"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
type: "submit",
|
|
disabled: loading,
|
|
className: "w-full py-2 bg-teal-600 hover:bg-teal-500 text-white font-semibold rounded-lg shadow transition duration-150"
|
|
}, loading ? 'Đang xác thực...' : isForceMode ? 'Đổi Mật Khẩu Ngay' : activeTab === 'login' ? 'Đăng Nhập System' : 'Tạo Tài Khoản Mới'), activeTab === 'login' && !isForceMode && /*#__PURE__*/React.createElement("button", {
|
|
type: "button",
|
|
onClick: () => {
|
|
setUsername('admin');
|
|
setPassword('admin123');
|
|
setError('');
|
|
},
|
|
className: "w-full mt-2 py-1.5 bg-amber-950/60 hover:bg-amber-900/80 text-amber-300 border border-amber-800/60 text-xs font-semibold rounded-lg transition flex items-center justify-center gap-1.5"
|
|
}, "🔑 Điền Nhanh Tài Khoản Admin (admin / admin123)")), !isForceMode && /*#__PURE__*/React.createElement("div", {
|
|
className: "mt-4 pt-4 border-t border-[#383838] text-center text-xs text-slate-400"
|
|
}, activeTab === 'login' ? /*#__PURE__*/React.createElement("span", null, "Chưa có tài khoản? ", /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => setActiveTab('register'),
|
|
className: "text-teal-400 hover:underline"
|
|
}, "Đăng ký ngay")) : /*#__PURE__*/React.createElement("span", null, "Đã có tài khoản? ", /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => setActiveTab('login'),
|
|
className: "text-teal-400 hover:underline"
|
|
}, "Đăng nhập")))));
|
|
};
|
|
const AIConfigModal = ({
|
|
isOpen,
|
|
onClose,
|
|
onConfigSaved
|
|
}) => {
|
|
if (!isOpen) return null;
|
|
const defaultProvidersList = [{
|
|
id: 'openai_default',
|
|
name: 'OpenAI Official',
|
|
provider_type: 'openai',
|
|
api_base_url: 'https://api.openai.com/v1',
|
|
api_key: '',
|
|
model_name: 'gpt-4o',
|
|
temperature: 0.7,
|
|
is_active: true
|
|
}, {
|
|
id: 'openai_compat_default',
|
|
name: 'OpenAI Compatible (Ollama/LocalAI/DeepSeek)',
|
|
provider_type: 'openai_compatible',
|
|
api_base_url: 'http://localhost:11434/v1',
|
|
api_key: 'ollama',
|
|
model_name: 'deepseek-r1',
|
|
temperature: 0.7,
|
|
is_active: false
|
|
}, {
|
|
id: 'anthropic_default',
|
|
name: 'Anthropic Claude',
|
|
provider_type: 'anthropic',
|
|
api_base_url: 'https://api.anthropic.com/v1',
|
|
api_key: '',
|
|
model_name: 'claude-3-5-sonnet',
|
|
temperature: 0.7,
|
|
is_active: false
|
|
}, {
|
|
id: 'gemini_default',
|
|
name: 'Google Gemini',
|
|
provider_type: 'gemini',
|
|
api_base_url: 'https://generativelanguage.googleapis.com',
|
|
api_key: '',
|
|
model_name: 'gemini-1.5-pro',
|
|
temperature: 0.7,
|
|
is_active: false
|
|
}];
|
|
const [providers, setProviders] = useState(defaultProvidersList);
|
|
const [selectedId, setSelectedId] = useState('openai_default');
|
|
const [msg, setMsg] = useState('');
|
|
const [error, setError] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
useEffect(() => {
|
|
if (isOpen) loadConfigs();
|
|
}, [isOpen]);
|
|
const loadConfigs = async () => {
|
|
setLoading(true);
|
|
setError('');
|
|
try {
|
|
const data = await window.SonicAPI.getAIConfigs();
|
|
if (data && data.providers) {
|
|
setProviders(data.providers);
|
|
if (data.providers.length > 0) setSelectedId(data.providers[0].id);
|
|
}
|
|
} catch (err) {
|
|
setError(err.message || 'Lỗi nạp cấu hình AI');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
const handleSave = async e => {
|
|
e.preventDefault();
|
|
setMsg('');
|
|
setError('');
|
|
setLoading(true);
|
|
try {
|
|
const res = await window.SonicAPI.saveAIConfigs(providers);
|
|
setMsg(res.message || 'Đã lưu cấu hình AI Providers thành công!');
|
|
if (onConfigSaved) onConfigSaved(providers);
|
|
} catch (err) {
|
|
setError(err.message || 'Lỗi khi lưu cấu hình AI');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
const updateProviderField = (id, field, value) => {
|
|
setProviders(prev => prev.map(p => p.id === id ? {
|
|
...p,
|
|
[field]: value
|
|
} : p));
|
|
};
|
|
const activeProvider = providers.find(p => p.id === selectedId) || providers[0];
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: "fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm select-none"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "bg-[#262626] border border-[#383838] rounded-xl shadow-2xl w-full max-w-2xl p-6 text-slate-200"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex justify-between items-center pb-4 border-b border-[#383838]"
|
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
className: "text-lg font-bold text-cyan-400 flex items-center gap-2"
|
|
}, "🤖 Quản Lý & Cấu Hình AI Providers"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: onClose,
|
|
className: "text-slate-400 hover:text-slate-200"
|
|
}, "✕")), msg && /*#__PURE__*/React.createElement("div", {
|
|
className: "mt-3 p-2 bg-emerald-950/60 border border-emerald-700 text-emerald-300 rounded text-xs"
|
|
}, msg), error && /*#__PURE__*/React.createElement("div", {
|
|
className: "mt-3 p-2 bg-red-950/60 border border-red-700 text-red-300 rounded text-xs"
|
|
}, error), /*#__PURE__*/React.createElement("div", {
|
|
className: "mt-4 grid grid-cols-3 gap-4"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "space-y-1.5 border-r border-[#383838] pr-3"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs uppercase font-bold text-slate-400 block mb-2"
|
|
}, "Providers"), providers.map(p => /*#__PURE__*/React.createElement("button", {
|
|
key: p.id,
|
|
onClick: () => setSelectedId(p.id),
|
|
className: `w-full text-left px-3 py-2 rounded-lg text-xs font-semibold flex items-center justify-between transition ${selectedId === p.id ? 'bg-cyan-600 text-white shadow' : 'bg-[#1e1e1e] text-slate-300 hover:bg-[#2e2e2e]'}`
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "truncate"
|
|
}, p.name), p.is_active && /*#__PURE__*/React.createElement("span", {
|
|
className: "w-2 h-2 rounded-full bg-emerald-400"
|
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex gap-1 mt-2"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
onClick: e => {
|
|
e.stopPropagation();
|
|
const newId = 'provider_' + Date.now();
|
|
setProviders(prev => [...prev, {
|
|
id: newId,
|
|
name: 'New Provider',
|
|
provider_type: 'openai_compatible',
|
|
api_base_url: 'https://api.openai.com/v1',
|
|
api_key: '',
|
|
model_name: 'gpt-4o-mini',
|
|
temperature: 0.7,
|
|
is_active: false
|
|
}]);
|
|
setSelectedId(newId);
|
|
},
|
|
className: "flex-1 px-2 py-1 bg-emerald-700 hover:bg-emerald-600 text-white text-xs font-bold rounded"
|
|
}, "+ Thêm"), providers.length > 1 && /*#__PURE__*/React.createElement("button", {
|
|
onClick: e => {
|
|
e.stopPropagation();
|
|
if (confirm(`Xóa provider "${providers.find(p => p.id === selectedId)?.name}"?`)) {
|
|
setProviders(prev => {
|
|
const filtered = prev.filter(p => p.id !== selectedId);
|
|
if (filtered.length > 0) setSelectedId(filtered[0].id);
|
|
return filtered;
|
|
});
|
|
}
|
|
},
|
|
className: "px-2 py-1 bg-red-800 hover:bg-red-700 text-white text-xs font-bold rounded"
|
|
}, "Xóa"))), activeProvider && /*#__PURE__*/React.createElement("form", {
|
|
onSubmit: handleSave,
|
|
className: "col-span-2 space-y-3.5"
|
|
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
className: "block text-xs font-semibold text-slate-400 mb-1"
|
|
}, "Tên Provider"), /*#__PURE__*/React.createElement("input", {
|
|
type: "text",
|
|
value: activeProvider.name,
|
|
onChange: e => updateProviderField(activeProvider.id, 'name', e.target.value),
|
|
className: "w-full bg-[#1e1e1e] border border-[#383838] rounded px-3 py-1.5 text-xs text-slate-200 focus:outline-none focus:border-cyan-500"
|
|
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
className: "block text-xs font-semibold text-slate-400 mb-1"
|
|
}, "API Base URL (Endpoint)"), /*#__PURE__*/React.createElement("input", {
|
|
type: "text",
|
|
value: activeProvider.api_base_url || '',
|
|
onChange: e => updateProviderField(activeProvider.id, 'api_base_url', e.target.value),
|
|
className: "w-full bg-[#1e1e1e] border border-[#383838] rounded px-3 py-1.5 text-xs font-mono text-cyan-300 focus:outline-none focus:border-cyan-500",
|
|
placeholder: "https://api.openai.com/v1"
|
|
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
className: "block text-xs font-semibold text-slate-400 mb-1"
|
|
}, "API Key Cá Nhân"), /*#__PURE__*/React.createElement("input", {
|
|
type: "password",
|
|
value: activeProvider.api_key || '',
|
|
onChange: e => updateProviderField(activeProvider.id, 'api_key', e.target.value),
|
|
className: "w-full bg-[#1e1e1e] border border-[#383838] rounded px-3 py-1.5 text-xs font-mono text-slate-200 focus:outline-none focus:border-cyan-500",
|
|
placeholder: "sk-..."
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "grid grid-cols-2 gap-3"
|
|
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
className: "block text-xs font-semibold text-slate-400 mb-1"
|
|
}, "Model Name"), /*#__PURE__*/React.createElement("input", {
|
|
type: "text",
|
|
value: activeProvider.model_name || '',
|
|
onChange: e => updateProviderField(activeProvider.id, 'model_name', e.target.value),
|
|
className: "w-full bg-[#1e1e1e] border border-[#383838] rounded px-3 py-1.5 text-xs font-mono text-amber-300 focus:outline-none focus:border-cyan-500"
|
|
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
className: "block text-xs font-semibold text-slate-400 mb-1"
|
|
}, "Temperature"), /*#__PURE__*/React.createElement("input", {
|
|
type: "number",
|
|
step: "0.1",
|
|
min: "0",
|
|
max: "2",
|
|
value: activeProvider.temperature ?? 0.7,
|
|
onChange: e => updateProviderField(activeProvider.id, 'temperature', parseFloat(e.target.value)),
|
|
className: "w-full bg-[#1e1e1e] border border-[#383838] rounded px-3 py-1.5 text-xs text-slate-200 focus:outline-none focus:border-cyan-500"
|
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
className: "pt-2 flex items-center justify-between"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "flex items-center gap-2 cursor-pointer text-xs text-slate-300"
|
|
}, /*#__PURE__*/React.createElement("input", {
|
|
type: "checkbox",
|
|
checked: activeProvider.is_active,
|
|
onChange: e => updateProviderField(activeProvider.id, 'is_active', e.target.checked),
|
|
className: "rounded accent-cyan-500"
|
|
}), "Kích hoạt Provider này"), /*#__PURE__*/React.createElement("button", {
|
|
type: "submit",
|
|
disabled: loading,
|
|
className: "px-4 py-1.5 bg-cyan-600 hover:bg-cyan-500 text-white font-semibold text-xs rounded-lg shadow transition"
|
|
}, loading ? 'Đang lưu...' : 'Lưu Cấu Hình AI'))))));
|
|
};
|
|
const ProfileModal = ({
|
|
isOpen,
|
|
onClose
|
|
}) => {
|
|
if (!isOpen) return null;
|
|
const [profile, setProfile] = useState(null);
|
|
const [oldPassword, setOldPassword] = useState('');
|
|
const [newPassword, setNewPassword] = useState('');
|
|
const [msg, setMsg] = useState('');
|
|
const [error, setError] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
useEffect(() => {
|
|
if (isOpen) fetchProfile();
|
|
}, [isOpen]);
|
|
const fetchProfile = async () => {
|
|
try {
|
|
const data = await window.SonicAPI.getProfile();
|
|
setProfile(data);
|
|
} catch (e) {
|
|
setError(e.message || 'Không thể tải thông tin profile');
|
|
}
|
|
};
|
|
const handleChangePassword = async e => {
|
|
e.preventDefault();
|
|
setMsg('');
|
|
setError('');
|
|
setLoading(true);
|
|
try {
|
|
const res = await window.SonicAPI.changePassword(oldPassword, newPassword);
|
|
setMsg(res.message || 'Đổi mật khẩu thành công!');
|
|
setOldPassword('');
|
|
setNewPassword('');
|
|
} catch (err) {
|
|
setError(err.message || 'Lỗi khi đổi mật khẩu');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: "fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "bg-[#262626] border border-[#383838] rounded-xl shadow-2xl w-full max-w-lg p-6 text-slate-200"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex justify-between items-center pb-4 border-b border-[#383838]"
|
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
className: "text-lg font-bold text-teal-400"
|
|
}, "👤 Hồ Sơ Cá Nhân & Hạn Mức Quota"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: onClose,
|
|
className: "text-slate-400 hover:text-slate-200"
|
|
}, "✕")), profile && /*#__PURE__*/React.createElement("div", {
|
|
className: "mt-4 space-y-4"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "bg-[#1e1e1e] p-4 rounded-lg border border-[#333] grid grid-cols-2 gap-4 text-xs"
|
|
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-slate-500 block"
|
|
}, "Tên người dùng"), /*#__PURE__*/React.createElement("span", {
|
|
className: "font-bold text-teal-300 text-sm"
|
|
}, profile.username)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-slate-500 block"
|
|
}, "Vai trò"), /*#__PURE__*/React.createElement("span", {
|
|
className: "uppercase font-semibold text-amber-400"
|
|
}, profile.role)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-slate-500 block"
|
|
}, "Email"), /*#__PURE__*/React.createElement("span", null, profile.email)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-slate-500 block"
|
|
}, "Dung lượng Quota"), /*#__PURE__*/React.createElement("span", {
|
|
className: "font-semibold text-slate-200"
|
|
}, profile.quota.used_mb, " MB / ", profile.quota.storage_limit_mb, " MB"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex justify-between text-xs mb-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-slate-400"
|
|
}, "Tiến trình sử dụng bộ nhớ Server"), /*#__PURE__*/React.createElement("span", {
|
|
className: "font-bold text-teal-400"
|
|
}, (profile.quota.used_mb / profile.quota.storage_limit_mb * 100).toFixed(1), "%")), /*#__PURE__*/React.createElement("div", {
|
|
className: "w-full h-2 bg-slate-800 rounded-full overflow-hidden"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "h-full bg-teal-500 rounded-full transition-all duration-300",
|
|
style: {
|
|
width: `${Math.min(100, profile.quota.used_mb / profile.quota.storage_limit_mb * 100)}%`
|
|
}
|
|
}))), /*#__PURE__*/React.createElement("form", {
|
|
onSubmit: handleChangePassword,
|
|
className: "pt-4 border-t border-[#383838] space-y-3"
|
|
}, /*#__PURE__*/React.createElement("h4", {
|
|
className: "text-xs font-bold text-slate-300 uppercase"
|
|
}, "Thay Đổi Mật Khẩu"), msg && /*#__PURE__*/React.createElement("div", {
|
|
className: "p-2 bg-emerald-950/60 border border-emerald-700 text-emerald-300 rounded text-xs"
|
|
}, msg), error && /*#__PURE__*/React.createElement("div", {
|
|
className: "p-2 bg-red-950/60 border border-red-700 text-red-300 rounded text-xs"
|
|
}, error), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
className: "block text-xs text-slate-400 mb-1"
|
|
}, "Mật khẩu cũ"), /*#__PURE__*/React.createElement("input", {
|
|
type: "password",
|
|
autoComplete: "current-password",
|
|
required: true,
|
|
value: oldPassword,
|
|
onChange: e => setOldPassword(e.target.value),
|
|
className: "w-full bg-[#1e1e1e] border border-[#383838] rounded px-3 py-1.5 text-xs focus:outline-none focus:border-teal-500"
|
|
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
className: "block text-xs text-slate-400 mb-1"
|
|
}, "Mật khẩu mới"), /*#__PURE__*/React.createElement("input", {
|
|
type: "password",
|
|
autoComplete: "new-password",
|
|
required: true,
|
|
value: newPassword,
|
|
onChange: e => setNewPassword(e.target.value),
|
|
className: "w-full bg-[#1e1e1e] border border-[#383838] rounded px-3 py-1.5 text-xs focus:outline-none focus:border-teal-500"
|
|
})), /*#__PURE__*/React.createElement("button", {
|
|
type: "submit",
|
|
disabled: loading,
|
|
className: "w-full py-1.5 bg-teal-600 hover:bg-teal-500 text-white font-semibold text-xs rounded transition"
|
|
}, loading ? 'Đang cập nhật...' : 'Cập Nhật Mật Khẩu')))));
|
|
};
|
|
const SystemManagerModal = ({
|
|
isOpen,
|
|
onClose
|
|
}) => {
|
|
if (!isOpen) return null;
|
|
const [users, setUsers] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [msg, setMsg] = useState('');
|
|
const [error, setError] = useState('');
|
|
const [editingQuotaUser, setEditingQuotaUser] = useState(null);
|
|
const [newQuotaMb, setNewQuotaMb] = useState(500);
|
|
useEffect(() => {
|
|
if (isOpen) loadUsers();
|
|
}, [isOpen]);
|
|
const loadUsers = async () => {
|
|
setLoading(true);
|
|
setError('');
|
|
try {
|
|
const data = await window.SonicAPI.listUsers();
|
|
setUsers(data);
|
|
} catch (err) {
|
|
setError(err.message || 'Không thể tải danh sách người dùng hệ thống');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
const handleSaveQuota = async userId => {
|
|
try {
|
|
await window.SonicAPI.updateUserQuota(userId, parseInt(newQuotaMb));
|
|
setMsg('Đã cập nhật hạn mức Quota thành công!');
|
|
setEditingQuotaUser(null);
|
|
loadUsers();
|
|
} catch (err) {
|
|
setError(err.message || 'Lỗi cập nhật Quota');
|
|
}
|
|
};
|
|
const handleToggleRole = async user => {
|
|
const nextRole = user.role === 'admin' ? 'standard' : 'admin';
|
|
try {
|
|
await window.SonicAPI.updateUserRole(user.id, nextRole, user.is_active);
|
|
setMsg(`Đã đổi vai trò người dùng ${user.username} thành ${nextRole}`);
|
|
loadUsers();
|
|
} catch (err) {
|
|
setError(err.message || 'Lỗi cập nhật vai trò');
|
|
}
|
|
};
|
|
const handleDeleteUser = async userId => {
|
|
if (!confirm('Bạn có chắc chắn muốn xóa người dùng này khỏi hệ thống?')) return;
|
|
try {
|
|
await window.SonicAPI.deleteUser(userId);
|
|
setMsg('Đã xóa người dùng thành công');
|
|
loadUsers();
|
|
} catch (err) {
|
|
setError(err.message || 'Lỗi khi xóa người dùng');
|
|
}
|
|
};
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: "fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "bg-[#262626] border border-[#383838] rounded-xl shadow-2xl w-full max-w-4xl p-6 text-slate-200"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex justify-between items-center pb-4 border-b border-[#383838]"
|
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
className: "text-lg font-bold text-amber-400"
|
|
}, "⚙️ Quản Lý Hệ Thống & Phân Quyền Admin"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: onClose,
|
|
className: "text-slate-400 hover:text-slate-200"
|
|
}, "✕")), msg && /*#__PURE__*/React.createElement("div", {
|
|
className: "mt-3 p-2 bg-emerald-950/60 border border-emerald-700 text-emerald-300 rounded text-xs"
|
|
}, msg), error && /*#__PURE__*/React.createElement("div", {
|
|
className: "mt-3 p-2 bg-red-950/60 border border-red-700 text-red-300 rounded text-xs"
|
|
}, error), /*#__PURE__*/React.createElement("div", {
|
|
className: "mt-4 overflow-x-auto max-h-96 no-scrollbar"
|
|
}, loading ? /*#__PURE__*/React.createElement("div", {
|
|
className: "py-8 text-center text-slate-400 text-xs"
|
|
}, "Đang tải thông tin hệ thống...") : /*#__PURE__*/React.createElement("table", {
|
|
className: "w-full text-left text-xs border-collapse"
|
|
}, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", {
|
|
className: "border-b border-[#383838] text-slate-400 bg-[#1e1e1e]"
|
|
}, /*#__PURE__*/React.createElement("th", {
|
|
className: "p-3"
|
|
}, "Tên Người Dùng"), /*#__PURE__*/React.createElement("th", {
|
|
className: "p-3"
|
|
}, "Email"), /*#__PURE__*/React.createElement("th", {
|
|
className: "p-3"
|
|
}, "Vai Trò"), /*#__PURE__*/React.createElement("th", {
|
|
className: "p-3"
|
|
}, "Dung Lượng Sử Dụng"), /*#__PURE__*/React.createElement("th", {
|
|
className: "p-3"
|
|
}, "Hạn Mức Quota"), /*#__PURE__*/React.createElement("th", {
|
|
className: "p-3 text-right"
|
|
}, "Thao Tác"))), /*#__PURE__*/React.createElement("tbody", {
|
|
className: "divide-y divide-[#333]"
|
|
}, users.map(u => /*#__PURE__*/React.createElement("tr", {
|
|
key: u.id,
|
|
className: "hover:bg-[#2e2e2e]"
|
|
}, /*#__PURE__*/React.createElement("td", {
|
|
className: "p-3 font-semibold text-teal-300"
|
|
}, u.username, u.must_change_password && /*#__PURE__*/React.createElement("span", {
|
|
className: "ml-2 text-xs bg-amber-900/60 text-amber-300 px-1.5 py-0.5 rounded"
|
|
}, "Mật khẩu gốc")), /*#__PURE__*/React.createElement("td", {
|
|
className: "p-3 text-slate-300"
|
|
}, u.email), /*#__PURE__*/React.createElement("td", {
|
|
className: "p-3 uppercase font-bold text-amber-400"
|
|
}, u.role), /*#__PURE__*/React.createElement("td", {
|
|
className: "p-3"
|
|
}, u.used_mb, " MB"), /*#__PURE__*/React.createElement("td", {
|
|
className: "p-3"
|
|
}, editingQuotaUser === u.id ? /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center space-x-1"
|
|
}, /*#__PURE__*/React.createElement("input", {
|
|
type: "number",
|
|
value: newQuotaMb,
|
|
onChange: e => setNewQuotaMb(e.target.value),
|
|
className: "w-16 bg-[#1e1e1e] border border-[#444] rounded px-1 py-0.5 text-xs text-slate-200"
|
|
}), /*#__PURE__*/React.createElement("span", null, "MB"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => handleSaveQuota(u.id),
|
|
className: "px-2 py-0.5 bg-teal-600 rounded text-xs"
|
|
}, "Lưu")) : /*#__PURE__*/React.createElement("span", {
|
|
className: "font-semibold"
|
|
}, u.quota_mb, " MB")), /*#__PURE__*/React.createElement("td", {
|
|
className: "p-3 text-right space-x-2"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => {
|
|
setEditingQuotaUser(u.id);
|
|
setNewQuotaMb(u.quota_mb);
|
|
},
|
|
className: "px-2 py-1 bg-slate-700 hover:bg-slate-600 rounded text-xs"
|
|
}, "Sửa Quota"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => handleToggleRole(u),
|
|
className: "px-2 py-1 bg-amber-700/60 hover:bg-amber-600 rounded text-xs"
|
|
}, "Đổi Role"), u.role !== 'admin' && /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => handleDeleteUser(u.id),
|
|
className: "px-2 py-1 bg-red-700/60 hover:bg-red-600 rounded text-xs"
|
|
}, "Xóa")))))))));
|
|
};
|
|
const App = () => {
|
|
// ── State Definitions ──
|
|
const [tracks, setTracks] = useState([{
|
|
id: '1',
|
|
name: 'Track 01',
|
|
buffer: null,
|
|
startTime: 0,
|
|
height: 128,
|
|
volumeDb: 0,
|
|
pan: 0,
|
|
muted: false,
|
|
solo: false,
|
|
color: '#0f766e',
|
|
markers: [],
|
|
serverFileId: null,
|
|
clips: []
|
|
}, {
|
|
id: '2',
|
|
name: 'Track 02',
|
|
buffer: null,
|
|
startTime: 0,
|
|
height: 128,
|
|
volumeDb: 0,
|
|
pan: 0,
|
|
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 openPanel = id => {
|
|
if (id === 'export') setShowExportPanel(true);else if (id === 'ai') setShowAIPanel(true);else if (id === 'python_tools') setShowPythonToolsPanel(true);else if (id === 'selection') setShowSelectionPanel(true);
|
|
};
|
|
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;
|
|
// 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 [beginBar, setBeginBar] = useState(1);
|
|
const [endBar, setEndBar] = useState(1);
|
|
const [numberBar, setNumberBar] = useState(1);
|
|
const [subTabHeight, setSubTabHeight] = useState(96);
|
|
const [isExporting, setIsExporting] = useState(false);
|
|
const [soloedTrackId, setSoloedTrackId] = useState(null);
|
|
const [toastMessage, setToastMessage] = useState(null);
|
|
const [showAIConfig, setShowAIConfig] = useState(false);
|
|
const [showExportPanel, setShowExportPanel] = useState(true);
|
|
const [showAIPanel, setShowAIPanel] = useState(true);
|
|
const [showSelectionPanel, setShowSelectionPanel] = useState(true);
|
|
const [showPythonToolsPanel, setShowPythonToolsPanel] = useState(true);
|
|
const [showMediaExplorer, setShowMediaExplorer] = useState(true);
|
|
const [showFxRack, setShowFxRack] = useState(false);
|
|
const [showMidiEvents, setShowMidiEvents] = useState(false);
|
|
const [rightSidebarWidth, setRightSidebarWidth] = useState(320);
|
|
const [mediaExplorerHeight, setMediaExplorerHeight] = useState(50);
|
|
const [panelPositions, setPanelPositions] = useState({
|
|
export: 'bottom',
|
|
ai: 'right',
|
|
python_tools: 'bottom',
|
|
selection: 'bottom',
|
|
media_explorer: 'right',
|
|
fx_rack: 'bottom',
|
|
midi_events: 'bottom'
|
|
});
|
|
const [panelDropZone, setPanelDropZone] = useState(null);
|
|
const [dragGhostPos, setDragGhostPos] = useState(null);
|
|
const [dragGhostPanel, setDragGhostPanel] = useState(null);
|
|
const panelDragRef = useRef(null);
|
|
const workspaceRef = useRef(null);
|
|
const colResizerRef = useRef(null);
|
|
const rowResizerRef = useRef(null);
|
|
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 [aiProviders, setAiProviders] = useState([]);
|
|
useEffect(() => {
|
|
(async () => {
|
|
try {
|
|
const data = await window.SonicAPI.getAIConfigs();
|
|
if (data && data.providers) {
|
|
setAiProviders(data.providers);
|
|
const active = data.providers.find(p => p.is_active) || data.providers[0];
|
|
if (active) setSelectedProviderId(active.id);
|
|
}
|
|
} catch (e) {/* server may not have config endpoint */}
|
|
})();
|
|
}, []);
|
|
const [analysisState, setAnalysisState] = useState({
|
|
status: 'Sẵn sàng. Chạy AI để phân tích nhịp.',
|
|
data: null,
|
|
isRunning: false
|
|
});
|
|
const [aiPrompt, setAiPrompt] = useState('');
|
|
const [promptHistory, setPromptHistory] = useState([]);
|
|
const [promptHistIdx, setPromptHistIdx] = useState(-1);
|
|
const promptHistRef = useRef([]);
|
|
const [aiProvider, setAiProvider] = useState('OpenAI');
|
|
const [aiModel, setAiModel] = useState('GPT-4o');
|
|
const [aiActionLog, setAiActionLog] = useState([]);
|
|
const [aiProcessing, setAiProcessing] = useState(false);
|
|
const [selectedProviderId, setSelectedProviderId] = useState('');
|
|
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 }
|
|
const [editingTrackName, setEditingTrackName] = useState(null); // trackId being edited
|
|
const [editNameInput, setEditNameInput] = useState('');
|
|
|
|
// ── 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 {
|
|
volumeDb: track.volumeDb,
|
|
pan: track.pan,
|
|
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 [subTabSelectedNodeTime, setSubTabSelectedNodeTime] = useState(null);
|
|
const [subTabNormVal, setSubTabNormVal] = useState(0);
|
|
const [subTabGainVal, setSubTabGainVal] = useState(100);
|
|
const [subTabPitchVal, setSubTabPitchVal] = useState(0);
|
|
const [subTabs, setSubTabs] = useState([]); // [{id, label, trackId, startTime, endTime, buffer, effects, currentTime, selectionStart, selectionEnd, isPlaying}, ...]
|
|
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
|
|
});
|
|
|
|
// ── Auth / User State ──
|
|
const [currentUser, setCurrentUser] = useState(null);
|
|
const [authModalOpen, setAuthModalOpen] = useState(false);
|
|
const [authMode, setAuthMode] = useState('login'); // 'login' | 'register' | 'force_change'
|
|
const [isMandatoryLogin, setIsMandatoryLogin] = useState(false);
|
|
const [profileModalOpen, setProfileModalOpen] = useState(false);
|
|
const [systemManagerModalOpen, setSystemManagerModalOpen] = useState(false);
|
|
const [aiConfigModalOpen, setAiConfigModalOpen] = useState(false);
|
|
useEffect(() => {
|
|
const checkAuthStatus = async () => {
|
|
const savedToken = localStorage.getItem('sonic_token');
|
|
if (!savedToken) {
|
|
setIsMandatoryLogin(true);
|
|
setAuthMode('login');
|
|
setAuthModalOpen(true);
|
|
return;
|
|
}
|
|
try {
|
|
const profile = await window.SonicAPI.getProfile();
|
|
setCurrentUser(profile);
|
|
if (profile.must_change_password) {
|
|
setIsMandatoryLogin(true);
|
|
setAuthMode('force_change');
|
|
setAuthModalOpen(true);
|
|
} else {
|
|
setIsMandatoryLogin(false);
|
|
setAuthModalOpen(false);
|
|
}
|
|
} catch (err) {
|
|
localStorage.removeItem('sonic_token');
|
|
localStorage.removeItem('sonic_user');
|
|
setCurrentUser(null);
|
|
setIsMandatoryLogin(true);
|
|
setAuthMode('login');
|
|
setAuthModalOpen(true);
|
|
}
|
|
};
|
|
checkAuthStatus();
|
|
}, []);
|
|
const loadPendingSfsProject = () => {
|
|
const proj = window.__pendingSfsProject;
|
|
if (!proj) return;
|
|
try {
|
|
const restored = (proj.tracks || []).map(t => ({
|
|
...t,
|
|
buffer: null,
|
|
channelInfo: t.channelInfo || null,
|
|
clips: t.clips || [],
|
|
serverFileId: t.serverFileId || null
|
|
}));
|
|
if (restored.length > 0) {
|
|
setTracks(restored);
|
|
showToast(`Đã tải dự án "${proj.name}" từ liên kết .sfs thành công!`, "success");
|
|
}
|
|
} catch (e) {
|
|
showToast("Lỗi tải dự án từ .sfs", "error");
|
|
} finally {
|
|
window.__pendingSfsProject = null;
|
|
}
|
|
};
|
|
const handleAuthSuccess = user => {
|
|
setCurrentUser(user);
|
|
if (user.must_change_password) {
|
|
setIsMandatoryLogin(true);
|
|
setAuthMode('force_change');
|
|
setAuthModalOpen(true);
|
|
} else {
|
|
setIsMandatoryLogin(false);
|
|
setAuthModalOpen(false);
|
|
loadPendingSfsProject();
|
|
}
|
|
};
|
|
const handleLogout = () => {
|
|
localStorage.removeItem('sonic_token');
|
|
localStorage.removeItem('sonic_user');
|
|
setCurrentUser(null);
|
|
setIsMandatoryLogin(true);
|
|
setAuthMode('login');
|
|
setAuthModalOpen(true);
|
|
};
|
|
|
|
// ── Temp project auto-save (local + server) ──
|
|
useEffect(() => {
|
|
const serializeSafe = arr => (arr || []).map(t => ({
|
|
id: t.id,
|
|
name: t.name,
|
|
startTime: t.startTime,
|
|
height: t.height,
|
|
volumeDb: t.volumeDb,
|
|
pan: t.pan,
|
|
muted: t.muted,
|
|
solo: t.solo,
|
|
color: t.color,
|
|
markers: t.markers || [],
|
|
serverFileId: t.serverFileId || null,
|
|
channelInfo: t.channelInfo ? {
|
|
channels: t.channelInfo.channels,
|
|
isStereo: t.channelInfo.isStereo,
|
|
label: t.channelInfo.label
|
|
} : null
|
|
}));
|
|
window.SonicStorage.scheduleTempAutoSave(() => ({
|
|
id: 'temp_project',
|
|
name: 'Dự án tạm chưa lưu',
|
|
tracks: serializeSafe(tracks),
|
|
subTabs: (subTabs || []).map(s => ({
|
|
id: s.id,
|
|
label: s.label,
|
|
trackId: s.trackId,
|
|
clipId: s.clipId,
|
|
startTime: s.startTime,
|
|
endTime: s.endTime,
|
|
speed: s.speed,
|
|
fadeInLen: s.fadeInLen || 0,
|
|
fadeOutLen: s.fadeOutLen || 0,
|
|
graphMode: s.graphMode,
|
|
volumeNodes: s.volumeNodes || [],
|
|
panningNodes: s.panningNodes || [],
|
|
channelInfo: s.channelInfo ? {
|
|
channels: s.channelInfo.channels,
|
|
isStereo: s.channelInfo.isStereo,
|
|
label: s.channelInfo.label
|
|
} : null
|
|
}))
|
|
}));
|
|
}, [tracks, subTabs]);
|
|
|
|
// Lucide icons initialization
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
if (window.lucide) {
|
|
window.lucide.createIcons();
|
|
}
|
|
}, 50);
|
|
}, [activeTool, activeTab]);
|
|
const timelineWrapperRef = useRef(null);
|
|
const tcpContainerRef = useRef(null);
|
|
const [scrollLeft, setScrollLeft] = useState(0);
|
|
const handleTimelineScroll = e => {
|
|
if (tcpContainerRef.current) {
|
|
tcpContainerRef.current.scrollTop = e.currentTarget.scrollTop;
|
|
}
|
|
setScrollLeft(e.currentTarget.scrollLeft);
|
|
};
|
|
const handleTCPScroll = e => {
|
|
if (timelineWrapperRef.current) {
|
|
timelineWrapperRef.current.scrollTop = e.currentTarget.scrollTop;
|
|
}
|
|
};
|
|
const panelDropZoneRef = useRef(null);
|
|
const startPanelDrag = (panelId, e) => {
|
|
panelDragRef.current = {
|
|
panelId,
|
|
startX: e.clientX,
|
|
startY: e.clientY
|
|
};
|
|
setPanelDropZone(null);
|
|
setDragGhostPanel(panelId);
|
|
setDragGhostPos({
|
|
x: e.clientX - 120,
|
|
y: e.clientY - 20
|
|
});
|
|
const onMove = ev => {
|
|
if (!panelDragRef.current || !workspaceRef.current) return;
|
|
const rect = workspaceRef.current.getBoundingClientRect();
|
|
const x = ev.clientX - rect.left;
|
|
const y = ev.clientY - rect.top;
|
|
const w = rect.width;
|
|
const h = rect.height;
|
|
const margin = 60;
|
|
let zone = null;
|
|
if (x < margin && x > 10) zone = 'left';else if (x > w - margin && x < w - 10) zone = 'right';else if (y < margin && y > 10) zone = 'top';else if (y > h - margin && y < h - 10) zone = 'bottom';
|
|
panelDropZoneRef.current = zone;
|
|
setPanelDropZone(zone);
|
|
setDragGhostPos({
|
|
x: ev.clientX - 120,
|
|
y: ev.clientY - 20
|
|
});
|
|
};
|
|
const onUp = () => {
|
|
if (panelDragRef.current) {
|
|
const pid = panelDragRef.current.panelId;
|
|
const targetZone = panelDropZoneRef.current;
|
|
if (targetZone && targetZone !== panelPositions[pid]) {
|
|
setPanelPositions(prev => ({
|
|
...prev,
|
|
[pid]: targetZone
|
|
}));
|
|
}
|
|
panelDragRef.current = null;
|
|
panelDropZoneRef.current = null;
|
|
setPanelDropZone(null);
|
|
setDragGhostPos(null);
|
|
setDragGhostPanel(null);
|
|
}
|
|
document.removeEventListener('mousemove', onMove);
|
|
document.removeEventListener('mouseup', onUp);
|
|
};
|
|
document.addEventListener('mousemove', onMove);
|
|
document.addEventListener('mouseup', onUp);
|
|
};
|
|
|
|
// ── Right Sidebar Column Resizer ──
|
|
const startColResize = e => {
|
|
e.preventDefault();
|
|
const startX = e.clientX;
|
|
const startWidth = rightSidebarWidth;
|
|
const onMove = ev => {
|
|
const deltaX = startX - ev.clientX;
|
|
const newWidth = Math.max(200, Math.min(600, startWidth + deltaX));
|
|
setRightSidebarWidth(newWidth);
|
|
};
|
|
const onUp = () => {
|
|
document.removeEventListener('mousemove', onMove);
|
|
document.removeEventListener('mouseup', onUp);
|
|
};
|
|
document.addEventListener('mousemove', onMove);
|
|
document.addEventListener('mouseup', onUp);
|
|
};
|
|
|
|
// ── Right Sidebar Row Resizer (Media Explorer / AI Panel) ──
|
|
const startRowResize = e => {
|
|
e.preventDefault();
|
|
const startY = e.clientY;
|
|
const startHeight = mediaExplorerHeight;
|
|
const sidebarEl = document.getElementById('right-sidebar');
|
|
const sidebarHeight = sidebarEl ? sidebarEl.getBoundingClientRect().height : 400;
|
|
const onMove = ev => {
|
|
const deltaY = startY - ev.clientY;
|
|
const pct = (startHeight / 100 * sidebarHeight + deltaY) / sidebarHeight * 100;
|
|
const newPct = Math.max(20, Math.min(80, pct));
|
|
setMediaExplorerHeight(newPct);
|
|
};
|
|
const onUp = () => {
|
|
document.removeEventListener('mousemove', onMove);
|
|
document.removeEventListener('mouseup', onUp);
|
|
};
|
|
document.addEventListener('mousemove', onMove);
|
|
document.addEventListener('mouseup', onUp);
|
|
};
|
|
const rulerRef = useRef(null);
|
|
const activeSourcesRef = useRef([]);
|
|
const activeTrackNodesRef = useRef({}); // { [trackId]: { gainNode, pannerNode } }
|
|
const startOffsetTimeRef = useRef(0);
|
|
const startBufferOffsetRef = useRef(0);
|
|
const startAudioTimeRef = useRef(0);
|
|
const animationFrameIdRef = useRef(null);
|
|
const toastTimeoutRef = useRef(null);
|
|
const rulerDragStartRef = useRef(null);
|
|
const rulerAnchorRef = useRef(null);
|
|
const isDraggingRulerRef = useRef(false);
|
|
const handlePlayPauseRef = useRef(null);
|
|
const currentTimeRef = useRef(currentTime);
|
|
currentTimeRef.current = currentTime;
|
|
|
|
// ── Keyboard Shortcuts ──
|
|
const handleUndoRef = useRef(handleUndo);
|
|
const handleRedoRef = useRef(handleRedo);
|
|
handleUndoRef.current = handleUndo;
|
|
handleRedoRef.current = handleRedo;
|
|
const selectedClipIdRef = useRef(null);
|
|
selectedClipIdRef.current = selectedClipId;
|
|
const activeTabRef = useRef(activeTab);
|
|
activeTabRef.current = activeTab;
|
|
const activePlaybackSpeedRef = useRef(1.0);
|
|
const subTabsRef = useRef(subTabs);
|
|
subTabsRef.current = subTabs;
|
|
const subTabSelectedNodeTimeRef = useRef(null);
|
|
subTabSelectedNodeTimeRef.current = subTabSelectedNodeTime;
|
|
const handleSubTabNormalize = tabId => {
|
|
setSubTabs(prev => prev.map(st => {
|
|
if (st.id !== tabId || !st.buffer) return st;
|
|
const ctx = getAudioContext();
|
|
const data = st.buffer.getChannelData(0);
|
|
const left = st.selectionStart !== null && st.selectionEnd !== null ? Math.min(st.selectionStart, st.selectionEnd) : 0;
|
|
const right = st.selectionStart !== null && st.selectionEnd !== null ? Math.max(st.selectionStart, st.selectionEnd) : st.buffer.duration;
|
|
const startSample = Math.floor(left * st.buffer.sampleRate);
|
|
const endSample = Math.floor(right * st.buffer.sampleRate);
|
|
let maxVal = 0;
|
|
for (let i = startSample; i < endSample; i++) {
|
|
const abs = Math.abs(data[i]);
|
|
if (abs > maxVal) maxVal = abs;
|
|
}
|
|
if (maxVal === 0) return st;
|
|
const scale = 1.0 / maxVal;
|
|
const clonedBuffer = ctx.createBuffer(1, data.length, st.buffer.sampleRate);
|
|
const clonedData = clonedBuffer.getChannelData(0);
|
|
clonedData.set(data);
|
|
for (let i = startSample; i < endSample; i++) {
|
|
clonedData[i] = Math.max(-1, Math.min(1, clonedData[i] * scale));
|
|
}
|
|
showToast('Đã Normalize vùng chọn.', 'success');
|
|
return {
|
|
...st,
|
|
buffer: clonedBuffer
|
|
};
|
|
}));
|
|
};
|
|
const handleSubTabGain = (tabId, gainDb) => {
|
|
setSubTabs(prev => prev.map(st => {
|
|
if (st.id !== tabId || !st.buffer) return st;
|
|
const ctx = getAudioContext();
|
|
const data = st.buffer.getChannelData(0);
|
|
const left = st.selectionStart !== null && st.selectionEnd !== null ? Math.min(st.selectionStart, st.selectionEnd) : 0;
|
|
const right = st.selectionStart !== null && st.selectionEnd !== null ? Math.max(st.selectionStart, st.selectionEnd) : st.buffer.duration;
|
|
const startSample = Math.floor(left * st.buffer.sampleRate);
|
|
const endSample = Math.floor(right * st.buffer.sampleRate);
|
|
const scale = Math.pow(10, gainDb / 20);
|
|
const clonedBuffer = ctx.createBuffer(1, data.length, st.buffer.sampleRate);
|
|
const clonedData = clonedBuffer.getChannelData(0);
|
|
clonedData.set(data);
|
|
for (let i = startSample; i < endSample; i++) {
|
|
clonedData[i] = Math.max(-1, Math.min(1, clonedData[i] * scale));
|
|
}
|
|
showToast(`Đã điều chỉnh Gain: ${gainDb} dB.`, 'success');
|
|
return {
|
|
...st,
|
|
buffer: clonedBuffer
|
|
};
|
|
}));
|
|
};
|
|
const handleSubTabFade = (tabId, type) => {
|
|
setSubTabs(prev => prev.map(st => {
|
|
if (st.id !== tabId || !st.buffer) return st;
|
|
const ctx = getAudioContext();
|
|
const data = st.buffer.getChannelData(0);
|
|
const left = st.selectionStart !== null && st.selectionEnd !== null ? Math.min(st.selectionStart, st.selectionEnd) : 0;
|
|
const right = st.selectionStart !== null && st.selectionEnd !== null ? Math.max(st.selectionStart, st.selectionEnd) : st.buffer.duration;
|
|
const startSample = Math.floor(left * st.buffer.sampleRate);
|
|
const endSample = Math.floor(right * st.buffer.sampleRate);
|
|
const durationSamples = endSample - startSample;
|
|
if (durationSamples <= 0) return st;
|
|
const clonedBuffer = ctx.createBuffer(1, data.length, st.buffer.sampleRate);
|
|
const clonedData = clonedBuffer.getChannelData(0);
|
|
clonedData.set(data);
|
|
if (type === 'in') {
|
|
for (let i = 0; i < durationSamples; i++) {
|
|
const alpha = i / durationSamples;
|
|
clonedData[startSample + i] *= alpha;
|
|
}
|
|
showToast('Đã áp dụng Fade In.', 'success');
|
|
} else if (type === 'out') {
|
|
for (let i = 0; i < durationSamples; i++) {
|
|
const alpha = (durationSamples - i) / durationSamples;
|
|
clonedData[startSample + i] *= alpha;
|
|
}
|
|
showToast('Đã áp dụng Fade Out.', 'success');
|
|
}
|
|
return {
|
|
...st,
|
|
buffer: clonedBuffer
|
|
};
|
|
}));
|
|
};
|
|
const handleSubTabCut = tabId => {
|
|
const st = subTabsRef.current.find(s => s.id === tabId);
|
|
if (!st || !st.buffer) return;
|
|
const left = st.selectionStart !== null && st.selectionEnd !== null ? Math.min(st.selectionStart, st.selectionEnd) : null;
|
|
const right = st.selectionStart !== null && st.selectionEnd !== null ? Math.max(st.selectionStart, st.selectionEnd) : null;
|
|
if (left === null || right === null || left === right) {
|
|
showToast('Vui lòng chọn vùng để Cut.', 'warning');
|
|
return;
|
|
}
|
|
const ctx = getAudioContext();
|
|
const sr = st.buffer.sampleRate;
|
|
const data = st.buffer.getChannelData(0);
|
|
const startSample = Math.floor(left * sr);
|
|
const endSample = Math.floor(right * sr);
|
|
const len = endSample - startSample;
|
|
const cutBuffer = ctx.createBuffer(1, len, sr);
|
|
cutBuffer.copyToChannel(data.subarray(startSample, endSample), 0);
|
|
clipboardRef.current = {
|
|
buffer: cutBuffer,
|
|
name: 'Subtab Clip'
|
|
};
|
|
const newBuffer = ctx.createBuffer(1, data.length - len, 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];
|
|
setSubTabs(prev => prev.map(s => s.id === tabId ? {
|
|
...s,
|
|
buffer: newBuffer,
|
|
currentTime: left,
|
|
selectionStart: null,
|
|
selectionEnd: null
|
|
} : s));
|
|
showToast('Đã Cut vùng chọn.', 'success');
|
|
};
|
|
const handleSubTabCopy = tabId => {
|
|
const st = subTabsRef.current.find(s => s.id === tabId);
|
|
if (!st || !st.buffer) return;
|
|
const left = st.selectionStart !== null && st.selectionEnd !== null ? Math.min(st.selectionStart, st.selectionEnd) : null;
|
|
const right = st.selectionStart !== null && st.selectionEnd !== null ? Math.max(st.selectionStart, st.selectionEnd) : null;
|
|
if (left === null || right === null || left === right) {
|
|
showToast('Vui lòng chọn vùng để Copy.', 'warning');
|
|
return;
|
|
}
|
|
const ctx = getAudioContext();
|
|
const sr = st.buffer.sampleRate;
|
|
const data = st.buffer.getChannelData(0);
|
|
const startSample = Math.floor(left * sr);
|
|
const endSample = Math.floor(right * sr);
|
|
const len = endSample - startSample;
|
|
const copyBuffer = ctx.createBuffer(1, len, sr);
|
|
copyBuffer.copyToChannel(data.subarray(startSample, endSample), 0);
|
|
clipboardRef.current = {
|
|
buffer: copyBuffer,
|
|
name: 'Subtab Clip'
|
|
};
|
|
showToast('Đã Copy vùng chọn.', 'success');
|
|
};
|
|
const handleSubTabPaste = tabId => {
|
|
const st = subTabsRef.current.find(s => s.id === tabId);
|
|
if (!st || !st.buffer) return;
|
|
if (!clipboardRef.current || !clipboardRef.current.buffer) {
|
|
showToast('Clipboard trống.', 'warning');
|
|
return;
|
|
}
|
|
const ctx = getAudioContext();
|
|
const clipBuf = clipboardRef.current.buffer;
|
|
const sr = st.buffer.sampleRate;
|
|
const data = st.buffer.getChannelData(0);
|
|
const insertTime = st.currentTime || 0;
|
|
const insertSample = Math.floor(insertTime * sr);
|
|
const newBuffer = ctx.createBuffer(1, data.length + clipBuf.length, sr);
|
|
const newData = newBuffer.getChannelData(0);
|
|
let idx = 0;
|
|
for (let i = 0; i < insertSample; i++) newData[idx++] = data[i];
|
|
const clipData = clipBuf.getChannelData(0);
|
|
for (let i = 0; i < clipBuf.length; i++) newData[idx++] = clipData[i];
|
|
for (let i = insertSample; i < data.length; i++) newData[idx++] = data[i];
|
|
setSubTabs(prev => prev.map(s => s.id === tabId ? {
|
|
...s,
|
|
buffer: newBuffer,
|
|
currentTime: insertTime + clipBuf.duration,
|
|
selectionStart: null,
|
|
selectionEnd: null
|
|
} : s));
|
|
showToast('Đã dán dữ liệu âm thanh.', 'success');
|
|
};
|
|
const handleSubTabDelete = tabId => {
|
|
const st = subTabsRef.current.find(s => s.id === tabId);
|
|
if (!st || !st.buffer) return;
|
|
const left = st.selectionStart !== null && st.selectionEnd !== null ? Math.min(st.selectionStart, st.selectionEnd) : null;
|
|
const right = st.selectionStart !== null && st.selectionEnd !== null ? Math.max(st.selectionStart, st.selectionEnd) : null;
|
|
if (left === null || right === null || left === right) {
|
|
showToast('Vui lòng chọn vùng để Delete.', 'warning');
|
|
return;
|
|
}
|
|
const ctx = getAudioContext();
|
|
const sr = st.buffer.sampleRate;
|
|
const data = st.buffer.getChannelData(0);
|
|
const startSample = Math.floor(left * sr);
|
|
const endSample = Math.floor(right * sr);
|
|
const len = endSample - startSample;
|
|
const newBuffer = ctx.createBuffer(1, data.length - len, 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];
|
|
setSubTabs(prev => prev.map(s => s.id === tabId ? {
|
|
...s,
|
|
buffer: newBuffer,
|
|
currentTime: left,
|
|
selectionStart: null,
|
|
selectionEnd: null
|
|
} : s));
|
|
showToast('Đã xóa vùng chọn.', 'success');
|
|
};
|
|
const handleSubTabLoop = (tabId, loopCount) => {
|
|
const st = subTabsRef.current.find(s => s.id === tabId);
|
|
if (!st || !st.buffer) return;
|
|
const left = st.selectionStart !== null && st.selectionEnd !== null ? Math.min(st.selectionStart, st.selectionEnd) : null;
|
|
const right = st.selectionStart !== null && st.selectionEnd !== null ? Math.max(st.selectionStart, st.selectionEnd) : null;
|
|
if (left === null || right === null || left === right) {
|
|
showToast('Vui lòng chọn vùng để Loop.', 'warning');
|
|
return;
|
|
}
|
|
const ctx = getAudioContext();
|
|
const sr = st.buffer.sampleRate;
|
|
const data = st.buffer.getChannelData(0);
|
|
const startSample = Math.floor(left * sr);
|
|
const endSample = Math.floor(right * sr);
|
|
const len = endSample - startSample;
|
|
|
|
// Loop payload N times
|
|
const segmentData = data.subarray(startSample, endSample);
|
|
const addedSamples = len * (loopCount - 1);
|
|
const newBuffer = ctx.createBuffer(1, data.length + addedSamples, sr);
|
|
const newData = newBuffer.getChannelData(0);
|
|
let idx = 0;
|
|
for (let i = 0; i < endSample; i++) newData[idx++] = data[i];
|
|
for (let n = 0; n < loopCount - 1; n++) {
|
|
for (let i = 0; i < len; i++) newData[idx++] = segmentData[i];
|
|
}
|
|
for (let i = endSample; i < data.length; i++) newData[idx++] = data[i];
|
|
setSubTabs(prev => prev.map(s => s.id === tabId ? {
|
|
...s,
|
|
buffer: newBuffer,
|
|
selectionStart: null,
|
|
selectionEnd: null
|
|
} : s));
|
|
showToast(`Đã lặp vùng chọn ${loopCount} lần.`, 'success');
|
|
};
|
|
useEffect(() => {
|
|
const handler = e => {
|
|
// Bypass global hotkeys when typing inside input/textarea/contentEditable elements
|
|
if (e.target && (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.isContentEditable)) {
|
|
return;
|
|
}
|
|
const ctrl = e.ctrlKey || e.metaKey;
|
|
const alt = e.altKey;
|
|
|
|
// Global space play/pause shortcut for transport
|
|
if (e.key === ' ' || e.code === 'Space') {
|
|
e.preventDefault();
|
|
if (handlePlayPauseRef.current) handlePlayPauseRef.current();
|
|
return;
|
|
}
|
|
if (activeTabRef.current !== 'main') {
|
|
// Sub-Tab keyboard shortcuts mapping
|
|
const curTabId = activeTabRef.current;
|
|
if (ctrl && alt && e.key === 'n') {
|
|
e.preventDefault();
|
|
handleSubTabNormalize(curTabId);
|
|
return;
|
|
}
|
|
if (e.key === 'f' || e.key === 'F') {
|
|
e.preventDefault();
|
|
handleSubTabFade(curTabId, 'in');
|
|
return;
|
|
}
|
|
if (e.key === 'g' || e.key === 'G') {
|
|
e.preventDefault();
|
|
handleSubTabFade(curTabId, 'out');
|
|
return;
|
|
}
|
|
if (ctrl && e.key === 'l') {
|
|
e.preventDefault();
|
|
handleSubTabLoop(curTabId, 4);
|
|
return;
|
|
}
|
|
if (e.key === 'v' || e.key === 'V') {
|
|
e.preventDefault();
|
|
const val = prompt("Nhập Gain điều chỉnh (dB):", "0");
|
|
if (val) handleSubTabGain(curTabId, parseFloat(val) || 0);
|
|
return;
|
|
}
|
|
if (ctrl && e.key === 'x') {
|
|
e.preventDefault();
|
|
handleSubTabCut(curTabId);
|
|
return;
|
|
}
|
|
if (ctrl && e.key === 'c') {
|
|
e.preventDefault();
|
|
handleSubTabCopy(curTabId);
|
|
return;
|
|
}
|
|
if (ctrl && e.key === 'v') {
|
|
e.preventDefault();
|
|
handleSubTabPaste(curTabId);
|
|
return;
|
|
}
|
|
if (e.key === 'Delete' || e.key === 'Backspace' || e.key === 'Del') {
|
|
e.preventDefault();
|
|
if (subTabSelectedNodeTimeRef.current !== null) {
|
|
const selTime = subTabSelectedNodeTimeRef.current;
|
|
setSubTabs(prev => prev.map(s => {
|
|
if (s.id !== curTabId) return s;
|
|
const curNodes = s.graphMode === 'pan' ? s.panningNodes || [] : s.volumeNodes || [];
|
|
const updated = curNodes.filter(n => n.time !== selTime);
|
|
return {
|
|
...s,
|
|
[s.graphMode === 'pan' ? 'panningNodes' : 'volumeNodes']: updated
|
|
};
|
|
}));
|
|
setSubTabSelectedNodeTime(null);
|
|
} else {
|
|
handleSubTabDelete(curTabId);
|
|
}
|
|
return;
|
|
}
|
|
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();
|
|
handleImportSFS();
|
|
return;
|
|
}
|
|
if (ctrl && !alt && e.key === 'n') {
|
|
e.preventDefault();
|
|
setTracks([{
|
|
id: '1',
|
|
name: 'Track 01',
|
|
buffer: null,
|
|
startTime: 0,
|
|
height: 128,
|
|
volumeDb: 0,
|
|
pan: 0,
|
|
muted: false,
|
|
solo: false,
|
|
color: '#0f766e',
|
|
markers: [],
|
|
serverFileId: null
|
|
}, {
|
|
id: '2',
|
|
name: 'Track 02',
|
|
buffer: null,
|
|
startTime: 0,
|
|
height: 128,
|
|
volumeDb: 0,
|
|
pan: 0,
|
|
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();
|
|
handleExportSFS();
|
|
return;
|
|
}
|
|
if (ctrl && alt && e.key === 's' || ctrl && e.shiftKey && e.key === 's') {
|
|
e.preventDefault();
|
|
handleExportSFS();
|
|
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;
|
|
}
|
|
|
|
// Check if a subtab for this track+range already exists
|
|
const existing = subTabs.find(s => s.trackId === trackId && s.startTime === selLeft && s.endTime === selRight);
|
|
if (existing) {
|
|
setActiveTab(existing.id);
|
|
showToast(`Sub Tab already open.`, 'info');
|
|
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 numChannels = t.buffer.numberOfChannels || 1;
|
|
const subBuffer = ctx.createBuffer(numChannels, len, sr);
|
|
for (let c = 0; c < numChannels; c++) {
|
|
subBuffer.copyToChannel(t.buffer.getChannelData(c).subarray(startSample, endSample), c);
|
|
}
|
|
const subChannelInfo = window.SonicAudio.analyzeAudioBufferChannels(subBuffer);
|
|
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,
|
|
channelInfo: subChannelInfo,
|
|
effects: {
|
|
reverse: false,
|
|
gainDb: 0,
|
|
fadeInMs: 0,
|
|
fadeOutMs: 0,
|
|
normalizeDb: 0,
|
|
pitch: 0,
|
|
speedStretch: 100
|
|
},
|
|
currentTime: 0,
|
|
selectionStart: null,
|
|
selectionEnd: null,
|
|
isPlaying: false,
|
|
speed: 1.0,
|
|
volumeNodes: [],
|
|
panningNodes: [],
|
|
fadeInLen: 0,
|
|
fadeOutLen: 0,
|
|
graphMode: null,
|
|
isLooping: false,
|
|
loopCount: 0
|
|
}]);
|
|
setActiveTab(tabId);
|
|
};
|
|
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 resolvedClipId = clip.id === 'default' ? 'default_' + trackId : clip.id;
|
|
const existing = subTabs.find(s => s.clipId === resolvedClipId && s.trackId === trackId);
|
|
if (existing) {
|
|
setActiveTab(existing.id);
|
|
showToast(`Sub Tab for "${clip.name}" already open.`, 'info');
|
|
return;
|
|
}
|
|
const sr = clip.buffer.sampleRate;
|
|
const len = clip.buffer.length;
|
|
const numChannels = clip.buffer.numberOfChannels || 1;
|
|
const ctx = getAudioContext();
|
|
const subBuffer = ctx.createBuffer(numChannels, len, sr);
|
|
for (let c = 0; c < numChannels; c++) {
|
|
subBuffer.copyToChannel(clip.buffer.getChannelData(c), c);
|
|
}
|
|
const subChannelInfo = window.SonicAudio.analyzeAudioBufferChannels(subBuffer);
|
|
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: resolvedClipId,
|
|
startTime: clip.startTime,
|
|
endTime: clip.startTime + clip.buffer.duration,
|
|
buffer: subBuffer,
|
|
channelInfo: subChannelInfo,
|
|
effects: {
|
|
reverse: false,
|
|
gainDb: 0,
|
|
fadeInMs: 0,
|
|
fadeOutMs: 0,
|
|
normalizeDb: 0,
|
|
pitch: 0,
|
|
speedStretch: 100
|
|
},
|
|
currentTime: 0,
|
|
selectionStart: null,
|
|
selectionEnd: null,
|
|
isPlaying: false,
|
|
speed: 1.0,
|
|
volumeNodes: [],
|
|
panningNodes: [],
|
|
fadeInLen: 0,
|
|
fadeOutLen: 0,
|
|
graphMode: null,
|
|
isLooping: false,
|
|
loopCount: 0
|
|
}]);
|
|
setActiveTab(tabId);
|
|
};
|
|
|
|
// ── 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 sr = subTab.buffer.sampleRate;
|
|
const eff = subTab.buffer.getChannelData(0);
|
|
let resultBuffer = ctx.createBuffer(1, eff.length, sr);
|
|
let resultData = resultBuffer.getChannelData(0);
|
|
resultData.set(eff);
|
|
|
|
// Apply effects inline
|
|
const fx = subTab.effects || {};
|
|
const applyResample = (data, ratio) => {
|
|
const newLen = Math.round(data.length * ratio);
|
|
const out = new Float32Array(newLen);
|
|
for (let i = 0; i < newLen; i++) {
|
|
const srcIdx = i / ratio;
|
|
const idx0 = Math.floor(srcIdx);
|
|
const idx1 = Math.min(idx0 + 1, data.length - 1);
|
|
const frac = srcIdx - idx0;
|
|
out[i] = data[idx0] * (1 - frac) + data[idx1] * frac;
|
|
}
|
|
return out;
|
|
};
|
|
if (fx.reverse) {
|
|
const rev = new Float32Array(resultData);
|
|
for (let i = 0; i < resultData.length; i++) rev[i] = resultData[resultData.length - 1 - i];
|
|
resultData.set(rev);
|
|
}
|
|
if (fx.gainDb !== 0) {
|
|
const gain = Math.pow(10, fx.gainDb / 20);
|
|
for (let i = 0; i < resultData.length; i++) resultData[i] = Math.max(-1, Math.min(1, resultData[i] * gain));
|
|
}
|
|
if (fx.fadeInMs > 0) {
|
|
const fadeSamples = Math.min(resultData.length, Math.floor(fx.fadeInMs / 1000 * sr));
|
|
for (let i = 0; i < fadeSamples; i++) resultData[i] *= i / fadeSamples;
|
|
}
|
|
// Graph Editor fade curves (trigonometric, 15_GRAPH_EDIT.md §2.3)
|
|
const gFadeIn = subTab.fadeInLen || 0;
|
|
const gFadeOut = subTab.fadeOutLen || 0;
|
|
if (gFadeIn > 0) {
|
|
const fadeSamples = Math.min(resultData.length, Math.floor(gFadeIn * sr));
|
|
for (let i = 0; i < fadeSamples; i++) {
|
|
resultData[i] *= (1 - Math.cos(Math.PI * i / fadeSamples)) / 2;
|
|
}
|
|
}
|
|
if (gFadeOut > 0) {
|
|
const fadeSamples = Math.min(resultData.length, Math.floor(gFadeOut * sr));
|
|
for (let i = resultData.length - fadeSamples; i < resultData.length; i++) {
|
|
const t = i - (resultData.length - fadeSamples);
|
|
resultData[i] *= (1 + Math.cos(Math.PI * t / fadeSamples)) / 2;
|
|
}
|
|
}
|
|
|
|
// Graph Editor volume automation spline (Monotone Cubic Hermite Spline, 16_FIX_GRAPH.md §2.1)
|
|
const volNodes = subTab.volumeNodes || [];
|
|
if (volNodes.length > 0) {
|
|
const sortedNodes = [...volNodes].sort((a, b) => a.time - b.time);
|
|
const computeHermiteTangents = pts => {
|
|
const n = pts.length;
|
|
if (n < 2) return [];
|
|
const m = new Array(n);
|
|
for (let i = 1; i < n - 1; i++) {
|
|
const hP = pts[i].time - pts[i - 1].time;
|
|
const hN = pts[i + 1].time - pts[i].time;
|
|
const sP = (pts[i].db - pts[i - 1].db) / hP;
|
|
const sN = (pts[i + 1].db - pts[i].db) / hN;
|
|
m[i] = (sP + sN) / 2;
|
|
}
|
|
m[0] = n > 1 ? (pts[1].db - pts[0].db) / (pts[1].time - pts[0].time) : 0;
|
|
m[n - 1] = n > 1 ? (pts[n - 1].db - pts[n - 2].db) / (pts[n - 1].time - pts[n - 2].time) : 0;
|
|
return m;
|
|
};
|
|
const tangents = computeHermiteTangents(sortedNodes);
|
|
const getVolumeGainAtTime = t => {
|
|
if (sortedNodes.length === 1) {
|
|
return Math.pow(10, sortedNodes[0].db / 20);
|
|
}
|
|
if (t <= sortedNodes[0].time) {
|
|
return Math.pow(10, sortedNodes[0].db / 20);
|
|
}
|
|
if (t >= sortedNodes[sortedNodes.length - 1].time) {
|
|
return Math.pow(10, sortedNodes[sortedNodes.length - 1].db / 20);
|
|
}
|
|
for (let i = 0; i < sortedNodes.length - 1; i++) {
|
|
const n1 = sortedNodes[i];
|
|
const n2 = sortedNodes[i + 1];
|
|
if (t >= n1.time && t <= n2.time) {
|
|
const h = n2.time - n1.time;
|
|
if (h <= 0) return Math.pow(10, n1.db / 20);
|
|
const frac = (t - n1.time) / h;
|
|
const frac2 = frac * frac,
|
|
frac3 = frac2 * frac;
|
|
const db = (2 * frac3 - 3 * frac2 + 1) * n1.db + (frac3 - 2 * frac2 + frac) * h * tangents[i] + (-2 * frac3 + 3 * frac2) * n2.db + (frac3 - frac2) * h * tangents[i + 1];
|
|
return Math.pow(10, db / 20);
|
|
}
|
|
}
|
|
return 1.0;
|
|
};
|
|
for (let i = 0; i < resultData.length; i++) {
|
|
const t = i / sr;
|
|
resultData[i] *= getVolumeGainAtTime(t);
|
|
}
|
|
}
|
|
if (fx.normalizeDb !== 0) {
|
|
let maxVal = 0;
|
|
for (let i = 0; i < resultData.length; i++) {
|
|
const abs = Math.abs(resultData[i]);
|
|
if (abs > maxVal) maxVal = abs;
|
|
}
|
|
if (maxVal > 0) {
|
|
const targetAmp = Math.pow(10, fx.normalizeDb / 20);
|
|
const scale = targetAmp / maxVal;
|
|
for (let i = 0; i < resultData.length; i++) resultData[i] = Math.max(-1, Math.min(1, resultData[i] * scale));
|
|
}
|
|
}
|
|
if (fx.pitch !== 0) {
|
|
const ratio = Math.pow(2, fx.pitch / 12);
|
|
const newData = applyResample(resultData, 1 / ratio);
|
|
resultBuffer = ctx.createBuffer(1, newData.length, sr);
|
|
resultData = resultBuffer.getChannelData(0);
|
|
resultData.set(newData);
|
|
}
|
|
const stretchSpeed = subTab.speed || 1.0;
|
|
if (stretchSpeed !== 1.0) {
|
|
const ratio = 1.0 / stretchSpeed;
|
|
const newData = applyResample(resultData, ratio);
|
|
resultBuffer = ctx.createBuffer(1, newData.length, sr);
|
|
resultData = resultBuffer.getChannelData(0);
|
|
resultData.set(newData);
|
|
}
|
|
if (fx.speedStretch !== 100) {
|
|
const ratio = fx.speedStretch / 100;
|
|
const newData = applyResample(resultData, ratio);
|
|
resultBuffer = ctx.createBuffer(1, newData.length, sr);
|
|
resultData = resultBuffer.getChannelData(0);
|
|
resultData.set(newData);
|
|
}
|
|
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: resultBuffer,
|
|
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 < resultData.length; i++) {
|
|
const globalIdx = startSample + i;
|
|
let val = resultData[i];
|
|
if (i < crossfadeLen) {
|
|
const alpha = i / crossfadeLen;
|
|
val = (1 - alpha) * (origData[globalIdx] || 0) + alpha * resultData[i];
|
|
} else if (i > resultData.length - crossfadeLen) {
|
|
const distFromEnd = resultData.length - 1 - i;
|
|
const alpha = distFromEnd / crossfadeLen;
|
|
const origEndIdx = endSample - (resultData.length - i);
|
|
val = alpha * (origEndIdx >= 0 ? origData[origEndIdx] : 0) + (1 - alpha) * resultData[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 applySubTabEffect = (tabId, effectType, value) => {
|
|
const subTab = subTabs.find(s => s.id === tabId);
|
|
if (!subTab || !subTab.buffer) return;
|
|
const ctx = getAudioContext();
|
|
const sr = subTab.buffer.sampleRate;
|
|
const eff = subTab.buffer.getChannelData(0);
|
|
|
|
// Clone buffer
|
|
let resultBuffer = ctx.createBuffer(1, eff.length, sr);
|
|
let resultData = resultBuffer.getChannelData(0);
|
|
resultData.set(eff);
|
|
|
|
// Calculate selection start/end in unstretched sample indices
|
|
const speed = subTab.speed || 1.0;
|
|
const hasSelection = subTab.selectionStart !== null && subTab.selectionEnd !== null && subTab.selectionStart !== subTab.selectionEnd;
|
|
const tStart = hasSelection ? Math.min(subTab.selectionStart, subTab.selectionEnd) * speed : 0;
|
|
const tEnd = hasSelection ? Math.max(subTab.selectionStart, subTab.selectionEnd) * speed : subTab.buffer.duration;
|
|
const startSample = Math.max(0, Math.min(eff.length, Math.floor(tStart * sr)));
|
|
const endSample = Math.max(0, Math.min(eff.length, Math.floor(tEnd * sr)));
|
|
if (effectType === 'normalize') {
|
|
let maxVal = 0;
|
|
for (let i = startSample; i < endSample; i++) {
|
|
const abs = Math.abs(resultData[i]);
|
|
if (abs > maxVal) maxVal = abs;
|
|
}
|
|
if (maxVal > 0) {
|
|
const targetAmp = Math.pow(10, value / 20);
|
|
const scale = targetAmp / maxVal;
|
|
for (let i = startSample; i < endSample; i++) {
|
|
resultData[i] = Math.max(-1, Math.min(1, resultData[i] * scale));
|
|
}
|
|
}
|
|
} else if (effectType === 'gain') {
|
|
const gainScale = value / 100;
|
|
for (let i = startSample; i < endSample; i++) {
|
|
resultData[i] = Math.max(-1, Math.min(1, resultData[i] * gainScale));
|
|
}
|
|
} else if (effectType === 'pitch') {
|
|
const ratio = Math.pow(2, value / 12);
|
|
const applyResample = (data, r) => {
|
|
const newLen = Math.round(data.length * r);
|
|
const out = new Float32Array(newLen);
|
|
for (let i = 0; i < newLen; i++) {
|
|
const srcIdx = i / r;
|
|
const idx0 = Math.floor(srcIdx);
|
|
const idx1 = Math.min(idx0 + 1, data.length - 1);
|
|
const frac = srcIdx - idx0;
|
|
out[i] = data[idx0] * (1 - frac) + data[idx1] * frac;
|
|
}
|
|
return out;
|
|
};
|
|
const sub = resultData.slice(startSample, endSample);
|
|
const subResampled = applyResample(sub, 1 / ratio);
|
|
for (let i = 0; i < endSample - startSample; i++) {
|
|
resultData[startSample + i] = i < subResampled.length ? subResampled[i] : 0.0;
|
|
}
|
|
}
|
|
|
|
// Update subTab buffer state
|
|
setSubTabs(prev => prev.map(s => {
|
|
if (s.id !== tabId) return s;
|
|
return {
|
|
...s,
|
|
buffer: resultBuffer,
|
|
selectionStart: null,
|
|
selectionEnd: null
|
|
};
|
|
}));
|
|
showToast(`Đã áp dụng ${effectType === 'normalize' ? 'Normalize' : effectType === 'gain' ? 'Gain' : 'Pitch'} cho ${hasSelection ? 'vùng chọn' : 'toàn bộ clip'}.`, 'success');
|
|
};
|
|
const exportSubTabBuffer = async tabId => {
|
|
const subTab = subTabs.find(s => s.id === tabId);
|
|
if (!subTab || !subTab.buffer) return;
|
|
try {
|
|
const buffer = subTab.buffer;
|
|
const sr = buffer.sampleRate;
|
|
const monoData = buffer.getChannelData(0);
|
|
const bufferLength = monoData.length;
|
|
const bitDepth = 16;
|
|
const bytesPerSample = 2;
|
|
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, sr, true);
|
|
view.setUint32(28, sr * 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]));
|
|
view.setInt16(offset, Math.floor(sample < 0 ? sample * 0x8000 : sample * 0x7FFF), true);
|
|
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 = `${subTab.label || 'subtab-export'}.wav`;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
showToast("Xuất bản sub-tab hoàn tất!", "success");
|
|
} catch (err) {
|
|
showToast("Lỗi xuất âm thanh: " + err.message, "error");
|
|
}
|
|
};
|
|
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));
|
|
};
|
|
const handleSubTabNormalizeWithValue = (tabId, normalizeDb) => {
|
|
updateSubTabEffects(tabId, {
|
|
normalizeDb
|
|
});
|
|
};
|
|
const handleSubTabGainWithValue = (tabId, gainDb) => {
|
|
updateSubTabEffects(tabId, {
|
|
gainDb
|
|
});
|
|
};
|
|
const handleSubTabPitch = (tabId, pitch) => {
|
|
updateSubTabEffects(tabId, {
|
|
pitch
|
|
});
|
|
};
|
|
const handleSubTabStretch = (tabId, speedStretch) => {
|
|
updateSubTabEffects(tabId, {
|
|
speedStretch
|
|
});
|
|
};
|
|
const handleSubTabFadeState = (tabId, type) => {
|
|
const st = subTabs.find(s => s.id === tabId);
|
|
if (!st) return;
|
|
const fx = st.effects || {};
|
|
if (type === 'in') {
|
|
updateSubTabEffects(tabId, {
|
|
fadeInMs: (fx.fadeInMs || 0) + 10
|
|
});
|
|
} else if (type === 'out') {
|
|
updateSubTabEffects(tabId, {
|
|
fadeOutMs: (fx.fadeOutMs || 0) + 10
|
|
});
|
|
}
|
|
};
|
|
|
|
// ── 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 || !track.buffer) return;
|
|
const sr = track.buffer.sampleRate;
|
|
const data = track.buffer.getChannelData(0);
|
|
|
|
// Copy selected region if selection exists
|
|
if (selLeft !== null && selRight !== null && selRight > selLeft) {
|
|
const trackStart = track.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: track.name,
|
|
volumeDb: track.volumeDb,
|
|
pan: track.pan,
|
|
color: track.color
|
|
};
|
|
closeContextMenu();
|
|
showToast('Đã sao chép vùng chọn.', 'info');
|
|
return;
|
|
}
|
|
}
|
|
|
|
// No selection: copy entire track
|
|
clipboardRef.current = {
|
|
buffer: track.buffer,
|
|
name: track.name,
|
|
volumeDb: track.volumeDb,
|
|
pan: track.pan,
|
|
color: track.color
|
|
};
|
|
closeContextMenu();
|
|
showToast('Đã sao chép toàn bộ track.', '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,
|
|
volumeDb: t.volumeDb,
|
|
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,
|
|
volumeDb,
|
|
pan,
|
|
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,
|
|
volumeDb: volumeDb ?? t.volumeDb,
|
|
pan: pan ?? t.pan,
|
|
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],
|
|
volumeDb: volumeDb ?? 0,
|
|
pan: pan ?? 0,
|
|
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);
|
|
const volLinear = (t.volumeDb ?? 0) <= -50 ? 0 : Math.pow(10, (t.volumeDb ?? 0) / 20);
|
|
for (let i = 0; i < data.length; i++) {
|
|
if (startSample + i < mergedData.length) {
|
|
mergedData[startSample + i] += data[i] * volLinear;
|
|
}
|
|
}
|
|
});
|
|
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,
|
|
volumeDb: 0,
|
|
pan: 0,
|
|
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);
|
|
const volLinear = (t.volumeDb ?? 0) <= -50 ? 0 : Math.pow(10, (t.volumeDb ?? 0) / 20);
|
|
for (let i = 0; i < d.length; i++) {
|
|
if (startSample + i < mdata.length) {
|
|
mdata[startSample + i] += d[i] * volLinear;
|
|
}
|
|
}
|
|
});
|
|
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: 128,
|
|
volumeDb: 0,
|
|
pan: 0,
|
|
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,
|
|
volumeDb: t.volumeDb,
|
|
color: t.color
|
|
};
|
|
showToast('Copied selection to clipboard.', 'info');
|
|
return;
|
|
}
|
|
}
|
|
// No selection: copy entire track
|
|
clipboardRef.current = {
|
|
buffer: t.buffer,
|
|
name: t.name,
|
|
volumeDb: t.volumeDb,
|
|
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,
|
|
volumeDb: t.volumeDb,
|
|
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 zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
|
|
setZoom(prevZoom => {
|
|
let newZoom = prevZoom * zoomFactor;
|
|
if (newZoom < minZoom) newZoom = minZoom;
|
|
if (newZoom > 50000) newZoom = 50000;
|
|
requestAnimationFrame(() => {
|
|
const centerTime = currentTimeRef.current;
|
|
const newCenterX = centerTime * newZoom;
|
|
const viewportWidth = timeline.clientWidth;
|
|
timeline.scrollLeft = newCenterX - viewportWidth / 2;
|
|
});
|
|
return newZoom;
|
|
});
|
|
} else if (e.shiftKey) {
|
|
e.preventDefault();
|
|
timeline.scrollLeft += e.deltaY;
|
|
}
|
|
};
|
|
timeline.addEventListener('wheel', handleWheel, {
|
|
passive: false
|
|
});
|
|
return () => timeline.removeEventListener('wheel', handleWheel);
|
|
}, [minZoom]);
|
|
|
|
// ── Update Playhead ──
|
|
const startSubTabPlayback = (st, offsetWallTime) => {
|
|
const context = getAudioContext();
|
|
const speed = st.speed || 1.0;
|
|
const offsetBuffer = offsetWallTime * speed;
|
|
const eff = st.buffer.getChannelData(0);
|
|
const edBuffer = context.createBuffer(1, eff.length, st.buffer.sampleRate);
|
|
const edData = edBuffer.getChannelData(0);
|
|
edData.set(eff);
|
|
const fx = st.effects || {};
|
|
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);
|
|
}
|
|
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));
|
|
}
|
|
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);
|
|
}
|
|
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);
|
|
}
|
|
}
|
|
const source = context.createBufferSource();
|
|
source.buffer = edBuffer;
|
|
source.playbackRate.value = speed;
|
|
activePlaybackSpeedRef.current = speed;
|
|
|
|
// Graph Editor Automation Node Chain (15_GRAPH_EDIT.md §3)
|
|
// source → volumeGainNode → pannerNode → fadeGainNode → destination
|
|
|
|
const volumeGainNode = context.createGain();
|
|
volumeGainNode.gain.setValueAtTime(1.0, context.currentTime);
|
|
const pannerNode = context.createStereoPanner();
|
|
pannerNode.pan.setValueAtTime(0.0, context.currentTime);
|
|
const fadeGainNode = context.createGain();
|
|
fadeGainNode.gain.setValueAtTime(1.0, context.currentTime);
|
|
|
|
// Schedule volume automation nodes
|
|
const volNodes = st.volumeNodes || [];
|
|
if (volNodes.length > 0) {
|
|
volumeGainNode.gain.cancelScheduledValues(context.currentTime);
|
|
volNodes.forEach((n, i) => {
|
|
const t = context.currentTime + n.time / speed;
|
|
const linearGain = Math.pow(10, n.db / 20);
|
|
if (i === 0) volumeGainNode.gain.setValueAtTime(linearGain, t);else volumeGainNode.gain.linearRampToValueAtTime(linearGain, t);
|
|
});
|
|
}
|
|
|
|
// Schedule panning automation nodes
|
|
const panNodes = st.panningNodes || [];
|
|
if (panNodes.length > 0) {
|
|
pannerNode.pan.cancelScheduledValues(context.currentTime);
|
|
panNodes.forEach((n, i) => {
|
|
const t = context.currentTime + n.time / speed;
|
|
const clamped = Math.max(-1, Math.min(1, n.pan));
|
|
if (i === 0) pannerNode.pan.setValueAtTime(clamped, t);else pannerNode.pan.linearRampToValueAtTime(clamped, t);
|
|
});
|
|
}
|
|
|
|
// Schedule fade curves
|
|
const duration = st.buffer.duration;
|
|
const fIn = st.fadeInLen || 0;
|
|
const fOut = st.fadeOutLen || 0;
|
|
if (fIn > 0) {
|
|
fadeGainNode.gain.setValueAtTime(0.0, context.currentTime);
|
|
fadeGainNode.gain.linearRampToValueAtTime(1.0, context.currentTime + fIn / speed);
|
|
}
|
|
if (fOut > 0) {
|
|
const fadeOutStart = (duration - fOut) / speed;
|
|
fadeGainNode.gain.setValueAtTime(1.0, context.currentTime + Math.max(0, fadeOutStart));
|
|
fadeGainNode.gain.linearRampToValueAtTime(0.0, context.currentTime + duration / speed);
|
|
}
|
|
source.connect(volumeGainNode);
|
|
volumeGainNode.connect(pannerNode);
|
|
pannerNode.connect(fadeGainNode);
|
|
fadeGainNode.connect(context.destination);
|
|
source.start(context.currentTime, offsetBuffer);
|
|
activeSourcesRef.current = [source];
|
|
activeTrackNodesRef.current[st.trackId] = {
|
|
gainNode: volumeGainNode,
|
|
pannerNode,
|
|
source
|
|
};
|
|
startOffsetTimeRef.current = offsetWallTime;
|
|
startBufferOffsetRef.current = offsetBuffer;
|
|
startAudioTimeRef.current = context.currentTime;
|
|
};
|
|
const updatePlayhead = () => {
|
|
if (activeTabRef.current !== 'main') {
|
|
const st = subTabsRef.current.find(s => s.id === activeTabRef.current);
|
|
if (!st || !st.isPlaying || !st.buffer) return;
|
|
const context = getAudioContext();
|
|
const speedFactor = st.speed || 1.0;
|
|
const elapsed = context.currentTime - startAudioTimeRef.current;
|
|
const wallTime = startOffsetTimeRef.current + elapsed;
|
|
const bufferPos = startBufferOffsetRef.current + elapsed * speedFactor;
|
|
|
|
// Loop sub-tab selection (bufferPos is buffer-time)
|
|
if (st.selectionStart !== null && st.selectionEnd !== null && st.selectionStart !== st.selectionEnd) {
|
|
const start = Math.min(st.selectionStart, st.selectionEnd);
|
|
const end = Math.max(st.selectionStart, st.selectionEnd);
|
|
if (bufferPos >= end) {
|
|
stopAllPlayback();
|
|
setSubTabs(prev => prev.map(s => s.id === activeTabRef.current ? {
|
|
...s,
|
|
currentTime: wallTime,
|
|
isPlaying: true
|
|
} : s));
|
|
startSubTabPlayback(st, wallTime);
|
|
animationFrameIdRef.current = requestAnimationFrame(updatePlayhead);
|
|
return;
|
|
}
|
|
}
|
|
if (bufferPos >= st.buffer.duration) {
|
|
stopAllPlayback();
|
|
if (isLoopingSelection) {
|
|
setSubTabs(prev => prev.map(s => s.id === activeTabRef.current ? {
|
|
...s,
|
|
currentTime: 0,
|
|
isPlaying: true
|
|
} : s));
|
|
startSubTabPlayback(st, 0);
|
|
animationFrameIdRef.current = requestAnimationFrame(updatePlayhead);
|
|
} else {
|
|
setSubTabs(prev => prev.map(s => s.id === activeTabRef.current ? {
|
|
...s,
|
|
currentTime: 0,
|
|
isPlaying: false
|
|
} : s));
|
|
}
|
|
return;
|
|
}
|
|
setSubTabs(prev => prev.map(s => s.id === activeTabRef.current ? {
|
|
...s,
|
|
currentTime: wallTime
|
|
} : s));
|
|
animationFrameIdRef.current = requestAnimationFrame(updatePlayhead);
|
|
return;
|
|
}
|
|
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 || subTabs.some(s => s.isPlaying)) {
|
|
animationFrameIdRef.current = requestAnimationFrame(updatePlayhead);
|
|
} else {
|
|
cancelAnimationFrame(animationFrameIdRef.current);
|
|
}
|
|
return () => cancelAnimationFrame(animationFrameIdRef.current);
|
|
}, [isPlaying, subTabs, isLoopingSelection, selLeft, selRight, selectionMode, localSelectionTrackId, selectionCleared, activeTab]);
|
|
|
|
// ── 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;
|
|
|
|
// Create persistent gain & panner per track for real-time control
|
|
const gainNode = context.createGain();
|
|
const volDb = track.volumeDb ?? 0;
|
|
const volLinear = volDb <= -50 ? 0 : Math.pow(10, volDb / 20);
|
|
gainNode.gain.setValueAtTime(volLinear, context.currentTime);
|
|
const pannerNode = context.createStereoPanner();
|
|
pannerNode.pan.setValueAtTime((track.pan ?? 0) / 100, context.currentTime);
|
|
pannerNode.connect(context.destination);
|
|
activeTrackNodesRef.current[track.id] = {
|
|
gainNode,
|
|
pannerNode
|
|
};
|
|
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;
|
|
source.connect(gainNode);
|
|
gainNode.connect(pannerNode);
|
|
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
|
|
}] : [];
|
|
|
|
// Create persistent gain & panner for real-time control
|
|
const gainNode = context.createGain();
|
|
const volDb = track.volumeDb ?? 0;
|
|
const volLinear = volDb <= -50 ? 0 : Math.pow(10, volDb / 20);
|
|
gainNode.gain.setValueAtTime(volLinear, context.currentTime);
|
|
const pannerNode = context.createStereoPanner();
|
|
pannerNode.pan.setValueAtTime((track.pan ?? 0) / 100, context.currentTime);
|
|
pannerNode.connect(context.destination);
|
|
activeTrackNodesRef.current[trackId] = {
|
|
gainNode,
|
|
pannerNode
|
|
};
|
|
clips.forEach(clip => {
|
|
if (!clip.buffer) return;
|
|
const source = context.createBufferSource();
|
|
source.buffer = clip.buffer;
|
|
source.playbackRate.value = clip.speed || 1.0;
|
|
source.connect(gainNode);
|
|
gainNode.connect(pannerNode);
|
|
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 = () => {
|
|
if (activeTab !== 'main') {
|
|
// Sub-tab playback transport
|
|
const st = subTabs.find(s => s.id === activeTab);
|
|
if (!st || !st.buffer) return;
|
|
if (st.isPlaying) {
|
|
stopAllPlayback();
|
|
setSubTabs(prev => prev.map(s => s.id === activeTab ? {
|
|
...s,
|
|
isPlaying: false
|
|
} : s));
|
|
} else {
|
|
stopAllPlayback();
|
|
const startOffset = st.currentTime || 0;
|
|
startSubTabPlayback(st, startOffset);
|
|
setSubTabs(prev => prev.map(s => s.id === activeTab ? {
|
|
...s,
|
|
isPlaying: true,
|
|
currentTime: startOffset
|
|
} : s));
|
|
}
|
|
return;
|
|
}
|
|
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 || subTabs.some(s => s.isPlaying)) stopAllPlayback();
|
|
};
|
|
const stopAllPlayback = () => {
|
|
activeSourcesRef.current.forEach(src => {
|
|
try {
|
|
src.stop();
|
|
} catch (e) {}
|
|
});
|
|
activeSourcesRef.current = [];
|
|
activeTrackNodesRef.current = {};
|
|
setIsPlaying(false);
|
|
setSubTabs(prev => prev.map(s => ({
|
|
...s,
|
|
isPlaying: false
|
|
})));
|
|
};
|
|
const handleStop = () => {
|
|
stopAllPlayback();
|
|
if (activeTab !== 'main') {
|
|
setSubTabs(prev => prev.map(s => s.id === activeTab ? {
|
|
...s,
|
|
currentTime: 0
|
|
} : s));
|
|
} else {
|
|
setCurrentTime(0);
|
|
}
|
|
};
|
|
const handleSubTabResizeMouseDown = e => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const startY = e.clientY;
|
|
const startHeight = subTabHeight;
|
|
const handleMouseMove = moveEvent => {
|
|
const deltaY = moveEvent.clientY - startY;
|
|
const newHeight = Math.max(48, Math.min(400, startHeight + deltaY));
|
|
setSubTabHeight(newHeight);
|
|
};
|
|
const handleMouseUp = () => {
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
};
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
};
|
|
|
|
// ── Playhead set with seek+play ──
|
|
const handlePlayheadSet = (time, shiftKey) => {
|
|
localSelectionAnchorRef.current = time;
|
|
if (isPlaying) {
|
|
// Click during playback: seek to position and continue playing
|
|
setCurrentTime(time);
|
|
stopAllPlayback();
|
|
setTimeout(() => {
|
|
startOffsetTimeRef.current = time;
|
|
startAudioTimeRef.current = getAudioContext().currentTime;
|
|
startTrackPlayback(time);
|
|
setIsPlaying(true);
|
|
}, 50);
|
|
} else {
|
|
// Normal click: just set playhead
|
|
setCurrentTime(time);
|
|
}
|
|
};
|
|
const clearLocalSelection = () => {
|
|
setSelectionMode(null);
|
|
setLocalSelectionTrackId(null);
|
|
setLocalSelectionStart(null);
|
|
setLocalSelectionEnd(null);
|
|
};
|
|
const handleRulerMouseDown = e => {
|
|
if (e.ctrlKey) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
clearLocalSelection();
|
|
setSelectionMode(null);
|
|
setSelectionStart(null);
|
|
setSelectionEnd(null);
|
|
return;
|
|
}
|
|
const wrapper = timelineWrapperRef.current;
|
|
if (!wrapper) return;
|
|
const rect = wrapper.getBoundingClientRect();
|
|
const scrollLeft = wrapper.scrollLeft;
|
|
const mouseX = e.clientX - rect.left + scrollLeft;
|
|
const rawTime = mouseX / zoom;
|
|
const time = snapValue !== 'free' ? snapTime(rawTime, snapValue, bpm) : rawTime;
|
|
clearLocalSelection();
|
|
setSelectionMode('global');
|
|
rulerDragStartRef.current = time;
|
|
isDraggingRulerRef.current = true;
|
|
if (e.shiftKey) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
// Shift+click on ruler: lock existing anchor (or currentTime fallback) and extend global selection
|
|
const anchor = rulerAnchorRef.current !== null && rulerAnchorRef.current !== undefined ? rulerAnchorRef.current : selectionStart !== null && selectionStart !== undefined ? selectionStart : currentTime;
|
|
const selS = Math.min(anchor, time);
|
|
const selE = Math.max(anchor, time);
|
|
setSelectionStart(selS);
|
|
setSelectionEnd(selE);
|
|
} else {
|
|
rulerAnchorRef.current = time;
|
|
setSelectionStart(time);
|
|
setSelectionEnd(time);
|
|
}
|
|
handlePlayheadSet(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 rawTime = Math.max(0, Math.min(maxDuration, mouseX / zoom));
|
|
const time = snapValueRef.current !== 'free' ? snapTime(rawTime, snapValueRef.current, bpmRef.current) : rawTime;
|
|
const anchor = rulerAnchorRef.current ?? rulerDragStartRef.current ?? time;
|
|
setSelectionStart(Math.min(anchor, time));
|
|
setSelectionEnd(Math.max(anchor, 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 localSelectionAnchorRef = useRef(null);
|
|
const handleTrackLaneMouseDown = (trackId, time) => {
|
|
setSelectedTrackId(trackId);
|
|
clearLocalSelection();
|
|
localSelectionAnchorRef.current = time;
|
|
setSelectionMode('local');
|
|
setLocalSelectionTrackId(trackId);
|
|
setLocalSelectionStart(time);
|
|
setLocalSelectionEnd(time);
|
|
setSelectionStart(time);
|
|
setSelectionEnd(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));
|
|
const anchor = localSelectionAnchorRef.current ?? localDragStartTimeRef.current;
|
|
const selS = Math.min(anchor, time);
|
|
const selE = Math.max(anchor, time);
|
|
setLocalSelectionStart(selS);
|
|
setLocalSelectionEnd(selE);
|
|
setSelectionStart(selS);
|
|
setSelectionEnd(selE);
|
|
};
|
|
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(110, Math.min(300, 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 updateTrackVolumeDb = (trackId, val) => {
|
|
const beforeSnap = captureTrackSnapshot(trackId);
|
|
setTracks(prev => prev.map(t => t.id === trackId ? {
|
|
...t,
|
|
volumeDb: 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;
|
|
});
|
|
// Real-time update during playback
|
|
const nodes = activeTrackNodesRef.current[trackId];
|
|
if (nodes) {
|
|
const volLinear = val <= -50 ? 0 : Math.pow(10, val / 20);
|
|
nodes.gainNode.gain.setValueAtTime(volLinear, getAudioContext().currentTime);
|
|
}
|
|
};
|
|
const updateTrackPan = (trackId, val) => {
|
|
const beforeSnap = captureTrackSnapshot(trackId);
|
|
setTracks(prev => prev.map(t => t.id === trackId ? {
|
|
...t,
|
|
pan: val
|
|
} : t));
|
|
setUndoStack(prev => {
|
|
const next = [...prev, {
|
|
action_type: 'PAN_CHANGE',
|
|
track_id: trackId,
|
|
timestamp: Date.now(),
|
|
before_state: beforeSnap,
|
|
after_state: captureTrackSnapshot(trackId)
|
|
}];
|
|
if (next.length > MAX_UNDO) next.shift();
|
|
return next;
|
|
});
|
|
// Real-time update during playback
|
|
const nodes = activeTrackNodesRef.current[trackId];
|
|
if (nodes) {
|
|
nodes.pannerNode.pan.setValueAtTime(val / 100, getAudioContext().currentTime);
|
|
}
|
|
};
|
|
const updateTrackName = (trackId, name) => {
|
|
const beforeSnap = captureTrackSnapshot(trackId);
|
|
setTracks(prev => prev.map(t => t.id === trackId ? {
|
|
...t,
|
|
name
|
|
} : t));
|
|
setUndoStack(prev => {
|
|
const next = [...prev, {
|
|
action_type: 'RENAME',
|
|
track_id: trackId,
|
|
timestamp: Date.now(),
|
|
before_state: beforeSnap,
|
|
after_state: captureTrackSnapshot(trackId)
|
|
}];
|
|
if (next.length > MAX_UNDO) next.shift();
|
|
return next;
|
|
});
|
|
};
|
|
const updateTrackColor = (trackId, color) => {
|
|
const beforeSnap = captureTrackSnapshot(trackId);
|
|
setTracks(prev => prev.map(t => t.id === trackId ? {
|
|
...t,
|
|
color
|
|
} : t));
|
|
setUndoStack(prev => {
|
|
const next = [...prev, {
|
|
action_type: 'RECOLOR',
|
|
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;
|
|
showToast(`Đang nạp file ${file.name}...`, 'info');
|
|
try {
|
|
// Upload to server
|
|
uploadToServer(file, trackId);
|
|
|
|
// Decode locally for playback + analyze channels (stereo/mono)
|
|
const {
|
|
audioBuffer: decodedBuffer,
|
|
channelInfo
|
|
} = await window.SonicAudio.decodeAudioFile(file);
|
|
setTracks(prev => prev.map(t => t.id === trackId ? {
|
|
...t,
|
|
name: file.name,
|
|
buffer: decodedBuffer,
|
|
channelInfo: channelInfo
|
|
} : t));
|
|
showToast(`Nạp file thành công: ${file.name} (${channelInfo.label})`, 'success');
|
|
} catch (err) {
|
|
showToast("Lỗi giải mã âm thanh. Định dạng file không tương thích.", '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: 128,
|
|
volumeDb: 0,
|
|
pan: 0,
|
|
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_db: t.volumeDb,
|
|
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 handleSaveCloud = async () => {
|
|
if (!currentUser) {
|
|
setIsMandatoryLogin(false);
|
|
setAuthMode('login');
|
|
setAuthModalOpen(true);
|
|
return;
|
|
}
|
|
const name = prompt("Nhập tên dự án để lưu lên Cloud:", "Dự án SonicForge");
|
|
if (!name) return;
|
|
const serializeSafe = arr => (arr || []).map(t => ({
|
|
id: t.id,
|
|
name: t.name,
|
|
startTime: t.startTime,
|
|
height: t.height,
|
|
volumeDb: t.volumeDb,
|
|
pan: t.pan,
|
|
muted: t.muted,
|
|
solo: t.solo,
|
|
color: t.color,
|
|
markers: t.markers || [],
|
|
serverFileId: t.serverFileId || null,
|
|
channelInfo: t.channelInfo ? {
|
|
channels: t.channelInfo.channels,
|
|
isStereo: t.channelInfo.isStereo,
|
|
label: t.channelInfo.label
|
|
} : null
|
|
}));
|
|
try {
|
|
const dataJson = JSON.stringify({
|
|
id: 'cloud_project',
|
|
name,
|
|
tracks: serializeSafe(tracks)
|
|
});
|
|
await window.SonicAPI.saveCloudProject(name, dataJson);
|
|
showToast("Đã lưu dự án lên Cloud thành công!", "success");
|
|
} catch (err) {
|
|
showToast(err.message || "Lỗi lưu Cloud", "error");
|
|
}
|
|
};
|
|
const handleExportSFS = () => {
|
|
const serializeSafe = arr => (arr || []).map(t => ({
|
|
id: t.id,
|
|
name: t.name,
|
|
startTime: t.startTime,
|
|
height: t.height,
|
|
volumeDb: t.volumeDb,
|
|
pan: t.pan,
|
|
muted: t.muted,
|
|
solo: t.solo,
|
|
color: t.color,
|
|
markers: t.markers || [],
|
|
serverFileId: t.serverFileId || null,
|
|
channelInfo: t.channelInfo ? {
|
|
channels: t.channelInfo.channels,
|
|
isStereo: t.channelInfo.isStereo,
|
|
label: t.channelInfo.label
|
|
} : null
|
|
}));
|
|
window.SonicStorage.exportProjectToSFS({
|
|
id: 'proj_' + Date.now(),
|
|
name: 'Dự án SonicForge',
|
|
tracks: serializeSafe(tracks)
|
|
});
|
|
showToast("Đã xuất dự án (.sfs) thành công!", "success");
|
|
};
|
|
const handleImportSFS = () => {
|
|
const input = document.createElement('input');
|
|
input.type = 'file';
|
|
input.accept = '.sfs,application/json';
|
|
input.onchange = async e => {
|
|
if (!e.target.files[0]) return;
|
|
try {
|
|
const proj = await window.SonicStorage.importProjectFromSFSFile(e.target.files[0]);
|
|
const restored = (proj.tracks || []).map(t => ({
|
|
...t,
|
|
buffer: null,
|
|
channelInfo: t.channelInfo || null,
|
|
clips: t.clips || [],
|
|
serverFileId: t.serverFileId || null
|
|
}));
|
|
if (restored.length > 0) {
|
|
setTracks(restored);
|
|
showToast(`Đã nạp dự án "${proj.name}" từ tệp .sfs thành công!`, "success");
|
|
}
|
|
} catch (err) {
|
|
showToast(err.message || "Lỗi mở tệp .sfs", "error");
|
|
}
|
|
};
|
|
input.click();
|
|
};
|
|
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();
|
|
const volDb = t.volumeDb ?? 0;
|
|
const volLinear = volDb <= -50 ? 0 : Math.pow(10, volDb / 20);
|
|
gain.gain.setValueAtTime(volLinear, 0);
|
|
const panner = offlineCtx.createStereoPanner();
|
|
panner.pan.setValueAtTime((t.pan ?? 0) / 100, 0);
|
|
source.connect(gain);
|
|
gain.connect(panner);
|
|
panner.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);
|
|
};
|
|
|
|
// ── AI Analysic Loop: scan track, detect beats, place markers for loop selection ──
|
|
const handleAIAnalysicLoop = async () => {
|
|
const forcedTrackId = subTabAiTrackIdRef.current;
|
|
subTabAiTrackIdRef.current = null;
|
|
const activeTrackId = forcedTrackId || selectedTrackId;
|
|
const activeTrack = tracks.find(t => t.id === activeTrackId);
|
|
if (!activeTrack || !activeTrack.buffer) {
|
|
showToast("Vui lòng chọn một Track có âm thanh để AI phân tích.", "warning");
|
|
return;
|
|
}
|
|
setAnalysisState({
|
|
status: 'AI Analysic Loop: đang phát hiện nhịp...',
|
|
data: null,
|
|
isRunning: true
|
|
});
|
|
showToast("AI Analysic Loop: đang quét cấu trúc nhịp điệu...", "info");
|
|
try {
|
|
const buffer = activeTrack.buffer;
|
|
const data = buffer.getChannelData(0);
|
|
const sr = buffer.sampleRate;
|
|
const windowSize = Math.min(sr * 3, data.length);
|
|
|
|
// Client-side BPM detection via autocorrelation
|
|
let detectedBPM = 120;
|
|
if (windowSize > sr) {
|
|
let maxCorr = 0;
|
|
for (let lag = Math.floor(sr * 0.3); lag <= Math.floor(sr * 2.0); lag++) {
|
|
let corr = 0;
|
|
const step = 4;
|
|
for (let i = 0; i < windowSize && i + lag < data.length; i += step) {
|
|
corr += data[i] * data[i + lag];
|
|
}
|
|
corr /= windowSize / step;
|
|
if (corr > maxCorr) {
|
|
maxCorr = corr;
|
|
detectedBPM = 60 / (lag / sr);
|
|
}
|
|
}
|
|
}
|
|
detectedBPM = Math.round(Math.min(240, Math.max(60, detectedBPM)));
|
|
const beatDuration = 60 / detectedBPM;
|
|
const barDuration = beatDuration * 4;
|
|
const totalDuration = buffer.duration;
|
|
|
|
// Place markers at each bar (strong beat) position
|
|
const barMarkers = [];
|
|
for (let t = 0; t < totalDuration; t += barDuration) {
|
|
const zcTime = findZeroCrossing(buffer, t);
|
|
barMarkers.push({
|
|
id: 'ai_bar_' + barMarkers.length + '_' + Date.now(),
|
|
time: zcTime,
|
|
label: `Bar ${barMarkers.length + 1}`,
|
|
color: '#06b6d4'
|
|
});
|
|
// Add beat markers within each bar
|
|
for (let b = 1; b < 4; b++) {
|
|
const bt = t + b * beatDuration;
|
|
if (bt < totalDuration) {
|
|
const zcBt = findZeroCrossing(buffer, bt);
|
|
barMarkers.push({
|
|
id: 'ai_beat_' + barMarkers.length + '_' + Date.now(),
|
|
time: zcBt,
|
|
label: `Beat ${b + 1}`,
|
|
color: '#a855f7'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
setTracks(prev => prev.map(t => {
|
|
if (t.id !== activeTrack.id) return t;
|
|
const existingMarkers = t.markers || [];
|
|
return {
|
|
...t,
|
|
markers: [...existingMarkers, ...barMarkers]
|
|
};
|
|
}));
|
|
|
|
// Find the first strong beat to set as selection start
|
|
const firstBeat = barMarkers.length > 0 ? barMarkers[0].time : 0;
|
|
const secondBar = barMarkers.length > 4 ? barMarkers[Math.min(4, barMarkers.length - 1)].time : Math.min(totalDuration, firstBeat + barDuration);
|
|
setSelectionStart(firstBeat);
|
|
setSelectionEnd(secondBar);
|
|
setAnalysisState({
|
|
status: `AI Analysic Loop: ${detectedBPM} BPM, ${barMarkers.length} markers (Bar/Beat)`,
|
|
data: {
|
|
bpm: detectedBPM,
|
|
bars: Math.floor(totalDuration / barDuration)
|
|
},
|
|
isRunning: false
|
|
});
|
|
showToast(`AI Analysic Loop: ${detectedBPM} BPM - ${Math.floor(totalDuration / barDuration)} bars detected`, "success");
|
|
} catch (err) {
|
|
setAnalysisState({
|
|
status: 'Lỗi AI Analysic Loop',
|
|
data: null,
|
|
isRunning: false
|
|
});
|
|
showToast(err.message || 'Lỗi khi phân tích nhịp', 'error');
|
|
}
|
|
};
|
|
// ── Mark Selection ──
|
|
// ── Helper: set selection range from buffer (used by sub-tab AI) ──
|
|
const setSelectionRangeOnBuffer = (buffer, startTime, endTime) => {
|
|
setSelectionStart(startTime);
|
|
setSelectionEnd(endTime);
|
|
};
|
|
|
|
// Ref for forced trackId (used by sub-tab AI buttons, overrides selectedTrackId)
|
|
const subTabAiTrackIdRef = useRef(null);
|
|
const handleAIScan = async () => {
|
|
// Resolve track: prefer sub-tab override, then selectedTrackId
|
|
const forcedTrackId = subTabAiTrackIdRef.current;
|
|
subTabAiTrackIdRef.current = null;
|
|
const activeTrackId = forcedTrackId || selectedTrackId;
|
|
const activeTrack = tracks.find(t => t.id === activeTrackId);
|
|
if (!activeTrack || !activeTrack.buffer) {
|
|
showToast("Vui lòng chọn một Track có âm thanh để AI quét Loop.", "warning");
|
|
return;
|
|
}
|
|
setAnalysisState({
|
|
status: 'AI Loop Scan đang quét nhịp điệu và phách mạnh...',
|
|
data: null,
|
|
isRunning: true
|
|
});
|
|
showToast("AI Scan đang phân tích tempo và phách mạnh...", "info");
|
|
try {
|
|
const buffer = activeTrack.buffer;
|
|
const data = buffer.getChannelData(0);
|
|
const sr = buffer.sampleRate;
|
|
const windowSize = Math.min(sr * 3, data.length);
|
|
|
|
// Detect BPM via autocorrelation
|
|
let detectedBPM = 120;
|
|
if (windowSize > sr) {
|
|
let maxCorr = 0;
|
|
for (let lag = Math.floor(sr * 0.3); lag <= Math.floor(sr * 2.0); lag++) {
|
|
let corr = 0;
|
|
const step = 4;
|
|
for (let i = 0; i < windowSize && i + lag < data.length; i += step) {
|
|
corr += data[i] * data[i + lag];
|
|
}
|
|
corr /= windowSize / step;
|
|
if (corr > maxCorr) {
|
|
maxCorr = corr;
|
|
detectedBPM = 60 / (lag / sr);
|
|
}
|
|
}
|
|
}
|
|
detectedBPM = Math.round(Math.min(240, Math.max(60, detectedBPM)));
|
|
|
|
// Calculate bar grid
|
|
const beatDuration = 60 / detectedBPM;
|
|
const barDuration = beatDuration * 4;
|
|
const totalDuration = buffer.duration;
|
|
|
|
// Place markers at bar starts (strong beats / downbeats)
|
|
const barMarkers = [];
|
|
for (let t = 0; t < totalDuration; t += barDuration) {
|
|
const zcTime = findZeroCrossing(buffer, t);
|
|
barMarkers.push({
|
|
id: 'ai_bar_' + barMarkers.length + '_' + Date.now(),
|
|
time: zcTime,
|
|
label: `Downbeat ${barMarkers.length + 1}`,
|
|
color: '#06b6d4'
|
|
});
|
|
}
|
|
setTracks(prev => prev.map(t => {
|
|
if (t.id !== activeTrack.id) return t;
|
|
const existingMarkers = t.markers || [];
|
|
return {
|
|
...t,
|
|
markers: [...existingMarkers, ...barMarkers]
|
|
};
|
|
}));
|
|
|
|
// Set selection to the first downbeat
|
|
const firstBarStart = barMarkers.length > 0 ? barMarkers[0].time : 0;
|
|
const secondBarStart = barMarkers.length > 1 ? barMarkers[1].time : Math.min(totalDuration, firstBarStart + barDuration);
|
|
setSelectionStart(firstBarStart);
|
|
setSelectionEnd(secondBarStart);
|
|
setAnalysisState({
|
|
status: `AI Scan: ${detectedBPM} BPM, ${barMarkers.length} downbeats (đã snap zero-crossing)`,
|
|
data: {
|
|
bpm: detectedBPM
|
|
},
|
|
isRunning: false
|
|
});
|
|
showToast(`AI Scan: ${detectedBPM} BPM - ${barMarkers.length} downbeats detected`, "success");
|
|
} catch (err) {
|
|
setAnalysisState({
|
|
status: 'Lỗi khi AI Scan',
|
|
data: null,
|
|
isRunning: false
|
|
});
|
|
showToast(err.message || 'Lỗi khi quét AI Loop', 'error');
|
|
}
|
|
};
|
|
const runPythonTool = async toolType => {
|
|
const activeTrack = tracks.find(t => t.id === selectedTrackId);
|
|
if (!activeTrack || !activeTrack.buffer) {
|
|
showToast("Vui lòng chọn một Track để xử lý công cụ Python.", "warning");
|
|
return;
|
|
}
|
|
try {
|
|
if (toolType === 'normalize') {
|
|
const channelData = activeTrack.buffer.getChannelData(0);
|
|
let maxVal = 0;
|
|
for (let i = 0; i < channelData.length; i++) {
|
|
maxVal = Math.max(maxVal, Math.abs(channelData[i]));
|
|
}
|
|
if (maxVal > 0) {
|
|
const gain = 1.0 / maxVal;
|
|
for (let i = 0; i < channelData.length; i++) {
|
|
channelData[i] *= gain;
|
|
}
|
|
}
|
|
showToast("Đã Chuẩn Hóa Peak âm thanh về 0 dB!", "success");
|
|
} else if (toolType === 'invert_phase') {
|
|
const channelData = activeTrack.buffer.getChannelData(0);
|
|
for (let i = 0; i < channelData.length; i++) {
|
|
channelData[i] *= -1;
|
|
}
|
|
showToast("Đã Đảo Pha (180°) âm thanh thành công!", "success");
|
|
} else if (toolType === 'swap_channels') {
|
|
if (activeTrack.buffer.numberOfChannels >= 2) {
|
|
const left = activeTrack.buffer.getChannelData(0);
|
|
const right = activeTrack.buffer.getChannelData(1);
|
|
for (let i = 0; i < left.length; i++) {
|
|
const temp = left[i];
|
|
left[i] = right[i];
|
|
right[i] = temp;
|
|
}
|
|
showToast("Đã Đổi Kênh Left / Right thành công!", "success");
|
|
} else {
|
|
showToast("Track hiện tại là Mono. Chỉ áp dụng Đổi Kênh cho Stereo.", "info");
|
|
}
|
|
} else if (toolType === 'synth_wave') {
|
|
generateSynthToTrack(activeTrack.id, 'synth');
|
|
showToast("Đã tạo Tín Hiệu Sóng Tổng Hợp bằng công cụ Python!", "success");
|
|
}
|
|
} catch (err) {
|
|
showToast(err.message || "Lỗi khi chạy công cụ Python", "error");
|
|
}
|
|
};
|
|
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 (Music Theory Loop Detection) ──
|
|
const handleAICutToNewTrack = () => {
|
|
const forcedTrackId = subTabAiTrackIdRef.current;
|
|
subTabAiTrackIdRef.current = null;
|
|
const activeTrackId = forcedTrackId || selectedTrackId;
|
|
const activeTrack = tracks.find(t => t.id === activeTrackId);
|
|
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 Cut: đang phân tích nhịp và tìm loop point...',
|
|
data: null,
|
|
isRunning: true
|
|
});
|
|
showToast("AI Cut: đang phân tích nhịp điệu và tìm điểm loop chính xác...", "info");
|
|
setTimeout(() => {
|
|
try {
|
|
const buffer = activeTrack.buffer;
|
|
const sampleRate = buffer.sampleRate;
|
|
const channelData = buffer.getChannelData(0);
|
|
const dataLen = channelData.length;
|
|
const windowSize = Math.min(sampleRate * 3, dataLen);
|
|
|
|
// Detect BPM via autocorrelation
|
|
let detectedBPM = 120;
|
|
if (windowSize > sampleRate) {
|
|
let maxCorr = 0;
|
|
for (let lag = Math.floor(sampleRate * 0.3); lag <= Math.floor(sampleRate * 2.0); lag++) {
|
|
let corr = 0;
|
|
const step = 4;
|
|
for (let i = 0; i < windowSize && i + lag < dataLen; i += step) {
|
|
corr += channelData[i] * channelData[i + lag];
|
|
}
|
|
corr /= windowSize / step;
|
|
if (corr > maxCorr) {
|
|
maxCorr = corr;
|
|
detectedBPM = 60 / (lag / sampleRate);
|
|
}
|
|
}
|
|
}
|
|
detectedBPM = Math.round(Math.min(240, Math.max(60, detectedBPM)));
|
|
const beatDuration = 60 / detectedBPM;
|
|
const barDuration = beatDuration * 4;
|
|
|
|
// Use the selection range
|
|
const rawStart = selectionStats.start;
|
|
const rawEnd = selectionStats.end;
|
|
const selDuration = rawEnd - rawStart;
|
|
|
|
// Find the nearest bar start (downbeat) for loop start
|
|
const barsFromZero = rawStart / barDuration;
|
|
const nearestBarStart = Math.round(barsFromZero) * barDuration;
|
|
const loopStart = Math.max(0, Math.min(rawStart + barDuration, nearestBarStart));
|
|
|
|
// Find the nearest beat 4 (bar end) for loop end
|
|
// In 4/4 time: beat 4 = barStart + 3*beatDuration = barEnd
|
|
const barsFromStart = rawEnd / barDuration;
|
|
const nearestBarEnd = Math.round(barsFromStart) * barDuration;
|
|
// Ensure minimum 1 bar loop
|
|
let loopEnd = Math.max(loopStart + barDuration, nearestBarEnd);
|
|
if (loopEnd > rawEnd + beatDuration) loopEnd = loopStart + Math.ceil(selDuration / barDuration) * barDuration;
|
|
|
|
// Snap to zero-crossing for click-free loop
|
|
const snapLoopStart = findZeroCrossing(buffer, loopStart);
|
|
const snapLoopEnd = findZeroCrossing(buffer, loopEnd);
|
|
|
|
// Place markers for the loop points
|
|
setTracks(prev => prev.map(t => {
|
|
if (t.id !== activeTrack.id) return t;
|
|
const existingMarkers = t.markers || [];
|
|
const filtered = existingMarkers.filter(m => !m.id.startsWith('ai_loop_'));
|
|
return {
|
|
...t,
|
|
markers: [...filtered, {
|
|
id: 'ai_loop_start_' + Date.now(),
|
|
time: snapLoopStart,
|
|
label: 'Loop Start (Bar ' + (Math.floor(snapLoopStart / barDuration) + 1) + ')',
|
|
color: '#06b6d4'
|
|
}, {
|
|
id: 'ai_loop_end_' + Date.now(),
|
|
time: snapLoopEnd,
|
|
label: 'Loop End (Beat 4)',
|
|
color: '#a855f7'
|
|
}]
|
|
};
|
|
}));
|
|
setSelectionStart(snapLoopStart);
|
|
setSelectionEnd(snapLoopEnd);
|
|
const startSample = Math.max(0, Math.min(dataLen - 1, Math.floor(snapLoopStart * sampleRate)));
|
|
const endSample = Math.max(0, Math.min(dataLen, Math.floor(snapLoopEnd * 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;
|
|
}
|
|
const context = getAudioContext();
|
|
const numChannels = buffer.numberOfChannels || 1;
|
|
const slicedBuffer = context.createBuffer(numChannels, sliceLength, sampleRate);
|
|
for (let c = 0; c < numChannels; c++) {
|
|
const srcData = buffer.getChannelData(c);
|
|
const dstData = slicedBuffer.getChannelData(c);
|
|
dstData.set(srcData.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 barNum = Math.floor(snapLoopStart / barDuration) + 1;
|
|
const barsCount = Math.max(1, Math.round((snapLoopEnd - snapLoopStart) / barDuration));
|
|
const newTrack = {
|
|
id: newId,
|
|
name: `Loop_${barNum}bar_${activeTrack.name.replace('.wav', '').slice(0, 10)}_${snapLoopStart.toFixed(1)}s.wav`,
|
|
buffer: slicedBuffer,
|
|
channelInfo: activeTrack.channelInfo ? {
|
|
...activeTrack.channelInfo
|
|
} : null,
|
|
startTime: snapLoopStart,
|
|
clips: [{
|
|
id: 'clip_' + newId,
|
|
buffer: slicedBuffer,
|
|
startTime: snapLoopStart,
|
|
name: `Loop_${barNum}bar_${snapLoopStart.toFixed(1)}s`
|
|
}],
|
|
volumeDb: 0,
|
|
pan: 0,
|
|
muted: false,
|
|
solo: false,
|
|
color: selectColor,
|
|
markers: [{
|
|
id: Date.now() + '_s',
|
|
time: 0
|
|
}, {
|
|
id: Date.now() + '_e',
|
|
time: snapLoopEnd - snapLoopStart
|
|
}],
|
|
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: `AI Cut: ${detectedBPM} BPM, ${barsCount} bars loop (Zero-Crossing aligned)`,
|
|
data: {
|
|
bpm: detectedBPM,
|
|
bars: barsCount,
|
|
timeSig: '4/4'
|
|
},
|
|
isRunning: false
|
|
});
|
|
showToast(`AI Cut: ${barsCount} bars loop at ${snapLoopStart.toFixed(3)}s - ${snapLoopEnd.toFixed(3)}s [${detectedBPM} BPM]`, "success");
|
|
setTimeout(() => lucide.createIcons(), 200);
|
|
} catch (err) {
|
|
showToast("Lỗi khi AI Cut: " + err.message, "error");
|
|
setAnalysisState({
|
|
status: 'Lỗi AI Cut',
|
|
data: null,
|
|
isRunning: false
|
|
});
|
|
}
|
|
}, 800);
|
|
};
|
|
|
|
// ── AI Prompt Send to Active Provider ──
|
|
const handleAISend = async () => {
|
|
const prompt = aiPrompt.trim();
|
|
if (!prompt) {
|
|
showToast('Vui lòng nhập nội dung prompt.', 'warning');
|
|
return;
|
|
}
|
|
setAiProcessing(true);
|
|
setAiActionLog(prev => [...prev, {
|
|
type: 'status',
|
|
text: ` ⏳ Đang gửi prompt đến AI...`,
|
|
time: Date.now()
|
|
}]);
|
|
try {
|
|
const selectedProvider = aiProviders.find(p => p.id === selectedProviderId) || (aiProviders.length > 0 ? aiProviders[0] : null);
|
|
const provider = selectedProvider || aiConfig;
|
|
const baseUrl = provider.api_base_url || provider.baseUrl || `${API_BASE_URL}`;
|
|
const apiKey = provider.api_key || provider.apiKey || '';
|
|
const model = provider.model_name || provider.model || 'deepseek-chat';
|
|
const dawContext = window.AIGateway.buildAIPromptContext({
|
|
tracks,
|
|
bpm,
|
|
selectedTrackId,
|
|
currentTime,
|
|
selLeft,
|
|
selRight
|
|
});
|
|
const result = await window.AIGateway.executeAIPrompt({
|
|
prompt,
|
|
provider: provider.name || 'default',
|
|
model,
|
|
apiKey,
|
|
baseUrl: baseUrl.replace(/\/chat\/completions$/, '').replace(/\/$/, ''),
|
|
dawContext,
|
|
tools: window.AIGateway.DEFAULT_TOOLS
|
|
});
|
|
const hasText = !!result.textResponse;
|
|
const hasCalls = result.functionCalls && result.functionCalls.length > 0;
|
|
if (hasText) {
|
|
setAiActionLog(prev => [...prev, {
|
|
type: 'status',
|
|
text: ` AI: ${result.textResponse.slice(0, 500)}`,
|
|
time: Date.now()
|
|
}]);
|
|
}
|
|
if (hasCalls) {
|
|
setAiActionLog(prev => [...prev, {
|
|
type: 'info',
|
|
text: ` Gọi ${result.functionCalls.length} lệnh...`,
|
|
time: Date.now()
|
|
}]);
|
|
for (const fc of result.functionCalls) {
|
|
setAiActionLog(prev => [...prev, {
|
|
type: 'info',
|
|
text: ` Gọi lệnh: ${fc.name}(${JSON.stringify(fc.arguments)})`,
|
|
time: Date.now()
|
|
}]);
|
|
const cmdName = fc.name.toUpperCase();
|
|
if (window.DAWCommandDispatcher) {
|
|
try {
|
|
const cmdResult = window.DAWCommandDispatcher.execute(cmdName, fc.arguments);
|
|
setAiActionLog(prev => [...prev, {
|
|
type: 'status',
|
|
text: ` ✅ ${fc.name}: ${cmdResult.success ? 'thành công' : 'thất bại'}`,
|
|
time: Date.now()
|
|
}]);
|
|
} catch (cmdErr) {
|
|
setAiActionLog(prev => [...prev, {
|
|
type: 'error',
|
|
text: ` ❌ ${fc.name}: ${cmdErr.message}`,
|
|
time: Date.now()
|
|
}]);
|
|
}
|
|
} else {
|
|
setAiActionLog(prev => [...prev, {
|
|
type: 'error',
|
|
text: ` ❌ ${fc.name}: DAWCommandDispatcher not available`,
|
|
time: Date.now()
|
|
}]);
|
|
}
|
|
}
|
|
}
|
|
if (!hasText && !hasCalls) {
|
|
setAiActionLog(prev => [...prev, {
|
|
type: 'error',
|
|
text: ` AI không trả về lệnh hoặc text. Kiểm tra provider/model có hỗ trợ function calling.`,
|
|
time: Date.now()
|
|
}]);
|
|
}
|
|
if (prompt) {
|
|
promptHistRef.current = [...promptHistRef.current.slice(-49), prompt];
|
|
setPromptHistory(promptHistRef.current);
|
|
}
|
|
setPromptHistIdx(-1);
|
|
setAiActionLog(prev => [...prev, {
|
|
type: 'status',
|
|
text: ` Hoàn tất.`,
|
|
time: Date.now()
|
|
}]);
|
|
setAiPrompt('');
|
|
setTimeout(() => lucide.createIcons(), 200);
|
|
} catch (err) {
|
|
setAiActionLog(prev => [...prev, {
|
|
type: 'error',
|
|
text: ` Lỗi: ${err.message}`,
|
|
time: Date.now()
|
|
}]);
|
|
showToast(`AI Error: ${err.message}`, 'error');
|
|
} finally {
|
|
setAiProcessing(false);
|
|
}
|
|
};
|
|
|
|
// ── 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');
|
|
};
|
|
|
|
// ── DAW Command Registration for AI (28_AI_PANEL.md §1 & §2) ──
|
|
useEffect(() => {
|
|
if (typeof window.DAWCommandDispatcher === 'undefined') return;
|
|
const api = {
|
|
createTrack: args => {
|
|
const name = args.name || `AI_Track_${Date.now()}`;
|
|
const type = args.type || 'audio';
|
|
const newId = addNewTrack();
|
|
if (name && name !== `AI_Track_${Date.now()}`) {
|
|
updateTrackName(newId, name);
|
|
}
|
|
return {
|
|
success: true,
|
|
trackId: newId,
|
|
name
|
|
};
|
|
},
|
|
deleteTrack: args => {
|
|
const tid = args.track_id || selectedTrackId;
|
|
if (!tid) return {
|
|
success: false,
|
|
error: 'No track_id provided'
|
|
};
|
|
deleteTrack(tid);
|
|
return {
|
|
success: true,
|
|
trackId: tid
|
|
};
|
|
},
|
|
addClip: args => {
|
|
const trackId = args.track_id || selectedTrackId;
|
|
const barDur = 60 / parseInt(bpm || 120) * 4;
|
|
let startTime;
|
|
if (args.start_time !== undefined && args.start_time !== null) startTime = args.start_time;else if (args.start_bar !== undefined && args.start_bar !== null) startTime = args.start_bar * barDur;else startTime = currentTime;
|
|
const track = tracks.find(t => t.id === trackId);
|
|
if (!track) return {
|
|
success: false,
|
|
error: 'Track not found'
|
|
};
|
|
const ctx = getAudioContext();
|
|
const sr = 44100;
|
|
let duration;
|
|
if (args.duration_seconds !== undefined && args.duration_seconds !== null) duration = args.duration_seconds;else if (args.length_bars !== undefined && args.length_bars !== null) duration = args.length_bars * barDur;else duration = 2;
|
|
const buffer = ctx.createBuffer(1, Math.floor(sr * duration), sr);
|
|
const data = buffer.getChannelData(0);
|
|
for (let i = 0; i < data.length; i++) data[i] = 0;
|
|
const clipId = 'clip_' + Date.now();
|
|
setTracks(prev => prev.map(t => {
|
|
if (t.id !== trackId) return t;
|
|
const clips = t.clips && t.clips.length > 0 ? t.clips : t.buffer ? [{
|
|
id: 'default_' + t.id,
|
|
buffer: t.buffer,
|
|
startTime: t.startTime || 0,
|
|
name: t.name
|
|
}] : [];
|
|
return {
|
|
...t,
|
|
clips: [...clips, {
|
|
id: clipId,
|
|
buffer,
|
|
startTime,
|
|
name: args.name || 'AI Clip'
|
|
}],
|
|
buffer: clips.length > 0 ? clips[0].buffer : buffer,
|
|
startTime: clips.length > 0 ? clips[0].startTime : startTime,
|
|
name: clips.length > 0 ? clips[0].name : args.name || t.name
|
|
};
|
|
}));
|
|
return {
|
|
success: true,
|
|
clipId,
|
|
trackId
|
|
};
|
|
},
|
|
removeClip: args => {
|
|
const trackId = args.track_id || selectedTrackId;
|
|
const clipId = args.clip_id;
|
|
setTracks(prev => prev.map(t => {
|
|
if (t.id !== trackId) return t;
|
|
const updatedClips = (t.clips || []).filter(c => c.id !== clipId);
|
|
return {
|
|
...t,
|
|
clips: updatedClips,
|
|
buffer: updatedClips[0]?.buffer || null,
|
|
startTime: updatedClips[0]?.startTime || 0,
|
|
name: updatedClips[0]?.name || t.name
|
|
};
|
|
}));
|
|
return {
|
|
success: true
|
|
};
|
|
},
|
|
setTrackVolume: args => {
|
|
const trackId = args.track_id || selectedTrackId;
|
|
const vol = args.volume_db ?? args.volume ?? 0;
|
|
updateTrackVolumeDb(trackId, parseFloat(vol));
|
|
return {
|
|
success: true,
|
|
trackId,
|
|
volumeDb: vol
|
|
};
|
|
},
|
|
setTrackPan: args => {
|
|
const trackId = args.track_id || selectedTrackId;
|
|
const pan = args.pan ?? 0;
|
|
updateTrackPan(trackId, parseInt(pan));
|
|
return {
|
|
success: true,
|
|
trackId,
|
|
pan
|
|
};
|
|
},
|
|
toggleMute: args => {
|
|
const trackId = args.track_id || selectedTrackId;
|
|
toggleTrackMute(trackId);
|
|
const track = tracks.find(t => t.id === trackId);
|
|
return {
|
|
success: true,
|
|
trackId,
|
|
muted: track ? track.muted : null
|
|
};
|
|
},
|
|
toggleSolo: args => {
|
|
const trackId = args.track_id || selectedTrackId;
|
|
toggleTrackSoloEvaluate(trackId);
|
|
const track = tracks.find(t => t.id === trackId);
|
|
return {
|
|
success: true,
|
|
trackId,
|
|
solo: track ? track.solo : null
|
|
};
|
|
},
|
|
processAudioDsp: args => {
|
|
const trackId = args.track_id || selectedTrackId;
|
|
const action = args.action;
|
|
const params = args.params || {};
|
|
const track = tracks.find(t => t.id === trackId);
|
|
if (!track || !track.buffer) return {
|
|
success: false,
|
|
error: 'Track has no audio buffer'
|
|
};
|
|
if (action === 'normalize') {
|
|
const channelData = track.buffer.getChannelData(0);
|
|
let maxVal = 0;
|
|
for (let i = 0; i < channelData.length; i++) maxVal = Math.max(maxVal, Math.abs(channelData[i]));
|
|
if (maxVal > 0) {
|
|
const gain = 1.0 / maxVal;
|
|
for (let i = 0; i < channelData.length; i++) channelData[i] *= gain;
|
|
}
|
|
return {
|
|
success: true,
|
|
action: 'normalize'
|
|
};
|
|
} else if (action === 'invert_phase') {
|
|
const channelData = track.buffer.getChannelData(0);
|
|
for (let i = 0; i < channelData.length; i++) channelData[i] *= -1;
|
|
return {
|
|
success: true,
|
|
action: 'invert_phase'
|
|
};
|
|
} else if (action === 'gain') {
|
|
const gainDb = params.gain_db ?? 0;
|
|
const scale = Math.pow(10, gainDb / 20);
|
|
const channelData = track.buffer.getChannelData(0);
|
|
for (let i = 0; i < channelData.length; i++) channelData[i] = Math.max(-1, Math.min(1, channelData[i] * scale));
|
|
return {
|
|
success: true,
|
|
action: 'gain',
|
|
gainDb
|
|
};
|
|
} else if (action === 'pitch_shift') {
|
|
const semitones = params.semitones ?? 0;
|
|
const ratio = Math.pow(2, semitones / 12);
|
|
const applyResample = (data, r) => {
|
|
const newLen = Math.round(data.length * r);
|
|
const out = new Float32Array(newLen);
|
|
for (let i = 0; i < newLen; i++) {
|
|
const srcIdx = i / r;
|
|
const idx0 = Math.floor(srcIdx);
|
|
const idx1 = Math.min(idx0 + 1, data.length - 1);
|
|
const frac = srcIdx - idx0;
|
|
out[i] = data[idx0] * (1 - frac) + data[idx1] * frac;
|
|
}
|
|
return out;
|
|
};
|
|
const channelData = track.buffer.getChannelData(0);
|
|
const newData = applyResample(channelData, 1 / ratio);
|
|
const ctx = getAudioContext();
|
|
const newBuffer = ctx.createBuffer(1, newData.length, track.buffer.sampleRate);
|
|
newBuffer.copyToChannel(newData, 0);
|
|
setTracks(prev => prev.map(t => t.id === trackId ? {
|
|
...t,
|
|
buffer: newBuffer
|
|
} : t));
|
|
return {
|
|
success: true,
|
|
action: 'pitch_shift',
|
|
semitones
|
|
};
|
|
}
|
|
return {
|
|
success: false,
|
|
error: `Unknown action: ${action}`
|
|
};
|
|
},
|
|
renameTrack: args => {
|
|
const tid = args.track_id || selectedTrackId;
|
|
const name = args.name;
|
|
if (!tid) return {
|
|
success: false,
|
|
error: 'No track_id provided'
|
|
};
|
|
if (!name) return {
|
|
success: false,
|
|
error: 'No name provided'
|
|
};
|
|
updateTrackName(tid, name);
|
|
return {
|
|
success: true,
|
|
trackId: tid,
|
|
name
|
|
};
|
|
},
|
|
setSelection: args => {
|
|
const barDur = 60 / parseInt(bpm || 120) * 4;
|
|
let start, end;
|
|
if (args.start_time !== undefined && args.start_time !== null) start = args.start_time;else if (args.start_bar !== undefined && args.start_bar !== null) start = args.start_bar * barDur;else start = currentTime;
|
|
if (args.end_time !== undefined && args.end_time !== null) end = args.end_time;else if (args.length_bars !== undefined && args.length_bars !== null) end = start + args.length_bars * barDur;else if (args.end_bar !== undefined && args.end_bar !== null) end = args.end_bar * barDur;else end = start + barDur;
|
|
clearLocalSelection();
|
|
setSelectionMode('global');
|
|
setSelectionStart(start);
|
|
setSelectionEnd(end);
|
|
return {
|
|
success: true,
|
|
start: parseFloat(start.toFixed(3)),
|
|
end: parseFloat(end.toFixed(3)),
|
|
length: parseFloat((end - start).toFixed(3))
|
|
};
|
|
},
|
|
scanTrack: args => {
|
|
const tid = args.track_id || selectedTrackId;
|
|
const track = tracks.find(t => t.id === tid);
|
|
if (!track) return {
|
|
success: false,
|
|
error: 'Track not found'
|
|
};
|
|
if (!track.buffer) return {
|
|
success: false,
|
|
error: 'Track has no audio buffer. Load audio first.'
|
|
};
|
|
const buffer = track.buffer;
|
|
const data = buffer.getChannelData(0);
|
|
const sr = buffer.sampleRate;
|
|
const channels = buffer.numberOfChannels;
|
|
const duration = buffer.duration;
|
|
const totalSamples = buffer.length;
|
|
const windowSize = Math.min(sr * 3, data.length);
|
|
let detectedBPM = 0;
|
|
if (windowSize > sr) {
|
|
let maxCorr = 0;
|
|
for (let lag = Math.floor(sr * 0.3); lag <= Math.floor(sr * 2.0); lag++) {
|
|
let corr = 0;
|
|
const step = 4;
|
|
for (let i = 0; i < windowSize && i + lag < data.length; i += step) corr += data[i] * data[i + lag];
|
|
corr /= windowSize / step;
|
|
if (corr > maxCorr) {
|
|
maxCorr = corr;
|
|
detectedBPM = 60 / (lag / sr);
|
|
}
|
|
}
|
|
}
|
|
detectedBPM = Math.round(Math.min(300, Math.max(30, detectedBPM)));
|
|
if (args.set_tempo !== false && detectedBPM > 0) {
|
|
setBpm(String(detectedBPM));
|
|
}
|
|
const bitDepth = 16;
|
|
const bitrate = Math.round(sr * channels * bitDepth / 1000);
|
|
return {
|
|
success: true,
|
|
trackId: tid,
|
|
trackName: track.name,
|
|
bpm: detectedBPM,
|
|
sampleRate: sr,
|
|
channels,
|
|
duration: parseFloat(duration.toFixed(3)),
|
|
totalSamples,
|
|
bitDepth,
|
|
bitrateKbps: bitrate,
|
|
hasAudio: true
|
|
};
|
|
},
|
|
setBpm: args => {
|
|
const bpmVal = args.bpm || args.tempo || 120;
|
|
setBpm(String(bpmVal));
|
|
return {
|
|
success: true,
|
|
bpm: bpmVal
|
|
};
|
|
},
|
|
setPlayhead: args => {
|
|
const barDur = 60 / parseInt(bpm || 120) * 4;
|
|
let time;
|
|
if (args.time !== undefined && args.time !== null) time = args.time;else if (args.bar !== undefined && args.bar !== null) time = args.bar * barDur;else time = 0;
|
|
handlePlayheadSet(time);
|
|
return {
|
|
success: true,
|
|
time: parseFloat(time.toFixed(3))
|
|
};
|
|
},
|
|
addMarker: args => {
|
|
const trackId = args.track_id || selectedTrackId;
|
|
const time = args.time ?? currentTime;
|
|
const track = tracks.find(t => t.id === trackId);
|
|
if (!track) return {
|
|
success: false,
|
|
error: 'Track not found'
|
|
};
|
|
setTracks(prev => prev.map(t => {
|
|
if (t.id !== trackId) return t;
|
|
return {
|
|
...t,
|
|
markers: [...(t.markers || []), {
|
|
id: 'ai_marker_' + Date.now(),
|
|
time,
|
|
label: args.label || 'AI Marker'
|
|
}]
|
|
};
|
|
}));
|
|
return {
|
|
success: true,
|
|
trackId,
|
|
time
|
|
};
|
|
}
|
|
};
|
|
window.DAWCommandDispatcher.registerDAWCommands(api);
|
|
}, [tracks, selectedTrackId, currentTime, bpm]);
|
|
|
|
// ── 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 /*#__PURE__*/React.createElement("div", {
|
|
className: "h-full w-full flex flex-col bg-[#1e1e1e]"
|
|
}, /*#__PURE__*/React.createElement("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: 128,
|
|
volumeDb: 0,
|
|
pan: 0,
|
|
muted: false,
|
|
solo: false,
|
|
color: '#0f766e',
|
|
markers: [],
|
|
serverFileId: null
|
|
}, {
|
|
id: '2',
|
|
name: 'Track 02',
|
|
buffer: null,
|
|
startTime: 0,
|
|
height: 128,
|
|
volumeDb: 0,
|
|
pan: 0,
|
|
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: () => handleImportSFS()
|
|
}, {
|
|
label: 'Save Project',
|
|
icon: 'save',
|
|
shortcut: 'Ctrl+S',
|
|
action: () => handleExportSFS()
|
|
}, {
|
|
label: 'Save As...',
|
|
icon: 'save',
|
|
shortcut: 'Ctrl+Alt+S',
|
|
action: () => handleExportSFS()
|
|
}, {
|
|
label: 'Save to Cloud',
|
|
icon: 'upload-cloud',
|
|
action: () => handleSaveCloud()
|
|
}, {
|
|
sep: true
|
|
}, {
|
|
label: 'Config AI Providers...',
|
|
icon: 'settings',
|
|
action: () => setAiConfigModalOpen(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
|
|
}, ...(currentUser ? [{
|
|
label: 'Profile',
|
|
icon: 'user',
|
|
action: () => setProfileModalOpen(true)
|
|
}] : []), ...(currentUser && currentUser.role === 'admin' ? [{
|
|
label: 'System Manager',
|
|
icon: 'settings',
|
|
action: () => setSystemManagerModalOpen(true)
|
|
}] : []), {
|
|
label: 'Logout',
|
|
icon: 'log-out',
|
|
action: () => handleLogout()
|
|
}]
|
|
}, {
|
|
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: 'Undo',
|
|
icon: 'undo',
|
|
shortcut: 'Ctrl+Z',
|
|
action: () => {
|
|
handleUndo();
|
|
}
|
|
}, {
|
|
label: 'Redo',
|
|
icon: 'redo',
|
|
shortcut: 'Ctrl+Y',
|
|
action: () => {
|
|
handleRedo();
|
|
}
|
|
}, {
|
|
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 AI Providers...',
|
|
icon: 'settings',
|
|
action: () => setAiConfigModalOpen(true)
|
|
}, {
|
|
label: 'Python DSP Tools Panel',
|
|
icon: 'wrench',
|
|
action: () => openPanel('python_tools')
|
|
}]
|
|
}, {
|
|
label: 'Help',
|
|
items: [{
|
|
label: 'About SonicForge',
|
|
icon: 'info',
|
|
action: () => showToast('SonicForge Studio v1.0 - Professional DAW', 'info')
|
|
}]
|
|
}].map(menu => /*#__PURE__*/React.createElement("div", {
|
|
key: menu.label,
|
|
className: "relative"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => setMenuOpen(menuOpen === menu.label ? null : menu.label),
|
|
className: `px-3 py-1 text-xs 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), menuOpen === menu.label && /*#__PURE__*/React.createElement("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 ? /*#__PURE__*/React.createElement("div", {
|
|
key: i,
|
|
className: "h-px bg-zinc-700 my-1"
|
|
}) : /*#__PURE__*/React.createElement("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"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": item.icon,
|
|
className: "w-3.5 h-3.5 text-zinc-500 shrink-0"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "flex-1"
|
|
}, item.label), item.shortcut && /*#__PURE__*/React.createElement("span", {
|
|
className: "text-purple-400 text-xs font-semibold font-mono ml-auto pl-8"
|
|
}, item.shortcut)))))), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex-1"
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-2 px-2"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: `text-xs 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), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => setShowAIConfig(!showAIConfig),
|
|
className: `px-1.5 py-0.5 rounded text-xs 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'}`
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "cpu",
|
|
className: "w-3 h-3"
|
|
}))))), menuOpen && /*#__PURE__*/React.createElement("div", {
|
|
className: "fixed inset-0 z-40",
|
|
onClick: () => setMenuOpen(null)
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
className: "h-7 bg-[#222] border-b border-zinc-800 flex items-stretch px-2 gap-0.5 shrink-0 overflow-x-auto"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => setActiveTab('main'),
|
|
className: `px-3 text-xs 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'}`
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "layout-dashboard",
|
|
className: "w-3 h-3"
|
|
})), " Main Session"), subTabs.map(st => /*#__PURE__*/React.createElement("div", {
|
|
key: st.id,
|
|
className: "flex items-stretch"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => setActiveTab(st.id),
|
|
className: `px-2 text-xs 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'}`
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "file-edit",
|
|
className: "w-3 h-3"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "max-w-[100px] truncate"
|
|
}, st.label)), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => closeSubTab(st.id),
|
|
className: "px-1 text-zinc-600 hover:text-red-400 transition text-xs",
|
|
title: "Close tab"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "x",
|
|
className: "w-3 h-3"
|
|
})))))), showAIConfig && /*#__PURE__*/React.createElement("div", {
|
|
className: "bg-zinc-900 border-b border-purple-900 p-3 flex flex-col gap-2 transition-all"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "text-xs font-bold text-purple-400 uppercase tracking-wider flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "cpu",
|
|
className: "w-4 h-4"
|
|
})), " Cấu hình cổng kết nối API"), /*#__PURE__*/React.createElement("div", {
|
|
className: "grid grid-cols-1 md:grid-cols-3 gap-2 text-xs"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex flex-col gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs text-zinc-500 font-bold uppercase"
|
|
}, "Endpoint Base URL"), /*#__PURE__*/React.createElement("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-xs",
|
|
placeholder: "https://api.openai.com/v1"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex flex-col gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs text-zinc-500 font-bold uppercase"
|
|
}, "API Token Key"), /*#__PURE__*/React.createElement("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-xs",
|
|
placeholder: "sk-..."
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex flex-col gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs text-zinc-500 font-bold uppercase"
|
|
}, "Model Name"), /*#__PURE__*/React.createElement("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-xs",
|
|
placeholder: "gpt-4o-mini"
|
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
className: "h-9 bg-[#222] border-b border-zinc-800 flex items-center px-3 gap-2 shrink-0 select-none"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-1 bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 shadow-lg",
|
|
title: "Kéo để di chuyển toolbar",
|
|
style: {
|
|
cursor: 'grab'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-0.5 mr-1 text-zinc-600"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "grip-vertical",
|
|
className: "w-3 h-3"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => {
|
|
setActiveTool('select');
|
|
showToast('Select Tool', 'info');
|
|
},
|
|
className: `w-7 h-7 flex items-center justify-center rounded ${activeTool === 'select' ? 'bg-cyan-700 text-white' : 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800'}`,
|
|
title: "Select Tool (V)"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "mouse-pointer",
|
|
className: "w-3.5 h-3.5"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => {
|
|
setActiveTool('grab');
|
|
showToast('Grab Tool', 'info');
|
|
},
|
|
className: `w-7 h-7 flex items-center justify-center rounded ${activeTool === 'grab' ? 'bg-cyan-700 text-white' : 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800'}`,
|
|
title: "Grab Tool (H)"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "hand",
|
|
className: "w-3.5 h-3.5"
|
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-0.5 border border-zinc-700 rounded bg-zinc-850 px-0.5"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => {
|
|
setActiveTool('razor');
|
|
showToast('Razor Tool', 'info');
|
|
},
|
|
className: `w-7 h-7 flex items-center justify-center rounded ${activeTool === 'razor' ? 'bg-cyan-700 text-white' : 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800'}`,
|
|
title: "Razor Tool (C)"
|
|
}, /*#__PURE__*/React.createElement("svg", {
|
|
className: "w-3.5 h-3.5 text-orange-400",
|
|
viewBox: "0 0 24 24",
|
|
fill: "none",
|
|
stroke: "currentColor",
|
|
strokeWidth: "2.5",
|
|
strokeLinecap: "round",
|
|
strokeLinejoin: "round"
|
|
}, /*#__PURE__*/React.createElement("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"
|
|
}), /*#__PURE__*/React.createElement("path", {
|
|
d: "M4 9h16l-3 9H7z"
|
|
}), /*#__PURE__*/React.createElement("circle", {
|
|
cx: "12",
|
|
cy: "6",
|
|
r: "1"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: handleGlueTracks,
|
|
className: "w-7 h-7 flex items-center justify-center rounded text-zinc-400 hover:text-purple-400 hover:bg-zinc-800",
|
|
title: "Glue Clips"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "link",
|
|
className: "w-3.5 h-3.5"
|
|
})))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => {
|
|
setActiveTool('pen');
|
|
showToast('Pen Tool', 'info');
|
|
},
|
|
className: `w-7 h-7 flex items-center justify-center rounded ${activeTool === 'pen' ? 'bg-cyan-700 text-white' : 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800'}`,
|
|
title: "Pen Tool (P)"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "pen-tool",
|
|
className: "w-3.5 h-3.5"
|
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
className: "w-[1px] h-5 bg-zinc-700 mx-0.5"
|
|
}), /*#__PURE__*/React.createElement("button", {
|
|
onClick: handleCutTrack,
|
|
className: "w-7 h-7 flex items-center justify-center rounded text-zinc-400 hover:text-red-400 hover:bg-zinc-800",
|
|
title: "Cut (Ctrl+X)"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "scissors",
|
|
className: "w-3.5 h-3.5"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: handleCopyTrack,
|
|
className: "w-7 h-7 flex items-center justify-center rounded text-zinc-400 hover:text-blue-400 hover:bg-zinc-800",
|
|
title: "Copy (Ctrl+C)"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "copy",
|
|
className: "w-3.5 h-3.5"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: handlePasteTrack,
|
|
className: "w-7 h-7 flex items-center justify-center rounded text-zinc-400 hover:text-emerald-400 hover:bg-zinc-800",
|
|
title: "Paste (Ctrl+V)"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "clipboard",
|
|
className: "w-3.5 h-3.5"
|
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
className: "w-[1px] h-5 bg-zinc-700 mx-0.5"
|
|
}), /*#__PURE__*/React.createElement("button", {
|
|
onClick: addNewTrack,
|
|
className: "px-2 py-1 bg-cyan-600 hover:bg-cyan-500 text-white font-semibold rounded text-xs flex items-center gap-1 shadow transition",
|
|
title: "Thêm Track Mới (Ctrl+I)"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "plus",
|
|
className: "w-3.5 h-3.5"
|
|
})), /*#__PURE__*/React.createElement("span", null, "Track")), /*#__PURE__*/React.createElement("div", {
|
|
className: "w-[1px] h-5 bg-zinc-700 mx-0.5"
|
|
}), /*#__PURE__*/React.createElement("button", {
|
|
onClick: handleUndo,
|
|
disabled: undoStack.length === 0,
|
|
className: "w-7 h-7 flex items-center justify-center rounded text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800 disabled:opacity-30",
|
|
title: "Undo (Ctrl+Z)"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "undo",
|
|
className: "w-3.5 h-3.5"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: handleRedo,
|
|
disabled: redoStack.length === 0,
|
|
className: "w-7 h-7 flex items-center justify-center rounded text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800 disabled:opacity-30",
|
|
title: "Redo (Ctrl+Y)"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "redo",
|
|
className: "w-3.5 h-3.5"
|
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
className: "w-[1px] h-5 bg-zinc-800 mx-0.5"
|
|
}), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => {
|
|
if (activeTab !== 'main') {
|
|
setSubTabs(prev => prev.map(s => s.id === activeTab ? {
|
|
...s,
|
|
currentTime: 0
|
|
} : s));
|
|
} else {
|
|
setCurrentTime(0);
|
|
}
|
|
},
|
|
className: "w-7 h-7 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"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "skip-back",
|
|
className: "w-3.5 h-3.5"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => {
|
|
if (activeTab !== 'main') {
|
|
setSubTabs(prev => prev.map(s => {
|
|
if (s.id !== activeTab) return s;
|
|
const left = s.selectionStart !== null && s.selectionEnd !== null ? Math.min(s.selectionStart, s.selectionEnd) : null;
|
|
return left !== null ? {
|
|
...s,
|
|
currentTime: left
|
|
} : s;
|
|
}));
|
|
} else {
|
|
if (selLeft !== null) setCurrentTime(selLeft);
|
|
}
|
|
},
|
|
className: "w-7 h-7 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"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "step-back",
|
|
className: "w-3.5 h-3.5"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: handlePlayPause,
|
|
className: `w-7 h-7 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"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": isPlaying ? "pause" : "play",
|
|
className: "w-3.5 h-3.5 fill-current"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: handleStop,
|
|
className: "w-7 h-7 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition",
|
|
title: "Stop"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "square",
|
|
className: "w-3.5 h-3.5 fill-current"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => {
|
|
if (activeTab !== 'main') {
|
|
setSubTabs(prev => prev.map(s => {
|
|
if (s.id !== activeTab) return s;
|
|
const right = s.selectionStart !== null && s.selectionEnd !== null ? Math.max(s.selectionStart, s.selectionEnd) : null;
|
|
return right !== null ? {
|
|
...s,
|
|
currentTime: right
|
|
} : s;
|
|
}));
|
|
} else {
|
|
if (selRight !== null) setCurrentTime(selRight);
|
|
}
|
|
},
|
|
className: "w-7 h-7 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"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "step-forward",
|
|
className: "w-3.5 h-3.5"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => {
|
|
if (activeTab !== 'main') {
|
|
setSubTabs(prev => prev.map(s => {
|
|
if (s.id !== activeTab) return s;
|
|
const duration = s.buffer ? s.buffer.duration / (s.speed || 1.0) : 0;
|
|
return {
|
|
...s,
|
|
currentTime: duration
|
|
};
|
|
}));
|
|
} else {
|
|
setCurrentTime(maxDuration);
|
|
}
|
|
},
|
|
className: "w-7 h-7 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"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "skip-forward",
|
|
className: "w-3.5 h-3.5"
|
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
className: "w-[1px] h-5 bg-zinc-800 mx-0.5"
|
|
}), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => setIsLoopingSelection(prev => !prev),
|
|
className: `w-7 h-7 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"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "repeat",
|
|
className: "w-3.5 h-3.5"
|
|
}))), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-[14px] text-zinc-500 font-bold uppercase ml-2"
|
|
}, "Snap"), /*#__PURE__*/React.createElement("select", {
|
|
value: snapValue,
|
|
onChange: e => setSnapValue(e.target.value),
|
|
className: "bg-black text-white text-[14px] px-1.5 py-0.5 rounded border border-zinc-700 focus:outline-none focus:border-cyan-500 font-mono cursor-pointer"
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: "free"
|
|
}, "Free"), /*#__PURE__*/React.createElement("option", {
|
|
value: "1"
|
|
}, "1"), /*#__PURE__*/React.createElement("option", {
|
|
value: "1/2"
|
|
}, "1/2"), /*#__PURE__*/React.createElement("option", {
|
|
value: "1/4"
|
|
}, "1/4"), /*#__PURE__*/React.createElement("option", {
|
|
value: "1/8"
|
|
}, "1/8"), /*#__PURE__*/React.createElement("option", {
|
|
value: "1/16"
|
|
}, "1/16"), /*#__PURE__*/React.createElement("option", {
|
|
value: "1/32"
|
|
}, "1/32")), /*#__PURE__*/React.createElement("div", {
|
|
className: "w-[1px] h-6 bg-zinc-800 mx-1.5"
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-[14px] text-zinc-500 font-bold"
|
|
}, "Bars:"), /*#__PURE__*/React.createElement("input", {
|
|
type: "number",
|
|
min: "1",
|
|
value: beginBar,
|
|
onChange: e => {
|
|
const b = parseInt(e.target.value) || 1;
|
|
setBeginBar(b);
|
|
const beatDuration = 60 / parseInt(bpm || 120);
|
|
const t = (b - 1) * beatDuration * 4;
|
|
clearLocalSelection();
|
|
setSelectionMode('global');
|
|
setSelectionStart(t);
|
|
setSelectionEnd(t + beatDuration * 4);
|
|
},
|
|
className: "w-14 bg-black text-white text-[14px] px-1 py-0.5 rounded border border-zinc-700 text-center font-mono"
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-[14px] text-zinc-500"
|
|
}, "-"), /*#__PURE__*/React.createElement("input", {
|
|
type: "number",
|
|
min: "1",
|
|
value: endBar,
|
|
onChange: e => {
|
|
const b = parseInt(e.target.value) || 1;
|
|
setEndBar(b);
|
|
const beatDuration = 60 / parseInt(bpm || 120);
|
|
const t = (b - 1) * beatDuration * 4;
|
|
setSelectionEnd(t + beatDuration * 4);
|
|
setNumberBar(b - beginBar + 1);
|
|
},
|
|
className: "w-14 bg-black text-white text-[14px] px-1 py-0.5 rounded border border-zinc-700 text-center font-mono"
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-[14px] text-zinc-500"
|
|
}, "#"), /*#__PURE__*/React.createElement("input", {
|
|
type: "number",
|
|
min: "1",
|
|
value: numberBar,
|
|
readOnly: true,
|
|
className: "w-14 bg-black text-zinc-400 text-[14px] px-1 py-0.5 rounded border border-zinc-800 text-center font-mono"
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
className: "w-[1px] h-6 bg-zinc-800 mx-1.5"
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-[14px] text-zinc-500"
|
|
}, "Start:"), /*#__PURE__*/React.createElement("input", {
|
|
type: "text",
|
|
value: selLeft !== null ? formatTime(selLeft) : '',
|
|
onChange: e => {
|
|
const parts = e.target.value.split(/[:.]/);
|
|
if (parts.length === 3) {
|
|
const secs = parseInt(parts[0]) * 60 + parseInt(parts[1]) + parseFloat('0.' + (parts[2] || '0'));
|
|
clearLocalSelection();
|
|
setSelectionMode('global');
|
|
setSelectionStart(secs);
|
|
}
|
|
},
|
|
className: "w-20 bg-black text-zinc-200 text-[14px] px-1 py-0.5 rounded border border-zinc-700 text-center font-mono"
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-[14px] text-zinc-500"
|
|
}, "End:"), /*#__PURE__*/React.createElement("input", {
|
|
type: "text",
|
|
value: selRight !== null ? formatTime(selRight) : '',
|
|
onChange: e => {
|
|
const parts = e.target.value.split(/[:.]/);
|
|
if (parts.length === 3) {
|
|
const secs = parseInt(parts[0]) * 60 + parseInt(parts[1]) + parseFloat('0.' + (parts[2] || '0'));
|
|
setSelectionEnd(secs);
|
|
}
|
|
},
|
|
className: "w-20 bg-black text-zinc-200 text-[14px] px-1 py-0.5 rounded border border-zinc-700 text-center font-mono"
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-[14px] text-zinc-500"
|
|
}, "Len:"), /*#__PURE__*/React.createElement("input", {
|
|
type: "text",
|
|
value: selLeft !== null && selRight !== null ? formatTime(Math.abs(selRight - selLeft)) : '',
|
|
onChange: e => {
|
|
const parts = e.target.value.split(/[:.]/);
|
|
if (parts.length === 3 && selLeft !== null) {
|
|
const secs = parseInt(parts[0]) * 60 + parseInt(parts[1]) + parseFloat('0.' + (parts[2] || '0'));
|
|
setSelectionEnd(selLeft + secs);
|
|
}
|
|
},
|
|
className: "w-20 bg-black text-amber-300 text-[14px] px-1 py-0.5 rounded border border-zinc-700 text-center font-mono"
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex-1"
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
className: "text-xs font-bold font-mono text-zinc-100"
|
|
}, formatTime(currentTime))), (() => {
|
|
const dockPanels = {
|
|
top: [],
|
|
right: [],
|
|
bottom: [],
|
|
left: []
|
|
};
|
|
const addPanel = (id, pos, visible) => {
|
|
if (visible) dockPanels[pos].push(id);
|
|
};
|
|
addPanel('export', panelPositions.export, showExportPanel);
|
|
addPanel('ai', panelPositions.ai, showAIPanel);
|
|
addPanel('python_tools', panelPositions.python_tools || 'bottom', showPythonToolsPanel);
|
|
addPanel('selection', panelPositions.selection, showSelectionPanel);
|
|
addPanel('media_explorer', panelPositions.media_explorer || 'right', showMediaExplorer);
|
|
addPanel('fx_rack', panelPositions.fx_rack || 'bottom', showFxRack);
|
|
addPanel('midi_events', panelPositions.midi_events || 'bottom', showMidiEvents);
|
|
const closePanel = id => {
|
|
if (id === 'export') setShowExportPanel(false);else if (id === 'ai') setShowAIPanel(false);else if (id === 'python_tools') setShowPythonToolsPanel(false);else if (id === 'selection') setShowSelectionPanel(false);else if (id === 'media_explorer') setShowMediaExplorer(false);else if (id === 'fx_rack') setShowFxRack(false);else if (id === 'midi_events') setShowMidiEvents(false);
|
|
};
|
|
const renderPanelContent = panelId => {
|
|
const h = id => e => {
|
|
startPanelDrag(id, e);
|
|
};
|
|
if (panelId === 'export') return /*#__PURE__*/React.createElement("div", {
|
|
className: "flex flex-col h-full gap-1.5"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center justify-between shrink-0 cursor-grab active:cursor-grabbing select-none",
|
|
onMouseDown: e => startPanelDrag('export', e)
|
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
className: "font-bold text-xs text-zinc-200 flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "grip-vertical",
|
|
className: "w-3 h-3 text-zinc-500"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "save",
|
|
className: "w-3.5 h-3.5 text-cyan-400"
|
|
})), " Export"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => closePanel('export'),
|
|
className: "text-zinc-600 hover:text-zinc-300"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "x",
|
|
className: "w-3 h-3"
|
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
className: "grid grid-cols-3 gap-1"
|
|
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
className: "block text-[7px] text-zinc-500 font-bold uppercase mb-0.5"
|
|
}, "SR"), /*#__PURE__*/React.createElement("select", {
|
|
value: exportSettings.sampleRate,
|
|
onChange: e => setExportSettings(p => ({
|
|
...p,
|
|
sampleRate: e.target.value
|
|
})),
|
|
className: "w-full bg-[#141414] border border-zinc-800 rounded px-1 py-0.5 text-xs text-zinc-300 focus:outline-none"
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: "44100"
|
|
}, "44.1k"), /*#__PURE__*/React.createElement("option", {
|
|
value: "48000"
|
|
}, "48k"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
className: "block text-[7px] text-zinc-500 font-bold uppercase mb-0.5"
|
|
}, "Bit"), /*#__PURE__*/React.createElement("select", {
|
|
value: exportSettings.bitDepth,
|
|
onChange: e => setExportSettings(p => ({
|
|
...p,
|
|
bitDepth: e.target.value
|
|
})),
|
|
className: "w-full bg-[#141414] border border-zinc-800 rounded px-1 py-0.5 text-xs text-zinc-300 focus:outline-none"
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: "16"
|
|
}, "16"), /*#__PURE__*/React.createElement("option", {
|
|
value: "24"
|
|
}, "24"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
className: "block text-[7px] text-zinc-500 font-bold uppercase mb-0.5"
|
|
}, "Fmt"), /*#__PURE__*/React.createElement("select", {
|
|
value: exportSettings.format,
|
|
onChange: e => setExportSettings(p => ({
|
|
...p,
|
|
format: e.target.value
|
|
})),
|
|
className: "w-full bg-[#141414] border border-zinc-800 rounded px-1 py-0.5 text-xs text-zinc-300 focus:outline-none"
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: "wav"
|
|
}, "WAV")))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: triggerWavExport,
|
|
disabled: isExporting,
|
|
className: "w-full py-1 bg-cyan-700 hover:bg-cyan-600 text-zinc-100 font-bold rounded text-xs flex items-center justify-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "download-cloud",
|
|
className: "w-3 h-3"
|
|
})), isExporting ? '...' : 'Export'));
|
|
if (panelId === 'ai') return /*#__PURE__*/React.createElement("div", {
|
|
className: "flex flex-col h-full gap-1.5"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center justify-between shrink-0 cursor-grab active:cursor-grabbing select-none",
|
|
onMouseDown: e => startPanelDrag('ai', e)
|
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
className: "font-bold text-xs text-zinc-200 flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "grip-vertical",
|
|
className: "w-3 h-3 text-zinc-500"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "cpu",
|
|
className: "w-3.5 h-3.5 text-purple-400"
|
|
})), " AI Copilot"), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => {
|
|
setAiActionLog([]);
|
|
showToast('Đã xoá nhật ký AI.', 'info');
|
|
},
|
|
className: "text-zinc-600 hover:text-zinc-300",
|
|
title: "Clear log"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "trash-2",
|
|
className: "w-3 h-3"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => closePanel('ai'),
|
|
className: "text-zinc-600 hover:text-zinc-300"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "x",
|
|
className: "w-3 h-3"
|
|
}))))), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-1.5 shrink-0"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "cpu",
|
|
className: "w-3 h-3 text-purple-400"
|
|
})), /*#__PURE__*/React.createElement("select", {
|
|
value: selectedProviderId,
|
|
onChange: e => setSelectedProviderId(e.target.value),
|
|
className: "flex-1 bg-[#141414] text-zinc-200 border border-zinc-700 rounded px-1 py-0.5 text-xs font-mono focus:outline-none focus:border-purple-600"
|
|
}, aiProviders.length === 0 ? /*#__PURE__*/React.createElement("option", {
|
|
value: ""
|
|
}, "Chưa có provider") : aiProviders.map(p => /*#__PURE__*/React.createElement("option", {
|
|
key: p.id,
|
|
value: p.id
|
|
}, p.name, p.is_active ? '' : ' (inactive)')))), /*#__PURE__*/React.createElement("div", {
|
|
className: "border-t border-zinc-800 pt-1.5 mt-1"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "text-xs font-bold text-zinc-400 uppercase mb-1 flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "message-square",
|
|
className: "w-3 h-3"
|
|
})), " Copilot Prompt"), /*#__PURE__*/React.createElement("textarea", {
|
|
value: aiPrompt,
|
|
onChange: e => setAiPrompt(e.target.value),
|
|
placeholder: "Nhập lệnh điều khiển DAW... (VD: Tạo track mới tên Beat, đặt BPM 128)",
|
|
className: "w-full bg-[#1e1e1e] text-zinc-200 p-1.5 rounded border border-zinc-700 focus:outline-none focus:border-purple-600 font-mono text-xs resize-none",
|
|
rows: 2,
|
|
onKeyDown: e => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
handleAISend();
|
|
} else if (e.key === 'ArrowUp' && promptHistRef.current.length > 0) {
|
|
e.preventDefault();
|
|
const idx = promptHistIdx === -1 ? promptHistRef.current.length - 1 : Math.max(0, promptHistIdx - 1);
|
|
setPromptHistIdx(idx);
|
|
setAiPrompt(promptHistRef.current[idx]);
|
|
} else if (e.key === 'ArrowDown') {
|
|
e.preventDefault();
|
|
if (promptHistIdx === -1) return;
|
|
const idx = promptHistIdx + 1;
|
|
if (idx >= promptHistRef.current.length) {
|
|
setPromptHistIdx(-1);
|
|
setAiPrompt('');
|
|
} else {
|
|
setPromptHistIdx(idx);
|
|
setAiPrompt(promptHistRef.current[idx]);
|
|
}
|
|
}
|
|
}
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-1 mt-1"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
onClick: handleAISend,
|
|
disabled: aiProcessing,
|
|
className: "flex-1 py-1 bg-purple-700 hover:bg-purple-600 text-white font-bold rounded text-xs border border-purple-500 flex items-center justify-center gap-1"
|
|
}, aiProcessing ? 'Đang suy luận...' : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "send",
|
|
className: "w-3 h-3"
|
|
})), " Gửi")), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => {
|
|
setAiPrompt('');
|
|
setAiActionLog([]);
|
|
},
|
|
className: "px-2 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-400 rounded text-xs border border-zinc-700"
|
|
}, "Clear")), /*#__PURE__*/React.createElement("div", {
|
|
className: "text-xs text-zinc-600 mt-0.5"
|
|
}, "Enter để gửi nhanh")), /*#__PURE__*/React.createElement("div", {
|
|
className: "border-t border-zinc-800 pt-1.5 mt-1 flex-1 min-h-0 flex flex-col"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "text-xs font-bold text-zinc-400 uppercase mb-1 flex items-center justify-between shrink-0"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "list",
|
|
className: "w-3 h-3"
|
|
}), " Action Log"), aiActionLog.length > 0 && /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => {
|
|
if (window.DAWCommandDispatcher && window.DAWCommandDispatcher.undo) {
|
|
const entry = window.DAWCommandDispatcher.undo();
|
|
if (entry) {
|
|
setAiActionLog(prev => [...prev, {
|
|
type: 'undo',
|
|
text: `Undo: ${entry.name}`,
|
|
time: Date.now()
|
|
}]);
|
|
showToast(`Undo AI: ${entry.name}`, 'info');
|
|
}
|
|
} else {
|
|
handleUndo();
|
|
setAiActionLog(prev => [...prev, {
|
|
type: 'undo',
|
|
text: 'Undo (Ctrl+Z)',
|
|
time: Date.now()
|
|
}]);
|
|
}
|
|
},
|
|
className: "text-xs text-amber-400 hover:text-amber-300 border border-amber-800 rounded px-1 py-0.5"
|
|
}, "Undo"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex-1 overflow-y-auto no-scrollbar bg-[#0f0f0f] rounded border border-zinc-800 p-1 select-text"
|
|
}, aiActionLog.length === 0 ? /*#__PURE__*/React.createElement("div", {
|
|
className: "text-xs text-zinc-600 italic select-text"
|
|
}, "Chưa có hành động nào.") : aiActionLog.map((entry, i) => /*#__PURE__*/React.createElement("div", {
|
|
key: i,
|
|
className: `text-xs font-mono py-0.5 border-b border-zinc-900 last:border-0 ${entry.type === 'error' ? 'text-red-400' : entry.type === 'status' ? 'text-zinc-400 italic' : entry.type === 'undo' ? 'text-amber-400' : 'text-zinc-300'}`
|
|
}, new Date(entry.time).toLocaleTimeString(), entry.text))));
|
|
if (panelId === 'python_tools') return /*#__PURE__*/React.createElement("div", {
|
|
className: "flex flex-col h-full gap-1.5"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center justify-between shrink-0 cursor-grab active:cursor-grabbing select-none",
|
|
onMouseDown: e => startPanelDrag('python_tools', e)
|
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
className: "font-bold text-xs text-amber-300 flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "grip-vertical",
|
|
className: "w-3 h-3 text-zinc-500"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "wrench",
|
|
className: "w-3.5 h-3.5 text-amber-400"
|
|
})), " Python DSP Tools"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => closePanel('python_tools'),
|
|
className: "text-zinc-600 hover:text-zinc-300"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "x",
|
|
className: "w-3 h-3"
|
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
className: "p-1 bg-[#141414] rounded border border-zinc-800 text-xs font-mono text-zinc-400"
|
|
}, "// Non-AI Audio Processing Tools"), /*#__PURE__*/React.createElement("div", {
|
|
className: "grid grid-cols-2 gap-1 text-xs"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => runPythonTool('normalize'),
|
|
className: "py-1 bg-amber-950/80 hover:bg-amber-900 text-amber-300 border border-amber-800/80 rounded font-bold flex items-center justify-center gap-1"
|
|
}, "⚡ Peak Norm (0dB)"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => runPythonTool('invert_phase'),
|
|
className: "py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 border border-zinc-700 rounded font-bold flex items-center justify-center gap-1"
|
|
}, "🔄 Phase Invert"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => runPythonTool('swap_channels'),
|
|
className: "py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 border border-zinc-700 rounded font-bold flex items-center justify-center gap-1"
|
|
}, "🔀 Swap L/R"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => runPythonTool('synth_wave'),
|
|
className: "py-1 bg-teal-950/80 hover:bg-teal-900 text-teal-300 border border-teal-800/80 rounded font-bold flex items-center justify-center gap-1"
|
|
}, "🎹 Gen Synth Tone")));
|
|
if (panelId === 'selection') return /*#__PURE__*/React.createElement("div", {
|
|
className: "flex flex-col h-full gap-1.5"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center justify-between shrink-0 cursor-grab active:cursor-grabbing select-none",
|
|
onMouseDown: e => startPanelDrag('selection', e)
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs text-zinc-500 font-bold uppercase flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "grip-vertical",
|
|
className: "w-3 h-3 text-zinc-500"
|
|
})), " Selection"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => closePanel('selection'),
|
|
className: "text-zinc-600 hover:text-zinc-300"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "x",
|
|
className: "w-3 h-3"
|
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
className: "grid grid-cols-3 gap-1 bg-[#141414] p-1.5 rounded border border-zinc-800"
|
|
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
|
|
className: "block text-[7px] text-zinc-500 font-bold uppercase mb-0.5"
|
|
}, "Start"), /*#__PURE__*/React.createElement("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-xs rounded py-0.5 border border-zinc-700 focus:outline-none"
|
|
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
|
|
className: "block text-[7px] text-zinc-500 font-bold uppercase mb-0.5"
|
|
}, "End"), /*#__PURE__*/React.createElement("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-xs rounded py-0.5 border border-zinc-700 focus:outline-none"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex flex-col justify-center"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-[7px] text-zinc-500 font-bold uppercase"
|
|
}, "Len"), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-zinc-200 font-mono text-xs font-semibold mt-0.5"
|
|
}, selectionStats.length, "s"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "grid grid-cols-3 gap-1 bg-[#141414] p-1.5 rounded border border-zinc-800 mt-1"
|
|
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
|
|
className: "block text-[7px] text-zinc-500 font-bold uppercase mb-0.5"
|
|
}, "Begin Bar"), /*#__PURE__*/React.createElement("input", {
|
|
type: "number",
|
|
min: "1",
|
|
value: beginBar,
|
|
onChange: e => {
|
|
const b = parseInt(e.target.value) || 1;
|
|
setBeginBar(b);
|
|
const beatDuration = 60 / parseInt(bpm || 120);
|
|
const t = (b - 1) * beatDuration * 4;
|
|
clearLocalSelection();
|
|
setSelectionMode('global');
|
|
setSelectionStart(t);
|
|
setSelectionEnd(t + beatDuration * 4);
|
|
},
|
|
className: "w-full bg-[#242424] text-white text-center font-mono text-xs rounded py-0.5 border border-zinc-700 focus:outline-none"
|
|
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
|
|
className: "block text-[7px] text-zinc-500 font-bold uppercase mb-0.5"
|
|
}, "End Bar"), /*#__PURE__*/React.createElement("input", {
|
|
type: "number",
|
|
min: "1",
|
|
value: endBar,
|
|
onChange: e => {
|
|
const b = parseInt(e.target.value) || 1;
|
|
setEndBar(b);
|
|
const beatDuration = 60 / parseInt(bpm || 120);
|
|
const t = (b - 1) * beatDuration * 4;
|
|
setSelectionEnd(t + beatDuration * 4);
|
|
setNumberBar(b - beginBar + 1);
|
|
},
|
|
className: "w-full bg-[#242424] text-white text-center font-mono text-xs rounded py-0.5 border border-zinc-700 focus:outline-none"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex flex-col justify-center"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-[7px] text-zinc-500 font-bold uppercase"
|
|
}, "# Bars"), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-zinc-200 font-mono text-xs font-semibold mt-0.5"
|
|
}, numberBar))));
|
|
if (panelId === 'media_explorer') return /*#__PURE__*/React.createElement("div", {
|
|
className: "flex flex-col h-full gap-1.5"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center justify-between shrink-0 cursor-grab active:cursor-grabbing select-none",
|
|
onMouseDown: e => startPanelDrag('media_explorer', e)
|
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
className: "font-bold text-xs text-emerald-300 flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "grip-vertical",
|
|
className: "w-3 h-3 text-zinc-500"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "folder-open",
|
|
className: "w-3.5 h-3.5 text-emerald-400"
|
|
})), " Media Explorer"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => closePanel('media_explorer'),
|
|
className: "text-zinc-600 hover:text-zinc-300"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "x",
|
|
className: "w-3 h-3"
|
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex-1 overflow-y-auto text-xs text-zinc-400 font-mono p-2"
|
|
}, "// Placeholder: Media files browser"));
|
|
if (panelId === 'fx_rack') return /*#__PURE__*/React.createElement("div", {
|
|
className: "flex flex-col h-full gap-1.5"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center justify-between shrink-0 cursor-grab active:cursor-grabbing select-none",
|
|
onMouseDown: e => startPanelDrag('fx_rack', e)
|
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
className: "font-bold text-xs text-rose-300 flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "grip-vertical",
|
|
className: "w-3 h-3 text-zinc-500"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "sliders",
|
|
className: "w-3.5 h-3.5 text-rose-400"
|
|
})), " Plugin FX Rack"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => closePanel('fx_rack'),
|
|
className: "text-zinc-600 hover:text-zinc-300"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "x",
|
|
className: "w-3 h-3"
|
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex-1 text-xs text-zinc-500 italic flex items-center justify-center"
|
|
}, "No FX plugins loaded"));
|
|
if (panelId === 'midi_events') return /*#__PURE__*/React.createElement("div", {
|
|
className: "flex flex-col h-full gap-1.5"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center justify-between shrink-0 cursor-grab active:cursor-grabbing select-none",
|
|
onMouseDown: e => startPanelDrag('midi_events', e)
|
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
className: "font-bold text-xs text-sky-300 flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "grip-vertical",
|
|
className: "w-3 h-3 text-zinc-500"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "music",
|
|
className: "w-3.5 h-3.5 text-sky-400"
|
|
})), " MIDI Event List"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => closePanel('midi_events'),
|
|
className: "text-zinc-600 hover:text-zinc-300"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "x",
|
|
className: "w-3 h-3"
|
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex-1 text-xs text-zinc-500 italic flex items-center justify-center"
|
|
}, "No MIDI events selected"));
|
|
return null;
|
|
};
|
|
const renderDock = (pos, title) => {
|
|
const panels = dockPanels[pos];
|
|
if (panels.length === 0) return null;
|
|
const isSide = pos === 'left' || pos === 'right';
|
|
const borderClass = pos === 'left' ? 'border-r' : pos === 'right' ? 'border-l' : pos === 'top' ? 'border-b' : 'border-t';
|
|
const bgClass = 'bg-[#1e1e1e]';
|
|
const highlight = panelDragRef.current && panelDropZone === pos;
|
|
if (pos === 'right') return /*#__PURE__*/React.createElement("div", {
|
|
id: "right-sidebar",
|
|
className: `${borderClass} ${bgClass} flex flex-col overflow-hidden select-none`,
|
|
style: {
|
|
width: `${rightSidebarWidth}px`,
|
|
minWidth: '200px',
|
|
maxWidth: '600px',
|
|
flexShrink: 0
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex-1 flex flex-col gap-2 p-2 overflow-hidden"
|
|
}, panels.map((p, idx) => /*#__PURE__*/React.createElement(React.Fragment, {
|
|
key: p
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: `${p === 'media_explorer' ? 'flex-shrink-0' : 'flex-1 min-h-0'} border border-zinc-700 rounded-lg bg-[#262626] shadow-sm`,
|
|
style: p === 'media_explorer' ? {
|
|
height: `${mediaExplorerHeight}%`
|
|
} : {}
|
|
}, renderPanelContent(p)), idx < panels.length - 1 && /*#__PURE__*/React.createElement("div", {
|
|
className: "h-1.5 cursor-ns-resize hover:bg-cyan-500/50 transition-colors rounded shrink-0",
|
|
onMouseDown: startRowResize
|
|
})))));
|
|
const sideClass = isSide ? 'shrink-0 overflow-y-auto' : 'shrink-0';
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
id: "daw-bottom",
|
|
className: `${sideClass} ${borderClass} ${bgClass} flex ${isSide ? 'flex-col p-2 gap-2' : 'flex-row p-1.5 gap-3'} select-none ${highlight ? 'ring-2 ring-cyan-500 ring-inset' : ''}`
|
|
}, panels.map(p => /*#__PURE__*/React.createElement("div", {
|
|
key: p,
|
|
className: `${isSide ? 'w-full' : 'flex-none w-[320px]'} border border-zinc-700 rounded-lg bg-[#262626] shadow-sm p-2`
|
|
}, renderPanelContent(p))));
|
|
};
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
ref: workspaceRef,
|
|
className: "flex-1 flex flex-col overflow-hidden select-none daw-bg relative"
|
|
}, panelDragRef.current && panelDropZone && /*#__PURE__*/React.createElement("div", {
|
|
className: "absolute inset-0 z-50 pointer-events-none"
|
|
}, panelDropZone === 'top' && /*#__PURE__*/React.createElement("div", {
|
|
className: "absolute top-0 left-0 right-0 h-1 bg-cyan-400 shadow-[0_0_8px_#06b6d4]"
|
|
}), panelDropZone === 'bottom' && /*#__PURE__*/React.createElement("div", {
|
|
className: "absolute bottom-0 left-0 right-0 h-1 bg-cyan-400 shadow-[0_0_8px_#06b6d4]"
|
|
}), panelDropZone === 'left' && /*#__PURE__*/React.createElement("div", {
|
|
className: "absolute top-0 bottom-0 left-0 w-1 bg-cyan-400 shadow-[0_0_8px_#06b6d4]"
|
|
}), panelDropZone === 'right' && /*#__PURE__*/React.createElement("div", {
|
|
className: "absolute top-0 bottom-0 right-0 w-1 bg-cyan-400 shadow-[0_0_8px_#06b6d4]"
|
|
})), dragGhostPanel && dragGhostPos && /*#__PURE__*/React.createElement("div", {
|
|
className: "fixed z-[100] pointer-events-none opacity-80 border border-cyan-500 rounded-lg bg-[#262626] shadow-2xl p-3 w-56",
|
|
style: {
|
|
left: dragGhostPos.x,
|
|
top: dragGhostPos.y
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-2 text-xs text-zinc-200 font-bold"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "move",
|
|
className: "w-3.5 h-3.5 text-cyan-400"
|
|
})), dragGhostPanel === 'export' ? 'Export Panel' : dragGhostPanel === 'ai' ? 'AI Panel' : dragGhostPanel === 'python_tools' ? 'Audio Processing Panel' : 'Selection Panel'), /*#__PURE__*/React.createElement("div", {
|
|
className: "text-xs text-zinc-500 mt-1"
|
|
}, "Drop at edge to dock")), renderDock('top', 'Top'), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex-1 flex overflow-hidden"
|
|
}, renderDock('left', 'Left'), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex-1 flex flex-col overflow-hidden min-w-0"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex-1 flex overflow-hidden"
|
|
}, activeTab === 'main' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
ref: tcpContainerRef,
|
|
onScroll: handleTCPScroll,
|
|
className: "w-[300px] shrink-0 z-20 bg-[#262626] overflow-hidden flex flex-col border-r border-zinc-900",
|
|
style: {
|
|
scrollbarWidth: 'none',
|
|
msOverflowStyle: 'none'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "sticky top-0 z-50 flex items-center justify-between h-10 border-b border-zinc-900 bg-[#242424] px-2 shrink-0"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs font-bold text-zinc-300 flex items-center gap-1.5"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "sliders",
|
|
className: "w-3.5 h-3.5 text-cyan-400"
|
|
})), "TRACKS (", tracks.length, ")"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: addNewTrack,
|
|
className: "px-2.5 py-1 bg-cyan-600 hover:bg-cyan-500 text-white rounded text-xs font-semibold flex items-center gap-1 shadow transition"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "plus",
|
|
className: "w-3 h-3"
|
|
})), " Add Track")), /*#__PURE__*/React.createElement("div", {
|
|
className: "sticky top-10 z-40 flex h-[40px] border-b border-purple-500/30 bg-[#1a1a2e] p-2 border-l-4 border-purple-500 shrink-0"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center justify-between w-full"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-2"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs font-bold text-purple-400 font-mono"
|
|
}, "TM"), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs font-semibold text-zinc-300"
|
|
}, "Tempo")), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("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-xs text-zinc-300 text-center font-mono focus:outline-none focus:border-purple-500",
|
|
min: "40",
|
|
max: "300"
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs text-zinc-500"
|
|
}, "BPM")))), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex-1 flex flex-col divide-y divide-[#141414] bg-[#262626]"
|
|
}, tracks.length === 0 ? /*#__PURE__*/React.createElement("div", {
|
|
className: "p-6 text-center text-zinc-400 flex flex-col items-center justify-center space-y-3"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "plus-circle",
|
|
className: "w-8 h-8 text-cyan-400 opacity-80"
|
|
})), /*#__PURE__*/React.createElement("p", {
|
|
className: "text-xs font-medium"
|
|
}, "Chưa có Track nào trong dự án."), /*#__PURE__*/React.createElement("button", {
|
|
onClick: addNewTrack,
|
|
className: "px-3 py-1.5 bg-cyan-600 hover:bg-cyan-500 text-white rounded text-xs font-semibold flex items-center gap-1.5 shadow"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "plus",
|
|
className: "w-3.5 h-3.5"
|
|
})), " Thêm Track Mới")) : tracks.map((track, idx) => {
|
|
const isSelected = selectedTrackId === track.id;
|
|
return /*#__PURE__*/React.createElement("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)
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-start justify-between"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-2"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs font-bold text-zinc-500 font-mono"
|
|
}, (idx + 1).toString().padStart(2, '0')), /*#__PURE__*/React.createElement("label", {
|
|
onClick: e => {
|
|
e.stopPropagation();
|
|
const el = e.currentTarget.querySelector('input');
|
|
if (el) el.click();
|
|
},
|
|
className: "cursor-pointer"
|
|
}, /*#__PURE__*/React.createElement("input", {
|
|
type: "color",
|
|
value: track.color || '#0f766e',
|
|
onChange: e => {
|
|
e.stopPropagation();
|
|
updateTrackColor(track.id, e.target.value);
|
|
},
|
|
className: "w-0 h-0 opacity-0 absolute pointer-events-none"
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
className: "w-3 h-3 rounded-full border border-zinc-600 hover:scale-110 transition-transform",
|
|
style: {
|
|
backgroundColor: track.color
|
|
}
|
|
})), editingTrackName === track.id ? /*#__PURE__*/React.createElement("input", {
|
|
type: "text",
|
|
value: editNameInput,
|
|
autoFocus: true,
|
|
onChange: e => setEditNameInput(e.target.value),
|
|
onBlur: () => {
|
|
updateTrackName(track.id, editNameInput || track.name);
|
|
setEditingTrackName(null);
|
|
},
|
|
onKeyDown: e => {
|
|
if (e.key === 'Enter') {
|
|
updateTrackName(track.id, editNameInput || track.name);
|
|
setEditingTrackName(null);
|
|
}
|
|
if (e.key === 'Escape') setEditingTrackName(null);
|
|
},
|
|
onClick: e => e.stopPropagation(),
|
|
className: "text-xs font-semibold bg-black text-zinc-200 border border-cyan-500 rounded px-1 py-0 w-24 outline-none"
|
|
}) : /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs font-semibold text-zinc-300 truncate max-w-[80px] cursor-text hover:text-cyan-300 transition-colors",
|
|
title: "Click to rename",
|
|
onClick: e => {
|
|
e.stopPropagation();
|
|
setEditingTrackName(track.id);
|
|
setEditNameInput(track.name);
|
|
}
|
|
}, track.name)), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
onClick: e => {
|
|
e.stopPropagation();
|
|
toggleTrackMute(track.id);
|
|
},
|
|
className: `px-1.5 py-0.5 text-xs 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"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: e => {
|
|
e.stopPropagation();
|
|
toggleTrackSoloEvaluate(track.id);
|
|
},
|
|
className: `px-1.5 py-0.5 text-xs 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'}`
|
|
}, "S"), /*#__PURE__*/React.createElement("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"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "trash-2",
|
|
className: "w-3.5 h-3.5"
|
|
}))))), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex flex-col gap-0.5 text-xs",
|
|
onClick: e => e.stopPropagation()
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "w-8 text-right text-zinc-500 text-xs"
|
|
}, "Vol:"), /*#__PURE__*/React.createElement("input", {
|
|
type: "range",
|
|
min: "-50",
|
|
max: "7",
|
|
step: "0.5",
|
|
value: track.volumeDb ?? 0,
|
|
onChange: e => updateTrackVolumeDb(track.id, parseFloat(e.target.value)),
|
|
className: "flex-1 h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-cyan-500",
|
|
style: {
|
|
height: '4px'
|
|
}
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
className: "w-12 text-right font-mono text-zinc-300 text-xs"
|
|
}, track.volumeDb ?? 0, "dB")), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "w-8 text-right text-zinc-500 text-xs"
|
|
}, "Pan:"), /*#__PURE__*/React.createElement("input", {
|
|
type: "range",
|
|
min: "-100",
|
|
max: "100",
|
|
step: "1",
|
|
value: track.pan ?? 0,
|
|
onChange: e => updateTrackPan(track.id, parseInt(e.target.value)),
|
|
className: "flex-1 h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-purple-500",
|
|
style: {
|
|
height: '4px'
|
|
}
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
className: "w-12 text-right font-mono text-zinc-300 text-xs"
|
|
}, track.pan > 0 ? 'R' + track.pan : track.pan < 0 ? 'L' + Math.abs(track.pan) : 'C'))), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-1.5 mt-1",
|
|
onClick: e => e.stopPropagation()
|
|
}, /*#__PURE__*/React.createElement("input", {
|
|
type: "file",
|
|
id: `upload-${track.id}`,
|
|
accept: "audio/*",
|
|
className: "hidden",
|
|
onChange: e => loadFileOnTrack(track.id, e.target.files[0])
|
|
}), /*#__PURE__*/React.createElement("label", {
|
|
htmlFor: `upload-${track.id}`,
|
|
className: "px-2.5 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded text-xs flex items-center gap-1 cursor-pointer border border-zinc-700 font-medium"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "upload",
|
|
className: "w-3 h-3"
|
|
})), " File"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: e => {
|
|
e.stopPropagation();
|
|
showToast('FX panel for track ' + track.id, 'info');
|
|
},
|
|
className: "px-2.5 py-1 bg-zinc-800 hover:bg-zinc-700 text-purple-400 border border-purple-900 rounded text-xs font-bold flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "wand-2",
|
|
className: "w-3 h-3"
|
|
})), " FX: ", /*#__PURE__*/React.createElement("span", {
|
|
className: "text-zinc-500 font-normal"
|
|
}, "None")), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => generateSynthToTrack(track.id, 'synth'),
|
|
className: "px-2.5 py-1 bg-zinc-800 hover:bg-zinc-700 text-amber-400 border border-amber-800 rounded text-xs font-bold flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "music",
|
|
className: "w-3 h-3"
|
|
})), " Synth: ", /*#__PURE__*/React.createElement("span", {
|
|
className: "text-zinc-500 font-normal"
|
|
}, "None"))), /*#__PURE__*/React.createElement("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()
|
|
}));
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "h-[48px] border-r border-zinc-900 bg-[#1e1e1e]/50 shrink-0"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
ref: timelineWrapperRef,
|
|
onScroll: handleTimelineScroll,
|
|
className: "flex-1 relative z-10 overflow-x-auto overflow-y-auto min-w-0"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
width: `${timelineWidth}px`
|
|
},
|
|
className: "relative flex flex-col min-h-full"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "sticky top-0 z-45 flex h-10 border-b border-zinc-900 bg-[#242424] shrink-0"
|
|
}, /*#__PURE__*/React.createElement("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 /*#__PURE__*/React.createElement("div", {
|
|
key: i,
|
|
className: "absolute h-full border-l border-zinc-700 pl-1 pt-1 text-[14px] font-mono text-zinc-300 pointer-events-none",
|
|
style: {
|
|
left: `${x}px`
|
|
}
|
|
}, formatTimeSimple(sec));
|
|
}))), selectionMode === 'global' && selLeft !== null && selRight !== null && selRight > selLeft && /*#__PURE__*/React.createElement("div", {
|
|
className: "absolute inset-0 pointer-events-none z-20",
|
|
style: {
|
|
left: `${selLeft * zoom}px`,
|
|
width: `${(selRight - selLeft) * zoom}px`,
|
|
top: '40px'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "w-full h-full bg-amber-500/10",
|
|
style: {
|
|
borderLeft: '1px solid #f59e0b',
|
|
borderRight: '1px solid #f59e0b'
|
|
}
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "sticky top-10 z-35 flex h-[40px] border-b border-purple-500/30 bg-[#1a1a2e] shrink-0"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex-1 relative h-full overflow-hidden bg-[#1a1a2e]"
|
|
}, /*#__PURE__*/React.createElement(TempoTrackLane, {
|
|
bpm: parseInt(bpm) || 120,
|
|
zoom: zoom,
|
|
timelineWidth: timelineWidth,
|
|
viewportWidth: viewportWidth,
|
|
onPlayheadSet: handlePlayheadSet,
|
|
snapValue: snapValue,
|
|
onRulerMouseDown: handleRulerMouseDown,
|
|
scrollLeft: scrollLeft
|
|
}))), /*#__PURE__*/React.createElement("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 /*#__PURE__*/React.createElement("div", {
|
|
key: track.id,
|
|
style: {
|
|
height: `${track.height || 96}px`
|
|
},
|
|
className: `shrink-0 relative 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)
|
|
}, /*#__PURE__*/React.createElement(WaveformLane, {
|
|
track: track,
|
|
zoom: zoom,
|
|
timelineWidth: timelineWidth,
|
|
viewportWidth: viewportWidth,
|
|
onSelectRange: handleSelectRange,
|
|
onPlayheadSet: handlePlayheadSet,
|
|
isSelected: isSelected,
|
|
onSelectTrack: setSelectedTrackId,
|
|
markers: track.markers,
|
|
onTrackLaneMouseDown: handleTrackLaneMouseDown,
|
|
onContextMenu: handleContextMenu,
|
|
onClipDragStart: handleClipDragStart,
|
|
onClipStretchStart: handleClipStretchStart,
|
|
onSelectionEdgeDragStart: handleSelectionEdgeDragStart,
|
|
setSelectedClipId: setSelectedClipId,
|
|
selectedClipId: selectedClipId,
|
|
activeTool: activeTool,
|
|
onSplitTrackAtTime: handleSplitTrackAtTime,
|
|
onEditClipInSubTab: handleEditClipInSubTab,
|
|
snapValue: snapValue,
|
|
bpm: bpm,
|
|
selectionMode: selectionMode,
|
|
localSelectionTrackId: localSelectionTrackId,
|
|
localSelectionStart: localSelectionStart,
|
|
currentTime: currentTime,
|
|
getLocalAnchor: () => localSelectionAnchorRef.current,
|
|
onClearLocalSelection: clearLocalSelection,
|
|
onSetSelectionMode: setSelectionMode,
|
|
onSetSelectionStart: setSelectionStart,
|
|
onSetSelectionEnd: setSelectionEnd,
|
|
onSetCurrentTime: setCurrentTime,
|
|
onSetLocalSelectionTrackId: setLocalSelectionTrackId,
|
|
onSetLocalSelectionStart: setLocalSelectionStart,
|
|
onSetLocalSelectionEnd: setLocalSelectionEnd,
|
|
localSelLeft: localSelectionStart !== null && localSelectionEnd !== null ? Math.min(localSelectionStart, localSelectionEnd) : null,
|
|
localSelRight: localSelectionStart !== null && localSelectionEnd !== null ? Math.max(localSelectionStart, localSelectionEnd) : null,
|
|
scrollLeft: scrollLeft
|
|
}), selectionMode === 'local' && localSelectionTrackId === track.id && localSelectionStart !== null && localSelectionEnd !== null && Math.abs(localSelectionEnd - localSelectionStart) > 0 && /*#__PURE__*/React.createElement("div", {
|
|
className: "absolute top-0 bottom-0 border-l border-r border-amber-400 bg-amber-500/20 z-20 pointer-events-none",
|
|
style: {
|
|
left: `${Math.min(localSelectionStart, localSelectionEnd) * zoom}px`,
|
|
width: `${Math.abs(localSelectionEnd - localSelectionStart) * zoom}px`
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "absolute -left-[1px] top-0 bottom-0 w-[2px] bg-amber-400 z-30 pointer-events-auto cursor-ew-resize",
|
|
onMouseDown: e => handleHandleDragStart(e, 'left')
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
className: "absolute -right-[1px] top-0 bottom-0 w-[2px] bg-amber-400 z-30 pointer-events-auto cursor-ew-resize",
|
|
onMouseDown: e => handleHandleDragStart(e, 'right')
|
|
})), track.buffer && /*#__PURE__*/React.createElement("div", {
|
|
className: "absolute right-2 top-2 flex items-center gap-1 z-10 opacity-70 hover:opacity-100"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => handleSplitTrack(track.id),
|
|
className: "px-1.5 py-0.5 bg-zinc-900/95 text-zinc-300 rounded text-xs flex items-center gap-1 border border-zinc-700/50"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "scissors",
|
|
className: "w-2.5 h-2.5 text-cyan-400"
|
|
})), " Cắt")), /*#__PURE__*/React.createElement("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()
|
|
}));
|
|
}), /*#__PURE__*/React.createElement("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) {
|
|
setHoveredTrackId(addNewTrack());
|
|
}
|
|
},
|
|
onClick: addNewTrack
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "flex items-center gap-1 text-zinc-400"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "plus",
|
|
className: "w-3.5 h-3.5"
|
|
})), " Kéo clip xuống hoặc Click tạo Track")), selectionMode === 'global' && selLeft !== null && selRight !== null && selRight > selLeft && /*#__PURE__*/React.createElement("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
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "absolute -left-[1px] top-0 bottom-0 w-[1px] bg-amber-500 hover:bg-amber-400 cursor-ew-resize z-30",
|
|
onMouseDown: e => handleHandleDragStart(e, 'left')
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
className: "absolute -right-[1px] top-0 bottom-0 w-[1px] bg-amber-500 hover:bg-amber-400 cursor-ew-resize z-30",
|
|
onMouseDown: e => handleHandleDragStart(e, 'right')
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "absolute top-0 bottom-0 w-[2px] bg-[#ef4444] z-20 pointer-events-none",
|
|
style: {
|
|
left: `${playheadLeftPos}px`
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "w-3 h-3 bg-[#ef4444] rotate-45 transform -translate-x-1/2 -translate-y-1/2 absolute top-0"
|
|
})))))) : (() => {
|
|
const st = subTabs.find(s => s.id === activeTab);
|
|
if (!st) return null;
|
|
const subTrack = tracks.find(t => t.id === st.trackId);
|
|
const vTrack = subTrack ? {
|
|
...subTrack,
|
|
buffer: st.buffer,
|
|
isSubTab: true
|
|
} : null;
|
|
const subTabTimelineWidth = Math.max(zoom * (st.buffer ? st.buffer.duration : 0), viewportWidth);
|
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
className: "w-[320px] shrink-0 z-30 bg-[#262626] overflow-y-scroll no-scrollbar flex flex-col border-r border-zinc-900",
|
|
style: {
|
|
scrollbarWidth: 'none',
|
|
msOverflowStyle: 'none'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "sticky top-0 z-50 flex items-center h-10 border-b border-zinc-900 bg-[#242424] px-2 justify-between shrink-0"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs font-bold text-zinc-500 uppercase"
|
|
}, "Sub-Tab"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => closeSubTab(st.id),
|
|
className: "px-1.5 py-0.5 text-xs bg-zinc-800 hover:bg-zinc-700 text-zinc-400 rounded border border-zinc-700 flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "x",
|
|
className: "w-3 h-3"
|
|
})), " Close")), vTrack ? /*#__PURE__*/React.createElement("div", {
|
|
key: vTrack.id,
|
|
className: "flex-1 flex flex-col p-2.5 bg-[#1e1e1e] border-r border-zinc-900 border-l-4 border-l-cyan-500"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center justify-between mb-2"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-2"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
onClick: e => {
|
|
e.stopPropagation();
|
|
const el = e.currentTarget.querySelector('input');
|
|
if (el) el.click();
|
|
},
|
|
className: "cursor-pointer"
|
|
}, /*#__PURE__*/React.createElement("input", {
|
|
type: "color",
|
|
value: vTrack.color || '#0f766e',
|
|
onChange: e => {
|
|
e.stopPropagation();
|
|
updateTrackColor(vTrack.id, e.target.value);
|
|
},
|
|
className: "w-0 h-0 opacity-0 absolute pointer-events-none"
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
className: "w-3 h-3 rounded-full border border-zinc-600 hover:scale-110 transition-transform",
|
|
style: {
|
|
backgroundColor: vTrack.color
|
|
}
|
|
})), editingTrackName === vTrack.id ? /*#__PURE__*/React.createElement("input", {
|
|
type: "text",
|
|
value: editNameInput,
|
|
autoFocus: true,
|
|
onChange: e => setEditNameInput(e.target.value),
|
|
onBlur: () => {
|
|
updateTrackName(vTrack.id, editNameInput || vTrack.name);
|
|
setEditingTrackName(null);
|
|
},
|
|
onKeyDown: e => {
|
|
if (e.key === 'Enter') {
|
|
updateTrackName(vTrack.id, editNameInput || vTrack.name);
|
|
setEditingTrackName(null);
|
|
}
|
|
if (e.key === 'Escape') setEditingTrackName(null);
|
|
},
|
|
onClick: e => e.stopPropagation(),
|
|
className: "text-xs font-semibold bg-black text-zinc-200 border border-cyan-500 rounded px-1 py-0 w-24 outline-none"
|
|
}) : /*#__PURE__*/React.createElement("span", {
|
|
className: "text-xs font-semibold text-zinc-300 truncate max-w-[80px] cursor-text hover:text-cyan-300 transition-colors",
|
|
title: "Click to rename",
|
|
onClick: e => {
|
|
e.stopPropagation();
|
|
setEditingTrackName(vTrack.id);
|
|
setEditNameInput(vTrack.name);
|
|
}
|
|
}, vTrack.name)), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
onClick: e => {
|
|
e.stopPropagation();
|
|
toggleTrackMute(vTrack.id);
|
|
},
|
|
className: `px-1.5 py-0.5 text-xs rounded font-mono font-bold border ${vTrack.muted ? 'bg-red-950 text-red-400 border-red-700' : 'bg-zinc-800 text-zinc-400 border-transparent hover:text-zinc-200'}`
|
|
}, "M"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: e => {
|
|
e.stopPropagation();
|
|
toggleTrackSoloEvaluate(vTrack.id);
|
|
},
|
|
className: `px-1.5 py-0.5 text-xs rounded font-mono font-bold border ${soloedTrackId === vTrack.id || vTrack.solo ? 'bg-amber-950 text-amber-400 border-amber-600' : 'bg-zinc-800 text-zinc-400 border-transparent hover:text-zinc-200'}`
|
|
}, "S"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex flex-col gap-2.5 text-[14px] mb-3"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "w-10 text-right text-zinc-500 text-[14px]"
|
|
}, "Vol:"), /*#__PURE__*/React.createElement("input", {
|
|
type: "range",
|
|
min: "-50",
|
|
max: "7",
|
|
step: "0.5",
|
|
id: `tcp-vol-${st.id}`,
|
|
value: vTrack.volumeDb ?? 0,
|
|
onChange: e => updateTrackVolumeDb(vTrack.id, parseFloat(e.target.value)),
|
|
className: "flex-1 h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-cyan-500",
|
|
style: {
|
|
height: '4px'
|
|
}
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
className: "w-16 text-right font-mono text-zinc-300 text-[14px]",
|
|
id: `tcp-vol-label-${st.id}`
|
|
}, vTrack.volumeDb ?? 0, "dB")), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "w-10 text-right text-zinc-500 text-[14px]"
|
|
}, "Pan:"), /*#__PURE__*/React.createElement("input", {
|
|
type: "range",
|
|
min: "-100",
|
|
max: "100",
|
|
step: "1",
|
|
id: `tcp-pan-${st.id}`,
|
|
value: vTrack.pan ?? 0,
|
|
onChange: e => updateTrackPan(vTrack.id, parseInt(e.target.value)),
|
|
className: "flex-1 h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-purple-500",
|
|
style: {
|
|
height: '4px'
|
|
}
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
className: "w-16 text-right font-mono text-zinc-300 text-[14px]",
|
|
id: `tcp-pan-label-detailed-${st.id}`
|
|
}, vTrack.pan > 0 ? 'R' + vTrack.pan : vTrack.pan < 0 ? 'L' + Math.abs(vTrack.pan) : 'C')), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-1.5 text-[14px]"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => setSubTabs(prev => prev.map(s => s.id === st.id ? {
|
|
...s,
|
|
isLooping: !s.isLooping
|
|
} : s)),
|
|
className: `px-2 py-0.5 text-[14px] rounded border font-bold ${st.isLooping ? 'bg-amber-700 text-white border-amber-500' : 'bg-zinc-800 text-zinc-400 border-zinc-700'}`
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "repeat",
|
|
className: "w-3.5 h-3.5"
|
|
}))), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => updateSubTabEffects(st.id, {
|
|
reverse: !(st.effects || {}).reverse
|
|
}),
|
|
className: `px-2 py-0.5 rounded border text-[14px] font-bold ${(st.effects || {}).reverse ? 'bg-zinc-600 text-white border-zinc-500' : 'bg-zinc-800 text-zinc-400 border-zinc-700'} flex items-center justify-center`,
|
|
title: "Reverse"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "arrow-left-right",
|
|
className: "w-3.5 h-3.5"
|
|
}))), /*#__PURE__*/React.createElement("span", {
|
|
className: "w-10 text-right text-zinc-500 text-[14px]"
|
|
}, "Loop:"), /*#__PURE__*/React.createElement("input", {
|
|
type: "number",
|
|
min: "0",
|
|
max: "999",
|
|
value: st.loopCount || 0,
|
|
onChange: e => setSubTabs(prev => prev.map(s => s.id === st.id ? {
|
|
...s,
|
|
loopCount: Math.max(0, parseInt(e.target.value) || 0)
|
|
} : s)),
|
|
className: "w-12 bg-black text-amber-300 text-[14px] px-1 py-0.5 rounded border border-zinc-700 text-center font-mono",
|
|
title: "Loop count"
|
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex gap-1 justify-between my-2.5"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex flex-col items-center bg-zinc-900/60 p-1.5 rounded border border-zinc-800 flex-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-[14px] font-bold text-zinc-400 uppercase tracking-tighter",
|
|
title: "Normalize"
|
|
}, "Norm"), /*#__PURE__*/React.createElement("input", {
|
|
type: "range",
|
|
min: "-12",
|
|
max: "0",
|
|
step: "0.1",
|
|
value: subTabNormVal,
|
|
onChange: e => setSubTabNormVal(parseFloat(e.target.value)),
|
|
style: {
|
|
writingMode: 'vertical-lr',
|
|
direction: 'rtl',
|
|
height: '120px',
|
|
width: '20px',
|
|
accentColor: '#a1a1aa'
|
|
},
|
|
className: "my-2 cursor-pointer"
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-[14px] font-mono text-zinc-300 font-bold"
|
|
}, subTabNormVal, "dB"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => applySubTabEffect(st.id, 'normalize', subTabNormVal),
|
|
className: "mt-1.5 px-1 py-1 bg-zinc-700 hover:bg-zinc-600 text-zinc-100 rounded text-[14px] font-bold w-full uppercase border border-zinc-650"
|
|
}, "Apply")), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex flex-col items-center bg-zinc-900/60 p-1.5 rounded border border-zinc-800 flex-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-[14px] font-bold text-zinc-400 uppercase tracking-tighter",
|
|
title: "Pitch Shift"
|
|
}, "Pitch"), /*#__PURE__*/React.createElement("input", {
|
|
type: "range",
|
|
min: "-12",
|
|
max: "12",
|
|
step: "0.5",
|
|
value: subTabPitchVal,
|
|
onChange: e => setSubTabPitchVal(parseFloat(e.target.value)),
|
|
style: {
|
|
writingMode: 'vertical-lr',
|
|
direction: 'rtl',
|
|
height: '120px',
|
|
width: '20px',
|
|
accentColor: '#a1a1aa'
|
|
},
|
|
className: "my-2 cursor-pointer"
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-[14px] font-mono text-zinc-300 font-bold"
|
|
}, subTabPitchVal > 0 ? '+' : '', subTabPitchVal, "st"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => applySubTabEffect(st.id, 'pitch', subTabPitchVal),
|
|
className: "mt-1.5 px-1 py-1 bg-zinc-700 hover:bg-zinc-600 text-zinc-100 rounded text-[14px] font-bold w-full uppercase border border-zinc-650"
|
|
}, "Apply")), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex flex-col items-center bg-zinc-900/60 p-1.5 rounded border border-zinc-800 flex-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "text-[14px] font-bold text-zinc-400 uppercase tracking-tighter",
|
|
title: "Gain Multiplier"
|
|
}, "Gain"), /*#__PURE__*/React.createElement("input", {
|
|
type: "range",
|
|
min: "0",
|
|
max: "150",
|
|
step: "1",
|
|
value: subTabGainVal,
|
|
onChange: e => setSubTabGainVal(parseInt(e.target.value)),
|
|
style: {
|
|
writingMode: 'vertical-lr',
|
|
direction: 'rtl',
|
|
height: '120px',
|
|
width: '20px',
|
|
accentColor: '#a1a1aa'
|
|
},
|
|
className: "my-2 cursor-pointer"
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-[14px] font-mono text-zinc-300 font-bold"
|
|
}, subTabGainVal, "%"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => applySubTabEffect(st.id, 'gain', subTabGainVal),
|
|
className: "mt-1.5 px-1 py-1 bg-zinc-700 hover:bg-zinc-600 text-zinc-100 rounded text-[14px] font-bold w-full uppercase border border-zinc-650"
|
|
}, "Apply"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex-1"
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
className: "mt-auto pt-2.5 border-t border-zinc-800"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center justify-between text-[14px] text-zinc-500 mb-1 font-semibold uppercase"
|
|
}, /*#__PURE__*/React.createElement("span", null, "Duration:"), /*#__PURE__*/React.createElement("span", {
|
|
className: "font-mono text-zinc-300"
|
|
}, st.buffer ? formatTime(st.buffer.duration) : '0s')), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center justify-between text-[14px] text-zinc-500 mb-2.5 font-semibold uppercase"
|
|
}, /*#__PURE__*/React.createElement("span", null, "SR:"), /*#__PURE__*/React.createElement("span", {
|
|
className: "font-mono text-zinc-300"
|
|
}, st.buffer ? st.buffer.sampleRate : 0, " Hz")), /*#__PURE__*/React.createElement("div", {
|
|
className: "grid grid-cols-2 gap-1 mb-2"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
onClick: async e => {
|
|
subTabAiTrackIdRef.current = st.trackId;
|
|
handleAIScan();
|
|
},
|
|
disabled: analysisState.isRunning,
|
|
className: "py-1 bg-purple-900 hover:bg-purple-800 text-purple-100 font-bold rounded text-xs border border-purple-700 flex items-center justify-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "map-pin",
|
|
className: "w-3 h-3"
|
|
})), " Scan"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: async e => {
|
|
subTabAiTrackIdRef.current = st.trackId;
|
|
handleAICutToNewTrack();
|
|
},
|
|
disabled: analysisState.isRunning,
|
|
className: "py-1 bg-fuchsia-800 hover:bg-fuchsia-700 text-white font-bold rounded text-xs flex items-center justify-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "scissors",
|
|
className: "w-3 h-3"
|
|
})), " Cut"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: async e => {
|
|
subTabAiTrackIdRef.current = st.trackId;
|
|
if (st.buffer) {
|
|
setSelectionRangeOnBuffer(st.buffer, st.selectionStart || 0, st.selectionEnd || st.buffer.duration);
|
|
}
|
|
handleAIAnalysicLoop();
|
|
},
|
|
disabled: analysisState.isRunning,
|
|
className: "py-1 bg-violet-800 hover:bg-violet-700 text-violet-100 font-bold rounded text-xs border border-violet-600 flex items-center justify-center gap-1 col-span-2"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "sparkles",
|
|
className: "w-3 h-3"
|
|
})), " AI Analysic Loop")), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => exportSubTabBuffer(st.id),
|
|
className: "w-full py-1.5 mb-1.5 bg-blue-700 hover:bg-blue-600 text-white font-bold rounded text-[14px] flex items-center justify-center gap-1 transition"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "download",
|
|
className: "w-4 h-4"
|
|
})), " Export"), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => applySubTab(st.id),
|
|
className: "w-full py-1.5 bg-emerald-700 hover:bg-emerald-600 text-white font-bold rounded text-[14px] flex items-center justify-center gap-1 transition"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "save",
|
|
className: "w-4 h-4"
|
|
})), " Save"))) : /*#__PURE__*/React.createElement("div", {
|
|
className: "flex-1 flex items-center justify-center text-xs text-zinc-500"
|
|
}, "Track not found")), /*#__PURE__*/React.createElement("div", {
|
|
ref: timelineWrapperRef,
|
|
className: "flex-1 relative z-10 overflow-x-auto overflow-y-auto min-w-0"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
width: `${subTabTimelineWidth}px`
|
|
},
|
|
className: "relative flex flex-col min-h-full"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "sticky top-0 z-45 flex h-10 border-b border-zinc-900 bg-[#242424] shrink-0"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex-1 relative h-full flex items-center select-none cursor-ew-resize overflow-hidden",
|
|
onMouseDown: handleRulerMouseDown
|
|
}, Array.from({
|
|
length: Math.ceil(st.buffer ? st.buffer.duration : 0)
|
|
}).map((_, i) => {
|
|
const sec = i;
|
|
const x = sec * zoom;
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
key: i,
|
|
className: "absolute h-full border-l border-zinc-700 pl-1 pt-1 text-[14px] font-mono text-zinc-300 pointer-events-none",
|
|
style: {
|
|
left: `${x}px`
|
|
}
|
|
}, formatTimeSimple(sec));
|
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
className: "sticky top-10 z-35 flex h-[40px] border-b border-purple-500/30 bg-[#1a1a2e] shrink-0"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex-1 relative h-full overflow-hidden bg-[#1a1a2e]"
|
|
}, /*#__PURE__*/React.createElement(TempoTrackLane, {
|
|
bpm: parseInt(bpm) || 120,
|
|
zoom: zoom,
|
|
timelineWidth: subTabTimelineWidth,
|
|
onPlayheadSet: setCurrentTime,
|
|
snapValue: snapValue
|
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex-1 flex flex-col relative bg-[#111111] min-h-full"
|
|
}, vTrack && /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
height: `${subTabHeight}px`
|
|
},
|
|
className: "relative overflow-hidden border-2 border-purple-500/40 rounded bg-[#151515] mx-1 mt-1 shrink-0"
|
|
}, /*#__PURE__*/React.createElement(SubTabWaveform, {
|
|
buffer: st.buffer,
|
|
subTabId: st.id,
|
|
activeTab: activeTab,
|
|
activeTool: activeTool,
|
|
currentTime: st.currentTime,
|
|
selectionStart: st.selectionStart,
|
|
selectionEnd: st.selectionEnd,
|
|
onSelectRange: (start, end) => setSubTabs(prev => prev.map(s => s.id === st.id ? {
|
|
...s,
|
|
selectionStart: start,
|
|
selectionEnd: end
|
|
} : s)),
|
|
onPlayheadSet: time => setSubTabs(prev => prev.map(s => s.id === st.id ? {
|
|
...s,
|
|
currentTime: time
|
|
} : s)),
|
|
onContextMenu: (e, clickTime) => setContextMenu({
|
|
x: e.clientX,
|
|
y: e.clientY,
|
|
isSubTab: true,
|
|
subTabId: st.id,
|
|
time: clickTime
|
|
}),
|
|
zoom: zoom,
|
|
timelineWidth: subTabTimelineWidth,
|
|
color: vTrack.color,
|
|
name: vTrack.name,
|
|
speed: st.speed || 1.0,
|
|
volumeNodes: st.volumeNodes || [],
|
|
panningNodes: st.panningNodes || [],
|
|
fadeInLen: st.fadeInLen || 0,
|
|
fadeOutLen: st.fadeOutLen || 0,
|
|
graphMode: st.graphMode,
|
|
channelInfo: st.channelInfo,
|
|
selectedNodeTime: subTabSelectedNodeTime,
|
|
setSelectedNodeTime: setSubTabSelectedNodeTime,
|
|
onUpdateNodes: nodes => setSubTabs(prev => prev.map(s => s.id === st.id ? {
|
|
...s,
|
|
[s.graphMode === 'pan' ? 'panningNodes' : 'volumeNodes']: nodes
|
|
} : s)),
|
|
onUpdateFade: fade => setSubTabs(prev => prev.map(s => s.id === st.id ? {
|
|
...s,
|
|
fadeInLen: fade.fadeInLen ?? s.fadeInLen,
|
|
fadeOutLen: fade.fadeOutLen ?? s.fadeOutLen
|
|
} : s)),
|
|
onModeToggle: () => setSubTabs(prev => prev.map(s => s.id === st.id ? {
|
|
...s,
|
|
graphMode: s.graphMode === 'pan' ? null : 'pan'
|
|
} : s)),
|
|
onSpeedChange: newSpeed => {
|
|
setSubTabs(prev => prev.map(s => {
|
|
if (s.id !== st.id) return s;
|
|
const oldSpeed = s.speed || 1.0;
|
|
const ratio = oldSpeed / newSpeed;
|
|
const newVolumeNodes = (s.volumeNodes || []).map(n => ({
|
|
...n,
|
|
time: n.time * ratio
|
|
}));
|
|
const newPanningNodes = (s.panningNodes || []).map(n => ({
|
|
...n,
|
|
time: n.time * ratio
|
|
}));
|
|
return {
|
|
...s,
|
|
speed: newSpeed,
|
|
volumeNodes: newVolumeNodes,
|
|
panningNodes: newPanningNodes,
|
|
fadeInLen: (s.fadeInLen || 0) * ratio,
|
|
fadeOutLen: (s.fadeOutLen || 0) * ratio,
|
|
currentTime: (s.currentTime || 0) * ratio,
|
|
label: s.label.replace(/\s\(\d+%\)$/, '') + ` (${Math.round(newSpeed * 100)}%)`
|
|
};
|
|
}));
|
|
const n = activeTrackNodesRef.current[st.trackId];
|
|
if (n && n.source) n.source.playbackRate.value = newSpeed;
|
|
// Reset time refs to prevent playhead jump when speed changes mid-playback
|
|
const ctx = getAudioContext();
|
|
const elapsed = ctx.currentTime - startAudioTimeRef.current;
|
|
const oldSpeed = activePlaybackSpeedRef.current;
|
|
const ratio = oldSpeed / newSpeed;
|
|
startBufferOffsetRef.current = startBufferOffsetRef.current + elapsed * oldSpeed;
|
|
startOffsetTimeRef.current = (startOffsetTimeRef.current + elapsed) * ratio;
|
|
startAudioTimeRef.current = ctx.currentTime;
|
|
activePlaybackSpeedRef.current = newSpeed;
|
|
}
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
onMouseDown: handleSubTabResizeMouseDown,
|
|
className: "absolute bottom-0 left-0 right-0 h-1.5 cursor-ns-resize z-30 hover:bg-purple-500/50 transition-colors"
|
|
})), st.selectionStart !== null && st.selectionEnd !== null && st.selectionEnd > st.selectionStart && /*#__PURE__*/React.createElement("div", {
|
|
className: "absolute top-0 bottom-0 border-l border-r border-amber-500 bg-amber-500/10 z-20 pointer-events-none",
|
|
style: {
|
|
left: `${Math.min(st.selectionStart, st.selectionEnd) * zoom}px`,
|
|
width: `${Math.abs(st.selectionEnd - st.selectionStart) * zoom}px`
|
|
}
|
|
})))));
|
|
})())), /*#__PURE__*/React.createElement("div", {
|
|
className: "w-1 cursor-ew-resize hover:bg-cyan-500/50 active:bg-cyan-400 transition-colors shrink-0 z-10",
|
|
onMouseDown: startColResize
|
|
}), renderDock('right', 'Right')), renderDock('bottom', 'Bottom'));
|
|
})(), /*#__PURE__*/React.createElement("div", {
|
|
className: "h-6 bg-[#141414] border-t border-zinc-900 px-4 flex items-center justify-between text-xs text-zinc-500 select-none shrink-0"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-4"
|
|
}, /*#__PURE__*/React.createElement("span", null, "Status: ", isPlaying ? 'Playing' : 'Stopped'), activeTab !== 'main' && /*#__PURE__*/React.createElement("span", {
|
|
className: "text-amber-400 font-semibold uppercase"
|
|
}, "Sub-Tab"), activeTab === 'main' && /*#__PURE__*/React.createElement("span", {
|
|
className: "text-cyan-400 font-semibold uppercase"
|
|
}, "Track: ID ", selectedTrackId), selectionMode === 'local' && /*#__PURE__*/React.createElement("span", {
|
|
className: "text-amber-400 font-semibold uppercase text-xs"
|
|
}, "Local Sel"), selectionMode === 'global' && /*#__PURE__*/React.createElement("span", {
|
|
className: "text-purple-400 font-semibold uppercase text-xs"
|
|
}, "Global Sel"), soloedTrackId && /*#__PURE__*/React.createElement("span", {
|
|
className: "text-amber-500 font-semibold"
|
|
}, "Solo: ID ", soloedTrackId), isLoopingSelection && selectionMode === 'local' && /*#__PURE__*/React.createElement("span", {
|
|
className: "text-emerald-400 font-semibold uppercase text-xs"
|
|
}, "Solo Loop"), isLoopingSelection && selectionMode !== 'local' && /*#__PURE__*/React.createElement("span", {
|
|
className: "text-cyan-400 font-semibold uppercase text-xs"
|
|
}, "Master Loop")), /*#__PURE__*/React.createElement("div", {
|
|
className: "flex items-center gap-2"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => setShowExportPanel(p => !p),
|
|
className: `px-1.5 py-0.5 rounded text-xs font-semibold transition flex items-center gap-1 ${showExportPanel ? 'bg-cyan-900 text-cyan-300' : 'text-zinc-500 hover:text-zinc-300'}`,
|
|
title: `Export Panel (${panelPositions.export})`
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "save",
|
|
className: "w-3 h-3"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-[7px] opacity-60"
|
|
}, showExportPanel ? panelPositions.export[0].toUpperCase() : '')), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => setShowSelectionPanel(p => !p),
|
|
className: `px-1.5 py-0.5 rounded text-xs font-semibold transition flex items-center gap-1 ${showSelectionPanel ? 'bg-amber-900 text-amber-300' : 'text-zinc-500 hover:text-zinc-300'}`,
|
|
title: `Selection Panel (${panelPositions.selection})`
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "sliders",
|
|
className: "w-3 h-3"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-[7px] opacity-60"
|
|
}, showSelectionPanel ? panelPositions.selection[0].toUpperCase() : '')), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => setShowAIPanel(p => !p),
|
|
className: `px-1.5 py-0.5 rounded text-xs font-semibold transition flex items-center gap-1 ${showAIPanel ? 'bg-purple-900 text-purple-300' : 'text-zinc-500 hover:text-zinc-300'}`,
|
|
title: `AI Panel (${panelPositions.ai})`
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "cpu",
|
|
className: "w-3 h-3"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-[7px] opacity-60"
|
|
}, showAIPanel ? panelPositions.ai[0].toUpperCase() : '')), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => setShowFxRack(p => !p),
|
|
className: `px-1.5 py-0.5 rounded text-xs font-semibold transition flex items-center gap-1 ${showFxRack ? 'bg-rose-900 text-rose-300' : 'text-zinc-500 hover:text-zinc-300'}`,
|
|
title: `FX Rack Panel (${panelPositions.fx_rack || 'bottom'})`
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "sliders",
|
|
className: "w-3 h-3"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-[7px] opacity-60"
|
|
}, showFxRack ? (panelPositions.fx_rack || 'bottom')[0].toUpperCase() : '')), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => setShowMidiEvents(p => !p),
|
|
className: `px-1.5 py-0.5 rounded text-xs font-semibold transition flex items-center gap-1 ${showMidiEvents ? 'bg-sky-900 text-sky-300' : 'text-zinc-500 hover:text-zinc-300'}`,
|
|
title: `MIDI Events Panel (${panelPositions.midi_events || 'bottom'})`
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "music",
|
|
className: "w-3 h-3"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-[7px] opacity-60"
|
|
}, showMidiEvents ? (panelPositions.midi_events || 'bottom')[0].toUpperCase() : '')), /*#__PURE__*/React.createElement("span", {
|
|
className: "w-[1px] h-3 bg-zinc-800 mx-1"
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
className: "flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "info",
|
|
className: "w-3 h-3 text-zinc-600"
|
|
})), " Scroll: Zoom"), /*#__PURE__*/React.createElement("span", null, "|"), /*#__PURE__*/React.createElement("span", {
|
|
className: "flex items-center gap-1"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "keyboard",
|
|
className: "w-3 h-3 text-zinc-600"
|
|
})), " Ctrl+Scroll: Playhead"))), contextMenu && (contextMenu.isSubTab ? /*#__PURE__*/React.createElement("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()
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "px-3 py-1 text-xs text-zinc-500 font-bold uppercase border-b border-zinc-800 pb-1 mb-1"
|
|
}, "Selection: ", formatTime(subTabs.find(s => s.id === contextMenu.subTabId)?.selectionStart || 0), " - ", formatTime(subTabs.find(s => s.id === contextMenu.subTabId)?.selectionEnd || 0)), /*#__PURE__*/React.createElement("div", {
|
|
className: "h-px bg-zinc-700 my-1"
|
|
}), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => {
|
|
handleSubTabCut(contextMenu.subTabId);
|
|
closeContextMenu();
|
|
},
|
|
className: "w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "scissors",
|
|
className: "w-3.5 h-3.5 text-rose-400 shrink-0"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "flex-1"
|
|
}, "Cut"), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-purple-400 text-xs font-semibold font-mono ml-auto"
|
|
}, "Ctrl+X")), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => {
|
|
handleSubTabCopy(contextMenu.subTabId);
|
|
closeContextMenu();
|
|
},
|
|
className: "w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "copy",
|
|
className: "w-3.5 h-3.5 text-zinc-400 shrink-0"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "flex-1"
|
|
}, "Copy"), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-purple-400 text-xs font-semibold font-mono ml-auto"
|
|
}, "Ctrl+C")), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => {
|
|
handleSubTabPaste(contextMenu.subTabId);
|
|
closeContextMenu();
|
|
},
|
|
className: "w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "clipboard",
|
|
className: "w-3.5 h-3.5 text-emerald-400 shrink-0"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "flex-1"
|
|
}, "Paste"), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-purple-400 text-xs font-semibold font-mono ml-auto"
|
|
}, "Ctrl+V")), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => {
|
|
handleSubTabDelete(contextMenu.subTabId);
|
|
closeContextMenu();
|
|
},
|
|
className: "w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "trash-2",
|
|
className: "w-3.5 h-3.5 text-red-400 shrink-0"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "flex-1"
|
|
}, "Delete Selected Segment"), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-amber-400 text-xs font-semibold font-mono ml-auto"
|
|
}, "Del")), /*#__PURE__*/React.createElement("div", {
|
|
className: "h-px bg-zinc-700 my-1"
|
|
}), /*#__PURE__*/React.createElement("button", {
|
|
onClick: () => {
|
|
handleSubTabLoop(contextMenu.subTabId, 4);
|
|
closeContextMenu();
|
|
},
|
|
className: "w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "repeat",
|
|
className: "w-3.5 h-3.5 text-cyan-400 shrink-0"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "flex-1"
|
|
}, "Loop Selection 4 times"), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-purple-400 text-xs font-semibold font-mono ml-auto"
|
|
}, "Ctrl+L"))) : /*#__PURE__*/React.createElement("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()
|
|
}, /*#__PURE__*/React.createElement("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"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "file-edit",
|
|
className: "w-3.5 h-3.5 text-amber-400 shrink-0"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "flex-1"
|
|
}, "Edit"), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-purple-400 text-xs font-semibold font-mono ml-auto pl-8"
|
|
}, "Ctrl+E")), /*#__PURE__*/React.createElement("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"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "scissors",
|
|
className: "w-3.5 h-3.5 text-cyan-400 shrink-0"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "flex-1"
|
|
}, "Split"), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-purple-400 text-xs font-semibold font-mono ml-auto pl-8"
|
|
}, "S")), /*#__PURE__*/React.createElement("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"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "combine",
|
|
className: "w-3.5 h-3.5 text-purple-400 shrink-0"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "flex-1"
|
|
}, "Merge"), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-purple-400 text-xs font-semibold font-mono ml-auto pl-8"
|
|
}, "Ctrl+M")), /*#__PURE__*/React.createElement("div", {
|
|
className: "h-px bg-zinc-700 my-1"
|
|
}), /*#__PURE__*/React.createElement("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"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "copy",
|
|
className: "w-3.5 h-3.5 text-zinc-400 shrink-0"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "flex-1"
|
|
}, "Copy"), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-purple-400 text-xs font-semibold font-mono ml-auto pl-8"
|
|
}, "Ctrl+C")), /*#__PURE__*/React.createElement("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"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "scissors",
|
|
className: "w-3.5 h-3.5 text-rose-400 shrink-0"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "flex-1"
|
|
}, "Cut"), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-purple-400 text-xs font-semibold font-mono ml-auto pl-8"
|
|
}, "Ctrl+X")), /*#__PURE__*/React.createElement("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"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "clipboard",
|
|
className: "w-3.5 h-3.5 text-emerald-400 shrink-0"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "flex-1"
|
|
}, "Paste"), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-purple-400 text-xs font-semibold font-mono ml-auto pl-8"
|
|
}, "Ctrl+V")), /*#__PURE__*/React.createElement("div", {
|
|
className: "h-px bg-zinc-700 my-1"
|
|
}), /*#__PURE__*/React.createElement("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"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("i", {
|
|
"data-lucide": "trash-2",
|
|
className: "w-3.5 h-3.5 text-red-400 shrink-0"
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|
className: "flex-1"
|
|
}, "Delete"), /*#__PURE__*/React.createElement("span", {
|
|
className: "text-amber-400 text-xs font-semibold font-mono ml-auto pl-8"
|
|
}, "Del")))), toastMessage && /*#__PURE__*/React.createElement("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"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "inline-flex items-center shrink-0"
|
|
}, /*#__PURE__*/React.createElement("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'}`
|
|
})), toastMessage.text), /*#__PURE__*/React.createElement(AuthModal, {
|
|
isOpen: authModalOpen,
|
|
mode: authMode,
|
|
forceMandatory: isMandatoryLogin,
|
|
onClose: () => setAuthModalOpen(false),
|
|
onSuccess: handleAuthSuccess
|
|
}), /*#__PURE__*/React.createElement(ProfileModal, {
|
|
isOpen: profileModalOpen,
|
|
onClose: () => setProfileModalOpen(false)
|
|
}), /*#__PURE__*/React.createElement(AIConfigModal, {
|
|
isOpen: aiConfigModalOpen,
|
|
onClose: () => setAiConfigModalOpen(false),
|
|
onConfigSaved: providers => {
|
|
setAiProviders(providers);
|
|
const active = providers.find(p => p.is_active) || providers[0];
|
|
if (active) setSelectedProviderId(active.id);
|
|
}
|
|
}), /*#__PURE__*/React.createElement(SystemManagerModal, {
|
|
isOpen: systemManagerModalOpen,
|
|
onClose: () => setSystemManagerModalOpen(false)
|
|
}));
|
|
};
|
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
|
root.render(/*#__PURE__*/React.createElement(App, null));
|
|
setTimeout(() => lucide.createIcons(), 300);
|