Merge pull request #99 from PhillipLangMartinez/bugfix/auto-image-load

auto image checkbox

qortal-ui-core/language/us.json

@@ -573,7 +573,8 @@
 		"cchange64": "Enter Disabled",
 		"cchange65": "Please enter a recipient",
 		"cchange66": "Cannot fetch replied-to message. Message is too old.",
-		"cchange68": "edited"
+		"cchange68": "edited",
+		"cchange69": "Auto-show images"
 	},
 	"welcomepage": {
 		"wcchange1": "Welcome to Q-Chat",

qortal-ui-core/src/components/login-view/login-view.js

@@ -14,8 +14,13 @@ import './login-section.js'
 import '../qort-theme-toggle.js'
 
 import settings from '../../functional-components/settings-page.js'
+import { addAutoLoadImageChat, removeAutoLoadImageChat } from '../../redux/app/app-actions.js'
 
 window.reduxStore = store
+window.reduxAction = {
+    addAutoLoadImageChat: addAutoLoadImageChat,
+    removeAutoLoadImageChat: removeAutoLoadImageChat
+}
 
 const animationDuration = 0.7 // Seconds
 

qortal-ui-core/src/redux/app/actions/app-core.js

@@ -1,5 +1,5 @@
 // Core App Actions here...
-import { UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, CHAT_HEADS, ACCOUNT_INFO, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH } from '../app-action-types.js'
+import { UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, CHAT_HEADS, ACCOUNT_INFO, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT } from '../app-action-types.js'
 
 export const doUpdateBlockInfo = (blockObj) => {
     return (dispatch, getState) => {
@@ -105,3 +105,18 @@ const framePasteMenuSwitch = (payload) => {
         payload
     }
 }
+
+export const addAutoLoadImageChat = (payload) => {
+    return {
+        type: ADD_AUTO_LOAD_IMAGES_CHAT,
+        payload
+    }
+}
+
+export const removeAutoLoadImageChat = (payload) => {
+    return {
+        type: REMOVE_AUTO_LOAD_IMAGES_CHAT,
+        payload
+    }
+}
+

qortal-ui-core/src/redux/app/app-action-types.js

@@ -20,3 +20,5 @@ export const ADD_NEW_PLUGIN_URL = 'ADD_NEW_PLUGIN_URL'
 export const COPY_MENU_SWITCH = 'COPY_MENU_SWITCH'
 export const PASTE_MENU_SWITCH = 'PASTE_MENU_SWITCH'
 export const FRAME_PASTE_MENU_SWITCH = 'FRAME_PASTE_MENU_SWITCH'
+export const ADD_AUTO_LOAD_IMAGES_CHAT = 'ADD_AUTO_LOAD_IMAGES_CHAT'
+export const REMOVE_AUTO_LOAD_IMAGES_CHAT = 'REMOVE_AUTO_LOAD_IMAGES_CHAT'

qortal-ui-core/src/redux/app/app-reducer.js

@@ -1,5 +1,6 @@
 // Loading state, login state, isNavDrawOpen state etc. None of this needs to be saved to localstorage.
-import { LOG_IN, LOG_OUT, NETWORK_CONNECTION_STATUS, INIT_WORKERS, ADD_PLUGIN_URL, ADD_PLUGIN, ADD_NEW_PLUGIN_URL, NAVIGATE, SELECT_ADDRESS, ACCOUNT_INFO, CHAT_HEADS, UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, LOAD_NODE_CONFIG, SET_NODE, ADD_NODE, PAGE_URL, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH } from './app-action-types.js'
+import { saveStateToLocalStorage } from '../../localStorageHelpers.js'
+import { LOG_IN, LOG_OUT, NETWORK_CONNECTION_STATUS, INIT_WORKERS, ADD_PLUGIN_URL, ADD_PLUGIN, ADD_NEW_PLUGIN_URL, NAVIGATE, SELECT_ADDRESS, ACCOUNT_INFO, CHAT_HEADS, UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, LOAD_NODE_CONFIG, SET_NODE, ADD_NODE, PAGE_URL, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT } from './app-action-types.js'
 import { initWorkersReducer } from './reducers/init-workers.js'
 import { loginReducer } from './reducers/login-reducer.js'
 import { setNode, addNode } from './reducers/manage-node.js'
@@ -42,7 +43,8 @@ const INITIAL_STATE = {
     framePasteMenuSwitch: {
         isOpen: false,
         elementId: ''
-    }
+    },
+    autoLoadImageChats: []
 }
 
 export default (state = INITIAL_STATE, action) => {
@@ -146,6 +148,28 @@ export default (state = INITIAL_STATE, action) => {
                 ...state,
                 framePasteMenuSwitch: action.payload
             }
+        case ADD_AUTO_LOAD_IMAGES_CHAT: {
+            const findChat = state.autoLoadImageChats.findIndex((chat)=> chat === action.payload)
+            console.log({findChat})
+            if(findChat !== -1) return state
+            const updatedState = [...state.autoLoadImageChats, action.payload]
+
+            saveStateToLocalStorage('autoLoadImageChats', updatedState) 
+            return {
+                ...state,
+                autoLoadImageChats: updatedState
+            }
+        }
+           
+        case REMOVE_AUTO_LOAD_IMAGES_CHAT: {
+            const updatedState = state.autoLoadImageChats.filter((chat)=> chat !== action.payload)
+            saveStateToLocalStorage('autoLoadImageChats', updatedState) 
+            return {
+                ...state,
+                autoLoadImageChats: updatedState
+         }
+        }
+                
         default:
             return state
     }

qortal-ui-plugins/plugins/core/components/ChatPage.js

@@ -1043,6 +1043,7 @@ class ChatPage extends LitElement {
                                 .repliedToMessageObj=${this.repliedToMessageObj}
                                 .toggleEnableChatEnter=${this.toggleEnableChatEnter}
                                 ?isEnabledChatEnter=${this.isEnabledChatEnter}
+                                chatId=${this.chatId}
                                 >                           
                             </chat-text-editor>
                     </div>

qortal-ui-plugins/plugins/core/components/ChatScroller.js

@@ -146,6 +146,7 @@ class ChatScroller extends LitElement {
                             .goToRepliedMessage=${this.goToRepliedMessage}
                             .addSeenMessage=${(val)=> this.addSeenMessage(val)}
                             .listSeenMessages=${this.listSeenMessages}
+                            chatId=${this.chatId}
                             >
                             </message-template>`
                     )
@@ -294,6 +295,7 @@ class MessageTemplate extends LitElement {
             goToRepliedMessage: { attribute: false },
             listSeenMessages: {type: Array},
             addSeenMessage: {attribute: false},
+            chatId: {type: String}
             
         }
     }
@@ -343,7 +345,8 @@ class MessageTemplate extends LitElement {
     }
 
     firstUpdated(){
-        if(this.listSeenMessages.includes(this.messageObj.reference)){
+        const autoSeeChatList = window.parent.reduxStore.getState().app?.autoLoadImageChats
+        if(autoSeeChatList.includes(this.chatId) || this.listSeenMessages.includes(this.messageObj.reference)){
             this.viewImage =  true
         }
     }

qortal-ui-plugins/plugins/core/components/ChatTextEditor.js

@@ -4,6 +4,8 @@ import { get, translate } from 'lit-translate';
 import { EmojiPicker } from 'emoji-picker-js';
 import { Epml } from '../../../epml.js';
 import '@material/mwc-icon'
+import '@material/mwc-checkbox'
+// import { addAutoLoadImageChat } from "../../../../qortal-ui-core/src/redux/app/app-actions.js";
 
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent });
 class ChatTextEditor extends LitElement {
@@ -29,7 +31,8 @@ class ChatTextEditor extends LitElement {
                 reflect: true
               },
             toggleEnableChatEnter: {attribute: false},
-            isEnabledChatEnter: {type: Boolean}
+            isEnabledChatEnter: {type: Boolean},
+            chatId: {type: String}
 		}
 	}
 
@@ -46,6 +49,11 @@ class ChatTextEditor extends LitElement {
             overflow: hidden;
 
       }
+      * {
+		 
+                    --mdc-checkbox-unchecked-color: var(--black);
+                    
+                }
         .chatbar-container {
             width: 100%;
             display: flex;
@@ -259,6 +267,13 @@ class ChatTextEditor extends LitElement {
     transition: all 0.2s;
     display: none;
   }
+  .removeBg {
+    background: none;
+  }
+
+  .chatbar-button-single label {
+    font-size: 13px;
+  }
   .chatbar-button-single:hover {
     filter: brightness(120%);
    
@@ -339,7 +354,10 @@ class ChatTextEditor extends LitElement {
 .hide-styling {
     display: none;
 }
-  
+mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::before {
+                background-color:var(--mdc-theme-primary)
+            }
+            --mdc-checkbox-unchecked-color
 		`
 	}
 
@@ -357,12 +375,12 @@ class ChatTextEditor extends LitElement {
 	}
 
 	render() {
-   
+        console.log('this.chatId2', this.chatId)
 		return html`
             <div 
              class=${["chatbar-container", "chatbar-buttons", this.iframeId !=="_chatEditorDOM" && 'hide-styling'].join(" ")}
-             style="align-items: center;">
-            
+             style="align-items: center;justify-content:space-between">
+            <div style="display: flex;align-items: center">
              <button
         @click=${() => this.editor.chain().focus().toggleBold().run()}
         ?disabled=${
@@ -422,6 +440,28 @@ class ChatTextEditor extends LitElement {
       `}
   
       </button>
+    </div>
+        ${this.iframeId === "_chatEditorDOM" ? html`
+        <div
+      style="height: 26px; box-sizing: border-box"
+        class=${["chatbar-button-single", "removeBg"].join(' ')}
+      >
+      <label
+                                for="qChatShowAutoMsg"
+                                @click=${() => this.shadowRoot.getElementById('qChatShowAutoMsg').click()}
+                                >${translate('chatpage.cchange69')}</label>
+        
+        <mwc-checkbox style="margin-right: -15px;"  id="qChatShowAutoMsg" @click=${e => {
+        console.log(e.target.checked)
+        if(e.target.checked){
+            window.parent.reduxStore.dispatch( window.parent.reduxAction.removeAutoLoadImageChat(this.chatId))
+            return
+        }
+        window.parent.reduxStore.dispatch( window.parent.reduxAction.addAutoLoadImageChat(this.chatId))
+        
+      }} ?checked=${(window.parent.reduxStore.getState().app?.autoLoadImageChats || []).includes(this.chatId)}></mwc-checkbox>
+    </div>            
+        ` : ''}
      
             </div>
             <div