Finish media menu refactor

2024-07-10 01:58:18 -07:00
parent 6cda814d9b
commit e711d639b7
7 changed files with 154 additions and 141 deletions
--- a/modules/menus/media/components/bar.js
+++ b/modules/menus/media/components/bar.js
@@ -1,26 +1,6 @@
 const media = await Service.import("mpris");

 const Bar = (getPlayerInfo) => {
-  media.connect("changed", () => {
-    const statusOrder = {
-      Playing: 1,
-      Paused: 2,
-      Stopped: 3,
-    };
-
-    const isPlaying = media.players.find(
-      (p) => p["play-back-status"] === "Playing",
-    );
-
-    if (isPlaying) {
-      curPlayer.value = media.players.sort(
-        (a, b) =>
-          statusOrder[a["play-back-status"]] -
-          statusOrder[b["play-back-status"]],
-      )[0];
-    }
-  });
-
  return Widget.Box({
    class_name: "media-indicator-current-progress-bar",
    hexpand: true,
@@ -29,7 +9,7 @@ const Bar = (getPlayerInfo) => {
        hexpand: true,
        child: Widget.Slider({
          hexpand: true,
-          tooltip_text: "yoyo",
+          tooltip_text: "--",
          class_name: "menu-slider media progress",
          draw_value: false,
          on_change: ({ value }) => {
--- a/modules/menus/media/components/controls.js
+++ b/modules/menus/media/components/controls.js
@@ -1,31 +1,7 @@
 import icons from "../../../icons/index.js";
 const media = await Service.import("mpris");

-const Controls = () => {
-  const curPlayer = Variable(media.players[0]);
-
-  media.connect("changed", () => {
-    const statusOrder = {
-      Playing: 1,
-      Paused: 2,
-      Stopped: 3,
-    };
-
-    const isPlaying = media.players.find(
-      (p) => p["play-back-status"] === "Playing",
-    );
-
-    if (isPlaying) {
-      curPlayer.value = media.players.sort(
-        (a, b) =>
-          statusOrder[a["play-back-status"]] -
-          statusOrder[b["play-back-status"]],
-      )[0];
-    }
-  });
-  if (curPlayer.value === undefined) {
-    return Widget.Box();
-  }
+const Controls = (getPlayerInfo) => {
  const isLoopActive = (player) => {
    return player["loop-status"] !== null &&
      ["track", "playlist"].includes(player["loop-status"].toLowerCase())
@@ -52,41 +28,86 @@ const Controls = () => {
            children: [
              Widget.Button({
                hpack: "center",
-                tooltip_text:
-                  curPlayer.value.shuffle_status !== null
-                    ? curPlayer.value.shuffle_status
+                hasTooltip: true,
+                setup: (self) => {
+                  self.hook(media, () => {
+                    const foundPlayer = getPlayerInfo();
+                    if (foundPlayer === undefined) {
+                      self.tooltip_text = "Unavailable";
+                      self.class_name =
+                        "media-indicator-control-button shuffle disabled";
+                      return;
+                    }
+
+                    self.tooltip_text =
+                      foundPlayer.shuffle_status !== null
+                        ? foundPlayer.shuffle_status
                          ? "Shuffling"
                          : "Not Shuffling"
-                    : null,
-                hasTooltip: true,
-                on_primary_click: () => curPlayer.value.shuffle(),
-                class_name: `media-indicator-control-button shuffle ${isShuffleActive(curPlayer.value)} ${curPlayer.value.shuffle_status !== null ? "enabled" : "disabled"}`,
+                        : null;
+                    self.on_primary_click = () => foundPlayer.shuffle();
+                    self.class_name = `media-indicator-control-button shuffle ${isShuffleActive(foundPlayer)} ${foundPlayer.shuffle_status !== null ? "enabled" : "disabled"}`;
+                  });
+                },
                child: Widget.Icon(icons.mpris.shuffle["enabled"]),
              }),
            ],
          }),
          Widget.Box({
-            class_name: `media-indicator-control prev ${curPlayer.value.can_go_prev}`,
            children: [
              Widget.Button({
                hpack: "center",
-                on_primary_click: () => curPlayer.value.previous(),
-                class_name: `media-indicator-control-button prev ${curPlayer.value.can_go_prev ? "enabled" : "disabled"}`,
                child: Widget.Icon(icons.mpris.prev),
+                setup: (self) => {
+                  self.hook(media, () => {
+                    const foundPlayer = getPlayerInfo();
+                    if (foundPlayer === undefined) {
+                      self.class_name =
+                        "media-indicator-control-button prev disabled";
+                      return;
+                    }
+
+                    self.on_primary_click = () => foundPlayer.previous();
+                    self.class_name = `media-indicator-control-button prev ${foundPlayer.can_go_prev !== null && foundPlayer.can_go_prev ? "enabled" : "disabled"}`;
+                  });
+                },
              }),
            ],
          }),
          Widget.Box({
-            class_name: "media-indicator-control play",
            children: [
              Widget.Button({
                hpack: "center",
-                on_primary_click: () => curPlayer.value.playPause(),
-                class_name: `media-indicator-control-button play ${curPlayer.value.can_play ? "enabled" : "disabled"}`,
-                child: Widget.Icon(
-                  icons.mpris[curPlayer.value.play_back_status.toLowerCase()],
+                setup: (self) => {
+                  self.hook(media, () => {
+                    const foundPlayer = getPlayerInfo();
+                    if (foundPlayer === undefined) {
+                      self.class_name =
+                        "media-indicator-control-button play disabled";
+                      return;
+                    }
+
+                    self.on_primary_click = () => foundPlayer.playPause();
+                    self.class_name = `media-indicator-control-button play ${foundPlayer.can_play !== null ? "enabled" : "disabled"}`;
+                  });
+                },
+                child: Widget.Icon({
+                  icon: Utils.watch(
+                    icons.mpris.paused,
+                    media,
+                    "changed",
+                    () => {
+                      const foundPlayer = getPlayerInfo();
+                      if (foundPlayer === undefined) {
+                        return icons.mpris["paused"];
+                      }
+                      return icons.mpris[
+                        foundPlayer.play_back_status.toLowerCase()
+                      ];
+                    },
                  ),
                }),
+              }),
            ],
          }),
          Widget.Box({
@@ -94,9 +115,20 @@ const Controls = () => {
            children: [
              Widget.Button({
                hpack: "center",
-                on_primary_click: () => curPlayer.value.next(),
-                class_name: `media-indicator-control-button next ${curPlayer.value.can_go_next ? "enabled" : "disabled"}`,
                child: Widget.Icon(icons.mpris.next),
+                setup: (self) => {
+                  self.hook(media, () => {
+                    const foundPlayer = getPlayerInfo();
+                    if (foundPlayer === undefined) {
+                      self.class_name =
+                        "media-indicator-control-button next disabled";
+                      return;
+                    }
+
+                    self.on_primary_click = () => foundPlayer.next();
+                    self.class_name = `media-indicator-control-button next ${foundPlayer.can_go_next !== null && foundPlayer.can_go_next ? "enabled" : "disabled"}`;
+                  });
+                },
              }),
            ],
          }),
@@ -105,18 +137,44 @@ const Controls = () => {
            children: [
              Widget.Button({
                hpack: "center",
-                tooltip_text:
-                  curPlayer.value.loop_status !== null
-                    ? `Looping: ${curPlayer.value.loop_status}`
-                    : null,
-                hasTooltip: true,
-                on_primary_click: () => curPlayer.value.loop(),
-                class_name: `media-indicator-control-button loop ${isLoopActive(curPlayer.value)} ${curPlayer.value.loop_status !== null ? "enabled" : "disabled"}`,
-                child: Widget.Icon(
-                  curPlayer.value.loop_status === null
+                setup: (self) => {
+                  self.hook(media, () => {
+                    const foundPlayer = getPlayerInfo();
+                    if (foundPlayer === undefined) {
+                      self.tooltip_text = "Unavailable";
+                      self.class_name =
+                        "media-indicator-control-button shuffle disabled";
+                      return;
+                    }
+
+                    self.tooltip_text =
+                      foundPlayer.loop_status !== null
+                        ? foundPlayer.loop_status
+                          ? "Shuffling"
+                          : "Not Shuffling"
+                        : null;
+                    self.on_primary_click = () => foundPlayer.loop();
+                    self.class_name = `media-indicator-control-button loop ${isLoopActive(foundPlayer)} ${foundPlayer.loop_status !== null ? "enabled" : "disabled"}`;
+                  });
+                },
+                child: Widget.Icon({
+                  setup: (self) => {
+                    self.hook(media, () => {
+                      const foundPlayer = getPlayerInfo();
+                      if (foundPlayer === undefined) {
+                        self.icon = icons.mpris.loop["none"];
+                        return;
+                      }
+
+                      self.icon =
+                        foundPlayer.loop_status === null
                          ? icons.mpris.loop["none"]
-                    : icons.mpris.loop[curPlayer.value.loop_status?.toLowerCase()],
-                ),
+                          : icons.mpris.loop[
+                              foundPlayer.loop_status?.toLowerCase()
+                            ];
+                    });
+                  },
+                }),
              }),
            ],
          }),
--- a/modules/menus/media/components/mediainfo.js
+++ b/modules/menus/media/components/mediainfo.js
@@ -1,28 +1,6 @@
 const media = await Service.import("mpris");

-const MediaInfo = () => {
-  const curPlayer = Variable(media.players[0]);
-
-  media.connect("changed", () => {
-    const statusOrder = {
-      Playing: 1,
-      Paused: 2,
-      Stopped: 3,
-    };
-
-    const isPlaying = media.players.find(
-      (p) => p["play-back-status"] === "Playing",
-    );
-
-    if (isPlaying) {
-      curPlayer.value = media.players.sort(
-        (a, b) =>
-          statusOrder[a["play-back-status"]] -
-          statusOrder[b["play-back-status"]],
-      )[0];
-    }
-    console.log('changed');
-  });
+const MediaInfo = (getPlayerInfo) => {
  return Widget.Box({
    class_name: "media-indicator-current-media-info",
    hpack: "center",
@@ -35,13 +13,13 @@ const MediaInfo = () => {
        children: [
          Widget.Label({
            truncate: "end",
-            max_width_chars: 35,
+            max_width_chars: 31,
            wrap: true,
            class_name: "media-indicator-current-song-name-label",
            setup: (self) => {
-              self.hook(curPlayer, () => {
-                console.log('did change')
-                return (self.label = curPlayer.value["track-title"]);
+              self.hook(media, () => {
+                const curPlayer = getPlayerInfo();
+                return (self.label = curPlayer !== undefined ? curPlayer["track-title"] : "No media currently playing");
              });
            },
          }),
@@ -57,9 +35,9 @@ const MediaInfo = () => {
            max_width_chars: 35,
            class_name: "media-indicator-current-song-author-label",
            setup: (self) => {
-              self.hook(curPlayer, () => {
-                console.log(JSON.stringify(curPlayer, null, 2));
-                return (self.label = curPlayer.value["track-title"]);
+              self.hook(media, () => {
+                const curPlayer = getPlayerInfo();
+                return (self.label = curPlayer !== undefined ? curPlayer["track-artists"].join(', ') : "-----");
              });
            },
          }),
@@ -75,8 +53,9 @@ const MediaInfo = () => {
            max_width_chars: 40,
            class_name: "media-indicator-current-song-album-label",
            setup: (self) => {
-              self.hook(curPlayer, () => {
-                return (self.label = curPlayer.value["track-album"]);
+              self.hook(media, () => {
+                const curPlayer = getPlayerInfo();
+                return (self.label = curPlayer !== undefined ? curPlayer["track-album"] : "---");
              });
            },
          }),
--- a/modules/menus/media/media.js
+++ b/modules/menus/media/media.js
@@ -26,9 +26,9 @@ const Media = () => {
    }
  });

-  const getPlayerInfo = (plyr) => {
-    return plyr.players.find(p => p.name === curPlayer.value)
-  }
+  const getPlayerInfo = () => {
+    return media.players.find((p) => p.name === curPlayer.value);
+  };

  return Widget.Box({
    class_name: "menu-section-container",
@@ -46,30 +46,24 @@ const Media = () => {
                hpack: "fill",
                hexpand: true,
                vertical: true,
-                children: [MediaInfo(), Controls(), Bar(getPlayerInfo)],
+                children: [
+                  MediaInfo(getPlayerInfo),
+                  Controls(getPlayerInfo),
+                  Bar(getPlayerInfo),
+                ],
              }),
            }),
          ],
          setup: (self) => {
            self.hook(media, () => {
+              const curPlayer = getPlayerInfo();
+              if (curPlayer !== undefined) {
                self.css = `background-image: linear-gradient(
                  rgba(30, 30, 46, 0.85),
                  rgba(30, 30, 46, 0.9),
-                  #1e1e2e 40em), url("${getPlayerInfo(media).track_cover_url}");
+                  #1e1e2e 40em), url("${curPlayer.track_cover_url}");
                   `;
-
-              //   return (self.children = [
-              //     Widget.Box({
-              //       class_name: "media-indicator-none",
-              //       hpack: "center",
-              //       hexpand: true,
-              //       vpack: "center",
-              //       child: Widget.Label({
-              //         class_name: "media-indicator-none-label dim",
-              //         label: "No Media Is Currently Playing",
-              //       }),
-              //     }),
-              //   ]);
+              }
            });
          },
        }),
--- a/scss/menus/media.scss
+++ b/scss/menus/media.scss
@@ -28,7 +28,7 @@
  }

  .media-indicator-current-song-author {
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.75rem;
  }

  .media-indicator-current-song-name-label {
@@ -48,10 +48,10 @@

  .media-indicator-current-controls {
    margin-top: 1.5rem;
-    margin-bottom: 0.2rem;
+    margin-bottom: 0.5rem;
  }

-  .media-indicator-control {
+  .media-indicator-control-button {
    margin: 0rem 0.5rem;
  }

@@ -85,15 +85,16 @@
  }

  .menu-slider.media.progress {
-    margin-top: 1rem;
+    margin-top: 1em;
+    margin-bottom: 1em;

    trough {
      background: $surface2;
-      border-radius: 0.3rem;
+      border-radius: 0.4em;

      highlight,
      progress {
-        min-height: 1rem;
+        min-height: .85em;
        background: $lavender;
      }
    }
--- a/style.css
+++ b/style.css
@@ -1018,7 +1018,7 @@ window#powermenu .powermenu.box {
  margin-bottom: 0.75rem;
 }
 .menu-items-container.media .media-indicator-current-song-author {
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 .menu-items-container.media .media-indicator-current-song-name-label {
  color: #b4befe;
@@ -1034,9 +1034,9 @@ window#powermenu .powermenu.box {
 }
 .menu-items-container.media .media-indicator-current-controls {
  margin-top: 1.5rem;
-  margin-bottom: 0.2rem;
+  margin-bottom: 0.5rem;
 }
-.menu-items-container.media .media-indicator-control {
+.menu-items-container.media .media-indicator-control-button {
  margin: 0rem 0.5rem;
 }
 .menu-items-container.media .media-indicator-control-button {
@@ -1062,15 +1062,16 @@ window#powermenu .powermenu.box {
  font-size: 1.1em;
 }
 .menu-items-container.media .menu-slider.media.progress {
-  margin-top: 1rem;
+  margin-top: 1em;
+  margin-bottom: 1em;
 }
 .menu-items-container.media .menu-slider.media.progress trough {
  background: #585b70;
-  border-radius: 0.3rem;
+  border-radius: 0.4em;
 }
 .menu-items-container.media .menu-slider.media.progress trough highlight,
 .menu-items-container.media .menu-slider.media.progress trough progress {
-  min-height: 1rem;
+  min-height: 0.85em;
  background: #b4befe;
 }
 .menu-items-container.media .menu-slider.media.progress:hover trough {
--- a/style.css.map
+++ b/style.css.map