♻️ refactor(bar/media): move icon-getting method to a function in utils.ts

ags/scripts/utils.ts

@@ -2,6 +2,7 @@ import { createPoll } from "ags/time";
 import { exec, execAsync } from "ags/process";
 import { Accessor, For, With } from "ags";
 import { Astal, Gtk } from "ags/gtk4";
+import { getSymbolicIcon } from "./apps";
 
 import GLib from "gi://GLib?version=2.0";
 import Gio from "gi://Gio?version=2.0";
@@ -24,6 +25,15 @@ export function getHyprlandVersion(): string {
     return exec(`${GLib.getenv("HYPRLAND_CMD") ?? "Hyprland"} --version | head -n1`).split(" ")[1];
 }
 
+export function getPlayerIconFromBusName(busName: string): string {
+    const splitName = busName.split('.').filter(str => str !== "" && 
+        !str.toLowerCase().includes('instance'));
+
+    return getSymbolicIcon(splitName[splitName.length - 1]) ?
+        getSymbolicIcon(splitName[splitName.length - 1])!
+    : "folder-music-symbolic";
+}
+
 export function escapeUnintendedMarkup(input: string): string {
     return input.replace(/(?<!<[^>]*)[<>&"]/g, (s) => {
         switch(s) {

ags/widget/bar/Media.tsx

@@ -1,7 +1,6 @@
 import { createBinding, createState, onCleanup, With } from "ags";
 import { execAsync } from "ags/process";
 import { Gtk } from "ags/gtk4";
-import { getSymbolicIcon } from "../../scripts/apps";
 import { Separator } from "../Separator";
 import { Windows } from "../../windows";
 import { Clipboard } from "../../scripts/clipboard";
@@ -9,6 +8,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";
 
 
 export const dummyPlayer = AstalMpris.Player.new("colorshellDummy");
@@ -107,12 +107,8 @@ export const Media = () => {
         <Gtk.Box spacing={4} visible={player(pl => pl.available)}>
             <With value={player(pl => pl.available)}>
                 {(available: boolean) => available && <Gtk.Box>
-                    <Gtk.Image class={"player-icon"} iconName={createBinding(player.get(), "busName").as((busName) => {
+                    <Gtk.Image class={"player-icon"} iconName={
-                          const splitName = busName.split('.').filter(str => str !== "" && !str.toLowerCase().includes('instance'));
+                        createBinding(player.get(), "busName").as(getPlayerIconFromBusName)} 
-                          return getSymbolicIcon(splitName[splitName.length - 1]) ?
-                              getSymbolicIcon(splitName[splitName.length - 1])!
-                          : "folder-music-symbolic";
-                      })} 
                     />
                     <Gtk.Label class={"title"} label={createBinding(player.get(), "title").as(title =>
                         title ?? "No Title")} maxWidthChars={20} ellipsize={Pango.EllipsizeMode.END}