AudioViz: mirrored bars

Modules/Audio/CircularSpectrum.qml

@@ -1,54 +0,0 @@
-import QtQuick
-import qs.Commons
-import qs.Services
-
-// Not used ATM and need rework
-Item {
-  id: root
-  property int innerRadius: 32 * scaling
-  property int outerRadius: 64 * scaling
-  property color fillColor: Color.mPrimary
-  property color strokeColor: Color.mOnSurface
-  property int strokeWidth: 0 * scaling
-  property var values: []
-  property int usableOuter: 64
-
-  width: usableOuter * 2
-  height: usableOuter * 2
-
-  Repeater {
-    model: root.values.length
-    Rectangle {
-      property real value: root.values[index]
-      property real angle: (index / root.values.length) * 360
-      width: Math.max(2 * scaling, (root.innerRadius * 2 * Math.PI) / root.values.length - 4 * scaling)
-      height: value * (usableOuter - root.innerRadius)
-      radius: width / 2
-      color: root.fillColor
-      border.color: root.strokeColor
-      border.width: root.strokeWidth
-      antialiasing: true
-
-      x: root.width / 2 - width / 2 * Math.cos(Math.PI / 2 + 2 * Math.PI * index / root.values.length) - width / 2
-      y: root.height / 2 - height
-
-      transform: [
-        Rotation {
-          origin.x: width / 2
-          origin.y: height
-          //angle: (index / root.values.length) * 360
-        },
-        Translate {
-          x: root.innerRadius * Math.cos(2 * Math.PI * index / root.values.length)
-          y: root.innerRadius * Math.sin(2 * Math.PI * index / root.values.length)
-        }
-      ]
-
-      Behavior on height {
-        SmoothedAnimation {
-          duration: Style.animationFast
-        }
-      }
-    }
-  }
-}

Modules/Audio/MirroredSpectrum.qml

@@ -0,0 +1,42 @@
+import QtQuick
+import qs.Commons
+
+Item {
+  id: root
+  property color fillColor: Color.mPrimary
+  property color strokeColor: Color.mOnSurface
+  property int strokeWidth: 0
+  property var values: []
+
+  // Pre-compute mirroring
+  readonly property int valuesCount: values.length
+  readonly property int totalBars: valuesCount * 2
+  readonly property real barSlotWidth: totalBars > 0 ? width / totalBars : 0
+
+  readonly property real centerY: height / 2
+
+  Repeater {
+    model: root.totalBars
+
+    Rectangle {
+      // The first half of bars are a mirror image (reversed values array).
+      // The second half of bars are in normal order.
+      property int valueIndex: index < root.valuesCount ? root.valuesCount - 1 - index // Mirrored half
+                                                        : index - root.valuesCount // Normal half
+
+      property real amp: root.values[valueIndex]
+
+      property real barHeight: root.height * amp
+
+      color: root.fillColor
+      border.color: root.strokeColor
+      border.width: root.strokeWidth
+      antialiasing: true
+
+      width: root.barSlotWidth * 0.8 // Creates a small gap between bars
+      height: Math.max(1, barHeight)
+      x: index * root.barSlotWidth
+      y: root.centerY - (barHeight / 2)
+    }
+  }
+}

Modules/Audio/WaveSpectrum.qml

@@ -48,18 +48,22 @@ Item {
       ctx.beginPath()
 
       // Draw the top half of the waveform from left to right
-      ctx.moveTo(0, centerY - (mirroredValues[0] * amplitude)) // Move to the first point
+      // Use the calculated offset for the first point
+      var yOffset = Math.max(1, mirroredValues[0] * amplitude)
+      ctx.moveTo(0, centerY - yOffset)
+
       for (var i = 1; i < count; i++) {
         const x = i * stepX
-        const y = centerY - (mirroredValues[i] * amplitude)
+        yOffset = Math.max(1, mirroredValues[i] * amplitude)
+        const y = centerY - yOffset
         ctx.lineTo(x, y)
       }
 
       // Draw the bottom half of the waveform from right to left to create a closed shape
       for (var i = count - 1; i >= 0; i--) {
         const x = i * stepX
-        const y = centerY + (mirroredValues[i] * amplitude)
-        // Mirrored across the center
+        yOffset = Math.max(1, mirroredValues[i] * amplitude)
+        const y = centerY + yOffset // Mirrored across the center
         ctx.lineTo(x, y)
       }
 

Modules/SettingsPanel/Tabs/AudioTab.qml

@@ -232,11 +232,16 @@ ColumnLayout {
             ListElement {
               key: "linear"
               name: "Linear"
+            }
+                        ListElement {
+              key: "mirrored"
+              name: "Mirrored"
             }
             ListElement {
               key: "wave"
               name: "Wave"
             }
+
           }
           currentKey: Settings.data.audio.visualizerType
           onSelected: function (key) {

Modules/SidePanel/Cards/MediaCard.qml

@@ -345,6 +345,19 @@ NBox {
       }
     }
 
+    Loader {
+      active: Settings.data.audio.visualizerType == "mirrored"
+      Layout.alignment: Qt.AlignHCenter
+
+      sourceComponent: MirroredSpectrum {
+        width: 300 * scaling
+        height: 80 * scaling
+        values: CavaService.values
+        fillColor: Color.mPrimary
+        Layout.alignment: Qt.AlignHCenter
+      }
+    }
+
     Loader {
       active: Settings.data.audio.visualizerType == "wave"
       Layout.alignment: Qt.AlignHCenter
@@ -357,5 +370,10 @@ NBox {
         Layout.alignment: Qt.AlignHCenter
       }
     }
+
+
+
+
+    
   }
 }