path: root/desktop/modules/sound/Osd.qml

// Copyright (C) 2026 Danilo M. <danix@danix.xyz>
//
// This program is free software; you can redistribute it and/or modify
// it under the terms of the GNU General Public License version 2 as
// published by the Free Software Foundation.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.

import Quickshell
import Quickshell.Wayland
import Quickshell.Services.Pipewire
import QtQuick
import QtQuick.Effects
import "../.."

// The transient on-screen display. Unchanged in behaviour from volume-osd,
// including its namespace, so the existing Hyprland blur rule still matches.
Scope {
    id: root

    required property var service

    // Milliseconds the OSD stays up after the last change.
    property int timeout: 1500

    property bool visibleNow: false

    // Hovering freezes the countdown so the transport buttons can be clicked;
    // leaving starts it again.
    property bool hovered: false

    Connections {
        target: root.service
        function onChanged() {
            root.visibleNow = true;
            hideTimer.restart();
        }
    }

    Timer {
        id: hideTimer
        running: root.visibleNow && !root.hovered
        interval: root.timeout
        onTriggered: root.visibleNow = false
    }

    PanelWindow {
        id: win

        visible: root.visibleNow

        readonly property PwNode node: root.service.active
        readonly property real volume: node?.audio?.volume ?? 0
        readonly property bool muted: node?.audio?.muted ?? false
        readonly property bool isInput: root.service.isInput

        // Bottom centre. Move the anchor to relocate.
        anchors.bottom: true
        margins.bottom: 120

        // Grows to fit the track row and the device line.
        implicitWidth: 360
        implicitHeight: Player.active ? 178 : 100
        color: "transparent"

        exclusionMode: ExclusionMode.Ignore
        WlrLayershell.layer: WlrLayer.Overlay
        WlrLayershell.namespace: "quickshell-volume-osd"
        // Still no keyboard focus: the transport buttons are pointer targets,
        // and the OSD must never take keys from the window being typed in.
        WlrLayershell.keyboardFocus: WlrKeyboardFocus.None

        Rectangle {
            anchors.fill: parent
            radius: 12
            // Translucent so the compositor's blur shows through. The frosting
            // itself is Hyprland's, applied by layerrule to this window's
            // namespace: see the README.
            color: Qt.alpha(Theme.base, 0.65)
            border.width: 1
            border.color: Qt.alpha(Theme.text, 0.12)

            // Album art as the whole background, lightly blurred, when the
            // player has any. It is opaque, so it hides the compositor's
            // frosting; without art the panel keeps the translucent look.
            // Inset by the border width so the border stays visible.
            //
            // Two images take turns so a track change crossfades: the new
            // cover loads into the hidden one and is brought to the front
            // only once decoded, so a slow server never fades through black.
            // No art, or a cover that fails to load, fades the whole layer
            // out to the plain panel rather than leaving a stale cover.
            Item {
                id: bgArt
                anchors.fill: parent
                anchors.margins: 1
                visible: false

                readonly property string want: Player.active ? Player.artUrl : ""
                property int front: 0
                property bool artOn: false

                onWantChanged: {
                    if (want === "") { artOn = false; return; }
                    const back = front === 0 ? artB : artA;
                    // Cleared first so a URL the back image already holds
                    // still loads and reports a status.
                    back.source = "";
                    back.source = want;
                }
                // The handler above only sees changes, not the value at load.
                Component.onCompleted: wantChanged()

                function loaded(img, idx) {
                    if (img.source != want) return;
                    if (img.status === Image.Ready) { front = idx; artOn = true; }
                    else if (img.status === Image.Error) artOn = false;
                }

                Image {
                    id: artA
                    anchors.fill: parent
                    cache: false
                    asynchronous: true
                    fillMode: Image.PreserveAspectCrop
                    opacity: bgArt.front === 0 ? 1 : 0
                    Behavior on opacity { NumberAnimation { duration: 300 } }
                    onStatusChanged: bgArt.loaded(this, 0)
                }
                Image {
                    id: artB
                    anchors.fill: parent
                    cache: false
                    asynchronous: true
                    fillMode: Image.PreserveAspectCrop
                    opacity: bgArt.front === 1 ? 1 : 0
                    Behavior on opacity { NumberAnimation { duration: 300 } }
                    onStatusChanged: bgArt.loaded(this, 1)
                }
            }

            // clip only cuts to the bounding box, so the corners come from a
            // mask the size of the art with the panel's radius.
            Rectangle {
                id: bgMask
                anchors.fill: bgArt
                radius: parent.radius - 1
                layer.enabled: true
                visible: false
            }

            // Everything drawn over the art fades with it.
            Item {
                anchors.fill: bgArt
                opacity: bgArt.artOn ? 1 : 0
                visible: opacity > 0
                Behavior on opacity { NumberAnimation { duration: 300 } }

                MultiEffect {
                    anchors.fill: parent
                    source: bgArt
                    autoPaddingEnabled: false
                    blurEnabled: true
                    blur: 0.5
                    maskEnabled: true
                    maskSource: bgMask
                    maskThresholdMin: 0.5
                    maskSpreadAtMin: 1.0
                }

                // Keeps text and the accent bar legible on a bright cover. A
                // sibling, not a child: nested inside the MultiEffect it did
                // not paint, and a light cover showed through at full
                // brightness.
                Rectangle {
                    anchors.fill: parent
                    radius: bgMask.radius
                    color: Qt.alpha(Theme.base, 0.82)
                }

                // Frost on the scrim, faked: a faint top-down sheen and fixed
                // grain. The art is opaque, so the compositor's frosting
                // cannot show here without costing the scrim its legibility.
                Rectangle {
                    anchors.fill: parent
                    radius: bgMask.radius
                    gradient: Gradient {
                        GradientStop { position: 0.0; color: Qt.alpha(Theme.text, 0.08) }
                        GradientStop { position: 0.6; color: "transparent" }
                    }
                }

                // ponytail: grain painted once with Canvas; a ShaderEffect
                // would animate or scale better but needs a compiled .qsb.
                Canvas {
                    anchors.fill: parent
                    layer.enabled: true
                    layer.effect: MultiEffect {
                        maskEnabled: true
                        maskSource: bgMask
                        maskThresholdMin: 0.5
                        maskSpreadAtMin: 1.0
                    }
                    onPaint: {
                        if (width <= 0 || height <= 0) return;
                        const ctx = getContext("2d");
                        const img = ctx.createImageData(width, height);
                        for (let i = 0; i < img.data.length; i += 4) {
                            const v = Math.random() * 255;
                            img.data[i] = v;
                            img.data[i + 1] = v;
                            img.data[i + 2] = v;
                            img.data[i + 3] = 14;
                        }
                        ctx.putImageData(img, 0, 0);
                    }
                }
            }

            HoverHandler {
                onHoveredChanged: root.hovered = hovered
            }

            Column {
                anchors.fill: parent
                anchors.margins: 16
                spacing: 12

                // A Loader keeps its last height after going inactive, so a
                // player vanishing (a closed browser tab) left 46px of empty
                // row on top and pushed the volume row out of the window.
                // Hidden, the Column skips it.
                Loader {
                    active: Player.active
                    visible: active
                    width: parent.width
                    sourceComponent: trackRow
                }

                Rectangle {
                    visible: Player.active
                    width: parent.width
                    height: 1
                    color: Qt.alpha(Theme.text, 0.1)
                }

                Row {
                    width: parent.width
                    spacing: 14

                    Text {
                        anchors.verticalCenter: parent.verticalCenter
                        width: 30
                        horizontalAlignment: Text.AlignHCenter
                        font.family: Theme.iconFamily
                        font.pixelSize: 24
                        color: win.muted ? Theme.red : Theme.accent
                        text: {
                            if (win.isInput) return win.muted ? "" : "";
                            if (win.muted || win.volume <= 0) return "";
                            return win.volume < 0.5 ? "" : "";
                        }
                    }

                    Column {
                        anchors.verticalCenter: parent.verticalCenter
                        width: parent.width - 30 - parent.spacing
                        spacing: 8

                        Item {
                            width: parent.width
                            height: label.implicitHeight

                            Text {
                                id: label
                                anchors.left: parent.left
                                font.family: Theme.fontFamily
                                font.pixelSize: Theme.fontSize
                                color: Theme.subtext
                                text: win.isInput ? "Input" : "Output"
                            }

                            Text {
                                anchors.right: parent.right
                                font.family: Theme.fontFamily
                                font.pixelSize: Theme.fontSize
                                color: Theme.text
                                text: win.muted ? "muted" : Math.round(win.volume * 100) + "%"
                            }
                        }

                        Rectangle {
                            width: parent.width
                            height: 6
                            radius: 3
                            color: Theme.surface

                            Rectangle {
                                height: parent.height
                                radius: parent.radius
                                // Volume can exceed 1.0; the bar stops at full.
                                width: parent.width * Math.min(win.volume, 1)
                                color: win.muted ? Theme.red : Theme.accent
                                opacity: win.muted ? 0.5 : 1
                                Behavior on width { NumberAnimation { duration: 100 } }
                            }
                        }

                        // The device the active node represents. Same fallback
                        // order as SoundPage.devLabel.
                        Text {
                            width: parent.width
                            elide: Text.ElideRight
                            text: win.node?.description || win.node?.nickname || win.node?.name || ""
                            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2 }
                            color: Theme.subtext
                        }
                    }
                }
            }
        }
    }

    Component {
        id: trackRow

        Row {
            id: trackLine
            // A Row sizes to its children, so the panel width has to be
            // pushed in: the text column below subtracts from it.
            width: parent ? parent.width : 0
            spacing: 12

            // Players that extract embedded art reuse one temp path, so the
            // source carries a per-track suffix and caching is off.
            Rectangle {
                width: 46; height: 46; radius: 6
                color: Qt.alpha(Theme.surface, 0.8)
                clip: true

                Image {
                    anchors.fill: parent
                    source: Player.artUrl
                    cache: false
                    asynchronous: true
                    fillMode: Image.PreserveAspectCrop
                    visible: status === Image.Ready
                }
                Text {
                    anchors.centerIn: parent
                    visible: Player.artUrl === "" || parent.children[0].status !== Image.Ready
                    text: ""
                    font { family: Theme.iconFamily; pixelSize: 20 }
                    color: Theme.overlay
                }
            }

            Column {
                anchors.verticalCenter: parent.verticalCenter
                // Whatever the art and transport buttons leave: a fixed width
                // here overflowed the panel and pushed `next` past its edge.
                width: trackLine.width - 46 - transport.width - 2 * trackLine.spacing
                spacing: 3

                Text {
                    width: parent.width
                    elide: Text.ElideRight
                    text: Player.title || "Nothing playing"
                    font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 1; bold: true }
                    color: Theme.text
                }
                Text {
                    width: parent.width
                    elide: Text.ElideRight
                    visible: Player.artist !== ""
                    text: Player.artist
                    font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 3 }
                    color: Theme.subtext
                }
            }

            Row {
                id: transport
                anchors.verticalCenter: parent.verticalCenter
                spacing: 2
                TransportButton {
                    glyph: ""
                    enabled: Player.current?.canGoPrevious ?? false
                    onClicked: Player.current?.previous()
                }
                TransportButton {
                    glyph: Player.playing ? "" : ""
                    enabled: Player.current?.canTogglePlaying ?? false
                    onClicked: Player.current?.togglePlaying()
                }
                TransportButton {
                    glyph: ""
                    enabled: Player.current?.canGoNext ?? false
                    onClicked: Player.current?.next()
                }
            }
        }
    }
}