Fixed: fixed bug scrcpy and shell is disconnect when switch page

client-electron/src/pages/android/components/shell-tab.tsx

@@ -1,84 +1,27 @@
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { encodeUtf8, type AdbSubprocessProtocol, type Adb } from '@yume-chan/adb'
-import { Consumable, WritableStream } from '@yume-chan/stream-extra'
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import useShellAndroid from '@/hooks/shell-android'
+import { type Adb } from '@yume-chan/adb'
+import { memo, useEffect, useRef } from 'react'
+import { type Terminal } from 'xterm'
 
-import { Terminal } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
 
 import 'xterm/css/xterm.css'
+import { useShallow } from 'zustand/react/shallow'
 
 interface ShellTabProps {
   adb: Adb | undefined
 }
 
 export const ShellTab: React.FC<ShellTabProps> = memo(({ adb }) => {
-  const [process, setProcess] = useState<AdbSubprocessProtocol | undefined>()
-  const [terminal, setTerminal] = useState<Terminal | undefined>()
-
-  const [reader, setReader] = useState<WritableStream<Uint8Array> | undefined>()
-
-  useEffect(() => {
-    if (adb) {
-      console.log('adb is connected')
-
-      console.log('creating terminal')
-      const terminal: Terminal = new Terminal()
-      terminal.options.cursorBlink = true
-      terminal.options.theme = {
-        background: '#1e1e1e',
-        foreground: '#d4d4d4'
-      }
-
-      console.log('creating process')
-
-      const _reader = new WritableStream<Uint8Array>({
-        write(chunk) {
-          terminal.write(chunk)
-        }
-      })
-
-      adb.subprocess.shell('/data/data/com.termux/files/usr/bin/telnet localhost 45515').then(_process => {
-        _process.stdout.pipeTo(_reader)
-
-        const writer = _process.stdin.getWriter()
-        terminal.onData(data => {
-          const buffer = encodeUtf8(data)
-          const consumable = new Consumable(buffer)
-          writer.write(consumable)
-        })
-
-        setReader(_reader)
-        setProcess(_process)
-        setTerminal(terminal)
-      })
-    } else {
-      console.log('adb is not connected')
-      if (process) {
-        process?.stdout.cancel()
-        process?.stderr.cancel()
-        process?.stdin.close()
-        process?.kill()
-      }
-
-      setProcess(undefined)
-      setTerminal(undefined)
-    }
-  }, [adb])
-
-  const killProcess = useCallback(() => {
-    console.log('killing shell')
-    console.log(process)
-    if (process && terminal) {
-      terminal.write('exit\n')
-      reader?.close()
-      process.stderr.cancel()
-      process.stdin.close()
-      process.stdout.cancel()
-      process.kill()
-    }
-  }, [process])
+  const { terminal, startTerminal, killTerminal } = useShellAndroid(
+    useShallow(state => ({
+      terminal: state.terminal,
+      startTerminal: state.startTerminal,
+      killTerminal: state.killTerminal
+    }))
+  )
 
   return (
     <Card>
@@ -88,10 +31,16 @@ export const ShellTab: React.FC<ShellTabProps> = memo(({ adb }) => {
       </CardHeader>
       <CardContent>
         <div className="flex items-center justify-end py-3 w-full">
-          <div>
-            <Button variant={'destructive'} onClick={killProcess}>
-              Kill Shell
-            </Button>
+          <div className="space-x-5">
+            {terminal ? (
+              <Button variant={'destructive'} onClick={killTerminal}>
+                Terminate
+              </Button>
+            ) : (
+              <Button variant={'default'} onClick={() => startTerminal(adb)}>
+                Start
+              </Button>
+            )}
           </div>
         </div>
         {terminal ? (
@@ -114,7 +63,6 @@ const ShellTerminal: React.FC<ShellTerminalProps> = ({ terminal }) => {
   const shellRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    console.log(shellRef.current)
     // check if shellRef is have child remove all
     if (shellRef.current && shellRef.current.children.length > 0) {
       for (const child of shellRef.current.children) {