From 0e459793bd6af07d632bfdc534b3280c0777ac07 Mon Sep 17 00:00:00 2001 From: Liwei Cheng Date: Tue, 16 Nov 2021 17:54:26 +0800 Subject: [PATCH 1/9] feat(filePreview): Preview image on Room.vue when click image --- src/lib/Room/Room.vue | 20 +++- .../Room/RoomFilePreview/RoomFilePreview.scss | 71 ++++++++++++++ .../Room/RoomFilePreview/RoomFilePreview.vue | 94 +++++++++++++++++++ src/styles/index.scss | 1 + 4 files changed, 182 insertions(+), 4 deletions(-) create mode 100644 src/lib/Room/RoomFilePreview/RoomFilePreview.scss create mode 100644 src/lib/Room/RoomFilePreview/RoomFilePreview.vue diff --git a/src/lib/Room/Room.vue b/src/lib/Room/Room.vue index a3915907..5f34c3fc 100644 --- a/src/lib/Room/Room.vue +++ b/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 @@ + @@ -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) diff --git a/src/lib/Room/RoomFilePreview/RoomFilePreview.scss b/src/lib/Room/RoomFilePreview/RoomFilePreview.scss new file mode 100644 index 00000000..23bf6ad2 --- /dev/null +++ b/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; + // } + //} +} diff --git a/src/lib/Room/RoomFilePreview/RoomFilePreview.vue b/src/lib/Room/RoomFilePreview/RoomFilePreview.vue new file mode 100644 index 00000000..58970793 --- /dev/null +++ b/src/lib/Room/RoomFilePreview/RoomFilePreview.vue @@ -0,0 +1,94 @@ + + diff --git a/src/styles/index.scss b/src/styles/index.scss index 3ae26536..8a2820c3 100644 --- a/src/styles/index.scss +++ b/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'; From 6cc764b134ddc7c3091dbe7ecda23e86b3003770 Mon Sep 17 00:00:00 2001 From: Liwei Cheng Date: Mon, 22 Nov 2021 15:48:07 +0800 Subject: [PATCH 2/9] feat(filePreview): Add a prop to disable this behaviour. media-modal-preview: true/false --- demo/src/ChatContainer.vue | 3 ++- src/lib/ChatWindow.vue | 8 +++++--- src/lib/Room/Room.vue | 15 ++++++++------- 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/demo/src/ChatContainer.vue b/demo/src/ChatContainer.vue index 6529c3bf..d7890f9e 100644 --- a/demo/src/ChatContainer.vue +++ b/demo/src/ChatContainer.vue @@ -52,7 +52,8 @@ :menu-actions="menuActions" :room-message="roomMessage" :templates-text="templatesText" - @fetch-more-rooms="fetchMoreRooms" + :media-modal-preview="true" + @fetch-more-rooms="fetchMoreRooms" @fetch-messages="fetchMessages" @send-message="sendMessage" @edit-message="editMessage" diff --git a/src/lib/ChatWindow.vue b/src/lib/ChatWindow.vue index 13294ce4..3fa049d0 100644 --- a/src/lib/ChatWindow.vue +++ b/src/lib/ChatWindow.vue @@ -57,7 +57,8 @@ :textarea-action-enabled="textareaActionEnabled" :accepted-files="acceptedFiles" :templates-text="templatesText" - @toggle-rooms-list="toggleRoomsList" + :media-modal-preview="mediaModalPreview" + @toggle-rooms-list="toggleRoomsList" @room-info="roomInfo" @fetch-messages="fetchMessages" @send-message="sendMessage" @@ -144,8 +145,9 @@ export default { textareaActionEnabled: { type: Boolean, default: false }, roomMessage: { type: String, default: '' }, acceptedFiles: { type: String, default: '*' }, - templatesText: { type: Array, default: null } - }, + templatesText: { type: Array, default: null }, + mediaModalPreview: { type: Boolean, default: true } + }, emits: [ 'toggle-rooms-list', diff --git a/src/lib/Room/Room.vue b/src/lib/Room/Room.vue index 5f34c3fc..adfb5e6a 100644 --- a/src/lib/Room/Room.vue +++ b/src/lib/Room/Room.vue @@ -297,7 +297,7 @@ - + @@ -382,7 +382,8 @@ export default { loadingRooms: { type: Boolean, required: true }, roomInfoEnabled: { type: Boolean, required: true }, textareaActionEnabled: { type: Boolean, required: true }, - templatesText: { type: Array, default: null } + templatesText: { type: Array, default: null }, + mediaModalPreview: { type: Boolean, default: true } }, emits: [ @@ -435,8 +436,8 @@ export default { recorder: this.initRecorder(), isRecording: false, format: 'mp3', - fileModal: false, - modalFile: { + showMediaModal: false, + mediaModal: { url: '' } } @@ -1209,9 +1210,9 @@ export default { } }, openFile({ message, file }) { - if (file.action === 'preview') { - this.fileModal = true - this.modalFile = Object.assign({}, this.modalFile, file.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 }) } From 723afedf3e5ab7c1bc9f7e4fe71997ec5fc0a392 Mon Sep 17 00:00:00 2001 From: Liwei Cheng Date: Tue, 23 Nov 2021 15:54:21 +0800 Subject: [PATCH 3/9] refactor(RoomFilePreview.scss): Clean up unused scss code --- .../Room/RoomFilePreview/RoomFilePreview.scss | 51 ------------------- 1 file changed, 51 deletions(-) diff --git a/src/lib/Room/RoomFilePreview/RoomFilePreview.scss b/src/lib/Room/RoomFilePreview/RoomFilePreview.scss index 23bf6ad2..9ee84cc7 100644 --- a/src/lib/Room/RoomFilePreview/RoomFilePreview.scss +++ b/src/lib/Room/RoomFilePreview/RoomFilePreview.scss @@ -17,55 +17,4 @@ 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; - // } - //} } From 1acee9168d488fb970faea1b3a8dba5a38f21678 Mon Sep 17 00:00:00 2001 From: antoine92190 Date: Sat, 27 Nov 2021 14:02:08 +0100 Subject: [PATCH 4/9] (refacto) move media preview to root --- src/lib/ChatWindow.vue | 29 ++++-- src/lib/MediaPreview/MediaPreview.scss | 22 +++++ src/lib/MediaPreview/MediaPreview.vue | 59 ++++++++++++ src/lib/Room/Room.vue | 21 +---- .../Room/RoomFilePreview/RoomFilePreview.scss | 20 ---- .../Room/RoomFilePreview/RoomFilePreview.vue | 94 ------------------- src/styles/index.scss | 3 +- 7 files changed, 109 insertions(+), 139 deletions(-) create mode 100644 src/lib/MediaPreview/MediaPreview.scss create mode 100644 src/lib/MediaPreview/MediaPreview.vue delete mode 100644 src/lib/Room/RoomFilePreview/RoomFilePreview.scss delete mode 100644 src/lib/Room/RoomFilePreview/RoomFilePreview.vue diff --git a/src/lib/ChatWindow.vue b/src/lib/ChatWindow.vue index 8b03f970..96ab6d18 100644 --- a/src/lib/ChatWindow.vue +++ b/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 @@ + diff --git a/src/lib/Room/Room.vue b/src/lib/Room/Room.vue index a1132c26..6011d1c7 100644 --- a/src/lib/Room/Room.vue +++ b/src/lib/Room/Room.vue @@ -297,7 +297,6 @@ - @@ -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) diff --git a/src/lib/Room/RoomFilePreview/RoomFilePreview.scss b/src/lib/Room/RoomFilePreview/RoomFilePreview.scss deleted file mode 100644 index 9ee84cc7..00000000 --- a/src/lib/Room/RoomFilePreview/RoomFilePreview.scss +++ /dev/null @@ -1,20 +0,0 @@ -.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; - } -} diff --git a/src/lib/Room/RoomFilePreview/RoomFilePreview.vue b/src/lib/Room/RoomFilePreview/RoomFilePreview.vue deleted file mode 100644 index 58970793..00000000 --- a/src/lib/Room/RoomFilePreview/RoomFilePreview.vue +++ /dev/null @@ -1,94 +0,0 @@ - - diff --git a/src/styles/index.scss b/src/styles/index.scss index 8a2820c3..8637eaf3 100644 --- a/src/styles/index.scss +++ b/src/styles/index.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'; From d01f01adab192f48b3f2ccf5b4498a2edf1244ff Mon Sep 17 00:00:00 2001 From: antoine92190 Date: Sat, 27 Nov 2021 15:56:06 +0100 Subject: [PATCH 5/9] (UI) improve media preview --- src/components/SvgIcon/SvgIcon.scss | 4 +++ src/lib/ChatWindow.scss | 1 - src/lib/ChatWindow.vue | 8 ++--- src/lib/MediaPreview/MediaPreview.scss | 30 +++++++++++++----- src/lib/MediaPreview/MediaPreview.vue | 42 +++++++++++++++++--------- src/themes/index.js | 3 ++ 6 files changed, 62 insertions(+), 26 deletions(-) diff --git a/src/components/SvgIcon/SvgIcon.scss b/src/components/SvgIcon/SvgIcon.scss index f69cf747..e31b7cdb 100644 --- a/src/components/SvgIcon/SvgIcon.scss +++ b/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); } diff --git a/src/lib/ChatWindow.scss b/src/lib/ChatWindow.scss index 904fd03f..2a190668 100644 --- a/src/lib/ChatWindow.scss +++ b/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); diff --git a/src/lib/ChatWindow.vue b/src/lib/ChatWindow.vue index 96ab6d18..f007d6c4 100644 --- a/src/lib/ChatWindow.vue +++ b/src/lib/ChatWindow.vue @@ -79,9 +79,9 @@ @@ -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 }) } diff --git a/src/lib/MediaPreview/MediaPreview.scss b/src/lib/MediaPreview/MediaPreview.scss index 5118879c..cf18eb54 100644 --- a/src/lib/MediaPreview/MediaPreview.scss +++ b/src/lib/MediaPreview/MediaPreview.scss @@ -1,13 +1,14 @@ -.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%; } @@ -15,8 +16,23 @@ .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); + } + } } diff --git a/src/lib/MediaPreview/MediaPreview.vue b/src/lib/MediaPreview/MediaPreview.vue index 1ee9d735..d850c266 100644 --- a/src/lib/MediaPreview/MediaPreview.vue +++ b/src/lib/MediaPreview/MediaPreview.vue @@ -1,43 +1,47 @@ diff --git a/src/themes/index.js b/src/themes/index.js index d45fc123..4b376a30 100644 --- a/src/themes/index.js +++ b/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, From 866a9a08d938179365879a147c52b4c5cf6e363a Mon Sep 17 00:00:00 2001 From: antoine92190 Date: Sat, 27 Nov 2021 16:15:08 +0100 Subject: [PATCH 6/9] (UI) add media preview animation --- src/lib/ChatWindow.vue | 12 +++++---- src/lib/MediaPreview/MediaPreview.vue | 35 ++++++++++++--------------- src/styles/animation.scss | 31 ++++++++++++++++++++++++ 3 files changed, 54 insertions(+), 24 deletions(-) diff --git a/src/lib/ChatWindow.vue b/src/lib/ChatWindow.vue index f007d6c4..ebd7e074 100644 --- a/src/lib/ChatWindow.vue +++ b/src/lib/ChatWindow.vue @@ -78,11 +78,13 @@ - + + + diff --git a/src/lib/MediaPreview/MediaPreview.vue b/src/lib/MediaPreview/MediaPreview.vue index d850c266..bbc7bc23 100644 --- a/src/lib/MediaPreview/MediaPreview.vue +++ b/src/lib/MediaPreview/MediaPreview.vue @@ -6,27 +6,24 @@ @click.stop="closeModal" @keydown.esc="closeModal" > -
-
-
+ +
+
+
-
- -
+
+ +
+ -
+
diff --git a/src/styles/animation.scss b/src/styles/animation.scss index b2f1a7f3..44222dd1 100644 --- a/src/styles/animation.scss +++ b/src/styles/animation.scss @@ -98,3 +98,34 @@ transform: scale(1); } } + +// Open media preview animation +.vac-fade-preview-enter { + opacity: 0; +} + +.vac-fade-preview-enter-active { + transition: opacity 0.1s; +} + +.vac-fade-preview-leave-active { + transition: opacity 0.2s; + opacity: 0; +} + +.vac-bounce-preview-enter-active { + animation: vac-bounce-image-in 0.4s; +} + +.vac-bounce-preview-leave-active { + animation: vac-bounce-image-in 0.3s reverse; +} + +@keyframes vac-bounce-image-in { + 0% { + transform: scale(0.6); + } + 100% { + transform: scale(1); + } +} From e8bc9c7ff0f5598cd5110e22e3e9fba6aea3bd61 Mon Sep 17 00:00:00 2001 From: antoine92190 Date: Sat, 27 Nov 2021 16:25:19 +0100 Subject: [PATCH 7/9] (fix) video media preview --- src/lib/ChatWindow.vue | 4 ++-- src/lib/MediaPreview/MediaPreview.vue | 6 +++--- src/lib/Message/MessageFiles/MessageFile/MessageFile.scss | 1 + src/lib/Message/MessageFiles/MessageFile/MessageFile.vue | 6 +++++- 4 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/lib/ChatWindow.vue b/src/lib/ChatWindow.vue index ebd7e074..64414ce8 100644 --- a/src/lib/ChatWindow.vue +++ b/src/lib/ChatWindow.vue @@ -168,7 +168,7 @@ export default { scrollDistance: { type: Number, default: 60 }, acceptedFiles: { type: String, default: '*' }, templatesText: { type: Array, default: null }, - mediaModalPreview: { type: Boolean, default: true } + mediaPreviewEnabled: { type: Boolean, default: true } }, emits: [ @@ -341,7 +341,7 @@ export default { this.$emit('delete-message', { message, roomId: this.room.roomId }) }, openFile({ message, file }) { - if (this.mediaModalPreview && file.action === 'preview') { + if (this.mediaPreviewEnabled && file.action === 'preview') { this.filePreview = file.file this.showMediaPreview = true } else { diff --git a/src/lib/MediaPreview/MediaPreview.vue b/src/lib/MediaPreview/MediaPreview.vue index bbc7bc23..44f22971 100644 --- a/src/lib/MediaPreview/MediaPreview.vue +++ b/src/lib/MediaPreview/MediaPreview.vue @@ -16,8 +16,8 @@ />
-
-
-
+
From 9fa7ed7ae98e43f41a10ae3141b9ae1ae9ca73c1 Mon Sep 17 00:00:00 2001 From: antoine92190 Date: Sat, 27 Nov 2021 16:29:55 +0100 Subject: [PATCH 8/9] (clean) renaming --- demo/src/ChatContainer.vue | 1 - src/lib/ChatWindow.vue | 8 +++----- src/lib/MediaPreview/MediaPreview.vue | 7 +++---- 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/demo/src/ChatContainer.vue b/demo/src/ChatContainer.vue index d7890f9e..2cd1289a 100644 --- a/demo/src/ChatContainer.vue +++ b/demo/src/ChatContainer.vue @@ -52,7 +52,6 @@ :menu-actions="menuActions" :room-message="roomMessage" :templates-text="templatesText" - :media-modal-preview="true" @fetch-more-rooms="fetchMoreRooms" @fetch-messages="fetchMessages" @send-message="sendMessage" diff --git a/src/lib/ChatWindow.vue b/src/lib/ChatWindow.vue index 64414ce8..cc15f9ba 100644 --- a/src/lib/ChatWindow.vue +++ b/src/lib/ChatWindow.vue @@ -81,7 +81,7 @@ @@ -197,9 +197,7 @@ export default { showRoomsList: true, isMobile: false, showMediaPreview: false, - filePreview: { - url: '' - } + previewFile: {} } }, @@ -342,7 +340,7 @@ export default { }, openFile({ message, file }) { if (this.mediaPreviewEnabled && file.action === 'preview') { - this.filePreview = file.file + this.previewFile = file.file this.showMediaPreview = true } else { this.$emit('open-file', { message, file }) diff --git a/src/lib/MediaPreview/MediaPreview.vue b/src/lib/MediaPreview/MediaPreview.vue index 44f22971..f62a8d2f 100644 --- a/src/lib/MediaPreview/MediaPreview.vue +++ b/src/lib/MediaPreview/MediaPreview.vue @@ -25,7 +25,7 @@
- +
@@ -36,7 +36,7 @@ import SvgIcon from '../../components/SvgIcon/SvgIcon' const { isImageFile, isVideoFile } = require('../../utils/media-file') export default { - name: 'RoomFilePreview', + name: 'MediaPreview', components: { SvgIcon }, @@ -52,8 +52,7 @@ export default { return isImageFile(this.file) }, isVideo() { - if (this.file.url) return isVideoFile(this.file) - else return false + return isVideoFile(this.file) } }, From f142af23224c951190a52d9f4c15040e1b841da6 Mon Sep 17 00:00:00 2001 From: antoine92190 Date: Sat, 27 Nov 2021 16:30:53 +0100 Subject: [PATCH 9/9] (clean) spacing syntax --- demo/src/ChatContainer.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/src/ChatContainer.vue b/demo/src/ChatContainer.vue index 2cd1289a..6529c3bf 100644 --- a/demo/src/ChatContainer.vue +++ b/demo/src/ChatContainer.vue @@ -52,7 +52,7 @@ :menu-actions="menuActions" :room-message="roomMessage" :templates-text="templatesText" - @fetch-more-rooms="fetchMoreRooms" + @fetch-more-rooms="fetchMoreRooms" @fetch-messages="fetchMessages" @send-message="sendMessage" @edit-message="editMessage"