feat: add volume change OSD modules for audio sink and source and added Default Sink and Source to the Bar

config/Config.qml

@@ -1,8 +1,12 @@
 pragma Singleton
-import QtQuick 2.15
+import QtQuick
+import Quickshell.Hyprland
 import "./path"
 
 QtObject {
+    // Not really usable since it is not updating when changed
+    property var focusedMonitor: Hyprland.focusedMonitor
+
     readonly property string configDir: ConfigPath.path
     readonly property string wallpaperDir: WallpaperPath.wallpaperDir
 

modules/VolumeChangeOSD/SinkOSD.qml

@@ -0,0 +1,89 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Widgets
+import '../bar/states/Audio'
+import "../../config"
+
+LazyLoader {
+    active: Sink.volumeChanged
+    
+
+    PanelWindow {
+        // Since the panel's screen is unset, it will be picked by the compositor
+        // when the window is created. Most compositors pick the current active monitor.
+
+        anchors.bottom: true
+        margins.bottom: screen.height / 5
+        exclusiveZone: 0
+
+        implicitWidth: Config.focusedMonitor.width/5
+        implicitHeight: Config.focusedMonitor.height/40
+        color: "transparent"
+ 
+        // An empty click mask prevents the window from blocking mouse events.
+        mask: Region {}
+
+
+        Rectangle {
+            anchors.fill: parent
+            radius: height / 2
+            color: "transparent"
+
+            RowLayout {
+                anchors {
+                    fill: parent
+                    leftMargin: 10
+                    rightMargin: 15
+                }
+
+                Text {
+                    Layout.alignment: Qt.AlignLeft
+                    rightPadding: (text == "󰕿" || text == "󰸈" ? font.pixelSize/4 : text == "󰖀" ? font.pixelSize/6 : 0)
+                    leftPadding: (text == "󰕿" || text == "󰸈" ? -font.pixelSize/15 : 0)
+                   
+                    text: (
+                        Sink.mute ? "󰝟" : 
+                        Sink.volume > 60 ? "󰕾" :
+                        Sink.volume > 30 ? "󰖀" :
+                        Sink.volume > 0 ? "󰕿" :
+                        "󰸈")
+                    font.pixelSize: 30
+
+                    color: Colors.primary
+                }
+
+                Rectangle {
+                    // Stretches to fill all left-over space
+                    Layout.fillWidth: true
+
+                    implicitHeight: 10
+                    radius: 20
+                    color: "#50ffffff"
+
+                    Rectangle {
+                        anchors {
+                            left: parent.left
+                            top: parent.top
+                            bottom: parent.bottom
+                        }
+
+                        implicitWidth: parent.width * (Sink.volume/100/1.5 ?? 0)
+                        radius: parent.radius
+
+                        color: Sink.volume/100 > 1 ? Colors.tertiary : Colors.primary
+                    }
+                }
+
+                Text {
+                    Layout.alignment: Qt.AlignRight
+                   
+                    text: Sink.volume + "%"
+                    font.pixelSize: 30
+
+                    color: Colors.primary
+                }
+            }
+        }
+    }
+}

modules/VolumeChangeOSD/SourceOSD.qml

@@ -0,0 +1,81 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Widgets
+import '../bar/states/Audio'
+import "../../config"
+
+LazyLoader {
+    active: Source.volumeChanged
+    
+
+    PanelWindow {
+        // Since the panel's screen is unset, it will be picked by the compositor
+        // when the window is created. Most compositors pick the current active monitor.
+
+        anchors.bottom: true
+        margins.bottom: screen.height / 5 - implicitHeight
+        exclusiveZone: 0
+
+        implicitWidth: Config.focusedMonitor.width/5
+        implicitHeight: Config.focusedMonitor.height/40
+        color: "transparent"
+
+        // An empty click mask prevents the window from blocking mouse events.
+        mask: Region {}
+
+
+        Rectangle {
+            anchors.fill: parent
+            radius: height / 2
+            color: "transparent"
+
+            RowLayout {
+                anchors {
+                    fill: parent
+                    leftMargin: 10
+                    rightMargin: 15
+                }
+
+                Text {
+                    Layout.alignment: Qt.AlignVCenter
+
+                    text: Source.mute ? "󰍭" : "󰍬"
+                    font.pixelSize: 30
+
+                    color: Colors.primary
+                }
+
+                Rectangle {
+                    // Stretches to fill all left-over space
+                    Layout.fillWidth: true
+
+                    implicitHeight: 10
+                    radius: 20
+                    color: "#50ffffff"
+
+                    Rectangle {
+                        anchors {
+                            left: parent.left
+                            top: parent.top
+                            bottom: parent.bottom
+                        }
+                        implicitWidth: parent.width * (Source.volume/100 ?? 0)
+                        radius: parent.radius
+
+                        color: Colors.primary
+                    }
+                }
+
+                Text {
+                    Layout.alignment: Qt.AlignRight
+                   
+                    text: Source.volume + "%"
+                    font.pixelSize: 30
+
+                    color: Colors.primary
+                }
+            }
+        }
+    }
+}

modules/bar/Bar.qml

@@ -68,6 +68,8 @@ PanelWindow {
 
             // TODO: Add bluetooth, network, audio, power, maybe HW monitor
             Tray{}
+            // AudioSource{}
+            AudioSink{}
             Battery{}
             Network{}
             IdleButton { panelWindow: panel }

modules/bar/states/Audio/DefaultSinkState.qml

@@ -0,0 +1,36 @@
+pragma Singleton
+
+import QtQuick
+import Quickshell
+import Quickshell.Services.Pipewire
+
+Item {
+    id: root
+
+    PwObjectTracker {
+        objects: [ Pipewire.defaultAudioSink ]
+    }
+
+    property var audioSink: Pipewire.defaultAudioSink
+
+    property bool exists: audioSink != null
+    property bool mute: audioSink?.audio?.muted ?? false
+    property real volume: Math.round((audioSink?.audio?.volume ?? 0) * 1000) / 10
+
+    property bool volumeChanged: false
+
+	Connections {
+		target: audioSink?.audio
+
+		function onVolumeChanged() {
+			root.volumeChanged = true;
+			hideTimer.restart();
+		}
+	}
+
+    Timer {
+        id: hideTimer
+        interval: 1000
+        onTriggered: root.volumeChanged = false
+    }
+}

modules/bar/states/Audio/DefaultSourceState.qml

@@ -0,0 +1,36 @@
+pragma Singleton
+
+import QtQuick
+import Quickshell
+import Quickshell.Services.Pipewire
+
+Item {
+    id: root
+
+    PwObjectTracker {
+        objects: [ Pipewire.defaultAudioSource ]
+    }
+
+    property var audioSource: Pipewire.defaultAudioSource
+
+    property bool exists: audioSource != null
+    property bool mute: audioSource?.audio?.muted ?? false
+    property real volume: Math.round((audioSource?.audio?.volume ?? 0) * 1000) / 10
+
+    property bool volumeChanged: false
+
+	Connections {
+		target: audioSource?.audio
+
+		function onVolumeChanged() {
+			root.volumeChanged = true;
+			hideTimer.restart();
+		}
+	}
+
+    Timer {
+        id: hideTimer
+        interval: 1000
+        onTriggered: root.volumeChanged = false
+    }
+}

modules/bar/states/Audio/qmldir

@@ -0,0 +1,2 @@
+singleton Sink DefaultSinkState.qml
+singleton Source DefaultSourceState.qml

modules/bar/widgets/AudioSink.qml

@@ -0,0 +1,63 @@
+import QtQuick
+import "../../../config"
+import "../states/Audio"
+import Quickshell.Hyprland
+
+MouseArea {
+    id: audioButton
+
+    width: Math.max(audioRow.width + Config.spacing_fun(height)*3.5, height)
+    height: bar.height
+    hoverEnabled: true
+    cursorShape: Qt.PointingHandCursor
+    enabled: Sink.exists
+
+    Rectangle {
+        anchors.fill: parent
+        color: audioButton.containsMouse ? Colors.tertiary : Qt.alpha(Colors.tertiaryContainer, 0.25)
+        radius: Config.radius_fun(audioButton.height)
+        border.width: Config.border_width
+        border.color: audioButton.containsMouse ? Colors.tertiaryContainer_fg
+            : Colors.secondaryContainer_fg
+
+        Row {
+            id: audioRow
+            width: audioSourceText.width + audioSinkText.width + audioPercentageText.width + Config.spacing_fun(height)*2
+            height: parent.height
+            spacing: Config.spacing_fun(height)/2
+            anchors.centerIn: parent
+
+            Text {
+                id: audioSourceText
+                text: (Source.mute ? "󰍭" :
+                "󰍬")
+                anchors.verticalCenter: parent.verticalCenter
+                font.pixelSize: Config.iconSize(bar.height)
+                font.family: Config.font
+                color: audioButton.containsMouse ? Colors.tertiary_fg : Colors.primary
+                rightPadding: Config.spacing_fun(height)*1.5
+            }
+
+            Text {
+                id: audioSinkText
+                text: (Sink.mute ? "󰝟" : 
+                Sink.volume > 60 ? "󰕾" :
+                Sink.volume > 30 ? "󰖀" :
+                "󰕿")
+                anchors.verticalCenter: parent.verticalCenter
+                font.pixelSize: Config.iconSize(bar.height)
+                font.family: Config.font
+                color: audioButton.containsMouse ? Colors.tertiary_fg : Colors.primary
+            }
+
+            Text {
+                id: audioPercentageText
+                text: Sink.volume + "%"
+                anchors.verticalCenter: parent.verticalCenter
+                font.pixelSize: Config.iconSize(bar.height)
+                font.family: Config.font
+                color: audioButton.containsMouse ? Colors.tertiary_fg : Colors.primary
+            }
+        }
+    }
+}

modules/bar/widgets/AudioSource.qml

@@ -0,0 +1,32 @@
+import QtQuick
+import "../../../config"
+import "../states/Audio"
+
+MouseArea {
+    id: audioButton
+
+    width: Math.max(audioText.width + Config.spacing_fun(height)*2, height)
+    height: bar.height
+    hoverEnabled: true
+    cursorShape: Qt.PointingHandCursor
+    enabled: Sink.exists
+
+    Rectangle {
+        anchors.fill: parent
+        color: audioButton.containsMouse ? Colors.tertiary : Qt.alpha(Colors.tertiaryContainer, 0.25)
+        radius: Config.radius_fun(audioButton.height)
+        border.width: Config.border_width
+        border.color: audioButton.containsMouse ? Colors.tertiaryContainer_fg
+            : Colors.secondaryContainer_fg
+
+        Text {
+            id: audioText
+            text: (Source.mute ? "󰍭" :
+            "󰍬")
+            anchors.centerIn: parent
+            font.pixelSize: Config.iconSize(bar.height)
+            font.family: Config.font
+            color: audioButton.containsMouse ? Colors.tertiary_fg : Colors.primary
+        }
+    }
+}

shell.qml

@@ -8,6 +8,7 @@ import "./modules/wp"
 import "./modules/wlogout"
 import "./modules/jl"
 import "./modules/background"
+import "./modules/VolumeChangeOSD"
 
 ShellRoot {
     id: root
@@ -26,6 +27,10 @@ ShellRoot {
         id : wlLoader
     }
 
+    //VolumeChangeOSD
+    SourceOSD {}
+    SinkOSD {}
+
     // Background {}
 
     function openWlogout() {