From 59e2d9de97147df8cb9d2bbe932be23ff630f7d2 Mon Sep 17 00:00:00 2001
From: SirBlobby <adithcool.5@gmail.com>
Date: Sat, 25 Apr 2026 02:49:45 -0400
Subject: [PATCH] Fixed Media Widget not showing media

---
 ags/style.css        | 25 ++++++++++++++++++++
 ags/widget/Media.tsx | 54 +++++++++++++++++++++++++++++++-------------
 2 files changed, 63 insertions(+), 16 deletions(-)

diff --git a/ags/style.css b/ags/style.css
index 9d7c36c..0c27619 100644
--- a/ags/style.css
+++ b/ags/style.css
@@ -13,6 +13,7 @@
   border-radius: 8px;
   border: 2px solid alpha(@color4, 0.5);
   padding: 8px 15px;
+  min-width: 300px;
   font-family: "JetBrainsMono Nerd Font", sans-serif;
 }
 
@@ -54,3 +55,27 @@
 .media-btn:hover {
   color: @color4;
 }
+
+.media-progress {
+  min-height: 4px;
+  padding: 0;
+}
+
+.media-progress trough {
+  min-height: 4px;
+  background-color: alpha(@foreground, 0.2);
+  border-radius: 4px;
+}
+
+.media-progress highlight {
+  background-color: @accent;
+  border-radius: 4px;
+}
+
+.media-progress slider {
+  background-color: transparent;
+  min-width: 0px;
+  min-height: 0px;
+  border: none;
+  box-shadow: none;
+}
diff --git a/ags/widget/Media.tsx b/ags/widget/Media.tsx
index cc5c734..fe8c421 100644
--- a/ags/widget/Media.tsx
+++ b/ags/widget/Media.tsx
@@ -6,21 +6,25 @@ import { createPoll } from "ags/time"
 export default function Media(gdkmonitor: Gdk.Monitor) {
   const { TOP, LEFT } = Astal.WindowAnchor
 
-  // Poll playerctl for complete metadata and status in one go
+  const pollCmd = "playerctl metadata -f '{{title}}|||{{artist}}|||{{mpris:artUrl}}|||{{status}}|||{{mpris:length}}|||{{position}}' 2>/dev/null || echo 'No Media||||||Stopped|||0|||0'";
+
   const mediaState = createPoll({
     title: "No Media",
     artist: "",
     artUrl: "",
-    status: "Stopped"
-  }, 1000, "playerctl metadata -f '{{title}}|||{{artist}}|||{{mpris:artUrl}}|||{{status}}' 2>/dev/null || echo 'No Media||||||Stopped'", (stdout) => {
+    status: "Stopped",
+    length: 0,
+    position: 0
+  }, 1000, pollCmd, (stdout) => {
     const parts = stdout.split("|||");
     const title = parts[0]?.trim() || "No Media";
     const artist = parts[1]?.trim() || "";
-    // GTK supports raw paths better than file:// URIs in background-image CSS
     const rawUrl = parts[2]?.trim() || "";
     const artUrl = rawUrl.replace(/^file:\/\//, '');
     const status = parts[3]?.trim() || "Stopped";
-    return { title, artist, artUrl, status };
+    const length = Number(parts[4]) || 0;
+    const position = Number(parts[5]) || 0;
+    return { title, artist, artUrl, status, length, position };
   });
 
   return (
@@ -33,46 +37,64 @@ export default function Media(gdkmonitor: Gdk.Monitor) {
       margin={20}
       application={app}
     >
-      <box class="media-container" spacing={15}>
+      <box class="media-container" css="min-width: 350px;" spacing={15}>
         <box 
           class="media-cover" 
-          css={mediaState.as(s => s.artUrl ? `background-image: url('${s.artUrl}');` : 'background-color: alpha(@color0, 0.5);')}
+          css={mediaState.as(s => s.artUrl ? `background-image: url('${s.artUrl}'); min-width: 80px; min-height: 80px;` : 'min-width: 80px; min-height: 80px; background-color: alpha(@color0, 0.5);')}
         />
         
-        <box vertical class="media-info-box" valign={Gtk.Align.CENTER}>
+        <box vertical class="media-info-box" valign={Gtk.Align.CENTER} hexpand>
           <label 
             class="media-title" 
             label={mediaState.as(s => s.title)} 
-            halign={Gtk.Align.START}
+            halign={Gtk.Align.FILL}
+            xalign={0}
             truncate
-            maxWidthChars={20}
+            maxWidthChars={35}
+            css="font-size: 15px;"
           />
           <label 
             class="media-artist" 
             label={mediaState.as(s => s.artist)} 
-            halign={Gtk.Align.START}
+            halign={Gtk.Align.FILL}
+            xalign={0}
             truncate
-            maxWidthChars={25}
+            maxWidthChars={40}
+            css="font-size: 13px;"
+          />
+
+          <slider
+            class="media-progress"
+            drawValue={false}
+            hexpand
+            min={0}
+            max={1}
+            value={mediaState.as(s => {
+              const len = s.length / 1000000;
+              return len > 0 ? Math.min(s.position / len, 1) : 0;
+            })}
+            marginTop={10}
+            marginBottom={10}
           />
           
-          <box class="media-controls" spacing={10} halign={Gtk.Align.START} marginTop={5}>
+          <box class="media-controls" spacing={15} halign={Gtk.Align.CENTER}>
             <button
               class="media-btn"
               onClicked={() => execAsync("playerctl previous").catch(print)}
             >
-              <label label="" />
+              <label label="" css="font-size: 18px;" />
             </button>
             <button
               class="media-btn"
               onClicked={() => execAsync("playerctl play-pause").catch(print)}
             >
-              <label label={mediaState.as(s => s.status === "Playing" ? "" : "")} />
+              <label label={mediaState.as(s => s.status === "Playing" ? "" : "")} css="font-size: 22px;" />
             </button>
             <button
               class="media-btn"
               onClicked={() => execAsync("playerctl next").catch(print)}
             >
-              <label label="" />
+              <label label="" css="font-size: 18px;" />
             </button>
           </box>
         </box>