feat: update system

home/desktops/hyprland/ags/js/quicksettings/widgets/Volume.js

@@ -11,25 +11,13 @@ import { Menu } from "../ToggleButton.js";
 const VolumeIndicator = (type = "speaker") =>
   Widget.Button({
     on_clicked: () => (Audio[type].is_muted = !Audio[type].is_muted),
-    child: Widget.Icon({
-      connections: [
-        [
-          Audio,
-          (icon) => {
-            if (!Audio[type]) return;
+    child: Widget.Icon().hook(Audio[type], (icon) => {
+      icon.icon =
+        type === "speaker"
+          ? getAudioTypeIcon(Audio[type].icon_name || "")
+          : icons.audio.mic.high;
 
-            icon.icon =
-              type === "speaker"
-                ? getAudioTypeIcon(Audio[type].icon_name || "")
-                : icons.audio.mic.high;
-
-            icon.tooltip_text = `Volume ${Math.floor(
-              Audio[type].volume * 100,
-            )}%`;
-          },
-          `${type}-changed`,
-        ],
-      ],
+      icon.tooltip_text = `Volume ${Math.floor(Audio[type].volume * 100)}%`;
     }),
   });
 
@@ -39,15 +27,10 @@ const VolumeSlider = (type = "speaker") =>
     hexpand: true,
     draw_value: false,
     on_change: ({ value }) => (Audio[type].volume = value),
-    connections: [
-      [
-        Audio,
-        (slider) => {
-          slider.value = Audio[type]?.volume;
-        },
-        `${type}-changed`,
-      ],
-    ],
+    setup: (self) =>
+      self.hook(Audio[type], () => {
+        self.value = Audio[type].volume || 0;
+      }),
   });
 
 export const Volume = () =>
@@ -62,14 +45,7 @@ export const Volume = () =>
       Widget.Box({
         vpack: "center",
         child: Arrow("app-mixer"),
-        connections: [
-          [
-            Audio,
-            (box) => {
-              box.visible = Audio.apps.length > 0;
-            },
-          ],
-        ],
+        visible: Audio.bind("apps").transform((a) => a.length > 0),
       }),
     ],
   });
@@ -77,7 +53,7 @@ export const Volume = () =>
 export const Microhone = () =>
   Widget.Box({
     class_name: "slider horizontal",
-    binds: [["visible", Audio, "recorders", (r) => r.length > 0]],
+    visible: Audio.bind("recorders").transform((a) => a.length > 0),
     children: [VolumeIndicator("microphone"), VolumeSlider("microphone")],
   });
 
@@ -88,17 +64,10 @@ const MixerItem = (stream) =>
     class_name: "mixer-item horizontal",
     children: [
       Widget.Icon({
-        binds: [["tooltipText", stream, "name"]],
-        connections: [
-          [
-            stream,
-            (icon) => {
-              icon.icon = Utils.lookUpIcon(stream.name || "")
-                ? stream.name || ""
-                : icons.mpris.fallback;
-            },
-          ],
-        ],
+        tooltip_text: stream.bind("name").transform((n) => n || ""),
+        icon: stream.bind("name").transform((n) => {
+          return Utils.lookUpIcon(n || "") ? n || "" : icons.mpris.fallback;
+        }),
       }),
       Widget.Box({
         vertical: true,
@@ -106,26 +75,19 @@ const MixerItem = (stream) =>
           Widget.Label({
             xalign: 0,
             truncate: "end",
-            binds: [["label", stream, "description"]],
+            label: stream.bind("description").transform((d) => d || ""),
           }),
           Widget.Slider({
             hexpand: true,
             draw_value: false,
-            binds: [["value", stream, "volume"]],
+            value: stream.bind("volume"),
             on_change: ({ value }) => (stream.volume = value),
           }),
         ],
       }),
       Widget.Label({
         xalign: 1,
-        connections: [
-          [
-            stream,
-            (l) => {
-              l.label = `${Math.floor(stream.volume * 100)}%`;
-            },
-          ],
-        ],
+        label: stream.bind("volume").transform((v) => `${Math.floor(v * 100)}`),
       }),
     ],
   });
@@ -148,7 +110,9 @@ const SinkItem = (stream) =>
           icon: icons.ui.tick,
           hexpand: true,
           hpack: "end",
-          binds: [["visible", Audio, "speaker", (s) => s === stream]],
+          visible: Audio.speaker
+            .bind("stream")
+            .transform((s) => s === stream.stream),
         }),
       ],
     }),
@@ -171,7 +135,7 @@ export const AppMixer = () =>
     content: [
       Widget.Box({
         vertical: true,
-        binds: [["children", Audio, "apps", (a) => a.map(MixerItem)]],
+        children: Audio.bind("apps").transform((a) => a.map(MixerItem)),
       }),
       Widget.Separator(),
       SettingsButton(),
@@ -186,7 +150,7 @@ export const SinkSelector = () =>
     content: [
       Widget.Box({
         vertical: true,
-        binds: [["children", Audio, "speakers", (s) => s.map(SinkItem)]],
+        children: Audio.bind("speakers").transform((a) => a.map(SinkItem)),
       }),
       Widget.Separator(),
       SettingsButton(),