✨ eww: add floating media popup on bar media click

eww/eww.scss

@@ -1,9 +1,10 @@
 
 @import "../../.cache/wal/colors.scss";
-@import "./styles/general.scss";
+
-@import "./styles/bar.scss";
+@import "styles/general.scss";
-@import "./styles/calendar.scss";
+@import "styles/bar.scss";
-@import "./styles/control-center.scss";
+@import "styles/calendar.scss";
-@import "./styles/powermenu.scss";
+@import "styles/control-center.scss";
-@import "./styles/volume-control.scss";
+@import "styles/powermenu.scss";
-@import "./styles/floating-notifications.scss";
+@import "styles/volume-control.scss";
+@import "styles/floating-notifications.scss";

eww/scripts/mediaplayer.py

@@ -103,7 +103,7 @@ class PlayerManager:
         else:    
             self.clear_output()
 
-    def on_metadata_changed(self, player, metadata, _=None):
+    de on_metadata_changed(self, player, metadata, _=None):
         logger.debug(f"Metadata changed for player {player.props.player_name}")
         player_name = player.props.player_name
         artist = player.get_artist()
@@ -114,8 +114,6 @@ class PlayerManager:
             track_info = "Advertisement"
         elif artist != None and title != None:
             track_info = f"{artist} - {title}"
-            if(artist == "" or artist == " "):
-                track_info = f"{title}"
         else:
             track_info = title
 
@@ -135,7 +133,8 @@ class PlayerManager:
             "artist": player.get_artist(),
             "player": player.props.player_name.lower(),
             "artUrl": player.print_metadata_prop("mpris:artUrl"),
-            "length": player.print_metadata_prop("mpris:length")
+            "length": player.print_metadata_prop("mpris:length"),
+            "url": player.print_metadata_prop("xesam:url")
         }
 
         sys.stdout.write(json.dumps(output) + "\n")

eww/styles/bar.scss

@@ -65,19 +65,26 @@
 }
 
 .systray {
-    margin: 0 6px;
+    all: unset;
 
     & > * > * {
         margin: 0 6px;
     }
 }
 
-
 .mediaplayer {
     border-radius: 12px;
 
     & > .media {
         border-radius: inherit;
+        
+        &:hover {
+            & > box {
+                box-shadow: inset 0 0 0 50px rgba($color: $foreground, $alpha: .1);
+            }
+        }
+        & > box {
+            border-radius: inherit;
             background: darken($color: $color3, $amount: 5);
 
             & > label {
@@ -99,12 +106,13 @@
                 background: darken($color: $foreground, $amount: 20);
             }
         }
+    }
 
     &.revealed {
         background: darken($color: $color3, $amount: 25);
         transition: 80ms linear;
 
-        .media {
+        .media > box {
             border-top-right-radius: 0;
             border-bottom-right-radius: 0;
         }
@@ -115,8 +123,7 @@
             border-bottom-right-radius: 12px;
 
             & button:last-child {
-                border-top-right-radius: 12px;
+                border-radius: inherit;
-                border-bottom-right-radius: 12px;
             }
         }
     }
@@ -191,12 +198,20 @@
 }
 
 .control-center-toggle {
+    border-radius: 12px;
+    
+    &:hover {
+        background: darken($color: $color2, $amount: 10);
+    }
+
+    & > box {
         padding-left: 12px;
         padding-right: 14px;
 
         label {
             font-size: 12px;
         }
+    }
 
     &.open {
         background: darken($color: $color3, $amount: 10);

eww/styles/control-center.scss

@@ -39,62 +39,6 @@ box.cc {
     }
 }
 
-.big-media {
-    padding: 16px;
-    margin: 6px 0;
-    border-radius: 18px;
-
-    & > .album-image {
-        background-size: 100%;
-        background-repeat: no-repeat;
-        background-position: center 0;
-        margin-right: 12px;
-        border-radius: 11px;
-    }
-
-    & > .right {
-
-        & > .media-info { 
-            label {
-                font-family: "Cantarell", "Noto Sans CJK JP";
-            }
-
-            & label.title {
-                font-weight: 700;
-                font-size: 16px;
-                margin-bottom: 6px;
-            }
-
-            & label.artist {
-                font-weight: 600;
-                font-size: 12px;
-                margin-bottom: 12px;
-            }
-        }
-
-        & > .controls {
-            padding: 0px;
-
-            & > button {
-                padding: 4px 9px;
-
-                & > label {
-                    font-size: 13.3px;
-                }
-            }
-
-            & > button.repeat {
-                padding-right: 11px;
-            }
-        }
-    }
-
-    &.album-bg {
-        box-shadow: inset 0 0 0 100px rgba($background, .6);
-        background-size: cover;
-    }
-}
-
 .cc-notifications {
     & > .vertical-scroll {
         .notifications {
@@ -186,7 +130,7 @@ box.cc {
 
         &:checked {
             & > box {
-                background: darken($color: $color1, $amount: 12);
+                background: darken($color: $color3, $amount: 12);
             }
         }
 

eww/styles/general.scss

@@ -145,3 +145,60 @@ tooltip {
         box-shadow: 0 3px 5px 1px rgba($color: #000000, $alpha: .8);
     }
 }
+
+
+.big-media {
+    padding: 16px;
+    margin: 6px 0;
+    border-radius: 18px;
+
+    & > box > .album-image {
+        background-size: 100%;
+        background-repeat: no-repeat;
+        background-position: center 0;
+        margin-right: 12px;
+        border-radius: 11px;
+    }
+
+    & > box > .right {
+
+        & > .media-info { 
+            label {
+                font-family: "Cantarell", "Noto Sans CJK JP";
+            }
+
+            & label.title {
+                font-weight: 700;
+                font-size: 16px;
+                margin-bottom: 6px;
+            }
+
+            & label.artist {
+                font-weight: 600;
+                font-size: 12px;
+                margin-bottom: 12px;
+            }
+        }
+
+        & > .controls {
+            padding: 0px;
+
+            & > button {
+                padding: 4px 9px;
+
+                & > label {
+                    font-size: 13.3px;
+                }
+            }
+
+            & > button.repeat {
+                padding-right: 11px;
+            }
+        }
+    }
+
+    &.album-bg {
+        box-shadow: inset 0 0 0 100px rgba($background, .55);
+        background-size: cover;
+    }
+}

eww/variables.yuck

@@ -59,6 +59,10 @@
 (defpoll notification_modes :interval "1s"
 `makoctl mode | xargs`)
 
+(defpoll media_shuffle_status :interval "1.5s"
+                              :run-while { json_media.player != "" 
+                                && json_media.player != "null" }
+`playerctl shuffle`)
 
 ; Variables
 (defvar hold_volume_popup false)

eww/widgets/bar/cc-toggle.yuck

@@ -1,6 +1,10 @@
 
 (defwidget cc-toggle []
-  (button :onclick "sh scripts/eww-window.sh toggle control-center" 
+  (eventbox :onclick "sh scripts/eww-window.sh toggle control-center" 
+            :onrightclick "makoctl mode -t dnd"
             :class "control-center-toggle ${ window_state_control-center == "open" ? "open" : "closed" }"
-  { notification_modes =~ "dnd" ? "󰂠" : "󰂚"})
+    (box :class "button"
+      { notification_modes =~ "dnd" ? "󰂠" : "󰂚"}
+    )
+  )
 )

eww/widgets/bar/media.yuck

@@ -10,14 +10,15 @@
                   "${ active_window.class =~ json_media.player || active_window.title =~ json_media.title ? false : true }" 
               }
             :onclick "sh scripts/eww-window.sh toggle floating-media"
+            :class "mediaplayer-eventbox"
 
     (box :class "mediaplayer ${ media_reveal_controls && window_state_floating-media == "closed" ? 'revealed' : '' }"
          :space-evenly false
 
-      (box :class "media"
+      (eventbox :class "media"
-           :space-evenly false
                 :tooltip "${json_media.title} - ${json_media.artist}"
 
+        (box :space-evenly false
           (label :class "player"
                  :text { json_media.player == "spotify" ? " " : "󰎇 " })
 
@@ -31,6 +32,7 @@
                  :text "${json_media.artist}"
                  :limit-width 25)
         )
+      )
       (revealer :class "media-controls-revealer"
                 :reveal { media_reveal_controls ? "${ window_state_floating-media == 'closed' ? true : false }" : false }
                 :transition "slideright"

eww/widgets/control-center/big-media.yuck

@@ -1,9 +1,13 @@
-(defwidget big-media [ album_background ]
+(defwidget big-media [ album-background ?player-info ]
+    (box :class "big-media ${ album-background == true ? 'album-bg' : '' }"
+         :style { album-background == true ? "background-image: image(url('${json_media.artUrl}'))" : "" }
+         :visible { json_media.title != "null" && json_media.artist != "null" ? true : false }
+         :space-evenly false
+         :orientation "vertical"
+
     (box :orientation "horizontal"
            :space-evenly false 
-         :class "big-media ${ album_background == true ? 'album-bg' : '' }"
+           :class "media"
-         :style { album_background == true ? "background-image: image(url('${json_media.artUrl}'))" : "" }
-         :visible { json_media.title != "null" && json_media.artist != "null" ? true : false }
 
       (box :class "album-image"
            :width 98
@@ -35,24 +39,48 @@
                  :show-truncated true)
         )
 
-            (box :class "controls button-row"
+        (box :class "controls"
+             :orientation "horizontal"
+             :space-evenly false
+             :halign "start"
+
+          (box :class "button-row"
+               :orientation "horizontal"
+               :space-evenly false
+               :halign "start"
+               :visible { json_media.url != "null" ? true : false }
+
+            (button :class "url"
+                    :onclick "wl-copy '${json_media.url}'"
+                    :style "padding-right: 13px;"
+                    :tooltip "Copy link to Clipboard"
+            "󰌷")
+          )
+
+          (box :class "button-row"
                :orientation "horizontal"
                :space-evenly false
                :halign "start"
 
             (button :class "shuffle"
                     :onclick "playerctl --player=${json_media.player} shuffle Toggle"
+                    :tooltip "Toggle shuffle"
             "󰒝")
             (button :class "previous"
                     :onclick "playerctl --player=${json_media.player} previous"
+                    :tooltip "Previous"
             "󰒮")
             (button :class "play-pause"
                     :onclick "playerctl --player=${json_media.player} play-pause"
+                    :tooltip { json_media.status == "playing" ? "Pause" : "Play" }
             { json_media.status == "playing" ? "󰏤" : "󰐊" })
             (button :class "next"
                     :onclick "playerctl --player=${json_media.player} next"
+                    :tooltip "Next"
             "󰒭")
           )
         )
       )
     )
+  )
+)

eww/widgets/control-center/notifications.yuck

@@ -21,8 +21,7 @@
                         :image "${notification.app-icon.data}"
                         :summary "${notification.summary.data}"
                         :body "${notification.body.data}"
-                        ;:onclickclose "dunstctl history-rm ${notification.id.data}" ; needs fix
+                        :onclick "makoctl invoke -n ${notification.id.data} view"
-                        :onclick "makoctl invoke -n ${notification.id.data}"
                         :icon "${notification.app-name.data}"
           )
         )

eww/windows/control-center.yuck

@@ -17,7 +17,7 @@
          :space-evenly false
         (top-bar)
         (toggles)
-        (big-media :album_background true)
+        (big-media :album-background true)
         (notifications)
     )
 )

eww/windows/floating-media.yuck

@@ -1,10 +1,15 @@
 (defwindow floating-media []
     :monitor 0
-    :geometry (geometry :anchor "top center")
+    :geometry (geometry :anchor "top center"
+                        :width "350px")
     :exclusive false
     :stacking "overlay"
     :focusable false
   (box :class "floating-media"
-    (big-media :album_background true)
+       :orientation "vertical"
+       :space-evenly false
+       :style "box-shadow: 0 5px 6px 1px rgb(0, 0, 0);"
+    (big-media :album-background true
+               :player-info true)
   )
 )

mako/config

@@ -1,3 +1,6 @@
+# Lightweight Wayland Notification Daemon (mako) Configuration File
+# the man page of mako config file is a mess :skull:
+
 # general
 max-history=14
 sort=-time