✨ ags: optimizations, add media and separator widgets

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();

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);
 }

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)
                 ]
             })

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);
+}