(refacto) move media preview to root

Author: antoine92190

src/lib/ChatWindow.vue

@@ -59,8 +59,7 @@
 				:scroll-distance="scrollDistance"
 				:accepted-files="acceptedFiles"
 				:templates-text="templatesText"
-        :media-modal-preview="mediaModalPreview"
-        @toggle-rooms-list="toggleRoomsList"
+				@toggle-rooms-list="toggleRoomsList"
 				@room-info="roomInfo"
 				@fetch-messages="fetchMessages"
 				@send-message="sendMessage"
@@ -79,12 +78,18 @@
 				</template>
 			</room>
 		</div>
+		<media-preview
+			v-if="showMediaModal"
+			:file="filePreview"
+			@close-file-modal="showMediaModal = false"
+		/>
 	</div>
 </template>
 
 <script>
 import RoomsList from './RoomsList/RoomsList'
 import Room from './Room/Room'
+import MediaPreview from './MediaPreview/MediaPreview'
 
 import locales from '../locales'
 import { defaultThemeStyles, cssThemeVars } from '../themes'
@@ -97,7 +102,8 @@ export default {
 	name: 'ChatContainer',
 	components: {
 		RoomsList,
-		Room
+		Room,
+		MediaPreview
 	},
 
 	props: {
@@ -160,8 +166,8 @@ export default {
 		scrollDistance: { type: Number, default: 60 },
 		acceptedFiles: { type: String, default: '*' },
 		templatesText: { type: Array, default: null },
-    mediaModalPreview: { type: Boolean, default: true }
-  },
+		mediaModalPreview: { type: Boolean, default: true }
+	},
 
 	emits: [
 		'toggle-rooms-list',
@@ -187,7 +193,11 @@ export default {
 			room: {},
 			loadingMoreRooms: false,
 			showRoomsList: true,
-			isMobile: false
+			isMobile: false,
+			showMediaModal: false,
+			filePreview: {
+				url: ''
+			}
 		}
 	},
 
@@ -329,7 +339,12 @@ export default {
 			this.$emit('delete-message', { message, roomId: this.room.roomId })
 		},
 		openFile({ message, file }) {
-			this.$emit('open-file', { message, file })
+			if (this.mediaModalPreview && file.action === 'preview') {
+				this.filePreview = file.file
+				this.showMediaModal = true
+			} else {
+				this.$emit('open-file', { message, file })
+			}
 		},
 		openUserTag({ user }) {
 			this.$emit('open-user-tag', { user })

src/lib/MediaPreview/MediaPreview.scss

@@ -0,0 +1,22 @@
+.vac-room-file-preview {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 11;
+	background-color: rgba(0, 0, 0, 0.5);
+
+	.vac-room-file-preview-container {
+		width: 100%;
+		height: 100%;
+	}
+
+	.vac-image-preview {
+		width: 100%;
+		height: 100%;
+		background-size: contain !important;
+		background-repeat: no-repeat;
+		background-position: center;
+	}
+}

src/lib/MediaPreview/MediaPreview.vue

@@ -0,0 +1,59 @@
+<template>
+	<div class="vac-room-file-preview">
+		<div
+			v-if="isImage"
+			class="vac-room-file-preview-container"
+			@click.stop="$emit('close-file-modal')"
+			@keypress.esc="$emit('close-file-modal')"
+		>
+			<div
+				class="vac-image-preview"
+				:style="{
+					'background-image': `url('${file.url}')`
+				}"
+				@keypress.esc="$emit('close-file-modal')"
+			/>
+		</div>
+
+		<div
+			v-else-if="isVideo"
+			class="vac-video-preview"
+			@keypress.esc="$emit('close-file-modal')"
+		>
+			<video width="100%" height="100%" controls>
+				<source :src="file.url" />
+			</video>
+		</div>
+		<button @click="$emit('close-file-modal')">
+			Close
+		</button>
+	</div>
+</template>
+<script>
+// import SvgIcon from '../../../components/SvgIcon/SvgIcon'
+
+const { isImageFile, isVideoFile } = require('../../utils/media-file')
+
+export default {
+	name: 'RoomFilePreview',
+	components: {
+		// SvgIcon,
+	},
+
+	props: {
+		file: { type: Object, required: true }
+	},
+
+	emits: ['open-file'],
+
+	computed: {
+		isImage() {
+			return isImageFile(this.file)
+		},
+		isVideo() {
+			if (this.file.url) return isVideoFile(this.file)
+			else return false
+		}
+	}
+}
+</script>

src/lib/Room/Room.vue

@@ -297,7 +297,6 @@
 				</div>
 			</div>
 		</div>
-    <RoomFilePreview v-show="showMediaModal" :file="mediaModal" :current-user-id="currentUserId" @close-file-modal="showMediaModal=false"/>
 	</div>
 </template>
 
@@ -315,7 +314,6 @@ import RoomMessageReply from './RoomMessageReply/RoomMessageReply'
 import RoomUsersTag from './RoomUsersTag/RoomUsersTag'
 import RoomEmojis from './RoomEmojis/RoomEmojis'
 import RoomTemplatesText from './RoomTemplatesText/RoomTemplatesText'
-import RoomFilePreview from './RoomFilePreview/RoomFilePreview'
 import Message from '../Message/Message'
 
 import filteredItems from '../../utils/filter-items'
@@ -345,8 +343,7 @@ export default {
 		RoomUsersTag,
 		RoomEmojis,
 		RoomTemplatesText,
-		Message,
-    RoomFilePreview
+		Message
 	},
 
 	directives: {
@@ -383,8 +380,7 @@ export default {
 		roomInfoEnabled: { type: Boolean, required: true },
 		textareaActionEnabled: { type: Boolean, required: true },
 		scrollDistance: { type: Number, required: true },
-		templatesText: { type: Array, default: null },
-    mediaModalPreview: { type: Boolean, default: true }
+		templatesText: { type: Array, default: null }
 	},
 
 	emits: [
@@ -436,11 +432,7 @@ export default {
 			emojisDB: new Database(),
 			recorder: this.initRecorder(),
 			isRecording: false,
-			format: 'mp3',
-      showMediaModal: false,
-      mediaModal: {
-        url: ''
-      }
+			format: 'mp3'
 		}
 	},
 
@@ -1211,12 +1203,7 @@ export default {
 			}
 		},
 		openFile({ message, file }) {
-      if (this.mediaModalPreview && file.action === 'preview') {
-        this.showMediaModal = true
-        this.mediaModal = Object.assign({}, this.imageModal, file.file)
-      } else {
-        this.$emit('open-file', { message, file })
-      }
+			this.$emit('open-file', { message, file })
 		},
 		openUserTag(user) {
 			this.$emit('open-user-tag', user)

src/lib/Room/RoomFilePreview/RoomFilePreview.scss

@@ -4,6 +4,8 @@
 
 @import '../lib/ChatWindow';
 
+@import '../lib/MediaPreview/MediaPreview';
+
 @import '../lib/Room/Room';
 @import '../lib/Room/RoomEmojis/RoomEmojis';
 @import '../lib/Room/RoomHeader/RoomHeader';
@@ -12,7 +14,6 @@
 @import '../lib/Room/RoomFiles/RoomFile/RoomFile';
 @import '../lib/Room/RoomUsersTag/RoomUsersTag';
 @import '../lib/Room/RoomTemplatesText/RoomTemplatesText';
-@import '../lib/Room/RoomFilePreview/RoomFilePreview';
 
 @import '../lib/RoomsList/RoomsList';
 @import '../lib/RoomsList/RoomContent/RoomContent';