Add Mac screenshots, wrap permission hints, debug screen renderer

Author: danielehrhardt

Mac/Sources/App/AppModel.swift

@@ -246,6 +246,29 @@ final class AppModel: ObservableObject {
         defaults.set(try? JSONEncoder().encode(defaultOptions), forKey: "defaultOptions")
     }
 
+    #if DEBUG
+    func applyDemo() {
+        let display = DisplayInfo(pixelWidth: 2852, pixelHeight: 2006, scale: 3, pixelsPerInch: 460, maxRefreshRate: 120)
+        let duo = DeviceInfo(deviceID: "duo", name: "Daniel's iPhone Duo", model: "iPhone19,4", appVersion: "1.0.0", display: display)
+        let session = HostSession(deviceID: "duo", name: duo.name, options: SessionOptions(highRefreshRate: true), requestedByDevice: false, userInitiated: true)
+        session.applyDemo(device: duo, transport: .usb)
+        sessions = ["duo": session]
+        rows = [
+            DeviceRow(id: "duo", name: duo.name, model: "iPhone19,4", isAvailable: true, viaUSB: true, viaWiFi: true, isKnown: true),
+            DeviceRow(id: "ipad", name: "iPad Pro", model: "iPad16,3", isAvailable: true, viaUSB: false, viaWiFi: true, isKnown: false)
+        ]
+        screenRecordingGranted = true
+        accessibilityGranted = true
+    }
+
+    func applyEmptyDemo() {
+        sessions = [:]
+        rows = []
+        screenRecordingGranted = true
+        accessibilityGranted = false
+    }
+    #endif
+
     private func checkForUpdate() async {
         guard let url = URL(string: "https://api.github.com/repos/codextde/spanscreen/releases/latest"),
               let (data, _) = try? await URLSession.shared.data(from: url),

Mac/Sources/App/SpanscreenApp.swift

@@ -23,6 +23,13 @@ final class AppDelegate: NSObject, NSApplicationDelegate {
     private var welcomeWindow: NSWindow?
 
     func applicationDidFinishLaunching(_ notification: Notification) {
+        #if DEBUG
+        if let dir = UserDefaults.standard.string(forKey: "renderScreens") {
+            ScreenRenderer.renderAll(to: URL(fileURLWithPath: dir))
+            NSApp.terminate(nil)
+            return
+        }
+        #endif
         AppModel.shared.start()
         if !UserDefaults.standard.bool(forKey: "onboarded") {
             showWelcome()
@@ -53,3 +60,38 @@ final class AppDelegate: NSObject, NSApplicationDelegate {
         welcomeWindow = window
     }
 }
+
+#if DEBUG
+@MainActor
+enum ScreenRenderer {
+    static func renderAll(to dir: URL) {
+        try? FileManager.default.createDirectory(at: dir, withIntermediateDirectories: true)
+        let model = AppModel.shared
+        model.applyDemo()
+        render(MenuContentView().environmentObject(model), name: "mac-menu", to: dir)
+        model.applyEmptyDemo()
+        render(MenuContentView().environmentObject(model), name: "mac-menu-empty", to: dir)
+        render(OnboardingView {}.environmentObject(model), name: "mac-welcome", to: dir)
+    }
+
+    private static func render<V: View>(_ view: V, name: String, to dir: URL) {
+        for (suffix, appearance) in [("dark", NSAppearance.Name.darkAqua), ("light", .aqua)] {
+            let host = NSHostingView(rootView: view.padding(0))
+            host.appearance = NSAppearance(named: appearance)
+            let size = host.fittingSize
+            let window = NSWindow(contentRect: NSRect(origin: .zero, size: size), styleMask: [.borderless], backing: .buffered, defer: false)
+            window.appearance = NSAppearance(named: appearance)
+            window.backgroundColor = appearance == .darkAqua ? NSColor(white: 0.13, alpha: 1) : NSColor(white: 0.97, alpha: 1)
+            window.contentView = host
+            host.frame = NSRect(origin: .zero, size: size)
+            host.layoutSubtreeIfNeeded()
+            RunLoop.current.run(until: Date().addingTimeInterval(0.4))
+            guard let rep = host.bitmapImageRepForCachingDisplay(in: host.bounds) else { continue }
+            host.cacheDisplay(in: host.bounds, to: rep)
+            if let data = rep.representation(using: .png, properties: [:]) {
+                try? data.write(to: dir.appendingPathComponent("\(name)-\(suffix).png"))
+            }
+        }
+    }
+}
+#endif

Mac/Sources/Session/HostSession.swift

@@ -495,6 +495,18 @@ final class HostSession: ObservableObject, Identifiable {
     }
 }
 
+#if DEBUG
+extension HostSession {
+    func applyDemo(device: DeviceInfo, transport: TransportKind) {
+        self.device = device
+        transportKind = transport
+        phase = .streaming
+        position = .right
+        stats = StreamStats(latencyMilliseconds: 7, bitrate: 28_000_000, framesPerSecond: 120)
+    }
+}
+#endif
+
 final class StatsBox: @unchecked Sendable {
     private let lock = NSLock()
     private var stats = StreamStats()

Mac/Sources/UI/MenuContentView.swift

@@ -131,6 +131,7 @@ struct PermissionRow: View {
             VStack(alignment: .leading, spacing: 1) {
                 Text(title).font(.system(size: 12, weight: .semibold))
                 Text(detail).font(.system(size: 11)).foregroundStyle(.secondary)
+                    .fixedSize(horizontal: false, vertical: true)
             }
             Spacer()
             if !granted {

README.md

@@ -15,6 +15,14 @@
   <a href="https://codextde.github.io/spanscreen/">Website</a>
 </p>
 
+<p align="center">
+  <img src="design/appstore/framed/en-US-pm-1.png" width="720" alt="Spanscreen on iPhone showing an extended Mac desktop">
+</p>
+
+<p align="center">
+  <img src="design/screens/mac-menu.png" width="340" alt="Spanscreen menu bar app on the Mac">
+</p>
+
 ---
 
 ## Features

design/appstore/frame.html

@@ -0,0 +1,18 @@
+<!doctype html><html><head><meta charset="utf-8"><style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{width:100vw;height:100vh;overflow:hidden;background:#090c14;font-family:-apple-system,"SF Pro Display",system-ui,sans-serif;color:#fff;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;align-items:center}
+.glow{position:absolute;inset:0;background:radial-gradient(55% 60% at 20% 0%,rgba(46,107,255,.45),transparent 70%),radial-gradient(45% 55% at 95% 100%,rgba(91,230,207,.22),transparent 70%)}
+h1{position:relative;font-weight:750;letter-spacing:-.03em;text-align:center;line-height:1.05}
+h1 span{background:linear-gradient(90deg,#5b8cff,#3ba0ff 55%,#5be6cf);-webkit-background-clip:text;background-clip:text;color:transparent}
+.device{position:relative;background:#1a1d24;box-shadow:0 40px 120px rgba(0,0,0,.6),inset 0 0 0 2px rgba(255,255,255,.12)}
+.device img{display:block;width:100%;height:100%;object-fit:cover}
+</style></head><body><div class="glow"></div><h1 id="t"></h1><div class="device" id="d"><img id="i"></div>
+<script>
+const q=new URLSearchParams(location.search);const W=innerWidth,H=innerHeight;const ipad=q.get('kind')==='ipad';
+const t=document.getElementById('t');t.innerHTML=q.get('title');
+const head=ipad?H*.17:H*.22;t.style.fontSize=(ipad?H*.052:H*.075)+'px';t.style.marginTop=(ipad?H*.055:H*.06)+'px';
+const sw=+q.get('sw'),sh=+q.get('sh');const availH=H-head-(ipad?H*.06:H*.07),availW=W*(ipad?.86:.84);
+let s=Math.min(availW/sw,availH/sh);const w=sw*s,h=sh*s;const bez=ipad?H*.018:H*.022;
+const d=document.getElementById('d');d.style.width=(w+bez*2)+'px';d.style.height=(h+bez*2)+'px';d.style.padding=bez+'px';d.style.marginTop=(ipad?H*.035:H*.04)+'px';
+d.style.borderRadius=(ipad?H*.045:H*.11)+'px';const img=document.getElementById('i');img.style.borderRadius=(ipad?H*.03:H*.085)+'px';img.src=q.get('src');
+</script></body></html>

design/appstore/frame.mjs

@@ -0,0 +1,21 @@
+import { chromium } from '/Users/danielehrhardt/node_modules/playwright-core/index.mjs';
+const exe = process.env.HOME + '/Library/Caches/ms-playwright/chromium_headless_shell-1243/chrome-headless-shell-mac-arm64/chrome-headless-shell';
+const titles = {
+  'en-US': ['Your iPhone, now a <span>second Mac display</span>', 'Extend or mirror. <span>Wi-Fi or USB.</span>', 'Connects in <span>seconds</span>', 'Only the Macs <span>you allow</span>'],
+  'de-DE': ['Dein iPhone als <span>zweiter Mac-Bildschirm</span>', 'Erweitern oder spiegeln. <span>WLAN oder USB.</span>', 'In Sekunden <span>verbunden</span>', 'Nur Macs, die <span>du erlaubst</span>'],
+};
+const sets = { pm: { w: 2868, h: 1320, files: ['pm-1-stream', 'pm-2-panel', 'pm-3-home', 'pm-4-approval'] }, ipad: { w: 2752, h: 2064, files: ['ipad-1-stream', 'ipad-2-panel', 'ipad-3-home', 'ipad-4-approval'] } };
+const b = await chromium.launch({ executablePath: exe });
+for (const [kind, set] of Object.entries(sets)) {
+  const p = await b.newPage({ viewport: { width: set.w / 2, height: set.h / 2 }, deviceScaleFactor: 2 });
+  for (const [locale, list] of Object.entries(titles)) {
+    for (let i = 0; i < set.files.length; i++) {
+      const src = `file://${process.cwd()}/${set.files[i]}.png`;
+      const title = kind === 'ipad' ? list[i].replace('iPhone', 'iPad') : list[i];
+      const url = `file://${process.cwd()}/frame.html?kind=${kind}&sw=${set.w}&sh=${set.h}&src=${encodeURIComponent(src)}&title=${encodeURIComponent(title)}`;
+      await p.goto(url); await p.waitForTimeout(250);
+      await p.screenshot({ path: `framed/${locale}-${kind}-${i + 1}.png` });
+    }
+  }
+}
+await b.close();