FIX: chỉnh sửa UI của mixer panel

app/static/js/app.jsx

@@ -741,15 +741,14 @@ const MasterStripConsole = ({ masterVolume, setMasterVolume, showMasteringModal,
   const [isMuted, setIsMuted] = React.useState(false);
   const [isMono, setIsMono] = React.useState(false);
   const [pan, setPan] = React.useState(0.0);
-  const [panText, setPanText] = React.useState('center');
+  const [panText, setPanText] = React.useState('');
 
   const vuCanvasRef = React.useRef(null);
   const testSourceRef = React.useRef(null);
   const animFrameRef = React.useRef(null);
+  const rmsValRef = React.useRef(null);
   const peakLRef = React.useRef(null);
   const peakRRef = React.useRef(null);
-  const rmsValRef = React.useRef(null);
-  const dbReadoutRef = React.useRef(null);
   const panPointerRef = React.useRef(null);
   const isPanDraggingRef = React.useRef(false);
   const panStartYRef = React.useRef(0);
@@ -784,8 +783,8 @@ const MasterStripConsole = ({ masterVolume, setMasterVolume, showMasteringModal,
     const angle = newPan * 120;
     if (panPointerRef.current) panPointerRef.current.style.transform = `rotate(${angle}deg)`;
     if (newPan === 0) setPanText('center');
-    else if (newPan < 0) setPanText(`L${Math.abs(Math.round(newPan * 100))}`);
+    else if (newPan < 0) setPanText('L' + Math.abs(Math.round(newPan * 100)));
-    else setPanText(`R${Math.round(newPan * 100)}`);
+    else setPanText('R' + Math.round(newPan * 100));
   };
 
   const handlePanPointerUp = (e) => {
@@ -891,18 +890,12 @@ const MasterStripConsole = ({ masterVolume, setMasterVolume, showMasteringModal,
       ctx.fillRect(padding, h - levelL * h, barW, levelL * h);
       ctx.fillRect(padding + barW + gap, h - levelR * h, barW, levelR * h);
 
-      const dbL = levelL > 0 ? (20 * Math.log10(levelL)).toFixed(1) : '-inf';
-      const dbR = levelR > 0 ? (20 * Math.log10(levelR)).toFixed(1) : '-inf';
-      if (peakLRef.current) peakLRef.current.innerText = levelL > 0 ? dbL + 'dB' : '-inf';
-      if (peakRRef.current) peakRRef.current.innerText = levelR > 0 ? dbR + 'dB' : '-inf';
-
       const maxLevel = Math.max(levelL, levelR);
       if (rmsValRef.current) {
         rmsValRef.current.innerText = maxLevel > 0 ? (20 * Math.log10(maxLevel) - 3.2).toFixed(1) + ' dB' : '-inf';
       }
-      if (dbReadoutRef.current) {
+      if (peakLRef.current) { peakLRef.current.innerText = levelL > 0 ? (20 * Math.log10(levelL)).toFixed(1) + 'dB' : '-inf'; }
-        dbReadoutRef.current.innerText = masterVolume <= -50 ? '-inf dB' : `${masterVolume > 0 ? '+' : ''}${masterVolume.toFixed(2)}dB`;
+      if (peakRRef.current) { peakRRef.current.innerText = levelR > 0 ? (20 * Math.log10(levelR)).toFixed(1) + 'dB' : '-inf'; }
-      }
     }
 
     render();
@@ -930,30 +923,31 @@ const MasterStripConsole = ({ masterVolume, setMasterVolume, showMasteringModal,
         React.createElement("i", { className: "fa-solid fa-circle-notch text-[9px] text-slate-500" })
       )
     ),
-    React.createElement("div", { className: "flex flex-col items-center my-1.5" },
+    React.createElement("div", { className: "flex flex-col items-center my-0.5" },
-      React.createElement("span", { className: "text-[10px] text-slate-400 font-mono mb-0.5" }, panText),
+      React.createElement("span", { className: "text-[9px] text-slate-400 font-mono" }, panText || 'center'),
-      React.createElement("div", {
+      React.createElement("div", { className: "flex items-center gap-1" },
-        id: "panDial",
+        React.createElement("span", { className: "text-[8px] font-mono text-slate-500 w-5 text-right" },
-        className: "w-7 h-7 rounded-full bg-slate-800 border-2 border-slate-600 relative flex items-center justify-center shadow-inner cursor-pointer",
+          pan < 0 ? 'L' + Math.abs(Math.round(pan * 100)) : ''
-        title: "Kéo chuột để chỉnh Pan (Left/Right)",
+        ),
-        onPointerDown: handlePanPointerDown,
+        React.createElement("div", {
-        onPointerMove: handlePanPointerMove,
+          id: "panDial",
-        onPointerUp: handlePanPointerUp
+          className: "w-6 h-6 rounded-full bg-slate-800 border-2 border-slate-600 relative flex items-center justify-center shadow-inner cursor-pointer",
-      }, React.createElement("div", {
+          title: "Kéo chuột để chỉnh Pan (Left/Right)",
-        ref: panPointerRef,
+          onPointerDown: handlePanPointerDown,
-        id: "panPointer",
+          onPointerMove: handlePanPointerMove,
-        className: "w-0.5 h-2.5 bg-slate-200 rounded absolute top-0.5 transition-transform",
+          onPointerUp: handlePanPointerUp
-        style: { transform: 'rotate(' + (pan * 120) + 'deg)' }
+        }, React.createElement("div", {
-      })),
+          ref: panPointerRef,
-      React.createElement("div", {
+          id: "panPointer",
-        ref: dbReadoutRef,
+          className: "w-0.5 h-2 bg-slate-200 rounded absolute top-0.5 transition-transform",
-        className: "text-xs font-bold font-mono text-slate-200 mt-1.5"
+          style: { transform: 'rotate(' + (pan * 120) + 'deg)' }
-      }, "0.00dB"),
+        })),
-      React.createElement("div", {
+        React.createElement("span", { className: "text-[8px] font-mono text-slate-500 w-5 text-left" },
-        className: "flex justify-between w-full text-[9px] font-mono text-slate-400 px-4 mt-0.5"
+          pan > 0 ? 'R' + Math.round(pan * 100) : ''
-      },
+        ),
-        React.createElement("span", { ref: peakLRef }, "-inf"),
+        React.createElement("span", { ref: React.createRef ? null : null, className: "text-[10px] font-bold font-mono text-slate-200 ml-0.5" },
-        React.createElement("span", { ref: peakRRef }, "-inf")
+          masterVolume <= -50 ? '-inf' : (masterVolume > 0 ? '+' : '') + masterVolume.toFixed(1)
+        )
       )
     ),
       React.createElement("div", { className: "flex gap-2 my-2 justify-between items-stretch shrink-0", style: {height: '150px'} },
@@ -1045,7 +1039,11 @@ const MasterStripConsole = ({ masterVolume, setMasterVolume, showMasteringModal,
         )
       )
     ),
-    React.createElement("div", { className: "mt-2 pt-1 border-t border-slate-800 flex flex-col items-center" },
+    React.createElement("div", { className: "flex justify-between w-full text-[9px] font-mono text-slate-400 px-2 mt-0.5 mb-0.5" },
+      React.createElement("span", { ref: peakLRef }, "-inf"),
+      React.createElement("span", { ref: peakRRef }, "-inf")
+    ),
+    React.createElement("div", { className: "mt-1 pt-1 border-t border-slate-800 flex flex-col items-center" },
       React.createElement("div", { className: "flex justify-between w-full text-[9px] font-mono mb-0.5" },
         React.createElement("span", { className: "text-emerald-400" }, "RMS"),
         React.createElement("span", { ref: rmsValRef, className: "text-emerald-400 font-bold" }, "-inf")