feat(filePreview): Preview image on Room.vue when click image

Author: liweicheng00

src/lib/Room/Room.vue

@@ -278,7 +278,7 @@
 						v-if="showFiles"
 						ref="file"
 						type="file"
-						multiple
+            multiple
 						:accept="acceptedFiles"
 						style="display: none"
 						@change="onFileChange($event.target.files)"
@@ -297,6 +297,7 @@
 				</div>
 			</div>
 		</div>
+    <RoomFilePreview v-show="fileModal" :file="modalFile" :current-user-id="currentUserId" @close-file-modal="fileModal=false"/>
 	</div>
 </template>
 
@@ -314,6 +315,7 @@ 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'
@@ -343,7 +345,8 @@ export default {
 		RoomUsersTag,
 		RoomEmojis,
 		RoomTemplatesText,
-		Message
+		Message,
+    RoomFilePreview
 	},
 
 	directives: {
@@ -431,7 +434,11 @@ export default {
 			emojisDB: new Database(),
 			recorder: this.initRecorder(),
 			isRecording: false,
-			format: 'mp3'
+			format: 'mp3',
+      fileModal: false,
+      modalFile: {
+        url: ''
+      }
 		}
 	},
 
@@ -1202,7 +1209,12 @@ export default {
 			}
 		},
 		openFile({ message, file }) {
-			this.$emit('open-file', { message, file })
+      if (file.action === 'preview') {
+        this.fileModal = true
+        this.modalFile = Object.assign({}, this.modalFile, file.file)
+      } else {
+        this.$emit('open-file', { message, file })
+      }
 		},
 		openUserTag(user) {
 			this.$emit('open-user-tag', user)

src/lib/Room/RoomFilePreview/RoomFilePreview.scss

@@ -0,0 +1,71 @@
+.vac-room-file-preview {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 11;
+
+  .vac-room-file-preview-container {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .vac-image-preview {
+    width: 100%;
+    height: 100%;
+    background-size: contain !important;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  //.vac-video-preview {
+  //  position: absolute;
+  //  width: 100%;
+  //  height: 100%;
+  //  border-radius: 4px;
+  //  background: linear-gradient(
+  //                  to bottom,
+  //                  rgba(0, 0, 0, 0) 55%,
+  //                  rgba(0, 0, 0, 0.02) 60%,
+  //                  rgba(0, 0, 0, 0.05) 65%,
+  //                  rgba(0, 0, 0, 0.1) 70%,
+  //                  rgba(0, 0, 0, 0.2) 75%,
+  //                  rgba(0, 0, 0, 0.3) 80%,
+  //                  rgba(0, 0, 0, 0.5) 85%,
+  //                  rgba(0, 0, 0, 0.6) 90%,
+  //                  rgba(0, 0, 0, 0.7) 95%,
+  //                  rgba(0, 0, 0, 0.8) 100%
+  //  );
+  //
+  //  svg {
+  //    height: 26px;
+  //    width: 26px;
+  //  }
+  //
+  //  .vac-button-view,
+  //  .vac-button-download {
+  //    position: absolute;
+  //    bottom: 6px;
+  //    left: 7px;
+  //  }
+  //
+  //  :first-child {
+  //    left: 40px;
+  //  }
+  //
+  //  .vac-button-view {
+  //    max-width: 18px;
+  //    bottom: 8px;
+  //  }
+  //}
+  //
+  //.vac-video-container {
+  //  width: 350px;
+  //  max-width: 100%;
+  //  margin: 4px auto 5px;
+  //
+  //  video {
+  //    border-radius: 4px;
+  //  }
+  //}
+}

src/lib/Room/RoomFilePreview/RoomFilePreview.vue

@@ -0,0 +1,94 @@
+<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')"
+    >
+      <loader
+        :show="isImageLoading"
+      />
+      <div
+        class="vac-image-preview"
+        :style="{
+					'background-image': `url('${
+						isImageLoading ? file.preview || file.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 Loader from '../../../components/Loader/Loader'
+// import SvgIcon from '../../../components/SvgIcon/SvgIcon'
+
+const { isImageFile, isVideoFile } = require('../../../utils/media-file')
+
+export default {
+  name: 'RoomFilePreview',
+  components: {
+    // SvgIcon,
+    Loader
+  },
+
+  props: {
+    file: { type: Object, required: true }
+  },
+
+  emits: ['open-file'],
+
+  data() {
+    return {
+      imageLoading: false
+    }
+  },
+  computed: {
+    isImageLoading() {
+      return this.file.url.indexOf('blob:http') !== -1 || this.imageLoading
+    },
+    isImage() {
+      return isImageFile(this.file)
+    },
+    isVideo() {
+      if (this.file.url) return isVideoFile(this.file)
+      else return false
+    }
+  },
+
+  watch: {
+    file: {
+      immediate: true,
+      deep: true,
+      handler() {
+        this.checkImgLoad()
+      }
+    }
+  },
+  methods: {
+    checkImgLoad() {
+      if (!isImageFile(this.file)) return
+      this.imageLoading = true
+      const image = new Image()
+      image.src = this.file.url
+      image.addEventListener('load', () => (this.imageLoading = false))
+    }
+  }
+}
+</script>

src/styles/index.scss

@@ -12,6 +12,7 @@
 @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';