Fix VU canvas black blocks and colored glow-bleed lines
This commit is contained in:
parent
b5ea9e8d01
commit
49062cf6de
10
script.js
10
script.js
|
|
@ -322,8 +322,14 @@ function animateVUMeters() {
|
||||||
const anyPlaying = decks.A.playing || decks.B.playing;
|
const anyPlaying = decks.A.playing || decks.B.playing;
|
||||||
const isListener = window.location.port === '5001' || window.location.search.includes('listen=true');
|
const isListener = window.location.port === '5001' || window.location.search.includes('listen=true');
|
||||||
|
|
||||||
// Skip rendering if nothing is happening to save battery
|
// When nothing is playing, clear canvases to transparent so they don't show as dark blocks
|
||||||
if (!anyPlaying && !isListener) return;
|
if (!anyPlaying && !isListener) {
|
||||||
|
['A', 'B'].forEach(id => {
|
||||||
|
const canvas = document.getElementById('viz-' + id);
|
||||||
|
if (canvas) canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
['A', 'B'].forEach(id => {
|
['A', 'B'].forEach(id => {
|
||||||
const canvas = document.getElementById('viz-' + id);
|
const canvas = document.getElementById('viz-' + id);
|
||||||
|
|
|
||||||
11
style.css
11
style.css
|
|
@ -222,6 +222,7 @@ header h1 {
|
||||||
/* Adjust based on header height */
|
/* Adjust based on header height */
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
background: var(--bg-dark); /* Prevent deck box-shadows bleeding into padding gaps */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* LIBRARY SECTION */
|
/* LIBRARY SECTION */
|
||||||
|
|
@ -546,6 +547,16 @@ canvas {
|
||||||
border: 1px solid #333;
|
border: 1px solid #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* VU meter canvases — transparent when idle so they don't show as black blocks */
|
||||||
|
#viz-A,
|
||||||
|
#viz-B {
|
||||||
|
background: transparent !important;
|
||||||
|
border: none !important;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
|
||||||
|
margin: 2px 0 6px 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue