diff --git a/src/reactions/index.ts b/src/reactions/index.ts index 308754a5..f9f3cfee 100644 --- a/src/reactions/index.ts +++ b/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, - }, - }, ]; diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index 1982fa26..2c3cc383 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -188,10 +188,6 @@ export const InCallView: FC = ({ [reactions], ); - useEffect(() => { - console.log("Got reaction change", reactionsSet); - }, [reactionsSet]); - useWakeLock(); useEffect(() => { diff --git a/src/sound/reactions/cat.mp3 b/src/sound/reactions/cat.mp3 new file mode 100644 index 00000000..526e5fe2 Binary files /dev/null and b/src/sound/reactions/cat.mp3 differ diff --git a/src/sound/reactions/cat.ogg b/src/sound/reactions/cat.ogg new file mode 100644 index 00000000..c0182627 Binary files /dev/null and b/src/sound/reactions/cat.ogg differ diff --git a/src/sound/reactions/crickets.mp3 b/src/sound/reactions/crickets.mp3 new file mode 100644 index 00000000..584f0d55 Binary files /dev/null and b/src/sound/reactions/crickets.mp3 differ diff --git a/src/sound/reactions/crickets.ogg b/src/sound/reactions/crickets.ogg new file mode 100644 index 00000000..86b7e314 Binary files /dev/null and b/src/sound/reactions/crickets.ogg differ diff --git a/src/sound/reactions/generic.mp3 b/src/sound/reactions/generic.mp3 new file mode 100644 index 00000000..71d80c70 Binary files /dev/null and b/src/sound/reactions/generic.mp3 differ diff --git a/src/sound/reactions/generic.ogg b/src/sound/reactions/generic.ogg new file mode 100644 index 00000000..6c9470fa Binary files /dev/null and b/src/sound/reactions/generic.ogg differ diff --git a/src/useReactions.tsx b/src/useReactions.tsx index 843a36ec..491c22b7 100644 --- a/src/useReactions.tsx +++ b/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