feat: update system

home/desktops/hyprland/ags/js/misc/mpris.js

@@ -11,14 +11,9 @@ export const CoverArt = (player, props) =>
   Widget.Box({
     ...props,
     class_name: "cover",
-    binds: [
-      [
-        "css",
-        player,
-        "cover-path",
-        (path) => `background-image: url("${path}")`,
-      ],
-    ],
+    css: player
+      .bind("cover_path")
+      .transform((p) => `background-image: url("${p}")`),
   });
 
 /**
@@ -29,16 +24,15 @@ export const BlurredCoverArt = (player, props) =>
   Widget.Box({
     ...props,
     class_name: "blurred-cover",
-    connections: [
-      [
+    setup: (self) =>
+      self.hook(
         player,
         (box) =>
           blurImg(player.cover_path).then((img) => {
             img && box.setCss(`background-image: url("${img}")`);
           }),
         "notify::cover-path",
-      ],
-    ],
+      ),
   });
 
 /**
@@ -49,7 +43,7 @@ export const TitleLabel = (player, props) =>
   Widget.Label({
     ...props,
     class_name: "title",
-    binds: [["label", player, "track-title"]],
+    label: player.bind("track_title"),
   });
 
 /**
@@ -60,7 +54,7 @@ export const ArtistLabel = (player, props) =>
   Widget.Label({
     ...props,
     class_name: "artist",
-    binds: [["label", player, "track-artists", (a) => a.join(", ") || ""]],
+    label: player.bind("track_artists").transform((a) => a.join(", ") || ""),
   });
 
 /**
@@ -72,17 +66,13 @@ export const PlayerIcon = (player, { symbolic = true, ...props } = {}) =>
     ...props,
     class_name: "player-icon",
     tooltip_text: player.identity || "",
-    connections: [
-      [
-        player,
-        (icon) => {
-          const name = `${player.entry}${symbolic ? "-symbolic" : ""}`;
-          Utils.lookUpIcon(name)
-            ? (icon.icon = name)
-            : (icon.icon = icons.mpris.fallback);
-        },
-      ],
-    ],
+    setup: (self) =>
+      self.hook(player, (icon) => {
+        const name = `${player.entry}${symbolic ? "-symbolic" : ""}`;
+        Utils.lookUpIcon(name)
+          ? (icon.icon = name)
+          : (icon.icon = icons.mpris.fallback);
+      }),
   });
 
 /**
@@ -94,25 +84,18 @@ export const PositionSlider = (player, props) =>
     ...props,
     class_name: "position-slider",
     draw_value: false,
-    on_change: ({ value }) => {
-      player.position = player.length * value;
-    },
-    properties: [
-      [
-        "update",
-        (slider) => {
-          if (slider.dragging) return;
+    on_change: ({ value }) => (player.position = player.length * value),
+    setup: (self) => {
+      const update = () => {
+        if (self.dragging) return;
 
-          slider.visible = player.length > 0;
-          if (player.length > 0) slider.value = player.position / player.length;
-        },
-      ],
-    ],
-    connections: [
-      [player, (s) => s._update(s)],
-      [player, (s) => s._update(s), "position"],
-      [1000, (s) => s._update(s)],
-    ],
+        self.visible = player.length > 0;
+        if (player.length > 0) self.value = player.position / player.length;
+      };
+      self.hook(player, update);
+      self.hook(player, update, "position");
+      self.poll(1000, update);
+    },
   });
 
 /** @param {number} length */
@@ -126,90 +109,73 @@ function lengthStr(length) {
 /** @param {import('types/service/mpris').MprisPlayer} player */
 export const PositionLabel = (player) =>
   Widget.Label({
-    properties: [
-      [
-        "update",
-        (label, time) => {
-          player.length > 0
-            ? (label.label = lengthStr(time || player.position))
-            : (label.visible = !!player);
-        },
-      ],
-    ],
-    connections: [
-      [player, (l, time) => l._update(l, time), "position"],
-      [1000, (l) => l._update(l)],
-    ],
+    setup: (self) => {
+      const update = (_, time) => {
+        player.length > 0
+          ? (self.label = lengthStr(time || player.position))
+          : (self.visible = !!player);
+      };
+      self.hook(player, update, "position");
+      self.poll(1000, update);
+    },
   });
 
 /** @param {import('types/service/mpris').MprisPlayer} player */
 export const LengthLabel = (player) =>
   Widget.Label({
-    connections: [
-      [
-        player,
-        (label) => {
-          player.length > 0
-            ? (label.label = lengthStr(player.length))
-            : (label.visible = !!player);
-        },
-      ],
-    ],
+    label: player.bind("length").transform((l) => lengthStr(l)),
+    visible: player.bind("length").transform((l) => l > 0),
   });
 
 /** @param {import('types/service/mpris').MprisPlayer} player */
 export const Slash = (player) =>
   Widget.Label({
     label: "/",
-    connections: [
-      [
-        player,
-        (label) => {
-          label.visible = player.length > 0;
-        },
-      ],
-    ],
+    visible: player.bind("length").transform((l) => l > 0),
   });
 
 /**
  * @param {Object} o
  * @param {import('types/service/mpris').MprisPlayer} o.player
- * @param {import('types/widgets/stack').StackProps['items']} o.items
+ * @param {import('types/widgets/stack').StackProps['children']} o.children
  * @param {'shuffle' | 'loop' | 'playPause' | 'previous' | 'next'} o.onClick
  * @param {string} o.prop
  * @param {string} o.canProp
  * @param {any} o.cantValue
  */
-const PlayerButton = ({ player, items, onClick, prop, canProp, cantValue }) =>
+const PlayerButton = ({
+  player,
+  children,
+  onClick,
+  prop,
+  canProp,
+  cantValue,
+}) =>
   Widget.Button({
-    child: Widget.Stack({
-      items,
-      binds: [["shown", player, prop, (p) => `${p}`]],
-    }),
-    on_clicked: player[onClick].bind(player),
-    binds: [["visible", player, canProp, (c) => c !== cantValue]],
+    child: Widget.Stack({ children }).bind(
+      "shown",
+      player,
+      prop,
+      (p) => `${p}`,
+    ),
+    on_clicked: () => player[onClick](),
+    visible: player.bind(canProp).transform((c) => c !== cantValue),
   });
 
 /** @param {import('types/service/mpris').MprisPlayer} player */
 export const ShuffleButton = (player) =>
   PlayerButton({
     player,
-    items: [
-      [
-        "true",
-        Widget.Label({
-          class_name: "shuffle enabled",
-          label: icons.mpris.shuffle.enabled,
-        }),
-      ],
-      [
-        "false",
-        Widget.Label({
-          class_name: "shuffle disabled",
-          label: icons.mpris.shuffle.disabled,
-        }),
-      ],
-    ],
+    children: {
+      true: Widget.Label({
+        class_name: "shuffle enabled",
+        label: icons.mpris.shuffle.enabled,
+      }),
+      false: Widget.Label({
+        class_name: "shuffle disabled",
+        label: icons.mpris.shuffle.disabled,
+      }),
+    },
     onClick: "shuffle",
     prop: "shuffle-status",
     canProp: "shuffle-status",
@@ -220,29 +186,20 @@ export const ShuffleButton = (player) =>
 export const LoopButton = (player) =>
   PlayerButton({
     player,
-    items: [
-      [
-        "None",
-        Widget.Label({
-          class_name: "loop none",
-          label: icons.mpris.loop.none,
-        }),
-      ],
-      [
-        "Track",
-        Widget.Label({
-          class_name: "loop track",
-          label: icons.mpris.loop.track,
-        }),
-      ],
-      [
-        "Playlist",
-        Widget.Label({
-          class_name: "loop playlist",
-          label: icons.mpris.loop.playlist,
-        }),
-      ],
-    ],
+    children: {
+      None: Widget.Label({
+        class_name: "loop none",
+        label: icons.mpris.loop.none,
+      }),
+      Track: Widget.Label({
+        class_name: "loop track",
+        label: icons.mpris.loop.track,
+      }),
+      Playlist: Widget.Label({
+        class_name: "loop playlist",
+        label: icons.mpris.loop.playlist,
+      }),
+    },
     onClick: "loop",
     prop: "loop-status",
     canProp: "loop-status",
@@ -253,29 +210,20 @@ export const LoopButton = (player) =>
 export const PlayPauseButton = (player) =>
   PlayerButton({
     player,
-    items: [
-      [
-        "Playing",
-        Widget.Label({
-          class_name: "playing",
-          label: icons.mpris.playing,
-        }),
-      ],
-      [
-        "Paused",
-        Widget.Label({
-          class_name: "paused",
-          label: icons.mpris.paused,
-        }),
-      ],
-      [
-        "Stopped",
-        Widget.Label({
-          class_name: "stopped",
-          label: icons.mpris.stopped,
-        }),
-      ],
-    ],
+    children: {
+      Playing: Widget.Label({
+        class_name: "playing",
+        label: icons.mpris.playing,
+      }),
+      Paused: Widget.Label({
+        class_name: "paused",
+        label: icons.mpris.paused,
+      }),
+      Stopped: Widget.Label({
+        class_name: "stopped",
+        label: icons.mpris.stopped,
+      }),
+    },
     onClick: "playPause",
     prop: "play-back-status",
     canProp: "can-play",
@@ -286,15 +234,12 @@ export const PlayPauseButton = (player) =>
 export const PreviousButton = (player) =>
   PlayerButton({
     player,
-    items: [
-      [
-        "true",
-        Widget.Label({
-          class_name: "previous",
-          label: icons.mpris.prev,
-        }),
-      ],
-    ],
+    children: {
+      true: Widget.Label({
+        class_name: "previous",
+        label: icons.mpris.prev,
+      }),
+    },
     onClick: "previous",
     prop: "can-go-prev",
     canProp: "can-go-prev",
@@ -305,15 +250,12 @@ export const PreviousButton = (player) =>
 export const NextButton = (player) =>
   PlayerButton({
     player,
-    items: [
-      [
-        "true",
-        Widget.Label({
-          class_name: "next",
-          label: icons.mpris.next,
-        }),
-      ],
-    ],
+    children: {
+      true: Widget.Label({
+        class_name: "next",
+        label: icons.mpris.next,
+      }),
+    },
     onClick: "next",
     prop: "can-go-next",
     canProp: "can-go-next",