(UI) improve media preview

Author: antoine92190

src/components/SvgIcon/SvgIcon.scss

@@ -34,6 +34,10 @@
 	fill: var(--chat-icon-color-close-outline);
 }
 
+#vac-icon-close-outline-preview {
+	fill: var(--chat-icon-color-close-preview);
+}
+
 #vac-icon-send {
 	fill: var(--chat-icon-color-send);
 }

src/lib/ChatWindow.scss

@@ -5,7 +5,6 @@
 	background: var(--chat-content-bg-color);
 	color: var(--chat-color);
 	overflow-wrap: break-word;
-	position: relative;
 	white-space: normal;
 	border: var(--chat-container-border);
 	border-radius: var(--chat-container-border-radius);

src/lib/ChatWindow.vue

@@ -79,9 +79,9 @@
 			</room>
 		</div>
 		<media-preview
-			v-if="showMediaModal"
+			v-if="showMediaPreview"
 			:file="filePreview"
-			@close-file-modal="showMediaModal = false"
+			@close-media-preview="showMediaPreview = false"
 		/>
 	</div>
 </template>
@@ -194,7 +194,7 @@ export default {
 			loadingMoreRooms: false,
 			showRoomsList: true,
 			isMobile: false,
-			showMediaModal: false,
+			showMediaPreview: false,
 			filePreview: {
 				url: ''
 			}
@@ -341,7 +341,7 @@ export default {
 		openFile({ message, file }) {
 			if (this.mediaModalPreview && file.action === 'preview') {
 				this.filePreview = file.file
-				this.showMediaModal = true
+				this.showMediaPreview = true
 			} else {
 				this.$emit('open-file', { message, file })
 			}

src/lib/MediaPreview/MediaPreview.scss

@@ -1,22 +1,38 @@
-.vac-room-file-preview {
+.vac-media-preview {
 	position: absolute;
 	top: 0;
 	left: 0;
-	width: 100%;
-	height: 100%;
-	z-index: 11;
-	background-color: rgba(0, 0, 0, 0.5);
+	z-index: 99;
+	width: 100vw;
+	height: 100vh;
+	background-color: rgba(0, 0, 0, 0.8);
+	outline: none;
 
-	.vac-room-file-preview-container {
+	.vac-media-preview-container {
 		width: 100%;
 		height: 100%;
 	}
 
 	.vac-image-preview {
 		width: 100%;
 		height: 100%;
-		background-size: contain !important;
+		background-size: contain;
 		background-repeat: no-repeat;
 		background-position: center;
 	}
+
+	.vac-svg-button {
+		position: absolute;
+		top: 30px;
+		right: 30px;
+		transform: scale(1.4);
+	}
+
+	@media only screen and (max-width: 768px) {
+		.vac-svg-button {
+			top: 20px;
+			right: 20px;
+			transform: scale(1.2);
+		}
+	}
 }

src/lib/MediaPreview/MediaPreview.vue

@@ -1,43 +1,47 @@
 <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
+		ref="modal"
+		tabindex="0"
+		class="vac-media-preview"
+		@click.stop="closeModal"
+		@keydown.esc="closeModal"
+	>
+		<div v-if="isImage" class="vac-media-preview-container">
 			<div
 				class="vac-image-preview"
 				:style="{
 					'background-image': `url('${file.url}')`
 				}"
-				@keypress.esc="$emit('close-file-modal')"
+				@keypress.esc="closeModal"
 			/>
 		</div>
 
 		<div
 			v-else-if="isVideo"
 			class="vac-video-preview"
-			@keypress.esc="$emit('close-file-modal')"
+			@keypress.esc="closeModal"
 		>
 			<video width="100%" height="100%" controls>
 				<source :src="file.url" />
 			</video>
 		</div>
-		<button @click="$emit('close-file-modal')">
-			Close
-		</button>
+
+		<div class="vac-svg-button" @click="closeModal">
+			<slot name="preview-close-icon">
+				<svg-icon name="close-outline" param="preview" size="10" />
+			</slot>
+		</div>
 	</div>
 </template>
 <script>
-// import SvgIcon from '../../../components/SvgIcon/SvgIcon'
+import SvgIcon from '../../components/SvgIcon/SvgIcon'
 
 const { isImageFile, isVideoFile } = require('../../utils/media-file')
 
 export default {
 	name: 'RoomFilePreview',
 	components: {
-		// SvgIcon,
+		SvgIcon
 	},
 
 	props: {
@@ -54,6 +58,16 @@ export default {
 			if (this.file.url) return isVideoFile(this.file)
 			else return false
 		}
+	},
+
+	mounted() {
+		this.$refs.modal.focus()
+	},
+
+	methods: {
+		closeModal() {
+			this.$emit('close-media-preview')
+		}
 	}
 }
 </script>

src/themes/index.js

@@ -119,6 +119,7 @@ export const defaultThemeStyles = {
 			file: '#1976d2',
 			paperclip: '#1976d2',
 			closeOutline: '#000',
+			closePreview: '#fff',
 			send: '#1976d2',
 			sendDisabled: '#9ca6af',
 			emoji: '#1976d2',
@@ -259,6 +260,7 @@ export const defaultThemeStyles = {
 			file: '#1976d2',
 			paperclip: '#fff',
 			closeOutline: '#fff',
+			closePreview: '#fff',
 			send: '#fff',
 			sendDisabled: '#646a70',
 			emoji: '#fff',
@@ -407,6 +409,7 @@ export const cssThemeVars = ({
 		'--chat-icon-color-file': icons.file,
 		'--chat-icon-color-paperclip': icons.paperclip,
 		'--chat-icon-color-close-outline': icons.closeOutline,
+		'--chat-icon-color-close-preview': icons.closePreview,
 		'--chat-icon-color-send': icons.send,
 		'--chat-icon-color-send-disabled': icons.sendDisabled,
 		'--chat-icon-color-emoji': icons.emoji,