refactor(bin): move demo mode to new package

apps/demo/components/demo-mode.tsx → apps/demo/components/demo-mode-panel.tsx

@@ -1,26 +1,26 @@
 import { Dropdown, IDropdownOption, Position, Separator, SpinButton, Toggle } from '@fluentui/react';
-import { AdbDemoModeMobileDataType, AdbDemoModeMobileDataTypes, AdbDemoModeSignalStrength, AdbDemoModeStatusBarMode, AdbDemoModeStatusBarModes } from '@yume-chan/adb';
+import { DemoMode, DemoModeMobileDataType, DemoModeMobileDataTypes, DemoModeSignalStrength, DemoModeStatusBarMode, DemoModeStatusBarModes } from '@yume-chan/android-bin';
 import { autorun, makeAutoObservable, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react-lite";
 import { CSSProperties, useCallback } from 'react';
 import { globalState } from "../state";
 
 const SignalStrengthOptions =
-    Object.values(AdbDemoModeSignalStrength)
+    Object.values(DemoModeSignalStrength)
         .map((key) => ({
             key,
             text: {
-                [AdbDemoModeSignalStrength.Hidden]: 'Hidden',
-                [AdbDemoModeSignalStrength.Level0]: 'Level 0',
-                [AdbDemoModeSignalStrength.Level1]: 'Level 1',
-                [AdbDemoModeSignalStrength.Level2]: 'Level 2',
-                [AdbDemoModeSignalStrength.Level3]: 'Level 3',
-                [AdbDemoModeSignalStrength.Level4]: 'Level 4',
+                [DemoModeSignalStrength.Hidden]: 'Hidden',
+                [DemoModeSignalStrength.Level0]: 'Level 0',
+                [DemoModeSignalStrength.Level1]: 'Level 1',
+                [DemoModeSignalStrength.Level2]: 'Level 2',
+                [DemoModeSignalStrength.Level3]: 'Level 3',
+                [DemoModeSignalStrength.Level4]: 'Level 4',
             }[key],
         }));
 
 const MobileDataTypeOptions =
-    AdbDemoModeMobileDataTypes
+    DemoModeMobileDataTypes
         .map((key) => ({
             key,
             text: {
@@ -47,7 +47,7 @@ const MobileDataTypeOptions =
         }));
 
 const StatusBarModeOptions =
-    AdbDemoModeStatusBarModes
+    DemoModeStatusBarModes
         .map((key) => ({
             key,
             text: {
@@ -59,7 +59,9 @@ const StatusBarModeOptions =
             }[key],
         }));
 
-class DemoModeState {
+class DemoModePanelState {
+    demoMode: DemoMode | undefined;
+
     allowed = false;
     enabled = false;
     features: Map<string, unknown> = new Map();
@@ -71,13 +73,15 @@ class DemoModeState {
             () => globalState.device,
             async (device) => {
                 if (device) {
-                    const allowed = await device.demoMode.getAllowed();
+                    runInAction(() => this.demoMode = new DemoMode(device));
+                    const allowed = await this.demoMode!.getAllowed();
                     runInAction(() => this.allowed = allowed);
                     if (allowed) {
-                        const enabled = await device.demoMode.getEnabled();
+                        const enabled = await this.demoMode!.getEnabled();
                         runInAction(() => this.enabled = enabled);
                     }
                 } else {
+                    this.demoMode = undefined;
                     this.allowed = false;
                     this.enabled = false;
                     this.features.clear();
@@ -99,7 +103,7 @@ class DemoModeState {
     }
 }
 
-const state = new DemoModeState();
+const state = new DemoModePanelState();
 
 interface FeatureDefinition {
     key: string;
@@ -123,21 +127,21 @@ const FEATURES: FeatureDefinition[][] = [
             max: 100,
             step: 1,
             initial: 100,
-            onChange: (value) => globalState.device!.demoMode.setBatteryLevel(value as number),
+            onChange: (value) => state.demoMode!.setBatteryLevel(value as number),
         },
         {
             key: 'batteryCharging',
             label: 'Battery Charging',
             type: 'boolean',
             initial: false,
-            onChange: (value) => globalState.device!.demoMode.setBatteryCharging(value as boolean),
+            onChange: (value) => state.demoMode!.setBatteryCharging(value as boolean),
         },
         {
             key: 'powerSaveMode',
             label: 'Power Save Mode',
             type: 'boolean',
             initial: false,
-            onChange: (value) => globalState.device!.demoMode.setPowerSaveMode(value as boolean),
+            onChange: (value) => state.demoMode!.setPowerSaveMode(value as boolean),
         },
     ],
     [
@@ -146,31 +150,31 @@ const FEATURES: FeatureDefinition[][] = [
             label: 'Wifi Signal Strength',
             type: 'select',
             options: SignalStrengthOptions,
-            initial: AdbDemoModeSignalStrength.Level4,
-            onChange: (value) => globalState.device!.demoMode.setWifiSignalStrength(value as AdbDemoModeSignalStrength),
+            initial: DemoModeSignalStrength.Level4,
+            onChange: (value) => state.demoMode!.setWifiSignalStrength(value as DemoModeSignalStrength),
         },
         {
             key: 'airplaneMode',
             label: 'Airplane Mode',
             type: 'boolean',
             initial: false,
-            onChange: (value) => globalState.device!.demoMode.setAirplaneMode(value as boolean),
+            onChange: (value) => state.demoMode!.setAirplaneMode(value as boolean),
         },
         {
             key: 'mobileDataType',
             label: 'Mobile Data Type',
             type: 'select',
             options: MobileDataTypeOptions,
             initial: 'lte',
-            onChange: (value) => globalState.device!.demoMode.setMobileDataType(value as AdbDemoModeMobileDataType),
+            onChange: (value) => state.demoMode!.setMobileDataType(value as DemoModeMobileDataType),
         },
         {
             key: 'mobileSignalStrength',
             label: 'Mobile Signal Strength',
             type: 'select',
             options: SignalStrengthOptions,
-            initial: AdbDemoModeSignalStrength.Level4,
-            onChange: (value) => globalState.device!.demoMode.setMobileSignalStrength(value as AdbDemoModeSignalStrength),
+            initial: DemoModeSignalStrength.Level4,
+            onChange: (value) => state.demoMode!.setMobileSignalStrength(value as DemoModeSignalStrength),
         },
     ],
     [
@@ -180,42 +184,42 @@ const FEATURES: FeatureDefinition[][] = [
             type: 'select',
             options: StatusBarModeOptions,
             initial: 'transparent',
-            onChange: (value) => globalState.device!.demoMode.setStatusBarMode(value as AdbDemoModeStatusBarMode),
+            onChange: (value) => state.demoMode!.setStatusBarMode(value as DemoModeStatusBarMode),
         },
         {
             key: 'vibrateMode',
             label: 'Vibrate Mode Indicator',
             type: 'boolean',
             initial: false,
-            onChange: (value) => globalState.device!.demoMode.setVibrateModeEnabled(value as boolean),
+            onChange: (value) => state.demoMode!.setVibrateModeEnabled(value as boolean),
         },
         {
             key: 'bluetoothConnected',
             label: 'Bluetooth Indicator',
             type: 'boolean',
             initial: false,
-            onChange: (value) => globalState.device!.demoMode.setBluetoothConnected(value as boolean),
+            onChange: (value) => state.demoMode!.setBluetoothConnected(value as boolean),
         },
         {
             key: 'locatingIcon',
             label: 'Locating Icon',
             type: 'boolean',
             initial: false,
-            onChange: (value) => globalState.device!.demoMode.setLocatingIcon(value as boolean),
+            onChange: (value) => state.demoMode!.setLocatingIcon(value as boolean),
         },
         {
             key: 'alarmIcon',
             label: 'Alarm Icon',
             type: 'boolean',
             initial: false,
-            onChange: (value) => globalState.device!.demoMode.setAlarmIcon(value as boolean),
+            onChange: (value) => state.demoMode!.setAlarmIcon(value as boolean),
         },
         {
             key: 'notificationsVisibility',
             label: 'Notifications Visibility',
             type: 'boolean',
             initial: true,
-            onChange: (value) => globalState.device!.demoMode.setNotificationsVisibility(value as boolean),
+            onChange: (value) => state.demoMode!.setNotificationsVisibility(value as boolean),
         },
         {
             key: 'hour',
@@ -225,7 +229,7 @@ const FEATURES: FeatureDefinition[][] = [
             max: 23,
             step: 1,
             initial: 12,
-            onChange: (value) => globalState.device!.demoMode.setTime(value as number, state.features.get('minute') as number | undefined ?? 34)
+            onChange: (value) => state.demoMode!.setTime(value as number, state.features.get('minute') as number | undefined ?? 34)
         },
         {
             key: 'minute',
@@ -235,7 +239,7 @@ const FEATURES: FeatureDefinition[][] = [
             max: 59,
             step: 1,
             initial: 34,
-            onChange: (value) => globalState.device!.demoMode.setTime(state.features.get('hour') as number | undefined ?? 34, value as number)
+            onChange: (value) => state.demoMode!.setTime(state.features.get('hour') as number | undefined ?? 34, value as number)
         },
     ],
 ];
@@ -301,23 +305,23 @@ const FeatureBase = ({ feature }: { feature: FeatureDefinition; }) => {
 
 const Feature = observer(FeatureBase);
 
-export interface DemoModeProps {
+export interface DemoModePanelProps {
     style?: CSSProperties;
 }
 
-const DemoModeBase = ({
+export const DemoModePanel = observer(({
     style,
-}: DemoModeProps) => {
+}: DemoModePanelProps) => {
     const handleAllowedChange = useCallback(async (e, value?: boolean) => {
-        await globalState.device!.demoMode.setAllowed(value!);
+        await state.demoMode!.setAllowed(value!);
         runInAction(() => {
             state.allowed = value!;
             state.enabled = false;
         });
     }, []);
 
     const handleEnabledChange = useCallback(async (e, value?: boolean) => {
-        await globalState.device!.demoMode.setEnabled(value!);
+        await state.demoMode!.setEnabled(value!);
         runInAction(() => state.enabled = value!);
     }, []);
 
@@ -351,6 +355,4 @@ const DemoModeBase = ({
             ))}
         </div>
     );
-};
-
-export const DemoMode = observer(DemoModeBase);
+});

apps/demo/components/index.ts

@@ -1,6 +1,6 @@
 export * from './command-bar';
 export * from './connect';
-export * from './demo-mode';
+export * from './demo-mode-panel';
 export * from './device-view';
 export * from './error-dialog';
 export * from './external-link';

apps/demo/package.json

@@ -20,6 +20,7 @@
         "@yume-chan/adb-backend-webusb": "^0.0.10",
         "@yume-chan/adb-backend-ws": "^0.0.9",
         "@yume-chan/adb-credential-web": "^0.0.10",
+        "@yume-chan/android-bin": "^0.0.10",
         "@yume-chan/async": "^2.1.4",
         "@yume-chan/event": "^0.0.10",
         "@yume-chan/scrcpy": "^0.0.10",

apps/demo/pages/framebuffer.tsx

@@ -5,7 +5,7 @@ import { observer } from "mobx-react-lite";
 import { NextPage } from "next";
 import Head from "next/head";
 import React, { useCallback, useEffect, useRef } from 'react';
-import { CommandBar, DemoMode, DeviceView } from '../components';
+import { CommandBar, DemoModePanel, DeviceView } from '../components';
 import { globalState } from "../state";
 import { Icons, RouteStackProps } from "../utils";
 
@@ -123,7 +123,7 @@ const FrameBuffer: NextPage = (): JSX.Element | null => {
                     <canvas ref={canvasRef} style={{ display: 'block' }} />
                 </DeviceView>
 
-                <DemoMode style={{ display: state.demoModeVisible ? 'block' : 'none' }} />
+                <DemoModePanel style={{ display: state.demoModeVisible ? 'block' : 'none' }} />
             </Stack>
         </Stack>
     );

apps/demo/pages/scrcpy.tsx

@@ -8,7 +8,7 @@ import { observer } from "mobx-react-lite";
 import { NextPage } from "next";
 import Head from "next/head";
 import React, { useEffect, useMemo, useState } from "react";
-import { DemoMode, DeviceView, DeviceViewRef, ExternalLink } from "../components";
+import { DemoModePanel, DeviceView, DeviceViewRef, ExternalLink } from "../components";
 import { globalState } from "../state";
 import { CommonStackTokens, formatSpeed, Icons, RouteStackProps } from "../utils";
 
@@ -894,7 +894,7 @@ const Scrcpy: NextPage = () => {
                     />
                 </div>
 
-                <DemoMode
+                <DemoModePanel
                     style={{ display: state.demoModeVisible ? 'block' : 'none' }}
                 />
 

libraries/adb/src/adb.ts

@@ -2,7 +2,7 @@ import { PromiseResolver } from '@yume-chan/async';
 import { DisposableList } from '@yume-chan/event';
 import { AdbAuthenticationHandler, AdbCredentialStore, AdbDefaultAuthenticators } from './auth';
 import { AdbBackend } from './backend';
-import { AdbChildProcess, AdbDemoMode, AdbFrameBuffer, AdbPower, AdbReverseCommand, AdbSync, AdbTcpIpCommand, escapeArg, framebuffer, install } from './commands';
+import { AdbChildProcess, AdbFrameBuffer, AdbPower, AdbReverseCommand, AdbSync, AdbTcpIpCommand, escapeArg, framebuffer, install } from './commands';
 import { AdbFeatures } from './features';
 import { AdbCommand } from './packet';
 import { AdbLogger, AdbPacketDispatcher, AdbSocket } from './socket';
@@ -45,7 +45,6 @@ export class Adb {
     public get features() { return this._features; }
 
     public readonly childProcess: AdbChildProcess;
-    public readonly demoMode: AdbDemoMode;
     public readonly power: AdbPower;
     public readonly reverse: AdbReverseCommand;
     public readonly tcpip: AdbTcpIpCommand;
@@ -55,7 +54,6 @@ export class Adb {
         this.packetDispatcher = new AdbPacketDispatcher(backend, logger);
 
         this.childProcess = new AdbChildProcess(this);
-        this.demoMode = new AdbDemoMode(this);
         this.power = new AdbPower(this);
         this.reverse = new AdbReverseCommand(this.packetDispatcher);
         this.tcpip = new AdbTcpIpCommand(this);
@@ -196,12 +194,17 @@ export class Adb {
     }
 
     public async getProp(key: string): Promise<string> {
-        const output = await this.childProcess.exec('getprop', key);
-        return output.trim();
+        const stdout = await this.childProcess.spawnAndWaitLegacy(
+            ['getprop', key]
+        );
+        return stdout.trim();
     }
 
     public async rm(...filenames: string[]): Promise<string> {
-        return await this.childProcess.exec('rm', '-rf', ...filenames.map(arg => escapeArg(arg)));
+        const stdout = await this.childProcess.spawnAndWaitLegacy(
+            ['rm', '-rf', ...filenames.map(arg => escapeArg(arg))],
+        );
+        return stdout;
     }
 
     public async install(

libraries/adb/src/commands/index.ts

@@ -1,5 +1,4 @@
 export * from './base';
-export * from './demo-mode';
 export * from './framebuffer';
 export * from './install';
 export * from './power';

libraries/adb/src/commands/install.ts

@@ -14,7 +14,7 @@ export async function install(
     sync.dispose();
 
     // Invoke `pm install` to install it
-    await adb.childProcess.exec('pm', 'install', escapeArg(filename));
+    await adb.childProcess.spawnAndWaitLegacy(['pm', 'install', escapeArg(filename)]);
 
     // Remove the temp file
     await adb.rm(filename);