FEAT: thay đổi UI của mixer panel
This commit is contained in:
+35
-51
@@ -735,7 +735,7 @@ const MixerStrip = ({ track, index, onUpdateTrack, trackVuRefs }) => {
|
||||
};
|
||||
|
||||
// ── Master Strip Console Component (from md/47_MASTER_STRIP_CONSOLE.md) ──
|
||||
const MasterStripConsole = ({ masterVolume, setMasterVolume, showMasteringModal, setShowMasteringModal, masteringSettings, setMasteringSettings }) => {
|
||||
const MasterStripConsole = ({ masterVolume, setMasterVolume, showMasteringModal, setShowMasteringModal, masteringSettings, setMasteringSettings, isPlaying }) => {
|
||||
const [isFxActive, setIsFxActive] = React.useState(true);
|
||||
const [isTestPlaying, setIsTestPlaying] = React.useState(false);
|
||||
const [isMuted, setIsMuted] = React.useState(false);
|
||||
@@ -768,23 +768,6 @@ const MasterStripConsole = ({ masterVolume, setMasterVolume, showMasteringModal,
|
||||
}
|
||||
};
|
||||
|
||||
const handleFaderMouseDown = (e) => {
|
||||
e.preventDefault();
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
function onMove(ev) {
|
||||
const pct = 1 - Math.max(0, Math.min(1, (ev.clientY - rect.top) / rect.height));
|
||||
const val = Math.round((pct * 72 - 60) * 2) / 2;
|
||||
handleFaderChange(val);
|
||||
}
|
||||
function onUp() {
|
||||
document.removeEventListener('mousemove', onMove);
|
||||
document.removeEventListener('mouseup', onUp);
|
||||
}
|
||||
document.addEventListener('mousemove', onMove);
|
||||
document.addEventListener('mouseup', onUp);
|
||||
onMove(e);
|
||||
};
|
||||
|
||||
const handlePanPointerDown = (e) => {
|
||||
isPanDraggingRef.current = true;
|
||||
panStartYRef.current = e.clientY;
|
||||
@@ -933,7 +916,7 @@ const MasterStripConsole = ({ masterVolume, setMasterVolume, showMasteringModal,
|
||||
}, []);
|
||||
|
||||
return React.createElement("div", {
|
||||
className: "flex flex-col items-stretch w-[400px] shrink-0 strip-bg rounded-lg p-3 text-slate-300 select-none shadow-2xl relative"
|
||||
className: "flex flex-col items-stretch w-[340px] shrink-0 strip-bg rounded-lg p-3 text-slate-300 select-none shadow-2xl relative"
|
||||
},
|
||||
React.createElement("div", { className: "space-y-1.5 mb-2" },
|
||||
React.createElement("button", {
|
||||
@@ -973,31 +956,30 @@ const MasterStripConsole = ({ masterVolume, setMasterVolume, showMasteringModal,
|
||||
React.createElement("span", { ref: peakRRef }, "-inf")
|
||||
)
|
||||
),
|
||||
React.createElement("div", { className: "flex-1 flex gap-2 my-2 justify-between items-stretch" },
|
||||
React.createElement("div", { className: "flex-1 flex items-center justify-between bg-black/80 p-1.5 rounded border border-slate-800/90 relative shadow-inner" },
|
||||
React.createElement("div", { className: "flex flex-col justify-between h-40 text-[8px] font-mono text-slate-400 select-none pr-1 text-right border-r border-slate-800/60" },
|
||||
React.createElement("span", null, "+12"), React.createElement("span", null, "+6"), React.createElement("span", null, "0"), React.createElement("span", null, "-6"),
|
||||
React.createElement("span", null, "-12"), React.createElement("span", null, "-18"), React.createElement("span", null, "-24"), React.createElement("span", null, "-30"),
|
||||
React.createElement("span", null, "-36"), React.createElement("span", null, "-42"), React.createElement("span", null, "-54")
|
||||
),
|
||||
React.createElement("div", { className: "flex-1 h-40 relative bg-slate-950 rounded overflow-hidden mx-1.5 border border-slate-900" },
|
||||
React.createElement("div", { className: "flex gap-2 my-2 justify-between items-stretch shrink-0", style: {height: '150px'} },
|
||||
React.createElement("div", { className: "flex-1 flex items-stretch justify-between bg-black/80 p-1.5 rounded border border-slate-800/90 relative shadow-inner" },
|
||||
React.createElement("div", { className: "flex flex-col h-full text-[8px] font-mono text-slate-400 select-none pr-1 text-right border-r border-slate-800/60 overflow-hidden" },
|
||||
React.createElement("span", { className: "flex-1 flex items-center justify-end" }, "+12"), React.createElement("span", { className: "flex-1 flex items-center justify-end" }, "+6"), React.createElement("span", { className: "flex-1 flex items-center justify-end" }, "0"), React.createElement("span", { className: "flex-1 flex items-center justify-end" }, "-6"),
|
||||
React.createElement("span", { className: "flex-1 flex items-center justify-end" }, "-12"), React.createElement("span", { className: "flex-1 flex items-center justify-end" }, "-18"), React.createElement("span", { className: "flex-1 flex items-center justify-end" }, "-24"), React.createElement("span", { className: "flex-1 flex items-center justify-end" }, "-30"),
|
||||
React.createElement("span", { className: "flex-1 flex items-center justify-end" }, "-36"), React.createElement("span", { className: "flex-1 flex items-center justify-end" }, "-42"), React.createElement("span", { className: "flex-1 flex items-center justify-end" }, "-54")
|
||||
),
|
||||
React.createElement("div", { className: "flex-1 relative bg-slate-950 rounded overflow-hidden mx-1.5 border border-slate-900" },
|
||||
React.createElement("canvas", { ref: vuCanvasRef, className: "w-full h-full block" }),
|
||||
React.createElement("div", { className: "absolute bottom-0.5 inset-x-0 flex justify-around text-[7px] font-mono text-slate-500 font-bold pointer-events-none bg-black/60 py-0.5" },
|
||||
React.createElement("span", null, "L"), React.createElement("span", null, "R")
|
||||
)
|
||||
),
|
||||
React.createElement("div", { className: "flex flex-col justify-between h-40 text-[8px] font-mono text-slate-400 select-none pl-1 text-left border-l border-slate-800/60" },
|
||||
React.createElement("span", null, "+12"), React.createElement("span", null, "+6"), React.createElement("span", null, "0"), React.createElement("span", null, "-6"),
|
||||
React.createElement("span", null, "-12"), React.createElement("span", null, "-18"), React.createElement("span", null, "-24"), React.createElement("span", null, "-30"),
|
||||
React.createElement("span", null, "-36"), React.createElement("span", null, "-42"), React.createElement("span", null, "-54")
|
||||
)
|
||||
React.createElement("div", { className: "flex flex-col h-full text-[8px] font-mono text-slate-400 select-none pl-1 text-left border-l border-slate-800/60 overflow-hidden" },
|
||||
React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "+12"), React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "+6"), React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "0"), React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "-6"),
|
||||
React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "-12"), React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "-18"), React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "-24"), React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "-30"),
|
||||
React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "-36"), React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "-42"), React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "-54")
|
||||
)
|
||||
),
|
||||
React.createElement("div", { className: "w-16 flex items-center gap-1 bg-slate-900/60 p-1 rounded border border-slate-800" },
|
||||
React.createElement("div", { className: "w-16 flex items-stretch gap-1 bg-slate-900/60 p-1 rounded border border-slate-800" },
|
||||
React.createElement("div", {
|
||||
className: "flex-1 flex flex-col items-center justify-center relative fader-track rounded py-2 px-0.5 h-40",
|
||||
onMouseDown: handleFaderMouseDown
|
||||
className: "flex-1 flex flex-col items-center justify-center relative fader-track rounded py-2 px-0.5"
|
||||
},
|
||||
React.createElement("div", { className: "w-0.5 h-full bg-slate-700 absolute" }),
|
||||
React.createElement("div", { className: "w-0.5 flex-1 bg-slate-700 absolute" }),
|
||||
React.createElement("input", {
|
||||
id: "masterFader",
|
||||
type: "range",
|
||||
@@ -1005,20 +987,21 @@ const MasterStripConsole = ({ masterVolume, setMasterVolume, showMasteringModal,
|
||||
max: "12",
|
||||
step: "0.5",
|
||||
value: masterVolume,
|
||||
className: "fader-slider w-full h-36 z-10",
|
||||
className: "fader-slider w-full z-10",
|
||||
orient: "vertical",
|
||||
onChange: function(e) { handleFaderChange(parseFloat(e.target.value)); }
|
||||
})
|
||||
),
|
||||
React.createElement("div", { className: "flex flex-col justify-between h-36 text-[7px] font-mono text-slate-500 select-none pr-0.5" },
|
||||
React.createElement("span", null, "+12"), React.createElement("span", null, "+6"), React.createElement("span", null, "0"), React.createElement("span", null, "-6"),
|
||||
React.createElement("span", null, "-12"), React.createElement("span", null, "-24"), React.createElement("span", null, "-36"), React.createElement("span", null, "-54")
|
||||
)
|
||||
React.createElement("div", { className: "flex flex-col text-[7px] font-mono text-slate-500 select-none pr-0.5 overflow-hidden" },
|
||||
React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "+12"), React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "+6"), React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "0"), React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "-6"),
|
||||
React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "-12"), React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "-24"), React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "-36"), React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "-54")
|
||||
)
|
||||
),
|
||||
React.createElement("div", { className: "w-8 flex flex-col justify-between gap-1 text-[10px] font-bold" },
|
||||
React.createElement("div", { className: "w-8 flex flex-col justify-between text-[10px] font-bold" },
|
||||
React.createElement("button", {
|
||||
id: "monoBtn",
|
||||
onClick: function() { setIsMono(function(p) { return !p; }); },
|
||||
className: "btn-daw h-5 rounded flex flex-col items-center justify-center text-[8px]" + (isMono ? " btn-mono-active" : ""),
|
||||
className: "btn-daw h-[18px] rounded flex flex-col items-center justify-center text-[8px]" + (isMono ? " btn-mono-active" : ""),
|
||||
title: "Mono Switch"
|
||||
},
|
||||
React.createElement("i", { className: "fa-solid fa-circle-half-stroke text-[9px]" }),
|
||||
@@ -1027,26 +1010,26 @@ const MasterStripConsole = ({ masterVolume, setMasterVolume, showMasteringModal,
|
||||
React.createElement("button", {
|
||||
id: "muteBtn",
|
||||
onClick: function() { setIsMuted(function(p) { return !p; }); },
|
||||
className: "btn-daw h-5 rounded text-amber-500 font-bold hover:text-amber-400" + (isMuted ? " btn-mute-active" : ""),
|
||||
className: "btn-daw h-[18px] rounded text-amber-500 font-bold hover:text-amber-400" + (isMuted ? " btn-mute-active" : ""),
|
||||
title: "Mute Master Output"
|
||||
}, "M"),
|
||||
React.createElement("button", {
|
||||
id: "soloBtn",
|
||||
className: "btn-daw h-5 rounded text-yellow-400 font-bold hover:text-yellow-300",
|
||||
className: "btn-daw h-[18px] rounded text-yellow-400 font-bold hover:text-yellow-300",
|
||||
title: "Solo Master"
|
||||
}, "S"),
|
||||
React.createElement("button", { className: "btn-daw h-5 rounded text-slate-400 hover:text-slate-200", title: "Route Matrix" },
|
||||
React.createElement("button", { className: "btn-daw h-[18px] rounded text-slate-400 hover:text-slate-200", title: "Route Matrix" },
|
||||
React.createElement("i", { className: "fa-solid fa-diagram-project text-[9px]" })
|
||||
),
|
||||
React.createElement("button", {
|
||||
id: "fxBtn",
|
||||
className: "btn-daw h-6 rounded font-extrabold text-[10px] transition-all" + (isFxActive ? " btn-teal-active" : ""),
|
||||
className: "btn-daw h-[18px] rounded font-extrabold text-[10px] transition-all" + (isFxActive ? " btn-teal-active" : ""),
|
||||
onClick: function() { setShowMasteringModal(true); },
|
||||
title: "Mở MASTERING PANEL để chỉnh sửa"
|
||||
}, "FX"),
|
||||
React.createElement("button", {
|
||||
id: "powerBtn",
|
||||
className: "btn-daw h-6 rounded text-xs transition-all" + (isFxActive ? " btn-teal-active" : ""),
|
||||
className: "btn-daw h-[18px] rounded text-xs transition-all" + (isFxActive ? " btn-teal-active" : ""),
|
||||
onClick: function() {
|
||||
var newActive = !isFxActive;
|
||||
setIsFxActive(newActive);
|
||||
@@ -1056,8 +1039,8 @@ const MasterStripConsole = ({ masterVolume, setMasterVolume, showMasteringModal,
|
||||
},
|
||||
title: "Bật/Tắt MASTERING PANEL Bypass"
|
||||
}, React.createElement("i", { className: "fa-solid fa-power-off" })),
|
||||
React.createElement("button", { className: "btn-daw h-5 rounded text-slate-400 text-[8px]", title: "Trim Envelope" }, "TRIM"),
|
||||
React.createElement("button", { className: "btn-daw h-5 rounded text-slate-400 text-[9px]", title: "Session Info" },
|
||||
React.createElement("button", { className: "btn-daw h-[18px] rounded text-slate-400 text-[8px]", title: "Trim Envelope" }, "TRIM"),
|
||||
React.createElement("button", { className: "btn-daw h-[18px] rounded text-slate-400 text-[9px]", title: "Session Info" },
|
||||
React.createElement("i", { className: "fa-solid fa-info" })
|
||||
)
|
||||
)
|
||||
@@ -20243,7 +20226,8 @@ const App = () => {
|
||||
showMasteringModal: showMasteringModal,
|
||||
setShowMasteringModal: setShowMasteringModal,
|
||||
masteringSettings: masteringSettings,
|
||||
setMasteringSettings: setMasteringSettings
|
||||
setMasteringSettings: setMasteringSettings,
|
||||
isPlaying: isPlaying
|
||||
}), activeTracks.length > 0 && /*#__PURE__*/React.createElement("div", {
|
||||
className: "w-px bg-zinc-700 shrink-0 self-stretch mx-0.5"
|
||||
}), activeTracks.map(function(track, idx) {
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user