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 {