added options for bar media module (#88)

* added options for bar media module

* added reviewed changes

* cleaned up

modules/bar/media/index.ts

@@ -1,6 +1,9 @@
 import Gdk from 'gi://Gdk?version=3.0';
 const mpris = await Service.import("mpris");
 import { openMenu } from "../utils.js";
+import options from "options";
+
+const { show_artist, truncation, truncation_size } = options.bar.media;
 
 const Media = () => {
     const activePlayer = Variable(mpris.players[0]);
@@ -51,13 +54,18 @@ const Media = () => {
 
     const songIcon = Variable("");
 
-    const label = Utils.watch("󰎇 Media 󰎇", mpris, "changed", () => {
+    const mediaLabel = Utils.watch("󰎇 Media 󰎇", [mpris, show_artist, truncation, truncation_size], () => {
         if (activePlayer.value) {
-            const { track_title, identity } = activePlayer.value;
+            const { track_title, identity, track_artists } = activePlayer.value;
+            const trackArtist = show_artist.value
+                ? ` - ${track_artists.join(', ')}`
+                : ``;
             songIcon.value = getIconForPlayer(identity);
             return track_title.length === 0
                 ? `No media playing...`
-                : `${track_title}`;
+                : truncation.value 
+                    ? `${track_title + trackArtist}`.substring(0, truncation_size.value)
+                    : `${track_title + trackArtist}`;
         } else {
             songIcon.value = "";
             return "󰎇 Media 󰎇";
@@ -74,14 +82,10 @@ const Media = () => {
                         Widget.Label({
                             class_name: "bar-button-icon media",
                             label: songIcon.bind("value"),
-                            maxWidthChars: 30,
                         }),
                         Widget.Label({
                             class_name: "bar-button-label media",
-                            label,
-                            truncate: "end",
-                            wrap: true,
-                            maxWidthChars: 30,
+                            label: mediaLabel,
                         }),
                     ],
                 }),
@@ -100,4 +104,4 @@ const Media = () => {
     };
 };
 
-export { Media };
+export { Media };

options.ts

@@ -685,6 +685,11 @@ const options = mkOptions(OPTIONS, {
         clock: {
             format: opt("󰃭  %a %b %d    %I:%M:%S %p"),
         },
+        media: {
+            show_artist: opt(false),
+            truncation: opt(true),
+            truncation_size: opt(30)
+        },
         notifications: {
             show_total: opt(false)
         },

widget/settings/pages/config/bar/index.ts

@@ -72,6 +72,9 @@ export const BarSettings = () => {
 
                 Header('Media'),
                 Option({ opt: options.theme.bar.buttons.media.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
+                Option({ opt: options.bar.media.show_artist, title: 'Show Track Artist', type: 'boolean' }),
+                Option({ opt: options.bar.media.truncation, title: 'Truncate Media Label', type: 'boolean' }),
+                Option({ opt: options.bar.media.truncation_size, title: 'Truncation Size', type: 'number', min: 10 }),
 
                 Header('Notifications'),
                 Option({ opt: options.bar.notifications.show_total, title: 'Show Total # of notifications', type: 'boolean' }),
@@ -79,4 +82,4 @@ export const BarSettings = () => {
             ]
         })
     })
-}
+}