Add more device skins

packages/vscode-extension/src/assets/README.md

@@ -1,3 +1,7 @@
+# assets formats:
+
+To avoid bugs caused by other formats, please add skins as a `.webp` files and masks as `.png` files.
+
 # Device frames
 
 ## Android
@@ -34,4 +38,4 @@ https://developer.apple.com/help/app-store-connect/reference/screenshot-specific
 
 ### How to prepare an iOS mask
 
-Apple provides masks as vector `.pdf` files. You need to convert the .pdf file to .svg. Online converters like "pdf to svg" work just fine.
+Apple provides masks as vector `.pdf` files. You need to convert the .pdf file to .png in case of a mask and .webp in case of a frame.

packages/vscode-extension/src/devices/DeviceManager.ts

@@ -51,14 +51,14 @@ export class DeviceManager implements Disposable, DeviceManagerInterface {
   public async getDevice(deviceInfo: DeviceInfo) {
     if (deviceInfo.platform === Platform.IOS) {
       const simulators = await listSimulators();
-      const simulatorInfo = simulators.find((deviceInfo) => deviceInfo.id === deviceInfo.id);
+      const simulatorInfo = simulators.find((device) => device.id === deviceInfo.id);
       if (!simulatorInfo || simulatorInfo.platform !== Platform.IOS) {
         throw new Error(`Simulator ${deviceInfo.id} not found`);
       }
       return new IosSimulatorDevice(simulatorInfo.UDID);
     } else {
       const emulators = await listEmulators();
-      const emulatorInfo = emulators.find((deviceInfo) => deviceInfo.id === deviceInfo.id);
+      const emulatorInfo = emulators.find((device) => device.id === deviceInfo.id);
       if (!emulatorInfo || emulatorInfo.platform !== Platform.Android) {
         throw new Error(`Emulator ${deviceInfo.id} not found`);
       }

packages/vscode-extension/src/webview/components/Preview.tsx

@@ -5,12 +5,7 @@ import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
 import { keyboardEventToHID } from "../utilities/keyMapping";
 import "./Preview.css";
 import { useProject } from "../providers/ProjectProvider";
-import { Platform } from "../../common/DeviceManager";
-import {
-  ANDROID_DEVICE_GRAPHICAL_PROPERTIES,
-  DeviceProperties,
-  IOS_DEVICE_GRAPHICAL_PROPERTIES,
-} from "../utilities/consts";
+import { DeviceProperties, SupportedDevices } from "../utilities/consts";
 import PreviewLoader from "./PreviewLoader";
 import { useBuildErrorAlert, useBundleErrorAlert } from "../hooks/useBuildErrorAlert";
 import Debugger from "./Debugger";
@@ -219,10 +214,9 @@ function Preview({ isInspecting, setIsInspecting }: Props) {
     };
   }, [project]);
 
-  const device =
-    projectState?.selectedDevice?.platform === Platform.Android
-      ? ANDROID_DEVICE_GRAPHICAL_PROPERTIES
-      : IOS_DEVICE_GRAPHICAL_PROPERTIES;
+  const device = SupportedDevices.find((sd) => {
+    return sd.name === projectState?.selectedDevice?.name;
+  });
 
   const inspectFrame = inspectData?.frame;
 
@@ -245,7 +239,7 @@ function Preview({ isInspecting, setIsInspecting }: Props) {
   return (
     <div
       className="phone-wrapper"
-      style={cssPropertiesForDevice(device)}
+      style={cssPropertiesForDevice(device!)}
       tabIndex={0} // allows keyboard events to be captured
       ref={wrapperDivRef}>
       {!isStarting && !hasBuildError && (
@@ -311,7 +305,7 @@ function Preview({ isInspecting, setIsInspecting }: Props) {
               </button>
             </div>
           )}
-          <img src={device.frameImage} className="phone-frame" />
+          <img src={device!.frameImage} className="phone-frame" />
         </div>
       )}
       {isStarting && !hasBuildError && (
@@ -320,13 +314,13 @@ function Preview({ isInspecting, setIsInspecting }: Props) {
           <div className="phone-sized phone-screen phone-content-loading ">
             <PreviewLoader />
           </div>
-          <img src={device.frameImage} className="phone-frame" />
+          <img src={device!.frameImage} className="phone-frame" />
         </div>
       )}
       {hasBuildError && (
         <div className="phone-content">
           <div className="phone-sized phone-screen extension-error-screen" />
-          <img src={device.frameImage} className="phone-frame" />
+          <img src={device!.frameImage} className="phone-frame" />
         </div>
       )}
     </div>

packages/vscode-extension/src/webview/declaration.d.ts

@@ -0,0 +1,3 @@
+declare module "*.webp";
+declare module "*.svg";
+declare module "*.png";