feat: add audio volume slider

1 files changed, 22 insertions, 0 deletions

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>