eww: much better lyrics widget

2025-06-24 07:49:21 +02:00
parent 54ae84cfaf
commit b92cfafc59
6 changed files with 181 additions and 49 deletions
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-<img src="https://github.com/Uyanide/dotfiles/blob/main/.chores/desktop.jpg?raw=true"/>
-<img src="https://github.com/Uyanide/dotfiles/blob/main/.chores/tiling.jpg?raw=true"/>
-<img src="https://github.com/Uyanide/dotfiles/blob/main/.chores/grub.jpg?raw=true"/>
+<img src="https://github.com/Uyanide/backgrounds/blob/master/screenshots/desktop.jpg?raw=true"/>
+<img src="https://github.com/Uyanide/backgrounds/blob/master/screenshots/tiling.jpg?raw=true"/>
+<img src="https://github.com/Uyanide/backgrounds/blob/master/screenshots/grub.jpg?raw=true"/>

 ## Setup Overview

@@ -22,9 +22,9 @@ Based on [end-4/dots-hyprland](https://github.com/end-4/dots-hyprland) but witho

 ## Eww

-   **"main"**, modified from [syndrizzle/hotfiles](https://github.com/syndrizzle/hotfiles/tree/bspwm) without notification center.
-   **"lyrics"**, dependent on api from [akashrchandran/spotify-lyrics-api](https://github.com/akashrchandran/spotify-lyrics-api) and [a small program](https://github.com/Uyanide/spotify-lyrics) from myself.
-   weather API from [Openweather](https://openweathermap.org/), requires API Key and two systemd files in `.utils/`
+-   `main`, main dashboard, modified from [syndrizzle/hotfiles](https://github.com/syndrizzle/hotfiles/tree/bspwm) without notification center.
+-   `lyrics`, scrolling lyrics player, dependents on api from [akashrchandran/spotify-lyrics-api](https://github.com/akashrchandran/spotify-lyrics-api) and [a small program](https://github.com/Uyanide/spotify-lyrics) from myself <small>(which also happens to be my frist Golang program :D)</small>.
+-   `lyrics-single`, similars to `lyrics`, but limited to a single line and therefore fits well in statusbar.

 ## Grub theme

@@ -36,7 +36,7 @@ Gathered from internet, based on <s>I don't know who</s> (such config files had

 ## Fonts

-Not unified, combination of:
+including:

 -   MesloLGM Nerd Font (& Mono)
 -   Maple Mono Normal CN
--- a/2
+++ b/2
--- a/eww/Lyrics/eww.scss
+++ b/eww/Lyrics/eww.scss
@@ -9,14 +9,25 @@
    border: 2px solid $blue;
 }

+.lyrics-window-single {
+    background-color: rgba(30, 30, 46, 0.6);
+    border-radius: 14px;
+    border: 2px solid $blue;
+}
+
 .lyrics-box {
-    margin: 20px;
+    margin: 20px 10px 0 20px;
    min-width: 500px;
+    min-height: 70px;
+    background-color: $gray-alt;
+    border-radius: 15px;
+    padding: 10px;
+    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
 }

 .lyrics-box-single {
-    margin: 10px;
-    min-width: 300px;
+    margin: 5px 0px 5px 10px;
+    min-width: 634px;
 }

 .lyrics-text {
@@ -27,19 +38,17 @@

 .lyrics-text-single {
    color: $fg;
-    font-size: 14px;
-    font-family: 'Noto Sans', sans-serif;
+    font-size: 15px;
+    font-family: 'Maple Mono Normal NF CN', 'Maple Mono CN', monospace;
+    min-height: 29px;
 }

 .control-box {
+    margin: 20px 10px 0 0;
    padding: 6px;
    min-height: 90px;
 }

-.control-box-single {
-    min-height: 40px;
-}
-
 .offset-minus,
 .offset-reset,
 .offset-plus,
@@ -52,7 +61,9 @@
 }

 .offset-minus-single,
-.offset-plus-single {
+.offset-plus-single,
+.offset-reset-single,
+.info-single {
    padding: 0px 6px;
    margin: 0;
    font-family: 'MesloLGM Nerd Font Mono';
@@ -70,10 +81,94 @@
    color: $yellow;
 }

-.offset-reset {
+.offset-reset,
+.offset-reset-single {
    color: $green;
 }

 .offset-clear {
    color: $red;
 }
+
+.info-single {
+    color: $cyan;
+}
+
+.offset-minus:hover,
+.offset-reset:hover,
+.offset-plus:hover,
+.offset-clear:hover,
+.offset-minus-single:hover,
+.offset-plus-single:hover,
+.offset-reset-single:hover,
+.lyrics-info:hover,
+.info-single:hover,
+.player-prev:hover,
+.player-next:hover,
+.player-pp:hover {
+    color: $fg;
+}
+
+.player-music-slider-box {
+    padding: 12px;
+    margin: 10px 0 20px 20px;
+    border-radius: 15px;
+    background-color: $gray-alt;
+    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
+    min-height: 16px;
+}
+
+.player-music-slider trough {
+    background-color: $gray;
+}
+
+.player-music-slider highlight {
+    background-color: $blue;
+    padding: 3px;
+}
+
+.player-music-slider {
+    min-width: 200px;
+}
+
+.player-controls-box {
+    margin: 10px 0 20px 20px;
+}
+
+.player-pp,
+.player-next,
+.player-prev,
+.lyrics-info {
+    padding: 0px 6px;
+    margin: 0px 4px 0px 4px;
+    font-family: 'MesloLGM Nerd Font Mono';
+    font-size: 25px;
+    min-width: 16px;
+    color: $fg-alt;
+}
+
+.lyrics-info {
+    color: $cyan;
+}
+
+.offset-box {
+    padding: 11px;
+    margin: 10px 20px 20px 10px;
+    border-radius: 15px;
+    background-color: $gray-alt;
+    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
+}
+
+.offset-label {
+    color: $fg-alt;
+    font-size: 15px;
+    font-family: 'Maple Mono Normal NF CN', 'Maple Mono CN', monospace;
+    margin-right: 10px;
+}
+
+.offset-value {
+    color: $fg;
+    font-size: 15px;
+    font-family: 'Maple Mono Normal NF CN', 'Maple Mono CN', monospace;
+    margin-right: 10px;
+}
--- a/eww/Lyrics/eww.yuck
+++ b/eww/Lyrics/eww.yuck
@@ -1,31 +1,64 @@
-(defpoll lyriclines :interval "500ms" "~/.local/bin/spotify-lyrics print -l 3 -f \"$HOME/.local/state/eww/lyrics/offset\" 2> temp.log")
-(deflisten lyricline "~/.local/bin/spotify-lyrics listen -l 1 -f \"$HOME/.local/state/eww/lyrics/offset\" 2> temp.log")
+(defpoll lyriclines :interval "500ms" "~/.local/bin/spotify-lyrics print -l 3 -f \"$HOME/.local/state/eww/lyrics/offset\"")
+(deflisten lyricline "~/.local/bin/spotify-lyrics listen -l 1 -f \"$HOME/.local/state/eww/lyrics/offset\"")
+(defpoll position :interval "1s" "~/.local/bin/spotify-lyrics position")
+(defpoll length :interval "1s" "~/.local/bin/spotify-lyrics length")
+(defpoll offset :interval "1s" "cat $HOME/.local/state/eww/lyrics/offset")
+(defvar hover false)

 (defwidget lyrics []
-  (box :class "lyrics-window" :space-evenly "false" :orientation "h"
-    (box :class "lyrics-box" :vexpand "false" :hexpand "false" :valign "center" :space-evenly "false" :orientation "v"
-      (label :class "lyrics-text"
-             :vexpand "false" :hexpand "false" :space-evenly "false"
-             :halign "start"
-             :text lyriclines
+  (box :class "lyrics-window" :space-evenly "false" :orientation "v"
+    (box :class "lyrics-container" :space-evenly "false" :orientation "h"
+      (box :class "lyrics-box" :vexpand "false" :hexpand "false" :valign "center" :space-evenly "true" :orientation "v"
+        (label :class "lyrics-text"
+               :vexpand "false" :hexpand "false" :space-evenly "false"
+               :halign "start"
+               :text lyriclines
+        )
+      )
+      (box :class "control-box" :vexpand "false" :hexpand "false" :space-evenly "true" :orientation "v"
+        (box :class "control-row-1" :space-evenly "false" :orientation "h"
+          (button :class "offset-plus" :onclick "Lyrics/scripts/lyric-offset.py +500" "󰾆")
+          (button :class "offset-minus" :onclick "Lyrics/scripts/lyric-offset.py -500" "󰓅")
+        )
+        (box :class "control-row-1" :space-evenly "false" :orientation "h"
+          (button :class "offset-reset" :onclick "Lyrics/scripts/lyric-offset.py" "󰾅")
+          (button :class "offset-clear" :onclick "Lyrics/scripts/lyric-clear.sh" "󰑙")
+        )
      )
    )
-    (box :class "control-box" :vexpand "false" :hexpand "false" :space-evenly "true" :orientation "v"
-      (box :class "control-row-1" :space-evenly "false" :orientation "h"
-        (button :class "offset-minus" :onclick "Lyrics/scripts/lyric-offset.py -500" "󰓅")
-        (button :class "offset-plus" :onclick "Lyrics/scripts/lyric-offset.py +500" "󰾆")
+    (box :class "player-controls" :space-evenly "false" :orientation "h"
+      (box :class "player-music-slider-box"
+           :vexpand "false" :hexpand "false" :valign "center" :space-evenly "false" :orientation "h"
+        (eventbox :onhover "eww update hover=true"
+                :onhoverlost "eww update hover=false"
+                :cursor "pointer"
+                :space-evenly "false"
+          (scale :orientation "h" :class "player-music-slider"
+                :min 0 :max length :value position
+                :onchange { hover ? "~/.local/bin/spotify-lyrics set-position {}" : "" })
+        )
      )
-      (box :class "control-row-1" :space-evenly "false" :orientation "h"
-        (button :class "offset-reset" :onclick "Lyrics/scripts/lyric-offset.py" "󰾅")
-        (button :class "offset-clear" :onclick "Lyrics/scripts/lyric-clear.sh" "󰑙")
+      (box :class "player-controls-box"
+           :vexpand "false" :hexpand "false" :valign "center" :space-evenly "false" :orientation "h"
+        (button :class "player-prev" :onclick "playerctl prev --player=spotify" "󰒮")
+        (button :class "player-pp" :onclick "playerctl play-pause --player=spotify" "󰏤")
+        (button :class "player-next" :onclick "playerctl next --player=spotify" "󰒭")
+        (button :class "lyrics-info" :onclick "ghostty -e '\"$HOME/.local/bin/spotify-lyrics\" fetch | less' &" "")
+      )
+      (box :class "offset-box"
+            :vexpand "false" :hexpand "true" :valign "center" :halign "center" :space-evenly "false" :orientation "h"
+          (label :class "offset-label" :text "Offset (ms): ")
+          (label :class "offset-value" :text offset)
      )
    )
  )
 )

 (defwidget lyrics-single []
-  (box :class "lyrics-window" :space-evenly "false" :orientation "h"
-    (box :class "lyrics-box-single" :vexpand "false" :hexpand "false" :valign "center" :space-evenly "false" :orientation "v"
+  (box :class "lyrics-window-single" :space-evenly "false" :orientation "h"
+    (box :class "lyrics-box-single"
+         :vexpand "false" :hexpand "false"
+         :valign "center" :space-evenly "false" :orientation "v"
      (label :class "lyrics-text-single"
             :vexpand "false" :hexpand "false" :space-evenly "false"
             :halign "start"
@@ -34,8 +67,10 @@
    )
    (box :class "control-box-single" :vexpand "false" :hexpand "false" :space-evenly "true" :orientation "v"
      (box :class "control-row-1-single" :space-evenly "false" :orientation "h"
-        (button :class "offset-minus-single" :onclick "Lyrics/scripts/lyric-offset.py -500" "󰓅")
+        (button :class "info-single" :onclick "ghostty -e '\"$HOME/.local/bin/spotify-lyrics\" fetch | less' &" "")
        (button :class "offset-plus-single" :onclick "Lyrics/scripts/lyric-offset.py +500" "󰾆")
+        (button :class "offset-reset-single" :onclick "Lyrics/scripts/lyric-offset.py" "󰾅")
+        (button :class "offset-minus-single" :onclick "Lyrics/scripts/lyric-offset.py -500" "󰓅")
      )
    )
  )
@@ -53,6 +88,6 @@
    :windowtype "normal"
    :wm-ignore true
    :monitor 0
-    :geometry (geometry :anchor "top right")
+    :geometry (geometry :x 1100 :y -49)
    (lyrics-single)
 )
--- a/eww/Lyrics/scripts/lyric-show.sh
+++ b/eww/Lyrics/scripts/lyric-show.sh
@@ -0,0 +1,2 @@
+#!/bin/sh
+
--- a/eww/Main/eww.scss
+++ b/eww/Main/eww.scss
@@ -5,19 +5,19 @@

 .main-window {
    background-color: $bg;
-    font-family: 'Font Awesome 6 Free';
+    font-family: 'Font Awesome 6 Free', FontAwesome;
    border-radius: 20px;
    border: 2px solid $blue;
 }

 .date-box {
-    background-color: $gray-alt;
+    // background-color: $gray-alt;
    margin: 20px 20px 0px 20px;
    min-width: 290px;
    padding: 20px 10px 20px 10px;
    border-radius: 15px;
    color: $fg;
-    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
+    // box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
 }

 .time {
@@ -118,11 +118,11 @@
 }

 .fortune-box {
-    background-color: $gray-alt;
+    // background-color: $gray-alt;
    margin: 20px 20px 0px 0px;
    padding: 20px 35px 20px 25px;
    border-radius: 15px;
-    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
+    // box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
 }

 .fortune-header {
@@ -218,11 +218,11 @@

 .music-controls-box {
    margin: 20px 20px 0px 20px;
-    background-color: $gray-alt;
+    // background-color: $gray-alt;
    padding: 0px 23px 0px 23px;
    border-radius: 15px;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
-    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
+    // box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
 }

 .music-next,
@@ -243,10 +243,10 @@

 .profile-stuff-box {
    margin: 20px 20px 20px 20px;
-    background-color: $gray-alt;
+    // background-color: $gray-alt;
    border-radius: 15px;
    padding: 15px 20px 15px 20px;
-    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
+    // box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
 }

 .profile-img {
@@ -255,7 +255,7 @@
    background-size: cover;
    background-position: center;
    min-width: 90px;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
+    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
 }

 .profile-stuff {
@@ -266,6 +266,6 @@
 }

 .profile-name {
-    font-family: 'Fira Sans Semibold', 'Font Awesome 6 Free', FontAwesome;
+    font-family: 'Font Awesome 6 Free', FontAwesome;
    font-weight: bold;
 }