feat(demo): scrcpy toggle navigation bar (f125e829) · Commits · e / tools / webadb

apps/demo/components/device-view.tsx

+10 −12

Original line number	Diff line number	Diff line
		@@ -10,8 +10,6 @@ export interface DeviceViewProps {

		bottomElement?: ReactNode;

		bottomHeight?: number;

		children?: ReactNode;
		}

		@@ -23,16 +21,16 @@ export const DeviceView = forwardRef<DeviceViewRef>('DeviceView')(({
		width,
		height,
		bottomElement,
		bottomHeight,
		children,
		}: DeviceViewProps, ref) => {
		const [containerSize, setContainerSize] = useState<Size>({ width: 0, height: 0 });
		const [bottomSize, setBottomSize] = useState<Size>({ width: 0, height: 0 });

		// Container size minus bottom element size
		const usableSize = useMemo(() => ({
		width: containerSize.width,
		height: containerSize.height - (bottomHeight ?? 0),
		}), [containerSize, bottomHeight]);
		height: containerSize.height - bottomSize.height,
		}), [containerSize, bottomSize]);

		// Compute sizes after scaling
		const childrenStyle = useMemo(() => {
		@@ -107,17 +105,17 @@ export const DeviceView = forwardRef<DeviceViewRef>('DeviceView')(({
		{children}
		</div>

		{(!!width && !!bottomElement) && (
		<div style={{
		<ResizeObserver
		style={{
		position: 'absolute',
		top: childrenStyle.top + childrenStyle.height,
		left: childrenStyle.left,
		width: childrenStyle.width,
		height: bottomHeight,
		}}>
		{bottomElement}
		</div>
		)}
		}}
		onResize={setBottomSize}
		>
		{(!!width && !!bottomElement) && bottomElement}
		</ResizeObserver>
		</ResizeObserver>
		</StackItem>
		);

apps/demo/pages/scrcpy.tsx

+36 −24

Original line number	Diff line number	Diff line
		@@ -7,7 +7,7 @@ import { action, autorun, makeAutoObservable, observable, runInAction } from "mo
		import { observer } from "mobx-react-lite";
		import { NextPage } from "next";
		import Head from "next/head";
		import React, { useEffect, useState } from "react";
		import React, { useEffect, useMemo, useState } from "react";
		import { DemoMode, DeviceView, DeviceViewRef, ExternalLink } from "../components";
		import { globalState } from "../state";
		import { CommonStackTokens, formatSpeed, Icons, RouteStackProps } from "../utils";
		@@ -163,6 +163,7 @@ class ScrcpyPageState {
		log: string[] = [];
		settingsVisible = false;
		demoModeVisible = false;
		navigationBarVisible = true;

		width = 0;
		height = 0;
		@@ -228,6 +229,15 @@ class ScrcpyPageState {

		get commandBarFarItems(): ICommandBarItemProps[] {
		return [
		{
		key: 'NavigationBar',
		iconProps: { iconName: Icons.PanelBottom },
		checked: this.navigationBarVisible,
		text: 'Navigation Bar',
		onClick: action(() => {
		this.navigationBarVisible = !this.navigationBarVisible;
		}),
		},
		{
		key: 'Log',
		iconProps: { iconName: Icons.TextGrammarError },
		@@ -758,8 +768,9 @@ const ConnectionDialog = observer(() => {
		});

		const Scrcpy: NextPage = () => {
		const bottomElement = (
		<Stack verticalFill horizontalAlign="center" style={{ background: '#999' }}>
		const bottomElement = useMemo(() =>
		state.navigationBarVisible && (
		<Stack verticalFill horizontalAlign="center" style={{ height: '40px', background: '#999' }}>
		<Stack verticalFill horizontal style={{ width: '100%', maxWidth: 300 }} horizontalAlign="space-evenly" verticalAlign="center">
		<IconButton
		iconProps={{ iconName: Icons.Play }}
		@@ -781,6 +792,8 @@ const Scrcpy: NextPage = () => {
		/>
		</Stack>
		</Stack>
		),
		[state.navigationBarVisible]
		);

		return (
		@@ -797,7 +810,6 @@ const Scrcpy: NextPage = () => {
		width={state.width}
		height={state.height}
		bottomElement={bottomElement}
		bottomHeight={40}
		>
		<div
		ref={state.handleRendererContainerRef}

apps/demo/utils/icons.tsx

+3 −1

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

		const STYLE = {};

		@@ -25,6 +25,7 @@ export function register() {
		FullScreenMaximize: <FullScreenMaximizeRegular style={STYLE} />,
		Info: <InfoRegular style={STYLE} />,
		Navigation: <NavigationRegular style={STYLE} />,
		PanelBottom: <PanelBottomRegular style={STYLE} />,
		PersonFeedback: <PersonFeedbackRegular style={STYLE} />,
		Phone: <PhoneRegular style={STYLE} />,
		PhoneLaptop: <PhoneLaptopRegular style={STYLE} />,
		@@ -76,6 +77,7 @@ export default {
		FullScreenMaximize: 'FullScreenMaximize',
		Info: 'Info',
		Navigation: 'Navigation',
		PanelBottom: 'PanelBottom',
		PersonFeedback: 'PersonFeedback',
		Phone: 'Phone',
		PhoneLaptop: 'PhoneLaptop',