codeplay-common 4.8.4 → 4.8.5
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-screen-image.js +52 -3
- package/package.json +1 -1
|
@@ -174,7 +174,7 @@ const deviceProfiles = [
|
|
|
174
174
|
},
|
|
175
175
|
{
|
|
176
176
|
name: 'iphone-duo',
|
|
177
|
-
label: 'iPhone Duo inner-display App Store viewport
|
|
177
|
+
label: 'iPhone Duo inner-display App Store viewport',
|
|
178
178
|
outputDirectory: 'iPhone-Duo',
|
|
179
179
|
frameType: 'iphone',
|
|
180
180
|
showDynamicIsland: false,
|
|
@@ -2265,6 +2265,40 @@ function createDeviceFrameHtml(
|
|
|
2265
2265
|
border-radius: 999px;
|
|
2266
2266
|
background: #000;
|
|
2267
2267
|
}
|
|
2268
|
+
${profile.name === 'iphone-duo' ? `
|
|
2269
|
+
.device.iphone-duo {
|
|
2270
|
+
--duo-radius: clamp(24px, 4vw, 100px);
|
|
2271
|
+
--duo-bezel: clamp(5px, 0.65vw, 14px);
|
|
2272
|
+
--duo-edge: clamp(2px, 0.2vw, 5px);
|
|
2273
|
+
container-type: inline-size;
|
|
2274
|
+
padding: var(--duo-bezel);
|
|
2275
|
+
border-width: var(--duo-edge);
|
|
2276
|
+
border-radius: 8px var(--duo-radius) var(--duo-radius) 8px;
|
|
2277
|
+
}
|
|
2278
|
+
.device.iphone-duo .screen {
|
|
2279
|
+
border-radius: 2px calc(var(--duo-radius) - var(--duo-bezel) - var(--duo-edge)) calc(var(--duo-radius) - var(--duo-bezel) - var(--duo-edge)) 2px;
|
|
2280
|
+
}
|
|
2281
|
+
.iphone-duo .ios-statusbar { height: 4.5%; }
|
|
2282
|
+
.iphone-duo .status-time { margin-left: 4%; font-size: 2.4cqw; line-height: 1; }
|
|
2283
|
+
.iphone-duo .ios-statusbar svg { width: 17%; height: 54%; margin-right: 8%; }
|
|
2284
|
+
.duo-camera {
|
|
2285
|
+
position: absolute;
|
|
2286
|
+
z-index: 3;
|
|
2287
|
+
top: 2.25%;
|
|
2288
|
+
right: 3%;
|
|
2289
|
+
width: 1.8%;
|
|
2290
|
+
aspect-ratio: 1;
|
|
2291
|
+
transform: translateY(-50%);
|
|
2292
|
+
border-radius: 50%;
|
|
2293
|
+
background: #000;
|
|
2294
|
+
}
|
|
2295
|
+
@media (orientation: landscape) {
|
|
2296
|
+
.device.iphone-duo { border-radius: var(--duo-radius); }
|
|
2297
|
+
.device.iphone-duo .screen { border-radius: calc(var(--duo-radius) - var(--duo-bezel) - var(--duo-edge)); }
|
|
2298
|
+
.iphone-duo .status-time { margin-left: max(4%, calc(var(--duo-radius) * 0.6)); font-size: 1.8cqw; }
|
|
2299
|
+
.iphone-duo .ios-statusbar svg { width: 13%; margin-right: max(4%, calc(var(--duo-radius) * 0.6)); }
|
|
2300
|
+
.duo-camera { display: none; }
|
|
2301
|
+
}` : ''}
|
|
2268
2302
|
.android-statusbar { height: 4%; background: ${statusBarStyle?.background || 'transparent'}; color: ${statusBarStyle?.foreground || '#050505'}; font-family: Roboto, Arial, sans-serif; }
|
|
2269
2303
|
.android-notification { width: 3.4%; height: 46%; margin-left: 2%; }
|
|
2270
2304
|
.android-status-icons { width: 32%; height: 58%; margin-left: auto; margin-right: 4%; }
|
|
@@ -2582,8 +2616,8 @@ function createDeviceFrameHtml(
|
|
|
2582
2616
|
<body class="${phonePlatform ? 'phone-frame' : ''} ${screenshotCopy ? 'has-copy' : ''}">
|
|
2583
2617
|
${createPromotionalDecorations(palette)}
|
|
2584
2618
|
${createScreenshotCopyMarkup(screenshotCopy)}
|
|
2585
|
-
<main class="device ${profile.frameType}">
|
|
2586
|
-
<div class="screen">${phoneStatusBar}<img src="${screenshotDataUrl}" />${phoneNavigation}</div>
|
|
2619
|
+
<main class="device ${profile.frameType}${profile.name === 'iphone-duo' ? ' iphone-duo' : ''}">
|
|
2620
|
+
<div class="screen">${phoneStatusBar}<img src="${screenshotDataUrl}" />${phoneNavigation}${profile.name === 'iphone-duo' ? '<div class="duo-camera" aria-hidden="true"></div>' : ''}</div>
|
|
2587
2621
|
${getFrameAdornment(profile.frameType)}
|
|
2588
2622
|
</main>
|
|
2589
2623
|
</body>
|
|
@@ -3471,6 +3505,21 @@ async function captureProfile(client, snapshot, profile, screenshotFileName) {
|
|
|
3471
3505
|
frameId: frameTree.frameTree.frame.id,
|
|
3472
3506
|
html: snapshot.html,
|
|
3473
3507
|
});
|
|
3508
|
+
if (profile.name === 'iphone-duo') {
|
|
3509
|
+
// The Duo frame supplies its own system bars; do not capture Android insets again.
|
|
3510
|
+
await client.send('Runtime.evaluate', {
|
|
3511
|
+
expression: `(() => {
|
|
3512
|
+
const style = document.createElement('style');
|
|
3513
|
+
style.dataset.duoCaptureInsets = '';
|
|
3514
|
+
style.textContent = 'html, body, .safe-areas, .popup, .sheet-modal, .panel-left, .panel-right {'
|
|
3515
|
+
+ '--android-system-bar-top: 0px !important; --android-system-bar-bottom: 0px !important;'
|
|
3516
|
+
+ '--android-system-bar-left: 0px !important; --android-system-bar-right: 0px !important;'
|
|
3517
|
+
+ '--f7-safe-area-top: 0px !important; --f7-safe-area-bottom: 0px !important;'
|
|
3518
|
+
+ '--f7-safe-area-left: 0px !important; --f7-safe-area-right: 0px !important; }';
|
|
3519
|
+
document.head.append(style);
|
|
3520
|
+
})()`,
|
|
3521
|
+
});
|
|
3522
|
+
}
|
|
3474
3523
|
const replayLayout = await waitForReplayLayout(client, snapshot);
|
|
3475
3524
|
|
|
3476
3525
|
if (replayLayout.documentWidth > replayLayout.viewportWidth + 1) {
|