ags(bar,scripts,i18n): added i18n system(wip), changed some bar stuff and started doing control center

ags/widget/bar/Media.tsx

@@ -2,7 +2,6 @@ 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];
@@ -10,6 +9,7 @@ let defaultPlayer: (AstalMpris.Player|undefined) = mpris.get_players()?.[0];
 const playerIcons = {
     spotify: '󰓇',
     clapper: '󰿎',
+    mpv: '',
     spotube: '󰋋',
     firefox: '󰈹'
 }
@@ -20,7 +20,46 @@ export function Media(): JSX.Element {
         defaultPlayer = players?.[0] as AstalMpris.Player;
     });
 
-    return new Widget.EventBox({
+    const mediaControlsRevealer: Widget.Revealer = new Widget.Revealer({
+        transitionType: Gtk.RevealerTransitionType.SLIDE_RIGHT,
+        transitionDuration: 260,
+        revealChild: false,
+        child: new Widget.Box({
+            className: "media-controls",
+            homogeneous: false,
+            children: [
+                new Widget.Button({
+                    className: "previous",
+                    label: "󰒮",
+                    onClick: () => {
+                        if(bind(defaultPlayer!, "canGoPrevious").as(Boolean))
+                            defaultPlayer?.previous();
+                    }
+                } as Widget.ButtonProps),
+                new Widget.Button({
+                    className: "pause",
+                    label: bind(defaultPlayer!, "playback_status").as((status: AstalMpris.PlaybackStatus) => {
+                        return status === AstalMpris.PlaybackStatus.PLAYING ? "󰏤" : "󰐊"
+                    }),
+                    onClick: () => {
+                        if(bind(defaultPlayer!, "canPlay").as(Boolean)
+                          || bind(defaultPlayer!, "canPause").as(Boolean))
+                            defaultPlayer?.play_pause();
+                    }
+                } as Widget.ButtonProps),
+                new Widget.Button({
+                    className: "next",
+                    label: "󰒭",
+                    onClick: () => {
+                        if(bind(defaultPlayer!, "canGoNext").as(Boolean))
+                            defaultPlayer?.next();
+                    }
+                } as Widget.ButtonProps)
+            ]
+        } as Widget.BoxProps)
+    } as Widget.RevealerProps);
+
+    const mediaWidget = new Widget.EventBox({
         className: "media-eventbox",
         visible: bind(mpris, "players").as((players: Array<AstalMpris.Player>) => players?.[0]).as(Boolean),
         child: new Widget.Box({
@@ -42,7 +81,7 @@ export function Media(): JSX.Element {
                         } as Widget.LabelProps),
                         Separator({
                             size: 2,
-                            cssColor: `rgb(150, 150, 150)`,
+                            cssColor: `rgb(180, 180, 180)`,
                             alpha: 1
                         } as SeparatorProps),
                         new Widget.Label({
@@ -51,12 +90,19 @@ export function Media(): JSX.Element {
                         } as Widget.LabelProps)
                     ]
                 } as Widget.BoxProps),
-                new Widget.Revealer({
-                    transitionType: Gtk.RevealerTransitionType.SLIDE_RIGHT,
-                    transitionDuration: 400,
-                    revealChild: false //FIXME
-                } as Widget.RevealerProps)
+                mediaControlsRevealer
             ]
         } as Widget.BoxProps)
     } as Widget.EventBoxProps);
+
+    mediaWidget.connect("hover", () => {
+        mediaControlsRevealer.set_reveal_child(true);
+        mediaWidget.className = mediaWidget.className + " reveal";
+    });
+    mediaWidget.connect("hover-lost", () => {
+        mediaControlsRevealer.set_reveal_child(false);
+        mediaWidget.className = mediaWidget.className.replaceAll(" reveal", "");
+    })
+
+    return mediaWidget;
 }