From e939c8e84f7cf1053543806f4f4d8aa1aa445667 Mon Sep 17 00:00:00 2001
From: Nydragon <contact@ccnlc.eu>
Date: Sat, 24 Aug 2024 23:04:56 +0200
Subject: [PATCH] feat: add mouseregion for audio scrolling and volume icon

Volume icon is temporary and from flaticon
---
 src/AudioOutput.qml |  70 ++++++++++++++++++++++++++++++++------------
 src/speaker.png     | Bin 0 -> 2549 bytes
 2 files changed, 51 insertions(+), 19 deletions(-)
 create mode 100644 src/speaker.png

diff --git a/src/AudioOutput.qml b/src/AudioOutput.qml
index c22f163..fc669ef 100644
--- a/src/AudioOutput.qml
+++ b/src/AudioOutput.qml
@@ -9,33 +9,65 @@ import Quickshell.Services.Pipewire
 // - adjust sink & source volume
 // - mute sinks & sources
 
-MouseArea {
+// BUG: When controlling audio from outside of QS, the change is reflected, but if audio in pavucontrol is not 100%
+// QS can only change from 0 to whatever is set in pavucontrol
+Rectangle {
+    id: test
+    width: parent.width
+    height: (icon.height + slider.height) * 1.5
+    anchors.bottomMargin: 5
+    anchors.topMargin: 5
+    border.color: "black"
+    border.width: 2
+    radius: 5
+
     property PwNode sink: Pipewire.defaultAudioSink
 
-    PwObjectTracker {
-        objects: [sink]
-    }
+    MouseArea {
+        id: audio_area
 
-    ColumnLayout {
-        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.fill: parent
 
-        Text {
-            id: label
-            text: `${Math.round(sink.audio.volume * 100)}%`
+        onClicked: {}
 
-            Layout.alignment: Qt.AlignHCenter
+        onWheel: {
+            const newVal = sink.audio.volume + (wheel.angleDelta.y / 12000);
+            sink.audio.volume = newVal < 1.0 ? (newVal > 0 ? newVal : 0.0) : 1.0;
         }
-        Slider {
-            id: slider
 
-            // BUG: For some reason need to hardcode the width as it is overflowing otherwise
-            Layout.maximumWidth: 25
+        PwObjectTracker {
+            objects: [sink]
+        }
 
-            value: sink.audio.volume
-            stepSize: 0.01
-            wheelEnabled: true
-            handle: Rectangle {}
-            onMoved: sink.audio.volume = value
+        Rectangle {
+            width: parent.width
+            color: "#00000000"
+
+            height: icon.height + slider.height
+            anchors.verticalCenter: parent.verticalCenter
+
+            // TODO: Make icon depend on sink type and volume level
+            Image {
+                id: icon
+                source: "speaker.png"
+                width: parent.width * (2 / 3)
+
+                anchors.horizontalCenter: parent.horizontalCenter
+                fillMode: Image.PreserveAspectFit
+            }
+            Slider {
+                id: slider
+                anchors.top: icon.bottom
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                width: parent.width - 5
+
+                value: sink.audio.volume
+                stepSize: 0.01
+                wheelEnabled: true
+                handle: Rectangle {}
+                onMoved: sink.audio.volume = value
+            }
         }
     }
 }
diff --git a/src/speaker.png b/src/speaker.png
new file mode 100644
index 0000000000000000000000000000000000000000..450986dfc1192751910905c0e587ffca44272bb9
GIT binary patch
literal 2549
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

literal 0
HcmV?d00001