(fix) message replies with other files

Author: antoine92190

src/lib/Message/MessageReply/MessageReply.scss

@@ -34,4 +34,9 @@
 		font-size: 12px;
 		color: var(--chat-message-color-reply-content);
 	}
+
+	.vac-file-container {
+		height: 60px;
+		width: 60px;
+	}
 }

src/lib/Message/MessageReply/MessageReply.vue

@@ -30,6 +30,23 @@
 			</template>
 		</audio-player>
 
+		<div v-else-if="isOtherFile" class="vac-file-container">
+			<div>
+				<slot name="file-icon">
+					<svg-icon name="file" />
+				</slot>
+			</div>
+			<div class="vac-text-ellipsis">
+				{{ firstFile.name }}
+			</div>
+			<div
+				v-if="firstFile.extension"
+				class="vac-text-ellipsis vac-text-extension"
+			>
+				{{ firstFile.extension }}
+			</div>
+		</div>
+
 		<div class="vac-reply-content">
 			<format-message
 				:content="message.replyMessage.content"
@@ -47,6 +64,7 @@
 </template>
 
 <script>
+import SvgIcon from '../../../components/SvgIcon/SvgIcon'
 import FormatMessage from '../../../components/FormatMessage/FormatMessage'
 
 import AudioPlayer from '../AudioPlayer/AudioPlayer'
@@ -59,7 +77,7 @@ const {
 
 export default {
 	name: 'MessageReply',
-	components: { AudioPlayer, FormatMessage },
+	components: { AudioPlayer, SvgIcon, FormatMessage },
 
 	props: {
 		message: { type: Object, required: true },
@@ -75,7 +93,7 @@ export default {
 			return replyUser ? replyUser.username : ''
 		},
 		firstFile() {
-			return this.message.replyMessage.files
+			return this.message.replyMessage.files?.length
 				? this.message.replyMessage.files[0]
 				: {}
 		},
@@ -87,6 +105,14 @@ export default {
 		},
 		isVideo() {
 			return isVideoFile(this.firstFile)
+		},
+		isOtherFile() {
+			return (
+				this.message.replyMessage.files?.length &&
+				!this.isAudio &&
+				!this.isVideo &&
+				!this.isImage
+			)
 		}
 	}
 }

src/lib/Room/RoomMessageReply/RoomMessageReply.vue

@@ -101,7 +101,7 @@ export default {
 
 	computed: {
 		firstFile() {
-			return this.messageReply.files ? this.messageReply.files[0] : {}
+			return this.messageReply.files?.length ? this.messageReply.files[0] : {}
 		},
 		isImage() {
 			return isImageFile(this.firstFile)
@@ -114,7 +114,7 @@ export default {
 		},
 		isOtherFile() {
 			return (
-				this.messageReply.files &&
+				this.messageReply.files?.length &&
 				!this.isAudio &&
 				!this.isVideo &&
 				!this.isImage