Resolve "Improve rendering of 'composing a reply'"

src/assets/css/chat.scss

@@ -152,7 +152,23 @@ $admin-fg: white;
         margin: 0;
         padding-left: 2 * $chat-standard-padding-s;
         padding-right: 2 * $chat-standard-padding-s;
-        padding-top: 0px;
+        padding-top: 0;
+
+        &.reply-to {
+            padding: 0;
+        }
+        .iput-area-inner-box {
+            box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
+            border-radius: 27px;
+            margin: 0px 20px;
+            padding: 20px;
+
+            @media #{map-get($display-breakpoints, 'sm-and-down')} {
+                margin: 0px 5px;
+                padding: 15px;
+            }
+        }
+
         .typing {
             font-family: "Inter", sans-serif;
             font-weight: 300;

src/assets/icons/video_message.svg

@@ -0,0 +1,5 @@
+<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="70" height="70" rx="12" fill="#242424"/>
+<circle cx="35" cy="35" r="14" fill="white" fill-opacity="0.8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.6875 30.1891C32.2879 29.9393 31.7695 30.2266 31.7695 30.6979V39.302C31.7695 39.7733 32.2879 40.0606 32.6875 39.8108L39.5708 35.5088C39.9468 35.2738 39.9468 34.7262 39.5708 34.4912L32.6875 30.1891Z" fill="#242424"/>
+</svg>

src/assets/translations/bo.json

@@ -138,7 +138,7 @@
         "user_is_typing": "{user}གཏགས་བཞིན་འདུག",
         "scale_image": "པར་རིས་རྐྱོང་སྐུམ།",
         "your_message": "ཁྱེད་ཀྱི་བརྡ་ལན...",
-        "replying_to_event": "དོན་རྐྱེན་ལ་ལན་འདེབས།: {message}",
+        "replying_to": "{user}",
         "unread_messages": "བཀླགས་མེད་པའི་འཕྲིན་ཐུང་ཁག",
         "user_changed_room_topic": "{user} ཁ་བརྡ་ཁང་གི་བརྗོད་གཞི་{topic} ལ་བརྗེ་སོང་།",
         "user_changed_room_name": "{user} ཁ་བརྡ་ཁང་གི་མིང་ {name} ལ་བརྗེས་སོང་།",
@@ -169,7 +169,10 @@
         "user_powerlevel_change_from_to": "{powerOld} ཡི{user} ནས {powerNew}་ལ།",
         "room_powerlevel_change": "{user} {changes} ཡི་སྟོབས་ཤུགས་གནས་རིམ་བརྗེས་སོང་།",
         "user_changed_guest_access_open": "{user} མགྲོན་པོ་ཁ་བརྡ་ཁང་དུ་འཛུལ་བཅུག་སོང་།",
-        "user_changed_guest_access_closed": "{user} མགྲོན་པོ་ཁ་བརྡ་ཁང་དུ་འཛུལ་བཅུག་མ་སོང་།"
+        "user_changed_guest_access_closed": "{user} མགྲོན་པོ་ཁ་བརྡ་ཁང་དུ་འཛུལ་བཅུག་མ་སོང་།",
+        "reply_image": "",
+        "reply_audio_message": "",
+        "reply_video": ""
     },
     "power_level": {
         "moderator": "མདོ་འཛིན་པ།",

src/assets/translations/en.json

@@ -51,7 +51,7 @@
     "user_changed_room_name": "{user} changed room name to {name}",
     "user_changed_room_topic": "{user} changed room topic to {topic}",
     "unread_messages": "Unread messages",
-    "replying_to_event": "REPLYING TO EVENT: {message}",
+    "replying_to": "Replying to {user}",
     "your_message": "Your message...",
     "scale_image": "Scale image",
     "user_is_typing": "{user} is typing",
@@ -59,7 +59,10 @@
     "room_powerlevel_change": "{user} changed powerlevel of {changes}",
     "user_powerlevel_change_from_to": "{user} from {powerOld} to {powerNew}",
     "user_changed_guest_access_closed": "{user} disallowed guests to join the room",
-    "user_changed_guest_access_open": "{user} allowed guests to join the room"
+    "user_changed_guest_access_open": "{user} allowed guests to join the room",
+    "reply_image": "Image",
+    "reply_audio_message": "Audio message",
+    "reply_video": "Video"
   },
   "room": {
     "members": "no members | 1 member | {count} members",

src/assets/translations/es.json

@@ -123,7 +123,7 @@
         "user_is_typing": "{user} esta escribiendo",
         "scale_image": "Escala de imagen",
         "your_message": "Tu mensaje...",
-        "replying_to_event": "RESPONDIENDO A UN EVENTO: {message}",
+        "replying_to": "{user}",
         "unread_messages": "Mensajes no leídos",
         "user_changed_room_name": "{user} cambió el nombre de la sala {name}",
         "user_changed_room_topic": "{user} cambió el tema de la sala a {topic}",
@@ -150,7 +150,10 @@
         "user_created_room": "{user} creo la sala",
         "user_aliased_room": "{user} hizo el alias de la sala {alias}",
         "user_changed_display_name": "{user}cambio su nombre para mostrar a {displayName}",
-        "you": "Tú"
+        "you": "Tú",
+        "reply_image": "",
+        "reply_audio_message": "",
+        "reply_video": ""
     },
     "menu": {
         "login": "Iniciar sesión",

src/assets/translations/nb_NO.json

@@ -28,7 +28,10 @@
         "file_prefix": "Fil: ",
         "user_said": "{user} sa:",
         "user_created_room": "{user} opprettet rommet",
-        "you": "Deg"
+        "you": "Deg",
+        "reply_image": "",
+        "reply_audio_message": "",
+        "reply_video": ""
     },
     "device_list": {
         "title": "Enheter",

src/assets/translations/pt_BR.json

@@ -64,7 +64,7 @@
         "user_changed_room_name": "{user} alterou o nome da sala para {name}",
         "user_changed_room_topic": "{user} alterou o assunto da sala para {topic}",
         "unread_messages": "Mensagens não lidas",
-        "replying_to_event": "RESPONDENDO AO EVENTO: {message}",
+        "replying_to": "{user}",
         "your_message": "A sua mensagem...",
         "scale_image": "Escala da imagem",
         "user_is_typing": "{user} está digitando",
@@ -72,7 +72,10 @@
         "room_powerlevel_change": "{user} alterou o nível de {changes}",
         "user_powerlevel_change_from_to": "{user} de {powerOld} para {powerNew}",
         "user_changed_guest_access_closed": "{user} não permitiu que os convidados entrassem na sala",
-        "user_changed_guest_access_open": "{user} permitiu que convidados entrassem na sala"
+        "user_changed_guest_access_open": "{user} permitiu que convidados entrassem na sala",
+        "reply_image": "",
+        "reply_audio_message": "",
+        "reply_video": ""
     },
     "room": {
         "members": "sem membros | 1 membro | {count} membros",

src/assets/translations/ro.json

@@ -193,7 +193,7 @@
         "user_is_typing": "{user} tastează",
         "scale_image": "Imagine la scară",
         "your_message": "Mesajul dumneavoastră...",
-        "replying_to_event": "RĂSPUNS LA EVENIMENT: {message}",
+        "replying_to": "{user}",
         "unread_messages": "Mesaje necitite",
         "user_changed_room_topic": "{user} a schimbat subiectul camerei în {topic}",
         "user_changed_room_name": "{user} a schimbat numele camerei în {name}",
@@ -220,7 +220,10 @@
         "user_changed_display_name": "{user} a schimbat numele de afișare în {displayName}",
         "user_aliased_room": "{user} a creat aliasul camerei {alias}",
         "user_created_room": "{user} a creat camera",
-        "you": "Tu"
+        "you": "Tu",
+        "reply_image": "",
+        "reply_audio_message": "",
+        "reply_video": ""
     },
     "language_display_name": "Engleză",
     "fallbacks": {

src/assets/translations/si.json

@@ -22,6 +22,9 @@
     "message": {
         "download_progress": "{percentage}% බාගත වී ඇත",
         "file_prefix": "ගොනුව: ",
+        "reply_image": "",
+        "reply_audio_message": "",
+        "reply_video": "",
         "you": "ඔබ"
     },
     "login": {

src/assets/translations/ug.json

@@ -48,7 +48,7 @@
         "users_are_typing": "ئەزالىرى يېزىۋاتىدۇ {نەپەر}",
         "user_is_typing": "قوللانغۇچى يېزىۋاتىدۇ",
         "your_message": "ئۇچۇرىڭىز ...",
-        "replying_to_event": "پائالىيەتكە جاۋاب: {ئۇچۇر}",
+        "replying_to": "{user}",
         "unread_messages": "ئوقۇلمىغان ئۇچۇرلار",
         "user_changed_room_topic": "قوللانغۇچى مۇنازىرەخانىنىڭ تېمىسىنى ئۆزگەرتتى",
         "user_changed_room_name": "قوللانغۇچى مۇنازىرەخانىنىڭ ئىسمىنى ئۆزگەرتتى",
@@ -59,7 +59,10 @@
         "room_history_invited": "ئەزالار تەكلىپ قىلىنغان ۋاقىتتىن باشلاپ ئوقۇغىلى بولىدۇ",
         "room_history_shared": "مۇنازىرەخانىدىكى ھەركىم ئوقۇيالايدۇ",
         "room_history_world_readable": "ھەركىم ئوقۇيالايدۇ",
-        "user_changed_room_history": "قوللانغۇچى» مۇنازىرەخانىنىڭ تارىخىنى قۇردى»"
+        "user_changed_room_history": "قوللانغۇچى» مۇنازىرەخانىنىڭ تارىخىنى قۇردى»",
+        "reply_image": "",
+        "reply_audio_message": "",
+        "reply_video": ""
     },
     "language_display_name": "ئىنگىلزچە",
     "new_room": {

src/assets/translations/zh_Hans.json

@@ -103,9 +103,12 @@
         "user_is_typing": "{user} 正在输入",
         "scale_image": "缩放图像",
         "your_message": "你的信息...",
-        "replying_to_event": "回复事件：{message}",
+        "replying_to": "{user}",
         "user_changed_guest_access_open": "{user} 允许客人加入聊天室",
-        "user_changed_guest_access_closed": "{user} 不允许客人加入聊天室"
+        "user_changed_guest_access_closed": "{user} 不允许客人加入聊天室",
+        "reply_image": "",
+        "reply_audio_message": "",
+        "reply_video": ""
     },
     "menu": {
         "login": "登录",

src/components/Chat.vue

@@ -119,176 +119,199 @@
     </div>
 
     <!-- Input area -->
-    <v-container v-if="room" fluid class="input-area-outer">
+    <v-container v-if="room" fluid :class="['input-area-outer', replyToEvent ? 'reply-to':'']">
-      <!-- "Scroll to end"-button -->
+      <div :class="[replyToEvent ? 'iput-area-inner-box':'']">
-      <v-btn
+        <!-- "Scroll to end"-button -->
-        id="btn-scroll-to-end"
+        <v-btn
-        class="scroll-to-end"
+          class="scroll-to-end"
-        v-show="showScrollToEnd"
+          v-show="showScrollToEnd"
-        fab
+          fab
-        small
+          small
-        elevation="0"
+          elevation="0"
-        color="black"
+          color="black"
-        @click.stop="scrollToEndOfTimeline"
+          @click.stop="scrollToEndOfTimeline"
-      >
-        <v-icon color="white">arrow_downward</v-icon>
-      </v-btn>
-
-      <v-row class="ma-0 pa-0">
-        <div v-if="replyToEvent">
-          {{
-            $t("message.replying_to_event", {
-              message: replyToEvent.getContent().body,
-            })
-          }}
-        </div>
-
-        <!-- CONTACT IS TYPING -->
-        <div class="typing">
-          {{ typingMembersString }}
-        </div>
-      </v-row>
-      <v-row class="input-area-inner align-center">
-        <v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
-          <v-textarea
-            id="message-input"
-            height="undefined"
-            ref="messageInput"
-            full-width
-            auto-grow
-            rows="1"
-            v-model="currentInput"
-            no-resize
-            class="input-area-text"
-            :placeholder="$t('message.your_message')"
-            hide-details
-            background-color="white"
-            v-on:keydown.enter.prevent="
-              () => {
-                sendCurrentTextMessage();
-              }
-            "
-          />
-        </v-col>
-
-        <v-col
-          class="input-area-button text-center flex-grow-0 flex-shrink-1"
-          v-if="editedEvent || replyToEvent"
         >
-          <v-btn
+          <v-icon color="white">arrow_downward</v-icon>
-            id="btn-cancel-reply"
+        </v-btn>
-            fab
-            small
-            elevation="0"
-            color="black"
-            @click.stop="cancelEditReply"
-          >
-            <v-icon color="white">cancel</v-icon>
-          </v-btn>
-        </v-col>
 
-        <v-col
+        <v-row class="ma-0 pa-0">
-          class="input-area-button text-center flex-grow-0 flex-shrink-1"
+          <div v-if="replyToEvent" class="row">
-          v-if="!currentInput || currentInput.length == 0 || showRecorder"
+            <div class="col col-auto">
-        >
+              <v-btn
-          <v-btn
+                fab
-            id="btn-microphone"
+                small
-            v-if="canRecordAudio"
+                elevation="0"
-            class="mic-button"
+                color="black"
-            ref="mic_button"
+                @click.stop="cancelEditReply"
-            fab
+              >
-            small
+                <v-icon color="white">cancel</v-icon>
-            elevation="0"
+              </v-btn>
-            v-blur
+            </div>
-            style="z-index: 10"
+            <div class="col">
-            v-longTap:250="[showRecordingUI, startRecording]"
+              <div class="font-weight-medium">{{ $t("message.replying_to", { user: replyToEvent.sender.name }) }}</div>
+              <div v-if="replyToContentType === 'm.text'"> {{ replyToEvent.getContent().body }} </div>
+              <div v-if="replyToContentType === 'm.image'"> {{ $t("message.reply_image") }} </div>
+              <div v-if="replyToContentType === 'm.audio'"> {{ $t("message.reply_audio_message") }} </div>
+              <div v-if="replyToContentType === 'm.video'"> {{ $t("message.reply_video") }} </div>
+            </div>
+            <div class="col col-auto" v-if="replyToContentType !== 'm.text'">
+              <img
+                v-if="replyToContentType === 'm.image'"
+                width="150px"
+                :src="replyToImg"
+                class="rounded"
+              />
+              <v-img
+                v-if="replyToContentType === 'm.audio'"
+                src="@/assets/icons/audio_message.svg"
+              />
+              <v-img
+                v-if="replyToContentType === 'm.video'"
+                src="@/assets/icons/video_message.svg"
+              />
+            </div>
+          </div>
+
+          <!-- CONTACT IS TYPING -->
+          <div class="typing">
+            {{ typingMembersString }}
+          </div>
+        </v-row>
+        <v-row class="input-area-inner align-center">
+          <v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
+            <v-textarea
+              height="undefined"
+              ref="messageInput"
+              full-width
+              auto-grow
+              rows="1"
+              v-model="currentInput"
+              no-resize
+              class="input-area-text"
+              :placeholder="$t('message.your_message')"
+              hide-details
+              background-color="white"
+              v-on:keydown.enter.prevent="
+                () => {
+                  sendCurrentTextMessage();
+                }
+              "
+            />
+          </v-col>
+
+          <v-col
+            class="input-area-button text-center flex-grow-0 flex-shrink-1"
+            v-if="editedEvent"
           >
-            <v-icon :color="showRecorder ? 'white' : 'black'">mic</v-icon>
+            <v-btn
-          </v-btn>
+              fab
-          <v-btn
+              small
+              elevation="0"
+              color="black"
+              @click.stop="cancelEditReply"
+            >
+              <v-icon color="white">cancel</v-icon>
+            </v-btn>
+          </v-col>
+
+          <v-col
+            class="input-area-button text-center flex-grow-0 flex-shrink-1"
+            v-if="!currentInput || currentInput.length == 0 || showRecorder"
+          >
+            <v-btn
+              v-if="canRecordAudio"
+              class="mic-button"
+              ref="mic_button"
+              fab
+              small
+              elevation="0"
+              v-blur
+              style="z-index: 10"
+              v-longTap:250="[showRecordingUI, startRecording]"
+            >
+              <v-icon :color="showRecorder ? 'white' : 'black'">mic</v-icon>
+            </v-btn>
+            <v-btn
+              v-else
+              class="mic-button"
+              ref="mic_button"
+              fab
+              small
+              elevation="0"
+              v-blur
+              style="z-index: 10"
+              @click.stop="showNoRecordingAvailableDialog = true"
+            >
+              <v-icon :color="showRecorder ? 'white' : 'black'">mic</v-icon>
+            </v-btn>
+          </v-col>
+
+          <v-col
+            class="input-area-button text-center flex-grow-0 flex-shrink-1"
             v-else
-            id="btn-microphone"
-            class="mic-button"
-            ref="mic_button"
-            fab
-            small
-            elevation="0"
-            v-blur
-            style="z-index: 10"
-            @click.stop="showNoRecordingAvailableDialog = true"
           >
-            <v-icon :color="showRecorder ? 'white' : 'black'">mic</v-icon>
+            <v-btn
-          </v-btn>
+              fab
-        </v-col>
+              small
+              elevation="0"
+              color="black"
+              @click.stop="sendCurrentTextMessage"
+              :disabled="sendButtonDisabled"
+            >
+              <v-icon color="white">{{
+                editedEvent ? "save" : "arrow_upward"
+              }}</v-icon>
+            </v-btn>
+          </v-col>
 
-        <v-col
+          <v-col
-          class="input-area-button text-center flex-grow-0 flex-shrink-1"
+            v-if="$config.shortCodeStickers"
-          v-else
+            class="input-area-button text-center flex-grow-0 flex-shrink-1"
-        >
-          <v-btn
-            id="btn-send"
-            fab
-            small
-            elevation="0"
-            color="black"
-            @click.stop="sendCurrentTextMessage"
-            :disabled="sendButtonDisabled"
           >
-            <v-icon color="white">{{
-              editedEvent ? "save" : "arrow_upward"
-            }}</v-icon>
-          </v-btn>
-        </v-col>
-
-        <v-col
-          v-if="$config.shortCodeStickers"
-          class="input-area-button text-center flex-grow-0 flex-shrink-1"
-        >
-          <v-btn
-            id="btn-stickers"
-            v-if="!showRecorder"
-            icon
-            large
-            color="black"
-            @click="showStickerPicker"
-            :disabled="attachButtonDisabled"
-          >
-            <v-icon large>face</v-icon>
-          </v-btn>
-        </v-col>
-
-        <v-col class="input-area-button text-center flex-grow-0 flex-shrink-1">
-          <label icon flat ref="attachmentLabel">
             <v-btn
               v-if="!showRecorder"
               id="btn-attach"
               icon
               large
               color="black"
-              @click="showAttachmentPicker"
+              @click="showStickerPicker"
               :disabled="attachButtonDisabled"
             >
-              <v-icon x-large>add_circle_outline</v-icon>
+              <v-icon large>face</v-icon>
             </v-btn>
-            <input
+          </v-col>
-              id="attachment-picker"
+
-              ref="attachment"
+          <v-col class="input-area-button text-center flex-grow-0 flex-shrink-1">
-              type="file"
+            <label icon flat ref="attachmentLabel">
-              name="attachment"
+              <v-btn
-              @change="handlePickedAttachment($event)"
+                v-if="!showRecorder"
-              accept="image/*|audio/*|video/*|application/pdf"
+                icon
-              style="display: none"
+                large
-            />
+                color="black"
-          </label>
+                @click="showAttachmentPicker"
-        </v-col>
+                :disabled="attachButtonDisabled"
-      </v-row>
+              >
-      <VoiceRecorder
+                <v-icon x-large>add_circle_outline</v-icon>
-        :micButtonRef="$refs.mic_button"
+              </v-btn>
-        :ptt="showRecorderPTT"
+              <input
-        :show="showRecorder"
+                ref="attachment"
-        v-on:close="showRecorder = false"
+                type="file"
-        v-on:file="onVoiceRecording"
+                name="attachment"
-      />
+                @change="handlePickedAttachment($event)"
+                accept="image/*|audio/*|video/*|application/pdf"
+                style="display: none"
+              />
+            </label>
+          </v-col>
+        </v-row>
+        <VoiceRecorder
+          :micButtonRef="$refs.mic_button"
+          :ptt="showRecorderPTT"
+          :show="showRecorder"
+          v-on:close="showRecorder = false"
+          v-on:file="onVoiceRecording"
+        />
+      </div>
     </v-container>
 
     <div v-if="currentImageInputPath">
@@ -521,7 +544,6 @@ ScrollPosition.prototype.prepareFor = function (direction) {
 
 export default {
   name: "Chat",
-
   components: {
     ChatHeader,
     MessageIncomingText,
@@ -585,6 +607,8 @@ export default {
       selectedEvent: null,
       editedEvent: null,
       replyToEvent: null,
+      replyToImg: null,
+      replyToContentType: null,
       showNoRecordingAvailableDialog: false,
       showContextMenu: false,
       showContextMenuAnchor: null,
@@ -1460,9 +1484,22 @@ export default {
       this.sendQuickReaction({ reaction: e.emoji, event: e.event });
     },
 
+    setReplyToImage(event) {
+      util
+      .getThumbnail(this.$matrix.matrixClient, event)
+      .then((url) => {
+        this.replyToImg = url;
+      })
+      .catch((err) => {
+        console.log("Failed to fetch thumbnail: ", err);
+      });
+    },
+
     addReply(event) {
       this.replyToEvent = event;
       this.$refs.messageInput.focus();
+      this.replyToContentType= event.getContent().msgtype;
+      this.setReplyToImage(event);
     },
 
     edit(event) {