fix: FIT-291,FIT-306: SplitChannel audio regions not covering the whole height, Zooming out the page breaks audio rendering of the wave form (#7855)

Co-authored-by: bmartel <bmartel@users.noreply.github.com>

Author: bmartel

web/libs/editor/src/lib/AudioUltra/Visual/Layer.ts

@@ -79,7 +79,7 @@ export class Layer extends Events<LayerEvents> {
    * Float value of the layer opacity between 0 and 1.
    */
   private opacity = 1;
-  private pixelRatio = 1;
+  public pixelRatio = 1;
 
   name: string;
 

web/libs/editor/src/lib/AudioUltra/Visual/Visualizer.ts

@@ -212,6 +212,12 @@ export class Visualizer extends Events<VisualizerEvents> {
     // as a result of multichannel or differently configured waveHeight
     this.setContainerHeight();
 
+    // Update regions layer height to match the current visualizer height
+    const regionsLayer = this.getLayer("regions");
+    if (regionsLayer) {
+      regionsLayer.height = this.height;
+    }
+
     // Set renderers array
     this.renderers = [this.waveformRenderer];
     if (isFF(FF_AUDIO_SPECTROGRAMS) && this.spectrogramRenderer) {
@@ -956,18 +962,24 @@ export class Visualizer extends Events<VisualizerEvents> {
     // Update layer dimensions
     const mainLayer = this.getLayer("main");
     if (mainLayer) {
+      mainLayer.pixelRatio = this.pixelRatio;
       mainLayer.width = this.width;
       mainLayer.height = this.height;
     }
 
     // Update other layers
     this.layers.forEach((layer) => {
       if (layer.name !== "main") {
+        layer.pixelRatio = this.pixelRatio;
         layer.width = this.width;
         // Only update height for layers that should match the waveform height
         if (layer.name === "waveform" || layer.name === "spectrogram" || layer.name === "spectrogram-grid") {
           layer.height = this.waveformHeight;
         }
+        // Update regions layer height to match the full visualizer height
+        if (layer.name === "regions") {
+          layer.height = this.height;
+        }
       }
     });