Cleaning the codebase

src/lib/components/VUMeter.svelte

@@ -88,10 +88,20 @@
     if (!buffer) return;
 
     const [leftDB, rightDB] = calculateLevels();
+    const isHorizontal = width > height;
+
+    if (isHorizontal) {
+      drawHorizontal(ctx, leftDB, rightDB, width, height);
+    } else {
+      drawVertical(ctx, leftDB, rightDB, width, height);
+    }
+  }
+
+  function drawVertical(ctx: CanvasRenderingContext2D, leftDB: number, rightDB: number, width: number, height: number) {
     const channelWidth = width / 2;
 
-    drawChannel(ctx, 0, leftDB, channelWidth, height);
-    drawChannel(ctx, channelWidth, rightDB, channelWidth, height);
+    drawChannelVertical(ctx, 0, leftDB, channelWidth, height);
+    drawChannelVertical(ctx, channelWidth, rightDB, channelWidth, height);
 
     ctx.strokeStyle = '#333';
     ctx.lineWidth = 1;
@@ -101,6 +111,20 @@
     ctx.stroke();
   }
 
+  function drawHorizontal(ctx: CanvasRenderingContext2D, leftDB: number, rightDB: number, width: number, height: number) {
+    const channelHeight = height / 2;
+
+    drawChannelHorizontal(ctx, 0, leftDB, width, channelHeight);
+    drawChannelHorizontal(ctx, channelHeight, rightDB, width, channelHeight);
+
+    ctx.strokeStyle = '#333';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(0, channelHeight);
+    ctx.lineTo(width, channelHeight);
+    ctx.stroke();
+  }
+
   function dbToY(db: number, height: number): number {
     const minDB = -60;
     const maxDB = 0;
@@ -109,7 +133,15 @@
     return height - (normalized * height);
   }
 
-  function drawChannel(ctx: CanvasRenderingContext2D, x: number, levelDB: number, width: number, height: number) {
+  function dbToX(db: number, width: number): number {
+    const minDB = -60;
+    const maxDB = 0;
+    const clampedDB = Math.max(minDB, Math.min(maxDB, db));
+    const normalized = (clampedDB - minDB) / (maxDB - minDB);
+    return normalized * width;
+  }
+
+  function drawChannelVertical(ctx: CanvasRenderingContext2D, x: number, levelDB: number, width: number, height: number) {
     const gridMarks = [0, -3, -6, -10, -20, -40, -60];
     ctx.strokeStyle = '#222';
     ctx.lineWidth = 1;
@@ -146,6 +178,44 @@
       }
     }
   }
+
+  function drawChannelHorizontal(ctx: CanvasRenderingContext2D, y: number, levelDB: number, width: number, height: number) {
+    const gridMarks = [0, -3, -6, -10, -20, -40, -60];
+    ctx.strokeStyle = '#222';
+    ctx.lineWidth = 1;
+    for (const db of gridMarks) {
+      const x = dbToX(db, width);
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+      ctx.lineTo(x, y + height);
+      ctx.stroke();
+    }
+
+    if (levelDB === -Infinity) return;
+
+    const segments = [
+      { startDB: -60, endDB: -18, color: '#00ff00' },
+      { startDB: -18, endDB: -6, color: '#ffff00' },
+      { startDB: -6, endDB: 0, color: '#ff0000' }
+    ];
+
+    for (const segment of segments) {
+      if (levelDB >= segment.startDB) {
+        const startX = dbToX(segment.startDB, width);
+        const endX = dbToX(segment.endDB, width);
+
+        const clampedLevelDB = Math.min(levelDB, segment.endDB);
+        const levelX = dbToX(clampedLevelDB, width);
+
+        const segmentWidth = levelX - startX;
+
+        if (segmentWidth > 0) {
+          ctx.fillStyle = segment.color;
+          ctx.fillRect(startX, y, segmentWidth, height);
+        }
+      }
+    }
+  }
 </script>
 
 <canvas bind:this={canvas}></canvas>