scroll volume

widget/WirePlumber.tsx

@@ -2,11 +2,57 @@ import { bind, derive } from "astal";
 import { Gdk } from "astal/gtk4";
 import AstalWp from "gi://AstalWp";
 
+const volIncr = 5 / 100;
+
 const WirePlumber = function () {
   const audio = AstalWp.get_default()?.audio!;
 
   const speakers = bind(audio, "speakers");
 
+  return speakers.as((speakers) => {
+    const defaultSpeaker = speakers.find((speaker) => speaker.is_default);
+    if (!defaultSpeaker) {
+      return <></>;
+    }
+    return (
+      <menubutton
+        onScroll={(_, __, dy) => {
+          defaultSpeaker.set_volume(
+            Math.min(defaultSpeaker.volume + -Math.sign(dy) * volIncr, 1.0),
+          );
+        }}
+      >
+        <label
+          cursor={Gdk.Cursor.new_from_name("pointer", null)}
+          label={bind(defaultSpeaker, "volume").as(
+            (volume) => `  ${Math.floor(volume * 100)}%`,
+          )}
+          cssClasses={["Button"]}
+          hasTooltip={true}
+          tooltipText={bind(defaultSpeaker, "description").as(
+            (description) => description,
+          )}
+        />
+        <popover cssClasses={["WirePlumberMenu"]}>
+          <box vertical>
+            {speakers.map((speaker) => (
+              <button
+                cssClasses={bind(speaker, "is_default").as((is_default) => [
+                  "Button",
+                  is_default ? "Button-Active" : "",
+                ])}
+                cursor={Gdk.Cursor.new_from_name("pointer", null)}
+                onClicked={() => speaker.set_is_default(true)}
+              >
+                {speaker.description}
+              </button>
+            ))}
+          </box>
+        </popover>
+      </menubutton>
+    );
+  });
+
   return (
     <menubutton>
       {speakers.as((speakers) => {
@@ -25,6 +71,11 @@ const WirePlumber = function () {
             tooltipText={bind(defaultSpeaker, "description").as(
               (description) => description,
             )}
+            onScroll={(_, __, dy) => {
+              bind(defaultSpeaker, "volume").as((vol) => {
+                defaultSpeaker.set_volume(vol + Math.sign(dy) * volIncr);
+              });
+            }}
           />
         );
       })}