Update media panel styling

modules/menus/media/components/bar.js

@@ -14,6 +14,9 @@ const Bar = (getPlayerInfo) => {
           draw_value: false,
           on_change: ({ value }) => {
             const foundPlayer = getPlayerInfo(media);
+            if (foundPlayer === undefined) {
+              return;
+            }
             return (foundPlayer.position = value * foundPlayer.length);
           },
           setup: (self) => {
@@ -32,7 +35,7 @@ const Bar = (getPlayerInfo) => {
             function updateTooltip() {
               const foundPlayer = getPlayerInfo(media);
               if (foundPlayer === undefined) {
-                return self.tooltip_text = '0:0'
+                return self.tooltip_text = '00:00'
               }
               const curHour = Math.floor(foundPlayer.position / 3600);
               const curMin = Math.floor((foundPlayer.position % 3600) / 60);

modules/menus/media/components/mediainfo.js

@@ -19,7 +19,10 @@ const MediaInfo = (getPlayerInfo) => {
             setup: (self) => {
               self.hook(media, () => {
                 const curPlayer = getPlayerInfo();
-                return (self.label = curPlayer !== undefined ? curPlayer["track-title"] : "No media currently playing");
+                return (self.label =
+                  curPlayer !== undefined && curPlayer["track-title"].length
+                    ? curPlayer["track-title"]
+                    : "No Media Currently Playing");
               });
             },
           }),
@@ -37,7 +40,18 @@ const MediaInfo = (getPlayerInfo) => {
             setup: (self) => {
               self.hook(media, () => {
                 const curPlayer = getPlayerInfo();
-                return (self.label = curPlayer !== undefined ? curPlayer["track-artists"].join(', ') : "-----");
+
+                const makeArtistList = (trackArtists) => {
+                  if (trackArtists.length === 1 && !trackArtists[0].length) {
+                    return "-----";
+                  }
+
+                  return trackArtists.join(", ");
+                };
+                return (self.label =
+                  curPlayer !== undefined && curPlayer["track-artists"].length
+                    ? makeArtistList(curPlayer["track-artists"])
+                    : "-----");
               });
             },
           }),
@@ -55,7 +69,10 @@ const MediaInfo = (getPlayerInfo) => {
             setup: (self) => {
               self.hook(media, () => {
                 const curPlayer = getPlayerInfo();
-                return (self.label = curPlayer !== undefined ? curPlayer["track-album"] : "---");
+                return (self.label =
+                  curPlayer !== undefined && curPlayer["track-album"].length
+                    ? curPlayer["track-album"]
+                    : "---");
               });
             },
           }),

scss/menus/media.scss

@@ -90,10 +90,11 @@
 
     trough {
       background: $surface2;
-      border-radius: 0.4em;
+      border-radius: 0.2em;
 
       highlight,
       progress {
+        border-radius: 0.2em;
         min-height: .85em;
         background: $lavender;
       }

style.css

@@ -1067,10 +1067,11 @@ window#powermenu .powermenu.box {
 }
 .menu-items-container.media .menu-slider.media.progress trough {
   background: #585b70;
-  border-radius: 0.4em;
+  border-radius: 0.2em;
 }
 .menu-items-container.media .menu-slider.media.progress trough highlight,
 .menu-items-container.media .menu-slider.media.progress trough progress {
+  border-radius: 0.2em;
   min-height: 0.85em;
   background: #b4befe;
 }