Add source icon customization (#66)

- Add option to adjust the padding between the label text and icon
- Add option to use the symbolic icon
- Set the icon with less code (remove repeated code)

Co-authored-by: Moon-0xff <moon-0xff@protonmail.com>
Co-authored-by: Batwam <56710655+Batwam@users.noreply.github.com>

CHANGELOG.md

@@ -46,4 +46,8 @@ Aditionally:
   strings that trigger the filter
 
 # Upcoming Version
-- Add album art
+Includes new options to customize the icon alongside the label:
+- Icon padding: adjust the distance between the label text and icon
+- Use symbolic icon: Use the simplified, monochromatic version of the app icon
+- Use album art as icon when available
+- Album art scaling: adjust the size of the album art image on the panel

extension.js

@@ -61,6 +61,7 @@ class MprisLabel extends PanelMenu.Button {
 		this.settings.connect('changed::extension-place',this._updateTrayPosition.bind(this));
 		this.settings.connect('changed::show-icon',this._setIcon.bind(this));
 		this.settings.connect('changed::use-album',this._setIcon.bind(this));
+		this.settings.connect('changed::symbolic-source-icon', this._setIcon.bind(this));
 
 		Main.panel.addToStatusArea('Mpris Label',this,EXTENSION_INDEX,EXTENSION_PLACE);
 
@@ -383,7 +384,9 @@ class MprisLabel extends PanelMenu.Button {
 
 	_setIcon(){
 		const ICON_PLACE = this.settings.get_string('show-icon');
+		const ICON_PADDING = this.settings.get_int('icon-padding');
 		const PLACEHOLDER = this.settings.get_string('button-placeholder');
+		const SYMBOLIC_ICON = this.settings.get_boolean('symbolic-source-icon');
 		const USE_ALBUM = this.settings.get_boolean('use-album');
 		const ALBUM_BLACKLIST = this.settings.get_string('album-blacklist').trim();
 
@@ -404,14 +407,21 @@ class MprisLabel extends PanelMenu.Button {
 				this.icon = this.player.getArtUrlIcon(size);
 		}
 
-		if(this.icon == null)
-			this.icon = this.player.icon;
+		if(this.icon == null){
+			this.icon = this.player.getIcon(SYMBOLIC_ICON);
+			if (SYMBOLIC_ICON)
+				this.icon.set_style('-st-icon-style: symbolic;');
+		}
 
 		if (this.icon != null | undefined){
-			if (ICON_PLACE == "right")
+			if (ICON_PLACE == "right"){
+				this.icon.set_style(this.icon.get_style() + "padding-left: " + ICON_PADDING + "px;padding-right: 0px;");
 				this.box.add_child(this.icon);
-			else if (ICON_PLACE == "left")
+			}
+			else if (ICON_PLACE == "left"){
+				this.icon.set_style(this.icon.get_style() + "padding-left: 0px;padding-right: " + ICON_PADDING + "px;");
 				this.box.insert_child_at_index(this.icon,0);
+			}
 		}
 	}
 

players.js

@@ -237,6 +237,7 @@ class Player {
 	}
 	getArtUrlIcon(size){
 		const url = this.stringFromMetadata("mpris:artUrl",this.metadata);
+
 		if(url.length>0)
 			this.albumArt = new St.Icon({
 				gicon: Gio.Icon.new_for_string(url),
@@ -248,29 +249,16 @@ class Player {
 
 		return this.albumArt
 	}
-	getIcon(desktopApp){
-		const settings = ExtensionUtils.getSettings('org.gnome.shell.extensions.mpris-label');
-		const ICON_PLACE = settings.get_string('show-icon');
-		const Config = imports.misc.config;
-
-		let icon_left_padding = 0;
-		let icon_right_padding = 0;
-		if (Config.PACKAGE_VERSION.startsWith("3."))
-			if (ICON_PLACE == "right")
-				icon_left_padding = 3
-			else if (ICON_PLACE == "left")
-				icon_right_padding = 3
-
-			let icon = new St.Icon({
+	getIcon(){
+		let icon = new St.Icon({
 			style_class: 'system-status-icon',
-			fallback_icon_name: 'audio-volume-high',
-			style: "padding-left: " + icon_left_padding + "px;padding-right: " + icon_right_padding + "px;"
+			fallback_icon_name: 'audio-volume-high'
 		});
 
-		if(desktopApp == null | undefined)
+		if(this.desktopApp == null | undefined)
 			return icon
 
-		let entry = Gio.DesktopAppInfo.new(desktopApp);
+		let entry = Gio.DesktopAppInfo.new(this.desktopApp);
 		let gioIcon = entry.get_icon();
 		icon.set_gicon(gioIcon);
 		return icon

prefs.js

@@ -18,7 +18,7 @@ function buildPrefsWidget(){
 		prefsWidget.connect('realize', () => {
 			let window = prefsWidget.get_root();
 			window.default_width = 600;
-			window.default_height = 700;
+			window.default_height = 775;
 		});
 	}
 
@@ -27,6 +27,8 @@ function buildPrefsWidget(){
 
 	addSubcategoryLabel(panelPage,'Icon');
 	let showIconComboBox = addStringComboBox(panelPage,'show-icon','Show source icon:',{'off':'','left':'left','right':'right'},undefined);
+	addSpinButton(panelPage, 'icon-padding', 'Icon padding:', 0, 50, undefined);
+	addSwitch(panelPage, 'symbolic-source-icon', 'Use symbolic source icon:', "Uses an icon that follows the shell's color scheme");
 	addSwitch(panelPage,'use-album','Use album art as icon when available:',undefined);
 	addSpinButton(panelPage,'album-size','Album art scaling (in %):',50,250,undefined);
 
@@ -50,6 +52,8 @@ function buildPrefsWidget(){
 		settings.reset('reposition-on-button-press');
 		settings.reset('use-album');
 		settings.reset('album-size');
+		settings.reset('symbolic-source-icon');
+		settings.reset('icon-padding');
 		extensionPlaceComboBox.set_active_id(settings.get_string('extension-place'));
 		showIconComboBox.set_active_id(settings.get_string('show-icon'));
 	});

schemas/org.gnome.shell.extensions.mpris-label.gschema.xml

@@ -66,6 +66,14 @@
       <default>"left"</default>
     </key>
 
+    <key name="symbolic-source-icon" type="b">
+      <default>false</default>
+    </key>
+
+    <key name="icon-padding" type="i">
+      <default>5</default>
+    </key>
+
     <key name="reposition-delay" type="i">
       <default>2</default>
     </key>