WIP - Refactor media menu

modules/menus/dashboard/controls/index.js

@@ -11,6 +11,7 @@ const Controls = () => {
     expand: true,
     children: [
       Widget.Button({
+        tooltip_text: "Toggle Wifi",
         expand: true,
         setup: (self) => {
           self.hook(network, () => {
@@ -27,6 +28,7 @@ const Controls = () => {
         }),
       }),
       Widget.Button({
+        tooltip_text: "Toggle Bluetooth",
         expand: true,
         class_name: bluetooth
           .bind("enabled")
@@ -39,6 +41,7 @@ const Controls = () => {
         }),
       }),
       Widget.Button({
+        tooltip_text: "Toggle Notifications",
         expand: true,
         class_name: notifications
           .bind("dnd")
@@ -51,6 +54,7 @@ const Controls = () => {
         }),
       }),
       Widget.Button({
+        tooltip_text: "Toggle Mute (Playback)",
         expand: true,
         on_primary_click: () =>
           (audio.speaker.is_muted = !audio.speaker.is_muted),
@@ -68,6 +72,7 @@ const Controls = () => {
         }),
       }),
       Widget.Button({
+        tooltip_text: "Toggle Mute (Microphone)",
         expand: true,
         on_primary_click: () =>
           (audio.microphone.is_muted = !audio.microphone.is_muted),

modules/menus/dashboard/shortcuts/index.js

@@ -80,6 +80,7 @@ const Shortcuts = () => {
             hexpand: true,
             children: [
               Widget.Button({
+                tooltip_text: "Microsoft Edge",
                 class_name: "dashboard-button edge top-button",
                 on_primary_click: () => handleClick("microsoft-edge-stable"),
                 child: Widget.Label({
@@ -88,6 +89,7 @@ const Shortcuts = () => {
                 }),
               }),
               Widget.Button({
+                tooltip_text: "Spotify",
                 class_name: "dashboard-button spotify",
                 on_primary_click: () => handleClick("spotify-launcher"),
                 child: Widget.Label({
@@ -102,6 +104,7 @@ const Shortcuts = () => {
             hexpand: true,
             children: [
               Widget.Button({
+                tooltip_text: "Discord",
                 class_name: "dashboard-button discord top-button",
                 on_primary_click: () => handleClick("discord"),
                 child: Widget.Label({
@@ -110,6 +113,7 @@ const Shortcuts = () => {
                 }),
               }),
               Widget.Button({
+                tooltip_text: "Search Apps",
                 class_name: "dashboard-button search",
                 on_primary_click: () => handleClick("rofi -show drun"),
                 child: Widget.Label({
@@ -131,6 +135,7 @@ const Shortcuts = () => {
             hexpand: true,
             children: [
               Widget.Button({
+                tooltip_text: "Color Picker",
                 class_name: "dashboard-button colorpicker top-button",
                 on_primary_click: () => handleClick("hyprpicker -a"),
                 child: Widget.Label({
@@ -139,6 +144,7 @@ const Shortcuts = () => {
                 }),
               }),
               Widget.Button({
+                tooltip_text: "Hyprland Settings",
                 class_name: "dashboard-button settings",
                 on_primary_click: () =>
                   handleClick(
@@ -156,6 +162,7 @@ const Shortcuts = () => {
             hexpand: true,
             children: [
               Widget.Button({
+                tooltip_text: "Screenshot",
                 class_name: "dashboard-button snapshot top-button",
                 on_primary_click: () => {
                   App.closeWindow("dashboardmenu");
@@ -169,6 +176,7 @@ const Shortcuts = () => {
                 }),
               }),
               Widget.Button({
+                tooltip_text: "Record Screen",
                 class_name: isRecording
                   .bind("value")
                   .as((v) => `dashboard-button record ${v ? "active" : ""}`),

modules/menus/media/components/albumcover.js

@@ -1,16 +0,0 @@
-const AlbumCover = (curPlayer) => {
-  if (
-    typeof curPlayer.track_cover_url === "string" &&
-    curPlayer.track_cover_url.length > 0
-  ) {
-    return Widget.Box({
-      vexpand: false,
-      vpack: "center",
-      class_name: "media-indicator-current-album-cover",
-      css: `background-image: url("${curPlayer.track_cover_url}")`,
-    });
-  }
-  return Widget.Box();
-};
-
-export { AlbumCover };

modules/menus/media/components/bar.js

@@ -1,4 +1,26 @@
-const Bar = (curPlayer) => {
+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,
@@ -11,34 +33,34 @@ const Bar = (curPlayer) => {
           class_name: "menu-slider media progress",
           draw_value: false,
           on_change: ({ value }) => {
-            return (curPlayer.position = value * curPlayer.length);
+            const foundPlayer = getPlayerInfo(media);
+            return (foundPlayer.position = value * foundPlayer.length);
           },
           setup: (self) => {
             const update = () => {
-              if (
+              const foundPlayer = getPlayerInfo(media);
-                typeof curPlayer.position === "number" &&
+              if (foundPlayer !== undefined) {
-                curPlayer.position > 0 &&
+                const value = foundPlayer.position / foundPlayer.length;
-                typeof curPlayer.length === "number" &&
-                curPlayer.length > 0
-              ) {
-                const value = curPlayer.position / curPlayer.length;
                 self.value = value > 0 ? value : 0;
               } else {
                 self.value = 0;
               }
             };
-            self.hook(curPlayer, update);
+            self.hook(media, update);
-            self.hook(curPlayer, update, "position");
             self.poll(1000, update);
 
             function updateTooltip() {
-              const curHour = Math.floor(curPlayer.position / 3600);
+              const foundPlayer = getPlayerInfo(media);
-              const curMin = Math.floor((curPlayer.position % 3600) / 60);
+              if (foundPlayer === undefined) {
-              const curSec = Math.floor(curPlayer.position % 60);
+                return self.tooltip_text = '0:0'
+              }
+              const curHour = Math.floor(foundPlayer.position / 3600);
+              const curMin = Math.floor((foundPlayer.position % 3600) / 60);
+              const curSec = Math.floor(foundPlayer.position % 60);
 
               if (
-                typeof curPlayer.position === "number" &&
+                typeof foundPlayer.position === "number" &&
-                curPlayer.position >= 0
+                foundPlayer.position >= 0
               ) {
                 // WARN: These nested ternaries are absolutely disgusting lol
                 self.tooltip_text = `${
@@ -51,7 +73,7 @@ const Bar = (curPlayer) => {
               }
             }
             self.poll(1000, updateTooltip);
-            self.hook(curPlayer, updateTooltip);
+            self.hook(media, updateTooltip);
           },
         }),
       }),

modules/menus/media/components/controls.js

@@ -1,6 +1,31 @@
 import icons from "../../../icons/index.js";
+const media = await Service.import("mpris");
 
-const Controls = (curPlayer) => {
+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 isLoopActive = (player) => {
     return player["loop-status"] !== null &&
       ["track", "playlist"].includes(player["loop-status"].toLowerCase())
@@ -28,25 +53,25 @@ const Controls = (curPlayer) => {
               Widget.Button({
                 hpack: "center",
                 tooltip_text:
-                  curPlayer.shuffle_status !== null
+                  curPlayer.value.shuffle_status !== null
-                    ? curPlayer.shuffle_status
+                    ? curPlayer.value.shuffle_status
                       ? "Shuffling"
                       : "Not Shuffling"
                     : null,
                 hasTooltip: true,
-                on_primary_click: () => curPlayer.shuffle(),
+                on_primary_click: () => curPlayer.value.shuffle(),
-                class_name: `media-indicator-control-button shuffle ${isShuffleActive(curPlayer)} ${curPlayer.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.can_go_prev}`,
+            class_name: `media-indicator-control prev ${curPlayer.value.can_go_prev}`,
             children: [
               Widget.Button({
                 hpack: "center",
-                on_primary_click: () => curPlayer.previous(),
+                on_primary_click: () => curPlayer.value.previous(),
-                class_name: `media-indicator-control-button prev ${curPlayer.can_go_prev ? "enabled" : "disabled"}`,
+                class_name: `media-indicator-control-button prev ${curPlayer.value.can_go_prev ? "enabled" : "disabled"}`,
                 child: Widget.Icon(icons.mpris.prev),
               }),
             ],
@@ -56,10 +81,10 @@ const Controls = (curPlayer) => {
             children: [
               Widget.Button({
                 hpack: "center",
-                on_primary_click: () => curPlayer.playPause(),
+                on_primary_click: () => curPlayer.value.playPause(),
-                class_name: `media-indicator-control-button play ${curPlayer.can_play ? "enabled" : "disabled"}`,
+                class_name: `media-indicator-control-button play ${curPlayer.value.can_play ? "enabled" : "disabled"}`,
                 child: Widget.Icon(
-                  icons.mpris[curPlayer.play_back_status.toLowerCase()],
+                  icons.mpris[curPlayer.value.play_back_status.toLowerCase()],
                 ),
               }),
             ],
@@ -69,8 +94,8 @@ const Controls = (curPlayer) => {
             children: [
               Widget.Button({
                 hpack: "center",
-                on_primary_click: () => curPlayer.next(),
+                on_primary_click: () => curPlayer.value.next(),
-                class_name: `media-indicator-control-button next ${curPlayer.can_go_next ? "enabled" : "disabled"}`,
+                class_name: `media-indicator-control-button next ${curPlayer.value.can_go_next ? "enabled" : "disabled"}`,
                 child: Widget.Icon(icons.mpris.next),
               }),
             ],
@@ -81,16 +106,16 @@ const Controls = (curPlayer) => {
               Widget.Button({
                 hpack: "center",
                 tooltip_text:
-                  curPlayer.loop_status !== null
+                  curPlayer.value.loop_status !== null
-                    ? `Looping: ${curPlayer.loop_status}`
+                    ? `Looping: ${curPlayer.value.loop_status}`
                     : null,
                 hasTooltip: true,
-                on_primary_click: () => curPlayer.loop(),
+                on_primary_click: () => curPlayer.value.loop(),
-                class_name: `media-indicator-control-button loop ${isLoopActive(curPlayer)} ${curPlayer.loop_status !== null ? "enabled" : "disabled"}`,
+                class_name: `media-indicator-control-button loop ${isLoopActive(curPlayer.value)} ${curPlayer.value.loop_status !== null ? "enabled" : "disabled"}`,
                 child: Widget.Icon(
-                  curPlayer.loop_status === null
+                  curPlayer.value.loop_status === null
                     ? icons.mpris.loop["none"]
-                    : icons.mpris.loop[curPlayer.loop_status?.toLowerCase()],
+                    : icons.mpris.loop[curPlayer.value.loop_status?.toLowerCase()],
                 ),
               }),
             ],

modules/menus/media/components/mediainfo.js

@@ -1,4 +1,28 @@
-const MediaInfo = (curPlayer) => {
+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');
+  });
   return Widget.Box({
     class_name: "media-indicator-current-media-info",
     hpack: "center",
@@ -11,10 +35,15 @@ const MediaInfo = (curPlayer) => {
         children: [
           Widget.Label({
             truncate: "end",
-            max_width_chars: 21,
+            max_width_chars: 35,
             wrap: true,
             class_name: "media-indicator-current-song-name-label",
-            label: curPlayer["track-title"],
+            setup: (self) => {
+              self.hook(curPlayer, () => {
+                console.log('did change')
+                return (self.label = curPlayer.value["track-title"]);
+              });
+            },
           }),
         ],
       }),
@@ -25,9 +54,14 @@ const MediaInfo = (curPlayer) => {
           Widget.Label({
             truncate: "end",
             wrap: true,
-            max_width_chars: 25,
+            max_width_chars: 35,
             class_name: "media-indicator-current-song-author-label",
-            label: curPlayer["track-artists"].join(", "),
+            setup: (self) => {
+              self.hook(curPlayer, () => {
+                console.log(JSON.stringify(curPlayer, null, 2));
+                return (self.label = curPlayer.value["track-title"]);
+              });
+            },
           }),
         ],
       }),
@@ -38,9 +72,13 @@ const MediaInfo = (curPlayer) => {
           Widget.Label({
             truncate: "end",
             wrap: true,
-            max_width_chars: 25,
+            max_width_chars: 40,
             class_name: "media-indicator-current-song-album-label",
-            label: curPlayer["track-album"],
+            setup: (self) => {
+              self.hook(curPlayer, () => {
+                return (self.label = curPlayer.value["track-album"]);
+              });
+            },
           }),
         ],
       }),

modules/menus/media/index.bkup.js

@@ -1,343 +0,0 @@
-const media = await Service.import("mpris");
-import DropdownMenu from "../DropdownMenu.js";
-import icons from "../../icons/index.js";
-
-media.cacheCoverArt = false;
-
-export default () => {
-  const activePlayer = Variable(media.players[0]);
-
-  media.connect("changed", (value) => {
-    const statusOrder = {
-      Playing: 1,
-      Paused: 2,
-      Stopped: 3,
-    };
-
-    if (value.players.length === 0) {
-      activePlayer.value = media.players[0];
-      return;
-    }
-
-    const isPlaying = value.players.find(
-      (p) => p["play-back-status"] === "Playing",
-    );
-
-    if (isPlaying) {
-      activePlayer.value = value.players.sort(
-        (a, b) =>
-          statusOrder[a["play-back-status"]] -
-          statusOrder[b["play-back-status"]],
-      )[0];
-    }
-  });
-
-  const isLoopActive = (player) => {
-    return player["loop-status"] !== null &&
-      ["track", "playlist"].includes(player["loop-status"].toLowerCase())
-      ? "active"
-      : "";
-  };
-
-  const isShuffleActive = (player) => {
-    return player["shuffle-status"] !== null && player["shuffle-status"]
-      ? "active"
-      : "";
-  };
-
-  return DropdownMenu({
-    name: "mediamenu",
-    transition: "crossfade",
-    fixed: true,
-    minWidth: 550,
-    child: Widget.Box({
-      class_name: "media-indicator-container",
-      vertical: true,
-      hexpand: true,
-      vexpand: true,
-      child: Widget.Box({
-        class_name: "media-indicator-items",
-        vexpand: true,
-        hexpand: true,
-        vertical: true,
-        children: [
-          Widget.Box({
-            class_name: "media-indicator-current-player-info",
-            vpack: "center",
-            hexpand: true,
-            setup: (self) => {
-              self.hook(activePlayer, () => {
-                self.hook(media, () => {
-                  const curPlayer = activePlayer.value;
-
-                  const albumCover = (player) => {
-                    if (
-                      typeof player.track_cover_url === "string" &&
-                      player.track_cover_url.length > 0
-                    ) {
-                      return [
-                        Widget.Box({
-                          vexpand: false,
-                          vpack: "center",
-                          class_name: "media-indicator-current-album-cover",
-                          css: `background-image: url("${curPlayer.track_cover_url}")`,
-                        }),
-                      ];
-                    }
-                    return [];
-                  };
-                  if (curPlayer && curPlayer.play_back_status !== "Stopped") {
-                    return (self.children = [
-                      ...albumCover(curPlayer),
-                      Widget.Box({
-                        class_name: "media-indicator-right-section",
-                        hpack: "center",
-                        hexpand: true,
-                        vertical: true,
-                        children: [
-                          Widget.Box({
-                            class_name: "media-indicator-current-media-info",
-                            hpack: "center",
-                            hexpand: true,
-                            vertical: true,
-                            children: [
-                              Widget.Box({
-                                class_name: "media-indicator-current-song-name",
-                                hpack: "center",
-                                children: [
-                                  Widget.Label({
-                                    truncate: "end",
-                                    max_width_chars: 21,
-                                    wrap: true,
-                                    class_name:
-                                      "media-indicator-current-song-name-label",
-                                    label: curPlayer["track-title"],
-                                  }),
-                                ],
-                              }),
-                              Widget.Box({
-                                class_name:
-                                  "media-indicator-current-song-author",
-                                hpack: "center",
-                                children: [
-                                  Widget.Label({
-                                    truncate: "end",
-                                    wrap: true,
-                                    max_width_chars: 25,
-                                    class_name:
-                                      "media-indicator-current-song-author-label",
-                                    label:
-                                      curPlayer["track-artists"].join(", "),
-                                  }),
-                                ],
-                              }),
-                              Widget.Box({
-                                class_name:
-                                  "media-indicator-current-song-album",
-                                hpack: "center",
-                                children: [
-                                  Widget.Label({
-                                    truncate: "end",
-                                    wrap: true,
-                                    max_width_chars: 25,
-                                    class_name:
-                                      "media-indicator-current-song-album-label",
-                                    label: curPlayer["track-album"],
-                                  }),
-                                ],
-                              }),
-                            ],
-                          }),
-                          Widget.Box({
-                            class_name:
-                              "media-indicator-current-player-controls",
-                            vertical: true,
-                            children: [
-                              Widget.Box({
-                                class_name: "media-indicator-current-controls",
-                                hpack: "center",
-                                children: [
-                                  Widget.Box({
-                                    class_name:
-                                      "media-indicator-control shuffle",
-                                    children: [
-                                      Widget.Button({
-                                        hpack: "center",
-                                        tooltip_text:
-                                          curPlayer.shuffle_status !== null
-                                            ? curPlayer.shuffle_status
-                                              ? "Shuffling"
-                                              : "Not Shuffling"
-                                            : null,
-                                        hasTooltip: true,
-                                        on_primary_click: () =>
-                                          curPlayer.shuffle(),
-                                        class_name: `media-indicator-control-button shuffle ${isShuffleActive(curPlayer)} ${curPlayer.shuffle_status !== null ? "enabled" : "disabled"}`,
-                                        child: Widget.Icon(
-                                          icons.mpris.shuffle["enabled"],
-                                        ),
-                                      }),
-                                    ],
-                                  }),
-                                  Widget.Box({
-                                    class_name: `media-indicator-control prev ${curPlayer.can_go_prev}`,
-                                    children: [
-                                      Widget.Button({
-                                        hpack: "center",
-                                        on_primary_click: () =>
-                                          curPlayer.previous(),
-                                        class_name: `media-indicator-control-button prev ${curPlayer.can_go_prev ? "enabled" : "disabled"}`,
-                                        child: Widget.Icon(icons.mpris.prev),
-                                      }),
-                                    ],
-                                  }),
-                                  Widget.Box({
-                                    class_name: "media-indicator-control play",
-                                    children: [
-                                      Widget.Button({
-                                        hpack: "center",
-                                        on_primary_click: () =>
-                                          curPlayer.playPause(),
-                                        class_name: `media-indicator-control-button play ${curPlayer.can_play ? "enabled" : "disabled"}`,
-                                        child: Widget.Icon(
-                                          icons.mpris[
-                                            curPlayer.play_back_status.toLowerCase()
-                                          ],
-                                        ),
-                                      }),
-                                    ],
-                                  }),
-                                  Widget.Box({
-                                    class_name: `media-indicator-control next`,
-                                    children: [
-                                      Widget.Button({
-                                        hpack: "center",
-                                        on_primary_click: () =>
-                                          curPlayer.next(),
-                                        class_name: `media-indicator-control-button next ${curPlayer.can_go_next ? "enabled" : "disabled"}`,
-                                        child: Widget.Icon(icons.mpris.next),
-                                      }),
-                                    ],
-                                  }),
-                                  Widget.Box({
-                                    class_name: "media-indicator-control loop",
-                                    children: [
-                                      Widget.Button({
-                                        hpack: "center",
-                                        tooltip_text:
-                                          curPlayer.loop_status !== null
-                                            ? `Looping: ${curPlayer.loop_status}`
-                                            : null,
-                                        hasTooltip: true,
-                                        on_primary_click: () =>
-                                          curPlayer.loop(),
-                                        class_name: `media-indicator-control-button loop ${isLoopActive(curPlayer)} ${curPlayer.loop_status !== null ? "enabled" : "disabled"}`,
-                                        child: Widget.Icon(
-                                          curPlayer.loop_status === null
-                                            ? icons.mpris.loop["none"]
-                                            : icons.mpris.loop[
-                                                curPlayer.loop_status?.toLowerCase()
-                                              ],
-                                        ),
-                                      }),
-                                    ],
-                                  }),
-                                ],
-                              }),
-                            ],
-                          }),
-                          Widget.Box({
-                            class_name: "media-indicator-current-progress-bar",
-                            hexpand: true,
-                            children: [
-                              Widget.Box({
-                                hexpand: true,
-                                child: Widget.Slider({
-                                  hexpand: true,
-                                  tooltip_text: "yoyo",
-                                  class_name: "menu-slider media progress",
-                                  draw_value: false,
-                                  on_change: ({ value }) =>
-                                    (curPlayer.position =
-                                      value * curPlayer.length),
-                                  visible: curPlayer
-                                    .bind("length")
-                                    .as((l) => l > 0),
-                                  setup: (self) => {
-                                    const update = () => {
-                                      if (
-                                        typeof curPlayer.position ===
-                                          "number" &&
-                                        curPlayer.position > 0
-                                      ) {
-                                        const value =
-                                          curPlayer.position / curPlayer.length;
-                                        self.value = value > 0 ? value : 0;
-                                      }
-                                      return 0;
-                                    };
-                                    self.hook(curPlayer, update);
-                                    self.hook(curPlayer, update, "position");
-                                    self.poll(1000, update);
-
-                                    function updateTooltip() {
-                                      const curHour = Math.floor(
-                                        curPlayer.position / 3600,
-                                      );
-                                      const curMin = Math.floor(
-                                        (curPlayer.position % 3600) / 60,
-                                      );
-                                      const curSec = Math.floor(
-                                        curPlayer.position % 60,
-                                      );
-
-                                      if (
-                                        typeof curPlayer.position ===
-                                          "number" &&
-                                        curPlayer.position >= 0
-                                      ) {
-                                        // WARN: These nested ternaries are absolutely disgusting lol
-                                        self.tooltip_text = `${
-                                          curHour > 0
-                                            ? (curHour < 10
-                                                ? "0" + curHour
-                                                : curHour) + ":"
-                                            : ""
-                                        }${curMin < 10 ? "0" + curMin : curMin}:${curSec < 10 ? "0" + curSec : curSec}`;
-                                      } else {
-                                        self.tooltip_text = `00:00`;
-                                      }
-                                    }
-                                    self.poll(1000, updateTooltip);
-                                    self.hook(curPlayer, updateTooltip);
-                                  },
-                                }),
-                              }),
-                            ],
-                          }),
-                        ],
-                      }),
-                    ]);
-                  }
-
-                  return (self.children = [
-                    Widget.Box({
-                      class_name: "media-indicator-none",
-                      hpack: "center",
-                      vpack: "center",
-                      expand: true,
-                      child: Widget.Label({
-                        class_name: "media-indicator-none-label dim",
-                        label: "No Media Is Currently Playing",
-                      }),
-                    }),
-                  ]);
-                });
-              });
-            },
-          }),
-        ],
-      }),
-    }),
-  });
-};

modules/menus/media/media.js

@@ -1,10 +1,35 @@
 const media = await Service.import("mpris");
-import { AlbumCover } from "./components/albumcover.js";
 import { MediaInfo } from "./components/mediainfo.js";
 import { Controls } from "./components/controls.js";
 import { Bar } from "./components/bar.js";
 
 const Media = () => {
+  const curPlayer = Variable("");
+
+  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].name;
+    }
+  });
+
+  const getPlayerInfo = (plyr) => {
+    return plyr.players.find(p => p.name === curPlayer.value)
+  }
+
   return Widget.Box({
     class_name: "menu-section-container",
     children: [
@@ -13,60 +38,38 @@ const Media = () => {
         vertical: false,
         child: Widget.Box({
           class_name: "menu-content",
+          children: [
+            Widget.Box({
+              class_name: "media-content",
+              child: Widget.Box({
+                class_name: "media-indicator-right-section",
+                hpack: "fill",
+                hexpand: true,
+                vertical: true,
+                children: [MediaInfo(), Controls(), Bar(getPlayerInfo)],
+              }),
+            }),
+          ],
           setup: (self) => {
-            let curPlayer = media.players[0];
             self.hook(media, () => {
-              const statusOrder = {
+              self.css = `background-image: linear-gradient(
-                Playing: 1,
+                  rgba(30, 30, 46, 0.85),
-                Paused: 2,
+                  rgba(30, 30, 46, 0.9),
-                Stopped: 3,
+                  #1e1e2e 40em), url("${getPlayerInfo(media).track_cover_url}");
-              };
+                   `;
 
-              const isPlaying = media.players.find(
+              //   return (self.children = [
-                (p) => p["play-back-status"] === "Playing",
+              //     Widget.Box({
-              );
+              //       class_name: "media-indicator-none",
-
+              //       hpack: "center",
-              if (isPlaying) {
+              //       hexpand: true,
-                curPlayer = media.players.sort(
+              //       vpack: "center",
-                  (a, b) =>
+              //       child: Widget.Label({
-                    statusOrder[a["play-back-status"]] -
+              //         class_name: "media-indicator-none-label dim",
-                    statusOrder[b["play-back-status"]],
+              //         label: "No Media Is Currently Playing",
-                )[0];
+              //       }),
-              }
+              //     }),
-
+              //   ]);
-              if (
-                media.players.length &&
-                curPlayer &&
-                curPlayer.play_back_status !== "Stopped"
-              ) {
-                return (self.children = [
-                  AlbumCover(curPlayer),
-                  Widget.Box({
-                    class_name: "media-indicator-right-section",
-                    hpack: "fill",
-                    hexpand: true,
-                    vertical: true,
-                    children: [
-                      MediaInfo(curPlayer),
-                      Controls(curPlayer),
-                      Bar(curPlayer),
-                    ],
-                  }),
-                ]);
-              }
-
-              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",
-                  }),
-                }),
-              ]);
             });
           },
         }),

modules/menus/power/verification.js

@@ -7,40 +7,46 @@ export default () =>
     transition: "crossfade",
     child: Widget.Box({
       class_name: "verification",
-      vertical: true,
+      child: Widget.Box({
-      children: [
+        class_name: "verification-content",
-        Widget.Box({
+        expand: true,
-          class_name: "text-box",
+        vertical: true,
-          vertical: true,
+        children: [
-          children: [
+          Widget.Box({
-            Widget.Label({
+            class_name: "text-box",
-              class_name: "title",
+            vertical: true,
-              label: powermenu.bind("title").as(t => t.toUpperCase()),
+            children: [
-            }),
+              Widget.Label({
-            Widget.Label({
+                class_name: "title",
-              class_name: "desc",
+                label: powermenu.bind("title").as((t) => t.toUpperCase()),
-              label: powermenu.bind("title").as(p => `Are you sure you want to ${p.toLowerCase()}?`),
+              }),
-            }),
+              Widget.Label({
-          ],
+                class_name: "desc",
-        }),
+                label: powermenu
-        Widget.Box({
+                  .bind("title")
-          class_name: "buttons horizontal",
+                  .as((p) => `Are you sure you want to ${p.toLowerCase()}?`),
-          vexpand: true,
+              }),
-          vpack: "end",
+            ],
-          homogeneous: true,
+          }),
-          children: [
+          Widget.Box({
-            Widget.Button({
+            class_name: "buttons horizontal",
-              class_name: "verification-button bar-verification_yes",
+            vexpand: true,
-              child: Widget.Label("Yes"),
+            vpack: "end",
-              on_clicked: powermenu.exec,
+            homogeneous: true,
-            }),
+            children: [
-            Widget.Button({
+              Widget.Button({
-              class_name: "verification-button bar-verification_no",
+                class_name: "verification-button bar-verification_yes",
-              child: Widget.Label("No"),
+                child: Widget.Label("Yes"),
-              on_clicked: () => App.toggleWindow("verification"),
+                on_clicked: powermenu.exec,
-            }),
+              }),
-          ],
+              Widget.Button({
-        }),
+                class_name: "verification-button bar-verification_no",
-      ],
+                child: Widget.Label("No"),
+                on_clicked: () => App.toggleWindow("verification"),
+              }),
+            ],
+          }),
+        ],
+      }),
     }),
   });

scss/menus/dashboard.scss

@@ -147,25 +147,40 @@
             &.input {
                 background: $pink;
             }
+            &.wifi:hover {
+                background: transparentize($mauve, 0.7);
+            }
+            &.bluetooth:hover {
+                background: transparentize($sky, 0.7);
+            }
+            &.notifications:hover {
+                background: transparentize($yellow, 0.7);
+            }
+            &.playback:hover {
+                background: transparentize($maroon, 0.7);
+            }
+            &.input:hover {
+                background: transparentize($pink, 0.7);
+            }
             &:hover {
-                background: $surface2;
+                background: $surface1;
             }
             &.disabled {
                 background: $surface2;
                 &.wifi:hover {
-                    background: $mauve;
+                    background: transparentize($mauve, 0.7);
                 }
                 &.bluetooth:hover {
-                    background: $sky;
+                    background: transparentize($sky, 0.7);
                 }
                 &.notifications:hover {
-                    background: $yellow;
+                    background: transparentize($yellow, 0.7);
                 }
                 &.playback:hover {
-                    background: $maroon;
+                    background: transparentize($maroon, 0.7);
                 }
                 &.input:hover {
-                    background: $pink;
+                    background: transparentize($pink, 0.7);
                 }
             }
         }

scss/menus/media.scss

@@ -8,22 +8,19 @@
     margin: 1.3em 0em;
   }
 
-  .media-indicator-items {
+  .menu-items-section {
-    margin: 1rem;
+    border-radius: 0.4em;
-    margin-bottom: 1.3rem;
+    padding: 0em;
   }
 
-  .media-indicator-current-album-cover {
+  .menu-content {
-    border-radius: 0.25em;
+    border-radius: 0.4em;
-    min-width: 9.5em;
+    background-size: cover;
-    min-height: 9.5em;
-    background-size: contain;
-    background-repeat: no-repeat;
     background-position: center;
   }
 
-  .media-indicator-right-section {
+  .media-content {
-    margin-left: 2em;
+    margin: 1em;
   }
 
   .media-indicator-current-song-name {
@@ -66,7 +63,7 @@
     border-radius: 0.2rem;
 
     &.disabled {
-      background: $surface0;
+      background: $surface2;
     }
 
     &.enabled {
@@ -91,7 +88,7 @@
     margin-top: 1rem;
 
     trough {
-      background: $surface0;
+      background: $surface2;
       border-radius: 0.3rem;
 
       highlight,

scss/menus/power.scss

@@ -10,11 +10,18 @@ $popover-padding: 0.6rem * 1.6;
 
 window#verification .verification {
     @include floating-widget;
+    background: $crust;
     padding: 0.35em * 1.6 * 1.5;
     min-width: 20em;
     min-height: 6em;
     font-size: 1.3em;
 
+    .verification-content {
+        background: $base;
+        border-radius: 0.4em;
+        padding: 1em;
+    }
+
     .text-box {
         margin-bottom: 0.3em;
 
@@ -33,45 +40,50 @@ window#verification .verification {
     }
 
     .verification-button {
-        background: $crust;
+        background: $base;
         padding: 0.7em 0em;
         margin: 0.4em 1.7em;
-        border: 0.15em solid;
-        border-color: $crust;
         border-radius: 0.3em;
         opacity: 1;
         transition: border-color 0.2s ease-in-out;
         transition: opacity .3s ease-in-out;
 
+        &.bar-verification_yes {
+            background-color: $green;
+        }
+        &.bar-verification_no {
+            background-color: $red;
+        }
+
         &:hover {
-            &.bar-verification_yes{
+            &.bar-verification_yes {
-                border-color: $green;
+                background: $lavender;
-                transition: border-color 0.2s ease-in-out;
+                transition: background-color 0.2s ease-in-out;
             }
             &.bar-verification_no {
-                border-color: $red;
+                background: $lavender;
-                transition: border-color 0.2s ease-in-out;
+                transition: background-color 0.2s ease-in-out;
             }
         }
         &:focus {
             &.bar-verification_yes{
-                border-color: $green;
+                background: $lavender;
-                transition: border-color 0.2s ease-in-out;
+                transition: background 0.2s ease-in-out;
             }
             &.bar-verification_no {
-                border-color: $red;
+                background: $lavender;
-                transition: border-color 0.2s ease-in-out;
+                transition: background 0.2s ease-in-out;
             }
         }
 
         &:active {
             &.bar-verification_yes {
-                border-color: rgba($green, 0.4);
+                background: rgb($lavender, 0.4);
-                transition: border-color 0.2s ease-in-out;
+                transition: background 0.2s ease-in-out;
             }
             &.bar-verification_no {
-                border-color: rgba($red, 0.4);
+                background: rgb($lavender, 0.4);
-                transition: border-color 0.2s ease-in-out;
+                transition: background 0.2s ease-in-out;
             }
 
             image {
@@ -85,10 +97,10 @@ window#verification .verification {
         }
     }
     .bar-verification_no label {
-        color: $red;
+        color: $mantle;
     }
     .bar-verification_yes label {
-        color: $green;
+        color: $mantle;
     }
 }
 

style.css

@@ -678,11 +678,17 @@ window#verification .verification {
   color: #9278b6;
   border-radius: 0.5rem;
   padding: 1.5rem;
+  background: #11111b;
   padding: 0.84em;
   min-width: 20em;
   min-height: 6em;
   font-size: 1.3em;
 }
+window#verification .verification .verification-content {
+  background: #1e1e2e;
+  border-radius: 0.4em;
+  padding: 1em;
+}
 window#verification .verification .text-box {
   margin-bottom: 0.3em;
 }
@@ -698,39 +704,43 @@ window#verification .verification .text-box .desc {
   padding: 1em 3em;
 }
 window#verification .verification .verification-button {
-  background: #11111b;
+  background: #1e1e2e;
   padding: 0.7em 0em;
   margin: 0.4em 1.7em;
-  border: 0.15em solid;
-  border-color: #11111b;
   border-radius: 0.3em;
   opacity: 1;
   transition: border-color 0.2s ease-in-out;
   transition: opacity 0.3s ease-in-out;
 }
+window#verification .verification .verification-button.bar-verification_yes {
+  background-color: #a6e3a1;
+}
+window#verification .verification .verification-button.bar-verification_no {
+  background-color: #f38ba8;
+}
 window#verification .verification .verification-button:hover.bar-verification_yes {
-  border-color: #a6e3a1;
+  background: #b4befe;
-  transition: border-color 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out;
 }
 window#verification .verification .verification-button:hover.bar-verification_no {
-  border-color: #f38ba8;
+  background: #b4befe;
-  transition: border-color 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out;
 }
 window#verification .verification .verification-button:focus.bar-verification_yes {
-  border-color: #a6e3a1;
+  background: #b4befe;
-  transition: border-color 0.2s ease-in-out;
+  transition: background 0.2s ease-in-out;
 }
 window#verification .verification .verification-button:focus.bar-verification_no {
-  border-color: #f38ba8;
+  background: #b4befe;
-  transition: border-color 0.2s ease-in-out;
+  transition: background 0.2s ease-in-out;
 }
 window#verification .verification .verification-button:active.bar-verification_yes {
-  border-color: rgba(166, 227, 161, 0.4);
+  background: rgba(180, 190, 254, 0.4);
-  transition: border-color 0.2s ease-in-out;
+  transition: background 0.2s ease-in-out;
 }
 window#verification .verification .verification-button:active.bar-verification_no {
-  border-color: rgba(243, 139, 168, 0.4);
+  background: rgba(180, 190, 254, 0.4);
-  transition: border-color 0.2s ease-in-out;
+  transition: background 0.2s ease-in-out;
 }
 window#verification .verification .verification-button:active image {
   opacity: 0.3;
@@ -741,10 +751,10 @@ window#verification .verification .verification-button:active label {
   transition: opacity 0.3s ease-in-out;
 }
 window#verification .verification .bar-verification_no label {
-  color: #f38ba8;
+  color: #181825;
 }
 window#verification .verification .bar-verification_yes label {
-  color: #a6e3a1;
+  color: #181825;
 }
 
 window#powermenu .powermenu {
@@ -992,20 +1002,17 @@ window#powermenu .powermenu.box {
 .menu-items-container.media .menu-section-container {
   margin: 1.3em 0em;
 }
-.menu-items-container.media .media-indicator-items {
+.menu-items-container.media .menu-items-section {
-  margin: 1rem;
+  border-radius: 0.4em;
-  margin-bottom: 1.3rem;
+  padding: 0em;
 }
-.menu-items-container.media .media-indicator-current-album-cover {
+.menu-items-container.media .menu-content {
-  border-radius: 0.25em;
+  border-radius: 0.4em;
-  min-width: 9.5em;
+  background-size: cover;
-  min-height: 9.5em;
-  background-size: contain;
-  background-repeat: no-repeat;
   background-position: center;
 }
-.menu-items-container.media .media-indicator-right-section {
+.menu-items-container.media .media-content {
-  margin-left: 2em;
+  margin: 1em;
 }
 .menu-items-container.media .media-indicator-current-song-name {
   margin-bottom: 0.75rem;
@@ -1040,7 +1047,7 @@ window#powermenu .powermenu.box {
   border-radius: 0.2rem;
 }
 .menu-items-container.media .media-indicator-control-button.disabled {
-  background: #313244;
+  background: #585b70;
 }
 .menu-items-container.media .media-indicator-control-button.enabled {
   background: #b4befe;
@@ -1058,7 +1065,7 @@ window#powermenu .powermenu.box {
   margin-top: 1rem;
 }
 .menu-items-container.media .menu-slider.media.progress trough {
-  background: #313244;
+  background: #585b70;
   border-radius: 0.3rem;
 }
 .menu-items-container.media .menu-slider.media.progress trough highlight,
@@ -1434,26 +1441,41 @@ window#powermenu .powermenu.box {
 .dashboard-content-items .controls-container button.input {
   background: #f5c2e7;
 }
+.dashboard-content-items .controls-container button.wifi:hover {
+  background: rgba(203, 166, 247, 0.3);
+}
+.dashboard-content-items .controls-container button.bluetooth:hover {
+  background: rgba(137, 220, 235, 0.3);
+}
+.dashboard-content-items .controls-container button.notifications:hover {
+  background: rgba(249, 226, 175, 0.3);
+}
+.dashboard-content-items .controls-container button.playback:hover {
+  background: rgba(235, 160, 172, 0.3);
+}
+.dashboard-content-items .controls-container button.input:hover {
+  background: rgba(245, 194, 231, 0.3);
+}
 .dashboard-content-items .controls-container button:hover {
-  background: #585b70;
+  background: #45475a;
 }
 .dashboard-content-items .controls-container button.disabled {
   background: #585b70;
 }
 .dashboard-content-items .controls-container button.disabled.wifi:hover {
-  background: #cba6f7;
+  background: rgba(203, 166, 247, 0.3);
 }
 .dashboard-content-items .controls-container button.disabled.bluetooth:hover {
-  background: #89dceb;
+  background: rgba(137, 220, 235, 0.3);
 }
 .dashboard-content-items .controls-container button.disabled.notifications:hover {
-  background: #f9e2af;
+  background: rgba(249, 226, 175, 0.3);
 }
 .dashboard-content-items .controls-container button.disabled.playback:hover {
-  background: #eba0ac;
+  background: rgba(235, 160, 172, 0.3);
 }
 .dashboard-content-items .controls-container button.disabled.input:hover {
-  background: #f5c2e7;
+  background: rgba(245, 194, 231, 0.3);
 }
 .dashboard-content-items .stats-container {
   margin-top: 0em;