Skip to content
Source
Sign inSign up

shapeProfile.ts

122 lines2.9 KB

1import type { DevicePlatform } from "@t3tools/contracts";
2​
3export interface DeviceShapeProfile {
4 readonly id: "ios-phone" | "ios-tablet" | "android-phone" | "android-tablet";
5 readonly bezel: number;
6 readonly bodyRadius: number;
7 readonly screenRadius: number;
8 readonly depth: number;
9 readonly backColor: number;
10 readonly buttons: ReadonlyArray<{
11 readonly edge: "left" | "right" | "top";
12 readonly offset: number;
13 readonly length: number;
14 }>;
15 readonly camera: {
16 readonly width: number;
17 readonly height: number;
18 readonly insetX: number;
19 readonly insetY: number;
20 readonly lensRadius: number;
21 readonly lenses: ReadonlyArray<readonly [number, number]>;
22 readonly flash: readonly [number, number] | null;
23 };
25​
26export const IOS_PHONE_SHAPE: DeviceShapeProfile = {
27 id: "ios-phone",
28 bezel: 0.055,
29 bodyRadius: 0.15,
30 screenRadius: 0.105,
31 depth: 0.085,
32 backColor: 0x424b5d,
33 buttons: [
34 { edge: "right", offset: 0.35, length: 0.3 },
35 { edge: "left", offset: 0.48, length: 0.18 },
36 { edge: "left", offset: 0.22, length: 0.18 },
37 ],
38 camera: {
39 width: 0.39,
40 height: 0.44,
41 insetX: 0.25,
42 insetY: 0.29,
43 lensRadius: 0.068,
44 lenses: [
45 [-0.08, 0.095],
46 [0.08, -0.095],
47 ],
48 flash: [0.085, 0.11],
49 },
50};
51​
52export const IOS_TABLET_SHAPE: DeviceShapeProfile = {
53 id: "ios-tablet",
54 bezel: 0.065,
55 bodyRadius: 0.105,
56 screenRadius: 0.045,
57 depth: 0.055,
58 backColor: 0x9ca5af,
59 buttons: [
60 { edge: "top", offset: 0.5, length: 0.15 },
61 { edge: "right", offset: 0.78, length: 0.13 },
62 { edge: "right", offset: 0.58, length: 0.13 },
63 ],
64 camera: {
65 width: 0.19,
66 height: 0.19,
67 insetX: 0.15,
68 insetY: 0.15,
69 lensRadius: 0.045,
70 lenses: [[0, 0]],
71 flash: null,
72 },
73};
74​
75export const ANDROID_PHONE_SHAPE: DeviceShapeProfile = {
76 id: "android-phone",
77 bezel: 0.035,
78 bodyRadius: 0.115,
79 screenRadius: 0.08,
80 depth: 0.085,
81 backColor: 0x344449,
82 buttons: [
83 { edge: "right", offset: 0.2, length: 0.24 },
84 { edge: "right", offset: 0.65, length: 0.32 },
85 ],
86 camera: {
87 width: 0.24,
88 height: 0.47,
89 insetX: 0.18,
90 insetY: 0.29,
91 lensRadius: 0.056,
92 lenses: [
93 [0, 0.11],
94 [0, -0.11],
95 ],
96 flash: [0.1, 0],
97 },
98};
99​
100const ANDROID_TABLET_SHAPE: DeviceShapeProfile = {
101 ...IOS_TABLET_SHAPE,
102 id: "android-tablet",
103 backColor: 0x697b80,
104};
105​
106export function resolveDeviceShape(options: {
107 platform: DevicePlatform;
108 name?: string;
109 portraitAspect: number;
110}): DeviceShapeProfile {
111 const name = options.name ?? "";
112 const namedTablet = /\b(ipad|tablet)\b/i.test(name);
113 const namedPhone = /\b(iphone|phone)\b/i.test(name);
114 const tablet = namedTablet || (!namedPhone && options.portraitAspect >= 0.6);
115 return options.platform === "ios"
116 ? tablet
117 ? IOS_TABLET_SHAPE
118 : IOS_PHONE_SHAPE
119 : tablet
120 ? ANDROID_TABLET_SHAPE
121 : ANDROID_PHONE_SHAPE;