feat: command & badges customization

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "clsx": "^1.1.1",
+    "escape-string-regexp": "^5.0.0",
     "gsap": "^3.6.1",
     "lodash": "^4.17.21",
     "modern-normalize": "^1.0.0",

public/settings.js

@@ -1,18 +1,30 @@
 /**
  * Application settings.
  *
- * To use the widget, you have to type `!popim <url>` where the URL returns an image.
- * By default, the broadcaster and moderators are allowed to use the command.
+ * To use the widget, type the command (`!popim <url>` for example) followed by an image URL.
+ * By default, only the broadcaster, moderators and VIPs are allowed to use the command.
  */
 window.settings = {
   /**
-   * The channel name the chat client will connect.
+   * Channel name the chat client will connect.
    * @type {String}
    */
   channel: "0xseldszar",
 
   /**
-   * Additional users allowed to use the command.
+   * Command used for triggering the widget.
+   * @type {String}
+   */
+  command: "!popim",
+
+  /**
+   * Badges allowed to use the command.
+   * @type {String[]}
+   */
+  authorizedBadges: ["broadcaster", "moderator", "vip"],
+
+  /**
+   * Users allowed to use the command.
    * @type {String[]}
    */
   authorizedUsers: [],

src/components/App.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import escapeStringRegexp from "escape-string-regexp";
 import { gsap } from "gsap";
 import { includes, random } from "lodash";
 import { FC, useEffect, useRef } from "react";
@@ -9,6 +10,11 @@ import styles from "./App.module.scss";
 
 const { settings } = window;
 
+const COMMAND_PATTERN = new RegExp(
+  `${escapeStringRegexp(settings.command)}\\s+((https?|ftp):\\/\\/[^\\s/$.?#].[^\\s]*)`,
+  "i"
+);
+
 const propertyKey = includes(["top", "bottom"], settings.direction) ? "yPercent" : "xPercent";
 const propertyValue = includes(["left", "top"], settings.direction) ? -100 : 100;
 
@@ -72,13 +78,15 @@ const App: FC = () => {
 
           case "PRIVMSG": {
             const badges = String(tags?.badges);
+            const name = String(prefix?.name);
 
-            const isWhitelisted = includes(settings.authorizedUsers, prefix?.name);
-            const isBroadcaster = badges.includes("broadcaster");
-            const isModerator = badges.includes("moderator");
+            const isAuthorizedUser = settings.authorizedUsers.includes(name);
+            const isAuthorizedBadge = settings.authorizedBadges.some((badge) =>
+              badges.includes(badge)
+            );
 
-            if (isWhitelisted || isBroadcaster || isModerator) {
-              const matches = trailing.match(/!popim\s+((https?|ftp):\/\/[^\s/$.?#].[^\s]*)/i);
+            if (isAuthorizedBadge || isAuthorizedUser) {
+              const matches = trailing.match(COMMAND_PATTERN);
 
               if (matches) {
                 addImage(matches[1]);

src/types/settings.d.ts

@@ -1,11 +1,21 @@
 export interface Settings {
   /**
-   * The channel name the chat client will connect.
+   * Channel name the chat client will connect.
    */
   channel: string;
 
   /**
-   * Additional users allowed to use the command.
+   * Command used for triggering the widget.
+   */
+  command: string;
+
+  /**
+   * Badges allowed to use the command.
+   */
+  authorizedBadges: string[];
+
+  /**
+   * Users allowed to use the command.
    */
   authorizedUsers: string[];
 

yarn.lock

@@ -3661,6 +3661,11 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+escape-string-regexp@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8"
+  integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
+
 eslint-config-prettier@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.1.0.tgz#4ef1eaf97afe5176e6a75ddfb57c335121abc5a6"