Quickbar/AudioWidget.qml

import QtQuick
import Quickshell
import Quickshell.Io
import Quickshell.Services.Pipewire
import Quickshell.Widgets
import qs.Common

Rectangle {
    id: audioWidget

    property string monitor: ""
    property string icon: " "
    property int volume: Math.round(Pipewire.defaultAudioSink.audio.volume * 100)

    implicitWidth: audioText.implicitWidth * 1.6
    implicitHeight: Theme.heightGaps
    color: Theme.backgroudColor
    radius: 25
    states: [
        State {
            name: "Mute"
            when: audioWidget.volume == 0

            PropertyChanges {
                audioWidget.icon: " "
            }

        },
        State {
            name: "low volume"
            when: audioWidget.volume <= 25

            PropertyChanges {
                audioWidget.icon: " "
            }

        },
        State {
            name: "high volume"
            when: audioWidget.volume > 25

            PropertyChanges {
                audioWidget.icon: " "
            }

        }
    ]

    PwObjectTracker {
        objects: [Pipewire.defaultAudioSink]
    }

    Connections {
        function onVolumeChanged() {
            audioWidget.volume = Math.round(Pipewire.defaultAudioSink.audio.volume * 100);
        }

        target: Pipewire.defaultAudioSink.audio
    }

    Text {
        id: audioText

        anchors.centerIn: parent
        text: audioWidget.icon + "  " + Math.round(Pipewire.defaultAudioSink.audio.volume * 100).toString() + "%"
        font.bold: true
        font.pixelSize: 14
        font.family: root.fontFamily
        color: Theme.textColor
    }

    Process {
        id: audioWidgetProcess

        running: false
        command: ["pavucontrol"]
    }

    Timer {
        id: audioTimer

        interval: 1000
        onTriggered: {
            audioPopUp.visible = true;
        }
    }

    PopupWindow {
        id: audioPopUp

        anchor.window: root
        anchor.rect.x: barArea.x
        anchor.rect.y: root.implicitHeight
        implicitWidth: 500
        implicitHeight: 500
        color: "transparent"

        Item {
            anchors.fill: parent

            Rectangle {
                anchors.fill: parent
                color: "teal"
                radius: 25
            }

            Text {
                anchors.centerIn: parent
                text: "opa"
            }

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onExited: {
                    audioPopUp.visible = false;
                }
            }

        }

        Behavior on visible {
            NumberAnimation {
                duration: 1000 // Matches your original duration
            }

        }

    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onClicked: {
            audioWidgetProcess.startDetached();
        }
        onWheel: (wheel) => {
            if (wheel.angleDelta.y > 0) {
                if (0)
                    return ;

                Pipewire.defaultAudioSink.audio.volume = (audioWidget.volume + 5) / 100;
            } else if (wheel.angleDelta.y < 0) {
                if (0)
                    return ;

                Pipewire.defaultAudioSink.audio.volume = (audioWidget.volume - 5) / 100;
            }
        }
        onEntered: {
            audioTimer.start();
        }
        onExited: {
            audioPopUp.visible = false;
            audioTimer.stop();
        }
    }

}