added volume bars

modules/ewwbar/eww-config/eww.scss

@@ -2,21 +2,19 @@
 	all: unset; //Unsets everything so you can style everything from scratch
 }
 
+$bkgrnd: rgba(20, 20, 20, 0.9);
+$light_bkgrnd: rgba(60, 60, 60, 0.8);
+
+@import "./modules/center-clock.scss"
+@import "./modules/volume-osd.scss"
+
 //Global Styles
 .bar-main {
-	background-color: rgba(30, 30, 30, 0.9);
+	background-color: $bkgrnd;
     color: #FFFFFF;
 	border-radius: 10;
 	padding-left: 10px;
 	padding-right: 10px;
-
-    // font: 12px;
-
-	// color: #b0b4bc;
-	// margin: 15px;
-	// padding: 10px;
-	// margin-bottom: 0px;
-	// padding-bottom: 0px;
 }
 
 .bar-section {
@@ -28,11 +26,6 @@
 	color: rgba(200, 200, 200, 0.5);
 }
 
-.time {
-	font-weight: bold;
-	padding-right: 20px;
-}
-
 .alert {
 	color: #aa5555;
 	padding: 5px;
@@ -51,9 +44,12 @@
 }
 
 .side-stuff {
-	background-color: rgba(20, 20, 20, 0.9);
+	background-color: $bkgrnd;
     color: #FFFFFF;
 	border-radius: 10;
 	padding-left: 10px;
 	padding-right: 10px;
+    font-size: 1.2rem;
 }
+
+

modules/ewwbar/eww-config/eww.yuck

@@ -1,8 +1,10 @@
 (defwidget bar []
   (centerbox :orientation "h"
     (workspaces :current-idx current-workspace)
-    (music)
-    (info)))
+    ;; (music)
+    (center-clock)
+    (info)
+    ))
 
 (deflisten current-workspace :initial "1" "bash ./scripts/get-active-workspace")
 (defwidget workspaces [current-idx]
@@ -78,7 +80,7 @@
         :onclick "./scripts/volume toggle ${EWW_EXECUTABLE}"
         (box
             :hexpand false
-            :class {volume > 100 ? "alert" : "regular"}
+            :class {(volume ?: 90) > 100 ? "alert" : "regular"}
             (revealer-on-hover
                 :toggle volume-visible
                 :togglename "volume-visible"
@@ -86,7 +88,10 @@
                     volume < 33 ? "󰕿 " :
                         volume < 66 ? "󰖀 " :
                             volume < 99 ? "󰕾 " : "󱄡 "})
-                (label :text "${volume}%")))))
+                (label :text "${volume ?: "??"}%")
+            )
+            (volume_scale)
+        )))
 
 
 (defvar battery-visible false)
@@ -147,9 +152,11 @@
     {music != "" ? "🎵${music}" : ""}))
 
 (defpoll volume :interval "1s"
-    {"pw-volume status | jq '.percentage // 0'" ?: 500})
-
-(defpoll time :interval "10s"
-  "date '+%H:%M %b %d, %Y'")
+    {"pw-volume status | jq '.percentage // -1'" ?: 500})
 
 (include "windows.yuck")
+(include "./modules/center-clock.yuck")
+
+(defvar open_vol_osd false)
+(defvar ANIM_DURATION "500ms")
+(include "./modules/volume-osd.yuck")

modules/ewwbar/eww-config/modules/center-clock.scss

@@ -0,0 +1,8 @@
+.center-clock {
+    border-radius: 15;
+	background-color: rgba(20, 20, 20, 0.9);
+    color: rgba(200, 200, 200, 1.0);
+    padding-left: 20px;
+    padding-right: 20px;
+    font-size: 1.2rem;
+}

modules/ewwbar/eww-config/modules/center-clock.yuck

@@ -0,0 +1,7 @@
+
+(defwidget center-clock []
+(label :class "center-clock"
+        :orientation "h"
+        :halign "center"
+       :text {formattime(EWW_TIME, "%H:%M")})
+)

modules/ewwbar/eww-config/modules/volume-osd.scss

@@ -0,0 +1,32 @@
+.volume-osd {
+    min-width: 25rem;
+    margin-top: 20px;
+    padding: 5px;
+    border-radius: 0.3rem;
+    background-color: $light_bkgrnd;
+}
+
+.volume-scale trough {
+    background-color: rgba(74, 139, 173, 1);
+    border-radius: 0.2rem;
+    min-height: 0.4rem;
+}
+
+.volume-scale trough highlight {
+    background-color: rgba(163, 255, 180, 1);
+    border-radius: 0.2rem;
+    min-height: 0.4rem;
+}
+
+.volume-icon {
+    margin-left: 0.75rem;
+    font-size: 1.5rem;
+
+    &.less {
+        color: rgba(150, 0, 0, 1);
+    };
+
+    &.more {
+        color: rgba(0, 150, 0, 1);
+    };
+}

modules/ewwbar/eww-config/modules/volume-osd.yuck

@@ -0,0 +1,25 @@
+(defwindow vol_osd
+    :monitor 1 
+    :exclusive: false
+    :stacking "overlay" 
+    :geometry (geometry :anchor "top center")
+    (volume_osd))
+
+(defwidget volume_osd []
+    (revealer :transition "slidedown" 
+              :reveal {open_vol_osd == true ? true : false} 
+              :duration { ANIM_DURATION }
+        (box :orientation "h"
+             :class "volume-osd"
+             :space-evenly false
+             (volume_scale))))
+
+(defwidget volume_scale []
+    (overlay :hexpand true 
+        (scale :min 0 
+                :max 100
+                :active {volume != -1}
+                :value {volume == "-1" ? 0 : volume}
+                :class "volume-scale")))
+
+

modules/ewwbar/eww-config/scripts/volume

@@ -2,11 +2,11 @@
 
 case $1 in
     "*") command="";;
-    "up") command="change +2%";;
-    "down") command="change -1.5%";;
+    "up") command="change +4%";;
+    "down") command="change -4%";;
     "toggle") command="mute toggle";;
 esac
 
 [ -n "$command" ] && pw-volume $command
 
-$2 update volume=$(pw-volume status | jq '.percentage // 0')
+$2 update volume=$(pw-volume status | jq '.percentage // 10')

modules/hyprland/keybinds.nix

@@ -27,6 +27,13 @@ in
       ",XF86AudioLowerVolume, exec, pw-volume change -1%; ${pkgs.eww}/bin/eww update volume=$(pw-volume status | jq '.percentage // 10')"
     ];
 
+    # listen even when locked
+    bindl = [
+      ",XF86AudioPlay, exec, playerctl play-pause"
+      ",XF86AudioNext, exec, playerctl next"
+      ",XF86AudioNext, exec, playerctl previous"
+    ];
+
     bind = [
       ",XF86AudioMute, exec, pw-volume mute toggle"