Emote Side Panel 1.1.0

Thanks to jonathan-bryant for the changes

* Added: Option to sort by count
* Added: Option to set panel width
* Fixed: Bug when loading a channel directly

src/emote-side-panel/index.js

@@ -1,4 +1,4 @@
-const {createElement} = FrankerFaceZ.utilities.dom;
+const { createElement } = FrankerFaceZ.utilities.dom;
 import STYLE_URL from './styles.scss';
 
 class EmoteSidePanel extends Addon {
@@ -20,7 +20,11 @@ class EmoteSidePanel extends Addon {
 		container.style.setProperty("position", "relative");
 		container.append(newPanel);
 
-		return newPanel;
+		if (this.settings.get('emote_side_panel.override_width')) {
+			newPanel.style.width = this.settings.get('emote_side_panel.width_in_px') + 'px';
+		}
+
+    return newPanel;
 	}
 
 	updatePadding() {
@@ -64,10 +68,37 @@ class EmoteSidePanel extends Addon {
 			}
 		}
 
+		// Sort emotes by count if the setting is enabled
+		this.sortEmotes();
+
 		this.updatePadding();
 		this.setUpdatePanel();
 	}
 
+	sortEmotes() {
+		const panel = this.getPanel();
+		if (this.settings.get('emote_side_panel.sort_by_count') && this.emotes.length > 1) {
+			const sortOrder = this.settings.get('emote_side_panel.sort_order');
+			if (sortOrder === 'ascending') {
+				this.emotes.sort((a, b) => a.instances.length - b.instances.length);
+			} else if (sortOrder === 'descending') {
+				this.emotes.sort((a, b) => b.instances.length - a.instances.length);
+			}
+
+			if (sortOrder !== 'none') {
+				// Remove all emotes from the panel
+				while (panel.firstChild) {
+					panel.removeChild(panel.firstChild);
+				}
+
+				// Add emotes back to the panel in the sorted order
+				for (let emote of this.emotes) {
+					panel.appendChild(emote.element);
+				}
+			}
+		}
+	}
+
 	setUpdatePanel() {
 		if (!this.updateTimer) this.updateTimer = window.setTimeout(() => this.updatePanel(), 350);
 	}
@@ -97,7 +128,7 @@ class EmoteSidePanel extends Addon {
 
 		let emoteOnly = true;
 		for (const token of tokens) {
-			if ((token.type === 'emote') || 
+			if ((token.type === 'emote') ||
 				(token.type === 'text' && /^(\s|[^\x20-\x7E])+$/g.test(token.text))) continue;
 			emoteOnly = false;
 			break;
@@ -113,7 +144,7 @@ class EmoteSidePanel extends Addon {
 		for (const token of tokens) {
 			if (token.type === 'emote') {
 				this.log.debug(token);
-				const instance = {user: msg.user, time: msg.timestamp};
+				const instance = { user: msg.user, time: msg.timestamp };
 				const text = token.text;
 				const el = this.emotes.find(e => e.text == text);
 				if (el) {
@@ -123,12 +154,13 @@ class EmoteSidePanel extends Addon {
 					const el = this.createEmoteElement(token, 1);
 					this.getPanel().appendChild(el);
 					this.setRemoveAnimation(el);
-					this.emotes.push({text: text, element: el, firstTime: instance.timestamp, instances: [instance]});
+					this.emotes.push({ text: text, element: el, firstTime: instance.timestamp, instances: [instance] });
 				}
 			}
 		}
 
 		this.updatePadding();
+		this.sortEmotes();
 		this.setUpdatePanel();
 
 		return tokens;
@@ -150,6 +182,21 @@ class EmoteSidePanel extends Addon {
 			},
 		});
 
+		this.settings.add('emote_side_panel.sort_order', {
+			default: 'none',
+			ui: {
+				path: 'Add-Ons > Emote Side Panel',
+				title: 'Sort Order',
+				description: 'Sort emotes by count',
+				component: 'setting-select-box',
+				data: [
+					{ value: 'none', title: 'None' },
+					{ value: 'ascending', title: 'Ascending' },
+					{ value: 'descending', title: 'Descending' },
+				],
+			},
+		});
+
 		this.settings.add('emote_side_panel.keep_messages', {
 			default: false,
 			ui: {
@@ -171,7 +218,27 @@ class EmoteSidePanel extends Addon {
 			changed: val => this.timeout = parseInt(val) == 0 ? 30 : parseInt(val)
 		});
 
-		this.emotes = {};
+		this.settings.add('emote_side_panel.override_width', {
+			default: false,
+			ui: {
+				path: 'Add-Ons > Emote Side Panel',
+				title: 'Override Panel Width',
+				description: 'Enable to set a custom width for the emote panel',
+				component: 'setting-check-box',
+			},
+		});
+
+		this.settings.add('emote_side_panel.width_in_px', {
+			default: 32,
+			ui: {
+				path: 'Add-Ons > Emote Side Panel',
+				title: 'Panel Width in Pixels',
+				description: 'Set the width of the emote panel in pixels',
+				component: 'setting-text-box',
+			},
+		});
+
+		this.emotes = [];
 		this.updateTimer = null;
 		this.style_link = null;
 		this.timeout = parseInt(this.settings.get('emote_side_panel.timeout'));

src/emote-side-panel/manifest.json

@@ -1,12 +1,12 @@
 {
 	"enabled": true,
 	"requires": [],
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"short_name": "EmoteSidePanel",
 	"name": "Emote Side Panel",
 	"author": "amartini",
 	"description": "Declutter the chat by sending emote-only messages to a side panel.",
 	"website": "https://github.com/amartini",
 	"created": "2024-03-31T22:15:03.336Z",
-	"updated": "2024-03-31T22:15:03.336Z"
+	"updated": "2024-04-12T17:37:03.032Z"
 }