Olivier/colorshell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ eww: add floating media popup on bar media click

Browse Source
This commit is contained in:
retrozinndev
2024-12-20 15:46:04 -03:00
parent b0d61250e8
commit 5bc04e4dff
13 changed files with 224 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
eww/eww.scss
+8 -7
View File
@@ -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";
eww/scripts/mediaplayer.py
+3 -4
View File
@@ -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
+40 -25
View File
@@ -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 {
eww/styles/control-center.scss
+1 -57
View File
@@ -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
+57
View File
@@ -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
+4
View File
@@ -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
+7 -3
View File
@@ -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" ? "󰂠" : "󰂚"}
)
)
)
eww/widgets/bar/media.yuck
+14 -12
View File
@@ -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 }
eww/widgets/control-center/big-media.yuck
+78 -50
View File
@@ -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"
"󰒭")
)
)
)
)
)
)
eww/widgets/control-center/notifications.yuck
+1 -2
View File
@@ -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}"
)
)
eww/windows/control-center.yuck
+1 -1
View File
@@ -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
+7 -2
View File
@@ -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)
)
)