feat(demo): add volume control buttons (a7e1e85f) · Commits · e / tools / webadb

apps/demo/src/pages/scrcpy.tsx

+68 −5

Original line number	Diff line number	Diff line
		import { CommandBar, Dialog, Dropdown, ICommandBarItemProps, Icon, IconButton, IDropdownOption, LayerHost, Position, ProgressIndicator, SpinButton, Stack, TextField, Toggle, TooltipHost } from "@fluentui/react";
		import { CommandBar, ContextualMenuItemType, Dialog, Dropdown, ICommandBarItemProps, Icon, IconButton, IDropdownOption, LayerHost, Position, ProgressIndicator, SpinButton, Stack, TextField, Toggle, TooltipHost } from "@fluentui/react";
		import { useId } from "@fluentui/react-hooks";
		import { makeStyles } from "@griffel/react";
		import { action, autorun, makeAutoObservable, observable, runInAction } from "mobx";
		@@ -369,6 +369,69 @@ class ScrcpyPageState {
		onClick: () => { this.deviceView?.enterFullscreen(); },
		});

		result.push({
		key: 'volumeUp',
		disabled: !this.running,
		iconProps: { iconName: Icons.Speaker2 },
		iconOnly: true,
		text: 'Volume Up',
		onClick: (async () => {
		// TODO: Auto repeat when holding
		await this.client?.controlMessageSerializer!.injectKeyCode({
		action: AndroidKeyEventAction.Down,
		keyCode: AndroidKeyCode.VolumeUp,
		repeat: 0,
		metaState: 0,
		});
		await this.client?.controlMessageSerializer!.injectKeyCode({
		action: AndroidKeyEventAction.Up,
		keyCode: AndroidKeyCode.VolumeUp,
		repeat: 0,
		metaState: 0,
		});
		}) as (() => void),
		}, {
		key: 'volumeDown',
		disabled: !this.running,
		iconProps: { iconName: Icons.Speaker1 },
		iconOnly: true,
		text: 'Volume Down',
		onClick: (async () => {
		await this.client?.controlMessageSerializer!.injectKeyCode({
		action: AndroidKeyEventAction.Down,
		keyCode: AndroidKeyCode.VolumeDown,
		repeat: 0,
		metaState: 0,
		});
		await this.client?.controlMessageSerializer!.injectKeyCode({
		action: AndroidKeyEventAction.Up,
		keyCode: AndroidKeyCode.VolumeDown,
		repeat: 0,
		metaState: 0,
		});
		}) as (() => void),
		}, {
		key: 'volumeMute',
		disabled: !this.running,
		iconProps: { iconName: Icons.SpeakerOff },
		iconOnly: true,
		text: 'Toggle Mute',
		onClick: (async () => {
		await this.client?.controlMessageSerializer!.injectKeyCode({
		action: AndroidKeyEventAction.Down,
		keyCode: AndroidKeyCode.VolumeMute,
		repeat: 0,
		metaState: 0,
		});
		await this.client?.controlMessageSerializer!.injectKeyCode({
		action: AndroidKeyEventAction.Up,
		keyCode: AndroidKeyCode.VolumeMute,
		repeat: 0,
		metaState: 0,
		});
		}) as (() => void),
		});

		result.push({
		key: 'rotateDevice',
		disabled: !this.running,
		@@ -382,21 +445,21 @@ class ScrcpyPageState {
		iconProps: { iconName: Icons.RotateLeft },
		iconOnly: true,
		text: 'Rotate Video Left',
		onClick: () => {
		onClick: action(() => {
		this.rotate -= 1;
		if (this.rotate < 0) {
		this.rotate = 3;
		}
		}
		}),
		}, {
		key: 'rotateVideoRight',
		disabled: !this.running,
		iconProps: { iconName: Icons.RotateRight },
		iconOnly: true,
		text: 'Rotate Video Right',
		onClick: () => {
		onClick: action(() => {
		this.rotate = (this.rotate + 1) & 3;
		},
		}),
		});

		result.push({

apps/demo/src/utils/icons.tsx

+7 −1

Original line number	Diff line number	Diff line
		import { registerIcons } from "@fluentui/react";
		import { AddCircleRegular, ArrowClockwiseRegular, ArrowRotateClockwiseRegular, ArrowRotateCounterclockwiseRegular, ArrowSortDownRegular, ArrowSortUpRegular, BookmarkRegular, BookSearchRegular, BoxRegular, BugRegular, CameraRegular, CheckmarkRegular, ChevronDownRegular, ChevronRightRegular, ChevronUpRegular, CircleRegular, CloudArrowDownRegular, CloudArrowUpRegular, CopyRegular, DeleteRegular, DocumentRegular, FilterRegular, FolderRegular, FullScreenMaximizeRegular, InfoRegular, LightbulbFilamentRegular, LightbulbRegular, MoreHorizontalRegular, NavigationRegular, OrientationRegular, PanelBottomRegular, PersonFeedbackRegular, PhoneLaptopRegular, PhoneRegular, PlayRegular, PlugConnectedRegular, PlugDisconnectedRegular, PowerRegular, SaveRegular, SearchRegular, SettingsRegular, StopRegular, TextGrammarErrorRegular, WandRegular, WarningRegular, WifiSettingsRegular, WindowConsoleRegular } from '@fluentui/react-icons';
		import { AddCircleRegular, ArrowClockwiseRegular, ArrowRotateClockwiseRegular, ArrowRotateCounterclockwiseRegular, ArrowSortDownRegular, ArrowSortUpRegular, BookmarkRegular, BookSearchRegular, BoxRegular, BugRegular, CameraRegular, CheckmarkRegular, ChevronDownRegular, ChevronRightRegular, ChevronUpRegular, CircleRegular, CloudArrowDownRegular, CloudArrowUpRegular, CopyRegular, DeleteRegular, DocumentRegular, FilterRegular, FolderRegular, FullScreenMaximizeRegular, InfoRegular, LightbulbFilamentRegular, LightbulbRegular, MoreHorizontalRegular, NavigationRegular, OrientationRegular, PanelBottomRegular, PersonFeedbackRegular, PhoneLaptopRegular, PhoneRegular, PlayRegular, PlugConnectedRegular, PlugDisconnectedRegular, PowerRegular, SaveRegular, SearchRegular, SettingsRegular, Speaker1Regular, Speaker2Regular, SpeakerOffRegular, StopRegular, TextGrammarErrorRegular, WandRegular, WarningRegular, WifiSettingsRegular, WindowConsoleRegular } from '@fluentui/react-icons';

		const STYLE = {};

		@@ -42,6 +42,9 @@ export function register() {
		RotateRight: <ArrowRotateClockwiseRegular style={STYLE} />,
		Save: <SaveRegular style={STYLE} />,
		Settings: <SettingsRegular style={STYLE} />,
		Speaker1: <Speaker1Regular style={STYLE} />,
		Speaker2: <Speaker2Regular style={STYLE} />,
		SpeakerOff: <SpeakerOffRegular style={STYLE} />,
		Stop: <StopRegular style={STYLE} />,
		TextGrammarError: <TextGrammarErrorRegular style={STYLE} />,
		Wand: <WandRegular style={STYLE} />,
		@@ -103,6 +106,9 @@ const Icons = {
		RotateRight: 'RotateRight',
		Save: 'Save',
		Settings: 'Settings',
		Speaker1: 'Speaker1',
		Speaker2: 'Speaker2',
		SpeakerOff: 'SpeakerOff',
		Stop: 'Stop',
		TextGrammarError: 'TextGrammarError',
		Wand: 'Wand',