wactioncenter: media controls

2025-11-23 21:35:43 +01:00
parent c78c363388
commit 07f8a72d6d
23 changed files with 348 additions and 130 deletions
@@ -1,3 +1,4 @@
+pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
@@ -12,28 +13,52 @@ import qs.modules.waffle.actionCenter.mainPage
 WBarAttachedPanelContent {
    id: root

-    contentItem: WStackView {
-        id: stackView
-        anchors.fill: parent
-        implicitWidth: initItem.implicitWidth
-        implicitHeight: initItem.implicitHeight        
-
-        initialItem: PageColumn {
-            id: initItem
-            MainPageBody {}
-            Separator {}
-            MainPageFooter {}
+    readonly property bool barAtBottom: Config.options.waffles.bar.bottom
+    
+    contentItem: Column {
+        // This somewhat sophisticated anchoring is needed to make opening anim not jump abruptly when stuff appear
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: root.barAtBottom ? undefined : parent.top
+            bottom: root.barAtBottom ? parent.bottom : undefined
+            margins: root.visualMargin
        }
+        spacing: 12

-        Component.onCompleted: {
-            ActionCenterContext.stackView = this
+        WPane {
+            visible: MprisController.activePlayer != null && MprisController.isRealPlayer(MprisController.activePlayer)
+            anchors {
+                left: parent.left
+                right: parent.right
+            }
+            contentItem: MediaPaneContent {}
        }
+        WPane {
+            contentItem: WStackView {
+                id: stackView
+                anchors.fill: parent
+                implicitWidth: initItem.implicitWidth
+                implicitHeight: initItem.implicitHeight

-        MouseArea {
-            anchors.fill: parent
-            acceptedButtons: Qt.BackButton
-            onClicked: {
-                ActionCenterContext.back()
+                initialItem: PageColumn {
+                    id: initItem
+                    MainPageBody {}
+                    Separator {}
+                    MainPageFooter {}
+                }
+
+                Component.onCompleted: {
+                    ActionCenterContext.stackView = this;
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    acceptedButtons: Qt.BackButton
+                    onClicked: {
+                        ActionCenterContext.back();
+                    }
+                }
            }
        }
    }
@@ -0,0 +1,156 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
+import Quickshell
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.common.widgets
+import qs.modules.waffle.looks
+
+Rectangle {
+    id: root
+    implicitHeight: 176
+    implicitWidth: 358
+    color: Looks.colors.bgPanelBody
+    anchors.fill: parent
+
+    readonly property var activePlayer: MprisController.activePlayer
+
+    Column {
+        anchors {
+            fill: parent
+            leftMargin: 23
+            rightMargin: 23
+            topMargin: 16
+            bottomMargin: 20
+        }
+        spacing: 25
+
+        AppInfoRow {
+            anchors {
+                left: parent.left
+                right: parent.right
+            }
+        }
+
+        TrackInfoRow {
+            anchors {
+                left: parent.left
+                right: parent.right
+            }
+        }
+
+        ControlButtonsRow {
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+
+    component AppInfoRow: RowLayout {
+        id: appInfo
+        spacing: 8
+
+        property var desktopEntry: {
+            const desktopEntryString = root.activePlayer?.desktopEntry ?? "";
+            return DesktopEntries.byId(desktopEntryString);
+        }
+
+        FluentIcon {
+            implicitSize: 20
+            icon: appInfo.desktopEntry?.icon || "music-note-2"
+            monochrome: !appInfo.desktopEntry?.icon
+        }
+
+        WText {
+            Layout.fillWidth: true
+            text: appInfo.desktopEntry?.name ?? Translation.tr("Media")
+            horizontalAlignment: Text.AlignLeft
+            elide: Text.ElideRight
+        }
+    }
+
+    component TrackInfoRow: RowLayout {
+        spacing: 16
+
+        ColumnLayout {
+            id: trackInfo
+            Layout.fillWidth: true
+            spacing: 0
+
+            WText {
+                Layout.fillWidth: true
+                font.weight: Looks.font.weight.strong
+                font.pixelSize: Looks.font.pixelSize.large
+                elide: Text.ElideRight
+                text: StringUtils.cleanMusicTitle(root.activePlayer?.trackTitle) || Translation.tr("Unknown Title")
+            }
+
+            WText {
+                Layout.fillWidth: true
+                elide: Text.ElideRight
+                text: root.activePlayer?.trackArtist || Translation.tr("Unknown Artist")
+            }
+        }
+
+        StyledImage {
+            id: artImage
+            Layout.preferredWidth: 58
+            Layout.preferredHeight: trackInfo.implicitHeight
+            source: MprisController.activeTrack?.artUrl || ""
+            fillMode: Image.PreserveAspectFit
+
+            layer.enabled: true
+            layer.effect: OpacityMask {
+                maskSource: Item {
+                    width: artImage.width
+                    height: artImage.height
+                    Rectangle {
+                        anchors.centerIn: parent
+                        width: artImage.paintedWidth
+                        height: artImage.paintedHeight
+                        radius: Looks.radius.medium
+                    }
+                }
+            }
+        }
+    }
+
+    component ControlButtonsRow: RowLayout {
+        spacing: 26
+
+        MediaControlButton {
+            iconName: "previous"
+            enabled: root.activePlayer?.canGoPrevious ?? false
+            onClicked: root.activePlayer?.previous()
+        }
+        MediaControlButton {
+            readonly property bool playing: root.activePlayer?.isPlaying ?? false
+            iconName: playing ? "pause" : "play"
+            enabled: (playing && root.activePlayer?.canPause) || (!playing && root.activePlayer?.canPlay)
+            onClicked: root.activePlayer?.togglePlaying()
+        }
+        MediaControlButton {
+            iconName: "next"
+            enabled: root.activePlayer?.canGoNext ?? false
+            onClicked: root.activePlayer?.next()
+        }
+    }
+
+    component MediaControlButton: WBorderlessButton {
+        id: controlButton
+        required property string iconName
+        implicitHeight: 40
+        implicitWidth: 40
+
+        contentItem: Item {
+            FluentIcon {
+                anchors.centerIn: parent
+                icon: controlButton.iconName
+                monochrome: true
+                filled: true
+                implicitSize: 18
+            }
+        }
+    }
+}
@@ -35,8 +35,8 @@ Scope {
                right: true
            }

-            implicitWidth: content.implicitWidth + content.visualMargin * 2
-            implicitHeight: content.implicitHeight + content.visualMargin * 2
+            implicitWidth: content.implicitWidth
+            implicitHeight: content.implicitHeight

            HyprlandFocusGrab {
                id: focusGrab
@@ -55,7 +55,6 @@ Scope {
            ActionCenterContent {
                id: content
                anchors.fill: parent
-                anchors.margins: visualMargin

                focus: true
                Keys.onPressed: event => { // Esc to close
@@ -110,7 +110,7 @@ Item {
                    Quickshell.execDetached(["bash", "-c", Config.options.apps.bluetooth]);
                }
            }
-            WPanelFooterButton {
+            WBorderlessButton {
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                anchors.rightMargin: 12
@@ -11,7 +11,7 @@ import qs.modules.waffle.actionCenter
 FooterRectangle {

    // Battery button
-    WPanelFooterButton {
+    WBorderlessButton {
        visible: Battery.available
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
@@ -36,7 +36,7 @@ FooterRectangle {
    }

    // Settings button
-    WPanelFooterButton {
+    WBorderlessButton {
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: 12
@@ -100,7 +100,7 @@ Item {
                    Quickshell.execDetached(["bash", "-c", Config.options.apps.network]);
                }
            }
-            WPanelFooterButton {
+            WBorderlessButton {
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                anchors.rightMargin: 12