rnxsim 0.1.504 → 0.1.506

package/src/screenshots/frame-compose.ts

@@ -5,11 +5,18 @@ import {
   LEGACY_HOME_BUTTON_SIZE,
   LEGACY_SIDE_BEZEL,
   LEGACY_TOP_BEZEL,
+  HINGE_BARREL_BACKGROUND,
+  HINGE_BARREL_SHADOW,
+  HOUSING_RAIL_COLOR,
+  HOUSING_RAIL_OUTLINE,
   SIDE_BUTTON_RESERVE,
 } from 'sootsim-engine/ios/chrome-metrics'
 import {
+  cornerRadii,
+  formatCornerRadii,
   getDevice,
   resolveDeviceFrameGeometry,
+  type CornerRadii,
   type DeviceModel,
 } from 'sootsim-engine/settings'
 import { launchReapedChrome } from '../../../../scripts/lib/reap-browser'
@@ -47,8 +54,10 @@ export interface FramedScreenshotLayout {
   logicalScreenHeight: number
   logicalScreenLeft: number
   logicalScreenTop: number
-  logicalScreenRadius: number
-  logicalFrameRadius: number
+  logicalScreenRadius: CornerRadii
+  logicalFrameRadius: CornerRadii
+  // light rail around a black glass ring; null draws one black body
+  housing: ReturnType<typeof resolveDeviceFrameGeometry>['housing']
   frameBackground: string
   frameOutline: string
   metallicRingShadow: string | null
@@ -73,10 +82,12 @@ export function getFramedScreenshotLayout(model: DeviceModel): FramedScreenshotL
     spec.statusBarHeight > 0 &&
     !spec.dynamicIsland &&
     spec.homeIndicatorHeight === 0 &&
-    spec.cornerRadius === 0
+    // home-button iphones have a square display, so any corner reads 0
+    spec.cornerRadius.topLeft === 0
   const logicalScreenWidth = spec.width
   const logicalScreenHeight = spec.height
   const modernGeometry = resolveDeviceFrameGeometry(spec)
+  const housing = isLegacyHardware ? null : modernGeometry.housing
   const logicalFrameWidth = isLegacyHardware
     ? spec.width + LEGACY_SIDE_BEZEL * 2
     : modernGeometry.frameWidth
@@ -91,7 +102,7 @@ export function getFramedScreenshotLayout(model: DeviceModel): FramedScreenshotL
     logicalFrameLeft + (isLegacyHardware ? LEGACY_SIDE_BEZEL : modernGeometry.screenLeft)
   const logicalScreenTop = isLegacyHardware ? LEGACY_TOP_BEZEL : modernGeometry.screenTop
   const logicalFrameRadius = isLegacyHardware
-    ? LEGACY_FRAME_RADIUS
+    ? cornerRadii(LEGACY_FRAME_RADIUS)
     : modernGeometry.frameRadius
   const buttons: FrameButtonLayout[] = [
     {
@@ -135,13 +146,20 @@ export function getFramedScreenshotLayout(model: DeviceModel): FramedScreenshotL
     logicalScreenHeight,
     logicalScreenLeft,
     logicalScreenTop,
-    logicalScreenRadius: isLegacyHardware ? 0 : modernGeometry.screenRadius,
+    logicalScreenRadius: isLegacyHardware ? cornerRadii(0) : modernGeometry.screenRadius,
     logicalFrameRadius,
+    housing,
     frameBackground: isLegacyHardware
       ? 'linear-gradient(180deg, #1b1c20 0%, #0f1012 42%, #050608 100%)'
-      : '#000000',
-    frameOutline: isLegacyHardware ? '0 0 0 1px #1f2125' : '0 0 0 1px #333',
-    metallicRingShadow: isLegacyHardware ? null : METALLIC_RING_SHADOW,
+      : housing
+        ? HOUSING_RAIL_COLOR
+        : '#000000',
+    frameOutline: isLegacyHardware
+      ? '0 0 0 1px #1f2125'
+      : housing
+        ? HOUSING_RAIL_OUTLINE
+        : '0 0 0 1px #333',
+    metallicRingShadow: isLegacyHardware || housing ? null : METALLIC_RING_SHADOW,
     buttons,
     legacyHomeButton: isLegacyHardware
       ? {
@@ -203,7 +221,7 @@ function renderFrameHtml(
         style="
           position:absolute;
           inset:0;
-          border-radius:${layout.logicalFrameRadius}px;
+          border-radius:${formatCornerRadii(layout.logicalFrameRadius)};
           box-shadow:${layout.metallicRingShadow};
           pointer-events:none;
           z-index:10;
@@ -212,6 +230,47 @@ function renderFrameHtml(
     `
     : ''
 
+  // black glass ring inside the rail, then the hinge barrel over the leading
+  // rail. the ring carries no z-index so the screen div after it paints on top.
+  const housingHtml = layout.housing
+    ? `
+      <div
+        aria-hidden="true"
+        style="
+          position:absolute;
+          top:${layout.housing.rail.top}px;
+          right:${layout.housing.rail.right}px;
+          bottom:${layout.housing.rail.bottom}px;
+          left:${layout.housing.rail.left}px;
+          border-radius:${formatCornerRadii(layout.housing.glassRadius)};
+          background:#000000;
+          pointer-events:none;
+        "
+      ></div>
+      ${
+        layout.housing.hingeBarrel
+          ? `
+      <div
+        aria-hidden="true"
+        style="
+          position:absolute;
+          top:${layout.housing.hingeBarrel.endInset}px;
+          bottom:${layout.housing.hingeBarrel.endInset}px;
+          left:0;
+          width:${layout.housing.hingeBarrel.width}px;
+          border-radius:${layout.housing.hingeBarrel.width / 2}px 0 0 ${layout.housing.hingeBarrel.width / 2}px;
+          background:${HINGE_BARREL_BACKGROUND};
+          box-shadow:${HINGE_BARREL_SHADOW};
+          pointer-events:none;
+          z-index:11;
+        "
+      ></div>
+      `
+          : ''
+      }
+    `
+    : ''
+
   const legacyHomeButtonHtml = layout.legacyHomeButton
     ? `
       <div
@@ -331,7 +390,7 @@ function renderFrameHtml(
           left:${layout.logicalFrameLeft}px;
           width:${layout.logicalFrameWidth}px;
           height:${layout.logicalFrameHeight}px;
-            border-radius:${layout.logicalFrameRadius}px;
+            border-radius:${formatCornerRadii(layout.logicalFrameRadius)};
             box-sizing:border-box;
             overflow:visible;
             background:${layout.frameBackground};
@@ -340,6 +399,7 @@ function renderFrameHtml(
         >
           ${buttonsHtml}
           ${ringHtml}
+          ${housingHtml}
           ${legacyHomeButtonHtml}
           <div
             id="screen"
@@ -349,7 +409,7 @@ function renderFrameHtml(
               left:${layout.logicalScreenLeft - layout.logicalFrameLeft}px;
               width:${layout.logicalScreenWidth}px;
               height:${layout.logicalScreenHeight}px;
-              border-radius:${layout.logicalScreenRadius}px;
+              border-radius:${formatCornerRadii(layout.logicalScreenRadius)};
               overflow:hidden;
               background:#000;
             "