From 0e11b6f2cf1aab72ee0465078e3c914abb483c04 Mon Sep 17 00:00:00 2001
From: Mora Unie Youer <mora_unie_youer@riseup.net>
Date: Sun, 2 Mar 2025 21:24:03 +0300
Subject: feat: add audio volume slider

---
 style.scss         | 22 ++++++++++++++++++++++
 widget/bar/Bar.tsx | 22 ++++++++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/style.scss b/style.scss
index 8cd0453..6f80b2b 100644
--- a/style.scss
+++ b/style.scss
@@ -53,6 +53,28 @@ box.Tray {
   }
 }
 
+box.AudioVolume {
+  min-width: 140px;
+
+  scale {
+    min-height: 10px;
+  }
+
+  trough {
+    border-radius: 0;
+  }
+
+  highlight {
+    border-radius: 0;
+  }
+
+  slider {
+    border-radius: 7px;
+    min-width: 5px;
+    min-height: 5px;
+  }
+}
+
 
 window.Notifications {
   background-color: #000;
diff --git a/widget/bar/Bar.tsx b/widget/bar/Bar.tsx
index b057cdb..7492708 100644
--- a/widget/bar/Bar.tsx
+++ b/widget/bar/Bar.tsx
@@ -1,6 +1,7 @@
 import { App, Astal, Gtk, Gdk } from "astal/gtk4"
 import { bind, exec, GLib, Variable } from "astal"
 import AstalTray from "gi://AstalTray?version=0.1";
+import AstalWp from "gi://AstalWp?version=0.1";
 
 type NiriWorkspace = {
   id: number,
@@ -59,6 +60,26 @@ function Workspaces(args: WorkspacesArguments) {
 }
 
 
+function AudioVolume() {
+  const wireplumber = AstalWp.get_default()!;
+  const speaker = wireplumber.audio.get_default_speaker()!;
+
+  return <box cssClasses={["AudioVolume"]}>
+    <image iconName={bind(speaker, "volumeIcon")} />
+    {/* {bind(speaker, "volume")} */}
+    <slider
+      hexpand
+      onScroll={(_self, dx, dy) => speaker.volume += (dx + dy) * -0.05}
+      // BUG: this doesn't work due to value being updated immediately with dragging
+      // so that new value is never reached (slider "freezes")
+      // onChangeValue={({ value }) => new_volume = value}
+      // onKeyReleased={() => speaker.volume = new_volume}
+      value={bind(speaker, "volume")}
+    />
+  </box>;
+}
+
+
 function Tray() {
   // BUG: personally I have one fantom icon being along other tray icons
   // For now I don't have any ideas why this is happening
@@ -114,6 +135,7 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
       </box>
 
       <box halign={Gtk.Align.END}>
+        <AudioVolume />
         <Tray />
         <Time format="%I:%M:%S %p %Z" />
       </box>
-- 
cgit v1.2.3-70-g09d2