feat(demo): wip: new packet logger (a15fb4bd) · Commits · e / tools / webadb

apps/demo/src/components/device-view.tsx

+5 −5

Original line number	Diff line number	Diff line
		import { mergeStyleSets, StackItem } from '@fluentui/react';
		import { ReactNode, useImperativeHandle, useMemo, useRef, useState } from 'react';
		import { ResizeObserver, Size } from './resize-observer';
		import { ComponentType, ReactNode, useImperativeHandle, useMemo, useRef, useState } from 'react';
		import { forwardRef } from '../utils/with-display-name';
		import { ResizeObserver, Size } from './resize-observer';

		export interface DeviceViewProps {
		width: number;

		height: number;

		bottomElement?: ReactNode;
		BottomElement?: ComponentType<{}>;

		children?: ReactNode;
		}
		@@ -20,7 +20,7 @@ export interface DeviceViewRef {
		export const DeviceView = forwardRef<DeviceViewRef>('DeviceView')(({
		width,
		height,
		bottomElement,
		BottomElement,
		children,
		}: DeviceViewProps, ref) => {
		const styles = mergeStyleSets({
		@@ -123,7 +123,7 @@ export const DeviceView = forwardRef<DeviceViewRef>('DeviceView')(({
		}}
		onResize={setBottomSize}
		>
		{(!!width && !!bottomElement) && bottomElement}
		{(!!width && !!BottomElement) && <BottomElement />}
		</ResizeObserver>
		</ResizeObserver>
		</StackItem>

+2 −2

Original line number	Diff line number	Diff line
		@@ -37,13 +37,13 @@ export const ResizeObserver = forwardRef<HTMLDivElement>('ResizeObserver')(({

		useLayoutEffect(() => {
		handleResize();
		}, []);
		}, [handleResize]);

		const handleIframeRef = useCallback((element: HTMLIFrameElement \| null) => {
		if (element) {
		element.contentWindow!.addEventListener('resize', handleResize);
		}
		}, []);
		}, [handleResize]);

		const containerStyle: CSSProperties = useMemo(() => {
		if (!style) {

+465 −129

File changed.

Preview size limit exceeded, changes collapsed.

+30 −27

Original line number	Diff line number	Diff line
		@@ -792,9 +792,12 @@ const ConnectionDialog = observer(() => {
		);
		});

		const Scrcpy: NextPage = () => {
		const bottomElement = useMemo(() =>
		state.navigationBarVisible && (
		const NavigationBar = observer(() => {
		if (!state.navigationBarVisible) {
		return null;
		}

		return (
		<Stack verticalFill horizontalAlign="center" style={{ height: '40px', background: '#999' }}>
		<Stack verticalFill horizontal style={{ width: '100%', maxWidth: 300 }} horizontalAlign="space-evenly" verticalAlign="center">
		<IconButton
		@@ -817,10 +820,10 @@ const Scrcpy: NextPage = () => {
		/>
		</Stack>
		</Stack>
		),
		[state.navigationBarVisible]
		);
		});

		const Scrcpy: NextPage = () => {
		return (
		<Stack {...RouteStackProps}>
		<Head>
		@@ -834,7 +837,7 @@ const Scrcpy: NextPage = () => {
		ref={state.handleDeviceViewRef}
		width={state.width}
		height={state.height}
		bottomElement={bottomElement}
		BottomElement={NavigationBar}
		>
		<div
		ref={state.handleRendererContainerRef}