diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss index b9662df..ba92df1 100644 --- a/src/assets/css/chat.scss +++ b/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; diff --git a/src/components/AudioLayout.vue b/src/components/AudioLayout.vue index a3f145c..d3b9920 100644 --- a/src/components/AudioLayout.vue +++ b/src/components/AudioLayout.vue @@ -3,6 +3,19 @@
expand_less
+ + +
+ + + + {{ + member.name.substring(0, 1).toUpperCase() + }} + + +
+
@@ -77,7 +90,13 @@ export default { default: function () { return null; } - } + }, + recordingMembers: { + type: Array, + default: function () { + return [] + } + }, }, data() { return { @@ -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; + }, } }; diff --git a/src/components/Chat.vue b/src/components/Chat.vue index 645d316..bf26cf4 100644 --- a/src/components/Chat.vue +++ b/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()"