@electerm/electerm-react 2.17.16 → 3.0.18

package/client/components/terminal/terminal.jsx

@@ -3,12 +3,8 @@ import { handleErr } from '../../common/fetch.jsx'
 import { isEqual, pick, debounce, throttle } from 'lodash-es'
 import clone from '../../common/to-simple-obj.js'
 import resolve from '../../common/resolve.js'
-import {
-  ReloadOutlined
-} from '@ant-design/icons'
 import {
   Spin,
-  Button,
   Dropdown
 } from 'antd'
 import { notification } from '../common/notification'
@@ -50,6 +46,8 @@ import ExternalLink from '../common/external-link.jsx'
 import createDefaultLogPath from '../../common/default-log-path.js'
 import SearchResultBar from './terminal-search-bar'
 import RemoteFloatControl from '../common/remote-float-control'
+import { showSocketCloseWarning } from './socket-close-warning.jsx'
+import ReconnectOverlay from './reconnect-overlay.jsx'
 import {
   loadTerminal,
   loadFitAddon,
@@ -76,7 +74,8 @@ class Term extends Component {
       lines: [],
       searchResults: [],
       matchIndex: -1,
-      totalLines: 0
+      totalLines: 0,
+      reconnectCountdown: null
     }
     this.id = `term-${this.props.tab.id}`
     refs.add(this.id, this)
@@ -833,25 +832,19 @@ class Term extends Component {
     this.searchAddon.onDidChangeResults(this.onSearchResultsChange)
     const Unicode11Addon = await loadUnicode11Addon()
     const unicode11Addon = new Unicode11Addon()
-    if (config.enableSixel !== false) {
-      try {
-        const ImageAddon = await loadImageAddon()
-        this.imageAddon = new ImageAddon({
-          enableSizeReports: false,
-          sixelSupport: true,
-          iipSupport: false
-        })
-        term.loadAddon(this.imageAddon)
-      } catch (err) {
-        console.error('load sixel addon failed', err)
-      }
-    }
     term.loadAddon(unicode11Addon)
     term.loadAddon(ligtureAddon)
     term.unicode.activeVersion = '11'
     term.loadAddon(this.fitAddon)
     term.loadAddon(this.searchAddon)
     term.loadAddon(this.cmdAddon)
+    if (tab.enableTerminalImage) {
+      const ImageAddon = await loadImageAddon()
+      this.imageAddon = new ImageAddon({
+        pixelLimit: 33554432
+      })
+      term.loadAddon(this.imageAddon)
+    }
     term.onData(this.onData)
     this.term = term
     term.onSelectionChange(this.onSelectionChange)
@@ -1145,10 +1138,13 @@ class Term extends Component {
         ? typeMap.remote
         : typeMap.local
     })
+    const isAutoReconnect = !!(tab.autoReConnect && this.props.config.autoReconnectTerminal)
     const r = await createTerm(opts)
       .catch(err => {
-        const text = err.message
-        handleErr({ message: text })
+        if (!isAutoReconnect) {
+          const text = err.message
+          handleErr({ message: text })
+        }
       })
     if (typeof r === 'string' && r.includes('fail')) {
       return this.promote()
@@ -1160,6 +1156,10 @@ class Term extends Component {
       loading: false
     })
     if (!r) {
+      if (isAutoReconnect) {
+        this.scheduleAutoReconnect(3000)
+        return
+      }
       this.setStatus(statusMap.error)
       return
     }
@@ -1260,46 +1260,70 @@ class Term extends Component {
     this.setStatus(
       statusMap.error
     )
-    if (!this.isActiveTerminal() || !window.focused) {
-      return false
-    }
     if (this.userTypeExit) {
       return this.props.delTab(this.props.tab.id)
     }
-    const key = `open${Date.now()}`
-    function closeMsg () {
-      notification.destroy(key)
-    }
-    this.socketCloseWarning = notification.warning({
-      key,
-      message: e('socketCloseTip'),
-      duration: 30,
-      description: (
-        <div className='pd2y'>
-          <Button
-            className='mg1r'
-            type='primary'
-            onClick={() => {
-              closeMsg()
-              this.props.delTab(this.props.tab.id)
-            }}
-          >
-            {e('close')}
-          </Button>
-          <Button
-            icon={<ReloadOutlined />}
-            onClick={() => {
-              closeMsg()
-              this.props.reloadTab(
-                this.props.tab
-              )
-            }}
-          >
-            {e('reload')}
-          </Button>
-        </div>
-      )
-    })
+    const { autoReconnectTerminal } = this.props.config
+    const isActive = this.isActiveTerminal()
+    const isFocused = window.focused
+    if (autoReconnectTerminal) {
+      if (isActive && isFocused) {
+        this.socketCloseWarning = showSocketCloseWarning({
+          tabId: this.props.tab.id,
+          tab: this.props.tab,
+          autoReconnect: true,
+          delTab: this.props.delTab,
+          reloadTab: this.props.reloadTab
+        })
+      } else {
+        this.scheduleAutoReconnect(3000)
+      }
+    } else {
+      if (!isActive || !isFocused) {
+        return false
+      }
+      this.socketCloseWarning = showSocketCloseWarning({
+        tabId: this.props.tab.id,
+        tab: this.props.tab,
+        autoReconnect: false,
+        delTab: this.props.delTab,
+        reloadTab: this.props.reloadTab
+      })
+    }
+  }
+
+  scheduleAutoReconnect = (delay = 3000) => {
+    clearTimeout(this.timers.reconnectTimer)
+    clearInterval(this.timers.reconnectCountdown)
+    const seconds = Math.round(delay / 1000)
+    this.setState({ reconnectCountdown: seconds })
+    let remaining = seconds
+    this.timers.reconnectCountdown = setInterval(() => {
+      remaining -= 1
+      if (remaining <= 0) {
+        clearInterval(this.timers.reconnectCountdown)
+        this.timers.reconnectCountdown = null
+      }
+      this.setState({ reconnectCountdown: remaining <= 0 ? null : remaining })
+    }, 1000)
+    this.timers.reconnectTimer = setTimeout(() => {
+      clearInterval(this.timers.reconnectCountdown)
+      this.timers.reconnectCountdown = null
+      this.setState({ reconnectCountdown: null })
+      if (this.onClose || !this.props.config.autoReconnectTerminal) {
+        return
+      }
+      const reconnectCount = (this.props.tab.autoReConnect || 0) + 1
+      this.props.reloadTab({ ...this.props.tab, autoReConnect: reconnectCount })
+    }, delay)
+  }
+
+  handleCancelAutoReconnect = () => {
+    clearTimeout(this.timers.reconnectTimer)
+    clearInterval(this.timers.reconnectCountdown)
+    this.timers.reconnectTimer = null
+    this.timers.reconnectCountdown = null
+    this.setState({ reconnectCountdown: null })
   }
 
   batchInput = (cmd) => {
@@ -1401,6 +1425,7 @@ class Term extends Component {
       totalLines: this.state.totalLines,
       height
     }
+    const spin = loading ? <Spin className='loading-wrapper' spinning={loading} /> : null
     return (
       <Dropdown {...dropdownProps}>
         <div
@@ -1417,7 +1442,11 @@ class Term extends Component {
           <RemoteFloatControl
             isFullScreen={fullscreen}
           />
-          <Spin className='loading-wrapper' spinning={loading} />
+          <ReconnectOverlay
+            countdown={this.state.reconnectCountdown}
+            onCancel={this.handleCancelAutoReconnect}
+          />
+          {spin}
         </div>
       </Dropdown>
     )

package/client/components/terminal/terminal.styl

@@ -141,3 +141,15 @@
 .paste-text
   max-height 200px
   overflow-y scroll
+
+.terminal-reconnect-overlay
+  position absolute
+  left 0
+  top 0
+  width 100%
+  height 100%
+  display flex
+  align-items center
+  justify-content center
+  z-index 110
+

package/client/components/terminal/transfer-client-base.js

@@ -4,6 +4,7 @@
  */
 
 // import { transferTypeMap } from '../../common/constants.js'
+import { safeGetItem, safeSetItem } from '../../common/safe-local-storage.js'
 import { getLocalFileInfo } from '../sftp/file-read.js'
 
 /**
@@ -218,7 +219,7 @@ export class TransferClientBase {
    */
   openSaveFolderSelect = async () => {
     // Try to use last saved path
-    const lastPath = this.storageKey ? window.localStorage.getItem(this.storageKey) : null
+    const lastPath = this.storageKey ? safeGetItem(this.storageKey) : null
 
     const savePaths = await window.api.openDialog({
       title: 'Choose a folder to save file(s)',
@@ -238,9 +239,8 @@ export class TransferClientBase {
       return null
     }
 
-    // Save for next time
     if (this.storageKey) {
-      window.localStorage.setItem(this.storageKey, savePaths[0])
+      safeSetItem(this.storageKey, savePaths[0])
     }
     return savePaths[0]
   }

package/client/components/text-editor/edit-with-custom-editor.jsx

@@ -4,19 +4,20 @@
 
 import { useState } from 'react'
 import { Button, Input, Space } from 'antd'
+import { safeGetItem, safeSetItem } from '../../common/safe-local-storage.js'
 
 const LS_KEY = 'customEditorCommand'
 const e = window.translate
 
 export default function EditWithCustomEditor ({ loading, editWithCustom }) {
   const [editorCommand, setEditorCommand] = useState(
-    () => window.localStorage.getItem(LS_KEY) || ''
+    () => safeGetItem(LS_KEY) || ''
   )
 
   function handleChange (ev) {
     const val = ev.target.value
     setEditorCommand(val)
-    window.localStorage.setItem(LS_KEY, val)
+    safeSetItem(LS_KEY, val)
   }
 
   function handleClick () {

package/client/store/init-state.js

@@ -54,7 +54,7 @@ export default () => {
     lastDataUpdateTime: 0,
     tabs: [],
     activeTabId: '',
-    history: ls.getItemJSON('history', []),
+    history: ls.safeGetItemJSON('history', []),
     sshConfigs: [],
     bookmarks: [],
     bookmarksMap: new Map(),
@@ -77,7 +77,7 @@ export default () => {
     // terminalCommandHistory: Map<cmdString, {count: Number, lastUseTime: DateString}>
     // Load from localStorage and migrate from old format (Set of strings) if needed
     terminalCommandHistory: (() => {
-      const savedData = ls.getItemJSON(cmdHistoryKey, [])
+      const savedData = ls.safeGetItemJSON(cmdHistoryKey, [])
       const map = new Map()
       if (Array.isArray(savedData)) {
         // Check if old format (array of strings) or new format (array of objects)
@@ -111,7 +111,7 @@ export default () => {
 
     // batch input selected tab ids
     _batchInputSelectedTabIds: new Set(),
-    aiChatHistory: ls.getItemJSON(aiChatHistoryKey, []),
+    aiChatHistory: ls.safeGetItemJSON(aiChatHistoryKey, []),
 
     // sftp
     fileOperation: fileOperationsMap.cp, // cp or mv

package/client/store/sync.js

@@ -487,7 +487,6 @@ export default (Store) => {
       'hotkey',
       'sshReadyTimeout',
       'scrollback',
-      'enableSixel',
       'fontSize',
       'execWindows',
       'execMac',

package/client/store/tab.js

@@ -505,7 +505,8 @@ export default Store => {
       'sftpCreated',
       'sshSftpSplitView',
       'sshTunnelResults',
-      'displayRaw'
+      'displayRaw',
+      'autoReConnect'
     ]
     const { history } = store
     const index = history.findIndex(d => {

package/client/store/watch.js

@@ -135,12 +135,12 @@ export default store => {
   }).start()
 
   autoRun(() => {
-    ls.setItemJSON('history', store.history)
+    ls.safeSetItemJSON('history', store.history)
     return store.history
   }).start()
 
   autoRun(() => {
-    ls.setItemJSON(aiChatHistoryKey, store.aiChatHistory)
+    ls.safeSetItemJSON(aiChatHistoryKey, store.aiChatHistory)
     return store.aiChatHistory
   }).start()
 
@@ -152,7 +152,7 @@ export default store => {
       count: info.count,
       lastUseTime: info.lastUseTime
     }))
-    ls.setItemJSON(cmdHistoryKey, data)
+    ls.safeSetItemJSON(cmdHistoryKey, data)
     return store.terminalCommandHistory
   }).start()
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "2.17.16",
+  "version": "3.0.18",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",