ags: finish center-window widget with big-media and calendar

ags/widget/Calendar.ts

@@ -0,0 +1 @@
+//TODO

ags/widget/Separator.ts

@@ -1,3 +1,4 @@
+import { Binding } from "astal";
 import { Gtk, Widget } from "astal/gtk3";
 
 export interface SeparatorProps {
@@ -6,21 +7,23 @@ export interface SeparatorProps {
     cssColor?: string;
     orientation?: Gtk.Orientation;
     size?: number;
+    visible?: boolean | Binding<boolean | undefined>;
 }
 
 export function Separator(props: SeparatorProps) {
     return new Widget.Box({
         className: `separator separator-${ props.orientation == Gtk.Orientation.VERTICAL ? "vertical" : "horizontal" } ${ props.class && props.class }`,
+        visible: props.visible,
         css: `.separator {
             background: ${ props.cssColor || "lightgray" };
             opacity: ${ props.alpha || 1 };
         }
         .separator-horizontal {
-            padding-right: ${props.size || 1 }px;
+            padding-bottom: ${props.size || 1 }px;
             margin: 7px 4px;
         }
         .separator-vertical {
-            padding-bottom: ${props.size || 1 }px;
+            padding-right: ${props.size || 1 }px;
             margin: 4px 7px;
         }`,
     } as Widget.BoxProps);

ags/widget/bar/Audio.ts

@@ -2,12 +2,14 @@ import { bind, Process } from "astal";
 import { Widget } from "astal/gtk3";
 import AstalWp from "gi://AstalWp";
 import { Wireplumber } from "../../scripts/volume";
+import { ControlCenter } from "../../window/ControlCenter";
 
 const wp = AstalWp.get_default();
 
 export function Audio() {
     return wp && new Widget.EventBox({
-        className: "audio",
+        className: bind(ControlCenter, "visible").as((visible: boolean) => 
+            visible ? "audio open" : "audio"),
         onClick: () => Process.exec_async("astal toggle control-center", () => {}),
         child: new Widget.Box({
             children: [

ags/widget/bar/Clock.ts

@@ -1,12 +1,13 @@
 import { Widget } from "astal/gtk3";
 import { getDateTime } from "../../scripts/time";
-import { GLib } from "astal";
+import { bind, GLib } from "astal";
 import { Windows } from "../../windows";
 import { CenterWindow } from "../../window/CenterWindow";
 
 export function Clock(): JSX.Element {
     return new Widget.Box({
-        className: "clock",
+        className: bind(CenterWindow, "visible").as((visible: boolean) =>
+            visible ? "clock open" : "clock"),
         child: new Widget.Button({
             onClick: () => Windows.toggle(CenterWindow),
             label: getDateTime().as((dateTime: GLib.DateTime) => {

ags/widget/bar/Media.ts

@@ -2,6 +2,8 @@ import { bind, GLib, Process } from "astal";
 import { Gtk, Widget } from "astal/gtk3";
 import AstalMpris from "gi://AstalMpris";
 import { Separator, SeparatorProps } from "../Separator";
+import { CenterWindow } from "../../window/CenterWindow";
+import { Windows } from "../../windows";
 
 const mpris: AstalMpris.Mpris = AstalMpris.get_default();
 
@@ -66,7 +68,10 @@ export function Media(): Gtk.Widget {
 
     const mediaWidget = new Widget.EventBox({
         className: "media-eventbox",
-        visible: bind(mpris, "players").as((players: Array<AstalMpris.Player>) => players[0]).as(Boolean),
+        visible: bind(mpris, "players").as((players: Array<AstalMpris.Player>) => {
+            return players[0] && players[0].get_available() || CenterWindow.is_visible();
+        }),
+        onClick: () => Windows.toggle(CenterWindow),
         child: new Widget.Box({
             className: "media",
             children: [
@@ -85,6 +90,7 @@ export function Media(): Gtk.Widget {
                                 label: bind(players[0], "title").as((title: string) => title || "No Title")
                             } as Widget.LabelProps),
                             Separator({
+                                orientation: Gtk.Orientation.VERTICAL,
                                 size: 2,
                                 cssColor: `rgb(180, 180, 180)`,
                                 alpha: 1

ags/widget/center-window/BigMedia.ts

@@ -8,8 +8,11 @@ export const BigMedia: Gtk.Widget = new Widget.Box({
     className: "big-media",
     orientation: Gtk.Orientation.VERTICAL,
     homogeneous: false,
+    width_request: 250,
+    visible: bind(AstalMpris.get_default(), "players").as((players: Array<AstalMpris.Player>) => 
+        players[0] ? true : false),
     children: bind(AstalMpris.get_default(), "players").as((players: Array<AstalMpris.Player>) =>
-        players[0] ? [
+        players[0] && [
             new Widget.Box({
                 halign: Gtk.Align.CENTER,
                 child: new Widget.Box({
@@ -72,45 +75,70 @@ export const BigMedia: Gtk.Widget = new Widget.Box({
                     })
                 ]
             }),
-            new Widget.Box({
-                className: "controls button-row",
+            new Widget.CenterBox({
+                className: "bottom",
+                homogeneous: false,
                 hexpand: true,
-                halign: Gtk.Align.CENTER,
-                children: [
-                    new Widget.Button({
-                        className: "link nf",
-                        label: "󰌹",
-                        tooltipText: "Copy link to Clipboard",
-                        visible: bind(players[0], "metadata").as((_metadata: GLib.HashTable) =>
-                            players[0].get_meta("xesam:url") === null),
-                        onClick: () => Process.exec(`wl-copy ${players[0].get_meta("xesam:url")?.get_string()[0]}`)
-                    } as Widget.ButtonProps),
-                    new Widget.Button({
-                        className: "previous nf",
-                        label: "󰒮",
-                        tooltipText: "Previous",
-                        onClick: () => players[0].canGoPrevious && players[0].previous()
-                    } as Widget.ButtonProps),
-                    new Widget.Button({
-                        className: "pause nf",
-                        tooltipText: bind(players[0], "playback_status").as((status: AstalMpris.PlaybackStatus) =>
-                            status === AstalMpris.PlaybackStatus.PLAYING ? "Pause" : "Play"),
-                        label: bind(players[0], "playbackStatus").as((status: AstalMpris.PlaybackStatus) => 
-                            status === AstalMpris.PlaybackStatus.PLAYING ? "󰏤" : "󰐊"),
-                        onClick: () => {
-                            players[0].playbackStatus === AstalMpris.PlaybackStatus.PAUSED ?
-                                players[0].play()
-                            :
-                                players[0].pause()
-                        }
-                    } as Widget.ButtonProps),
-                    new Widget.Button({
-                        className: "next nf",
-                        label: "󰒭",
-                        tooltipText: "Next",
-                        onClick: () => players[0].canGoNext && players[0].next()
-                    } as Widget.ButtonProps)
-                ]
+                startWidget: new Widget.Label({
+                    className: "elapsed",
+                    valign: Gtk.Align.START,
+                    halign: Gtk.Align.START,
+                    label: bind(players[0], "position").as((pos: number) => {
+                        const sec: number = Math.floor(pos % 60);
+                        return pos > 0 && players[0].length > 0 ? 
+                            `${Math.floor(pos / 60)}:${sec < 10 ? "0" : ""}${sec}`
+                        : `0:00`;
+                    })
+                } as Widget.LabelProps),
+                centerWidget: new Widget.Box({
+                    className: "controls button-row",
+                    children: [
+                        new Widget.Button({
+                            className: "link nf",
+                            label: "󰌹",
+                            tooltipText: "Copy link to Clipboard",
+                            visible: bind(players[0], "metadata").as((_meta: GLib.HashTable) =>
+                                players[0].get_meta("xesam:url") === null),
+                            onClick: () => Process.exec(`wl-copy ${players[0].get_meta("xesam:url")?.get_string()[0]}`)
+                        } as Widget.ButtonProps),
+                        new Widget.Button({
+                            className: "previous nf",
+                            label: "󰒮",
+                            tooltipText: "Previous",
+                            onClick: () => players[0].canGoPrevious && players[0].previous()
+                        } as Widget.ButtonProps),
+                        new Widget.Button({
+                            className: "pause nf",
+                            tooltipText: bind(players[0], "playback_status").as((status: AstalMpris.PlaybackStatus) =>
+                                status === AstalMpris.PlaybackStatus.PLAYING ? "Pause" : "Play"),
+                            label: bind(players[0], "playbackStatus").as((status: AstalMpris.PlaybackStatus) => 
+                                status === AstalMpris.PlaybackStatus.PLAYING ? "󰏤" : "󰐊"),
+                            onClick: () => {
+                                players[0].playbackStatus === AstalMpris.PlaybackStatus.PAUSED ?
+                                    players[0].play()
+                                :
+                                    players[0].pause()
+                            }
+                        } as Widget.ButtonProps),
+                        new Widget.Button({
+                            className: "next nf",
+                            label: "󰒭",
+                            tooltipText: "Next",
+                            onClick: () => players[0].canGoNext && players[0].next()
+                        } as Widget.ButtonProps)
+                    ]
+                } as Widget.BoxProps),
+                endWidget: new Widget.Label({
+                    className: "length",
+                    valign: Gtk.Align.START,
+                    halign: Gtk.Align.END,
+                    label: bind(players[0], "length").as((len/* bananananananana */: number) => {
+                        const sec: number = Math.floor(len % 60);
+                        return len > 0 ? 
+                            `${Math.floor(len / 60)}:${sec < 10 ? "0" : ""}${sec}`
+                        : "0:00";
+                    })
+                } as Widget.LabelProps)
             })
-        ] : new Widget.Box({ className: "empty no-media" }))
+        ])
 } as Widget.BoxProps);