audio/noiz
2
0
Fork 0
mirror of https://codeberg.org/armin/noiz.git synced 2026-09-01 14:00:54 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix: allow waveform to shrink when horizontal space is limited

Browse source
This commit is contained in:
Armin 2026-07-08 17:11:35 +02:00
commit b748056e81
1 changed files with 2 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

5
index.html
View file

@ -32,8 +32,8 @@ canvas { width: 100%; height: 100px; border-radius: 6px; display: block; }
.big-time .sep { color: #6b7089; margin: 0 4px; } .big-time .sep { color: #6b7089; margin: 0 4px; }
.canvas-area { display: flex; flex-direction: column; flex: 1; min-width: 200px; gap: 6px; } .canvas-area { display: flex; flex-direction: column; flex: 1; min-width: 200px; gap: 6px; }
.progress-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #6b7089; font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; } .progress-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #6b7089; font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
.waveform-wrap { flex: 1; cursor: pointer; position: relative; height: 42px; } .waveform-wrap { flex: 1; min-width: 0; cursor: pointer; position: relative; height: 42px; }
.waveform-wrap canvas { display: block; height: 42px; } .waveform-wrap canvas { display: block; width: 100%; height: 42px; }
#noiz-overlay { position: fixed; opacity: 0.75; inset: 0; display: flex; justify-content: center; align-items: center; background: transparent; pointer-events: none; z-index: 9999; animation: fadeout 750ms ease 750ms forwards; } #noiz-overlay { position: fixed; opacity: 0.75; inset: 0; display: flex; justify-content: center; align-items: center; background: transparent; pointer-events: none; z-index: 9999; animation: fadeout 750ms ease 750ms forwards; }
#noiz-overlay img { max-width: 50vw; max-height: 50vh; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5)); } #noiz-overlay img { max-width: 50vw; max-height: 50vh; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5)); }
@keyframes fadeout { from { opacity: 0.75; transform: scale(1); } to { opacity: 0; transform: scale(1.75); visibility: hidden; } } @keyframes fadeout { from { opacity: 0.75; transform: scale(1); } to { opacity: 0; transform: scale(1.75); visibility: hidden; } }
@ -610,7 +610,6 @@ function drawWaveform() {
const visWidth = wrap.clientWidth; const visWidth = wrap.clientWidth;
const canvas = waveformCanvas; const canvas = waveformCanvas;
const h = WF_HEIGHT; const h = WF_HEIGHT;
canvas.style.width = visWidth + 'px';
canvas.style.height = h + 'px'; canvas.style.height = h + 'px';
canvas.width = Math.round(visWidth * dpr); canvas.width = Math.round(visWidth * dpr);
canvas.height = Math.round(h * dpr); canvas.height = Math.round(h * dpr);