MediaMini: converted to Layout

Modules/Bar/Widgets/MediaMini.qml

@@ -7,7 +7,7 @@ import qs.Commons
 import qs.Services
 import qs.Widgets
 
-Row {
+RowLayout {
   id: root
 
   property ShellScreen screen
@@ -15,7 +15,7 @@ Row {
   readonly property real minWidth: 160
   readonly property real maxWidth: 400
 
-  anchors.verticalCenter: parent.verticalCenter
+  Layout.alignment: Qt.AlignVCenter
   spacing: Style.marginS * scaling
   visible: MediaService.currentPlayer !== null && MediaService.canPlay
   width: MediaService.currentPlayer !== null && MediaService.canPlay ? implicitWidth : 0
@@ -24,7 +24,6 @@ Row {
     return MediaService.trackTitle + (MediaService.trackArtist !== "" ? ` - ${MediaService.trackArtist}` : "")
   }
 
-  //  A hidden text element to safely measure the full title width
   NText {
     id: fullTitleMetrics
     visible: false
@@ -34,54 +33,35 @@ Row {
 
   Rectangle {
     id: mediaMini
-
+    width: contentLayout.implicitWidth + Style.marginS * 2 * scaling
-    // Let the Rectangle size itself based on its content (the Row)
-    width: row.width + Style.marginM * 2 * scaling
-
     height: Math.round(Style.capsuleHeight * scaling)
     radius: Math.round(Style.radiusM * scaling)
     color: Color.mSurfaceVariant
+    Layout.alignment: Qt.AlignVCenter
 
-    anchors.verticalCenter: parent.verticalCenter
+    // --- Visualizer Loaders ---
-
-    // Used to anchor the tooltip, so the tooltip does not move when the content expands
-    Item {
-      id: anchor
-      height: parent.height
-      width: 200 * scaling
-    }
-
-    Item {
-      id: mainContainer
-      anchors.fill: parent
-      anchors.leftMargin: Style.marginS * scaling
-      anchors.rightMargin: Style.marginS * scaling
-
     Loader {
-        anchors.verticalCenter: parent.verticalCenter
+      anchors.centerIn: parent
-        anchors.horizontalCenter: parent.horizontalCenter
       active: Settings.data.audio.showMiniplayerCava && Settings.data.audio.visualizerType == "linear"
               && MediaService.isPlaying && MediaService.trackLength > 0
       z: 0
-
       sourceComponent: LinearSpectrum {
-          width: mainContainer.width - Style.marginS * scaling
+        width: mediaMini.width - Style.marginS * scaling
         height: 20 * scaling
         values: CavaService.values
         fillColor: Color.mOnSurfaceVariant
         opacity: 0.4
       }
+    }
 
     Loader {
-          anchors.verticalCenter: parent.verticalCenter
+      anchors.centerIn: parent
-          anchors.horizontalCenter: parent.horizontalCenter
       active: Settings.data.audio.showMiniplayerCava && Settings.data.audio.visualizerType == "mirrored"
               && MediaService.isPlaying && MediaService.trackLength > 0
       z: 0
-
       sourceComponent: MirroredSpectrum {
-            width: mainContainer.width - Style.marginS * scaling
+        width: mediaMini.width - Style.marginS * scaling
-            height: mainContainer.height - Style.marginS * scaling
+        height: mediaMini.height - Style.marginS * scaling
         values: CavaService.values
         fillColor: Color.mOnSurfaceVariant
         opacity: 0.4
@@ -89,61 +69,51 @@ Row {
     }
 
     Loader {
-          anchors.verticalCenter: parent.verticalCenter
+      anchors.centerIn: parent
-          anchors.horizontalCenter: parent.horizontalCenter
       active: Settings.data.audio.showMiniplayerCava && Settings.data.audio.visualizerType == "wave"
               && MediaService.isPlaying && MediaService.trackLength > 0
       z: 0
-
       sourceComponent: WaveSpectrum {
-            width: mainContainer.width - Style.marginS * scaling
+        width: mediaMini.width - Style.marginS * scaling
-            height: mainContainer.height - Style.marginS * scaling
+        height: mediaMini.height - Style.marginS * scaling
         values: CavaService.values
         fillColor: Color.mOnSurfaceVariant
         opacity: 0.4
       }
     }
-      }
 
-      Row {
+    // --- Main Content Layout ---
-        id: row
+    RowLayout {
+      id: contentLayout
+      anchors.left: parent.left
       anchors.verticalCenter: parent.verticalCenter
+      anchors.leftMargin: Style.marginS * scaling
       spacing: Style.marginS * scaling
-        z: 1 // Above the visualizer
+      z: 1
 
       NIcon {
         id: windowIcon
         text: MediaService.isPlaying ? "pause" : "play_arrow"
         font.pointSize: Style.fontSizeL * scaling
-          verticalAlignment: Text.AlignVCenter
+        Layout.alignment: Qt.AlignVCenter
-          anchors.verticalCenter: parent.verticalCenter
         visible: !Settings.data.audio.showMiniplayerAlbumArt && getTitle() !== "" && !trackArt.visible
       }
 
-        Column {
-          anchors.verticalCenter: parent.verticalCenter
-          visible: Settings.data.audio.showMiniplayerAlbumArt
-
-          Item {
-            width: Math.round(18 * scaling)
-            height: Math.round(18 * scaling)
-
       NImageCircled {
         id: trackArt
-              anchors.fill: parent
         imagePath: MediaService.trackArtUrl
         fallbackIcon: MediaService.isPlaying ? "pause" : "play_arrow"
         borderWidth: 0
         border.color: Color.transparent
-            }
+        Layout.preferredWidth: Math.round(18 * scaling)
-          }
+        Layout.preferredHeight: Math.round(18 * scaling)
+        Layout.alignment: Qt.AlignVCenter
+        visible: Settings.data.audio.showMiniplayerAlbumArt
       }
 
       NText {
         id: titleText
-
+        Layout.preferredWidth: {
-          // For short titles, show full. For long titles, truncate and expand on hover
-          width: {
           if (mouseArea.containsMouse) {
             return Math.round(Math.min(fullTitleMetrics.contentWidth, root.maxWidth * scaling))
           } else {
@@ -154,11 +124,10 @@ Row {
         font.pointSize: Style.fontSizeS * scaling
         font.weight: Style.fontWeightMedium
         elide: Text.ElideRight
-          anchors.verticalCenter: parent.verticalCenter
-          verticalAlignment: Text.AlignVCenter
         color: Color.mTertiary
+        Layout.alignment: Qt.AlignVCenter
 
-          Behavior on width {
+        Behavior on Layout.preferredWidth {
           NumberAnimation {
             duration: Style.animationSlow
             easing.type: Easing.InOutCubic
@@ -167,7 +136,6 @@ Row {
       }
     }
 
-      // Mouse area for hover detection
     MouseArea {
       id: mouseArea
       anchors.fill: parent
@@ -179,15 +147,12 @@ Row {
                      MediaService.playPause()
                    } else if (mouse.button == Qt.RightButton) {
                      MediaService.next()
-                       // Need to hide the tooltip instantly
                      tooltip.visible = false
                    } else if (mouse.button == Qt.MiddleButton) {
                      MediaService.previous()
-                       // Need to hide the tooltip instantly
                      tooltip.visible = false
                    }
                  }
-
       onEntered: {
         if (tooltip.text !== "") {
           tooltip.show()
@@ -198,7 +163,6 @@ Row {
       }
     }
   }
-  }
 
   NTooltip {
     id: tooltip
@@ -212,7 +176,7 @@ Row {
       }
       return str
     }
-    target: anchor
+    target: mediaMini
     positionAbove: Settings.data.bar.position === "bottom"
   }
 }