refactoring roomView / slashCommands / SendMessageComposer with the new effects configurations and fix confetti animation timeout

src/components/views/elements/effects/ICanvasEffect.ts

@@ -1,5 +1,5 @@
 export default interface ICanvasEffect {
-    start: (canvas: HTMLCanvasElement, timeout?: number) => Promise<void>,
+    start: (canvas: HTMLCanvasElement, timeout: number) => Promise<void>,
     stop: () => Promise<void>,
     isRunning: boolean
-}
+}

src/components/views/elements/effects/confetti/index.ts

@@ -47,7 +47,7 @@ export default class Confetti implements ICanvasEffect {
         this.options = options;
     }
 
-    private context: CanvasRenderingContext2D | null;
+    private context: CanvasRenderingContext2D | null = null;
     private supportsAnimationFrame = window.requestAnimationFrame ||
         window.webkitRequestAnimationFrame ||
         window.mozRequestAnimationFrame ||
@@ -64,7 +64,7 @@ export default class Confetti implements ICanvasEffect {
 
     public isRunning: boolean;
 
-    public start = async (canvas: HTMLCanvasElement, timeout?: number) => {
+    public start = async (canvas: HTMLCanvasElement, timeout = 3000) => {
         if(!canvas) {
             return;
         }
@@ -88,13 +88,13 @@ export default class Confetti implements ICanvasEffect {
         this.isRunning = true;
         this.runAnimation();
         if (timeout) {
-            window.setTimeout(this.stop, timeout || 3000);
+            window.setTimeout(this.stop, timeout);
         }
     }
 
     public stop = async () => {
         this.isRunning = false;
-        this.particles = [];
+       // this.particles = [];
     }
 
     private resetParticle = (particle: ConfettiParticle, width: number, height: number): ConfettiParticle => {
@@ -177,21 +177,3 @@ export default class Confetti implements ICanvasEffect {
         }
     }
 }
-
-const convertToHex = (data: string): Array<string> => {
-    const contentBodyToHexArray = [];
-    if (!data) return contentBodyToHexArray;
-    let hex;
-    if (data) {
-        for (let i = 0; i < data.length; i++) {
-            hex = data.codePointAt(i).toString(16);
-            contentBodyToHexArray.push(hex);
-        }
-    }
-    return contentBodyToHexArray;
-}
-
-export const isConfettiEmoji = (content: { msgtype: string, body: string }): boolean => {
-    const hexArray = convertToHex(content.body);
-    return !!(hexArray.includes('1f389') || hexArray.includes('1f38a'));
-}

src/components/views/elements/effects/effectUtilities.ts

@@ -0,0 +1,3 @@
+export const containsEmoji = (content: { msgtype: string, body: string }, emojis: Array<string>): boolean => {
+    return emojis.some((emoji) => content.body.includes(emoji));
+}

src/components/views/elements/effects/index.ts

@@ -0,0 +1,11 @@
+import {_t, _td} from "../../../../languageHandler";
+
+export default [
+    {
+        emojis: ['🎊', '🎉'],
+        msgType: 'nic.custom.confetti',
+        command: 'confetti',
+        description: () => _td("Sends the given message with confetti"),
+        fallbackMessage: () => _t("sends confetti") + " 🎉",
+    },
+]

src/components/views/rooms/SendMessageComposer.js

@@ -42,8 +42,8 @@ import {Key} from "../../../Keyboard";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import RateLimitedFunc from '../../../ratelimitedfunc';
 import {Action} from "../../../dispatcher/actions";
-import {isConfettiEmoji} from "../elements/effects/confetti";
-import SettingsStore from "../../../settings/SettingsStore";
+import {containsEmoji} from "../elements/effects/effectUtilities";
+import effects from '../elements/effects';
 
 function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) {
     const replyContent = ReplyThread.makeReplyMixIn(repliedToEvent);
@@ -318,9 +318,11 @@ export default class SendMessageComposer extends React.Component {
                 });
             }
             dis.dispatch({action: "message_sent"});
-            if (isConfettiEmoji(content)) {
-                dis.dispatch({action: 'effects.confetti'});
+            effects.map( (effect) => {
+                if (containsEmoji(content, effect.emojis)) {
+                dis.dispatch({action: `effects.${effect.command}`});
             }
+            });
         }
 
         this.sendHistoryManager.save(this.model, replyToEvent);