testing ags

home/core/gui/ags/windows/music/controls.js

@@ -0,0 +1,29 @@
+import { Icons, Widget } from "../../imports.js";
+import { mprisStateIcon } from "../../utils/mpris.js";
+
+export default (player) =>
+  Widget.CenterBox({
+    className: "controls",
+    hpack: "center",
+
+    startWidget: Widget.Button({
+      onClicked: () => player.previous(),
+      child: Widget.Icon(Icons.media.previous),
+    }),
+
+    centerWidget: Widget.Button({
+      onClicked: () => player.playPause(),
+
+      child: Widget.Icon().bind(
+        "icon",
+        player,
+        "play-back-status",
+        mprisStateIcon,
+      ),
+    }),
+
+    endWidget: Widget.Button({
+      onClicked: () => player.next(),
+      child: Widget.Icon(Icons.media.next),
+    }),
+  });

home/core/gui/ags/windows/music/cover.js

@@ -0,0 +1,9 @@
+import { Widget } from "../../imports.js";
+
+export default (player) =>
+  Widget.Box({ className: "cover" }).bind(
+    "css",
+    player,
+    "cover-path",
+    (cover) => `background-image: url('${cover ?? ""}')`,
+  );

home/core/gui/ags/windows/music/main.js

@@ -0,0 +1,43 @@
+import { Mpris, Widget } from "../../imports.js";
+import { findPlayer, generateBackground } from "../../utils/mpris.js";
+import PopupWindow from "../../utils/popup_window.js";
+
+import Cover from "./cover.js";
+import { Artists, Title } from "./title_artists.js";
+import TimeInfo from "./time_info.js";
+import Controls from "./controls.js";
+import PlayerInfo from "./player_info.js";
+
+const Info = (player) =>
+  Widget.Box({
+    className: "info",
+    vertical: true,
+    vexpand: false,
+    hexpand: false,
+    homogeneous: true,
+
+    children: [
+      PlayerInfo(player),
+      Title(player),
+      Artists(player),
+      Controls(player),
+      TimeInfo(player),
+    ],
+  });
+
+const MusicBox = (player) =>
+  Widget.Box({
+    className: "music window",
+    children: [Cover(player), Info(player)],
+  }).bind("css", player, "cover-path", generateBackground);
+
+export default () =>
+  PopupWindow({
+    monitor: 0,
+    anchor: ["top"],
+    name: "music",
+    child: Widget.Box(),
+  }).bind("child", Mpris, "players", (players) => {
+    if (players.length == 0) return Widget.Box();
+    return MusicBox(findPlayer(players));
+  });

home/core/gui/ags/windows/music/player_info.js

@@ -0,0 +1,21 @@
+import { Icons, Utils, Widget } from "../../imports.js";
+
+export default (player) =>
+  Widget.Box({
+    className: "player-info",
+    vexpand: true,
+    vpack: "start",
+
+    children: [
+      Widget.Icon({
+        hexpand: true,
+        hpack: "end",
+        className: "player-icon",
+        tooltipText: player.identity ?? "",
+      }).bind("icon", player, "entry", (entry) => {
+        // the Spotify icon is called spotify-client
+        if (entry == "spotify") entry = "spotify-client";
+        return Utils.lookUpIcon(entry ?? "") ? entry : Icons.media.player;
+      }),
+    ],
+  });

home/core/gui/ags/windows/music/time_info.js

@@ -0,0 +1,68 @@
+import { Widget } from "../../imports.js";
+import { lengthStr } from "../../utils/mpris.js";
+
+export const PositionLabel = (player) =>
+  Widget.Label({
+    className: "position",
+    hexpand: true,
+    xalign: 0,
+
+    setup: (self) => {
+      const update = (_, time) => {
+        player.length > 0
+          ? (self.label = lengthStr(time || player.position))
+          : (self.visible = !!player);
+      };
+
+      self.hook(player, update, "position").poll(1000, update);
+    },
+  });
+
+export const LengthLabel = (player) =>
+  Widget.Label({
+    className: "length",
+    hexpand: true,
+    xalign: 1,
+  })
+    .bind("visible", player, "length", (length) => length > 0)
+    .bind("label", player, "length", (length) => lengthStr(length));
+
+export const Position = (player) =>
+  Widget.Slider({
+    className: "position",
+    draw_value: false,
+
+    onChange: ({ value }) => (player.position = player.length * value),
+
+    setup: (self) => {
+      const update = () => {
+        if (self.dragging) return;
+
+        self.visible = player.length > 0;
+
+        if (player.length > 0) {
+          self.value = player.position / player.length;
+        }
+      };
+
+      self
+        .hook(player, update)
+        .hook(player, update, "position")
+        .poll(1000, update);
+    },
+  });
+
+export default (player) =>
+  Widget.Box({
+    vertical: true,
+    vexpand: true,
+    vpack: "end",
+
+    children: [
+      Widget.Box({
+        hexpand: true,
+        children: [PositionLabel(player), LengthLabel(player)],
+      }),
+      Position(player),
+    ],
+  });

home/core/gui/ags/windows/music/title_artists.js

@@ -0,0 +1,32 @@
+import { Widget } from "../../imports.js";
+
+export const Title = (player) =>
+  Widget.Scrollable({
+    className: "title",
+    vscroll: "never",
+    hscroll: "automatic",
+
+    child: Widget.Label({
+      className: "title",
+      label: "Nothing playing",
+    }).bind(
+      "label",
+      player,
+      "track-title",
+      (title) => title ?? "Nothing playing",
+    ),
+  });
+
+export const Artists = (player) =>
+  Widget.Scrollable({
+    className: "artists",
+    vscroll: "never",
+    hscroll: "automatic",
+
+    child: Widget.Label({ className: "artists" }).bind(
+      "label",
+      player,
+      "track-artists",
+      (artists) => artists.join(", ") ?? "",
+    ),
+  });