add shell

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

@@ -0,0 +1,113 @@
+import { Button } from '@/components/ui/button'
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
+import useAdb from '@/hooks/useAdb'
+import { type AdbSubprocessProtocol } from '@yume-chan/adb'
+import { WritableStream } from '@yume-chan/stream-extra'
+import { useEffect, useRef, useState } from 'react'
+import { Terminal } from 'xterm'
+import { FitAddon } from 'xterm-addon-fit'
+
+import 'xterm/css/xterm.css'
+
+export const ScrcpyTab: React.FC = () => {
+  const adb = useAdb(state => state.adb)
+
+  const logcatRef = useRef<HTMLDivElement>(null)
+
+  const [process, setProcess] = useState<AdbSubprocessProtocol | undefined>()
+
+  useEffect(() => {
+    const startTerminal = async () => {
+      if (logcatRef.current && adb) {
+        if (logcatRef.current.children.length > 0) {
+          // remove all children from the logcatRef
+          while (logcatRef.current.firstChild) {
+            logcatRef.current.removeChild(logcatRef.current.firstChild)
+          }
+        }
+        const terminal: Terminal = new Terminal()
+        const fitAddon = new FitAddon()
+        terminal.loadAddon(fitAddon)
+
+        const process: AdbSubprocessProtocol = await adb.subprocess.shell('logcat')
+        process.stdout.pipeTo(
+          new WritableStream<Uint8Array>({
+            write(chunk) {
+              terminal.write(chunk)
+            }
+          })
+        )
+
+        terminal.options.disableStdin = true
+        terminal.options.theme = {
+          background: '#1e1e1e',
+          foreground: '#d4d4d4'
+        }
+
+        terminal.open(logcatRef.current)
+        fitAddon.fit()
+        setProcess(process)
+      }
+    }
+    startTerminal()
+
+    return () => {
+      logcatRef.current && logcatRef.current.firstChild && logcatRef.current.removeChild(logcatRef.current.firstChild)
+      process?.stderr.cancel()
+      process?.stdout.cancel()
+      process?.kill()
+    }
+  }, [logcatRef, adb])
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Scrcpy</CardTitle>
+        <CardDescription>Stream and control your Android device from your computer</CardDescription>
+      </CardHeader>
+      <CardContent className="flex w-full justify-around items-start">
+        <div>
+          <div className="w-[450px] h-[800px] bg-slate-700" />
+          <div className="flex pt-3 justify-center items-center space-x-4 w-[450px]">
+            <Button variant={'outline'} className="flex-1">
+              Home
+            </Button>
+            <Button variant={'outline'} className="flex-1">
+              Back
+            </Button>
+          </div>
+        </div>
+        <div className="flex flex-col space-y-4 w-full px-5">
+          <Card>
+            <CardHeader>
+              <CardTitle>Control</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="flex space-x-4 items-center">
+                <Button>Connect</Button>
+                <Button>Power</Button>
+                <Button>Volume Up</Button>
+                <Button>Volume Down</Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* logcat card */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Logcat</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="flex space-x-4 items-center">
+                <div className="w-full h-96 bg-slate-700" ref={logcatRef} />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button>Save changes</Button>
+      </CardFooter>
+    </Card>
+  )
+}