mediacontrols@rbfraphael: Update 1.1.0

mediacontrols@rbfraphael/README.md

@@ -18,3 +18,19 @@ Inspired by Gnome Shell's [Media Controls by Sakith B.](https://extensions.gnome
 - Inspired by Gnome Shell's [Media Controls by Sakith B.](https://extensions.gnome.org/extension/4470/media-controls/) extension.
 - Used a lot the original [sound@cinnamon.org](https://github.com/linuxmint/cinnamon/tree/master/files/usr/share/cinnamon/applets/sound%40cinnamon.org) applet as reference
 - Created for a personal wanting, with help from Google Gemini and OpenAI ChatGPT
+
+### Changelog
+
+#### 1.1.0
+Special thanks to [@lumapu](https://github.com/lumapu) for its [ideas and contributions](https://github.com/linuxmint/cinnamon-spices-applets/pull/8276).
+- Settings menu added
+- Option to show/hide player icon
+- Option to show/hide track info on panel
+- Option to define which track details to display
+- Options to limit the size of the displayed media details
+- Option to show/hide player selector button
+- Option to enable/disable hover color on buttons
+- Hover color selector
+
+#### 1.0.0
+- First version

mediacontrols@rbfraphael/files/mediacontrols@rbfraphael/applet.js

@@ -1,16 +1,19 @@
 const Applet = imports.ui.applet;
+const { AppletSettings } = imports.ui.settings;
 const GLib = imports.gi.GLib;
 const Interfaces = imports.misc.interfaces;
 const PopupMenu = imports.ui.popupMenu;
 const St = imports.gi.St;
 
+const UUID = 'mediacontrols@rbfraphael';
 const MEDIA_PLAYER_2_PATH = "/org/mpris/MediaPlayer2";
 const MEDIA_PLAYER_2_NAME = "org.mpris.MediaPlayer2";
 const MEDIA_PLAYER_2_PLAYER_NAME = "org.mpris.MediaPlayer2.Player";
 
 class MediaPlayer {
     constructor(name, updateCallback = () => { }) {
         this.name = name;
+        this.identity = name;
 
         this.mediaServer = null;
         this.mediaServerPlayer = null;
@@ -40,7 +43,8 @@ class MediaPlayer {
                     this.appIcon = this.mediaServer.DesktopEntry;
                 }
 
-                this.menuItem.setLabel(this.mediaServer.Identity);
+                this.identity = this.mediaServer.Identity;
+                this.menuItem.setLabel(this.identity);
 
                 this.updateCallback();
             }
@@ -138,14 +142,42 @@ class MediaControlsApplet extends Applet.TextIconApplet {
         this._activePlayer = null;
         this._ownerChangedId = null;
 
+        this._initPrefs();
         this._buildUi();
         this._loadDBus();
     }
 
+    _initPrefs() {
+        this.settings = new AppletSettings(this, UUID, this._appletInstanceId);
+
+        this.settings.bind("show_player_icon", "config_show_player_icon", this._rebuildUi.bind(this));
+        this.settings.bind("show_track_info", "config_show_track_info", this._rebuildUi.bind(this));
+        this.settings.bind("track_info", "config_track_info", this._rebuildUi.bind(this));
+        this.settings.bind("truncate_track_info", "config_truncate_track_info", this._rebuildUi.bind(this));
+        this.settings.bind("truncate_length", "config_truncate_length", this._rebuildUi.bind(this));
+        this.settings.bind("show_player_select_indicator", "config_show_player_select_indicator", this._rebuildUi.bind(this));
+        this.settings.bind("show_hover_color", "config_show_hover_color", this._updateStyles.bind(this));
+        this.settings.bind("hover_bg_color", "config_hover_bg_color", this._updateStyles.bind(this));
+    }
+
+    _onSettingsChanged() {
+        this._updateUi();
+    }
+
+    _rebuildUi() {
+        this.actor.get_children().forEach(child => {
+            this.actor.remove_child(child);
+        });
+
+        this._buildUi();
+    }
+
     _buildUi() {
         // Menu Icon
         this.playerIcon = new St.Icon({ icon_name: "multimedia-audio-player-symbolic", icon_size: 16, icon_type: St.IconType.SYMBOLIC, style_class: "mediacontrols_rbfraphael-element" });
-        this.actor.add_child(this.playerIcon);
+        if(this.config_show_player_icon){
+            this.actor.add_child(this.playerIcon);
+        }
 
         // Previous Button
         this.previousButton = new St.Button({ style_class: "mediacontrols_rbfraphael-element" });
@@ -168,14 +200,22 @@ class MediaControlsApplet extends Applet.TextIconApplet {
         // Media Info
         this.mediaInfo = new St.Bin({ x_align: St.Align.START, y_align: St.Align.MIDDLE, style_class: "mediacontrols_rbfraphael-element" });
         this.mediaInfo.child = new St.Label({ text: "No player selected" });
-        this.actor.add_child(this.mediaInfo);
+        if(this.config_show_track_info){
+            this.actor.add_child(this.mediaInfo);
+        }
 
         // Menu Icon
         let menuIconName = ["pan-down-symbolic", "pan-left-symbolic", "pan-up-symbolic", "pan-right-symbolic"][this._appletOrientation];
-        this.menuIcon = new St.Icon({ icon_name: menuIconName, icon_size: 16, icon_type: St.IconType.SYMBOLIC })
-        this.actor.add_child(this.menuIcon);
+        this.menuIcon = new St.Icon({ icon_name: menuIconName, icon_size: 16, icon_type: St.IconType.SYMBOLIC });
+        this.playerSelectorButton = new St.Button({ style_class: "mediacontrols_rbfraphael-element" });
+        this.playerSelectorButton.child = this.menuIcon;
+        this.playerSelectorButton.connect("clicked", () => this.menu.toggle());
+        if(this.config_show_player_select_indicator){
+            this.actor.add_child(this.playerSelectorButton);
+        }
 
         this._updateUi();
+        this._updateStyles();
     }
 
     _buttonAction(action) {
@@ -212,6 +252,12 @@ class MediaControlsApplet extends Applet.TextIconApplet {
             if (this._activePlayer) {
                 this.playerIcon.icon_name = this._activePlayer.appIcon;
 
+                [this.previousButton, this.playPauseButton, this.nextButton].forEach(button => {
+                    button.show();
+                    button.reactive = true;
+                    button.opacity = 255;
+                });
+
                 if (this._activePlayer.isPlaying) {
                     this.playPauseButton.child.icon_name = "media-playback-pause-symbolic";
                 } else {
@@ -224,18 +270,73 @@ class MediaControlsApplet extends Applet.TextIconApplet {
                     songDescription += this._activePlayer.songArtist;
                 }
 
-                this.mediaInfo.child.text = songDescription;
+                this.set_applet_tooltip("Playing on " + this._activePlayer.identity + ": " + songDescription);
+
+                let trackInfo = "";
+                if(this.config_track_info == "app_name") { 
+                    trackInfo = this._activePlayer.identity;
+                } else if(this.config_track_info == "song_artist") {
+                    trackInfo = songDescription;
+                } else {
+                    trackInfo = this._activePlayer.songTitle;
+                }
+
+                if (this.config_truncate_track_info) {
+                    if(trackInfo.trim().length > this.config_truncate_length){
+                        trackInfo = trackInfo.substring(0, this.config_truncate_length - 3) + "...";
+                    }
+                }
+
+                this.mediaInfo.child.text = trackInfo;
             } else {
                 this.playerIcon.icon_name = "multimedia-audio-player-symbolic";
                 this.playPauseButton.child.icon_name = "media-playback-start-symbolic";
                 this.mediaInfo.child.text = "No player selected";
+                this.set_applet_tooltip("");
             }
         } catch (e) {
             global.logError(e);
             throw e;
         }
     }
 
+    _updateStyles() {
+        // set hover color of control buttons
+        if (this.previousButton) {
+            this._setHoverStyle(this.previousButton);
+        }
+        if (this.playPauseButton) {
+            this._setHoverStyle(this.playPauseButton);
+        }
+        if (this.nextButton) {
+            this._setHoverStyle(this.nextButton);
+        }
+        if(this.playerSelectorButton){
+            this._setHoverStyle(this.playerSelectorButton);
+        }
+    }
+
+    _setHoverStyle(button) {
+        // remove old event handlers, if there are any
+        if (button._enterEventId) {
+            button.disconnect(button._enterEventId);
+        }
+        if (button._leaveEventId) {
+            button.disconnect(button._leaveEventId);
+        }
+
+        // add new event handlers
+        if(this.config_show_hover_color){
+            button._enterEventId = button.connect('enter-event', () => {
+                button.set_style(`background-color: ${this.config_hover_bg_color};`);
+            });
+
+            button._leaveEventId = button.connect('leave-event', () => {
+                button.set_style('');
+            });
+        }
+    }
+
     _loadDBus() {
         Interfaces.getDBusAsync((proxy, error) => {
             if (error) {

mediacontrols@rbfraphael/files/mediacontrols@rbfraphael/metadata.json

@@ -2,14 +2,14 @@
     "uuid": "mediacontrols@rbfraphael",
     "name": "Media Controls",
     "description": "Control your media players from your panel. Works with players that uses MPRIS2 protocol.",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "max-instances": 1,
     "panel-positions": [
         "top",
         "bottom"
     ],
     "location": "panel",
-    "multiversion": true,
+    "multiversion": false,
     "author": "rbfraphael",
     "license": "MIT",
     "website": "https://github.com/linuxmint/cinnamon-spices-applets"

mediacontrols@rbfraphael/files/mediacontrols@rbfraphael/po/fr.po

@@ -5,7 +5,8 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: mediacontrols@rbfraphael 1.0.0\n"
-"Report-Msgid-Bugs-To: https://github.com/linuxmint/cinnamon-spices-applets/issues\n"
+"Report-Msgid-Bugs-To: https://github.com/linuxmint/cinnamon-spices-applets/"
+"issues\n"
 "POT-Creation-Date: 2025-07-07 13:08-0400\n"
 "PO-Revision-Date: 2025-10-13 18:49+0200\n"
 "Last-Translator: FabRCT\n"

mediacontrols@rbfraphael/files/mediacontrols@rbfraphael/po/it.po

@@ -27,5 +27,5 @@ msgid ""
 "Control your media players from your panel. Works with players that uses "
 "MPRIS2 protocol."
 msgstr ""
-"Controlla i tuoi lettori multimediali dal tuo pannello. Funziona con "
-"lettori che utilizzano il protocollo MPRIS2."
+"Controlla i tuoi lettori multimediali dal tuo pannello. Funziona con lettori "
+"che utilizzano il protocollo MPRIS2."

mediacontrols@rbfraphael/files/mediacontrols@rbfraphael/po/mediacontrols@rbfraphael.pot

@@ -5,10 +5,10 @@
 #, fuzzy
 msgid ""
 msgstr ""
-"Project-Id-Version: mediacontrols@rbfraphael 1.0.0\n"
+"Project-Id-Version: mediacontrols@rbfraphael 1.1.0\n"
 "Report-Msgid-Bugs-To: https://github.com/linuxmint/cinnamon-spices-applets/"
 "issues\n"
-"POT-Creation-Date: 2025-07-07 13:08-0400\n"
+"POT-Creation-Date: 2026-02-16 03:33-0300\n"
 "PO-Revision-Date: \n"
 "Last-Translator: \n"
 "Language-Team: \n"
@@ -26,3 +26,55 @@ msgid ""
 "Control your media players from your panel. Works with players that uses "
 "MPRIS2 protocol."
 msgstr ""
+
+#. settings-schema.json->section_display_options->description
+msgid "Display Options"
+msgstr ""
+
+#. settings-schema.json->show_player_icon->description
+msgid "Show player icon?"
+msgstr ""
+
+#. settings-schema.json->show_track_info->description
+msgid "Show track info?"
+msgstr ""
+
+#. settings-schema.json->track_info->options
+msgid "Song Name and Artist"
+msgstr ""
+
+#. settings-schema.json->track_info->options
+msgid "Song Name Only"
+msgstr ""
+
+#. settings-schema.json->track_info->options
+msgid "App Name"
+msgstr ""
+
+#. settings-schema.json->track_info->description
+msgid "Track info to show on the panel"
+msgstr ""
+
+#. settings-schema.json->truncate_track_info->description
+msgid "Limit track info length"
+msgstr ""
+
+#. settings-schema.json->truncate_length->units
+msgid "characters"
+msgstr ""
+
+#. settings-schema.json->truncate_length->description
+msgid "Character limit"
+msgstr ""
+
+#. settings-schema.json->show_player_select_indicator->description
+msgid "Show icon to select player?"
+msgstr ""
+
+#. settings-schema.json->show_hover_color->description
+msgid "Show hover color on buttons?"
+msgstr ""
+
+#. settings-schema.json->hover_bg_color->description
+msgid "Button hover color"
+msgstr ""

mediacontrols@rbfraphael/files/mediacontrols@rbfraphael/po/vi.po

@@ -26,4 +26,6 @@ msgstr "Điều khiển Media"
 msgid ""
 "Control your media players from your panel. Works with players that uses "
 "MPRIS2 protocol."
-msgstr "Điều khiển trình phát media từ thanh panel. Hoạt động với các trình phát sử dụng giao thức MPRIS2."
+msgstr ""
+"Điều khiển trình phát media từ thanh panel. Hoạt động với các trình phát sử "
+"dụng giao thức MPRIS2."

mediacontrols@rbfraphael/files/mediacontrols@rbfraphael/po/zh_TW.po

@@ -24,6 +24,4 @@ msgstr "媒體控制"
 msgid ""
 "Control your media players from your panel. Works with players that uses "
 "MPRIS2 protocol."
-msgstr ""
-"從面板控制媒體播放器。"
-"支援使用 MPRIS2 通訊協定的播放器。"
+msgstr "從面板控制媒體播放器。支援使用 MPRIS2 通訊協定的播放器。"

mediacontrols@rbfraphael/files/mediacontrols@rbfraphael/settings-schema.json

@@ -0,0 +1,66 @@
+{
+    "section_display_options": {
+        "type": "section",
+        "description": "Display Options"
+    },
+
+    "show_player_icon": {
+        "type": "switch",
+        "description": "Show player icon?",
+        "default": true
+    },
+
+    "show_track_info": {
+        "type": "switch",
+        "description": "Show track info?",
+        "default": true
+    },
+
+    "track_info": {
+        "type": "combobox",
+        "default": "song_artist",
+        "options": {
+            "Song Name and Artist": "song_artist",
+            "Song Name Only": "song",
+            "App Name": "app_name"
+        },
+        "description": "Track info to show on the panel",
+        "dependency": "show_track_info"
+    },
+
+    "truncate_track_info": {
+        "type": "switch",
+        "description": "Limit track info length",
+        "default": true
+    },
+
+    "truncate_length": {
+        "type": "spinbutton",
+        "default": 30,
+        "min": 5,
+        "max": 512,
+        "units": "characters",
+        "step": 1,
+        "description": "Character limit",
+        "dependency": "truncate_track_info"
+    },
+
+    "show_player_select_indicator": {
+        "type": "switch",
+        "description": "Show icon to select player?",
+        "default": true
+    },
+
+    "show_hover_color": {
+        "type": "switch",
+        "description": "Show hover color on buttons?",
+        "default": true
+    },
+
+    "hover_bg_color": {
+        "type": "colorchooser",
+        "default": "rgba(33, 157, 222, 1)",
+        "description": "Button hover color",
+        "dependency": "show_hover_color"
+    }
+}