fix: display media total length on bar and add a time label (#435)

* fix: display media total length on bar

* fix: add option to display custom nomedia text

* feat: add dedicated label too

* fix: media add more window names for playables

* fix: add option to control display time

* Consolidate code and make tooltip timestamp for media bar opt-in.

---------

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

modules/menus/media/components/index.ts

@@ -5,8 +5,10 @@ import { Bar } from './timebar/index.js';
 import options from 'options.js';
 import { BoxWidget } from 'lib/types/widget.js';
 import { generateAlbumArt, getPlayerInfo, initializeActivePlayerHook } from './helpers.js';
+import { Time } from './timelabel/index.js';
 
 const { tint, color } = options.theme.bar.menus.menu.media.card;
+const { displayTime } = options.menus.media;
 
 initializeActivePlayerHook();
 
@@ -19,18 +21,18 @@ const Media = (): BoxWidget => {
                 vertical: false,
                 child: Widget.Box({
                     class_name: 'menu-content',
-                    children: [
-                        Widget.Box({
-                            class_name: 'media-content',
-                            child: Widget.Box({
-                                class_name: 'media-indicator-right-section',
-                                hpack: 'fill',
-                                hexpand: true,
-                                vertical: true,
-                                children: [MediaInfo(), Controls(), Bar()],
+                    child: Widget.Box({
+                        class_name: 'media-content',
+                        child: Widget.Box({
+                            class_name: 'media-indicator-right-section',
+                            hpack: 'fill',
+                            hexpand: true,
+                            vertical: true,
+                            children: displayTime.bind('value').as((showTime) => {
+                                return [MediaInfo(), Controls(), Bar(), ...(showTime ? [Time()] : [])];
                             }),
                         }),
-                    ],
+                    }),
                     setup: (self) => {
                         self.hook(media, () => {
                             const curPlayer = getPlayerInfo();

modules/menus/media/components/timebar/helpers.ts

@@ -1,5 +1,6 @@
 import { Attribute } from 'lib/types/widget';
 import { MprisPlayer } from 'types/service/mpris';
+import Label from 'types/widgets/label';
 import Slider from 'types/widgets/slider';
 
 /**
@@ -16,25 +17,38 @@ export const updateTooltip = (self: Slider<Attribute>, foundPlayer?: MprisPlayer
 
     const playerPosition = foundPlayer.position;
 
-    const curHour = Math.floor(playerPosition / 3600);
-    const curMin = Math.floor((playerPosition % 3600) / 60);
-    const curSec = Math.floor(playerPosition % 60);
+    const mediaLength = foundPlayer.length;
 
     if (typeof foundPlayer.position === 'number' && foundPlayer.position >= 0) {
-        const formatTime = (time: number): string => {
-            return time.toString().padStart(2, '0');
-        };
-
-        const formatHour = (hour: number): string => {
-            return hour > 0 ? formatTime(hour) + ':' : '';
-        };
-
-        self.tooltip_text = `${formatHour(curHour)}${formatTime(curMin)}:${formatTime(curSec)}`;
+        self.tooltip_text = `${getFormattedTime(playerPosition)} / ${getFormattedTime(mediaLength)}`;
     } else {
         self.tooltip_text = `00:00`;
     }
 };
 
+/**
+ * Updates the label text of the timestamp based on the player's current position.
+ *
+ * @param self - The label component to update.
+ * @param foundPlayer - The MPRIS player object, if available.
+ */
+export const updateTimestamp = (self: Label<Attribute>, foundPlayer?: MprisPlayer): void => {
+    if (foundPlayer === undefined) {
+        self.label = '00:00';
+        return;
+    }
+
+    const playerPosition = foundPlayer.position;
+
+    const mediaLength = foundPlayer.length;
+
+    if (typeof foundPlayer.position === 'number' && foundPlayer.position >= 0) {
+        self.label = `${getFormattedTime(playerPosition)} / ${getFormattedTime(mediaLength)}`;
+    } else {
+        self.label = `00:00`;
+    }
+};
+
 /**
  * Updates the value of the slider based on the player's current position and length.
  *
@@ -49,3 +63,19 @@ export const update = (self: Slider<Attribute>, foundPlayer?: MprisPlayer): void
         self.value = 0;
     }
 };
+
+export const getFormattedTime = (time: number): string => {
+    const curHour = Math.floor(time / 3600);
+    const curMin = Math.floor((time % 3600) / 60);
+    const curSec = Math.floor(time % 60);
+
+    const formatTime = (time: number): string => {
+        return time.toString().padStart(2, '0');
+    };
+
+    const formatHour = (hour: number): string => {
+        return hour > 0 ? formatTime(hour) + ':' : '';
+    };
+
+    return `${formatHour(curHour)}${formatTime(curMin)}:${formatTime(curSec)}`;
+};

modules/menus/media/components/timebar/index.ts

@@ -1,8 +1,11 @@
 const media = await Service.import('mpris');
+import options from 'options';
 import { BoxWidget } from 'lib/types/widget';
 import { getPlayerInfo } from '../helpers';
 import { update, updateTooltip } from './helpers';
 
+const { displayTimeTooltip } = options.menus.media;
+
 const Bar = (): BoxWidget => {
     return Widget.Box({
         class_name: 'media-indicator-current-progress-bar',
@@ -26,15 +29,24 @@ const Bar = (): BoxWidget => {
                         self.poll(1000, () => {
                             const foundPlayer = getPlayerInfo();
 
-                            if (foundPlayer?.play_back_status === 'Playing') {
-                                update(self, foundPlayer);
-                                updateTooltip(self, foundPlayer);
+                            if (foundPlayer?.play_back_status !== 'Playing') return;
+
+                            update(self, foundPlayer);
+
+                            if (!displayTimeTooltip.value) {
+                                self.tooltip_text = '';
+                                return;
                             }
+
+                            updateTooltip(self, foundPlayer);
                         });
 
                         self.hook(media, () => {
                             const foundPlayer = getPlayerInfo();
                             update(self, foundPlayer);
+
+                            if (!displayTimeTooltip.value) return;
+
                             updateTooltip(self, foundPlayer);
                         });
                     },

modules/menus/media/components/timelabel/index.ts

@@ -0,0 +1,28 @@
+import { BoxWidget } from 'lib/types/widget';
+import { getPlayerInfo } from '../helpers';
+import { updateTimestamp } from '../timebar/helpers';
+
+const Time = (): BoxWidget => {
+    return Widget.Box({
+        class_name: 'media-indicator-current-time-label',
+        hexpand: true,
+        children: [
+            Widget.Box({
+                hexpand: true,
+                child: Widget.Label({
+                    hexpand: true,
+                    tooltip_text: '--',
+                    class_name: 'time-label',
+                    setup: (self) => {
+                        self.poll(1000, () => {
+                            const foundPlayer = getPlayerInfo();
+                            updateTimestamp(self, foundPlayer);
+                        });
+                    },
+                }),
+            }),
+        ],
+    });
+};
+
+export { Time };

modules/menus/media/components/title/name/index.ts

@@ -1,8 +1,11 @@
 import { BoxWidget } from 'lib/types/widget';
 import { getPlayerInfo } from '../../helpers';
+import options from 'options';
 
 const media = await Service.import('mpris');
 
+const { noMediaText } = options.menus.media;
+
 export const songName = (): BoxWidget => {
     return Widget.Box({
         class_name: 'media-indicator-current-song-name',
@@ -14,12 +17,14 @@ export const songName = (): BoxWidget => {
                 wrap: true,
                 class_name: 'media-indicator-current-song-name-label',
                 setup: (self) => {
-                    self.hook(media, () => {
-                        const curPlayer = getPlayerInfo();
-                        return (self.label =
-                            curPlayer !== undefined && curPlayer['track_title'].length
-                                ? curPlayer['track_title']
-                                : 'No Media Currently Playing');
+                    return Utils.merge([noMediaText.bind('value')], (noMediaTxt) => {
+                        self.hook(media, () => {
+                            const curPlayer = getPlayerInfo();
+                            return (self.label =
+                                curPlayer !== undefined && curPlayer['track_title'].length
+                                    ? curPlayer['track_title']
+                                    : noMediaTxt);
+                        });
                     });
                 },
             }),