feat(Reactions): Change to animated emojis

Signed-off-by: DorraJaouad <[email protected]>

src/components/CallView/shared/ReactionToaster.vue

@@ -28,7 +28,13 @@
 			:key="toast.seed"
 			class="toast"
 			:style="styled(toast.name, toast.seed)">
-			<span class="toast__reaction">
+			<img v-if="toast.reactionURL"
+				class="toast__reaction-img"
+				:src="toast.reactionURL"
+				:alt="toast.reaction"
+				width="34"
+				height="34">
+			<span v-else class="toast__reaction">
 				{{ toast.reaction }}
 			</span>
 			<span class="toast__name">
@@ -43,13 +49,27 @@ import Hex from 'crypto-js/enc-hex.js'
 import SHA1 from 'crypto-js/sha1.js'
 
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { imagePath } from '@nextcloud/router'
 
 import usernameToColor from '@nextcloud/vue/dist/Functions/usernameToColor.js'
 
 import TransitionWrapper from '../../TransitionWrapper.vue'
 
 import { useGuestNameStore } from '../../../stores/guestName.js'
 
+const reactions = {
+	'❤️': 'Heart.gif',
+	'🎉': 'Party.gif',
+	'👏': 'Clap.gif',
+	'👍': 'Thumbs-up.gif',
+	'👎': 'Thumbs-down.gif',
+	'😂': 'Joy.gif',
+	'🤩': 'Star-struck.gif',
+	'🤔': 'Thinking-face.gif',
+	'😲': 'Surprised.gif',
+	'😥': 'Concerned.gif',
+}
+
 export default {
 	name: 'ReactionToaster',
 
@@ -153,6 +173,7 @@ export default {
 			this.reactionsQueue.push({
 				id: model.attributes.peerId,
 				reaction,
+				reactionURL: this.getReactionURL(reaction),
 				name: isLocalModel
 					? this.$store.getters.getDisplayName() || t('spreed', 'Guest')
 					: this.getParticipantName(model),
@@ -186,6 +207,12 @@ export default {
 			return this.guestNameStore.getGuestName(this.token, Hex.stringify(SHA1(peerId)))
 		},
 
+		getReactionURL(emoji) {
+			return reactions[emoji]
+				? imagePath('spreed', 'emojis/' + reactions[emoji])
+				: undefined
+		},
+
 		styled(name, seed) {
 			const color = usernameToColor(name)
 
@@ -229,6 +256,10 @@ export default {
 			& {
 				font-size: 150%;
 			}
+			&-img {
+				width: 30px;
+				height: 30px;
+			}
 		}
 	}