refactor

widget/modules/Media/Media.scss

@@ -0,0 +1,33 @@
+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;
+    }
+}

widget/modules/Media/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>
+  );
+}

widget/modules/Powermenu/PowerMenu.scss

@@ -0,0 +1,22 @@
+window.Powermenu {
+    margin: 5px;
+    background-color: transparent;
+    box {
+        margin: 5px;
+        background-color: black;
+        border-radius: 25px;
+        // padding: 10px;
+        button {
+            all: unset;
+            margin: 2px;
+            padding: 5px 15px 5px 13px;
+            background-color: black;
+            border-radius: 25px;
+            transition: 300ms;
+
+            &:hover {
+                background-color: gray;
+            }
+        }
+    }
+}

widget/modules/export.ts

@@ -1,21 +1,23 @@
 import BatteryLevel from "./Battery";
 import Cpu from "./Cpu";
 import FocusedClient from "./FocusedClient";
-import PowerMenu from "./PowerMenu";
+import PowerMenu from "./Powermenu/PowerMenu";
 import Ram from "./Ram";
 import Storage from "./Storage";
 import SysTray from "./SysTray";
 import Time from "./Time";
 import Workspaces from "./Workspaces";
+import Media from "./Media/Media";
 
 export {
-    BatteryLevel,
-    Cpu,
-    FocusedClient,
-    PowerMenu,
-    Ram,
-    Storage,
-    SysTray,
-    Time,
-    Workspaces
-}
+  BatteryLevel,
+  Cpu,
+  FocusedClient,
+  PowerMenu,
+  Ram,
+  Storage,
+  SysTray,
+  Time,
+  Workspaces,
+  Media,
+};