yetangitu/ya-webadb
1
0
Fork 0
mirror of https://github.com/yume-chan/ya-webadb.git synced 2025-10-05 19:42:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: split intro page

Browse source
This commit is contained in:
Simon Chan 2020-09-12 23:05:11 +08:00
parent 3f9ec75387
commit ec20679d61
4 changed files with 102 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.vscode/settings.json vendored
View file

@ -2,6 +2,7 @@
"cSpell.words": [
"CLSE",
"CNXN",
"Callout",
"RSASSA",
"WRTE",
"addrs",
@ -14,6 +15,7 @@
"tcpip",
"uifabric",
"webadb",
"websockify",
"webusb",
"wifi",
"wirelessly",

1
packages/adb/src/adb.ts
View file

@ -154,6 +154,7 @@ export class Adb {
public shell(command: string, ...args: string[]): Promise<string>;
public shell(): Promise<AdbStream>;
public shell(command?: string, ...args: string[]): Promise<AdbStream | string> {
// TODO: use shell protocol
if (!command) {
return this.createStream('shell:');
} else {

39
packages/demo/src/index.tsx
View file

@ -1,4 +1,4 @@
import { Link, Nav, Separator, Stack, StackItem, Text } from '@fluentui/react';
import { Nav, Separator, Stack, StackItem, Text } from '@fluentui/react';
import { initializeIcons } from '@uifabric/icons';
import { Adb } from '@yume-chan/adb';
import React, { useMemo, useState } from 'react';
@ -9,6 +9,7 @@ import ErrorDialogProvider from './error-dialog';
import './index.css';
import { CacheRoute, CacheSwitch } from './router';
import FileManager from './routes/file-manager';
import Intro from './routes/intro';
import Shell from './routes/shell';
import TcpIp from './routes/tcp-ip';
@ -35,41 +36,7 @@ function App(): JSX.Element | null {
exact: true,
name: 'Introduction',
children: (
<>
<Text block>
This demo can connect to your Android devices using the{' '}
<Link href="https://developer.mozilla.org/en-US/docs/Web/API/USB" target="_blank">WebUSB</Link>{' '}
API.
</Text>
<Text block>
The latest version of Google Chrome (or Microsoft Edge) is recommended for best compatibility.
</Text>
<Text block styles={{ root: { fontWeight: '600' } }}>
Windows user?
</Text>
<Text block>
The experimental new backend is required. Enable from {' '}
<Link href="chrome://flags/#new-usb-backend">
chrome://flags/#new-usb-backend
</Link>
</Text>
<Text block styles={{ root: { fontWeight: '600' } }}>
Got "Unable to claim interface"?
</Text>
<Text block >
1. Make sure ADB server is not running (run `adb kill-server` to stop it).<br />
2. Make sure no other Android management tools are running
</Text>
<Text block styles={{ root: { fontWeight: '600' } }}>
Got "Access denied"?
</Text>
<Text block >
If you have a Samsung device, it's caused by the custom driver. See {' '}
<Link href="https://bugs.chromium.org/p/chromium/issues/detail?id=1127206">
https://bugs.chromium.org/p/chromium/issues/detail?id=1127206
</Link>
</Text>
</>
<Intro />
)
},
{

96
packages/demo/src/routes/intro.tsx Normal file
View file

@ -0,0 +1,96 @@
import { Callout, DirectionalHint, Link, mergeStyleSets, Text } from '@fluentui/react';
import { useBoolean } from '@uifabric/react-hooks';
import React, { useCallback, useRef } from 'react';
import withDisplayName from '../with-display-name';
const classNames = mergeStyleSets({
callout: {
padding: '8px 12px',
},
});
interface CopyLinkProps {
href: string;
}
const CopyLink = withDisplayName('CopyLink', ({
href,
}: CopyLinkProps) => {
const calloutTarget = useRef<HTMLButtonElement | null>(null);
const [calloutVisible, { setTrue: showCallout, setFalse: hideCallout }] = useBoolean(false);
const copyLink = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
navigator.clipboard.writeText(href);
calloutTarget.current = e.target as HTMLButtonElement;
showCallout();
setTimeout(hideCallout, 3000);
}, [href]);
return (
<>
<Link onClick={copyLink}>{href}</Link>
<Callout
directionalHint={DirectionalHint.topCenter}
hidden={!calloutVisible}
target={calloutTarget}
onDismiss={hideCallout}
>
<div className={classNames.callout}>
Link copied. Open a new tab and paste into address bar.
</div>
</Callout>
</>
);
});
export default withDisplayName('Intro', () => {
return (
<>
<Text block>
This page is a demo of my {' '}
<Link href="https://github.com/yume-chan/ya-webadb/" target="_blank">WebADB</Link>{' '}
library, which can connect to your Android devices with the {' '}
<Link href="https://developer.mozilla.org/en-US/docs/Web/API/USB" target="_blank">WebUSB</Link>{' '}
API.
</Text>
<Text block>
The latest version of Google Chrome (or Microsoft Edge) is recommended for best compatibility.
</Text>
<Text block styles={{ root: { fontWeight: '600' } }}>
Windows user?
</Text>
<Text block>
The experimental new backend is required. Enable from {' '}
<CopyLink href="chrome://flags/#new-usb-backend" />
.
</Text>
<Text block styles={{ root: { fontWeight: '600' } }}>
Got "Unable to claim interface" error?
</Text>
<Text block>
Only one software can connect to your device at a time.<br />
1. Make sure ADB server is not running (run `adb kill-server` to stop it).<br />
2. Make sure no other Android management tools are running
</Text>
<Text block styles={{ root: { fontWeight: '600' } }}>
Got "Access denied" error?
</Text>
<Text block>
If you have a Samsung device, it's caused by the custom driver. See {' '}
<Link href="https://bugs.chromium.org/p/chromium/issues/detail?id=1127206">
https://bugs.chromium.org/p/chromium/issues/detail?id=1127206
</Link>
</Text>
<Text block styles={{ root: { fontWeight: '600' } }}>
Can I connect my device wirelessly (ADB over WiFi)?
</Text>
<Text block>
No. Web browsers doesn't support TCP connections.<br />
Or maybe, with {' '}
<Link href="https://github.com/novnc/websockify">websockify</Link>{' '}
running on your device and a WebSocket backend for WebADB.
</Text>
</>
);
});