Finish media menu refactor

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 }) => {

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 Controls = (getPlayerInfo) => {
-  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 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:
+                hasTooltip: true,
-                  curPlayer.value.shuffle_status !== null
+                setup: (self) => {
-                    ? curPlayer.value.shuffle_status
+                  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,
+                        : null;
-                hasTooltip: true,
+                    self.on_primary_click = () => foundPlayer.shuffle();
-                on_primary_click: () => curPlayer.value.shuffle(),
+                    self.class_name = `media-indicator-control-button shuffle ${isShuffleActive(foundPlayer)} ${foundPlayer.shuffle_status !== null ? "enabled" : "disabled"}`;
-                class_name: `media-indicator-control-button shuffle ${isShuffleActive(curPlayer.value)} ${curPlayer.value.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(),
+                setup: (self) => {
-                class_name: `media-indicator-control-button play ${curPlayer.value.can_play ? "enabled" : "disabled"}`,
+                  self.hook(media, () => {
-                child: Widget.Icon(
+                    const foundPlayer = getPlayerInfo();
-                  icons.mpris[curPlayer.value.play_back_status.toLowerCase()],
+                    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:
+                setup: (self) => {
-                  curPlayer.value.loop_status !== null
+                  self.hook(media, () => {
-                    ? `Looping: ${curPlayer.value.loop_status}`
+                    const foundPlayer = getPlayerInfo();
-                    : null,
+                    if (foundPlayer === undefined) {
-                hasTooltip: true,
+                      self.tooltip_text = "Unavailable";
-                on_primary_click: () => curPlayer.value.loop(),
+                      self.class_name =
-                class_name: `media-indicator-control-button loop ${isLoopActive(curPlayer.value)} ${curPlayer.value.loop_status !== null ? "enabled" : "disabled"}`,
+                        "media-indicator-control-button shuffle disabled";
-                child: Widget.Icon(
+                      return;
-                  curPlayer.value.loop_status === null
+                    }
+
+                    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()
+                            ];
+                    });
+                  },
+                }),
               }),
             ],
           }),

modules/menus/media/components/mediainfo.js

@@ -1,28 +1,6 @@
 const media = await Service.import("mpris");
 
-const MediaInfo = () => {
+const MediaInfo = (getPlayerInfo) => {
-  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');
-  });
   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, () => {
+              self.hook(media, () => {
-                console.log('did change')
+                const curPlayer = getPlayerInfo();
-                return (self.label = curPlayer.value["track-title"]);
+                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, () => {
+              self.hook(media, () => {
-                console.log(JSON.stringify(curPlayer, null, 2));
+                const curPlayer = getPlayerInfo();
-                return (self.label = curPlayer.value["track-title"]);
+                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, () => {
+              self.hook(media, () => {
-                return (self.label = curPlayer.value["track-album"]);
+                const curPlayer = getPlayerInfo();
+                return (self.label = curPlayer !== undefined ? curPlayer["track-album"] : "---");
               });
             },
           }),

modules/menus/media/media.js

@@ -26,9 +26,9 @@ const Media = () => {
     }
   });
 
-  const getPlayerInfo = (plyr) => {
+  const getPlayerInfo = () => {
-    return plyr.players.find(p => p.name === curPlayer.value)
+    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",
-              //       }),
-              //     }),
-              //   ]);
             });
           },
         }),

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;
       }
     }

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 {