@@ -95,8 +60,17 @@ const JKSessionVolumeModal = ({ isOpen, toggle }) => {
+
+
+
+
Use this slider to control the volume of all the music in your session mix.
This will not affect the volume for other musicians in the session.
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(
-
|
);
}
- const tableClass = `vu ${orientation}`;
- const tableStyle = orientation === 'horizontal' ? { display: 'inline-block' } : {};
-
return (
-
- {orientation === 'vertical' ? (
-
- {lights.map((light, index) => (
- {light}
- ))}
-
- ) : (
-
- {lights}
-
- )}
-
+
);
}