bar: media indicator

.config/quickshell/modules/bar/Bar.qml

@@ -5,6 +5,10 @@ import QtQuick.Layouts
 import Quickshell
 
 Scope {
+    id: bar
+    readonly property int barHeight: 40
+    readonly property int sideCenterModuleWidth: 360
+
     Variants {
         model: Quickshell.screens
 
@@ -14,7 +18,7 @@ Scope {
             property var modelData
 
             screen: modelData
-            height: 40
+            height: barHeight
             color: Appearance.colors.colLayer0
 
             // Left section
@@ -25,17 +29,21 @@ Scope {
             // Middle section
             RowLayout {
                 anchors.centerIn: parent
-                implicitWidth: 500
                 spacing: 8
 
                 RowLayout {
+                    Layout.preferredWidth: sideCenterModuleWidth
                     spacing: 4
-                    Layout.fillWidth: true
                     Layout.fillHeight: true
+                    implicitWidth: 350
 
                     Resources {
                     }
 
+                    Media {
+                        Layout.fillWidth: true
+                    }
+
                 }
 
                 RowLayout {
@@ -50,12 +58,13 @@ Scope {
                 }
 
                 RowLayout {
-                    Layout.fillWidth: true
+                    Layout.preferredWidth: sideCenterModuleWidth
                     Layout.fillHeight: true
                     spacing: 4
 
                     ClockWidget {
                         Layout.alignment: Qt.AlignVCenter
+                        Layout.fillWidth: true
                     }
 
                     UtilButtons {

.config/quickshell/modules/bar/Battery.qml

@@ -27,13 +27,12 @@ Rectangle {
         anchors.centerIn: parent
 
         Rectangle {
-            implicitWidth: (isCharging ? boltIcon.width : 0) - rowLayout.spacing
+            implicitWidth: (isCharging ? boltIcon.width : 0)
 
             Behavior on implicitWidth {
                 NumberAnimation {
                     duration: Appearance.animation.elementDecel.duration
                     easing.type: Appearance.animation.elementDecel.type
-                    easing.bezierCurve: Appearance.animation.elementDecel.bezierCurve
                 }
 
             }

.config/quickshell/modules/bar/Media.qml

@@ -0,0 +1,85 @@
+import "../common"
+import "../common/widgets"
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Io
+import Quickshell.Services.Mpris
+
+Rectangle {
+    readonly property MprisPlayer activePlayer: MprisController.activePlayer
+    readonly property string cleanedTitle: activePlayer?.trackTitle.replace(/【[^】]*】/, "") || "No media"
+
+    Layout.fillHeight: true
+    implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
+    implicitHeight: 40
+    color: "transparent"
+
+    // Background
+    Rectangle {
+        anchors.centerIn: parent
+        width: parent.width
+        implicitHeight: 32
+        color: Appearance.colors.colLayer1
+        radius: Appearance.rounding.small
+    }
+
+    Timer {
+        running: activePlayer?.playbackState == MprisPlaybackState.Playing
+        interval: 1000
+        repeat: true
+        onTriggered: activePlayer.positionChanged()
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        acceptedButtons: Qt.MiddleButton | Qt.BackButton | Qt.ForwardButton | Qt.RightButton
+        onPressed: (event) => {
+            if (event.button === Qt.MiddleButton) {
+                activePlayer.togglePlaying();
+            } else if (event.button === Qt.BackButton) {
+                activePlayer.previous();
+            } else if (event.button === Qt.ForwardButton || event.button === Qt.RightButton) {
+                activePlayer.next();
+            } 
+        }
+    }
+
+    RowLayout {
+        id: rowLayout
+
+        spacing: 4
+        anchors.fill: parent
+
+        CircularProgress {
+            Layout.alignment: Qt.AlignVCenter
+            Layout.leftMargin: rowLayout.spacing
+            lineWidth: 2
+            value: activePlayer?.position / activePlayer?.length
+            size: 26
+            secondaryColor: Appearance.m3colors.m3secondaryContainer
+            primaryColor: Appearance.m3colors.m3onSecondaryContainer
+
+            MaterialSymbol {
+                anchors.centerIn: parent
+                text: activePlayer?.isPlaying ? "pause" : "play_arrow"
+                font.pointSize: Appearance.font.pointSize.normal
+                color: Appearance.m3colors.m3onSecondaryContainer
+            }
+
+        }
+
+        StyledText {
+            width: rowLayout.width - (CircularProgress.size + rowLayout.spacing * 2) // TODO ADJUST THIS
+            Layout.alignment: Qt.AlignVCenter
+            Layout.fillWidth: true // Ensures the text takes up available space
+            Layout.rightMargin: rowLayout.spacing
+            horizontalAlignment: Text.AlignHCenter
+            elide: Text.ElideRight // Truncates the text on the right
+            color: Appearance.colors.colOnLayer1
+            text: `${cleanedTitle} • ${activePlayer?.trackArtist}`
+        }
+
+    }
+
+}

.config/quickshell/modules/bar/Workspaces.qml

@@ -107,14 +107,12 @@ Rectangle {
                     NumberAnimation {
                         duration: Appearance.animation.elementDecel.duration
                         easing.type: Appearance.animation.elementDecel.type
-                        easing.bezierCurve: Appearance.animation.elementDecel.bezierCurve
                     }
                 }
                 Behavior on radiusLeft {
                     NumberAnimation {
                         duration: Appearance.animation.elementDecel.duration
                         easing.type: Appearance.animation.elementDecel.type
-                        easing.bezierCurve: Appearance.animation.elementDecel.bezierCurve
                     }
                 }
 
@@ -122,7 +120,6 @@ Rectangle {
                     NumberAnimation {
                         duration: Appearance.animation.elementDecel.duration
                         easing.type: Appearance.animation.elementDecel.type
-                        easing.bezierCurve: Appearance.animation.elementDecel.bezierCurve
                     }
                 }
 
@@ -177,7 +174,6 @@ Rectangle {
                         ColorAnimation {
                             duration: Appearance.animation.elementDecel.duration
                             easing.type: Appearance.animation.elementDecel.type
-                            easing.bezierCurve: Appearance.animation.elementDecel.bezierCurve
                         }
 
                     }