feat: UI: Animate reactions (copied from iOS)

package.json

@@ -157,6 +157,7 @@
     "sinon": "^17.0.1",
     "swagger-typescript-api": "^13.0.3",
     "typescript": "^5.4.2",
+    "user-agent-data-types": "^0.4.2",
     "uuid": "^9.0.1",
     "vite": "^5.1.6",
     "vite-plugin-electron": "^0.28.4",

src/components/AChat/AChatReactions/AChatReaction.vue

@@ -1,6 +1,13 @@
 <template>
   <div :class="classes.root">
-    <div :class="classes.emoji">{{ asset.react_message }}</div>
+    <div
+      :class="{
+        [classes.emoji]: true,
+        [classes.emojiAnimate]: animate
+      }"
+    >
+      {{ asset.react_message }}
+    </div>
 
     <div :class="classes.avatar" v-if="$slots.avatar">
       <slot name="avatar" />
@@ -16,6 +23,7 @@ const className = 'a-chat-reaction'
 const classes = {
   root: className,
   emoji: `${className}__emoji`,
+  emojiAnimate: `${className}__emoji--animate`,
   avatar: `${className}__avatar`
 }
 
@@ -24,6 +32,10 @@ export default defineComponent({
     asset: {
       type: Object as PropType<ReactionAsset>,
       required: true
+    },
+    animate: {
+      type: Boolean,
+      required: true
     }
   },
   setup() {
@@ -52,13 +64,41 @@ export default defineComponent({
     font-size: 16px;
   }
 
+  &__emoji--animate {
+    animation: animate__heartBeat 1.5s ease-in-out;
+  }
+
   &__avatar {
     position: absolute;
     bottom: -9px;
     right: -9px;
   }
 }
 
+@keyframes animate__heartBeat {
+  0% {
+    transform: scale(1);
+    transform-origin: center center;
+    transition-timing-function: ease-out;
+  }
+  20% {
+    transform: scale(1.32);
+    transition-timing-function: ease-in;
+  }
+  40% {
+    transform: scale(1);
+    transition-timing-function: ease-out;
+  }
+  60% {
+    transform: scale(1.21);
+    transition-timing-function: ease-in;
+  }
+  80% {
+    transform: scale(1);
+    transition-timing-function: ease-out;
+  }
+}
+
 .v-theme--light {
   .a-chat-reaction {
   }

src/components/AChat/AChatReactions/AChatReactions.vue

@@ -11,6 +11,7 @@
       :key="reaction.id"
       :class="classes.reaction"
       :asset="reaction.asset"
+      :animate="shouldAnimate(reaction)"
     >
       <template #avatar v-if="reaction.senderId === partnerId">
         <ChatAvatar :user-id="partnerId" :size="16" />
@@ -70,10 +71,20 @@ export default defineComponent({
       return list.sort((left, right) => left.timestamp - right.timestamp)
     })
 
+    const shouldAnimate = (reaction: NormalizedChatMessageTransaction) => {
+      const isLastReaction = store.getters['chat/isLastReaction'](reaction.id, partnerId.value)
+
+      return (
+        isLastReaction &&
+        (store.state.chat.animateIncomingReaction || store.state.chat.animateOutgoingReaction)
+      )
+    }
+
     return {
       classes,
       partnerId,
-      reactions
+      reactions,
+      shouldAnimate
     }
   }
 })

src/components/Chat/Chat.vue

@@ -473,6 +473,7 @@ export default {
   beforeUnmount() {
     window.removeEventListener('keyup', this.onKeyPress)
     Visibility.unbind(this.visibilityId)
+    this.$store.dispatch('clearAnimationTimeouts')
   },
   mounted() {
     if (this.isFulfilled && this.chatPage <= 0) this.fetchChatMessages()
@@ -545,7 +546,6 @@ export default {
       this.closeActionsDropdown()
 
       emojiWeight.addReaction(emoji)
-      vibrate.veryShort()
 
       return this.$store.dispatch('chat/sendReaction', {
         recipientId: this.partnerId,

src/lib/constants/index.d.ts

@@ -122,3 +122,8 @@ export declare const FetchStatus: {
 }
 
 export declare const REACT_EMOJIS: Record<string, string>
+
+export declare const AnimationReactionType = {
+  Incoming: 0,
+  Outgoing: 1
+}

src/lib/constants/index.js

@@ -226,3 +226,8 @@ export const REACT_EMOJIS = {
   FLUSHED_FACE: '😳',
   PARTY_POPPER: '🎉'
 }
+
+export const AnimationReactionType = {
+  Incoming: 0,
+  Outgoing: 1
+}

src/lib/vibrate.js → src/lib/vibrate/index.ts

@@ -1,4 +1,4 @@
-const VIBRATION_PATTERN = {
+export const VIBRATION_PATTERN: Record<string, number[]> = {
   VERY_SHORT: [40],
   SHORT: [80],
   MEDIUM: [160],
@@ -17,15 +17,15 @@ function checkVibrateIsSupported() {
   return false
 }
 
-function createVibrationPattern(pattern) {
+export function createVibrationPattern(pattern: number[]): () => void {
   return () => {
     if (!checkVibrateIsSupported()) return
 
-    navigator.vibrate(pattern)
+    navigator.userAgentData?.mobile && navigator.vibrate(pattern)
   }
 }
 
-export const vibrate = {
+export const vibrate: Record<string, () => void> = {
   veryShort: createVibrationPattern(VIBRATION_PATTERN.VERY_SHORT),
   short: createVibrationPattern(VIBRATION_PATTERN.SHORT),
   medium: createVibrationPattern(VIBRATION_PATTERN.MEDIUM),

src/lib/vibrate/navigator.d.ts

@@ -0,0 +1 @@
+/// <reference types="user-agent-data-types" />

src/store/modules/chat/index.js

@@ -11,14 +11,22 @@ import {
 } from '@/lib/chat/helpers'
 import { i18n } from '@/i18n'
 import { isNumeric } from '@/lib/numericHelpers'
-import { Cryptos, TransactionStatus as TS, MessageType } from '@/lib/constants'
+import {
+  Cryptos,
+  TransactionStatus as TS,
+  MessageType,
+  AnimationReactionType as ART
+} from '@/lib/constants'
 import { isStringEqualCI } from '@/lib/textHelpers'
 import { replyMessageAsset } from '@/lib/adamant-api/asset'
+import { vibrate } from '@/lib/vibrate'
 
 import { generateAdamantChats } from './utils/generateAdamantChats'
 
 export let interval
 
+export let timeouts = []
+
 const SOCKET_ENABLED_TIMEOUT = 10000
 const SOCKET_DISABLED_TIMEOUT = 3000
 
@@ -45,7 +53,9 @@ const state = () => ({
   chats: {},
   lastMessageHeight: 0, // `height` value of the last message
   isFulfilled: false, // false - getChats did not start or in progress, true - getChats finished
-  offset: 0 // for loading chat list with pagination. -1 if all of chats loaded
+  offset: 0, // for loading chat list with pagination. -1 if all of chats loaded
+  animateIncomingReaction: false, // `true` - animate incoming last reaction
+  animateOutgoingReaction: false // `true` - animate outgoing last reaction
 })
 
 const getters = {
@@ -92,6 +102,13 @@ const getters = {
     return reactions[reactions.length - 1]
   },
 
+  isLastReaction: (state, getters) => (transactionId, partnerId) => {
+    const messages = getters.messages(partnerId)
+    const index = messages.findIndex((message) => message.id === transactionId)
+
+    return index === messages.length - 1
+  },
+
   /**
    * Return message by ID.
    * @param {number} id Message Id
@@ -486,6 +503,14 @@ const mutations = {
     }
   },
 
+  updateAnimateOutgoingReaction(state, value) {
+    state.animateOutgoingReaction = value
+  },
+
+  updateAnimateIncomingReaction(state, value) {
+    state.animateIncomingReaction = value
+  },
+
   reset(state) {
     state.chats = {}
     state.lastMessageHeight = 0
@@ -603,7 +628,7 @@ const actions = {
    * This is a temporary solution until the sockets are implemented.
    * @returns {Promise}
    */
-  getNewMessages({ state, commit, dispatch }) {
+  getNewMessages({ state, commit, dispatch, rootState }) {
     if (!state.isFulfilled) {
       return Promise.reject(new Error('Chat is not fulfilled'))
     }
@@ -613,6 +638,10 @@ const actions = {
 
       dispatch('pushMessages', messages)
 
+      if (!rootState.options.useSocketConnection && messages.length > 0) {
+        dispatch('animateLastReaction', ART.Incoming)
+      }
+
       if (lastMessageHeight > 0) {
         commit('setHeight', lastMessageHeight)
       }
@@ -789,14 +818,16 @@ const actions = {
    * @param {string} reactMessage Emoji
    * @returns {Promise}
    */
-  sendReaction({ commit, rootState }, { recipientId, reactToId, reactMessage }) {
+  sendReaction({ dispatch, commit, rootState }, { recipientId, reactToId, reactMessage }) {
     const messageObject = createReaction({
       recipientId,
       senderId: rootState.address,
       reactToId,
       reactMessage
     })
 
+    dispatch('animateLastReaction', ART.Outgoing)
+
     commit('pushMessage', {
       message: messageObject,
       userId: rootState.address
@@ -833,6 +864,22 @@ const actions = {
       })
   },
 
+  /**
+   * Animation of last reaction with vibro
+   * @param {ART} type - animation reaction type - incoming or outgoing
+   */
+  animateLastReaction({ commit }, type) {
+    const updateFn =
+      type === ART.Incoming ? 'updateAnimateIncomingReaction' : 'updateAnimateOutgoingReaction'
+
+    vibrate.veryShort()
+
+    commit(updateFn, true)
+    const timeout = setTimeout(() => commit(updateFn, false), 1500)
+
+    timeouts.push(timeout)
+  },
+
   /**
    * Fast crypto-transfer, to display transaction in chat
    * before confirmation.
@@ -908,6 +955,13 @@ const actions = {
     }
   },
 
+  clearAnimationTimeouts: {
+    root: true,
+    handler() {
+      timeouts.forEach((timeout) => clearTimeout(timeout))
+    }
+  },
+
   /** Resets module state **/
   reset: {
     root: true,

src/store/plugins/socketsPlugin.js

@@ -1,4 +1,5 @@
 import socketClient from '@/lib/sockets'
+import { AnimationReactionType as ART } from '@/lib/constants'
 import { decodeChat, getPublicKey } from '@/lib/adamant-api'
 import { isStringEqualCI } from '@/lib/textHelpers'
 
@@ -15,6 +16,8 @@ function subscribe(store) {
       // Currently, we don't update confirmations for direct transfers, see getChats() in adamant-api.js
       // So we'll update confirmations in getTransactionStatus()
       store.dispatch('chat/pushMessages', [decoded])
+
+      store.dispatch('chat/animateLastReaction', ART.Incoming)
     })
   })
 }

src/views/Vibro.vue

@@ -47,7 +47,7 @@
   </div>
 </template>
 <script>
-import { vibrate } from '@/lib/vibrate.js'
+import { vibrate } from '@/lib/vibrate'
 export default {
   data: () => ({
     vibro: undefined