audio volume slider

Modules/AudioWidget.qml

@@ -8,9 +8,18 @@ import qs.Modules
 
 Item {
     id: root
-    implicitWidth: 150
+    implicitWidth: expanded ? 300 : 150
     implicitHeight: 100
 
+    property bool expanded: false
+
+    Behavior on implicitWidth {
+        NumberAnimation {
+            duration: 300
+            easing.type: Easing.OutCubic
+        }
+    }
+
 	PwObjectTracker {
 		objects: [ Pipewire.defaultAudioSink ]
 	}
@@ -24,6 +33,7 @@ Item {
         radius: height / 2
         color: "#40000000"
 
+
         // Background circle
         Rectangle {
             anchors.centerIn: parent
@@ -35,6 +45,13 @@ Item {
             border.width: 0
         }
 
+        MouseArea {
+            id: mouseArea
+            anchors.fill: parent
+            hoverEnabled: true
+            cursorShape: Qt.PointingHandCursor
+            onEntered: root.expanded = true
+            onExited: root.expanded = false
             RowLayout {
                 anchors {
                     fill: parent
@@ -58,6 +75,7 @@ Item {
                     color: "#50ffffff"
 
                     Rectangle {
+                        id: sinkVolumeBar
                         anchors {
                             left: parent.left
                             top: parent.top
@@ -68,6 +86,61 @@ Item {
                         radius: parent.radius
                         color: "#ffffff"
                     }
+
+                    Rectangle {
+                        id: sinkGrabber
+                        visible: root.expanded
+                        opacity: root.expanded ? 1 : 0
+                        width: 12
+                        height: 12
+                        radius: width / 2
+                        color: sinkVolumeMouseArea.containsMouse || sinkVolumeMouseArea.pressed ? "#ffffff" : "#aaaaaa"
+                        border.color: "#40000000"
+                        border.width: 2
+                        anchors.verticalCenter: parent.verticalCenter
+                        x: sinkVolumeBar.width - width / 2
+
+                        Behavior on opacity {
+                            NumberAnimation {
+                                duration: 300
+                            }
+                        }
+
+                        Behavior on color {
+                            ColorAnimation {
+                                duration: 150
+                            }
+                        }
+                    }
+
+                    MouseArea {
+                        id: sinkVolumeMouseArea
+                        anchors.fill: parent
+                        anchors {
+                            leftMargin: 0
+                            rightMargin: 0
+                            topMargin: -10
+                            bottomMargin: -10
+                        }
+                        cursorShape: Qt.PointingHandCursor
+                        hoverEnabled: true
+
+                        onPressed: function(mouse) {
+                            var newVolume = Math.max(0, Math.min(1, mouse.x / width))
+                            if (Pipewire.defaultAudioSink?.audio) {
+                                Pipewire.defaultAudioSink.audio.volume = newVolume
+                            }
+                        }
+
+                        onPositionChanged: function(mouse) {
+                            if (pressed) {
+                                var newVolume = Math.max(0, Math.min(1, mouse.x / width))
+                                if (Pipewire.defaultAudioSink?.audio) {
+                                    Pipewire.defaultAudioSink.audio.volume = newVolume
+                                }
+                            }
+                        }
+                    }
                 }
 
                 Text {
@@ -86,6 +159,7 @@ Item {
                     color: "#50ffffff"
 
                     Rectangle {
+                        id: sourceVolumeBar
                         anchors {
                             left: parent.left
                             top: parent.top
@@ -96,13 +170,65 @@ Item {
                         radius: parent.radius
                         color: (Pipewire.defaultAudioSource?.audio.muted ?? false) ? "#ff4444" : "#ffffff"
                     }
+
+                    Rectangle {
+                        id: sourceGrabber
+                        visible: root.expanded
+                        opacity: root.expanded ? 1 : 0
+                        width: 12
+                        height: 12
+                        radius: width / 2
+                        color: sourceVolumeMouseArea.containsMouse || sourceVolumeMouseArea.pressed ? "#ffffff" : "#aaaaaa"
+                        border.color: "#40000000"
+                        border.width: 2
+                        anchors.verticalCenter: parent.verticalCenter
+                        x: sourceVolumeBar.width - width / 2
+
+                        Behavior on opacity {
+                            NumberAnimation {
+                                duration: 300
                             }
                         }
+
+                        Behavior on color {
+                            ColorAnimation {
+                                duration: 150
+                            }
+                        }
+                    }
+
                     MouseArea {
+                        id: sourceVolumeMouseArea
                         anchors.fill: parent
-            cursorShape: Qt.PointingHandCursor
+                        anchors {
-            onClicked: pavucontrolProc.running = true
+                            leftMargin: 0
+                            rightMargin: 0
+                            topMargin: -10
+                            bottomMargin: -10
                         }
+                        cursorShape: Qt.PointingHandCursor
+                        hoverEnabled: true
+
+                        onPressed: function(mouse) {
+                            var newVolume = Math.max(0, Math.min(1, mouse.x / width))
+                            if (Pipewire.defaultAudioSource?.audio) {
+                                Pipewire.defaultAudioSource.audio.volume = newVolume
+                            }
+                        }
+
+                        onPositionChanged: function(mouse) {
+                            if (pressed) {
+                                var newVolume = Math.max(0, Math.min(1, mouse.x / width))
+                                if (Pipewire.defaultAudioSource?.audio) {
+                                    Pipewire.defaultAudioSource.audio.volume = newVolume
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
         Process {
             id: pavucontrolProc
             command: ["pavucontrol"]