From 5bc04e4dffa5fa62c86037f97c12c85716b4eb0a Mon Sep 17 00:00:00 2001 From: retrozinndev Date: Fri, 20 Dec 2024 15:46:04 -0300 Subject: [PATCH] :sparkles: eww: add floating media popup on bar media click --- eww/eww.scss | 15 +- eww/scripts/mediaplayer.py | 7 +- eww/styles/bar.scss | 65 +++++---- eww/styles/control-center.scss | 58 +------- eww/styles/general.scss | 57 ++++++++ eww/variables.yuck | 4 + eww/widgets/bar/cc-toggle.yuck | 10 +- eww/widgets/bar/media.yuck | 26 ++-- eww/widgets/control-center/big-media.yuck | 128 +++++++++++------- eww/widgets/control-center/notifications.yuck | 3 +- eww/windows/control-center.yuck | 2 +- eww/windows/floating-media.yuck | 9 +- mako/config | 3 + 13 files changed, 224 insertions(+), 163 deletions(-) diff --git a/eww/eww.scss b/eww/eww.scss index 7bcadb0..badd0e7 100644 --- a/eww/eww.scss +++ b/eww/eww.scss @@ -1,9 +1,10 @@ @import "../../.cache/wal/colors.scss"; -@import "./styles/general.scss"; -@import "./styles/bar.scss"; -@import "./styles/calendar.scss"; -@import "./styles/control-center.scss"; -@import "./styles/powermenu.scss"; -@import "./styles/volume-control.scss"; -@import "./styles/floating-notifications.scss"; + +@import "styles/general.scss"; +@import "styles/bar.scss"; +@import "styles/calendar.scss"; +@import "styles/control-center.scss"; +@import "styles/powermenu.scss"; +@import "styles/volume-control.scss"; +@import "styles/floating-notifications.scss"; diff --git a/eww/scripts/mediaplayer.py b/eww/scripts/mediaplayer.py index 09c1c2d..336e689 100755 --- a/eww/scripts/mediaplayer.py +++ b/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") diff --git a/eww/styles/bar.scss b/eww/styles/bar.scss index 4c64320..f4b8499 100644 --- a/eww/styles/bar.scss +++ b/eww/styles/bar.scss @@ -65,38 +65,46 @@ } .systray { - margin: 0 6px; - + all: unset; + & > * > * { margin: 0 6px; } } - .mediaplayer { border-radius: 12px; & > .media { border-radius: inherit; - background: darken($color: $color3, $amount: 5); - & > label { - color: $foreground; - font-size: inherit; - - &:first-child { - margin-left: 8px; - } - - &:last-child { - margin-right: 8px; + &:hover { + & > box { + box-shadow: inset 0 0 0 50px rgba($color: $foreground, $alpha: .1); } } + & > box { + border-radius: inherit; + background: darken($color: $color3, $amount: 5); - & > box.separator { - margin: 8px 4px; - padding: 0 1px; - background: darken($color: $foreground, $amount: 20); + & > label { + color: $foreground; + font-size: inherit; + + &:first-child { + margin-left: 8px; + } + + &:last-child { + margin-right: 8px; + } + } + + & > box.separator { + margin: 8px 4px; + padding: 0 1px; + background: darken($color: $foreground, $amount: 20); + } } } @@ -104,7 +112,7 @@ 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-bottom-right-radius: 12px; + border-radius: inherit; } } } @@ -191,11 +198,19 @@ } .control-center-toggle { - padding-left: 12px; - padding-right: 14px; + border-radius: 12px; + + &:hover { + background: darken($color: $color2, $amount: 10); + } - label { - font-size: 12px; + & > box { + padding-left: 12px; + padding-right: 14px; + + label { + font-size: 12px; + } } &.open { diff --git a/eww/styles/control-center.scss b/eww/styles/control-center.scss index 6b81569..36d7cbf 100644 --- a/eww/styles/control-center.scss +++ b/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); } } diff --git a/eww/styles/general.scss b/eww/styles/general.scss index eca3090..8d42843 100644 --- a/eww/styles/general.scss +++ b/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; + } +} diff --git a/eww/variables.yuck b/eww/variables.yuck index eacc759..26625bb 100644 --- a/eww/variables.yuck +++ b/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) diff --git a/eww/widgets/bar/cc-toggle.yuck b/eww/widgets/bar/cc-toggle.yuck index 8c2c3bd..facd6d1 100644 --- a/eww/widgets/bar/cc-toggle.yuck +++ b/eww/widgets/bar/cc-toggle.yuck @@ -1,6 +1,10 @@ (defwidget cc-toggle [] - (button :onclick "sh scripts/eww-window.sh toggle control-center" - :class "control-center-toggle ${ window_state_control-center == "open" ? "open" : "closed" }" - { notification_modes =~ "dnd" ? "󰂠" : "󰂚"}) + (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" }" + (box :class "button" + { notification_modes =~ "dnd" ? "󰂠" : "󰂚"} + ) + ) ) diff --git a/eww/widgets/bar/media.yuck b/eww/widgets/bar/media.yuck index fe0fd0d..b99ba44 100644 --- a/eww/widgets/bar/media.yuck +++ b/eww/widgets/bar/media.yuck @@ -10,26 +10,28 @@ "${ 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" - :space-evenly false - :tooltip "${json_media.title} - ${json_media.artist}" + (eventbox :class "media" + :tooltip "${json_media.title} - ${json_media.artist}" - (label :class "player" - :text { json_media.player == "spotify" ? " " : "󰎇 " }) + (box :space-evenly false + (label :class "player" + :text { json_media.player == "spotify" ? " " : "󰎇 " }) - (label :class "media-title" - :text "${json_media.title}" - :limit-width 40) + (label :class "media-title" + :text "${json_media.title}" + :limit-width 40) - (box :class "separator") + (box :class "separator") - (label :class "media-artist" - :text "${json_media.artist}" - :limit-width 25) + (label :class "media-artist" + :text "${json_media.artist}" + :limit-width 25) + ) ) (revealer :class "media-controls-revealer" :reveal { media_reveal_controls ? "${ window_state_floating-media == 'closed' ? true : false }" : false } diff --git a/eww/widgets/control-center/big-media.yuck b/eww/widgets/control-center/big-media.yuck index 25da23d..2801da7 100644 --- a/eww/widgets/control-center/big-media.yuck +++ b/eww/widgets/control-center/big-media.yuck @@ -1,58 +1,86 @@ -(defwidget big-media [ album_background ] - (box :orientation "horizontal" - :space-evenly false - :class "big-media ${ album_background == true ? 'album-bg' : '' }" - :style { album_background == true ? "background-image: image(url('${json_media.artUrl}'))" : "" } +(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 :class "album-image" - :width 98 - :height 87 - :style "background-image: image(url('${json_media.artUrl}'));" - :valign "center") + (box :orientation "horizontal" + :space-evenly false + :class "media" - (box :orientation "vertical" + (box :class "album-image" + :width 98 + :height 87 + :style "background-image: image(url('${json_media.artUrl}'));" + :valign "center") + + (box :orientation "vertical" + :space-evenly false + :class "right" + :hexpand true + + (box :class "media-info" :space-evenly false - :class "right" - :hexpand true + :halign "fill" + :orientation "vertical" - (box :class "media-info" - :space-evenly false - :halign "fill" - :orientation "vertical" - - (label :class "title" - :text "${json_media.title}" - :xalign 0 - :wrap false - :hexpand true - :show-truncated true) - (label :class "artist" - :text "${json_media.artist}" - :xalign 0 - :wrap false - :hexpand true - :show-truncated true) - ) - - (box :class "controls button-row" - :orientation "horizontal" - :space-evenly false - :halign "start" - - (button :class "shuffle" - :onclick "playerctl --player=${json_media.player} shuffle Toggle" - "󰒝") - (button :class "previous" - :onclick "playerctl --player=${json_media.player} previous" - "󰒮") - (button :class "play-pause" - :onclick "playerctl --player=${json_media.player} play-pause" - { json_media.status == "playing" ? "󰏤" : "󰐊" }) - (button :class "next" - :onclick "playerctl --player=${json_media.player} next" - "󰒭") - ) + (label :class "title" + :text "${json_media.title}" + :xalign 0 + :wrap false + :hexpand true + :show-truncated true) + (label :class "artist" + :text "${json_media.artist}" + :xalign 0 + :wrap false + :hexpand true + :show-truncated true) ) + + (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" + "󰒭") + ) + ) + ) ) + ) ) diff --git a/eww/widgets/control-center/notifications.yuck b/eww/widgets/control-center/notifications.yuck index 374ab31..b731269 100644 --- a/eww/widgets/control-center/notifications.yuck +++ b/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}" + :onclick "makoctl invoke -n ${notification.id.data} view" :icon "${notification.app-name.data}" ) ) diff --git a/eww/windows/control-center.yuck b/eww/windows/control-center.yuck index 1474d85..2c393f0 100644 --- a/eww/windows/control-center.yuck +++ b/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) ) ) diff --git a/eww/windows/floating-media.yuck b/eww/windows/floating-media.yuck index dc6bdd5..1d6f984 100644 --- a/eww/windows/floating-media.yuck +++ b/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) ) ) diff --git a/mako/config b/mako/config index 3a9c1de..a69586e 100644 --- a/mako/config +++ b/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