Per-app volume in the statusbar mixer

[haydn-j-evans]

Been fighting an annoying thing with the statusbar's volume module: it only ever shows/controls the default sink's master volume. That's fine for system sounds, but useless once an app's stream ends up pinned to a different sink than the current default. Brave (and Chromium apps generally) do this constantly for me, so the master slider just stops doing anything audible for the browser while notification sounds etc. keep tracking it fine.

Ended up rewriting VolumeModule.qml so clicking the icon opens a small popup instead of just adjusting master: a master row on top, then one row per currently-playing app (own volume/mute each, independent of whatever sink it's actually attached to), and a link at the bottom to open pavucontrol for anything more advanced (input devices, per-device routing).

Not proposing this gets merged as-is — it's tailored to my setup and hasn't been tested outside it — but posting the full file in case the sink-mismatch problem is familiar to anyone else and it's useful as a starting point.

import Quickshell
import Quickshell.Hyprland
import Quickshell.Services.Pipewire
import QtQuick
import QtQuick.Controls
import QtQuick.Effects
import QtQuick.Layouts
import qs.CustomTheme

// Shows the default output sink's volume next to a speaker icon.
//   • left click / Return   → open the per-app mixer popup
//   • right click           → mute (volume 0); right click again restores it
//   • mouse wheel (hovered)  → raise/lower the volume in 5% steps
//   • Up / Down arrows (keyboard-focused) → raise/lower the volume
// Volume and mute come from the Pipewire service; PwObjectTracker keeps the
// sink's and each visible stream's audio properties bound while this module
// is alive.
Rectangle {
    id: volume

    // The system default output sink (speakers/headphones).
    readonly property PwNode sink: Pipewire.defaultAudioSink
    // The sink's audio binding is only valid once the node is ready and is an
    // audio node; guard every access against it being null.
    readonly property bool ready: sink !== null && sink.ready && sink.audio !== null
    // Current volume as a 0.0–1.0 fraction and its rounded percentage.
    readonly property real level: ready ? sink.audio.volume : 0
    readonly property bool muted: ready ? sink.audio.muted : false
    readonly property int percent: muted ? 0 : Math.round(level * 100)

    // How much one wheel notch / arrow press changes the volume.
    readonly property real stepSize: 0.05

    // Set by the keyboard navigation in StatusbarWindow.
    property bool focused: false

    // Whether the per-app mixer popup is open.
    property bool menuOpen: false

    // Every currently-playing output stream (one per app, e.g. Brave, Spotify)
    // with a usable audio binding. Filters Pipewire's full node list down to
    // real playback streams, so master-only controls (like the icon above)
    // aren't confused with recording/monitor streams. Recomputes whenever a
    // stream appears/disappears.
    //
    // AudioOutStream is a composite flag (Audio | Stream | Sink), not a
    // dedicated bit, and it shares its Audio/Stream bits with AudioInStream
    // (Audio | Stream | Source) - so a plain `& !== 0` matches input-direction
    // streams too (e.g. pavucontrol's per-device monitor/meter captures,
    // which reappear whenever a stream's sink is switched). Requiring the
    // masked bits equal AudioOutStream exactly (a superset check, so a duplex
    // stream carrying extra bits still passes) is what actually means
    // "this is a playback stream."
    //
    // Deliberately does NOT require node.ready here: a stream only becomes
    // "ready" once something is already tracking it via PwObjectTracker, so
    // gating inclusion in that same tracker's object list on readiness would
    // deadlock - the node could never reach ready in the first place. audio
    // !== null is enough to know the volume/muted binding is usable (mirrors
    // how the master sink above is tracked unconditionally and only gates on
    // .ready when *reading* its properties, not when deciding to track it).
    readonly property var streamNodes: {
        const out = []
        const nodes = Pipewire.nodes.values
        for (let i = 0; i < nodes.length; i++) {
            const n = nodes[i]
            if (n.isStream && (n.type & PwNodeType.AudioOutStream) === PwNodeType.AudioOutStream
                    && n.audio !== null)
                out.push(n)
        }
        return out
    }

    // Keep the sink's and every visible stream's audio (volume/muted)
    // properties live and writable.
    PwObjectTracker {
        objects: (sink !== null ? [sink] : []).concat(volume.streamNodes)
    }

    // Set the volume to an absolute fraction, unmuting first so a scroll/arrow
    // while muted brings the sound back.
    function setVolume(v: real): void {
        if (!ready)
            return
        sink.audio.muted = false
        sink.audio.volume = Math.max(0, Math.min(1, v))
    }

    // Raise (dir > 0) or lower (dir < 0) the volume by one step. Called by the
    // mouse wheel and by the Up/Down keys when this module is keyboard-focused.
    function step(dir: int): void {
        setVolume(level + dir * stepSize)
    }

    // Right click: toggle mute. Pipewire keeps the volume value while muted, so
    // un-muting restores exactly the level from before.
    function toggleMute(): void {
        if (ready)
            sink.audio.muted = !sink.audio.muted
    }

    // Best label for a stream: the app name Pipewire was told, falling back to
    // whatever the node itself reports.
    function streamLabel(node): string {
        return node.properties["application.name"] || node.description || node.name
    }

    // Left click / keyboard Return: open the per-app mixer popup.
    function activate(): void {
        volume.menuOpen = !volume.menuOpen
    }

    // "Advanced" row in the popup: full mixer (input devices, per-device
    // routing, etc.) for anything the popup doesn't cover.
    function openMixer(): void {
        volume.menuOpen = false
        Quickshell.execDetached(["pavucontrol"])
    }

    readonly property bool active: mouseArea.containsMouse || volume.focused || volume.menuOpen

    implicitWidth: row.implicitWidth + 6
    implicitHeight: 30
    radius: 15

    // Same accent-filled highlight as the other modules on hover/selection.
    color: active ? Theme.primary : "transparent"

    // Fade the accent circle in/out like BarButton does.
    Behavior on color {
        ColorAnimation { duration: 500; easing.type: Easing.OutQuint }
    }

    RowLayout {
        id: row
        anchors.centerIn: parent
        spacing: 4

        Image {
            Layout.alignment: Qt.AlignVCenter
            source: volume.percent <= 0
                ? "../shared/icons/volume-muted.svg"
                : "../shared/icons/volume.svg"
            sourceSize.width: 18
            sourceSize.height: 18
            width: 18
            height: 18
            fillMode: Image.PreserveAspectFit
            layer.enabled: true
            layer.effect: MultiEffect {
                colorization: 1.0
                colorizationColor: volume.active ? Theme.background : Theme.primary
                Behavior on colorizationColor {
                    ColorAnimation { duration: 500; easing.type: Easing.OutQuint }
                }
            }
        }

        Text {
            Layout.alignment: Qt.AlignVCenter
            text: volume.percent + "%"
            color: volume.active ? Theme.background : Theme.primary
            font.family: Theme.fontFamily
            font.pixelSize: 14
            font.bold: true
            Behavior on color {
                ColorAnimation { duration: 500; easing.type: Easing.OutQuint }
            }
        }
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        cursorShape: Qt.PointingHandCursor
        onClicked: mouse => {
            if (mouse.button === Qt.RightButton)
                volume.toggleMute()
            else
                volume.activate()
        }
        onWheel: wheel => volume.step(wheel.angleDelta.y > 0 ? 1 : -1)
    }

    // ==========================================
    // MIXER POPUP
    // ==========================================
    // Anchored just below the icon, same primitive as PowerProfileModule's
    // switch popup. A master row controls the sink (same value as the icon
    // above); one row per playing app follows below, each independent of
    // which sink it's actually attached to - useful when an app's stream
    // ends up pinned to a different device than the system default (e.g.
    // Chromium-based browsers, which don't always follow default-sink
    // changes) and the master slider stops doing anything audible for it.
    PopupWindow {
        id: popup
        anchor.item: volume
        anchor.edges: Edges.Bottom
        anchor.gravity: Edges.Bottom
        anchor.margins.top: 10
        anchor.rect.x: volume.width / 2 - popup.width / 2

        visible: volume.menuOpen

        HyprlandFocusGrab {
            windows: [popup]
            active: volume.menuOpen
            onCleared: volume.menuOpen = false
        }

        implicitWidth: 260
        implicitHeight: menuColumn.implicitHeight + 16
        color: "transparent"

        FocusScope {
            id: keyScope
            anchors.fill: parent
            focus: true
            Keys.onEscapePressed: volume.menuOpen = false
        }

        onVisibleChanged: {
            if (visible)
                keyScope.forceActiveFocus()
        }

        Rectangle {
            anchors.fill: parent
            radius: 8
            color: Theme.background
            border.color: Theme.primary
            border.width: 1
        }

        ColumnLayout {
            id: menuColumn
            anchors.fill: parent
            anchors.margins: 12
            spacing: 10

            // MASTER ROW
            RowLayout {
                Layout.fillWidth: true
                spacing: 10

                Text {
                    text: "Master"
                    color: Theme.primary
                    font.family: Theme.fontFamily
                    font.pixelSize: 13
                    font.bold: true
                    Layout.preferredWidth: 70
                }

                Slider {
                    id: masterSlider
                    Layout.fillWidth: true
                    from: 0
                    to: 1
                    value: volume.level
                    onMoved: volume.setVolume(value)

                    background: Rectangle {
                        x: masterSlider.leftPadding
                        y: masterSlider.topPadding + masterSlider.availableHeight / 2 - height / 2
                        implicitHeight: 6
                        width: masterSlider.availableWidth
                        height: implicitHeight
                        radius: 3
                        color: Theme.background
                        border.color: Theme.primary
                        border.width: 1

                        Rectangle {
                            width: masterSlider.visualPosition * parent.width
                            height: parent.height
                            color: Theme.primary
                            radius: 3
                        }
                    }

                    handle: Rectangle {
                        x: masterSlider.leftPadding + masterSlider.visualPosition * (masterSlider.availableWidth - width)
                        y: masterSlider.topPadding + masterSlider.availableHeight / 2 - height / 2
                        implicitWidth: 14
                        implicitHeight: 14
                        radius: 7
                        color: masterSlider.pressed ? Theme.background : Theme.primary
                        border.color: Theme.primary
                        border.width: 1
                    }
                }

                Text {
                    text: Math.round(volume.level * 100) + "%"
                    color: Theme.primary
                    font.family: Theme.fontFamily
                    font.pixelSize: 12
                    Layout.preferredWidth: 30
                }
            }

            // Divider between master and per-app rows.
            Rectangle {
                Layout.fillWidth: true
                Layout.topMargin: 2
                Layout.bottomMargin: 2
                implicitHeight: 1
                color: Theme.primary
                opacity: 0.3
            }

            // PER-APP ROWS
            Text {
                visible: volume.streamNodes.length === 0
                text: "Nothing is playing audio"
                color: Theme.primary
                opacity: 0.6
                font.family: Theme.fontFamily
                font.pixelSize: 12
            }

            Repeater {
                model: volume.streamNodes
                delegate: RowLayout {
                    required property var modelData
                    Layout.fillWidth: true
                    spacing: 10

                    Text {
                        text: volume.streamLabel(modelData)
                        color: Theme.primary
                        font.family: Theme.fontFamily
                        font.pixelSize: 13
                        elide: Text.ElideRight
                        Layout.preferredWidth: 70
                    }

                    Slider {
                        id: appSlider
                        Layout.fillWidth: true
                        from: 0
                        to: 1
                        value: modelData.audio.volume
                        onMoved: {
                            modelData.audio.muted = false
                            modelData.audio.volume = value
                        }

                        background: Rectangle {
                            x: appSlider.leftPadding
                            y: appSlider.topPadding + appSlider.availableHeight / 2 - height / 2
                            implicitHeight: 6
                            width: appSlider.availableWidth
                            height: implicitHeight
                            radius: 3
                            color: Theme.background
                            border.color: Theme.primary
                            border.width: 1

                            Rectangle {
                                width: appSlider.visualPosition * parent.width
                                height: parent.height
                                color: Theme.primary
                                radius: 3
                            }
                        }

                        handle: Rectangle {
                            x: appSlider.leftPadding + appSlider.visualPosition * (appSlider.availableWidth - width)
                            y: appSlider.topPadding + appSlider.availableHeight / 2 - height / 2
                            implicitWidth: 14
                            implicitHeight: 14
                            radius: 7
                            color: appSlider.pressed ? Theme.background : Theme.primary
                            border.color: Theme.primary
                            border.width: 1
                        }
                    }

                    Text {
                        text: modelData.audio.muted ? "muted" : Math.round(modelData.audio.volume * 100) + "%"
                        color: Theme.primary
                        font.family: Theme.fontFamily
                        font.pixelSize: 12
                        Layout.preferredWidth: 36
                    }

                    MouseArea {
                        Layout.preferredWidth: 16
                        Layout.preferredHeight: 16
                        cursorShape: Qt.PointingHandCursor
                        onClicked: modelData.audio.muted = !modelData.audio.muted

                        Image {
                            anchors.fill: parent
                            source: modelData.audio.muted
                                ? "../shared/icons/volume-muted.svg"
                                : "../shared/icons/volume.svg"
                            fillMode: Image.PreserveAspectFit
                            layer.enabled: true
                            layer.effect: MultiEffect {
                                colorization: 1.0
                                colorizationColor: Theme.primary
                            }
                        }
                    }
                }
            }

            // Divider before the advanced-mixer link.
            Rectangle {
                Layout.fillWidth: true
                Layout.topMargin: 2
                Layout.bottomMargin: 2
                implicitHeight: 1
                color: Theme.primary
                opacity: 0.3
            }

            Rectangle {
                Layout.fillWidth: true
                implicitHeight: 28
                radius: 4
                color: advancedMouse.containsMouse ? Theme.primary : "transparent"
                Behavior on color {
                    ColorAnimation { duration: 200; easing.type: Easing.OutQuint }
                }

                Text {
                    anchors.centerIn: parent
                    text: "Open full mixer…"
                    color: advancedMouse.containsMouse ? Theme.background : Theme.primary
                    font.family: Theme.fontFamily
                    font.pixelSize: 12
                }

                MouseArea {
                    id: advancedMouse
                    anchors.fill: parent
                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor
                    onClicked: volume.openMixer()
                }
            }
        }
    }
}

[haydn-j-evans]

looks like this btw -