vertical bar: add media progress

.config/quickshell/ii/modules/verticalBar/VerticalBarContent.qml

@@ -153,6 +153,10 @@ Item { // Bar content region
                 Layout.fillWidth: true
                 Layout.fillHeight: false
             }
+            VerticalMedia {
+                Layout.fillWidth: true
+                Layout.fillHeight: false
+            }
         }
 
         HorizontalBarSeparator {

.config/quickshell/ii/modules/verticalBar/VerticalMedia.qml

@@ -0,0 +1,100 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.services
+import qs
+import qs.modules.common.functions
+
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Services.Mpris
+
+MouseArea {
+    id: root
+    property bool borderless: Config.options.bar.borderless
+    readonly property MprisPlayer activePlayer: MprisController.activePlayer
+    readonly property string cleanedTitle: StringUtils.cleanMusicTitle(activePlayer?.trackTitle) || Translation.tr("No media")
+
+    Layout.fillHeight: true
+    implicitHeight: mediaCircProg.implicitHeight
+    implicitWidth: Appearance.sizes.verticalBarWidth
+
+    Timer {
+        running: activePlayer?.playbackState == MprisPlaybackState.Playing
+        interval: 1000
+        repeat: true
+        onTriggered: activePlayer.positionChanged()
+    }
+
+    acceptedButtons: Qt.MiddleButton | Qt.BackButton | Qt.ForwardButton | Qt.RightButton | Qt.LeftButton
+    hoverEnabled: true
+    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();
+        } else if (event.button === Qt.LeftButton) {
+            GlobalStates.mediaControlsOpen = !GlobalStates.mediaControlsOpen
+        }
+    }
+
+    ClippedFilledCircularProgress {
+        id: mediaCircProg
+        anchors.centerIn: parent
+        implicitSize: 20
+
+        lineWidth: Appearance.rounding.unsharpen
+        value: activePlayer?.position / activePlayer?.length
+        colPrimary: Appearance.colors.colOnSecondaryContainer
+        enableAnimation: false
+
+        Item {
+            anchors.centerIn: parent
+            width: mediaCircProg.implicitSize
+            height: mediaCircProg.implicitSize
+            
+            MaterialSymbol {
+                anchors.centerIn: parent
+                fill: 1
+                text: activePlayer?.isPlaying ? "pause" : "music_note"
+                iconSize: Appearance.font.pixelSize.normal
+                color: Appearance.m3colors.m3onSecondaryContainer
+            }
+        }
+    }
+
+    StyledPopup {
+        hoverTarget: root
+        active: GlobalStates.mediaControlsOpen ? false : root.containsMouse
+
+        ColumnLayout {
+            anchors.centerIn: parent
+            RowLayout {
+                spacing: 5
+
+                MaterialSymbol {
+                    fill: 0
+                    font.weight: Font.Medium
+                    text: "music_note"
+                    iconSize: Appearance.font.pixelSize.large
+                    color: Appearance.colors.colOnSurfaceVariant
+                }
+
+                StyledText {
+                    text: "Media"
+                    font {
+                        weight: Font.Medium
+                        pixelSize: Appearance.font.pixelSize.normal
+                    }
+                    color: Appearance.colors.colOnSurfaceVariant
+                }
+            }
+
+            StyledText {
+                text: `${cleanedTitle}${activePlayer?.trackArtist ? '\n' + activePlayer.trackArtist : ''}`
+            }
+        }
+    }
+
+}