AudioVisualizer: add setting to auto hide if no media is playing

Assets/Translations/de.json

@@ -1251,6 +1251,10 @@
         "width": {
           "label": "Breite",
           "description": "Benutzerdefinierte Komponentenbreite."
+        },
+        "hide-when-idle": {
+          "label": "Ausblenden, wenn keine Medien wiedergegeben werden",
+          "description": "Wenn aktiviert, wird der Visualizer ausgeblendet, sofern keine Wiedergabe läuft."
         }
       }
     }

Assets/Translations/en.json

@@ -1234,6 +1234,10 @@
         "width": {
           "label": "Width",
           "description": "Custom component width."
+        },
+        "hide-when-idle": {
+          "label": "Hide when no media is playing",
+          "description": "When enabled, the visualizer is hidden unless a player is actively playing."
         }
       }
     }

Assets/Translations/es.json

@@ -1234,6 +1234,10 @@
         "width": {
           "label": "Ancho",
           "description": "Ancho del componente personalizado."
+        },
+        "hide-when-idle": {
+          "label": "Ocultar cuando no se reproduce",
+          "description": "Si está activado, el visualizador se oculta salvo que haya reproducción activa."
         }
       }
     }

Assets/Translations/fr.json

@@ -1234,6 +1234,10 @@
         "width": {
           "label": "Largeur",
           "description": "Largeur personnalisée du composant."
+        },
+        "hide-when-idle": {
+          "label": "Masquer lorsqu'aucun média n'est en lecture",
+          "description": "Si activé, le visualiseur est masqué sauf lorsqu'un lecteur est en lecture."
         }
       }
     }

Assets/Translations/pt.json

@@ -1234,6 +1234,10 @@
         "width": {
           "label": "Largura",
           "description": "Largura do componente personalizado."
+        },
+        "hide-when-idle": {
+          "label": "Ocultar quando não houver reprodução",
+          "description": "Quando ativado, o visualizador fica oculto a menos que haja reprodução ativa."
         }
       }
     }

Assets/Translations/zh-CN.json

@@ -1234,6 +1234,10 @@
         "width": {
           "label": "宽度",
           "description": "自定义组件的宽度。"
+        },
+        "hide-when-idle": {
+          "label": "无媒体播放时隐藏",
+          "description": "启用后，除非正在播放媒体，否则隐藏可视化显示。"
         }
       }
     }

Modules/Bar/Widgets/AudioVisualizer.qml

@@ -29,9 +29,25 @@ Item {
 
   // Resolve settings: try user settings or defaults from BarWidgetRegistry
   readonly property int visualizerWidth: widgetSettings.width !== undefined ? widgetSettings.width : widgetMetadata.width
+  readonly property bool hideWhenIdle: widgetSettings.hideWhenIdle !== undefined ? widgetSettings.hideWhenIdle : (widgetMetadata.hideWhenIdle !== undefined ? widgetMetadata.hideWhenIdle : false)
+  readonly property bool shouldShow: (currentVisualizerType !== "" && currentVisualizerType !== "none") && (!hideWhenIdle || MediaService.isPlaying)
 
-  implicitWidth: visualizerWidth
-  implicitHeight: Style.capsuleHeight
+  implicitWidth: shouldShow ? visualizerWidth : 0
+  implicitHeight: shouldShow ? Style.capsuleHeight : 0
+  visible: shouldShow
+
+  Behavior on implicitWidth {
+    NumberAnimation {
+      duration: Style.animationNormal
+      easing.type: Easing.InOutCubic
+    }
+  }
+  Behavior on implicitHeight {
+    NumberAnimation {
+      duration: Style.animationNormal
+      easing.type: Easing.InOutCubic
+    }
+  }
 
   Rectangle {
     id: background
@@ -43,27 +59,14 @@ Item {
   // Store visualizer type to force re-evaluation
   readonly property string currentVisualizerType: Settings.data.audio.visualizerType
 
-  // Timer to delay reload
-  Timer {
-    id: reloadTimer
-    interval: 50
-    onTriggered: {
-      visualizerLoader.active = true
-    }
-  }
-
-  // Force reload when visualizer type changes
-  onCurrentVisualizerTypeChanged: {
-    visualizerLoader.active = false
-    reloadTimer.restart()
-  }
+  // When visualizer type or playback changes, shouldShow updates automatically
 
   // The Loader dynamically loads the appropriate visualizer based on settings
   Loader {
     id: visualizerLoader
     anchors.fill: parent
     anchors.margins: Style.marginS
-    active: false
+    active: shouldShow
     asynchronous: false
 
     sourceComponent: {
@@ -99,13 +102,7 @@ Item {
                }
   }
 
-  // Initial activation on component complete
-  Component.onCompleted: {
-    if (currentVisualizerType !== "" && currentVisualizerType !== "none") {
-      visualizerLoader.active = true
-    }
-  }
-
+  // No imperative activation needed; bound to shouldShow
   Component {
     id: linearComponent
     LinearSpectrum {

Modules/Settings/Bar/WidgetSettings/AudioVisualizerSettings.qml

@@ -13,9 +13,13 @@ ColumnLayout {
   property var widgetData: null
   property var widgetMetadata: null
 
+  // Local state
+  property bool valueHideWhenIdle: widgetData.hideWhenIdle !== undefined ? widgetData.hideWhenIdle : (widgetMetadata.hideWhenIdle !== undefined ? widgetMetadata.hideWhenIdle : false)
+
   function saveSettings() {
     var settings = Object.assign({}, widgetData || {})
     settings.width = parseInt(widthInput.text) || widgetMetadata.width
+    settings.hideWhenIdle = valueHideWhenIdle
     return settings
   }
 
@@ -27,4 +31,11 @@ ColumnLayout {
     text: widgetData.width || widgetMetadata.width
     placeholderText: I18n.tr("placeholders.enter-width-pixels")
   }
+
+  NToggle {
+    label: I18n.tr("bar.widget-settings.audio-visualizer.hide-when-idle.label")
+    description: I18n.tr("bar.widget-settings.audio-visualizer.hide-when-idle.description")
+    checked: valueHideWhenIdle
+    onToggled: checked => valueHideWhenIdle = checked
+  }
 }

Services/BarWidgetRegistry.qml

@@ -52,7 +52,8 @@ Singleton {
                                   },
                                   "AudioVisualizer": {
                                     "allowUserSettings": true,
-                                    "width": 200
+                                    "width": 200,
+                                    "hideWhenIdle": false
                                   },
                                   "Battery": {
                                     "allowUserSettings": true,