Show recording users in the audio layout

src/assets/css/chat.scss

@@ -1271,6 +1271,27 @@ body {
     flex: 1 0 auto;
     padding: 20px;
   }
+  .typing-users {
+    flex: 1 0 52px;
+    min-height: 52px;
+    padding: 20px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    max-width: 100%;
+    display: flex;
+    .typing-user {
+      width: 32px !important;
+      height: 32px !important;
+      margin-left: -8px !important;
+    }
+    .list-enter-active, .list-leave-active {
+      transition: all 1s;
+    }
+    .list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
+      opacity: 0;
+      transform: translateY(24px);
+    }
+  }
   .load-later {
     flex: 1 0 auto;
     padding: 20px;

src/components/AudioLayout.vue

@@ -3,6 +3,19 @@
     <div class="load-earlier clickable" @click="loadPrevious">
       <v-icon color="white" size="28">expand_less</v-icon>
     </div>
+
+    <!-- Currently recording users -->
+    <div class="typing-users">
+      <transition-group name="list" tag="div">
+        <v-avatar v-for="(member) in recordingMembersExceptMe" :key="member.userId" class="typing-user" size="32" color="grey">
+          <img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
+          <span v-else class="white--text headline">{{
+            member.name.substring(0, 1).toUpperCase()
+          }}</span>
+        </v-avatar>
+      </transition-group>
+    </div>
+
     <div class="sound-wave-view">
       <div class="volume-container">
         <div ref="volume"></div>
@@ -77,8 +90,14 @@ export default {
       default: function () {
         return null;
       }
+    },
+    recordingMembers: {
+      type: Array,
+      default: function () {
+        return []
       }
     },
+  },
   data() {
     return {
       src: null,
@@ -167,6 +186,11 @@ export default {
         }
       },
     },
+    recordingMembersExceptMe() {
+      return this.recordingMembers.filter((member) => {
+        return member.userId !== this.$matrix.currentUserId;
+      });
+    },
   },
   watch: {
     autoplay: {
@@ -412,6 +436,18 @@ export default {
             });
       }
     },
+    memberAvatar(member) {
+      if (member) {
+        return member.getAvatarUrl(
+          this.$matrix.matrixClient.getHomeserverUrl(),
+          40,
+          40,
+          "scale",
+          true
+        );
+      }
+      return null;
+    },
   }
 };
 </script>

src/components/Chat.vue

@@ -8,6 +8,7 @@
       :events="events" :autoplay="!showRecorder" 
       :timelineSet="timelineSet"
       :readMarker="readMarker"
+      :recordingMembers="typingMembers"
       v-on:start-recording="showRecorder = true"
       v-on:loadnext="handleScrolledToBottom(false)"
       v-on:loadprevious="handleScrolledToTop()"