From 6f5454e8dd79083772671e91f4b1a3204aa031ec Mon Sep 17 00:00:00 2001
From: "prompt.ac/@jeffrey" <mail@aesthetic.computer>
Date: Fri, 24 Apr 2026 13:38:34 -0700
Subject: [PATCH] cap: portrait-native camera stream + drawn mic glyph +
 outlined button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- bios: stop swapping getUserMedia width/height to force a landscape
  request on mobile portrait. Modern iOS Safari and Android Chrome
  already auto-rotate the stream to match device orientation; forcing
  landscape was what made iPhone caps record sideways (90° right).
  The process() rotation fallback stays, with the rotation direction
  now picked per facing mode so desktop/front webcams and Android
  rear cams both land upright if the browser ever hands us raw
  landscape pixels.
- cap: replace the 🎤 / ⏳ / ✓ emoji row in the top-left with a small
  drawn mic glyph and pixel status indicator. The default typeface
  has no emoji glyphs, so those characters were rendering as "??".
- cap-ui: CaptureButton gets a two-tone outline (dark rim + crisp
  white ring) and a subtle highlight inside the red fill for a
  cleaner button look.
---
 system/public/aesthetic.computer/bios.mjs     | 63 ++++++++++++-------
 .../public/aesthetic.computer/disks/cap.mjs   | 34 ++++++++--
 .../disks/common/cap-ui.mjs                   | 22 ++++---
 3 files changed, 82 insertions(+), 37 deletions(-)

diff --git a/system/public/aesthetic.computer/bios.mjs b/system/public/aesthetic.computer/bios.mjs
index 9f1ddc5658..ba809e6c69 100644
--- a/system/public/aesthetic.computer/bios.mjs
+++ b/system/public/aesthetic.computer/bios.mjs
@@ -19862,7 +19862,7 @@ async function boot(parsed, bpm = 60, resolution, debug) {
         async function getDevice(facingModeChoice) {
           // Use local copies so we don't mutate the outer cWidth/cHeight
           // across repeated calls (camera swap, resize, etc.).
-          let reqWidth = cWidth,
+          const reqWidth = cWidth,
             reqHeight = cHeight;
 
           const constraints = {
@@ -19870,25 +19870,16 @@ async function boot(parsed, bpm = 60, resolution, debug) {
             frameRate: { ideal: 30 },
           };
 
-          // Swap width/height on mobile in portrait — camera sensors are
-          // natively landscape, so request landscape constraints.
-          if (
-            (iOS || Android) &&
-            window.matchMedia("(orientation: portrait)").matches &&
-            (facingModeChoice === "environment" || facingModeChoice === "user")
-          ) {
-            const temp = reqWidth;
-            reqWidth = reqHeight;
-            reqHeight = temp;
-          }
-
-          // Calculate target aspect ratio AFTER the swap so it matches
-          // the width/height we actually request.
-          const targetAR = reqWidth / reqHeight;
-
+          // Ask for what we actually want. On mobile portrait, iOS Safari
+          // and modern Android Chrome already present the stream oriented
+          // to match the device (auto-rotated for the <video> element and
+          // drawImage()), so we do NOT swap width/height to force a
+          // landscape request. If the browser gives us a landscape stream
+          // anyway, the detection path in process() will rotate it to fit.
           constraints.width = { ideal: reqWidth };
           constraints.height = { ideal: reqHeight };
 
+          const targetAR = reqWidth / reqHeight;
           if (targetAR > 0 && isFinite(targetAR)) {
             constraints.aspectRatio = { ideal: targetAR };
           }
@@ -20109,14 +20100,28 @@ async function boot(parsed, bpm = 60, resolution, debug) {
         // 💡 For GPU backed visuals. 23.04.29.20.47
 
         // Detect orientation mismatch (landscape video in portrait buffer or vice versa).
-        // Mobile sensors always return landscape pixels; in portrait mode we rotate -90° CCW.
+        // On modern iOS Safari and Android Chrome the camera stream is already
+        // rotated to match the device orientation, so this path rarely fires —
+        // but desktop webcams and some older browsers still hand us the raw
+        // sensor buffer (landscape) and need a manual rotation to fit a
+        // portrait buffer.
         const videoIsLandscape = video.videoWidth > video.videoHeight;
         const bufferIsPortrait = buffer.height > buffer.width;
         const needsRotation =
           video.videoWidth > 0 &&
           video.videoHeight > 0 &&
           videoIsLandscape === bufferIsPortrait;
+        // Mirror the front camera for selfie framing. Desktop webcams are
+        // conventionally mirrored too. Mobile rear camera stays unmirrored.
         const needsMirror = facingMode === "user" || (!iOS && !Android);
+        // Rotation direction for sensor→buffer orientation mismatch.
+        // Front cameras are mounted mirrored relative to rear cameras, so the
+        // rotation that lands the subject upright is opposite: front = +90° CW,
+        // rear = -90° CCW. Desktop webcams behave like front cameras.
+        const rotationAngle =
+          facingMode === "user" || (!iOS && !Android)
+            ? Math.PI / 2
+            : -Math.PI / 2;
 
         // Send frames by default (non-rotation path only).
         if (!needsRotation && needsMirror) {
@@ -20152,8 +20157,10 @@ async function boot(parsed, bpm = 60, resolution, debug) {
 
         // Drawing a video frame to the buffer (mirrored, proportion adjusted).
         if (needsRotation) {
-          // Landscape sensor pixels in portrait buffer: rotate 90° CW so the
-          // video fills the portrait frame. Use the swapped AR for fit calculation.
+          // Landscape sensor pixels in portrait buffer: rotate ±90° so the
+          // video fills the portrait frame. After rotation the effective
+          // video width/height are swapped, so fit calculation uses the
+          // swapped aspect ratio.
           const rotatedVideoAR = video.videoHeight / video.videoWidth;
           const bufferAR = buffer.width / buffer.height;
           let outWidth, outHeight;
@@ -20181,9 +20188,19 @@ async function boot(parsed, bpm = 60, resolution, debug) {
 
           bufferCtx.save();
           bufferCtx.translate(outX + outWidth / 2, outY + outHeight / 2);
-          bufferCtx.rotate(Math.PI / 2); // CW: landscape sensor → portrait buffer
-          if (needsMirror) bufferCtx.scale(1, -1); // Horizontal flip in portrait space
-          bufferCtx.drawImage(video, -outHeight / 2, -outWidth / 2, outHeight, outWidth);
+          bufferCtx.rotate(rotationAngle);
+          // Mirror correction. In the rotated frame, horizontal flip in
+          // original (buffer) space is scale(1, -1) for CW rotation and
+          // scale(1, 1) (no-op) for CCW — the CCW case already lands the
+          // subject in the right handedness after rotation for rear cams.
+          if (needsMirror) bufferCtx.scale(1, -1);
+          bufferCtx.drawImage(
+            video,
+            -outHeight / 2,
+            -outWidth / 2,
+            outHeight,
+            outWidth,
+          );
           bufferCtx.restore();
         } else {
           const videoAR = video.videoWidth / video.videoHeight;
diff --git a/system/public/aesthetic.computer/disks/cap.mjs b/system/public/aesthetic.computer/disks/cap.mjs
index 7e429286b9..8bd037ee8c 100644
--- a/system/public/aesthetic.computer/disks/cap.mjs
+++ b/system/public/aesthetic.computer/disks/cap.mjs
@@ -160,12 +160,25 @@ function paint({
       }
     }
     
-    // Mic connection status indicator (top left)
-    if (!micConnected && !isRecording) {
-      const micIcon = pendingRecordStart ? "🎤⏳" : "🎤";
-      $.ink(255, 200, 80).write(micIcon, { x: 4, y: 4 });
-    } else if (micConnected && !isRecording) {
-      $.ink(80, 255, 120).write("🎤✓", { x: 4, y: 4 });
+    // Mic connection status indicator (top left) — drawn as a small pixel
+    // mic icon instead of the 🎤 emoji, which the default typeface can't
+    // render and falls back to "??" glyphs.
+    if (!isRecording) {
+      const iconX = 4;
+      const iconY = 4;
+      let iconColor;
+      if (!micConnected) {
+        iconColor = pendingRecordStart ? [255, 180, 60] : [255, 200, 80];
+      } else {
+        iconColor = [80, 255, 120];
+      }
+      drawMicIcon($, iconX, iconY, iconColor);
+      // Small status dot next to the mic: ✓ when connected, ⏳ when pending.
+      if (micConnected) {
+        $.ink(80, 255, 120).box(iconX + 10, iconY + 3, 2, 2);
+      } else if (pendingRecordStart) {
+        $.ink(255, 180, 60).box(iconX + 10, iconY + 1, 1, 6);
+      }
     }
 
     // Hint text (positioned ABOVE the button, not below)
@@ -427,6 +440,15 @@ function leave({ rec, jump }) {
   }
 }
 
+// Tiny mic glyph: capsule + stand. Roughly 8x9 pixels at origin (x, y).
+function drawMicIcon($, x, y, color) {
+  $.ink(...color);
+  $.box(x + 2, y, 4, 5); // mic capsule
+  $.box(x + 1, y + 5, 6, 1); // under-capsule lip
+  $.box(x + 4, y + 6, 2, 2); // stem
+  $.box(x + 2, y + 8, 6, 1); // base
+}
+
 export { boot, paint, sim, act, beat, leave };
 
 // No nopaint system - cap records the screen directly via tape infrastructure
diff --git a/system/public/aesthetic.computer/disks/common/cap-ui.mjs b/system/public/aesthetic.computer/disks/common/cap-ui.mjs
index 52736227d8..34c587d5f0 100644
--- a/system/public/aesthetic.computer/disks/common/cap-ui.mjs
+++ b/system/public/aesthetic.computer/disks/common/cap-ui.mjs
@@ -109,9 +109,13 @@ export class CaptureButton {
   paint({ ink, screen }, frameCount = 0) {
     const { x, y, radius, type, down, recording, disabled } = this;
 
-    // Outer ring
-    const ringColor = disabled ? [60, 60, 60] : [255, 255, 255];
-    ink(...ringColor).circle(x, y, radius + 4, false, 2);
+    // Outer ring — a thin dark shadow line, then a crisp white outline.
+    // Two concentric circles give the button a proper stroked outline
+    // with depth, instead of one flat ring.
+    const outlineOuter = disabled ? [0, 0, 0, 120] : [0, 0, 0, 180];
+    const outlineInner = disabled ? [80, 80, 80] : [255, 255, 255];
+    ink(...outlineOuter).circle(x, y, radius + 5, false, 1);
+    ink(...outlineInner).circle(x, y, radius + 3, false, 2);
 
     if (type === "snap") {
       // Snap button - white circle with camera icon feel
@@ -120,7 +124,7 @@ export class CaptureButton {
       // Inner detail
       ink(200, 200, 200).circle(x, y, radius - 8, false, 1);
     } else {
-      // Cap button - red circle that becomes square when recording
+      // Cap button - red filled circle that becomes a square when recording
       if (recording) {
         // Pulsing red square when recording (properly centered)
         this.pulsePhase += 0.1;
@@ -134,12 +138,14 @@ export class CaptureButton {
           squareSize,
           squareSize,
         );
-        // Recording indicator ring
+        // Extra red recording ring between square and outline
         ink(255, 60, 60).circle(x, y, radius, false, 2);
       } else {
-        // Red circle when not recording
-        const fillColor = down ? [180, 40, 40] : [255, 60, 60];
-        ink(...fillColor).circle(x, y, radius - 4, true);
+        // Red filled circle with a subtle darker rim for a "button" feel.
+        const fillColor = down ? [180, 40, 40] : [245, 60, 60];
+        ink(...fillColor).circle(x, y, radius - 3, true);
+        // Highlight arc on the upper-left for a touch of depth.
+        ink(255, 255, 255, 70).circle(x, y, radius - 4, false, 1);
       }
     }
 
-- 
2.51.2