wactioncenter: media controls

dots/.config/quickshell/ii/assets/icons/fluent/next-filled.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21 4a1 1 0 1 0-2 0v16a1 1 0 1 0 2 0V4ZM3 4.947c0-1.424 1.612-2.252 2.77-1.422l10.47 7.507a1.75 1.75 0 0 1-.075 2.895l-10.47 6.716C4.53 21.39 3 20.554 3 19.17V4.947Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/next.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21 3.75a.75.75 0 0 0-1.5 0v16.5a.75.75 0 0 0 1.5 0V3.75ZM5.77 3.525C4.612 2.695 3 3.523 3 4.947V19.17c0 1.384 1.53 2.22 2.695 1.473l10.47-6.716a1.75 1.75 0 0 0 .074-2.895L5.77 3.525ZM4.5 4.947a.25.25 0 0 1 .396-.203l10.47 7.507a.25.25 0 0 1-.011.413l-10.47 6.717a.25.25 0 0 1-.385-.21V4.946Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/pause-filled.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.746 3a1.75 1.75 0 0 0-1.75 1.75v14.5c0 .966.784 1.75 1.75 1.75h3.5a1.75 1.75 0 0 0 1.75-1.75V4.75A1.75 1.75 0 0 0 9.246 3h-3.5ZM14.746 3a1.75 1.75 0 0 0-1.75 1.75v14.5c0 .966.784 1.75 1.75 1.75h3.5a1.75 1.75 0 0 0 1.75-1.75V4.75A1.75 1.75 0 0 0 18.246 3h-3.5Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/pause.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.746 3a1.75 1.75 0 0 0-1.75 1.75v14.5c0 .966.784 1.75 1.75 1.75h3.5a1.75 1.75 0 0 0 1.75-1.75V4.75A1.75 1.75 0 0 0 9.246 3h-3.5Zm-.25 1.75a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v14.5a.25.25 0 0 1-.25.25h-3.5a.25.25 0 0 1-.25-.25V4.75ZM14.746 3a1.75 1.75 0 0 0-1.75 1.75v14.5c0 .966.784 1.75 1.75 1.75h3.5a1.75 1.75 0 0 0 1.75-1.75V4.75A1.75 1.75 0 0 0 18.246 3h-3.5Zm-.25 1.75a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v14.5a.25.25 0 0 1-.25.25h-3.5a.25.25 0 0 1-.25-.25V4.75Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/play-filled.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.726c1.566.853 1.566 3.101 0 3.953L8.325 20.702C6.826 21.518 5 20.432 5 18.726V5.274Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/play.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.608 4.615a.75.75 0 0 0-1.108.659v13.452a.75.75 0 0 0 1.108.659l12.362-6.726a.75.75 0 0 0 0-1.318L7.608 4.615ZM5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.726c1.566.853 1.566 3.101 0 3.953L8.325 20.702C6.826 21.518 5 20.432 5 18.726V5.274Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/previous-filled.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2.75 20a1 1 0 1 0 2 0V4a1 1 0 1 0-2 0v16ZM20.75 19.053c0 1.424-1.612 2.252-2.77 1.422L7.51 12.968a1.75 1.75 0 0 1 .075-2.895l10.47-6.716c1.165-.748 2.695.089 2.695 1.473v14.223Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/assets/icons/fluent/previous.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 20.25a.75.75 0 0 0 1.5 0V3.75a.75.75 0 1 0-1.5 0v16.5ZM18.23 20.475c1.158.83 2.77.002 2.77-1.422V4.83c0-1.384-1.53-2.22-2.695-1.473l-10.47 6.716a1.75 1.75 0 0 0-.074 2.895l10.47 7.507Zm1.27-1.422a.25.25 0 0 1-.396.203l-10.47-7.507a.25.25 0 0 1 .011-.413l10.47-6.717a.25.25 0 0 1 .385.21v14.224Z" fill="#212121"/></svg>

dots/.config/quickshell/ii/modules/ii/mediaControls/MediaControls.qml

@@ -16,7 +16,7 @@ Scope {
     id: root
     property bool visible: false
     readonly property MprisPlayer activePlayer: MprisController.activePlayer
-    readonly property var realPlayers: Mpris.players.values.filter(player => isRealPlayer(player))
+    readonly property var realPlayers: MprisController.players
     readonly property var meaningfulPlayers: filterDuplicatePlayers(realPlayers)
     readonly property real osdWidth: Appearance.sizes.osdWidth
     readonly property real widgetWidth: Appearance.sizes.mediaControlsWidth
@@ -24,27 +24,6 @@ Scope {
     property real popupRounding: Appearance.rounding.screenRounding - Appearance.sizes.hyprlandGapsOut + 1
     property list<real> visualizerPoints: []
 
-    property bool hasPlasmaIntegration: false
-    Process {
-        id: plasmaIntegrationAvailabilityCheckProc
-        running: true
-        command: ["bash", "-c", "command -v plasma-browser-integration-host"]
-        onExited: (exitCode, exitStatus) => {
-            root.hasPlasmaIntegration = (exitCode === 0);
-        }
-    }
-    function isRealPlayer(player) {
-        if (!Config.options.media.filterDuplicatePlayers) {
-            return true;
-        }
-        return (
-            // Remove unecessary native buses from browsers if there's plasma integration
-            !(hasPlasmaIntegration && player.dbusName.startsWith('org.mpris.MediaPlayer2.firefox')) && !(hasPlasmaIntegration && player.dbusName.startsWith('org.mpris.MediaPlayer2.chromium')) &&
-            // playerctld just copies other buses and we don't need duplicates
-            !player.dbusName?.startsWith('org.mpris.MediaPlayer2.playerctld') &&
-            // Non-instance mpd bus
-            !(player.dbusName?.endsWith('.mpd') && !player.dbusName.endsWith('MediaPlayer2.mpd')));
-    }
     function filterDuplicatePlayers(players) {
         let filtered = [];
         let used = new Set();
@@ -96,7 +75,7 @@ Scope {
         id: mediaControlsLoader
         active: GlobalStates.mediaControlsOpen
         onActiveChanged: {
-            if (!mediaControlsLoader.active && Mpris.players.values.filter(player => isRealPlayer(player)).length === 0) {
+            if (!mediaControlsLoader.active && root.realPlayers.length === 0) {
                 GlobalStates.mediaControlsOpen = false;
             }
         }

dots/.config/quickshell/ii/modules/waffle/actionCenter/ActionCenterContent.qml

@@ -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 {
+    readonly property bool barAtBottom: Config.options.waffles.bar.bottom
-        id: stackView
+    
-        anchors.fill: parent
+    contentItem: Column {
-        implicitWidth: initItem.implicitWidth
+        // This somewhat sophisticated anchoring is needed to make opening anim not jump abruptly when stuff appear
-        implicitHeight: initItem.implicitHeight        
+        anchors {
-
+            left: parent.left
-        initialItem: PageColumn {
+            right: parent.right
-            id: initItem
+            top: root.barAtBottom ? undefined : parent.top
-            MainPageBody {}
+            bottom: root.barAtBottom ? parent.bottom : undefined
-            Separator {}
+            margins: root.visualMargin
-            MainPageFooter {}
         }
+        spacing: 12
 
-        Component.onCompleted: {
+        WPane {
-            ActionCenterContext.stackView = this
+            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 {
+                initialItem: PageColumn {
-            anchors.fill: parent
+                    id: initItem
-            acceptedButtons: Qt.BackButton
+                    MainPageBody {}
-            onClicked: {
+                    Separator {}
-                ActionCenterContext.back()
+                    MainPageFooter {}
+                }
+
+                Component.onCompleted: {
+                    ActionCenterContext.stackView = this;
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    acceptedButtons: Qt.BackButton
+                    onClicked: {
+                        ActionCenterContext.back();
+                    }
+                }
             }
         }
     }

dots/.config/quickshell/ii/modules/waffle/actionCenter/MediaPaneContent.qml

@@ -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
+            }
+        }
+    }
+}

dots/.config/quickshell/ii/modules/waffle/actionCenter/WaffleActionCenter.qml

@@ -35,8 +35,8 @@ Scope {
                 right: true
             }
 
-            implicitWidth: content.implicitWidth + content.visualMargin * 2
+            implicitWidth: content.implicitWidth
-            implicitHeight: content.implicitHeight + content.visualMargin * 2
+            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

dots/.config/quickshell/ii/modules/waffle/actionCenter/bluetooth/BluetoothControl.qml

@@ -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

dots/.config/quickshell/ii/modules/waffle/actionCenter/mainPage/MainPageFooter.qml

@@ -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

dots/.config/quickshell/ii/modules/waffle/actionCenter/wifi/WifiControl.qml

@@ -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

dots/.config/quickshell/ii/modules/waffle/bar/AppButton.qml

@@ -54,7 +54,7 @@ BarButton {
 
     contentItem: Item {
         id: contentItem
-        anchors.centerIn: background
+        anchors.centerIn: root.background
 
         implicitHeight: iconWidget.implicitHeight
         implicitWidth: iconWidget.implicitWidth

dots/.config/quickshell/ii/modules/waffle/looks/WBarAttachedPanelContent.qml

@@ -12,8 +12,6 @@ Item {
 
     signal closed()
 
-    property alias border: borderRect
-    property alias borderColor: borderRect.border.color
     required property Item contentItem
     property real visualMargin: 12
     property int closeAnimDuration: 150
@@ -24,32 +22,19 @@ Item {
 
     readonly property bool barAtBottom: Config.options.waffles.bar.bottom
 
-    implicitHeight: borderRect.implicitHeight
+    implicitHeight: contentItem.implicitHeight + visualMargin * 2
-    implicitWidth: borderRect.implicitWidth
+    implicitWidth: contentItem.implicitWidth + visualMargin * 2
-
-    WRectangularShadow {
-        target: borderRect
-    }
-
-    Rectangle {
-        id: borderRect
-        z: 1
-
-        color: "transparent"
-        radius: Looks.radius.large
-        border.color: Looks.colors.bg2Border
-        border.width: 1
-        implicitWidth: contentItem.implicitWidth + border.width * 2
-        implicitHeight: contentItem.implicitHeight + border.width * 2
 
+    Item {
+        id: panelContent
         anchors {
             left: parent.left
             right: parent.right
             top: root.barAtBottom ? undefined : parent.top
             bottom: root.barAtBottom ? parent.bottom : undefined
             // Opening anim
-            bottomMargin: root.barAtBottom ? sourceEdgeMargin : 0
+            bottomMargin: root.barAtBottom ? sourceEdgeMargin : root.visualMargin
-            topMargin: root.barAtBottom ? 0 : sourceEdgeMargin
+            topMargin: root.barAtBottom ? root.visualMargin : sourceEdgeMargin
         }
 
         Component.onCompleted: {
@@ -59,9 +44,9 @@ Item {
         property real sourceEdgeMargin: -(implicitHeight + root.visualMargin)
         PropertyAnimation {
             id: openAnim
-            target: borderRect
+            target: panelContent
             property: "sourceEdgeMargin"
-            to: 0
+            to: root.visualMargin
             duration: 200
             easing.type: Easing.BezierSpline
             easing.bezierCurve: Looks.transition.easing.bezierCurve.easeIn
@@ -69,7 +54,7 @@ Item {
         SequentialAnimation {
             id: closeAnim
             PropertyAnimation {
-                target: borderRect
+                target: panelContent
                 property: "sourceEdgeMargin"
                 to: -(implicitHeight + root.visualMargin)
                 duration: root.closeAnimDuration
@@ -82,23 +67,8 @@ Item {
                 }
             }
         }
-    }
+        implicitWidth: root.contentItem.implicitWidth
-
+        implicitHeight: root.contentItem.implicitHeight
-    Item {
-        id: contentArea
-        z: 0
-        anchors.fill: borderRect
-        anchors.margins: borderRect.border.width
-        implicitWidth: contentItem.implicitWidth
-        implicitHeight: contentItem.implicitHeight
-        layer.enabled: true
-        layer.effect: OpacityMask {
-            maskSource: Rectangle {
-                width: contentArea.width
-                height: contentArea.height
-                radius: borderRect.radius - borderRect.border.width
-            }
-        }
         children: [root.contentItem]
-    }
+    }    
 }

dots/.config/quickshell/ii/modules/waffle/looks/WPane.qml

@@ -0,0 +1,58 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.waffle.looks
+
+Item {
+    id: root
+    required property Item contentItem
+    property real radius: Looks.radius.large
+    property alias border: borderRect
+    property alias borderColor: borderRect.border.color
+
+    implicitWidth: contentItem.implicitWidth
+    implicitHeight: contentItem.implicitHeight
+
+    WRectangularShadow {
+        target: borderRect
+    }
+
+    Rectangle {
+        id: borderRect
+        z: 1
+
+        color: "transparent"
+        radius: root.radius
+        border.color: Looks.colors.bg2Border
+        border.width: 1
+        implicitWidth: contentItem.implicitWidth + border.width * 2
+        implicitHeight: contentItem.implicitHeight + border.width * 2
+        anchors.fill: contentRect
+        anchors.margins: -border.width
+    }
+
+    Rectangle {
+        id: contentRect
+        anchors.centerIn: parent
+        z: 0
+        
+        color: Looks.colors.bgPanelFooterBase
+        implicitWidth: contentItem.implicitWidth
+        implicitHeight: contentItem.implicitHeight
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: Rectangle {
+                id: contentAreaMask
+                width: contentRect.width
+                height: contentRect.height
+                radius: root.radius - borderRect.border.width
+            }
+        }
+        children: [root.contentItem]
+    }
+}

dots/.config/quickshell/ii/modules/waffle/looks/WStackView.qml

@@ -11,11 +11,7 @@ StackView {
     property list<real> fadeBezierCurve: Looks.transition.easing.bezierCurve.easeInOut
     clip: true
 
-    property alias color: background.color
+    background: null
-    background: Rectangle {
-        id: background
-        color: Looks.colors.bgPanelFooterBase
-    }
 
     pushEnter: Transition {
         XAnimator {

dots/.config/quickshell/ii/modules/waffle/onScreenDisplay/OSDValue.qml

@@ -13,7 +13,6 @@ WBarAttachedPanelContent {
     required property string iconName
     property real value
     property bool showNumber: true
-    borderColor: Looks.colors.ambientShadow
 
     property Timer timer: Timer {
         id: autoCloseTimer
@@ -21,44 +20,48 @@ WBarAttachedPanelContent {
         interval: Config.options.osd.timeout
         repeat: false
         onTriggered: {
-            root.close()
+            root.close();
         }
     }
 
-    contentItem: Rectangle {
+    contentItem: WPane {
         anchors.centerIn: parent
-        color: Looks.colors.bg1Base
+        borderColor: Looks.colors.ambientShadow
-        radius: Looks.radius.medium
-        implicitWidth: root.showNumber ? 192 : 170
-        implicitHeight: 46
-        
-        RowLayout {
-            id: contentRow
-            anchors.fill: parent
-            anchors.margins: 12
 
-            spacing: 12
+        contentItem: Item {
+            // color: Looks.colors.bg1Base
+            // radius: Looks.radius.medium
+            implicitWidth: root.showNumber ? 192 : 170
+            implicitHeight: 46
 
-            FluentIcon {
+            RowLayout {
-                Layout.alignment: Qt.AlignVCenter
+                id: contentRow
-                icon: root.iconName
+                anchors.fill: parent
-                implicitSize: 18
+                anchors.margins: 12
-            }
 
-            WProgressBar {
+                spacing: 12
-                id: progressBar
-                value: root.value
-                Layout.fillWidth: true
-                Layout.alignment: Qt.AlignVCenter
-                Layout.rightMargin: root.showNumber ? 0 : 3
-            }
 
-            WTextWithFixedWidth {
+                FluentIcon {
-                visible: root.showNumber
+                    Layout.alignment: Qt.AlignVCenter
-                text: Math.round(root.value * 100)
+                    icon: root.iconName
-                // longestText: "100"
+                    implicitSize: 18
-                implicitWidth: 16
+                }
-                horizontalAlignment: Text.AlignHCenter
+
+                WProgressBar {
+                    id: progressBar
+                    value: root.value
+                    Layout.fillWidth: true
+                    Layout.alignment: Qt.AlignVCenter
+                    Layout.rightMargin: root.showNumber ? 0 : 3
+                }
+
+                WTextWithFixedWidth {
+                    visible: root.showNumber
+                    text: Math.round(root.value * 100)
+                    // longestText: "100"
+                    implicitWidth: 16
+                    horizontalAlignment: Text.AlignHCenter
+                }
             }
         }
     }

dots/.config/quickshell/ii/modules/waffle/onScreenDisplay/WaffleOSD.qml

@@ -104,13 +104,12 @@ Scope {
                 item: osdIndicatorLoader
             }
 
-            implicitWidth: osdIndicatorLoader.implicitWidth + osdIndicatorLoader.item.visualMargin * 2
+            implicitWidth: osdIndicatorLoader.implicitWidth
-            implicitHeight: osdIndicatorLoader.implicitHeight + osdIndicatorLoader.item.visualMargin * 2
+            implicitHeight: osdIndicatorLoader.implicitHeight
 
             Loader {
                 id: osdIndicatorLoader
                 anchors.fill: parent
-                anchors.margins: item.visualMargin
                 source: root.indicators.find(i => i.id === root.currentIndicator)?.sourceUrl
 
                 Connections {

dots/.config/quickshell/ii/services/MprisController.qml

@@ -9,12 +9,14 @@ import QtQuick
 import Quickshell
 import Quickshell.Io
 import Quickshell.Services.Mpris
+import qs.modules.common
 
 /**
  * A service that provides easy access to the active Mpris player.
  */
 Singleton {
 	id: root;
+	property list<MprisPlayer> players: Mpris.players.values.filter(player => isRealPlayer(player));
 	property MprisPlayer trackedPlayer: null;
 	property MprisPlayer activePlayer: trackedPlayer ?? Mpris.players.values[0] ?? null;
 	signal trackChanged(reverse: bool);
@@ -23,6 +25,29 @@ Singleton {
 
 	property var activeTrack;
 
+	property bool hasPlasmaIntegration: false
+    Process {
+        id: plasmaIntegrationAvailabilityCheckProc
+        running: true
+        command: ["bash", "-c", "command -v plasma-browser-integration-host"]
+        onExited: (exitCode, exitStatus) => {
+            root.hasPlasmaIntegration = (exitCode === 0);
+        }
+    }
+	function isRealPlayer(player) {
+        if (!Config.options.media.filterDuplicatePlayers) {
+            return true;
+        }
+        return (
+            // Remove unecessary native buses from browsers if there's plasma integration
+            !(hasPlasmaIntegration && player.dbusName.startsWith('org.mpris.MediaPlayer2.firefox')) && !(hasPlasmaIntegration && player.dbusName.startsWith('org.mpris.MediaPlayer2.chromium')) &&
+            // playerctld just copies other buses and we don't need duplicates
+            !player.dbusName?.startsWith('org.mpris.MediaPlayer2.playerctld') &&
+            // Non-instance mpd bus
+            !(player.dbusName?.endsWith('.mpd') && !player.dbusName.endsWith('MediaPlayer2.mpd')));
+    }
+
+	// Original stuff from fox below
 	Instantiator {
 		model: Mpris.players;