diff --git a/packages/vscode-extension/src/assets/README.md b/packages/vscode-extension/src/assets/README.md
index 32c2f3a37..32e572803 100644
--- a/packages/vscode-extension/src/assets/README.md
+++ b/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.
diff --git a/packages/vscode-extension/src/assets/iphone_15_pro/mask.png b/packages/vscode-extension/src/assets/iphone_15_pro/mask.png
new file mode 100644
index 000000000..ae894e233
Binary files /dev/null and b/packages/vscode-extension/src/assets/iphone_15_pro/mask.png differ
diff --git a/packages/vscode-extension/src/assets/iphone_15_pro/mask.svg b/packages/vscode-extension/src/assets/iphone_15_pro/mask.svg
deleted file mode 100644
index a4d989da3..000000000
--- a/packages/vscode-extension/src/assets/iphone_15_pro/mask.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
diff --git a/packages/vscode-extension/src/assets/iphone_15_pro/skin.svg b/packages/vscode-extension/src/assets/iphone_15_pro/skin.svg
deleted file mode 100644
index c95223269..000000000
--- a/packages/vscode-extension/src/assets/iphone_15_pro/skin.svg
+++ /dev/null
@@ -1,64 +0,0 @@
-
diff --git a/packages/vscode-extension/src/assets/iphone_15_pro/skin.webp b/packages/vscode-extension/src/assets/iphone_15_pro/skin.webp
new file mode 100644
index 000000000..7795b2ac1
Binary files /dev/null and b/packages/vscode-extension/src/assets/iphone_15_pro/skin.webp differ
diff --git a/packages/vscode-extension/src/assets/iphone_SE/mask.png b/packages/vscode-extension/src/assets/iphone_SE/mask.png
new file mode 100644
index 000000000..cad60db44
Binary files /dev/null and b/packages/vscode-extension/src/assets/iphone_SE/mask.png differ
diff --git a/packages/vscode-extension/src/assets/iphone_SE/skin.webp b/packages/vscode-extension/src/assets/iphone_SE/skin.webp
new file mode 100644
index 000000000..4e1e8223b
Binary files /dev/null and b/packages/vscode-extension/src/assets/iphone_SE/skin.webp differ
diff --git a/packages/vscode-extension/src/assets/pixel_6a/mask.png b/packages/vscode-extension/src/assets/pixel_6a/mask.png
new file mode 100644
index 000000000..3cae3026f
Binary files /dev/null and b/packages/vscode-extension/src/assets/pixel_6a/mask.png differ
diff --git a/packages/vscode-extension/src/assets/pixel_6a/skin.webp b/packages/vscode-extension/src/assets/pixel_6a/skin.webp
new file mode 100644
index 000000000..924ecc405
Binary files /dev/null and b/packages/vscode-extension/src/assets/pixel_6a/skin.webp differ
diff --git a/packages/vscode-extension/src/devices/DeviceManager.ts b/packages/vscode-extension/src/devices/DeviceManager.ts
index ea1892a72..220eaa87b 100644
--- a/packages/vscode-extension/src/devices/DeviceManager.ts
+++ b/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`);
}
diff --git a/packages/vscode-extension/src/webview/components/Preview.tsx b/packages/vscode-extension/src/webview/components/Preview.tsx
index 4e18bff22..53bd92b07 100644
--- a/packages/vscode-extension/src/webview/components/Preview.tsx
+++ b/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 (
{!isStarting && !hasBuildError && (
@@ -311,7 +305,7 @@ function Preview({ isInspecting, setIsInspecting }: Props) {
)}
-
+
)}
{isStarting && !hasBuildError && (
@@ -320,13 +314,13 @@ function Preview({ isInspecting, setIsInspecting }: Props) {
-
+
)}
{hasBuildError && (
-
+
)}
diff --git a/packages/vscode-extension/src/webview/declaration.d.ts b/packages/vscode-extension/src/webview/declaration.d.ts
new file mode 100644
index 000000000..0f7757f67
--- /dev/null
+++ b/packages/vscode-extension/src/webview/declaration.d.ts
@@ -0,0 +1,3 @@
+declare module "*.webp";
+declare module "*.svg";
+declare module "*.png";
diff --git a/packages/vscode-extension/src/webview/utilities/consts.ts b/packages/vscode-extension/src/webview/utilities/consts.ts
index d879ef8e7..3050eb152 100644
--- a/packages/vscode-extension/src/webview/utilities/consts.ts
+++ b/packages/vscode-extension/src/webview/utilities/consts.ts
@@ -1,9 +1,70 @@
import pixel7 from "../../assets/pixel_7/skin.webp";
import pixel7mask from "../../assets/pixel_7/mask.png";
-import iphone15pro from "../../assets/iphone_15_pro/skin.svg";
-import iphone15promask from "../../assets/iphone_15_pro/mask.svg";
+import pixel6a from "../../assets/pixel_6a/skin.webp";
+import pixel6amask from "../../assets/pixel_6a/mask.png";
+import iphone15pro from "../../assets/iphone_15_pro/skin.webp";
+import iphone15promask from "../../assets/iphone_15_pro/mask.png";
+import iphoneSE from "../../assets/iphone_SE/skin.webp";
+import iphoneSEmask from "../../assets/iphone_SE/mask.png";
+import { Platform } from "../../common/DeviceManager";
+
+export type SupportedDeviceName = typeof SupportedDevices[number]["name"];
+
+// iOS devices names should match supportedDeviceTypes inside the runtime
+export const SupportedDevices: DeviceProperties[] = [
+ {
+ name: "iPhone 15 Pro",
+ platform: Platform.IOS,
+ screenWidth: 1179,
+ screenHeight: 2556,
+ frameWidth: 1285,
+ frameHeight: 2663,
+ offsetX: 55,
+ offsetY: 55,
+ frameImage: iphone15pro,
+ maskImage: iphone15promask,
+ },
+ {
+ name: "iPhone SE (3rd generation)",
+ platform: Platform.IOS,
+ screenWidth: 750,
+ screenHeight: 1334,
+ frameWidth: 874,
+ frameHeight: 1780,
+ offsetX: 62,
+ offsetY: 222,
+ frameImage: iphoneSE,
+ maskImage: iphoneSEmask,
+ },
+ {
+ name: "Google Pixel 7",
+ platform: Platform.Android,
+ screenWidth: 1080,
+ screenHeight: 2400,
+ frameWidth: 1200,
+ frameHeight: 2541,
+ offsetX: 59,
+ offsetY: 58,
+ frameImage: pixel7,
+ maskImage: pixel7mask,
+ },
+ {
+ name: "Google Pixel 6a",
+ platform: Platform.Android,
+ screenWidth: 1080,
+ screenHeight: 2400,
+ frameWidth: 1207,
+ frameHeight: 2555,
+ offsetX: 57,
+ offsetY: 69,
+ frameImage: pixel6a,
+ maskImage: pixel6amask,
+ },
+] as const;
export type DeviceProperties = {
+ name: string;
+ platform: Platform;
screenWidth: number;
screenHeight: number;
frameWidth: number;
@@ -13,25 +74,3 @@ export type DeviceProperties = {
frameImage: string;
maskImage: string;
};
-
-export const ANDROID_DEVICE_GRAPHICAL_PROPERTIES: DeviceProperties = {
- screenWidth: 1080,
- screenHeight: 2400,
- frameWidth: 1200,
- frameHeight: 2541,
- offsetX: 59,
- offsetY: 58,
- frameImage: pixel7,
- maskImage: pixel7mask,
-};
-
-export const IOS_DEVICE_GRAPHICAL_PROPERTIES: DeviceProperties = {
- screenWidth: 1179,
- screenHeight: 2556,
- frameWidth: 1285,
- frameHeight: 2663,
- offsetX: 55,
- offsetY: 55,
- frameImage: iphone15pro,
- maskImage: iphone15promask,
-};
diff --git a/packages/vscode-extension/src/webview/views/CreateDeviceView.tsx b/packages/vscode-extension/src/webview/views/CreateDeviceView.tsx
index 6d51e3dc8..61261c5b4 100644
--- a/packages/vscode-extension/src/webview/views/CreateDeviceView.tsx
+++ b/packages/vscode-extension/src/webview/views/CreateDeviceView.tsx
@@ -4,32 +4,28 @@ import { useState } from "react";
import { useDevices } from "../providers/DevicesProvider";
import Button from "../components/shared/Button";
import Label from "../components/shared/Label";
+import { SupportedDeviceName, SupportedDevices } from "../utilities/consts";
+import { Platform } from "../../common/DeviceManager";
-export enum SupportedAndroidDevice {
- PIXEL_7 = "Google Pixel 7",
-}
-
-export enum SupportedIOSDevice {
- IPHONE_15_PRO = "iPhone 15 Pro",
-}
-
-type SupportedDevice = SupportedAndroidDevice | SupportedIOSDevice;
-
-function isSupportedAndroidDevice(device: SupportedDevice): device is SupportedAndroidDevice {
- return Object.values(SupportedAndroidDevice).includes(device as SupportedAndroidDevice);
-}
-
-function isSupportedIOSDevice(device: SupportedDevice): device is SupportedIOSDevice {
- return Object.values(SupportedIOSDevice).includes(device as SupportedIOSDevice);
+function isSupportedIOSDevice(device: SupportedDeviceName): boolean {
+ return (
+ SupportedDevices.find((sd) => {
+ return sd.name === device;
+ })?.platform === Platform.IOS
+ );
}
const SUPPORTED_DEVICES = [
{
- items: Object.values(SupportedIOSDevice).map((value) => ({ value, label: value })),
+ items: SupportedDevices.filter((item) => {
+ return item.platform === Platform.IOS;
+ }).map((item) => ({ value: item.name, label: item.name })),
label: "iOS",
},
{
- items: Object.values(SupportedAndroidDevice).map((value) => ({ value, label: value })),
+ items: SupportedDevices.filter((item) => {
+ return item.platform === Platform.Android;
+ }).map((item) => ({ value: item.name, label: item.name })),
label: "Android",
},
];
@@ -40,7 +36,7 @@ interface CreateDeviceViewProps {
}
function CreateDeviceView({ onCreate, onCancel }: CreateDeviceViewProps) {
- const [deviceName, setDeviceName] = useState(undefined);
+ const [deviceName, setDeviceName] = useState(undefined);
const [selectedSystemName, selectSystemName] = useState(undefined);
const [loading, setLoading] = useState(false);
@@ -95,7 +91,7 @@ function CreateDeviceView({ onCreate, onCancel }: CreateDeviceViewProps) {
className="form-field"
value={deviceName}
onChange={(newValue: string) => {
- setDeviceName(newValue as SupportedDevice);
+ setDeviceName(newValue as SupportedDeviceName);
selectSystemName(undefined);
}}
items={SUPPORTED_DEVICES}
diff --git a/packages/vscode-extension/src/webview/views/DevicesNotFoundView.tsx b/packages/vscode-extension/src/webview/views/DevicesNotFoundView.tsx
index 17e44d407..7056918c0 100644
--- a/packages/vscode-extension/src/webview/views/DevicesNotFoundView.tsx
+++ b/packages/vscode-extension/src/webview/views/DevicesNotFoundView.tsx
@@ -2,10 +2,12 @@ import "./DevicesNotFoundView.css";
import SmartphoneIcon from "../components/icons/SmartphoneIcon";
import Button from "../components/shared/Button";
import { useModal } from "../providers/ModalProvider";
-import CreateDeviceView, { SupportedAndroidDevice, SupportedIOSDevice } from "./CreateDeviceView";
+import CreateDeviceView from "./CreateDeviceView";
import { useDevices } from "../providers/DevicesProvider";
import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
import { useState } from "react";
+import { SupportedDevices } from "../utilities/consts";
+import { Platform } from "../../common/DeviceManager";
function DevicesNotFoundView() {
const { openModal, closeModal } = useModal();
@@ -33,7 +35,12 @@ function DevicesNotFoundView() {
newestAPIImage = image;
}
}
- await deviceManager.createAndroidDevice(SupportedAndroidDevice.PIXEL_7, newestAPIImage);
+ await deviceManager.createAndroidDevice(
+ SupportedDevices.find((sd) => {
+ return sd.platform === Platform.Android;
+ })!.name,
+ newestAPIImage
+ );
} finally {
setAndroidCreating(false);
}
@@ -46,7 +53,13 @@ function DevicesNotFoundView() {
for (const runtime of iOSRuntimes) {
if (
(newestRuntime === undefined || runtime.version > newestRuntime.version) &&
- runtime.supportedDeviceTypes.find((dt) => dt.name === SupportedIOSDevice.IPHONE_15_PRO)
+ runtime.supportedDeviceTypes.find(
+ (dt) =>
+ dt.name ===
+ SupportedDevices.find((sd) => {
+ return sd.platform === Platform.IOS;
+ })?.name
+ )
) {
newestRuntime = runtime;
}
@@ -56,7 +69,11 @@ function DevicesNotFoundView() {
return;
}
const iOSDeviceType = newestRuntime.supportedDeviceTypes.find(
- (dt) => dt.name === SupportedIOSDevice.IPHONE_15_PRO
+ (dt) =>
+ dt.name ===
+ SupportedDevices.find((sd) => {
+ return sd.platform === Platform.IOS;
+ })?.name
);
await deviceManager.createIOSDevice(iOSDeviceType!, newestRuntime);
} finally {