Finish Media module.

modules/menus/DropdownMenu.js

@@ -30,7 +30,7 @@ const moveBoxToCursor = (self, minWidth, minHeight, fixed) => {
       marginRight = 13;
       marginLeft = monWidth - minWidth - 13;
     }
-    const marginTop = 40;
+    const marginTop = 43;
     const marginBottom = monHeight + minHeight - marginTop;
     self.set_margin_left(marginLeft);
     self.set_margin_right(marginRight);
@@ -58,7 +58,7 @@ export default ({
     keymode: "on-demand",
     exclusivity,
     layer: "top",
-    anchor: ["top"],
+    anchor: ["top", "left"],
     child: Widget.EventBox({
       on_primary_click: () => App.closeWindow(name),
       on_secondary_click: () => App.closeWindow(name),

modules/menus/bluetooth/index.js

@@ -317,7 +317,18 @@ export default () => {
               Widget.Box({
                 hexpand: true,
                 hpack: "end",
-                child: Widget.Switch({
+                children: [
+                  // NOTE: Do we want to add this back to restart bluetooth service if it every hangs?
+                  // Widget.Button({
+                  //   class_name: "menu-icon-button restart-bluetooth-service",
+                  //   tooltip_text: "Restart Bluetooth Service",
+                  //   on_primary_click: () => Utils.execAsync('systemctl restart bluetooth'),
+                  //   child: Widget.Label({
+                  //     class_name: "menu-icon-button-label",
+                  //     label: "󱄌"
+                  //   })
+                  // }),
+                  Widget.Switch({
                     class_name: "menu-switch bluetooth",
                     active: bluetooth.bind("enabled"),
                     on_activate: ({ active }) =>
@@ -332,6 +343,7 @@ export default () => {
                         ),
                       ),
                   }),
+                ],
               }),
             ],
           }),

modules/menus/media/index.js

@@ -1,30 +1,361 @@
-const audio = await Service.import("mpris");
+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: "menu-items",
+      class_name: "media-indicator-container",
-      child: Widget.Box({
       vertical: true,
       hexpand: true,
-        class_name: "menu-items-container",
+      vexpand: true,
+      child: Widget.Box({
+        class_name: "media-indicator-items",
+        vexpand: true,
+        hexpand: true,
+        vertical: true,
         children: [
           Widget.Box({
-            class_name: "menu-dropdown-label-container",
+            class_name: "media-indicator-current-player-info",
-            hpack: "start",
+            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({
-                class_name: "menu-dropdown-label media",
+                                    truncate: "end",
-                label: "Media",
+                                    wrap: true,
+                                    class_name:
+                                      "media-indicator-current-song-name-label",
+                                    label: curPlayer["track-title"],
                                   }),
                                 ],
                               }),
-          Widget.Separator({
+                              Widget.Box({
-            class_name: "menu-separator",
+                                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.Label({
+                                class_name: "media-indicator-time current",
+                                vpack: "center",
+                                setup: (self) => {
+                                  function update() {
+                                    const curMin = Math.floor(
+                                      curPlayer.position / 60,
+                                    );
+                                    const curSec = Math.floor(
+                                      curPlayer.position % 60,
+                                    );
+
+                                    if (
+                                      typeof curPlayer.position === "number" &&
+                                      curPlayer.position >= 0
+                                    ) {
+                                      self.label = `${curMin < 10 ? "0" + curMin : curMin}:${curSec < 10 ? "0" + curSec : curSec}`;
+                                    } else {
+                                      self.label = `00:00`;
+                                    }
+                                  }
+                                  self.poll(1000, update);
+                                  self.hook(curPlayer, update);
+                                },
+                              }),
+                              Widget.Box({
+                                hexpand: true,
+                                child: Widget.Slider({
+                                  hexpand: true,
+                                  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);
+                                  },
+                                }),
+                              }),
+                              Widget.Label({
+                                class_name: "media-indicator-time total",
+                                setup: (self) => {
+                                  const update = () => {
+                                    const totalSeconds = curPlayer.length;
+                                    const curHour = Math.floor(
+                                      totalSeconds / 3600,
+                                    );
+                                    const curMin = Math.floor(
+                                      (totalSeconds % 3600) / 60,
+                                    );
+                                    const curSec = Math.floor(
+                                      totalSeconds % 60,
+                                    );
+
+                                    self.label = `${
+                                      curHour > 0
+                                        ? (curHour < 10
+                                            ? "0" + curHour
+                                            : curHour) + ":"
+                                        : ""
+                                    }${curMin < 10 ? "0" + curMin : curMin}:${
+                                      curSec < 10 ? "0" + curSec : curSec
+                                    }`;
+                                  };
+
+                                  self.hook(curPlayer, update);
+                                },
+                              }),
+                            ],
+                          }),
+                        ],
+                      }),
+                    ]);
+                  }
+
+                  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/network/index.js

@@ -2,10 +2,6 @@ const network = await Service.import("network");
 import DropdownMenu from "../DropdownMenu.js";
 
 export default () => {
-  network.connect("changed", (value) => {
-    // console.log(JSON.stringify(value, null, 2));
-  });
-
   const pendingAuth = Variable("");
 
   return DropdownMenu({

scss/bar/media.scss

@@ -2,10 +2,10 @@
 
 .media {
   font-size: 1rem;
-  color: $green;
+  color: $lavender;
 }
 
 .bar-media_icon {
   font-size: 1.2em;
-  color: $green;
+  color: $lavender;
 }

scss/main.scss

@@ -30,6 +30,7 @@
 @import "menus/audiomenu";
 @import "menus/network";
 @import "menus/bluetooth";
+@import "menus/media";
 
 //notifications
 @import "notifications/popups";

scss/menus/media.scss

@@ -0,0 +1,162 @@
+@import "../colors";
+
+.media-indicator-container {
+  min-width: 40rem;
+  min-height: 10rem;
+  background: $mantle;
+  border: 0.25rem solid $surface0; 
+  border-radius: 0.4rem;
+}
+
+.media-indicator-items {
+  margin: 1rem;
+  margin-bottom: 1.3rem;
+}
+
+.media-indicator-current-album-cover {
+  border: 0.25rem solid $surface0; 
+  background-color: $surface0;
+  border-radius: 0.25rem;
+  min-width: 11rem;
+  min-height: 11rem;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.media-indicator-right-section {
+  margin-left: 2rem;
+}
+
+.media-indicator-current-song-name {
+  margin-bottom: 0.75rem;
+}
+
+.media-indicator-current-song-author {
+  margin-bottom: 0.5rem;
+}
+
+.media-indicator-current-song-name-label {
+  color: $lavender;
+  font-size: 1.65rem;
+}
+
+.media-indicator-current-song-author-label {
+  color: $teal;
+  font-size: 1.1rem;
+}
+
+.media-indicator-current-song-album-label {
+  color: $pink;
+  font-size: 1.1rem;
+}
+
+.media-indicator-current-controls {
+  margin-top: 1.5rem;
+  margin-bottom: 0.2rem;
+}
+
+.media-indicator-control {
+  margin: 0rem 0.5rem;
+}
+
+.media-indicator-time {
+  color: $overlay2;
+  font-size: 0.9rem;
+  font-weight: 800;
+  margin-top: 0.9rem;
+
+  &.total {
+    margin-left: 1.2rem;
+  }
+
+  &.current {
+    margin-right: 1.2rem;
+  }
+}
+
+.media-indicator-control-button {
+  background: $lavender;
+  color: $crust;
+  min-height: 2.1rem;
+  min-width: 2.4rem;
+  border-radius: 0.2rem;
+
+  tooltip {
+    min-width: 10rem;
+    min-height: 10rem;
+    background: red;
+  }
+
+  &.disabled {
+    background: $surface0;
+  }
+
+  &.enabled {
+    background: $lavender;
+    
+    &:hover {
+      background: $pink;
+    }
+
+    &.active {
+      background: $pink;
+    }
+  }
+
+}
+
+image {
+  font-size: 1.5rem;
+}
+
+.menu-slider.media.progress {
+  margin-top: 1rem;
+  min-height: 2rem;
+  min-width: 17rem;
+
+  trough {
+    background: $base;
+    border-radius: 0.3rem;
+
+    highlight,
+    progress {
+      min-height: 1rem;
+      background: $pink;
+      border-radius: 0.3rem;
+    }
+  }
+
+  slider {
+    box-shadow: none;
+    background-color: transparent;
+    min-height: 1.2rem;
+    min-width: 1.2rem;
+    border: 0rem solid transparent;
+    border-radius: 0.3rem;
+  }
+
+  &:hover {
+    trough {
+      background: $surface0;
+    }
+
+    slider {
+      background: $overlay0;
+      box-shadow: none;
+    }
+  }
+
+  &:disabled {
+
+    highlight,
+    progress {
+    }
+  }
+
+  trough:focus {
+
+    slider {
+    }
+  }
+}

scss/menus/menu.scss

@@ -1,13 +1,12 @@
 .menu-slider {
-    // @include unset($rec: true);
-
     trough {
         background: $base;
+        border-radius: 0.3rem;
 
         highlight,
         progress {
             background: $peach;
-            border-radius: 0.7rem;
+            border-radius: 0.3rem;
         }
     }
 
@@ -17,7 +16,7 @@
         min-height: 1.6rem;
         min-width: 1.6rem;
         border: 0rem solid transparent;
-        border-radius: 0.7rem;
+        border-radius: 0.3rem;
     }
 
     &:hover {
@@ -30,23 +29,11 @@
             box-shadow: none;
         }
     }
-
-    &:disabled {
-
-        highlight,
-        progress {
-        }
-    }
-
-    trough:focus {
-
-        slider {
-        }
-    }
 }
 
 .menu-switch {
     background-color: $surface0;
+        border-radius: 0.3rem;
 
     &:checked {
         background: $sky;
@@ -56,7 +43,7 @@
         highlight,
         progress {
             background-color: $peach;
-            border-radius: 0.7rem;
+            border-radius: 0.3rem;
         }
     }
 
@@ -66,7 +53,7 @@
         min-height: 1.2rem;
         min-width: 1.2rem;
         border: 0rem solid transparent;
-        border-radius: 0.7rem;
+        border-radius: 0.3rem;
         margin: 0.1rem 0.2rem;
     }
 

style.css

@@ -291,12 +291,12 @@ spinner:checked {
 
 .media {
   font-size: 1rem;
-  color: #a6e3a1;
+  color: #b4befe;
 }
 
 .bar-media_icon {
   font-size: 1.2em;
-  color: #a6e3a1;
+  color: #b4befe;
 }
 
 .bar-network {
@@ -421,11 +421,12 @@ spinner:checked {
 
 .menu-slider trough {
   background: #1e1e2e;
+  border-radius: 0.3rem;
 }
 .menu-slider trough highlight,
 .menu-slider trough progress {
   background: #fab387;
-  border-radius: 0.7rem;
+  border-radius: 0.3rem;
 }
 .menu-slider slider {
   box-shadow: none;
@@ -433,7 +434,7 @@ spinner:checked {
   min-height: 1.6rem;
   min-width: 1.6rem;
   border: 0rem solid transparent;
-  border-radius: 0.7rem;
+  border-radius: 0.3rem;
 }
 .menu-slider:hover trough {
   background: #313244;
@@ -442,8 +443,10 @@ spinner:checked {
   background: #6c7086;
   box-shadow: none;
 }
+
 .menu-switch {
   background-color: #313244;
+  border-radius: 0.3rem;
 }
 .menu-switch:checked {
   background: #89dceb;
@@ -451,7 +454,7 @@ spinner:checked {
 .menu-switch trough highlight,
 .menu-switch trough progress {
   background-color: #fab387;
-  border-radius: 0.7rem;
+  border-radius: 0.3rem;
 }
 .menu-switch slider {
   box-shadow: none;
@@ -459,7 +462,7 @@ spinner:checked {
   min-height: 1.2rem;
   min-width: 1.2rem;
   border: 0rem solid transparent;
-  border-radius: 0.7rem;
+  border-radius: 0.3rem;
   margin: 0.1rem 0.2rem;
 }
 .menu-switch:hover trough {
@@ -892,6 +895,138 @@ window#powermenu .powermenu.box {
   color: #89dceb;
 }
 
+.media-indicator-container {
+  min-width: 40rem;
+  min-height: 10rem;
+  background: #181825;
+  border: 0.25rem solid #313244;
+  border-radius: 0.4rem;
+}
+
+.media-indicator-items {
+  margin: 1rem;
+  margin-bottom: 1.3rem;
+}
+
+.media-indicator-current-album-cover {
+  border: 0.25rem solid #313244;
+  background-color: #313244;
+  border-radius: 0.25rem;
+  min-width: 11rem;
+  min-height: 11rem;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.media-indicator-right-section {
+  margin-left: 2rem;
+}
+
+.media-indicator-current-song-name {
+  margin-bottom: 0.75rem;
+}
+
+.media-indicator-current-song-author {
+  margin-bottom: 0.5rem;
+}
+
+.media-indicator-current-song-name-label {
+  color: #b4befe;
+  font-size: 1.65rem;
+}
+
+.media-indicator-current-song-author-label {
+  color: #94e2d5;
+  font-size: 1.1rem;
+}
+
+.media-indicator-current-song-album-label {
+  color: #f5c2e7;
+  font-size: 1.1rem;
+}
+
+.media-indicator-current-controls {
+  margin-top: 1.5rem;
+  margin-bottom: 0.2rem;
+}
+
+.media-indicator-control {
+  margin: 0rem 0.5rem;
+}
+
+.media-indicator-time {
+  color: #9399b2;
+  font-size: 0.9rem;
+  font-weight: 800;
+  margin-top: 0.9rem;
+}
+.media-indicator-time.total {
+  margin-left: 1.2rem;
+}
+.media-indicator-time.current {
+  margin-right: 1.2rem;
+}
+
+.media-indicator-control-button {
+  background: #b4befe;
+  color: #11111b;
+  min-height: 2.1rem;
+  min-width: 2.4rem;
+  border-radius: 0.2rem;
+}
+.media-indicator-control-button tooltip {
+  min-width: 10rem;
+  min-height: 10rem;
+  background: red;
+}
+.media-indicator-control-button.disabled {
+  background: #313244;
+}
+.media-indicator-control-button.enabled {
+  background: #b4befe;
+}
+.media-indicator-control-button.enabled:hover {
+  background: #f5c2e7;
+}
+.media-indicator-control-button.enabled.active {
+  background: #f5c2e7;
+}
+
+image {
+  font-size: 1.5rem;
+}
+
+.menu-slider.media.progress {
+  margin-top: 1rem;
+  min-height: 2rem;
+  min-width: 17rem;
+}
+.menu-slider.media.progress trough {
+  background: #1e1e2e;
+  border-radius: 0.3rem;
+}
+.menu-slider.media.progress trough highlight,
+.menu-slider.media.progress trough progress {
+  min-height: 1rem;
+  background: #f5c2e7;
+  border-radius: 0.3rem;
+}
+.menu-slider.media.progress slider {
+  box-shadow: none;
+  background-color: transparent;
+  min-height: 1.2rem;
+  min-width: 1.2rem;
+  border: 0rem solid transparent;
+  border-radius: 0.3rem;
+}
+.menu-slider.media.progress:hover trough {
+  background: #313244;
+}
+.menu-slider.media.progress:hover slider {
+  background: #6c7086;
+  box-shadow: none;
+}
 .notification-card-container {
   margin-top: 3.5rem;
 }