added media widget

widget/Bar.tsx

@@ -1,57 +1,85 @@
-import { App, Astal, Gtk, Gdk } from "astal/gtk3"
-import { 
-    PowerMenu,
-    Cpu,
-    BatteryLevel,
-    Ram,
-    Storage,
-    Workspaces,
-    FocusedClient,
-    Time,
-    SysTray
-} from "./modules/export"
+import { App, Astal, Gtk, Gdk } from "astal/gtk3";
+import Mpris from "gi://AstalMpris";
+import { bind } from "astal";
+import {
+  PowerMenu,
+  Cpu,
+  BatteryLevel,
+  Ram,
+  Storage,
+  Workspaces,
+  FocusedClient,
+  Time,
+  SysTray,
+} from "./modules/export";
+import { close_all_menus } from "./utils/windows";
+import Media from "./Media";
 
 export default function Bar(gdkmonitor: Gdk.Monitor) {
-    const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
+  const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
+  const mpris = Mpris.get_default();
 
-    return <><window
+  return (
+    <>
+      <window
         className="Bar"
         name="Bar"
         gdkmonitor={gdkmonitor}
         exclusivity={Astal.Exclusivity.EXCLUSIVE}
         anchor={TOP | LEFT | RIGHT}
-        application={App}>
+        application={App}
+      >
         <centerbox>
-            <box hexpand halign={Gtk.Align.START} className="RoudedBlock">
+          <box hexpand halign={Gtk.Align.START} className="RoudedBlock">
+            <button
+              onClicked="/home/tola/dotfiles/rofi/launcher/launcher.sh"
+              halign={Gtk.Align.START}
+              className="Menubutton"
+            >
+              
+            </button>
+            <Cpu />
+            <Ram />
+            <Storage />
+            {/*<FocusedClient />*/}
+          </box>
+          <box hexpand halign={Gtk.Align.CENTER} className="RoudedBlock">
+            <Workspaces />
+          </box>
+          <box hexpand halign={Gtk.Align.END} className="RoudedBlock">
+            {bind(mpris, "players").as((ps) =>
+              ps[0] ? (
                 <button
-                    onClicked="/home/tola/dotfiles/rofi/launcher/launcher.sh"
-                    halign={Gtk.Align.START}
-                    className="Menubutton"
+                  onClicked={() => {
+                    close_all_menus("Mediamenu");
+                    App.toggle_window("Mediamenu");
+                  }}
+                  className="Menubutton"
                 >
-                    
+                  
                 </button>
-                <Cpu />
-                <Ram />
-                <Storage />
-                {/*<FocusedClient />*/}
-            </box>  
-            <box hexpand halign={Gtk.Align.CENTER} className="RoudedBlock">
-                <Workspaces />
-            </box>
-            <box hexpand halign={Gtk.Align.END} className="RoudedBlock">
-                <SysTray />
-                <BatteryLevel />
-                <Time />
-                <button
-                    onClicked={() => App.toggle_window("powermenu")}
-                    halign={Gtk.Align.START}
-                    className="Menubutton"
-                >
-                    ⏻
-                </button>
-            </box>
+              ) : (
+                <></>
+              ),
+            )}
+            <SysTray />
+            <BatteryLevel />
+            <Time />
+            <button
+              onClicked={() => {
+                close_all_menus("powermenu");
+                App.toggle_window("powermenu");
+              }}
+              halign={Gtk.Align.START}
+              className="Menubutton"
+            >
+              ⏻
+            </button>
+          </box>
         </centerbox>
-    </window>
-    <PowerMenu />
+      </window>
+      <PowerMenu />
+      <Media />
     </>
+  );
 }