qortal.link/qortal-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed the chat message size bug

Browse Source
This commit is contained in:
Justin Ferrari 2022-11-30 14:17:29 -05:00
parent d49f814cd3
commit 7d6568ce79
3 changed files with 78 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
qortal-ui-plugins/plugins/core/components/ChatPage.js
View File

@ -59,7 +59,7 @@ class ChatPage extends LitElement {
repliedToMessageObj: { type: Object }, repliedToMessageObj: { type: Object },
editedMessageObj: { type: Object }, editedMessageObj: { type: Object },
iframeHeight: { type: Number }, iframeHeight: { type: Number },
chatMessageSize: { type: Number}, // chatMessageSize: { type: Number},
imageFile: { type: Object }, imageFile: { type: Object },
isUploadingImage: { type: Boolean }, isUploadingImage: { type: Boolean },
chatEditor: { type: Object }, chatEditor: { type: Object },
@ -545,7 +545,7 @@ class ChatPage extends LitElement {
this.repliedToMessageObj = null this.repliedToMessageObj = null
this.editedMessageObj = null this.editedMessageObj = null
this.iframeHeight = 42 this.iframeHeight = 42
this.chatMessageSize = 0 // this.chatMessageSize = 0
this.imageFile = null this.imageFile = null
this.uid = new ShortUniqueId() this.uid = new ShortUniqueId()
this.userLanguage = "" this.userLanguage = ""
@ -619,7 +619,7 @@ class ChatPage extends LitElement {
</div> </div>
</div> </div>
`} `}
<div class="chatbar" style="${this.chatMessageSize >= 750 && 'padding-bottom: 7px'}"> <div class="chatbar">
<chat-text-editor <chat-text-editor
?hasGlobalEvents=${true} ?hasGlobalEvents=${true}
iframeId="_chatEditorDOM" iframeId="_chatEditorDOM"
@ -676,15 +676,6 @@ class ChatPage extends LitElement {
?isLoadingMessages=${this.isLoadingMessages}> ?isLoadingMessages=${this.isLoadingMessages}>
</chat-text-editor> </chat-text-editor>
</div> </div>
${this.chatMessageSize >= 750 ?
html`
<div class="message-size-container">
<div class="message-size" style="${this.chatMessageSize >= 1000 && 'color: #bd1515'}">
${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`}
</div>
</div>
` :
html``}
<div class="modal-button-row"> <div class="modal-button-row">
<button <button
class="modal-button-red" class="modal-button-red"
@ -1553,13 +1544,15 @@ class ChatPage extends LitElement {
this.isLoading = false; this.isLoading = false;
this.chatEditor.enable(); this.chatEditor.enable();
this.chatEditorNewChat.enable() this.chatEditorNewChat.enable()
} else if (this.chatMessageSize >= 1000) { }
this.isLoading = false; // else if (this.chatMessageSize >= 1000) {
this.chatEditor.enable(); // this.isLoading = false;
this.chatEditorNewChat.enable() // this.chatEditor.enable();
let err1string = get("chatpage.cchange29"); // this.chatEditorNewChat.enable()
parentEpml.request('showSnackBar', `${err1string}`); // let err1string = get("chatpage.cchange29");
} else if (this.repliedToMessageObj) { // parentEpml.request('showSnackBar', `${err1string}`);
// }
else if (this.repliedToMessageObj) {
let chatReference = this.repliedToMessageObj.reference let chatReference = this.repliedToMessageObj.reference
if(this.repliedToMessageObj.chatReference){ if(this.repliedToMessageObj.chatReference){

25
qortal-ui-plugins/plugins/core/components/ChatScroller.js
View File

@ -78,6 +78,7 @@ class ChatScroller extends LitElement {
return messageArray; return messageArray;
}, []) }, [])
return html` return html`
<ul id="viewElement" class="chat-list clearfix"> <ul id="viewElement" class="chat-list clearfix">
<div id="upObserver"></div> <div id="upObserver"></div>
@ -136,8 +137,8 @@ class ChatScroller extends LitElement {
_upObserverhandler(entries) { _upObserverhandler(entries) {
if (entries[0].isIntersecting) { if (entries[0].isIntersecting) {
let _scrollElement = entries[0].target.nextElementSibling let _scrollElement = entries[0].target.nextElementSibling;
this._getOldMessage(_scrollElement) this._getOldMessage(_scrollElement);
} }
} }
@ -155,9 +156,8 @@ class ChatScroller extends LitElement {
rootMargin: '0px', rootMargin: '0px',
threshold: 1 threshold: 1
}; };
const observer = new IntersectionObserver(this._upObserverhandler, options);
const observer = new IntersectionObserver(this._upObserverhandler, options) observer.observe(this.upObserverElement);
observer.observe(this.upObserverElement)
} }
downElementObserver() { downElementObserver() {
@ -166,17 +166,13 @@ class ChatScroller extends LitElement {
rootMargin: '0px', rootMargin: '0px',
threshold: 1 threshold: 1
} }
// identify an element to observe // identify an element to observe
const elementToObserve = this.downObserverElement const elementToObserve = this.downObserverElement;
// passing it a callback function // passing it a callback function
const observer = new IntersectionObserver(this._downObserverHandler, options) const observer = new IntersectionObserver(this._downObserverHandler, options);
// call `observe()` on that MutationObserver instance, // call `observe()` on that MutationObserver instance,
// passing it the element to observe, and the options object // passing it the element to observe, and the options object
observer.observe(elementToObserve) observer.observe(elementToObserve);
} }
} }
@ -577,16 +573,13 @@ class ChatMenu extends LitElement {
this.emojiPicker.on('emoji', selection => { this.emojiPicker.on('emoji', selection => {
this.sendMessage({ this.sendMessage({
type: 'reaction', type: 'reaction',
editedMessageObj: this.originalMessage, editedMessageObj: this.originalMessage,
reaction: selection.emoji, reaction: selection.emoji,
}) })
}); });
} }
render() { render() {
console.log('version', this.version)
return html` return html`
<div class="container"> <div class="container">
<div <div

53
qortal-ui-plugins/plugins/core/components/ChatTextEditor.js
View File

@ -21,6 +21,7 @@ class ChatTextEditor extends LitElement {
setChatEditor: { attribute: false }, setChatEditor: { attribute: false },
iframeId: { type: String }, iframeId: { type: String },
hasGlobalEvents: { type: Boolean }, hasGlobalEvents: { type: Boolean },
chatMessageSize: { type: Number },
theme: { theme: {
type: String, type: String,
reflect: true reflect: true
@ -142,12 +143,12 @@ class ChatTextEditor extends LitElement {
this.removeGlobalEventListener = this.removeGlobalEventListener.bind(this) this.removeGlobalEventListener = this.removeGlobalEventListener.bind(this)
this.initialChat = this.initialChat.bind(this) this.initialChat = this.initialChat.bind(this)
this.iframeHeight = 42 this.iframeHeight = 42
this.userName = window.parent.reduxStore.getState().app.accountInfo.names[0]; this.chatMessageSize = 0
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'; this.userName = window.parent.reduxStore.getState().app.accountInfo.names[0]
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
} }
render() { render() {
console.log(this.theme)
return html` return html`
<div <div
class=${["chatbar-container", this.iframeId === "newChat" ? "chatbar-caption" : ""].join(" ")} class=${["chatbar-container", this.iframeId === "newChat" ? "chatbar-caption" : ""].join(" ")}
@ -181,7 +182,14 @@ class ChatTextEditor extends LitElement {
class="checkmark-icon" class="checkmark-icon"
icon="vaadin:check" icon="vaadin:check"
slot="icon" slot="icon"
@click=${() => this._sendMessage()} @click=${() => {
if (this.chatMessageSize > 1000 ) {
parentEpml.request('showSnackBar', get("chatpage.cchange29"));
return;
}
this._sendMessage();
this.chatMessageSize = 0;
}}
> >
</vaadin-icon> </vaadin-icon>
` : ` :
@ -198,7 +206,15 @@ class ChatTextEditor extends LitElement {
src="/img/qchat-send-message-icon.svg" src="/img/qchat-send-message-icon.svg"
alt="send-icon" alt="send-icon"
class="send-icon" class="send-icon"
@click=${() => this._sendMessage()} /> @click=${() => {
if (this.chatMessageSize > 1000 ) {
parentEpml.request('showSnackBar', get("chatpage.cchange29"));
return;
}
this._sendMessage();
this.chatMessageSize = 0;
}}
/>
` : ` :
html` html`
<paper-spinner-lite active></paper-spinner-lite> <paper-spinner-lite active></paper-spinner-lite>
@ -210,7 +226,7 @@ class ChatTextEditor extends LitElement {
${this.chatMessageSize >= 750 ? ${this.chatMessageSize >= 750 ?
html` html`
<div class="message-size-container"> <div class="message-size-container">
<div class="message-size" style="${this.chatMessageSize >= 1000 && 'color: #bd1515'}"> <div class="message-size" style="${this.chatMessageSize > 1000 && 'color: #bd1515'}">
${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`} ${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`}
</div> </div>
</div> </div>
@ -257,7 +273,7 @@ class ChatTextEditor extends LitElement {
window.addEventListener('storage', () => { window.addEventListener('storage', () => {
const checkTheme = localStorage.getItem('qortalTheme'); const checkTheme = localStorage.getItem('qortalTheme');
const chatbar = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('testingId'); const chatbar = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('chatbarId');
if (checkTheme === 'dark') { if (checkTheme === 'dark') {
this.theme = 'dark'; this.theme = 'dark';
chatbar.style.cssText = "color:#ffffff;" chatbar.style.cssText = "color:#ffffff;"
@ -301,8 +317,7 @@ class ChatTextEditor extends LitElement {
this.chatEditor.insertText(this.editedMessageObj.message) this.chatEditor.insertText(this.editedMessageObj.message)
} }
if (changedProperties && changedProperties.has('placeholder')) { if (changedProperties && changedProperties.has('placeholder')) {
console.log(this.placeholder, "here600"); const captionEditor = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('chatbarId');
const captionEditor = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('testingId');
captionEditor.setAttribute('data-placeholder', this.placeholder); captionEditor.setAttribute('data-placeholder', this.placeholder);
} }
} }
@ -356,6 +371,7 @@ class ChatTextEditor extends LitElement {
const stringified = JSON.stringify(messageObject); const stringified = JSON.stringify(messageObject);
const size = new Blob([stringified]).size; const size = new Blob([stringified]).size;
this.chatMessageSize = size; this.chatMessageSize = size;
console.log(this.chatMessageSize, "here600");
} catch (error) { } catch (error) {
console.error(error) console.error(error)
@ -365,14 +381,13 @@ class ChatTextEditor extends LitElement {
calculateIFrameHeight(height) { calculateIFrameHeight(height) {
setTimeout(()=> { setTimeout(()=> {
const editorTest = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('testingId').scrollHeight; const editorTest = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('chatbarId').scrollHeight;
this.iframeHeight = editorTest + 20; this.iframeHeight = editorTest + 20;
}, 50) }, 50)
} }
initChatEditor() { initChatEditor() {
const ChatEditor = function (editorConfig) { const ChatEditor = function (editorConfig) {
console.log(editorConfig.placeholder, "here5600");
const ChatEditor = function () { const ChatEditor = function () {
const editor = this; const editor = this;
editor.init(); editor.init();
@ -560,7 +575,7 @@ class ChatTextEditor extends LitElement {
const editor = this; const editor = this;
const events = ['drop', 'contextmenu', 'mouseup', 'click', 'touchend', 'keydown', 'blur', 'paste'] const events = ['drop', 'contextmenu', 'mouseup', 'click', 'touchend', 'keyup', 'blur', 'paste']
for (let i = 0; i < events.length; i++) { for (let i = 0; i < events.length; i++) {
const event = events[i] const event = events[i]
@ -611,9 +626,11 @@ class ChatTextEditor extends LitElement {
return false; return false;
} }
if (e.type === 'keydown') { if (e.type === 'keyup') {
console.log(editorConfig.editableElement.contentDocument.body.querySelector("#chatbarId").innerHTML, "here 12");
editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight); editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight);
editorConfig.getMessageSize(editorConfig.editableElement.contentDocument.body.innerHTML); editorConfig.getMessageSize(editorConfig.editableElement.contentDocument.body.querySelector("#chatbarId").innerHTML);
// Handle Enter // Handle Enter
if (e.keyCode === 13 && !e.shiftKey) { if (e.keyCode === 13 && !e.shiftKey) {
@ -622,7 +639,7 @@ class ChatTextEditor extends LitElement {
editor.updateMirror(); editor.updateMirror();
if (editor.state() === 'false') return false; if (editor.state() === 'false') return false;
if(editorConfig.iframeId === 'newChat'){ if (editorConfig.iframeId === 'newChat') {
editorConfig.sendFunc( editorConfig.sendFunc(
{ {
type: 'image', type: 'image',
@ -630,6 +647,10 @@ class ChatTextEditor extends LitElement {
} }
); );
} else { } else {
if (this.chatMessageSize > 1000 ) {
parentEpml.request('showSnackBar', get("chatpage.cchange29"));
return;
}
editorConfig.sendFunc(); editorConfig.sendFunc();
} }
@ -704,7 +725,7 @@ class ChatTextEditor extends LitElement {
elemDiv.setAttribute('spellcheck', 'false'); elemDiv.setAttribute('spellcheck', 'false');
elemDiv.setAttribute('data-placeholder', editorConfig.placeholder); elemDiv.setAttribute('data-placeholder', editorConfig.placeholder);
elemDiv.style.cssText = `width:100%; ${editorConfig.theme === "dark" ? "color:#ffffff;" : "color: #080808"}`; elemDiv.style.cssText = `width:100%; ${editorConfig.theme === "dark" ? "color:#ffffff;" : "color: #080808"}`;
elemDiv.id = 'testingId'; elemDiv.id = 'chatbarId';
editor.content.body.appendChild(elemDiv); editor.content.body.appendChild(elemDiv);
editor.contentDiv = editor.frame.contentDocument.body.firstChild; editor.contentDiv = editor.frame.contentDocument.body.firstChild;
editor.styles(); editor.styles();