feat(scrcpy): support all US layout keys (399fe012) · Commits · e / tools / webadb

.vscode/settings.json

+1 −0

Original line number	Diff line number	Diff line
		@@ -5,6 +5,7 @@
		"allowlist",
		"arraybuffer",
		"autorun",
		"Backquote",
		"Bframes",
		"brotli",
		"Callout",

apps/demo/src/components/scrcpy/command-bar.tsx

+1 −1

Original line number	Diff line number	Diff line
		@@ -15,8 +15,8 @@ import { Icons } from "../../utils";
		import { ExternalLink } from "../external-link";
		import { CommandBarSpacerItem } from "./command-bar-spacer-item";
		import { RECORD_STATE } from "./recorder";
		import { STATE } from "./state";
		import { SETTING_STATE } from "./settings";
		import { STATE } from "./state";

		const ITEMS = computed(() => {
		const result: ICommandBarItemProps[] = [];

apps/demo/src/components/scrcpy/navigation-bar.tsx

+4 −4

Original line number	Diff line number	Diff line
		@@ -75,7 +75,7 @@ function handleHomePointerDown(e: PointerEvent<HTMLDivElement>) {

		STATE.client!.controlMessageSerializer!.injectKeyCode({
		action: AndroidKeyEventAction.Down,
		keyCode: AndroidKeyCode.Home,
		keyCode: AndroidKeyCode.AndroidHome,
		repeat: 0,
		metaState: 0,
		});
		@@ -88,7 +88,7 @@ function handleHomePointerUp(e: PointerEvent<HTMLDivElement>) {

		STATE.client!.controlMessageSerializer!.injectKeyCode({
		action: AndroidKeyEventAction.Up,
		keyCode: AndroidKeyCode.Home,
		keyCode: AndroidKeyCode.AndroidHome,
		repeat: 0,
		metaState: 0,
		});
		@@ -101,7 +101,7 @@ function handleAppSwitchPointerDown(e: PointerEvent<HTMLDivElement>) {

		STATE.client!.controlMessageSerializer!.injectKeyCode({
		action: AndroidKeyEventAction.Down,
		keyCode: AndroidKeyCode.AppSwitch,
		keyCode: AndroidKeyCode.AndroidAppSwitch,
		repeat: 0,
		metaState: 0,
		});
		@@ -114,7 +114,7 @@ function handleAppSwitchPointerUp(e: PointerEvent<HTMLDivElement>) {

		STATE.client!.controlMessageSerializer!.injectKeyCode({
		action: AndroidKeyEventAction.Up,
		keyCode: AndroidKeyCode.AppSwitch,
		keyCode: AndroidKeyCode.AndroidAppSwitch,
		repeat: 0,
		metaState: 0,
		});

apps/demo/src/components/scrcpy/state.tsx

+6 −0

Original line number	Diff line number	Diff line
		@@ -28,6 +28,10 @@ import { fetchServer } from "./fetch-server";
		import { MuxerStream, RECORD_STATE } from "./recorder";
		import { H264Decoder, SETTING_STATE } from "./settings";

		const NOOP = () => {
		/* empty */
		};

		export class ScrcpyPageState {
		running = false;

		@@ -362,6 +366,8 @@ export class ScrcpyPageState {
		this.fps = "0";
		clearTimeout(this.fpsCounterIntervalId);

		document.exitFullscreen().catch(NOOP);

		this.client = undefined;
		this.running = false;
		}

apps/demo/src/components/scrcpy/video-container.tsx

+15 −32

Original line number	Diff line number	Diff line
		@@ -2,6 +2,7 @@ import { makeStyles } from "@griffel/react";
		import {
		AndroidKeyCode,
		AndroidKeyEventAction,
		AndroidKeyEventMeta,
		AndroidMotionEventAction,
		ScrcpyPointerId,
		} from "@yume-chan/scrcpy";
		@@ -117,49 +118,30 @@ function handleContextMenu(e: MouseEvent<HTMLDivElement>) {
		e.preventDefault();
		}

		const KEY_MAP = {
		Enter: AndroidKeyCode.Enter,
		Escape: AndroidKeyCode.Escape,
		Backspace: AndroidKeyCode.Delete,
		Tab: AndroidKeyCode.Tab,
		Delete: AndroidKeyCode.ForwardDelete,
		Home: AndroidKeyCode.MoveHome,
		End: AndroidKeyCode.MoveEnd,
		Space: AndroidKeyCode.Space,
		ArrowUp: AndroidKeyCode.DPadUp,
		ArrowDown: AndroidKeyCode.DPadDown,
		ArrowLeft: AndroidKeyCode.DPadLeft,
		ArrowRight: AndroidKeyCode.DPadRight,
		} as Record<string, AndroidKeyCode \| undefined>;

		async function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {
		async function handleKeyEvent(e: KeyboardEvent<HTMLDivElement>) {
		if (!STATE.client) {
		return;
		}

		const { key, code } = e;
		if (key.match(/^[!-`{-~]$/i)) {
		STATE.client!.controlMessageSerializer!.injectText(key);
		return;
		}

		const keyCode = KEY_MAP[code];
		const { type, key, code } = e;

		const keyCode = AndroidKeyCode[code as keyof typeof AndroidKeyCode];
		if (keyCode) {
		// Intercept keys like "Tab"
		e.preventDefault();
		e.stopPropagation();

		STATE.client!.controlMessageSerializer!.injectKeyCode({
		action: AndroidKeyEventAction.Down,
		keyCode,
		metaState: 0,
		repeat: 0,
		});
		STATE.client!.controlMessageSerializer!.injectKeyCode({
		action: AndroidKeyEventAction.Up,
		action:
		type === "keydown"
		? AndroidKeyEventAction.Down
		: AndroidKeyEventAction.Up,
		keyCode,
		metaState: 0,
		metaState:
		(e.ctrlKey ? AndroidKeyEventMeta.CtrlOn : 0) \|
		(e.shiftKey ? AndroidKeyEventMeta.ShiftOn : 0) \|
		(e.altKey ? AndroidKeyEventMeta.AltOn : 0) \|
		(e.metaKey ? AndroidKeyEventMeta.MetaOn : 0),
		repeat: 0,
		});
		}
		@@ -205,7 +187,8 @@ export function VideoContainer() {
		onPointerUp={handlePointerUp}
		onPointerCancel={handlePointerUp}
		onPointerLeave={handlePointerLeave}
		onKeyDown={handleKeyDown}
		onKeyDown={handleKeyEvent}
		onKeyUp={handleKeyEvent}
		onContextMenu={handleContextMenu}
		/>
		);