From ceda1adee3e6031bd6dcae914ed7c3cc6aa708fc Mon Sep 17 00:00:00 2001
From: TolaMironcenko <mironcenkotola@gmail.com>
Date: Tue, 11 Mar 2025 12:49:58 +0700
Subject: [PATCH] added media widget

---
 style.scss              |  41 ++++++++++++--
 widget/Bar.tsx          | 112 ++++++++++++++++++++++--------------
 widget/Media.tsx        | 122 ++++++++++++++++++++++++++++++++++++++++
 widget/utils/windows.ts |  22 ++++++++
 4 files changed, 251 insertions(+), 46 deletions(-)
 create mode 100644 widget/Media.tsx
 create mode 100644 widget/utils/windows.ts

diff --git a/style.scss b/style.scss
index 268f0ad..a66af7c 100644
--- a/style.scss
+++ b/style.scss
@@ -12,7 +12,7 @@ window.Bar {
     color: $fg-color;
     font-weight: bold;
 
-    >centerbox {
+    > centerbox {
         background: transparent;
         border-radius: 20px;
         margin: 2px 5px 0 5px;
@@ -83,7 +83,7 @@ window.Bar {
         transition: 300ms;
     }
 
-    .Workspaces  {
+    .Workspaces {
         button {
             all: unset;
             background-color: black;
@@ -115,13 +115,46 @@ window.Bar {
         }
     }
 
-    
     // button {
     //     border-radius: 8px;
     //     padding: 0 8px;
     // }
 }
 
+window.Media {
+    margin: 5px;
+    padding: 5px;
+    background-color: transparent;
+    box {
+        margin: 5px;
+        background-color: black;
+        border-radius: 25px;
+        padding: 2px;
+    }
+
+    box.title {
+        padding: 5px;
+        margin: 0;
+        label {
+            font-weight: bold;
+            font-size: 1.1em;
+        }
+    }
+
+    .Cover {
+        min-width: 120px;
+        min-height: 120px;
+        border-radius: 9px;
+        margin-right: 0.6rem;
+        background-size: contain;
+        background-position: center;
+    }
+
+    label.artist {
+        padding: 5px;
+    }
+}
+
 window.Powermenu {
     margin: 5px;
     background-color: transparent;
@@ -137,7 +170,7 @@ window.Powermenu {
             background-color: black;
             border-radius: 25px;
             transition: 300ms;
-            
+
             &:hover {
                 background-color: gray;
             }
diff --git a/widget/Bar.tsx b/widget/Bar.tsx
index c6daf90..03ce632 100644
--- a/widget/Bar.tsx
+++ b/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 />
     </>
+  );
 }
diff --git a/widget/Media.tsx b/widget/Media.tsx
new file mode 100644
index 0000000..7410cc0
--- /dev/null
+++ b/widget/Media.tsx
@@ -0,0 +1,122 @@
+import { App } from "astal/gtk3";
+import { bind } from "astal";
+import { Astal, Gtk } from "astal/gtk3";
+import Mpris from "gi://AstalMpris";
+
+function lengthStr(length: number) {
+  const min = Math.floor(length / 60);
+  const sec = Math.floor(length % 60);
+  const sec0 = sec < 10 ? "0" : "";
+  return `${min}:${sec0}${sec}`;
+}
+
+export default function Media() {
+  const { TOP, RIGHT } = Astal.WindowAnchor;
+  const mpris = Mpris.get_default();
+
+  return (
+    <window
+      anchor={TOP | RIGHT}
+      name="Mediamenu"
+      className="Media"
+      application={App}
+      visible={false}
+    >
+      <box>
+        {bind(mpris, "players").as((ps) =>
+          ps[0] ? (
+            <box>
+              <box
+                className="Cover"
+                valign={Gtk.Align.CENTER}
+                css={bind(ps[0], "coverArt").as(
+                  (cover) => `background-image: url('${cover}');`,
+                )}
+              />
+              <box vertical>
+                <box className="title">
+                  <label
+                    truncate
+                    hexpand
+                    halign={Gtk.Align.START}
+                    label={bind(ps[0], "metadata").as(() => `${ps[0].title}`)}
+                  />
+                  <icon
+                    icon={bind(ps[0], "entry").as((e) =>
+                      Astal.Icon.lookup_icon(e)
+                        ? e
+                        : "audio-x-generic-symbolic",
+                    )}
+                  />
+                </box>
+                <label
+                  halign={Gtk.Align.START}
+                  valign={Gtk.Align.START}
+                  className="artist"
+                  vexpand
+                  wrap
+                  label={bind(ps[0], "metadata").as(() => `${ps[0].artist}`)}
+                />
+                <slider
+                  visible={bind(ps[0], "length").as((l) => l > 0)}
+                  onDragged={({ value }) =>
+                    (ps[0].position = value * ps[0].length)
+                  }
+                  value={bind(ps[0], "position").as((p) =>
+                    ps[0].length > 0 ? p / ps[0].length : 0,
+                  )}
+                />
+                <centerbox className="actions">
+                  <label
+                    hexpand
+                    className="position"
+                    halign={Gtk.Align.START}
+                    visible={bind(ps[0], "length").as((l) => l > 0)}
+                    label={bind(ps[0], "position").as(lengthStr)}
+                  />
+                  <box>
+                    <button
+                      onClicked={() => ps[0].previous()}
+                      visible={bind(ps[0], "canGoPrevious")}
+                    >
+                      <icon icon="media-skip-backward-symbolic" />
+                    </button>
+                    <button
+                      onClicked={() => ps[0].play_pause()}
+                      visible={bind(ps[0], "canControl")}
+                    >
+                      <icon
+                        icon={bind(ps[0], "playbackStatus").as((s) =>
+                          s === Mpris.PlaybackStatus.PLAYING
+                            ? "media-playback-pause-symbolic"
+                            : "media-playback-start-symbolic",
+                        )}
+                      />
+                    </button>
+                    <button
+                      onClicked={() => ps[0].next()}
+                      visible={bind(ps[0], "canGoNext")}
+                    >
+                      <icon icon="media-skip-forward-symbolic" />
+                    </button>
+                  </box>
+                  <label
+                    className="length"
+                    hexpand
+                    halign={Gtk.AlignEND}
+                    visible={bind(ps[0], "length").as((l) => l > 0)}
+                    label={bind(ps[0], "length").as((l) =>
+                      l > 0 ? lengthStr(l) : "0:00",
+                    )}
+                  />
+                </centerbox>
+              </box>
+            </box>
+          ) : (
+            <label label="Nothing Playing" />
+          ),
+        )}
+      </box>
+    </window>
+  );
+}
diff --git a/widget/utils/windows.ts b/widget/utils/windows.ts
new file mode 100644
index 0000000..bda1fe1
--- /dev/null
+++ b/widget/utils/windows.ts
@@ -0,0 +1,22 @@
+import { App, Astal, Gtk, Gdk } from "astal/gtk3";
+
+function close_all_menus(safe: string) {
+  const menuWindows = App.get_windows()
+    .filter((w) => {
+      if (w.name) {
+        return /.*menu/.test(w.name);
+      }
+      return false;
+    })
+    .map((window) => window.name);
+
+  menuWindows.forEach((window) => {
+    if (window && window != safe) {
+      App.get_window(window)?.set_visible(false);
+    }
+  });
+  // App.get_window("powermenu").set_visible(false);
+  // App.get_window("Media").set_visible(false);
+}
+
+export { close_all_menus };