ags/music, ags/bar/music: don't rely on variables

fufexan · Dec 10, 2023 · 1f047fb · 1f047fb
1 parent 96bc436
commit 1f047fb
Show file tree

Hide file tree

Showing 8 changed files with 290 additions and 273 deletions.
diff --git a/home/programs/ags/windows/bar/main.js b/home/programs/ags/windows/bar/main.js
@@ -5,7 +5,8 @@ import { Net } from "./modules/net.js";
 import { BluetoothModule } from "./modules/bluetooth.js";
 import { SystemInfo } from "./modules/system_info.js";
 import { Workspaces } from "./modules/workspaces.js";
-import { Music } from "./modules/music.js";
+import Music from "./modules/music.js";
+import Gtk from "gi://Gtk?version=3.0";
 
 const Start = Widget.Box({
   children: [
@@ -15,12 +16,16 @@ const Start = Widget.Box({
 });
 
 const Center = Widget.Box({
-  children: [Music],
+  children: [
+    Music,
+  ],
 });
 
 const End = Widget.Box({
+  hexpand: true,
+  halign: Gtk.Align.END,
+
   children: [
-    Widget.Box({ hexpand: true }),
     // Tray,
     SystemInfo,
     Net,

diff --git a/home/programs/ags/windows/bar/modules/music.js b/home/programs/ags/windows/bar/modules/music.js
@@ -1,119 +1,110 @@
-import {
-  Mpris,
-  musicVisible,
-  player,
-  Variable,
-  Widget,
-} from "../../../imports.js";
+import { Mpris, musicVisible, Variable, Widget } from "../../../imports.js";
+import Icons from "../../../icons.js";
 
 const revealControls = Variable(false);
 
-setPlayer();
+const Cover = (player) =>
+  Widget.Box({
+    className: "cover",
 
-const Cover = Widget.Box({
-  className: "cover",
-
-  connections: [
-    [
-      Mpris,
-      (
-        self,
-      ) => self.css = `background-image: url('${player.value?.cover_path}');`,
+    connections: [
+      [
+        Mpris,
+        (self) =>
+          self.css = `background-image: url('${player.cover_path ?? ""}');`,
+      ],
     ],
-  ],
-});
+  });
 
-const Title = Widget.Label({
-  className: "title module",
+const Title = (player) =>
+  Widget.Label({
+    className: "title module",
 
-  connections: [
-    [Mpris, (self) => self.label = player.value?.track_title ?? ""],
-  ],
-});
+    connections: [
+      [Mpris, (self) => self.label = player.track_title ?? ""],
+    ],
+  });
 
-export const Controls = Widget.CenterBox({
-  className: "controls",
+export const Controls = (player) =>
+  Widget.CenterBox({
+    className: "controls",
 
-  startWidget: Widget.Button({
-    onHover: () => revealControls.value = true,
-    onHoverLost: () => revealControls.value = false,
-    onClicked: () => player.value?.previous(),
-    child: Widget.Icon("media-skip-backward"),
-  }),
+    startWidget: Widget.Button({
+      onHover: () => revealControls.value = true,
+      onHoverLost: () => revealControls.value = false,
+      onClicked: () => player.previous(),
+      child: Widget.Icon(Icons.media.previous),
+    }),
 
-  centerWidget: Widget.Button({
-    onHover: () => revealControls.value = true,
-    onHoverLost: () => revealControls.value = false,
-    onClicked: () => player.value?.playPause(),
+    centerWidget: Widget.Button({
+      onHover: () => revealControls.value = true,
+      onHoverLost: () => revealControls.value = false,
+      onClicked: () => player.playPause(),
 
-    child: Widget.Icon({
-      connections: [
-        [
-          Mpris,
-          (self) => {
-            self.icon = "media-playback-" +
-              (player.value?.playBackStatus == "Playing" ? "pause" : "start") +
-              "-symbolic";
-          },
-          "changed",
+      child: Widget.Icon({
+        connections: [
+          [
+            Mpris,
+            (self) => {
+              const state = player.playBackStatus == "Playing"
+                ? "pause"
+                : "play";
+              self.icon = Icons.media[state];
+            },
+            "changed",
+          ],
         ],
-      ],
+      }),
     }),
-  }),
 
-  endWidget: Widget.Button({
-    onHover: () => revealControls.value = true,
-    onHoverLost: () => revealControls.value = false,
-    onClicked: () => player.value?.next(),
-    child: Widget.Icon("media-skip-forward"),
-  }),
-});
+    endWidget: Widget.Button({
+      onHover: () => revealControls.value = true,
+      onHoverLost: () => revealControls.value = false,
+      onClicked: () => player.next(),
+      child: Widget.Icon(Icons.media.next),
+    }),
+  });
+export const Revealer = (player) =>
+  Widget.Revealer({
+    revealChild: false,
+    transition: "slide_right",
+    child: Controls(player),
 
-export const Music = Widget.EventBox({
+    connections: [
+      [revealControls, (self) => self.revealChild = revealControls.value],
+    ],
+  });
+
+export const MusicBox = (player) =>
+  Widget.Box({
+    children: [
+      Cover(player),
+      Title(player),
+    ],
+  });
+
+export default Widget.EventBox({
   onPrimaryClick: () => musicVisible.value = !musicVisible.value,
   onHover: () => revealControls.value = true,
   onHoverLost: () => revealControls.value = false,
 
   child: Widget.Box({
     className: "music",
 
-    children: [
-      Widget.Box({
-        children: [Cover, Title],
-      }),
-      Widget.Revealer({
-        revealChild: false,
-        transition: "slide_right",
-        child: Controls,
-
-        connections: [
-          [revealControls, (self) => self.revealChild = revealControls.value],
-        ],
-      }),
-    ],
-
-    connections: [
-      [
-        Mpris,
-        (_, busName) => {
-          // don't replace the same player
-          if (player.getValue() == null || player?.value.busName != busName) {
-            player.value = Mpris.getPlayer(busName);
-          }
-        },
-        "player-changed",
-      ],
-      [
-        Mpris,
-        // music module is visible, as we have a player
-        (self, _) => self.visible = true,
-        "player-added",
-      ],
+    binds: [
+      ["children", Mpris, "players", (players) => {
+        if (players.length > 0) {
+          [
+            Revealer(players[0]),
+            MusicBox(players[0]),
+          ];
+        }
+      }],
       [
+        "visible",
         Mpris,
-        // if we have no players, make the module invisible
-        (self, _) => self.visible = Mpris.players.length > 0 ? true : false,
-        "player-closed",
+        "players",
+        (p) => p.length > 0,
       ],
     ],
   }),

diff --git a/home/programs/ags/windows/music/controls.js b/home/programs/ags/windows/music/controls.js
@@ -2,36 +2,37 @@ import { Mpris, Widget } from "../../imports.js";
 import Gtk from "gi://Gtk?version=3.0";
 import Icons from "../../icons.js";
 
-export default Widget.CenterBox({
-  className: "controls",
-  halign: Gtk.Align.CENTER,
+export default (player) =>
+  Widget.CenterBox({
+    className: "controls",
+    halign: Gtk.Align.CENTER,
 
-  startWidget: Widget.Button({
-    onClicked: () => player.value?.previous(),
-    child: Widget.Icon(Icons.media.previous),
-  }),
+    startWidget: Widget.Button({
+      onClicked: () => player.previous(),
+      child: Widget.Icon(Icons.media.previous),
+    }),
 
-  centerWidget: Widget.Button({
-    onClicked: () => player.value?.playPause(),
+    centerWidget: Widget.Button({
+      onClicked: () => player.playPause(),
 
-    child: Widget.Icon({
-      connections: [
-        [
-          Mpris,
-          (self) => {
-            const state = player.value?.playBackStatus == "Playing"
-              ? "pause"
-              : "play";
-            self.icon = Icons.media[state];
-          },
-          "changed",
+      child: Widget.Icon({
+        connections: [
+          [
+            Mpris,
+            (self) => {
+              const state = player.playBackStatus == "Playing"
+                ? "pause"
+                : "play";
+              self.icon = Icons.media[state];
+            },
+            "changed",
+          ],
         ],
-      ],
+      }),
     }),
-  }),
 
-  endWidget: Widget.Button({
-    onClicked: () => player.value?.next(),
-    child: Widget.Icon(Icons.media.next),
-  }),
-});
+    endWidget: Widget.Button({
+      onClicked: () => player.next(),
+      child: Widget.Icon(Icons.media.next),
+    }),
+  });
diff --git a/home/programs/ags/windows/music/cover.js b/home/programs/ags/windows/music/cover.js
@@ -1,10 +1,12 @@
 import { Mpris, Widget } from "../../imports.js";
 
-export default Widget.Box({
-  className: "cover",
-  connections: [[
-    Mpris,
-    (self) => self.css = `background-image: url('${player.value?.cover_path}')`,
-    "changed",
-  ]],
-});
+export default (player) =>
+  Widget.Box({
+    className: "cover",
+    connections: [[
+      Mpris,
+      (self) =>
+        self.css = `background-image: url('${player.cover_path ?? ""}')`,
+      "changed",
+    ]],
+  });