Add sounds.

src/reactions/index.ts

@@ -1,7 +1,13 @@
+import catSoundOgg from "../sound/reactions/cat.mp3?url";
+import catSoundMp3 from "../sound/reactions/cat.mp3?url";
+import cricketsSoundOgg from "../sound/reactions/crickets.mp3?url";
+import cricketsSoundMp3 from "../sound/reactions/crickets.mp3?url";
 import dogSoundOgg from "../sound/reactions/dog.ogg?url";
 import dogSoundMp3 from "../sound/reactions/dog.mp3?url";
-import lightbulbOgg from "../sound/reactions/lightbulb.mp3?url";
-import lightbulbMp3 from "../sound/reactions/lightbulb.mp3?url";
+import genericSoundOgg from "../sound/reactions/generic.mp3?url";
+import genericSoundMp3 from "../sound/reactions/generic.mp3?url";
+import lightbulbSoundOgg from "../sound/reactions/lightbulb.mp3?url";
+import lightbulbSoundMp3 from "../sound/reactions/lightbulb.mp3?url";
 import { RelationType } from "matrix-js-sdk/src/types";
 
 export interface ReactionOption {
@@ -26,18 +32,13 @@ export interface ECallReactionEventContent {
 export const GenericReaction: ReactionOption = {
   name: "generic",
   emoji: "", // Filled in by user
+  sound: {
+    mp3: genericSoundMp3,
+    ogg: genericSoundOgg,
+  },
 };
 
 export const ReactionSet: ReactionOption[] = [
-  {
-    emoji: "🐶",
-    name: "dog",
-    alias: ["doggo", "pupper", "woofer"],
-    sound: {
-      ogg: dogSoundOgg,
-      mp3: dogSoundMp3,
-    },
-  },
   {
     emoji: "👍",
     name: "thumbsup",
@@ -53,15 +54,41 @@ export const ReactionSet: ReactionOption[] = [
     name: "party",
     alias: ["hurray", "success"],
   },
+  {
+    emoji: "🐶",
+    name: "dog",
+    alias: ["doggo", "pupper", "woofer"],
+    sound: {
+      ogg: dogSoundOgg,
+      mp3: dogSoundMp3,
+    },
+  },
   {
     emoji: "🦗",
     name: "crickets",
     alias: ["awkward", "silence"],
+    sound: {
+      ogg: cricketsSoundOgg,
+      mp3: cricketsSoundMp3,
+    },
   },
   {
     emoji: "🐱",
     name: "cat",
     alias: ["meow", "kitty"],
+    sound: {
+      ogg: catSoundOgg,
+      mp3: catSoundMp3,
+    },
+  },
+  {
+    emoji: "💡",
+    name: "lightbulb",
+    alias: ["bulb", "light", "idea", "ping"],
+    sound: {
+      ogg: lightbulbSoundOgg,
+      mp3: lightbulbSoundMp3,
+    },
   },
   {
     emoji: "😵‍💫",
@@ -73,13 +100,4 @@ export const ReactionSet: ReactionOption[] = [
     name: "ok",
     alias: ["okay", "cool"],
   },
-  {
-    emoji: "💡",
-    name: "lightbulb",
-    alias: ["bulb", "light", "idea", "ping"],
-    sound: {
-      ogg: lightbulbOgg,
-      mp3: lightbulbMp3,
-    },
-  },
 ];

src/room/InCallView.tsx

@@ -188,10 +188,6 @@ export const InCallView: FC<InCallViewProps> = ({
     [reactions],
   );
 
-  useEffect(() => {
-    console.log("Got reaction change", reactionsSet);
-  }, [reactionsSet]);
-
   useWakeLock();
 
   useEffect(() => {

src/useReactions.tsx

@@ -214,10 +214,13 @@ export const ReactionsProvider = ({
         }
 
         // One of our custom reactions
-        const reaction = ReactionSet.find((r) => r.name === content.name) ?? {
+        const reaction = {
           ...GenericReaction,
           emoji: content.emoji,
+          // If we don't find a reaction, we can fallback to the generic sound.
+          ...ReactionSet.find((r) => r.name === content.name),
         };
+
         setReactions((reactions) => {
           if (reactions[sender]) {
             // We've still got a reaction from this user, ignore it to prevent spamming