now we can show screen android to the browser yea yea yea!

client-electron/src/layouts/MainLayout.tsx

@@ -33,7 +33,7 @@ const MainLayout = () => {
     <div>
       <Sidebar />
       <Header />
-      <main className="fixed pt-[5rem] pl-[21rem]">
+      <main className="absolute top-[5rem] left-[21rem]">
         <Outlet />
       </main>
     </div>

client-electron/src/pages/Android.tsx

@@ -4,11 +4,11 @@ import AdbWebCredentialStore from '@yume-chan/adb-credential-web'
 import { Adb, AdbDaemonTransport } from '@yume-chan/adb'
 import useAdb from '../hooks/useAdb'
 import type { AdbScrcpyVideoStream } from '@yume-chan/adb-scrcpy'
-import { AdbScrcpyClient, AdbScrcpyOptions2_1 } from '@yume-chan/adb-scrcpy'
+import { AdbScrcpyClient, AdbScrcpyOptions1_22 } from '@yume-chan/adb-scrcpy'
 import { WebCodecsDecoder } from '@yume-chan/scrcpy-decoder-webcodecs'
 import {
   ScrcpyLogLevel1_18,
-  ScrcpyOptions2_2,
+  ScrcpyOptions1_25,
   ScrcpyVideoCodecId
 } from '@yume-chan/scrcpy'
 import { useCallback, useRef, useState } from 'react'
@@ -78,7 +78,7 @@ const AndroidPage: React.FC = () => {
 
   async function scrcpyConnect() {
     const server: ArrayBuffer = await fetch(
-      new URL('../scrcpy/scrcpy_server_v2.2', import.meta.url)
+      new URL('../scrcpy/scrcpy_server_v1.25', import.meta.url)
     ).then(res => res.arrayBuffer())
 
     await AdbScrcpyClient.pushServer(
@@ -92,7 +92,7 @@ const AndroidPage: React.FC = () => {
     )
 
     const res = await adb!.subprocess.spawn(
-      'CLASSPATH=/data/local/tmp/scrcpy-server.jar app_process / com.genymobile.scrcpy.Server 2.2'
+      'CLASSPATH=/data/local/tmp/scrcpy-server.jar app_process / com.genymobile.scrcpy.Server 1.25'
     )
 
     res.stdout.pipeThrough(new DecodeUtf8Stream()).pipeTo(
@@ -103,25 +103,25 @@ const AndroidPage: React.FC = () => {
       })
     )
 
-    const scrcpyOption = new ScrcpyOptions2_2({
+    const scrcpyOption = new ScrcpyOptions1_25({
-      audio: false,
       maxFps: 60,
-      control: false,
+      control: true,
-      video: true,
       logLevel: ScrcpyLogLevel1_18.Debug,
-      stayAwake: true,
+      stayAwake: true
-      cleanup: true
     })
     const _client = await AdbScrcpyClient.start(
       adb!,
       '/data/local/tmp/scrcpy-server.jar',
-      '2.2',
+      '1.25',
-      new AdbScrcpyOptions2_1(scrcpyOption)
+      new AdbScrcpyOptions1_22(scrcpyOption)
     )
 
     const videoStream: AdbScrcpyVideoStream | undefined =
       await _client?.videoStream
     const _decoder = new WebCodecsDecoder(ScrcpyVideoCodecId.H264)
+
+    _decoder.renderer.style.maxHeight = 'inherit'
+
     screenRef.current?.appendChild(_decoder.renderer)
     videoStream?.stream.pipeTo(_decoder.writable)
     setDecoder(_decoder)
@@ -138,6 +138,9 @@ const AndroidPage: React.FC = () => {
   function scrcpyDisconnect() {
     decoder?.dispose()
     client?.close()
+    if (decoder && screenRef.current) {
+      screenRef.current.removeChild(decoder.renderer)
+    }
     setClient(undefined)
     setDecoder(undefined)
   }
@@ -147,8 +150,9 @@ const AndroidPage: React.FC = () => {
   }
 
   return (
-    <>
+    <div className="overflow-y-auto flex flex-row w-[1080px] h-full">
-      <div className="grid grid-cols-2 gap-4">
+      <div ref={screenRef} className="flex-grow-[0.7] h-full"></div>
+      <div className="justify-center items-center flex-grow-[0.3]">
         <div className="flex flex-col">
           <button
             className="btn btn-primary"
@@ -166,8 +170,7 @@ const AndroidPage: React.FC = () => {
         </div>
         <div className="bg-white">{adb && device ? device.name : ''}</div>
       </div>
-      <div ref={screenRef}></div>
+    </div>
-    </>
   )
 }