FIX: sửa lỗi Uncaught ReferenceError: stopPreviewNote is not defined

app/static/js/app.jsx

@@ -1058,24 +1058,10 @@ const TrackStripConsole = ({ track, index, onUpdateTrack, trackVuRefs }) => {
   const [isPhaseInverted, setIsPhaseInverted] = React.useState(false);
   const [isFxActive, setIsFxActive] = React.useState(true);
   const panPointerRef = React.useRef(null);
-  const peakDbRef = React.useRef(null);
+  const setVuCanvas = React.useCallback(function(el) {
-  const vuCanvasRef = React.useRef(null);
+    if (el) trackVuRefs.current[track.id + '_mixer'] = el;
-  const vuAnimRef = React.useRef(null);
+    else delete trackVuRefs.current[track.id + '_mixer'];
-
+  }, [track.id, trackVuRefs]);
-  const handleFaderMouseDown = (e) => {
-    e.preventDefault();
-    var rect = e.currentTarget.getBoundingClientRect();
-    var tid = track.id;
-    function onMove(ev) {
-      var pct = 1 - Math.max(0, Math.min(1, (ev.clientY - rect.top) / rect.height));
-      var val = Math.round((pct * 72 - 60) * 2) / 2;
-      if (onUpdateTrack) onUpdateTrack(tid, { volumeDb: val });
-    }
-    function onUp() { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); }
-    document.addEventListener('mousemove', onMove);
-    document.addEventListener('mouseup', onUp);
-    onMove(e);
-  };
 
   const handlePanPointerDown = (e) => {
     e.currentTarget._panStartY = e.clientY;
@@ -1100,45 +1086,6 @@ const TrackStripConsole = ({ track, index, onUpdateTrack, trackVuRefs }) => {
     document.addEventListener('pointerup', onUp);
   };
 
-  React.useEffect(function() {
-    var canvas = vuCanvasRef.current;
-    if (!canvas) return;
-    var ctx = canvas.getContext('2d');
-
-    function render() {
-      vuAnimRef.current = requestAnimationFrame(render);
-      canvas.width = canvas.clientWidth;
-      canvas.height = canvas.clientHeight;
-      var w = canvas.width;
-      var h = canvas.height;
-      ctx.clearRect(0, 0, w, h);
-
-      var level = 0;
-      if (!isMuted) {
-        var db = vol;
-        var linearGain = db <= -60 ? 0 : Math.pow(10, db / 20);
-        if (linearGain > 0) {
-          level = Math.min(1.0, (0.25 + Math.random() * 0.6) * linearGain);
-        }
-      }
-
-      var barH = level * h;
-      var grad = ctx.createLinearGradient(0, h, 0, 0);
-      grad.addColorStop(0, '#10b981');
-      grad.addColorStop(0.7, '#f59e0b');
-      grad.addColorStop(0.95, '#ef4444');
-      ctx.fillStyle = grad;
-      ctx.fillRect(1, h - barH, w - 2, barH);
-
-      if (peakDbRef.current) {
-        peakDbRef.current.innerText = level > 0 ? (20 * Math.log10(level)).toFixed(1) + 'dB' : '-inf';
-      }
-    }
-
-    render();
-    return function() { if (vuAnimRef.current) cancelAnimationFrame(vuAnimRef.current); };
-  }, [vol, isMuted]);
-
   return React.createElement("div", {
     className: "flex flex-col items-stretch w-[145px] shrink-0 strip-bg-track rounded-md text-slate-300 select-none shadow-2xl border border-slate-900 overflow-hidden"
   },
@@ -1177,18 +1124,17 @@ const TrackStripConsole = ({ track, index, onUpdateTrack, trackVuRefs }) => {
         className: "flex-1 flex flex-col justify-between items-center bg-black/60 p-1 rounded border border-slate-800/80"
       },
         React.createElement("div", { className: "w-full flex justify-center text-[8px] font-mono text-slate-400 h-4 items-center" },
-          React.createElement("span", { ref: peakDbRef }, "-inf")
+          React.createElement("span", null, vol <= -50 ? '-inf' : (vol > 0 ? '+' : '') + vol.toFixed(1) + 'dB')
         ),
-        React.createElement("div", { className: "flex items-center justify-around w-full flex-1 relative py-1" },
+        React.createElement("div", { className: "flex items-stretch justify-around w-full flex-1 relative py-1" },
           /* Fader Rail */
           React.createElement("div", {
-            className: "relative fader-track-bg w-3 flex-1 rounded flex items-center justify-center",
+            className: "relative fader-track-bg w-3 flex-1 rounded flex items-center justify-center overflow-hidden",
-            onMouseDown: handleFaderMouseDown
           },
             React.createElement("div", { className: "w-0.5 h-full bg-slate-700 absolute" }),
             React.createElement("input", {
               type: "range", min: "-60", max: "12", step: "0.5",
-              value: vol, className: "fader-slider w-full h-full z-10",
+              value: vol, className: "fader-slider w-full z-10",
               onChange: function(e) {
                 var val = parseFloat(e.target.value);
                 if (onUpdateTrack) onUpdateTrack(track.id, { volumeDb: val });
@@ -1200,7 +1146,7 @@ const TrackStripConsole = ({ track, index, onUpdateTrack, trackVuRefs }) => {
             className: "w-2.5 flex-1 bg-slate-950 rounded border border-slate-900 overflow-hidden relative",
             title: "Peak VU Meter"
           },
-            React.createElement("canvas", { ref: vuCanvasRef, className: "w-full h-full block" })
+            React.createElement("canvas", { ref: setVuCanvas, className: "w-full h-full block" })
           )
         )
       ),
@@ -5677,6 +5623,15 @@ const PianoRollTabEditor = ({ st, zoom, bpm, viewportWidth, activeTracks, onClos
   const brushVelocityRef = React.useRef(0.8);
   const previewPitchRef = React.useRef(null);
   const previewNodesRef = React.useRef(null);
+  var stopPreviewNote = function() {
+    var pn = previewNodesRef.current;
+    if (pn) {
+      try { pn.osc.stop(); } catch(e) {}
+      try { pn.osc.disconnect(); } catch(e) {}
+      try { pn.gain.disconnect(); } catch(e) {}
+      previewNodesRef.current = null;
+    }
+  };
   const [selectedNoteIds, setSelectedNoteIds] = React.useState([]);
   const [loopStartBeat, setLoopStartBeat] = React.useState(null);
   const [loopEndBeat, setLoopEndBeat] = React.useState(null);
@@ -6359,15 +6314,6 @@ const PianoRollTabEditor = ({ st, zoom, bpm, viewportWidth, activeTracks, onClos
       const noteBeats = draggedNote.noteStartBeats || [];
       const defaultDur = getSnapDuration(snapVal);
 
-      function stopPreviewNote() {
-        var pn = previewNodesRef.current;
-        if (pn) {
-          try { pn.osc.stop(); } catch(e) {}
-          try { pn.osc.disconnect(); } catch(e) {}
-          try { pn.gain.disconnect(); } catch(e) {}
-          previewNodesRef.current = null;
-        }
-      }
       function playDrawPreview(p, durMs) {
         stopPreviewNote();
         if (window.SonicSF && window.SonicSF._playNoteFallback) {