From 6ba0f363f5bb006c5d949b5c52292b68834de937 Mon Sep 17 00:00:00 2001 From: evgeny-nadymov Date: Thu, 29 Nov 2018 01:44:39 +0300 Subject: [PATCH] Fix updateMessageContent for media viewer --- package.json | 2 +- src/Components/ColumnMiddle/MessagesList.js | 18 +++ src/Components/Viewer/MediaViewer.js | 147 ++++++++++++++----- src/Components/Viewer/MediaViewerContent.css | 1 + src/Stores/MessageStore.js | 2 + src/Utils/File.js | 8 +- 6 files changed, 137 insertions(+), 41 deletions(-) diff --git a/package.json b/package.json index ec1ef65bc..95a64879d 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "homepage": "http://evgeny-nadymov.github.io/telegram-react", "name": "telegram_react", - "version": "0.0.134", + "version": "0.0.135", "private": true, "dependencies": { "@arseny30/tdweb": "^0.2.22", diff --git a/src/Components/ColumnMiddle/MessagesList.js b/src/Components/ColumnMiddle/MessagesList.js index 4bb02b7ea..07d22c111 100644 --- a/src/Components/ColumnMiddle/MessagesList.js +++ b/src/Components/ColumnMiddle/MessagesList.js @@ -112,15 +112,33 @@ class MessagesList extends React.Component { MessageStore.on('updateNewMessage', this.onUpdateNewMessage); MessageStore.on('updateDeleteMessages', this.onUpdateDeleteMessages); + MessageStore.on('updateMessageContent', this.onUpdateMessageContent); ChatStore.on('updateChatLastMessage', this.onUpdateChatLastMessage); } componentWillUnmount(){ MessageStore.removeListener('updateNewMessage', this.onUpdateNewMessage); MessageStore.removeListener('updateDeleteMessages', this.onUpdateDeleteMessages); + MessageStore.removeListener('updateMessageContent', this.onUpdateMessageContent); ChatStore.removeListener('updateChatLastMessage', this.onUpdateChatLastMessage); } + onUpdateMessageContent = (update) => { + const { chatId } = this.props; + const { history } = this.state; + const { chat_id, message_id } = update; + + if (chatId !== chat_id) return; + + if (history.findIndex(x => x.id === message_id) !== -1) { + const message = MessageStore.get(chat_id, message_id); + if (!message) return; + + const store = FileStore.getStore(); + loadMessageContents(store, [message]); + } + }; + onUpdateChatLastMessage = (update) => { const { chatId } = this.props; if (chatId !== update.chat_id) return; diff --git a/src/Components/Viewer/MediaViewer.js b/src/Components/Viewer/MediaViewer.js index aeee31c34..9cf937e9a 100644 --- a/src/Components/Viewer/MediaViewer.js +++ b/src/Components/Viewer/MediaViewer.js @@ -82,12 +82,14 @@ class MediaViewer extends React.Component { document.addEventListener('keydown', this.onKeyDown, false); MessageStore.on('updateDeleteMessages', this.onUpdateDeleteMessages); MessageStore.on('updateNewMessage', this.onUpdateNewMessage); + MessageStore.on('updateMessageContent', this.onUpdateMessageContent); } componentWillUnmount(){ document.removeEventListener('keydown', this.onKeyDown, false); MessageStore.removeListener('updateDeleteMessages', this.onUpdateDeleteMessages); MessageStore.removeListener('updateNewMessage', this.onUpdateNewMessage); + MessageStore.removeListener('updateMessageContent', this.onUpdateMessageContent); } onKeyDown = (event) => { @@ -102,6 +104,76 @@ class MediaViewer extends React.Component { } }; + within = (item, first, last) => { + return item > first && item < last; + }; + + onUpdateMessageContent = (update) => { + const { chat_id, message_id, new_content, old_content } = update; + const { chatId } = this.props; + const { currentMessageId, totalCount } = this.state; + + if (chatId !== chat_id) return; + + const message = MessageStore.get(chat_id, message_id); + if (!message) return; + + this.loadContent([message]); + + const addMessage = this.isMediaContent(new_content) && !this.isMediaContent(old_content); + if (addMessage) { + if (this.history.length >= 2 + && (this.within(message_id, this.history[0].id, this.history[this.history.length - 1].id) || this.firstSliceLoaded)) { + let inserted = false; + let history = []; + for (let i = 0; i < this.history.length; i++) { + if (this.history[i].id > message_id){ + history.push(this.history[i]); + } + else{ + if (!inserted) { + inserted = true; + history.push(message); + } + history.push(this.history[i]); + } + } + this.history = history; + } + + const index = this.history.findIndex(x => x.id === currentMessageId); + this.setState({ + hasNextMedia: this.hasNextMedia(index), + hasPreviousMedia: this.hasPreviousMedia(index), + totalCount: totalCount + 1 + }); + } + + const removeMessage = !this.isMediaContent(new_content) && this.isMediaContent(old_content); + if (removeMessage) { + let oldHistory = this.history; + this.history = this.history.filter(x => x.id !== message_id); + + if (currentMessageId === message_id) { + const filterMap = new Map(); + filterMap.set(message_id, message_id); + + this.moveToNextMedia(oldHistory, filterMap); + this.setState({ + totalCount: Math.max(totalCount - 1, 0) + }); + } + else { + const index = this.history.findIndex(x => x.id === currentMessageId); + this.setState({ + hasNextMedia: this.hasNextMedia(index), + hasPreviousMedia: this.hasPreviousMedia(index), + totalCount: Math.max(totalCount - 1, 0) + }); + } + } + }; + onUpdateDeleteMessages = (update) => { const { chat_id, message_ids, is_permanent } = update; const { chatId } = this.props; @@ -110,55 +182,61 @@ class MediaViewer extends React.Component { if (!is_permanent) return; if (chatId !== chat_id) return; - const map = message_ids.reduce((accumulator, currentId) => { + const filterMap = message_ids.reduce((accumulator, currentId) => { accumulator.set(currentId, currentId); return accumulator; }, new Map()); - const history = this.history; - let deletedCount = history.length; + const oldHistory = this.history; + let deletedCount = oldHistory.length; - this.history = this.history.filter(x => !map.has(x.id)); + this.history = this.history.filter(x => !filterMap.has(x.id)); deletedCount -= this.history.length; - this.setState({ totalCount: totalCount - deletedCount >= 0 ? totalCount - deletedCount : 0 }); + this.setState({ totalCount: Math.max(totalCount - deletedCount, 0) }); if (!this.history.length){ ApplicationStore.setMediaViewerContent(null); return; } - if (map.has(currentMessageId)){ - const index = history.findIndex(x => x.id === currentMessageId); - let nextId = 0; - for (let i = index - 1; i >= 0; i--){ - if (!map.has(history[i].id)){ - nextId = history[i].id; - break; - } + if (filterMap.has(currentMessageId)){ + this.moveToNextMedia(oldHistory, filterMap); + } + }; + + moveToNextMedia = (oldHistory, filterMap) => { + const { currentMessageId } = this.state; + + const index = oldHistory.findIndex(x => x.id === currentMessageId); + let nextId = 0; + for (let i = index - 1; i >= 0; i--){ + if (filterMap && !filterMap.has(oldHistory[i].id)){ + nextId = oldHistory[i].id; + break; } - if (!nextId){ - for (let i = index + 1; i < history.length; i++){ - if (!map.has(history[i].id)){ - nextId = history[i].id; - break; - } + } + if (!nextId){ + for (let i = index + 1; i < oldHistory.length; i++){ + if (filterMap && !filterMap.has(oldHistory[i].id)){ + nextId = oldHistory[i].id; + break; } } + } - if (nextId){ - const nextIndex = this.history.findIndex(x => x.id === nextId); + if (!nextId) return; - return this.loadMedia(nextIndex, () => { - if (nextIndex === 0){ - this.loadNext(); - } - else if (nextIndex === this.history.length - 1){ - this.loadPrevious(); - } - }); + const nextIndex = this.history.findIndex(x => x.id === nextId); + + return this.loadMedia(nextIndex, () => { + if (nextIndex === 0){ + this.loadNext(); } - } + else if (nextIndex === this.history.length - 1){ + this.loadPrevious(); + } + }); }; onUpdateNewMessage = (update) => { @@ -167,7 +245,7 @@ class MediaViewer extends React.Component { const { message } = update; if (!message) return; - if (!this.isMediaMessage(message)) return; + if (!this.isMediaContent(message.content)) return; if (message.chat_id !== chatId) return; if (!this.firstSliceLoaded) return; @@ -182,10 +260,7 @@ class MediaViewer extends React.Component { }); }; - isMediaMessage(message){ - if (!message) return false; - - const { content } = message; + isMediaContent(content){ if (!content) return false; return content['@type'] === 'messagePhoto'; @@ -506,7 +581,7 @@ class MediaViewer extends React.Component { return (
-
+
diff --git a/src/Components/Viewer/MediaViewerContent.css b/src/Components/Viewer/MediaViewerContent.css index d968d1f8e..5f0445ab9 100644 --- a/src/Components/Viewer/MediaViewerContent.css +++ b/src/Components/Viewer/MediaViewerContent.css @@ -18,6 +18,7 @@ .media-viewer-content-image{ max-width: 100%; max-height: 100%; + user-select: none; } .media-viewer-content-image-preview{ diff --git a/src/Stores/MessageStore.js b/src/Stores/MessageStore.js index 980768e5f..208d92a60 100644 --- a/src/Stores/MessageStore.js +++ b/src/Stores/MessageStore.js @@ -55,6 +55,8 @@ class MessageStore extends EventEmitter { if (chat){ let message = chat.get(update.message_id); if (message){ + const oldContent = message.content; + update.old_content = oldContent; message.content = update.new_content; } } diff --git a/src/Utils/File.js b/src/Utils/File.js index 33602aaa6..c47e085eb 100644 --- a/src/Utils/File.js +++ b/src/Utils/File.js @@ -383,12 +383,12 @@ function saveOrDownload(file, fileName, message){ function getMediaFile(chatId, messageId, size){ - if (!size) return null; + if (!size) return [0, 0, null]; const message = MessageStore.get(chatId, messageId); - if (!message) return null; + if (!message) return [0, 0, null]; const { content } = message; - if (!content) return null; + if (!content) return [0, 0, null]; switch (content['@type']) { case 'messagePhoto': { @@ -402,7 +402,7 @@ function getMediaFile(chatId, messageId, size){ } } - return null; + return [0, 0, null]; } export {