fix(demo): use new method to get file type icons (6013cf9f) · Commits · e / tools / webadb

apps/demo/package.json

+1 −0

Original line number	Diff line number	Diff line
		@@ -14,6 +14,7 @@
		"@fluentui/react-file-type-icons": "^8.6.6",
		"@fluentui/react-hooks": "^8.5.3",
		"@fluentui/react-icons": "^2.0.164-rc.2",
		"@fluentui/style-utilities": "^8.6.5",
		"@griffel/react": "^1.0.2",
		"@yume-chan/adb": "^0.0.10",
		"@yume-chan/adb-backend-direct-sockets": "^0.0.9",

apps/demo/pages/file-manager.tsx

+9 −20

Original line number	Diff line number	Diff line
		import { Breadcrumb, concatStyleSets, ContextualMenu, ContextualMenuItem, DetailsListLayoutMode, Dialog, DirectionalHint, IBreadcrumbItem, IColumn, Icon, IContextualMenuItem, IDetailsHeaderProps, IRenderFunction, Layer, MarqueeSelection, mergeStyleSets, Overlay, ProgressIndicator, Selection, ShimmeredDetailsList, Stack, StackItem } from '@fluentui/react';
		import { FileIconType, getFileTypeIconProps } from "@fluentui/react-file-type-icons";
		import { FileIconType, getFileTypeIconProps, initializeFileTypeIcons } from "@fluentui/react-file-type-icons";
		import { useConst } from '@fluentui/react-hooks';
		import { AdbSyncEntryResponse, ADB_SYNC_MAX_PACKET_SIZE, ChunkStream, InspectStream, LinuxFileType, ReadableStream, WritableStream } from '@yume-chan/adb';
		import { getIcon } from '@fluentui/style-utilities';
		import { AdbSyncEntryResponse, ADB_SYNC_MAX_PACKET_SIZE, ChunkStream, LinuxFileType, ReadableStream, WritableStream } from '@yume-chan/adb';
		import { action, autorun, makeAutoObservable, observable, runInAction } from "mobx";
		import { observer } from "mobx-react-lite";
		import { NextPage } from "next";
		@@ -12,23 +13,9 @@ import path from 'path';
		import { useCallback, useEffect, useState } from 'react';
		import { CommandBar, NoSsr } from '../components';
		import { globalState } from '../state';
		import { asyncEffect, formatSize, formatSpeed, Icons, pickFile, RouteStackProps } from '../utils';

		const FILE_TYPE_ICONS_BASE_URL = "https://spoppe-b.azureedge.net/files/fabric-cdn-prod_20220309.001/assets/item-types/";

		/**
		* Because of internal buffer of upstream/downstream streams,
		* the progress value won't be 100% accurate. But it's usually good enough.
		*/
		export class ProgressStream extends InspectStream<Uint8Array> {
		public constructor(onProgress: (value: number) => void) {
		let progress = 0;
		super(chunk => {
		progress += chunk.byteLength;
		onProgress(progress);
		});
		}
		}
		import { asyncEffect, formatSize, formatSpeed, Icons, pickFile, ProgressStream, RouteStackProps } from '../utils';

		initializeFileTypeIcons();

		let StreamSaver: typeof import('streamsaver');
		if (typeof window !== 'undefined') {
		@@ -272,7 +259,9 @@ class FileManagerState {
		break;
		}

		return <Icon imageProps={{ crossOrigin: '', src: `${FILE_TYPE_ICONS_BASE_URL}${ICON_SIZE}/${iconName}.svg` }} style={{ width: ICON_SIZE, height: ICON_SIZE }} />;
		// `@fluentui/react-file-type-icons` doesn't export icon src.
		const iconSrc = (getIcon(iconName)!.code as unknown as JSX.Element).props.src;
		return <Icon imageProps={{ crossOrigin: 'anonymous', src: iconSrc }} style={{ width: ICON_SIZE, height: ICON_SIZE }} />;
		}
		},
		{

apps/demo/pages/install.tsx

+1 −2

Original line number	Diff line number	Diff line
		@@ -5,8 +5,7 @@ import { observer } from "mobx-react-lite";
		import { NextPage } from "next";
		import Head from "next/head";
		import { globalState } from "../state";
		import { pickFile, RouteStackProps } from "../utils";
		import { ProgressStream } from './file-manager';
		import { pickFile, ProgressStream, RouteStackProps } from "../utils";

		enum Stage {
		Uploading,

apps/demo/pages/scrcpy.tsx

+1 −2

Original line number	Diff line number	Diff line
		@@ -11,8 +11,7 @@ import Head from "next/head";
		import React, { useEffect, useMemo, useState } from "react";
		import { DemoModePanel, DeviceView, DeviceViewRef, ExternalLink } from "../components";
		import { globalState } from "../state";
		import { CommonStackTokens, formatSpeed, Icons, RouteStackProps } from "../utils";
		import { ProgressStream } from "./file-manager";
		import { CommonStackTokens, formatSpeed, Icons, ProgressStream, RouteStackProps } from "../utils";

		const SERVER_URL = new URL('@yume-chan/scrcpy/bin/scrcpy-server?url', import.meta.url).toString();

apps/demo/utils/file-size.ts

+15 −0

Original line number	Diff line number	Diff line
		import { useSetInterval } from '@fluentui/react-hooks';
		import { InspectStream } from "@yume-chan/adb";
		import { useEffect, useRef, useState } from 'react';

		const units = [' B', ' KB', ' MB', ' GB'];
		@@ -59,3 +60,17 @@ export function delay(time: number): Promise<void> {
		window.setTimeout(resolve, time);
		});
		}

		/**
		* Because of internal buffer of upstream/downstream streams,
		* the progress value won't be 100% accurate. But it's usually good enough.
		*/
		export class ProgressStream extends InspectStream<Uint8Array> {
		public constructor(onProgress: (value: number) => void) {
		let progress = 0;
		super(chunk => {
		progress += chunk.byteLength;
		onProgress(progress);
		});
		}
		}