Analyser placement tweaks

src/app/components/analyser/Analyser.ts

@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, effect, ElementRef, inject, OnInit, ViewChild, viewChild} from '@angular/core';
+import {AfterViewInit, Component, effect, ElementRef, inject, ViewChild} from '@angular/core';
 import {AudioService} from '../../services/audio.service';
 
 @Component({
@@ -6,6 +6,10 @@ import {AudioService} from '../../services/audio.service';
   templateUrl: 'analyser.html',
 })
 export class Analyser implements AfterViewInit {
+  public readonly height = 150;
+  public readonly bottomOffset = 50;
+  public readonly offsetBuffer = 20;
+  public color = "rgb(80,0,80)"
   protected audio: AudioService = inject(AudioService);
   @ViewChild('analyserCanvas') canvasRef!: ElementRef<HTMLCanvasElement>;
   protected canvas!: HTMLCanvasElement;
@@ -20,6 +24,17 @@ export class Analyser implements AfterViewInit {
 
   ngAfterViewInit(): void {
     this.canvas = this.canvasRef.nativeElement as HTMLCanvasElement;
+    this.canvas.style.height = `${this.height}px`;
+    this.canvas.style.top = `-${this.height}px`;
+    document.onmousemove = (e: MouseEvent) => {
+      const cursorDistancefromBottom = document.documentElement.clientHeight - (e.clientY || 0);
+      let offset = cursorDistancefromBottom - (this.bottomOffset + this.offsetBuffer);
+      if (cursorDistancefromBottom < this.bottomOffset || cursorDistancefromBottom > (this.bottomOffset + this.height + this.offsetBuffer)) {
+        offset = this.height;
+      }
+      this.canvas.style.height = `${offset}px`;
+      this.canvas.style.top = `-${offset}px`;
+    }
   }
 
   draw() {
@@ -29,34 +44,20 @@ export class Analyser implements AfterViewInit {
     const data = this.audio.analyser.analyserData;
     if (!ctx) return;
 
-    ctx.fillStyle = "rgb(200 200 200)";
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-    ctx.lineWidth = 2;
-    ctx.strokeStyle = "rgb(0 0 0)";
-
-    ctx.beginPath();
-
-    const sliceWidth = canvas.width / data.length;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.lineWidth = 0;
+    ctx.fillStyle = this.color;
 
+    const sliceWidth = Math.ceil(canvas.width / data.length);
     let x = 0;
-
     for (let i = 0; i < data.length; i++) {
       const v = data[i] / 128.0;
       const y = (v * canvas.height) / 2;
 
-      if (i === 0) {
-        ctx.moveTo(x, y);
-      } else {
-        ctx.lineTo(x, y);
-      }
-
+      ctx.fillRect(x, canvas.height, sliceWidth, -y);
       x += sliceWidth;
     }
 
-    ctx.lineTo(canvas.width, canvas.height / 2);
-    ctx.stroke();
-
     requestAnimationFrame(this.draw.bind(this));
   }
 }