From f5ee333dfa132300f4a38bdca26ee49556a4fba6 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Sat, 15 Nov 2025 13:43:13 +0530
Subject: [PATCH] volume modal wip

---
 .../components/client/JKSessionVolumeModal.js | 66 ++++++-------------
 jam-ui/src/hooks/useVuHelpers.js              | 60 +++++++----------
 2 files changed, 44 insertions(+), 82 deletions(-)

diff --git a/jam-ui/src/components/client/JKSessionVolumeModal.js b/jam-ui/src/components/client/JKSessionVolumeModal.js
index 4b86b8db7..0c3e12d77 100644
--- a/jam-ui/src/components/client/JKSessionVolumeModal.js
+++ b/jam-ui/src/components/client/JKSessionVolumeModal.js
@@ -36,52 +36,17 @@ const JKSessionVolumeModal = ({ isOpen, toggle }) => {
               <div className='mr-2'>
                 <VolumeSlider initialValue={75} minValue={0} maxValue={100} />
               </div>
-              {/* <div className='d-flex align-items-end mr-2'>
-                <div className='vu mr-1'>
-                  <div className="d-flex flex-column" style={{ height: '140px' }}>
-                    <div className="bg-secondary" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-secondary" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-danger" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-danger" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-danger" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-danger" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-warning" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-warning" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-warning" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-warning" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-warning" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-success" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-success" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-success" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-success" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-success" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-success" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                  </div>
+
+              <div className='mr-2 d-flex'>
+                <div className='mr-1'>
+                  <SessionTrackVU mixers={mixers} />
                 </div>
-                <div className='vu'>
-                  <div className="d-flex flex-column" style={{ height: '140px' }}>
-                    <div className="bg-secondary" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-secondary" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-danger" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-danger" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-danger" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-danger" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-warning" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-warning" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-warning" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-warning" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-warning" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-success" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-success" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-success" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-success" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-success" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                    <div className="bg-success" style={{ height: '10px', width: '15px', marginTop: '1px', borderRadius: '2px' }}></div>
-                  </div>
+                <div>
+                  <SessionTrackVU mixers={mixers} />
                 </div>
-              </div> */}
-              <VuMeter />
-              <div style={{ marginTop: '1.5rem' }}>
+              </div>
+
+              <div className='pr-1'>
                 <small className="d-block">Use this slider to control the volume of all the music in your session mix.</small>
                 <small className="d-block">This will not affect the volume for other musicians in the session.</small>
               </div>
@@ -95,8 +60,17 @@ const JKSessionVolumeModal = ({ isOpen, toggle }) => {
                 <div className='mr-2'>
                   <VolumeSlider initialValue={55} minValue={0} maxValue={100} />
                 </div>
-               <VuMeter />
-                <div style={{ marginTop: '1.5rem' }}>
+
+                <div className='mr-2 d-flex'>
+                  <div className='mr-1'>
+                    <SessionTrackVU mixers={mixers} />
+                  </div>
+                  <div>
+                    <SessionTrackVU mixers={mixers} />
+                  </div>
+                </div>
+
+                <div>
                   <small className="d-block">Use this slider to control the volume of all the music in your session mix.</small>
                   <small className="d-block">This will not affect the volume for other musicians in the session.</small>
                 </div>
diff --git a/jam-ui/src/hooks/useVuHelpers.js b/jam-ui/src/hooks/useVuHelpers.js
index 36cc4ef58..41006f227 100644
--- a/jam-ui/src/hooks/useVuHelpers.js
+++ b/jam-ui/src/hooks/useVuHelpers.js
@@ -9,8 +9,6 @@ export default function useVuHelpers() {
     return (mixer.mode ? 'M' : 'P') + mixer.id;
   }, []);
 
-
-
   // Legacy renderVU for backward compatibility
   const renderVU = useCallback((userOptions = {}) => {
     const renderVUDefaults = {
@@ -124,62 +122,52 @@ export default function useVuHelpers() {
   }, []);
 
   // Create a proper React component that can be used outside the hook
-  function VuMeterComponent({ mixerId, orientation = 'vertical', lightCount = 12, lightWidth = 3, lightHeight = 17 }) {
+  function VuMeterComponent({ mixerId, orientation = 'vertical', lightCount = 16, lightWidth = 15, lightHeight = 10 }) {
     const vuState = vuStates[mixerId] || { level: 0, clipping: false };
     const { level, clipping } = vuState;
 
     const lights = [];
     for (let i = 0; i < lightCount; i++) {
       // Calculate if this light should be on based on the level
-      const lightThreshold = (i + 1) / lightCount;
+      const lightThreshold = (lightCount - i) / lightCount;
       const isOn = level >= lightThreshold;
 
-      let lightClass = 'vulight ';
+      let bgClass = 'bg-secondary'; // Default off state
       if (isOn) {
         if (clipping) {
-          lightClass += 'vu-red-on';
-        } else if (i >= Math.floor(lightCount * 0.75)) { // Red zone (top 25%)
-          lightClass += 'vu-red-on';
-        } else if (i >= Math.floor(lightCount * 0.5)) { // Yellow zone (middle 25%)
-          lightClass += 'vu-yellow-on';
-        } else { // Green zone (bottom 50%)
-          lightClass += 'vu-green-on';
+          bgClass = 'bg-danger'; // Red for clipping
+        } else {
+          const positionFromBottom = lightCount - 1 - i;
+          if (positionFromBottom >= Math.floor(lightCount * 0.75)) { // Red zone (top 25%)
+            bgClass = 'bg-danger';
+          } else if (positionFromBottom >= Math.floor(lightCount * 0.5)) { // Yellow zone (middle 25%)
+            bgClass = 'bg-warning';
+          } else { // Green zone (bottom 50%)
+            bgClass = 'bg-success';
+          }
         }
-      } else {
-        lightClass += 'vu-off';
       }
 
-      //console.debug('VuMeterComponent render', { i, lightThreshold, isOn, lightClass });
-
       lights.push(
-        <td
+        <div
           key={i}
-          className={lightClass}
+          className={bgClass}
           style={{
-            width: orientation === 'horizontal' ? lightWidth : 'auto',
-            height: orientation === 'horizontal' ? 'auto' : lightHeight
+            height: `${lightHeight}px`,
+            width: `${lightWidth}px`,
+            marginTop: '1px',
+            borderRadius: '2px'
           }}
         />
       );
     }
 
-    const tableClass = `vu ${orientation}`;
-    const tableStyle = orientation === 'horizontal' ? { display: 'inline-block' } : {};
-
     return (
-      <table className={tableClass} style={tableStyle}>
-        {orientation === 'vertical' ? (
-          <tbody>
-            {lights.map((light, index) => (
-              <tr key={index}>{light}</tr>
-            ))}
-          </tbody>
-        ) : (
-          <tbody>
-            <tr>{lights}</tr>
-          </tbody>
-        )}
-      </table>
+      <div className='vu'>
+        <div className="d-flex flex-column" style={{ height: `${lightCount * (lightHeight + 1)}px` }}>
+          {lights}
+        </div>
+      </div>
     );
   }