codeplay-common 4.3.3 → 4.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/files/take-responsive-screenshot.js +131 -24
- package/package.json +1 -1
|
@@ -21,9 +21,10 @@ const deviceProfiles = [
|
|
|
21
21
|
outputDirectory: 'Android',
|
|
22
22
|
frameType: 'android-phone',
|
|
23
23
|
width: 360,
|
|
24
|
-
height: 800,
|
|
25
|
-
deviceScaleFactor: 3,
|
|
26
|
-
|
|
24
|
+
height: 800,
|
|
25
|
+
deviceScaleFactor: 3,
|
|
26
|
+
orientationSensitive: true,
|
|
27
|
+
mobile: true,
|
|
27
28
|
},
|
|
28
29
|
{
|
|
29
30
|
name: 'android-tablet',
|
|
@@ -31,9 +32,10 @@ const deviceProfiles = [
|
|
|
31
32
|
outputDirectory: 'Android-Tab',
|
|
32
33
|
frameType: 'tablet',
|
|
33
34
|
width: 800,
|
|
34
|
-
height: 1280,
|
|
35
|
-
deviceScaleFactor: 2,
|
|
36
|
-
|
|
35
|
+
height: 1280,
|
|
36
|
+
deviceScaleFactor: 2,
|
|
37
|
+
orientationSensitive: true,
|
|
38
|
+
mobile: true,
|
|
37
39
|
},
|
|
38
40
|
{
|
|
39
41
|
name: 'iphone',
|
|
@@ -45,6 +47,7 @@ const deviceProfiles = [
|
|
|
45
47
|
deviceScaleFactor: 3,
|
|
46
48
|
framedWidth: 1284,
|
|
47
49
|
framedHeight: 2778,
|
|
50
|
+
orientationSensitive: true,
|
|
48
51
|
mobile: true,
|
|
49
52
|
},
|
|
50
53
|
{
|
|
@@ -57,17 +60,55 @@ const deviceProfiles = [
|
|
|
57
60
|
deviceScaleFactor: 2,
|
|
58
61
|
framedWidth: 2048,
|
|
59
62
|
framedHeight: 2732,
|
|
63
|
+
orientationSensitive: true,
|
|
60
64
|
mobile: true,
|
|
61
|
-
},
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
name: 'apple-vision-pro',
|
|
68
|
+
label: 'Apple Vision Pro',
|
|
69
|
+
outputDirectory: 'Apple-Vision-Pro',
|
|
70
|
+
frameType: 'apple-vision-pro',
|
|
71
|
+
width: 3840,
|
|
72
|
+
height: 2160,
|
|
73
|
+
deviceScaleFactor: 1,
|
|
74
|
+
framedWidth: 3840,
|
|
75
|
+
framedHeight: 2160,
|
|
76
|
+
mobile: false,
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
name: 'apple-tv',
|
|
80
|
+
label: 'Apple TV',
|
|
81
|
+
outputDirectory: 'Apple-TV',
|
|
82
|
+
frameType: 'apple-tv',
|
|
83
|
+
width: 1920,
|
|
84
|
+
height: 1080,
|
|
85
|
+
deviceScaleFactor: 1,
|
|
86
|
+
framedWidth: 1920,
|
|
87
|
+
framedHeight: 1080,
|
|
88
|
+
mobile: false,
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
name: 'apple-watch',
|
|
92
|
+
label: 'Apple Watch Ultra 3',
|
|
93
|
+
outputDirectory: 'Apple-Watch',
|
|
94
|
+
frameType: 'apple-watch',
|
|
95
|
+
width: 422,
|
|
96
|
+
height: 514,
|
|
97
|
+
deviceScaleFactor: 1,
|
|
98
|
+
framedWidth: 422,
|
|
99
|
+
framedHeight: 514,
|
|
100
|
+
mobile: true,
|
|
101
|
+
},
|
|
62
102
|
{
|
|
63
103
|
name: 'amazon-mobile',
|
|
64
104
|
label: 'Amazon mobile store viewport',
|
|
65
105
|
outputDirectory: 'Amazon-Phone',
|
|
66
106
|
frameType: 'android-phone',
|
|
67
107
|
width: 360,
|
|
68
|
-
height: 640,
|
|
69
|
-
deviceScaleFactor: 3,
|
|
70
|
-
|
|
108
|
+
height: 640,
|
|
109
|
+
deviceScaleFactor: 3,
|
|
110
|
+
orientationSensitive: true,
|
|
111
|
+
mobile: true,
|
|
71
112
|
},
|
|
72
113
|
{
|
|
73
114
|
name: 'amazon-fire-tablet',
|
|
@@ -75,9 +116,10 @@ const deviceProfiles = [
|
|
|
75
116
|
outputDirectory: 'Amazon-Tab',
|
|
76
117
|
frameType: 'tablet',
|
|
77
118
|
width: 800,
|
|
78
|
-
height: 1280,
|
|
79
|
-
deviceScaleFactor: 2,
|
|
80
|
-
|
|
119
|
+
height: 1280,
|
|
120
|
+
deviceScaleFactor: 2,
|
|
121
|
+
orientationSensitive: true,
|
|
122
|
+
mobile: true,
|
|
81
123
|
},
|
|
82
124
|
{
|
|
83
125
|
name: 'amazon-fire-tv',
|
|
@@ -139,7 +181,7 @@ function getConfiguredOrientation() {
|
|
|
139
181
|
}
|
|
140
182
|
|
|
141
183
|
function orientProfile(profile, orientation) {
|
|
142
|
-
if (orientation !== 'landscape') {
|
|
184
|
+
if (orientation !== 'landscape' || !profile.orientationSensitive) {
|
|
143
185
|
return profile;
|
|
144
186
|
}
|
|
145
187
|
|
|
@@ -802,7 +844,7 @@ async function waitForReplayLayout(client, snapshot) {
|
|
|
802
844
|
});
|
|
803
845
|
}
|
|
804
846
|
|
|
805
|
-
function getFrameAdornment(frameType) {
|
|
847
|
+
function getFrameAdornment(frameType) {
|
|
806
848
|
if (frameType === 'iphone') {
|
|
807
849
|
return '<div class="dynamic-island"></div>';
|
|
808
850
|
}
|
|
@@ -815,9 +857,17 @@ function getFrameAdornment(frameType) {
|
|
|
815
857
|
return '<div class="tablet-camera"></div>';
|
|
816
858
|
}
|
|
817
859
|
|
|
818
|
-
if (frameType === 'tv') {
|
|
819
|
-
return '<div class="tv-stand"></div>';
|
|
820
|
-
}
|
|
860
|
+
if (frameType === 'tv' || frameType === 'apple-tv') {
|
|
861
|
+
return '<div class="tv-stand"></div>';
|
|
862
|
+
}
|
|
863
|
+
|
|
864
|
+
if (frameType === 'apple-watch') {
|
|
865
|
+
return '<div class="watch-crown"></div><div class="watch-button"></div>';
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
if (frameType === 'apple-vision-pro') {
|
|
869
|
+
return '<div class="vision-sensor vision-sensor-left"></div><div class="vision-sensor vision-sensor-right"></div>';
|
|
870
|
+
}
|
|
821
871
|
|
|
822
872
|
if (frameType === 'laptop') {
|
|
823
873
|
return '<div class="laptop-camera"></div><div class="laptop-base"></div>';
|
|
@@ -922,9 +972,64 @@ function createDeviceFrameHtml(profile, screenshotBuffer) {
|
|
|
922
972
|
padding: 1.05%;
|
|
923
973
|
border-radius: clamp(18px, 3.2vw, 48px);
|
|
924
974
|
}
|
|
925
|
-
.device.tablet .screen {
|
|
926
|
-
border-radius: clamp(13px, 2.5vw, 38px);
|
|
927
|
-
}
|
|
975
|
+
.device.tablet .screen {
|
|
976
|
+
border-radius: clamp(13px, 2.5vw, 38px);
|
|
977
|
+
}
|
|
978
|
+
.device.apple-watch {
|
|
979
|
+
height: 82%;
|
|
980
|
+
padding: 2.2%;
|
|
981
|
+
border: clamp(3px, 1.4vw, 7px) solid #8b929b;
|
|
982
|
+
border-radius: 24% / 20%;
|
|
983
|
+
background: linear-gradient(145deg, #d5d8dc, #363b43 28%, #11151b 72%, #9299a2);
|
|
984
|
+
}
|
|
985
|
+
.device.apple-watch .screen {
|
|
986
|
+
border-radius: 20% / 17%;
|
|
987
|
+
}
|
|
988
|
+
.watch-crown {
|
|
989
|
+
position: absolute;
|
|
990
|
+
top: 24%;
|
|
991
|
+
right: -5.5%;
|
|
992
|
+
width: 5.5%;
|
|
993
|
+
height: 15%;
|
|
994
|
+
border-radius: 0 45% 45% 0;
|
|
995
|
+
background: linear-gradient(90deg, #303640, #a8afb7 55%, #424851);
|
|
996
|
+
box-shadow: 0 0.8vh 1.5vh rgba(0,0,0,0.45);
|
|
997
|
+
}
|
|
998
|
+
.watch-button {
|
|
999
|
+
position: absolute;
|
|
1000
|
+
top: 43%;
|
|
1001
|
+
right: -3.5%;
|
|
1002
|
+
width: 3.5%;
|
|
1003
|
+
height: 11%;
|
|
1004
|
+
border-radius: 0 35% 35% 0;
|
|
1005
|
+
background: #626a74;
|
|
1006
|
+
}
|
|
1007
|
+
.device.apple-vision-pro {
|
|
1008
|
+
width: 82%;
|
|
1009
|
+
padding: 0.72%;
|
|
1010
|
+
border: clamp(4px, 0.45vw, 18px) solid rgba(201, 214, 224, 0.92);
|
|
1011
|
+
border-radius: 14% / 32%;
|
|
1012
|
+
background: linear-gradient(145deg, #dce5eb, #55616d 25%, #151b22 72%, #aebac3);
|
|
1013
|
+
box-shadow:
|
|
1014
|
+
0 5vh 11vh rgba(0,0,0,0.68),
|
|
1015
|
+
0 0 5vh rgba(180,225,255,0.2),
|
|
1016
|
+
0 0 0 1px rgba(255,255,255,0.4) inset;
|
|
1017
|
+
}
|
|
1018
|
+
.device.apple-vision-pro .screen {
|
|
1019
|
+
border-radius: 13% / 29%;
|
|
1020
|
+
}
|
|
1021
|
+
.vision-sensor {
|
|
1022
|
+
position: absolute;
|
|
1023
|
+
z-index: 3;
|
|
1024
|
+
top: 48%;
|
|
1025
|
+
width: clamp(8px, 0.8vw, 30px);
|
|
1026
|
+
aspect-ratio: 1;
|
|
1027
|
+
border-radius: 50%;
|
|
1028
|
+
background: radial-gradient(circle at 38% 35%, #567793, #05080c 55%, #000 75%);
|
|
1029
|
+
box-shadow: 0 0 0 2px rgba(147,166,181,0.55);
|
|
1030
|
+
}
|
|
1031
|
+
.vision-sensor-left { left: 3.2%; }
|
|
1032
|
+
.vision-sensor-right { right: 3.2%; }
|
|
928
1033
|
.tablet-camera,
|
|
929
1034
|
.laptop-camera {
|
|
930
1035
|
position: absolute;
|
|
@@ -938,13 +1043,15 @@ function createDeviceFrameHtml(profile, screenshotBuffer) {
|
|
|
938
1043
|
background: #080b10;
|
|
939
1044
|
box-shadow: 0 0 0 1px #526071;
|
|
940
1045
|
}
|
|
941
|
-
.device.tv
|
|
942
|
-
|
|
1046
|
+
.device.tv,
|
|
1047
|
+
.device.apple-tv {
|
|
1048
|
+
width: 82%;
|
|
943
1049
|
padding: 0.62%;
|
|
944
1050
|
border-radius: clamp(8px, 1.1vw, 24px);
|
|
945
1051
|
transform: translateY(-4%);
|
|
946
1052
|
}
|
|
947
|
-
.device.tv .screen
|
|
1053
|
+
.device.tv .screen,
|
|
1054
|
+
.device.apple-tv .screen { border-radius: clamp(4px, 0.55vw, 12px); }
|
|
948
1055
|
.tv-stand {
|
|
949
1056
|
position: absolute;
|
|
950
1057
|
z-index: -1;
|