From 017619f62b7d4bbaaafa5c105c44d85655363648 Mon Sep 17 00:00:00 2001
From: retrozinndev <joaovodias@gmail.com>
Date: Thu, 23 Jan 2025 14:06:33 -0300
Subject: [PATCH] :sparkles: ags: optimizations, add media and separator
 widgets

---
 ags/scripts/pywal.ts             |  4 +--
 ags/style/_bar.scss              | 26 ++++++++++++++
 ags/style/_wal.scss              | 40 ++++++++++-----------
 ags/widget/Separator.tsx         | 27 ++++++++++++++
 ags/widget/bar/Audio.tsx         |  2 +-
 ags/widget/bar/Clock.tsx         | 12 ++++---
 ags/widget/bar/FocusedWindow.tsx |  7 ++--
 ags/widget/bar/Media.tsx         | 62 ++++++++++++++++++++++++++++++++
 ags/window/Bar.tsx               |  2 ++
 9 files changed, 151 insertions(+), 31 deletions(-)
 create mode 100644 ags/widget/Separator.tsx
 create mode 100644 ags/widget/bar/Media.tsx

diff --git a/ags/scripts/pywal.ts b/ags/scripts/pywal.ts
index 25e2f17..a19fcc3 100644
--- a/ags/scripts/pywal.ts
+++ b/ags/scripts/pywal.ts
@@ -1,8 +1,8 @@
 import { readFile } from "astal";
 import { getUserDirs } from "./user";
 
-export abstract class Wal {
-    getColors(): JSON {
+export class Wal {
+    public static getColors(): JSON {
         return JSON.parse(
             readFile(`${getUserDirs().cache}/wal/colors.json`)!
         );
diff --git a/ags/style/_bar.scss b/ags/style/_bar.scss
index c49e4e1..3c791ba 100644
--- a/ags/style/_bar.scss
+++ b/ags/style/_bar.scss
@@ -40,10 +40,23 @@
       }
     }
   }
+
   & > .bar-centerbox > * {
     background: rgba($color: wal.$background, $alpha: .6);
     padding: 6px;
     border-radius: 18px;
+
+    & > * {
+      margin: 0 2px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
   }
 }
 
@@ -104,6 +117,19 @@
   }
 }
 
+.media-eventbox {
+  & > .media > box {
+    border-radius: 12px;
+    background: wal.$color2;
+    padding: 0 6px;
+
+    & .icon {
+      margin-right: 6px;
+      font-size: 14px;
+    }
+  }
+}
+
 .tray {
   padding: 0 6px;
 
diff --git a/ags/style/_wal.scss b/ags/style/_wal.scss
index 5c9c132..e2dc560 100644
--- a/ags/style/_wal.scss
+++ b/ags/style/_wal.scss
@@ -1,26 +1,26 @@
 // SCSS Variables
 // Generated by 'wal'
-$wallpaper: "/home/joaov/wallpapers/Bocchi The Rock!.png";
+$wallpaper: "/home/joaov/wallpapers/Garden Kita.png";
 
 // Special
-$background: #0a0a0c;
-$foreground: #c1c1c2;
-$cursor: #c1c1c2;
+$background: #101212;
+$foreground: #c3c3c3;
+$cursor: #c3c3c3;
 
 // Colors
-$color0: #0a0a0c;
-$color1: #935d6d;
-$color2: #967e84;
-$color3: #ac8486;
-$color4: #bcae7a;
-$color5: #a49c9c;
-$color6: #bcb79c;
-$color7: #8a8a96;
-$color8: #565669;
-$color9: #C57C92;
-$color10: #C9A9B0;
-$color11: #E6B1B3;
-$color12: #FBE8A3;
-$color13: #DBD1D0;
-$color14: #FBF5D1;
-$color15: #c1c1c2;
+$color0: #101212;
+$color1: #59662a;
+$color2: #517047;
+$color3: #87863c;
+$color4: #707b48;
+$color5: #4b6266;
+$color6: #84876e;
+$color7: #8e9898;
+$color8: #596d6d;
+$color9: #778839;
+$color10: #6C965F;
+$color11: #B4B350;
+$color12: #96A460;
+$color13: #658388;
+$color14: #B0B493;
+$color15: #c3c3c3;
diff --git a/ags/widget/Separator.tsx b/ags/widget/Separator.tsx
new file mode 100644
index 0000000..2db9b87
--- /dev/null
+++ b/ags/widget/Separator.tsx
@@ -0,0 +1,27 @@
+import { Gtk, Widget } from "astal/gtk3";
+
+export interface SeparatorProps {
+    class?: string;
+    alpha?: number;
+    cssColor?: string;
+    orientation?: Gtk.Orientation;
+    size?: number;
+}
+
+export function Separator(props: SeparatorProps) {
+    return new Widget.Box({
+        className: `separator separator-${ props.orientation == Gtk.Orientation.VERTICAL ? "vertical" : "horizontal" } ${ props.class && props.class }`,
+        css: `.separator {
+            background: ${ props.cssColor ? props.cssColor : "lightgray" };
+            opacity: ${ props.alpha ? props.alpha : 1 };
+        }
+        .separator-horizontal {
+            padding-right: ${props.size ? props.size : 1 }px;
+            margin: 7px 4px;
+        }
+        .separator-vertical {
+            padding-bottom: ${props.size ? props.size : 1 }px;
+            margin: 4px 7px;
+        }`,
+    } as Widget.BoxProps);
+}
diff --git a/ags/widget/bar/Audio.tsx b/ags/widget/bar/Audio.tsx
index a22fff6..dd48074 100644
--- a/ags/widget/bar/Audio.tsx
+++ b/ags/widget/bar/Audio.tsx
@@ -1,5 +1,5 @@
 import { bind } from "astal";
-import { Widget } from "astal/gtk3";
+import { Gtk, Widget } from "astal/gtk3";
 import AstalWp from "gi://AstalWp?version=0.1";
 
 const wp = AstalWp.get_default();
diff --git a/ags/widget/bar/Clock.tsx b/ags/widget/bar/Clock.tsx
index 6a5563a..5a8011d 100644
--- a/ags/widget/bar/Clock.tsx
+++ b/ags/widget/bar/Clock.tsx
@@ -1,14 +1,16 @@
 import { Box, Button } from "astal/gtk3/widget";
 import { GLib, Variable } from "astal";
+import { Widget } from "astal/gtk3";
 
 const dateTimeFormat = "%A %d, %H:%M"
 const time = new Variable<string>("").poll(600, () => 
     GLib.DateTime.new_now_local().format(dateTimeFormat)!);
 
 export function Clock(): JSX.Element {
-    return (
-        <Box className={"clock"}>
-            <Button label={time()} />
-        </Box>
-    )
+    return new Widget.Box({
+        className: "clock",
+        child: new Widget.Button({
+            label: time()
+        } as Widget.ButtonProps)
+    } as Widget.BoxProps);
 }
diff --git a/ags/widget/bar/FocusedWindow.tsx b/ags/widget/bar/FocusedWindow.tsx
index 01b8555..a72e67f 100644
--- a/ags/widget/bar/FocusedWindow.tsx
+++ b/ags/widget/bar/FocusedWindow.tsx
@@ -7,10 +7,11 @@ const hyprland = AstalHyprland.get_default();
 export function FocusedWindow() {
     return new Widget.Box({
         className: "focused-window",
+        visible: bind(hyprland, "focusedClient").as(Boolean),
         children: [
             new Widget.Icon({
                 className: "icon",
-                icon: bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) => {
+                icon: bind(hyprland, "focusedClient").as(Boolean) && bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) => {
                     switch(client.initialClass) {
                         case "zen":
                             return "zen-browser";
@@ -28,12 +29,12 @@ export function FocusedWindow() {
                     new Widget.Label({
                         className: "class",
                         xalign: 0,
-                        label: bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) => client.get_class())
+                        label: bind(hyprland, "focusedClient").as(Boolean) && bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) => client.get_class())
                     } as Widget.LabelProps),
                     new Widget.Label({
                         className: "title",
                         xalign: 0,
-                        label: bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) => client.get_title())
+                        label: bind(hyprland, "focusedClient").as(Boolean) && bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) => client.get_title())
                     } as Widget.LabelProps)
                 ]
             })
diff --git a/ags/widget/bar/Media.tsx b/ags/widget/bar/Media.tsx
new file mode 100644
index 0000000..d416132
--- /dev/null
+++ b/ags/widget/bar/Media.tsx
@@ -0,0 +1,62 @@
+import { bind } from "astal";
+import { Gtk, Widget } from "astal/gtk3";
+import AstalMpris from "gi://AstalMpris";
+import { Separator, SeparatorProps } from "../Separator";
+import { Wal } from "../../scripts/pywal";
+
+const mpris: AstalMpris.Mpris = AstalMpris.get_default();
+let defaultPlayer: (AstalMpris.Player|undefined) = mpris.get_players()?.[0];
+
+const playerIcons = {
+    spotify: '󰓇',
+    clapper: '󰿎',
+    spotube: '󰋋',
+    firefox: '󰈹'
+}
+
+export function Media(): JSX.Element {
+
+    bind(mpris, "players")?.as((players: Array<AstalMpris.Player>) => {
+        defaultPlayer = players?.[0] as AstalMpris.Player;
+    });
+
+    return new Widget.EventBox({
+        className: "media-eventbox",
+        visible: bind(mpris, "players").as((players: Array<AstalMpris.Player>) => players?.[0]).as(Boolean),
+        child: new Widget.Box({
+            className: "media",
+            children: [
+                new Widget.Box({
+                    children: [
+                        new Widget.Label({
+                            className: "icon",
+                            label: defaultPlayer && bind(defaultPlayer, "busName")?.as((name: string) => {
+                                const banana: Array<string> = name.split('.');
+                                const playerName: string = banana[banana.length-1];
+                                return playerIcons[playerName as keyof typeof playerIcons] || '󰎇';
+                            })
+                        } as Widget.LabelProps),
+                        new Widget.Label({
+                            className: "title",
+                            label: defaultPlayer && bind(defaultPlayer, "title")?.as((title: string) => title)
+                        } as Widget.LabelProps),
+                        Separator({
+                            size: 2,
+                            cssColor: `rgb(150, 150, 150)`,
+                            alpha: 1
+                        } as SeparatorProps),
+                        new Widget.Label({
+                            className: "artist",
+                            label: defaultPlayer && bind(defaultPlayer, "artist")?.as((artist: string) => artist)
+                        } as Widget.LabelProps)
+                    ]
+                } as Widget.BoxProps),
+                new Widget.Revealer({
+                    transitionType: Gtk.RevealerTransitionType.SLIDE_RIGHT,
+                    transitionDuration: 400,
+                    revealChild: false //FIXME
+                } as Widget.RevealerProps)
+            ]
+        } as Widget.BoxProps)
+    } as Widget.EventBoxProps);
+}
diff --git a/ags/window/Bar.tsx b/ags/window/Bar.tsx
index fa481ec..eeeeffc 100644
--- a/ags/window/Bar.tsx
+++ b/ags/window/Bar.tsx
@@ -9,6 +9,7 @@ import { Tray } from "../widget/bar/Tray";
 import { Workspaces } from "../widget/bar/Workspaces";
 import { Audio } from "../widget/bar/Audio";
 import { FocusedWindow } from "../widget/bar/FocusedWindow";
+import { Media } from "../widget/bar/Media";
 
 export function Bar(monitor: number = 0, width: (number|undefined) = undefined, height: (number|undefined) = undefined) {
     return (
@@ -32,6 +33,7 @@ export function Bar(monitor: number = 0, width: (number|undefined) = undefined,
                  vertical={ false } homogeneous={ false }>
 
                 <Clock />
+                <Media />
             </Box>
 
             <Box className={ "widgets-right" } halign={ Gtk.Align.END }