cleanup wp

util/Mathf.ts

@@ -0,0 +1,12 @@
+export const Mathf = {
+  clamp: (value: number, min: number, max: number) => {
+    if (value < min) return min;
+    if (value > max) return max;
+    return value;
+  },
+  sign: (value: number) => {
+    if (value > 0) return 1;
+    if (value < 0) return -1;
+    return 0;
+  },
+};

widget/WirePlumber.tsx

@@ -1,8 +1,7 @@
 import { bind, derive } from "astal";
 import { Gdk } from "astal/gtk4";
 import AstalWp from "gi://AstalWp";
-
+import { Mathf } from "../util/Mathf";
-const volIncr = 5 / 100;
 
 const WirePlumber = function () {
   const audio = AstalWp.get_default()?.audio!;
@@ -18,7 +17,11 @@ const WirePlumber = function () {
       <menubutton
         onScroll={(_, __, dy) => {
           defaultSpeaker.set_volume(
-            Math.min(defaultSpeaker.volume + -Math.sign(dy) * volIncr, 1.0),
+            Mathf.clamp(
+              defaultSpeaker.volume - Mathf.sign(dy) * 0.02,
+              0.0,
+              1.0,
+            ),
           );
         }}
       >
@@ -52,53 +55,6 @@ const WirePlumber = function () {
       </menubutton>
     );
   });
-
-  return (
-    <menubutton>
-      {speakers.as((speakers) => {
-        const defaultSpeaker = speakers.find((speaker) => speaker.is_default);
-        if (!defaultSpeaker) {
-          return <></>;
-        }
-        return (
-          <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,
-            )}
-            onScroll={(_, __, dy) => {
-              bind(defaultSpeaker, "volume").as((vol) => {
-                defaultSpeaker.set_volume(vol + Math.sign(dy) * volIncr);
-              });
-            }}
-          />
-        );
-      })}
-      <popover cssClasses={["WirePlumberMenu"]}>
-        <box vertical>
-          {speakers.as((speakers) =>
-            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>
-  );
 };
 
 export default WirePlumber;