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/bar/media/helpers.ts

@@ -10,6 +10,18 @@ const getIconForPlayer = (playerName: string): string => {
         ['Discord', ''],
         ['Plex', '󰚺'],
         ['Spotify', '󰓇'],
+        ['Vlc', '󰕼'],
+        ['Mpv', ''],
+        ['Rhythmbox', '󰓃'],
+        ['Google Chrome', ''],
+        ['Brave Browser', '󰖟'],
+        ['Chromium', ''],
+        ['Opera', ''],
+        ['Vivaldi', '󰖟'],
+        ['Waterfox', '󰈹'],
+        ['Thorium', '󰈹'],
+        ['Zen Browser', '󰈹'],
+        ['Floorp', '󰈹'],
         ['(.*)', '󰝚'],
     ];
 

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: [
+                    child: Widget.Box({
-                        Widget.Box({
+                        class_name: 'media-content',
-                            class_name: 'media-content',
+                        child: Widget.Box({
-                            child: Widget.Box({
+                            class_name: 'media-indicator-right-section',
-                                class_name: 'media-indicator-right-section',
+                            hpack: 'fill',
-                                hpack: 'fill',
+                            hexpand: true,
-                                hexpand: true,
+                            vertical: true,
-                                vertical: true,
+                            children: displayTime.bind('value').as((showTime) => {
-                                children: [MediaInfo(), Controls(), Bar()],
+                                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 mediaLength = foundPlayer.length;
-    const curMin = Math.floor((playerPosition % 3600) / 60);
-    const curSec = Math.floor(playerPosition % 60);
 
     if (typeof foundPlayer.position === 'number' && foundPlayer.position >= 0) {
-        const formatTime = (time: number): string => {
+        self.tooltip_text = `${getFormattedTime(playerPosition)} / ${getFormattedTime(mediaLength)}`;
-            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)}`;
     } 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') {
+                            if (foundPlayer?.play_back_status !== 'Playing') return;
-                                update(self, foundPlayer);
+
-                                updateTooltip(self, foundPlayer);
+                            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, () => {
+                    return Utils.merge([noMediaText.bind('value')], (noMediaTxt) => {
-                        const curPlayer = getPlayerInfo();
+                        self.hook(media, () => {
-                        return (self.label =
+                            const curPlayer = getPlayerInfo();
-                            curPlayer !== undefined && curPlayer['track_title'].length
+                            return (self.label =
-                                ? curPlayer['track_title']
+                                curPlayer !== undefined && curPlayer['track_title'].length
-                                : 'No Media Currently Playing');
+                                    ? curPlayer['track_title']
+                                    : noMediaTxt);
+                        });
                     });
                 },
             }),

options.ts

@@ -457,6 +457,7 @@ const options = mkOptions(OPTIONS, {
                         song: opt(tertiary_colors.lavender),
                         artist: opt(tertiary_colors.teal),
                         album: opt(tertiary_colors.pink),
+                        timestamp: opt(colors.text),
                         background: {
                             color: opt(colors.crust),
                         },
@@ -1099,6 +1100,9 @@ const options = mkOptions(OPTIONS, {
         media: {
             hideAuthor: opt(false),
             hideAlbum: opt(false),
+            displayTime: opt(false),
+            displayTimeTooltip: opt(false),
+            noMediaText: opt('No Media Currently Playing'),
         },
         bluetooth: {
             showBattery: opt(false),

scripts/fillThemes.js

@@ -399,7 +399,6 @@ const main = () => {
     // Format: "target_key": "source_key"
     const specialKeyMappings = {
         'theme.bar.menus.menu.network.switch.enabled': 'theme.bar.menus.menu.network.iconbuttons.active',
-        'theme.bar.border.color': 'theme.bar.buttons.notifications.border',
         // Add more special mappings here if needed
     };
 

scss/style/menus/media.scss

@@ -142,4 +142,9 @@
             }
         }
     }
+
+    .time-label {
+        color: $bar-menus-menu-media-timestamp;
+        margin-bottom: 0.25em;
+    }
 }

themes/catppuccin_frappe.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#414559",
   "theme.bar.menus.menu.network.switch.puck": "#51576d",
   "theme.bar.buttons.systray.customIcon": "#c6d0f5",
-  "theme.bar.border.color": "#babbf1"
+  "theme.bar.border.color": "#babbf1",
+  "theme.bar.menus.menu.media.timestamp": "#c6d0f5"
 }

themes/catppuccin_frappe_split.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#414559",
   "theme.bar.menus.menu.network.switch.puck": "#51576d",
   "theme.bar.buttons.systray.customIcon": "#c6d0f5",
-  "theme.bar.border.color": "#babbf1"
+  "theme.bar.border.color": "#babbf1",
+  "theme.bar.menus.menu.media.timestamp": "#c6d0f5"
 }

themes/catppuccin_frappe_vivid.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#414559",
   "theme.bar.menus.menu.network.switch.enabled": "#ca9ee6",
   "theme.bar.buttons.systray.customIcon": "#c6d0f5",
-  "theme.bar.border.color": "#babbf1"
+  "theme.bar.border.color": "#babbf1",
+  "theme.bar.menus.menu.media.timestamp": "#c6d0f5"
 }

themes/catppuccin_latte.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#ccd0da",
   "theme.bar.menus.menu.network.switch.puck": "#bcc0cc",
   "theme.bar.buttons.systray.customIcon": "#4c4f69",
-  "theme.bar.border.color": "#7287fd"
+  "theme.bar.border.color": "#7287fd",
+  "theme.bar.menus.menu.media.timestamp": "#4c4f69"
 }

themes/catppuccin_latte_split.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#ccd0da",
   "theme.bar.menus.menu.network.switch.puck": "#bcc0cc",
   "theme.bar.buttons.systray.customIcon": "#4c4f69",
-  "theme.bar.border.color": "#7287fd"
+  "theme.bar.border.color": "#7287fd",
+  "theme.bar.menus.menu.media.timestamp": "#4c4f69"
 }

themes/catppuccin_latte_vivid.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#ccd0da",
   "theme.bar.menus.menu.network.switch.enabled": "#8839ef",
   "theme.bar.buttons.systray.customIcon": "#4c4f69",
-  "theme.bar.border.color": "#7287fd"
+  "theme.bar.border.color": "#7287fd",
+  "theme.bar.menus.menu.media.timestamp": "#4c4f69"
 }

themes/catppuccin_macchiato.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#363a4f",
   "theme.bar.menus.menu.network.switch.puck": "#494d64",
   "theme.bar.buttons.systray.customIcon": "#cad3f5",
-  "theme.bar.border.color": "#b7bdf8"
+  "theme.bar.border.color": "#b7bdf8",
+  "theme.bar.menus.menu.media.timestamp": "#cad3f5"
 }

themes/catppuccin_macchiato_split.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#363a4f",
   "theme.bar.menus.menu.network.switch.puck": "#494d64",
   "theme.bar.buttons.systray.customIcon": "#cad3f5",
-  "theme.bar.border.color": "#b7bdf8"
+  "theme.bar.border.color": "#b7bdf8",
+  "theme.bar.menus.menu.media.timestamp": "#cad3f5"
 }

themes/catppuccin_macchiato_vivid.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#363a4f",
   "theme.bar.menus.menu.network.switch.enabled": "#c6a0f6",
   "theme.bar.buttons.systray.customIcon": "#cad3f5",
-  "theme.bar.border.color": "#b7bdf8"
+  "theme.bar.border.color": "#b7bdf8",
+  "theme.bar.menus.menu.media.timestamp": "#cad3f5"
 }

themes/catppuccin_mocha.json

@@ -179,6 +179,7 @@
     "theme.bar.menus.menu.media.card.color": "#1e1e2e",
     "theme.bar.menus.menu.media.background.color": "#11111b",
     "theme.bar.menus.menu.media.album": "#f5c2e8",
+    "theme.bar.menus.menu.media.timestamp": "#cdd6f4",
     "theme.bar.menus.menu.media.artist": "#94e2d6",
     "theme.bar.menus.menu.media.song": "#b4beff",
     "theme.bar.menus.tooltip.text": "#cdd6f4",

themes/catppuccin_mocha_split.json

@@ -171,6 +171,7 @@
     "theme.bar.menus.menu.media.album": "#f5c2e8",
     "theme.bar.menus.menu.media.artist": "#94e2d6",
     "theme.bar.menus.menu.media.song": "#b4beff",
+    "theme.bar.menus.menu.media.timestamp": "#cdd6f4",
     "theme.bar.menus.tooltip.text": "#cdd6f4",
     "theme.bar.menus.tooltip.background": "#11111b",
     "theme.bar.menus.dropdownmenu.divider": "#1e1e2e",
@@ -344,4 +345,3 @@
     "theme.bar.menus.menu.network.switch.puck": "#454759",
     "theme.bar.border.color": "#b4befe"
 }
-

themes/catppuccin_mocha_vivid.json

@@ -182,6 +182,7 @@
     "theme.bar.menus.menu.media.card.color": "#1e1e2e",
     "theme.bar.menus.menu.media.background.color": "#11111b",
     "theme.bar.menus.menu.media.album": "#f5c2e8",
+    "theme.bar.menus.menu.media.timestamp": "#cdd6f4",
     "theme.bar.menus.menu.media.artist": "#94e2d6",
     "theme.bar.menus.menu.media.song": "#b4beff",
     "theme.bar.menus.tooltip.text": "#cdd6f4",

themes/cyberpunk.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#2A2A2A",
   "theme.bar.menus.menu.network.switch.puck": "#333333",
   "theme.bar.buttons.systray.customIcon": "#d1d1d1",
-  "theme.bar.border.color": "#f7d04b"
+  "theme.bar.border.color": "#f7d04b",
+  "theme.bar.menus.menu.media.timestamp": "#FFD700"
 }

themes/cyberpunk_split.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#2A2A2A",
   "theme.bar.menus.menu.network.switch.puck": "#333333",
   "theme.bar.buttons.systray.customIcon": "#d1d1d1",
-  "theme.bar.border.color": "#f7d04b"
+  "theme.bar.border.color": "#f7d04b",
+  "theme.bar.menus.menu.media.timestamp": "#FFD700"
 }

themes/cyberpunk_vivid.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#2A2A2A",
   "theme.bar.menus.menu.network.switch.enabled": "#FF69B4",
   "theme.bar.buttons.systray.customIcon": "#d1d1d1",
-  "theme.bar.border.color": "#f7d04b"
+  "theme.bar.border.color": "#f7d04b",
+  "theme.bar.menus.menu.media.timestamp": "#FFD700"
 }

themes/dracula.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#44475a",
   "theme.bar.menus.menu.network.switch.puck": "#44475a",
   "theme.bar.buttons.systray.customIcon": "#f8f8f2",
-  "theme.bar.border.color": "#bd93f9"
+  "theme.bar.border.color": "#bd93f9",
+  "theme.bar.menus.menu.media.timestamp": "#f8f8f2"
 }

themes/dracula_split.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#44475a",
   "theme.bar.menus.menu.network.switch.puck": "#44475a",
   "theme.bar.buttons.systray.customIcon": "#f8f8f2",
-  "theme.bar.border.color": "#bd93f9"
+  "theme.bar.border.color": "#bd93f9",
+  "theme.bar.menus.menu.media.timestamp": "#f8f8f2"
 }

themes/dracula_vivid.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#44475a",
   "theme.bar.menus.menu.network.switch.enabled": "#bd93f9",
   "theme.bar.buttons.systray.customIcon": "#f8f8f2",
-  "theme.bar.border.color": "#bd93f9"
+  "theme.bar.border.color": "#bd93f9",
+  "theme.bar.menus.menu.media.timestamp": "#f8f8f2"
 }

themes/everforest.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#2f383e",
   "theme.bar.menus.menu.network.switch.puck": "#454b53",
   "theme.bar.buttons.systray.customIcon": "#d8caac",
-  "theme.bar.border.color": "#83c092"
+  "theme.bar.border.color": "#83c092",
+  "theme.bar.menus.menu.media.timestamp": "#d3c6aa"
 }

themes/everforest_split.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#2f383e",
   "theme.bar.menus.menu.network.switch.puck": "#454b53",
   "theme.bar.buttons.systray.customIcon": "#d8caac",
-  "theme.bar.border.color": "#83c092"
+  "theme.bar.border.color": "#83c092",
+  "theme.bar.menus.menu.media.timestamp": "#d3c6aa"
 }

themes/everforest_vivid.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#2f383e",
   "theme.bar.menus.menu.network.switch.enabled": "#e69875",
   "theme.bar.buttons.systray.customIcon": "#d8caac",
-  "theme.bar.border.color": "#83c092"
+  "theme.bar.border.color": "#83c092",
+  "theme.bar.menus.menu.media.timestamp": "#d3c6aa"
 }

themes/gruvbox.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#3c3836",
   "theme.bar.menus.menu.network.switch.puck": "#504945",
   "theme.bar.buttons.systray.customIcon": "#ebdbb2",
-  "theme.bar.border.color": "#83a598"
+  "theme.bar.border.color": "#83a598",
+  "theme.bar.menus.menu.media.timestamp": "#ebdbb2"
 }

themes/gruvbox_split.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#3c3836",
   "theme.bar.menus.menu.network.switch.puck": "#504945",
   "theme.bar.buttons.systray.customIcon": "#ebdbb2",
-  "theme.bar.border.color": "#83a598"
+  "theme.bar.border.color": "#83a598",
+  "theme.bar.menus.menu.media.timestamp": "#ebdbb2"
 }

themes/gruvbox_vivid.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#3c3836",
   "theme.bar.menus.menu.network.switch.enabled": "#b16286",
   "theme.bar.buttons.systray.customIcon": "#ebdbb2",
-  "theme.bar.border.color": "#83a598"
+  "theme.bar.border.color": "#83a598",
+  "theme.bar.menus.menu.media.timestamp": "#ebdbb2"
 }

themes/monochrome.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#444444",
   "theme.bar.menus.menu.network.switch.puck": "#333333",
   "theme.bar.buttons.systray.customIcon": "#FFFFFF",
-  "theme.bar.border.color": "#FFFFFF"
+  "theme.bar.border.color": "#FFFFFF",
+  "theme.bar.menus.menu.media.timestamp": "#FFFFFF"
 }

themes/monochrome_split.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#444444",
   "theme.bar.menus.menu.network.switch.puck": "#333333",
   "theme.bar.buttons.systray.customIcon": "#FFFFFF",
-  "theme.bar.border.color": "#FFFFFF"
+  "theme.bar.border.color": "#FFFFFF",
+  "theme.bar.menus.menu.media.timestamp": "#FFFFFF"
 }

themes/monochrome_vivid.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#444444",
   "theme.bar.menus.menu.network.switch.enabled": "#FFFFFF",
   "theme.bar.buttons.systray.customIcon": "#FFFFFF",
-  "theme.bar.border.color": "#FFFFFF"
+  "theme.bar.border.color": "#FFFFFF",
+  "theme.bar.menus.menu.media.timestamp": "#FFFFFF"
 }

themes/nord.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#434c53",
   "theme.bar.menus.menu.network.switch.puck": "#434c53",
   "theme.bar.buttons.systray.customIcon": "#d8dee9",
-  "theme.bar.border.color": "#88c0d0"
+  "theme.bar.border.color": "#88c0d0",
+  "theme.bar.menus.menu.media.timestamp": "#d8dee9"
 }

themes/nord_split.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#434c53",
   "theme.bar.menus.menu.network.switch.puck": "#434c53",
   "theme.bar.buttons.systray.customIcon": "#d8dee9",
-  "theme.bar.border.color": "#88c0d0"
+  "theme.bar.border.color": "#88c0d0",
+  "theme.bar.menus.menu.media.timestamp": "#d8dee9"
 }

themes/nord_vivid.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#434c53",
   "theme.bar.menus.menu.network.switch.enabled": "#88c0d0",
   "theme.bar.buttons.systray.customIcon": "#d8dee9",
-  "theme.bar.border.color": "#88c0d0"
+  "theme.bar.border.color": "#88c0d0",
+  "theme.bar.menus.menu.media.timestamp": "#d8dee9"
 }

themes/one_dark.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#3e4451",
   "theme.bar.menus.menu.network.switch.puck": "#4b5263",
   "theme.bar.buttons.systray.customIcon": "#abb2bf",
-  "theme.bar.border.color": "#61afef"
+  "theme.bar.border.color": "#61afef",
+  "theme.bar.menus.menu.media.timestamp": "#abb2bf"
 }

themes/one_dark_split.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#3e4451",
   "theme.bar.menus.menu.network.switch.puck": "#4b5263",
   "theme.bar.buttons.systray.customIcon": "#abb2bf",
-  "theme.bar.border.color": "#61afef"
+  "theme.bar.border.color": "#61afef",
+  "theme.bar.menus.menu.media.timestamp": "#abb2bf"
 }

themes/one_dark_vivid.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#3e4451",
   "theme.bar.menus.menu.network.switch.enabled": "#c678dd",
   "theme.bar.buttons.systray.customIcon": "#abb2bf",
-  "theme.bar.border.color": "#61afef"
+  "theme.bar.border.color": "#61afef",
+  "theme.bar.menus.menu.media.timestamp": "#abb2bf"
 }

themes/rose_pine.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#1f1d2e",
   "theme.bar.menus.menu.network.switch.puck": "#26233a",
   "theme.bar.buttons.systray.customIcon": "#e0def4",
-  "theme.bar.border.color": "#c4a7e7"
+  "theme.bar.border.color": "#c4a7e7",
+  "theme.bar.menus.menu.media.timestamp": "#e0def4"
 }

themes/rose_pine_moon.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#2a273f",
   "theme.bar.menus.menu.network.switch.puck": "#393552",
   "theme.bar.buttons.systray.customIcon": "#e0def4",
-  "theme.bar.border.color": "#c4a7e7"
+  "theme.bar.border.color": "#c4a7e7",
+  "theme.bar.menus.menu.media.timestamp": "#e0def4"
 }

themes/rose_pine_moon_split.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#2a273f",
   "theme.bar.menus.menu.network.switch.puck": "#393552",
   "theme.bar.buttons.systray.customIcon": "#e0def4",
-  "theme.bar.border.color": "#c4a7e7"
+  "theme.bar.border.color": "#c4a7e7",
+  "theme.bar.menus.menu.media.timestamp": "#e0def4"
 }

themes/rose_pine_moon_vivid.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#2a273f",
   "theme.bar.menus.menu.network.switch.enabled": "#c4a7e7",
   "theme.bar.buttons.systray.customIcon": "#e0def4",
-  "theme.bar.border.color": "#c4a7e7"
+  "theme.bar.border.color": "#c4a7e7",
+  "theme.bar.menus.menu.media.timestamp": "#e0def4"
 }

themes/rose_pine_split.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#1f1d2e",
   "theme.bar.menus.menu.network.switch.puck": "#26233a",
   "theme.bar.buttons.systray.customIcon": "#e0def4",
-  "theme.bar.border.color": "#c4a7e7"
+  "theme.bar.border.color": "#c4a7e7",
+  "theme.bar.menus.menu.media.timestamp": "#e0def4"
 }

themes/rose_pine_vivid.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#1f1d2e",
   "theme.bar.menus.menu.network.switch.enabled": "#c4a7e7",
   "theme.bar.buttons.systray.customIcon": "#e0def4",
-  "theme.bar.border.color": "#c4a7e7"
+  "theme.bar.border.color": "#c4a7e7",
+  "theme.bar.menus.menu.media.timestamp": "#e0def4"
 }

themes/tokyo_night.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#565f89",
   "theme.bar.menus.menu.network.switch.puck": "#565f89",
   "theme.bar.buttons.systray.customIcon": "#c0caf5",
-  "theme.bar.border.color": "#bb9af7"
+  "theme.bar.border.color": "#bb9af7",
+  "theme.bar.menus.menu.media.timestamp": "#c0caf5"
 }

themes/tokyo_night_split.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#565f89",
   "theme.bar.menus.menu.network.switch.puck": "#565f89",
   "theme.bar.buttons.systray.customIcon": "#c0caf5",
-  "theme.bar.border.color": "#bb9af7"
+  "theme.bar.border.color": "#bb9af7",
+  "theme.bar.menus.menu.media.timestamp": "#c0caf5"
 }

themes/tokyo_night_vivid.json

@@ -342,5 +342,6 @@
   "theme.bar.menus.menu.network.switch.disabled": "#565f89",
   "theme.bar.menus.menu.network.switch.enabled": "#bb9af7",
   "theme.bar.buttons.systray.customIcon": "#c0caf5",
-  "theme.bar.border.color": "#bb9af7"
+  "theme.bar.border.color": "#bb9af7",
+  "theme.bar.menus.menu.media.timestamp": "#c0caf5"
 }

widget/settings/pages/config/menus/media.ts

@@ -15,6 +15,19 @@ export const MediaMenuSettings = (): Scrollable<Child, Attribute> => {
                 Header('Media'),
                 Option({ opt: options.menus.media.hideAuthor, title: 'Hide Author', type: 'boolean' }),
                 Option({ opt: options.menus.media.hideAlbum, title: 'Hide Album', type: 'boolean' }),
+                Option({ opt: options.menus.media.displayTime, title: 'Display Time Info', type: 'boolean' }),
+                Option({
+                    opt: options.menus.media.displayTimeTooltip,
+                    title: 'Display Time Tooltip',
+                    subtitle: 'Display the current media time tooltip when hovering over the bar',
+                    type: 'boolean',
+                }),
+                Option({
+                    opt: options.menus.media.noMediaText,
+                    title: 'No Media Placeholder',
+                    subtitle: 'Text to display when no media is being played',
+                    type: 'string',
+                }),
             ],
         }),
     });

widget/settings/pages/theme/menus/media.ts

@@ -18,6 +18,7 @@ export const MediaMenuTheme = (): Scrollable<Child, Attribute> => {
                 Option({ opt: options.theme.bar.menus.menu.media.song, title: 'Song', type: 'color' }),
                 Option({ opt: options.theme.bar.menus.menu.media.artist, title: 'Artist', type: 'color' }),
                 Option({ opt: options.theme.bar.menus.menu.media.album, title: 'Album', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.media.timestamp, title: 'Time Stamp', type: 'color' }),
 
                 Header('Background'),
                 Option({