💥 fix(media, big-media): only show button to copy media link if it's provided by the player

makes use of a connection to notify::metadata to get when the link is updated, instead of binding directly to AstalMpris.Player::metadata and getting the 'xesam:url' property, since JS does not support the hashmap thing

ags/widget/bar/Media.tsx

@@ -1,5 +1,4 @@
-import { createBinding, createState, onCleanup, With } from "ags";
-import { execAsync } from "ags/process";
+import { Accessor, createBinding, createConnection, createState, onCleanup, With } from "ags";
 import { Gtk } from "ags/gtk4";
 import { Separator } from "../Separator";
 import { Windows } from "../../windows";
@@ -8,7 +7,7 @@ import { Clipboard } from "../../scripts/clipboard";
 import GObject from "ags/gobject";
 import AstalMpris from "gi://AstalMpris";
 import Pango from "gi://Pango?version=1.0";
-import { getPlayerIconFromBusName } from "../../scripts/utils";
+import { decoder, getPlayerIconFromBusName, variableToBoolean } from "../../scripts/utils";
 
 
 export const dummyPlayer = AstalMpris.Player.new("colorshellDummy");
@@ -127,14 +126,10 @@ export const Media = () => {
             <With value={player(pl => pl.available)}>
                 {(available: boolean) => available && <Gtk.Box class={"media-controls button-row"}>
                     <Gtk.Button class={"link"} iconName={"edit-paste-symbolic"} 
+                      visible={variableToBoolean(getMediaUrl(player.get()))}
                       tooltipText={"Copy link to Clipboard"} onClicked={() => {
-                          execAsync(`playerctl --player=${
-                              player.get().busName.replace(/^org\.mpris\.MediaPlayer2\./i, "")
-                          } metadata xesam:url`).then(link => {
-                              Clipboard.getDefault().copyAsync(link);
-                          }).catch((e: Error) => {
-                              console.error(`Media: couldn't copy media link. Stderr: \n${e.message}\n${e.stack}`);
-                          });
+                          const url = getMediaUrl(player.get()).get();
+                          url && Clipboard.getDefault().copyAsync(url);
                       }}
                     />
                     <Gtk.Button class={"previous"} iconName={"media-skip-backward-symbolic"}
@@ -159,3 +154,15 @@ export const Media = () => {
         </Gtk.Revealer>
     </Gtk.Box>
 }
+
+export function getMediaUrl(player: AstalMpris.Player): Accessor<string|undefined> {
+    return createConnection(player.get_meta("xesam:url"),
+        [player, "notify::metadata", () => player.get_meta("xesam:url")]
+    ).as(url => {
+        const byteString = url?.get_data_as_bytes();
+
+        return byteString ? 
+            decoder.decode(byteString.toArray())
+        : undefined;
+      })
+}