1 files changed, 129 insertions, 0 deletions

diff --git a/accounts/gkleen@sif/shell/quickshell/VolumeOSD.qml b/accounts/gkleen@sif/shell/quickshell/VolumeOSD.qml
new file mode 100644
index 00000000..3a78d91b
--- /dev/null
+++ b/accounts/gkleen@sif/shell/quickshell/VolumeOSD.qml
@@ -0,0 +1,129 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Services.Pipewire
+import Quickshell.Widgets
+
+Scope {
+  id: root
+
+  property bool show: false
+  property bool inhibited: true
+
+  PwObjectTracker {
+    objects: [ Pipewire.defaultAudioSink ]
+  }
+
+  Connections {
+    target: Pipewire.defaultAudioSink?.audio
+
+    function onVolumeChanged() {
+      root.show = true;
+      hideTimer.reset();
+    }
+    function onMutedChanged() {
+      root.show = true;
+      hideTimer.reset();
+    }
+  }
+
+  onShowChanged: {
+    if (show)
+      hideTimer.restart();
+  }
+
+  Timer {
+    id: hideTimer
+    interval: 2000
+    onTriggered: root.show = false
+  }
+
+  Timer {
+    id: startInhibit
+    interval: 100
+    running: true
+    onTriggered: root.inhibited = false;
+  }
+
+  LazyLoader {
+    active: root.show && !root.inhibited
+
+    Variants {
+      model: Quickshell.screens
+
+      delegate: Scope {
+        id: screenScope
+
+        required property var modelData
+
+        PanelWindow {
+          id: window
+
+          screen: screenScope.modelData
+
+          anchors.top: true
+          margins.top: (screen.height - window.height) / 2
+          exclusiveZone: 0
+
+          implicitWidth: 400
+          implicitHeight: 50
+
+          mask: Region {}
+
+          color: "transparent"
+
+          Rectangle {
+            anchors.fill: parent
+            color: Qt.rgba(0, 0, 0, 0.75)
+          }
+
+          RowLayout {
+            id: layout
+
+            anchors.centerIn: parent
+
+            height: 50 - 8*2
+            width: 400 - 8*2
+
+            MaterialDesignIcon {
+              id: volumeIcon
+
+              implicitWidth: parent.height
+              implicitHeight: parent.height
+
+              icon: {
+                if (!Pipewire.defaultAudioSink || Pipewire.defaultAudioSink.audio.muted)
+                  return "volume-off";
+                if (Pipewire.defaultAudioSink.audio.volume <= 0.33)
+                  return "volume-low";
+                if (Pipewire.defaultAudioSink.audio.volume <= 0.67)
+                  return "volume-medium";
+                return "volume-high";
+              }
+            }
+
+            Rectangle {
+              Layout.fillWidth: true
+
+              implicitHeight: 10
+
+              color: "#50ffffff"
+
+              Rectangle {
+                anchors {
+                  left: parent.left
+                  top: parent.top
+                  bottom: parent.bottom
+                }
+
+                color: Pipewire.defaultAudioSink?.audio.muted ? "#70ffffff" : "white"
+
+                implicitWidth: parent.width * (Pipewire.defaultAudioSink?.audio.volume ?? 0)
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}