volume modal wip
This commit is contained in:
Nuwan
parent
c3c0022e7e
commit
f5ee333dfa
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue