refactor(scrcpy): uncouple from ADB

refs #427

Author: yume-chan

apps/demo/package.json

@@ -22,10 +22,11 @@
         "@yume-chan/adb-backend-ws": "^0.0.9",
         "@yume-chan/adb-credential-web": "^0.0.16",
         "@yume-chan/android-bin": "^0.0.16",
-        "@yume-chan/async": "^2.1.4",
+        "@yume-chan/async": "^2.2.0",
         "@yume-chan/b-tree": "^0.0.16",
         "@yume-chan/event": "^0.0.16",
         "@yume-chan/scrcpy": "^0.0.16",
+        "@yume-chan/stream-extra": "^0.0.16",
         "@yume-chan/struct": "^0.0.16",
         "mobx": "^6.5.0",
         "mobx-react-lite": "^3.4.0",
@@ -45,6 +46,6 @@
         "eslint": "8.8.0",
         "eslint-config-next": "12.1.6",
         "source-map-loader": "^3.0.1",
-        "typescript": "4.7.2"
+        "typescript": "^4.7.3"
     }
 }

apps/demo/src/components/connect.tsx

@@ -1,9 +1,10 @@
 import { DefaultButton, Dialog, Dropdown, IDropdownOption, PrimaryButton, ProgressIndicator, Stack, StackItem } from '@fluentui/react';
-import { Adb, AdbBackend, AdbPacketData, AdbPacketInit, InspectStream, pipeFrom, ReadableStream, WritableStream } from '@yume-chan/adb';
+import { Adb, AdbBackend, AdbPacketData, AdbPacketInit } from '@yume-chan/adb';
 import AdbDirectSocketsBackend from "@yume-chan/adb-backend-direct-sockets";
 import AdbWebUsbBackend, { AdbWebUsbBackendWatcher } from '@yume-chan/adb-backend-webusb';
 import AdbWsBackend from '@yume-chan/adb-backend-ws';
 import AdbWebCredentialStore from '@yume-chan/adb-credential-web';
+import { InspectStream, pipeFrom, ReadableStream, WritableStream } from '@yume-chan/stream-extra';
 import { observer } from 'mobx-react-lite';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { GlobalState } from '../state';

apps/demo/src/components/grid.tsx

@@ -170,7 +170,7 @@ export const Grid = withDisplayName('Grid')(({
     const [autoScroll, setAutoScroll] = useState(true);
 
     const handleScroll = useStableCallback(() => {
-        if (bodyRef) {
+        if (bodyRef && bodyRef.scrollTop !== scrollTop) {
             if (autoScroll) {
                 if (scrollTop < bodyRef.scrollHeight - bodyRef.clientHeight && bodyRef.scrollTop < scrollTop) {
                     setAutoScroll(false);

apps/demo/src/components/terminal.tsx

@@ -1,7 +1,8 @@
 // cspell: ignore scrollback
 
-import { AbortController, AdbSubprocessProtocol, encodeUtf8, WritableStream } from "@yume-chan/adb";
+import { AdbSubprocessProtocol, encodeUtf8 } from "@yume-chan/adb";
 import { AutoDisposable } from "@yume-chan/event";
+import { AbortController, WritableStream } from '@yume-chan/stream-extra';
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import { SearchAddon } from 'xterm-addon-search';

apps/demo/src/pages/file-manager.tsx

@@ -2,7 +2,8 @@ import { Breadcrumb, concatStyleSets, ContextualMenu, ContextualMenuItem, Detail
 import { FileIconType, getFileTypeIconProps, initializeFileTypeIcons } from "@fluentui/react-file-type-icons";
 import { useConst } from '@fluentui/react-hooks';
 import { getIcon } from '@fluentui/style-utilities';
-import { AdbFeatures, ADB_SYNC_MAX_PACKET_SIZE, ChunkStream, LinuxFileType, type AdbSyncEntry } from '@yume-chan/adb';
+import { AdbFeatures, ADB_SYNC_MAX_PACKET_SIZE, LinuxFileType, type AdbSyncEntry } from '@yume-chan/adb';
+import { ChunkStream } from '@yume-chan/stream-extra';
 import { action, autorun, makeAutoObservable, observable, runInAction } from "mobx";
 import { observer } from "mobx-react-lite";
 import { NextPage } from "next";

apps/demo/src/pages/install.tsx

@@ -1,5 +1,6 @@
 import { DefaultButton, ProgressIndicator, Stack } from "@fluentui/react";
-import { ADB_SYNC_MAX_PACKET_SIZE, ChunkStream, ReadableStream } from "@yume-chan/adb";
+import { ADB_SYNC_MAX_PACKET_SIZE } from "@yume-chan/adb";
+import { ChunkStream } from '@yume-chan/stream-extra';
 import { action, makeAutoObservable, observable, runInAction } from "mobx";
 import { observer } from "mobx-react-lite";
 import { NextPage } from "next";

apps/demo/src/pages/logcat.tsx

@@ -1,7 +1,7 @@
 import { ICommandBarItemProps, Stack, StackItem } from "@fluentui/react";
 import { makeStyles, mergeClasses, shorthands } from "@griffel/react";
-import { AbortController, ReadableStream, WritableStream } from '@yume-chan/adb';
 import { AndroidLogEntry, AndroidLogPriority, Logcat } from '@yume-chan/android-bin';
+import { AbortController, ReadableStream, WritableStream } from '@yume-chan/stream-extra';
 import { action, autorun, makeAutoObservable, observable, runInAction } from "mobx";
 import { observer } from "mobx-react-lite";
 import { NextPage } from "next";

apps/demo/src/pages/reverse.tsx

@@ -1,4 +1,5 @@
-import { decodeUtf8, WritableStream } from "@yume-chan/adb";
+import { decodeUtf8 } from "@yume-chan/adb";
+import { WritableStream } from '@yume-chan/stream-extra';
 import { makeAutoObservable, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react-lite";
 import { NextPage } from "next";

apps/demo/src/pages/scrcpy.tsx

@@ -7,16 +7,17 @@ import { NextPage } from "next";
 import Head from "next/head";
 import { CSSProperties, ReactNode, useEffect, useState } from "react";
 
-import { ADB_SYNC_MAX_PACKET_SIZE, ChunkStream, InspectStream, ReadableStream, WritableStream } from '@yume-chan/adb';
+import { ADB_SYNC_MAX_PACKET_SIZE } from '@yume-chan/adb';
 import { EventEmitter } from "@yume-chan/event";
-import { AdbScrcpyClient, AndroidKeyCode, AndroidKeyEventAction, AndroidMotionEventAction, CodecOptions, DEFAULT_SERVER_PATH, ScrcpyClient, ScrcpyLogLevel, ScrcpyOptions1_24, ScrcpyVideoOrientation, TinyH264Decoder, WebCodecsDecoder, type H264Decoder, type H264DecoderConstructor, type VideoStreamPacket } from "@yume-chan/scrcpy";
+import { AdbScrcpyClient, AdbScrcpyOptions1_22, AndroidKeyCode, AndroidKeyEventAction, AndroidMotionEventAction, CodecOptions, DEFAULT_SERVER_PATH, ScrcpyLogLevel, ScrcpyOptions1_24, ScrcpyVideoOrientation, TinyH264Decoder, WebCodecsDecoder, type H264Decoder, type H264DecoderConstructor, type VideoStreamPacket } from "@yume-chan/scrcpy";
 import SCRCPY_SERVER_VERSION from '@yume-chan/scrcpy/bin/version';
+import { ChunkStream, InspectStream, ReadableStream, WritableStream } from '@yume-chan/stream-extra';
 
 import { DemoModePanel, DeviceView, DeviceViewRef, ExternalLink } from "../components";
 import { GlobalState } from "../state";
 import { CommonStackTokens, formatSpeed, Icons, ProgressStream, RouteStackProps } from "../utils";
 
-const SERVER_URL = new URL('@yume-chan/scrcpy/bin/scrcpy-server?url', import.meta.url).toString();
+const SERVER_URL = new URL('@yume-chan/scrcpy/bin/scrcpy-server?url', import.meta.url);
 
 class FetchWithProgress {
     public readonly promise: Promise<Uint8Array>;
@@ -30,11 +31,11 @@ class FetchWithProgress {
     private progressEvent = new EventEmitter<[download: number, total: number]>();
     public get onProgress() { return this.progressEvent.event; }
 
-    public constructor(url: string) {
+    public constructor(url: string | URL) {
         this.promise = this.fetch(url);
     }
 
-    private async fetch(url: string) {
+    private async fetch(url: string | URL) {
         const response = await window.fetch(url);
         this._total = Number.parseInt(response.headers.get('Content-Length') ?? '0', 10);
         this.progressEvent.fire([this._downloaded, this._total]);
@@ -223,8 +224,6 @@ const SettingItem = observer(function SettingItem({
 });
 
 class ScrcpyPageState {
-    adbScrcpyClient: AdbScrcpyClient | null = null;
-
     running = false;
 
     deviceView: DeviceViewRef | null = null;
@@ -243,7 +242,7 @@ class ScrcpyPageState {
     get rotatedWidth() { return state.rotate & 1 ? state.height : state.width; }
     get rotatedHeight() { return state.rotate & 1 ? state.width : state.height; }
 
-    client: ScrcpyClient | undefined = undefined;
+    client: AdbScrcpyClient | undefined = undefined;
 
     async pushServer() {
         const serverBuffer = await fetchServer();
@@ -254,21 +253,22 @@ class ScrcpyPageState {
                 controller.close();
             },
         })
-            .pipeTo(this.adbScrcpyClient!.pushServer());
+            .pipeTo(AdbScrcpyClient.pushServer(GlobalState.device!));
     }
 
     encoders: string[] = [];
     updateEncoders = async () => {
         try {
             await this.pushServer();
 
-            const encoders = await this.adbScrcpyClient!.getEncoders(
+            const encoders = await AdbScrcpyClient.getEncoders(
+                GlobalState.device!,
                 DEFAULT_SERVER_PATH,
                 SCRCPY_SERVER_VERSION,
-                new ScrcpyOptions1_24({
+                new AdbScrcpyOptions1_22(new ScrcpyOptions1_24({
                     logLevel: ScrcpyLogLevel.Debug,
                     tunnelForward: this.settings.tunnelForward,
-                })
+                }))
             );
 
             runInAction(() => {
@@ -297,13 +297,14 @@ class ScrcpyPageState {
         try {
             await this.pushServer();
 
-            const displays = await this.adbScrcpyClient!.getDisplays(
+            const displays = await AdbScrcpyClient.getDisplays(
+                GlobalState.device!,
                 DEFAULT_SERVER_PATH,
                 SCRCPY_SERVER_VERSION,
-                new ScrcpyOptions1_24({
+                new AdbScrcpyOptions1_22(new ScrcpyOptions1_24({
                     logLevel: ScrcpyLogLevel.Debug,
                     tunnelForward: this.settings.tunnelForward,
-                })
+                }))
             );
 
             runInAction(() => {
@@ -362,7 +363,7 @@ class ScrcpyPageState {
             iconProps: { iconName: Icons.Orientation },
             iconOnly: true,
             text: 'Rotate Device',
-            onClick: () => { this.client!.rotateDevice(); },
+            onClick: () => { this.client!.control!.rotateDevice(); },
         });
 
         result.push({
@@ -631,8 +632,6 @@ class ScrcpyPageState {
         autorun(() => {
             if (GlobalState.device) {
                 runInAction(() => {
-                    this.adbScrcpyClient = new AdbScrcpyClient(GlobalState.device!);
-
                     this.encoders = [];
                     this.settings.encoderName = undefined;
 
@@ -723,7 +722,7 @@ class ScrcpyPageState {
                     .pipeThrough(new ProgressStream(action((progress) => {
                         this.serverUploadedSize = progress;
                     })))
-                    .pipeTo(this.adbScrcpyClient!.pushServer());
+                    .pipeTo(AdbScrcpyClient.pushServer(GlobalState.device!));
 
                 runInAction(() => {
                     this.serverUploadSpeed = this.serverUploadedSize - this.debouncedServerUploadedSize;
@@ -746,7 +745,7 @@ class ScrcpyPageState {
                 }), 1000);
             });
 
-            const options = new ScrcpyOptions1_24({
+            const options = new AdbScrcpyOptions1_22(new ScrcpyOptions1_24({
                 logLevel: ScrcpyLogLevel.Debug,
                 ...this.settings,
                 sendDeviceMeta: false,
@@ -757,15 +756,16 @@ class ScrcpyPageState {
                         level: decoder.maxLevel,
                     })
                     : undefined,
-            });
+            }));
 
             runInAction(() => {
                 this.log = [];
                 this.log.push(`[client] Server version: ${SCRCPY_SERVER_VERSION}`);
                 this.log.push(`[client] Server arguments: ${options.formatServerArguments().join(' ')}`);
             });
 
-            const client = await this.adbScrcpyClient!.start(
+            const client = await AdbScrcpyClient.start(
+                GlobalState.device!,
                 DEFAULT_SERVER_PATH,
                 SCRCPY_SERVER_VERSION,
                 options
@@ -792,7 +792,7 @@ class ScrcpyPageState {
 
             client.exit.then(this.dispose);
 
-            client.onClipboardChange(content => {
+            client.control!.onClipboardChange(content => {
                 window.navigator.clipboard.writeText(content);
             });
 
@@ -846,7 +846,7 @@ class ScrcpyPageState {
         }
         e.currentTarget.setPointerCapture(e.pointerId);
 
-        this.client.pressBackOrTurnOnScreen(AndroidKeyEventAction.Down);
+        this.client.control!.pressBackOrTurnOnScreen(AndroidKeyEventAction.Down);
     };
 
     handleBackPointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
@@ -858,7 +858,7 @@ class ScrcpyPageState {
             return;
         }
 
-        this.client.pressBackOrTurnOnScreen(AndroidKeyEventAction.Up);
+        this.client.control!.pressBackOrTurnOnScreen(AndroidKeyEventAction.Up);
     };
 
     handleHomePointerDown = async (e: React.PointerEvent<HTMLDivElement>) => {
@@ -871,7 +871,7 @@ class ScrcpyPageState {
         }
         e.currentTarget.setPointerCapture(e.pointerId);
 
-        await this.client.injectKeyCode({
+        await this.client.control!.injectKeyCode({
             action: AndroidKeyEventAction.Down,
             keyCode: AndroidKeyCode.Home,
             repeat: 0,
@@ -888,7 +888,7 @@ class ScrcpyPageState {
             return;
         }
 
-        await this.client.injectKeyCode({
+        await this.client.control!.injectKeyCode({
             action: AndroidKeyEventAction.Up,
             keyCode: AndroidKeyCode.Home,
             repeat: 0,
@@ -906,7 +906,7 @@ class ScrcpyPageState {
         }
         e.currentTarget.setPointerCapture(e.pointerId);
 
-        await this.client.injectKeyCode({
+        await this.client.control!.injectKeyCode({
             action: AndroidKeyEventAction.Down,
             keyCode: AndroidKeyCode.AppSwitch,
             repeat: 0,
@@ -923,7 +923,7 @@ class ScrcpyPageState {
             return;
         }
 
-        await this.client.injectKeyCode({
+        await this.client.control!.injectKeyCode({
             action: AndroidKeyEventAction.Up,
             keyCode: AndroidKeyCode.AppSwitch,
             repeat: 0,
@@ -967,9 +967,11 @@ class ScrcpyPageState {
         }
 
         const { x, y } = this.calculatePointerPosition(e.clientX, e.clientY);
-        this.client.injectTouch({
+        this.client.control!.injectTouch({
             action,
             pointerId: e.pointerType === "mouse" ? BigInt(-1) : BigInt(e.pointerId),
+            screenWidth: this.client!.screenWidth!,
+            screenHeight: this.client!.screenHeight!,
             pointerX: x,
             pointerY: y,
             pressure: e.pressure * 65535,
@@ -1004,7 +1006,9 @@ class ScrcpyPageState {
         e.stopPropagation();
 
         const { x, y } = this.calculatePointerPosition(e.clientX, e.clientY);
-        this.client.injectScroll({
+        this.client.control!.injectScroll({
+            screenWidth: this.client!.screenWidth!,
+            screenHeight: this.client!.screenHeight!,
             pointerX: x,
             pointerY: y,
             scrollX: -Math.sign(e.deltaX),
@@ -1024,7 +1028,7 @@ class ScrcpyPageState {
 
         const { key, code } = e;
         if (key.match(/^[!-`{-~]$/i)) {
-            this.client!.injectText(key);
+            this.client.control!.injectText(key);
             return;
         }
 
@@ -1035,13 +1039,13 @@ class ScrcpyPageState {
         } as Record<string, AndroidKeyCode | undefined>)[code];
 
         if (keyCode) {
-            await this.client.injectKeyCode({
+            await this.client.control!.injectKeyCode({
                 action: AndroidKeyEventAction.Down,
                 keyCode,
                 metaState: 0,
                 repeat: 0,
             });
-            await this.client.injectKeyCode({
+            await this.client.control!.injectKeyCode({
                 action: AndroidKeyEventAction.Up,
                 keyCode,
                 metaState: 0,

apps/demo/src/pages/shell.tsx

@@ -11,7 +11,7 @@ import { Icons, RouteStackProps } from '../utils';
 
 let terminal: import('../components/terminal').AdbTerminal;
 if (typeof window !== 'undefined') {
-    const { AdbTerminal } = await import('../components/terminal');
+    const { AdbTerminal } = require('../components/terminal');
     terminal = new AdbTerminal();
 }