From d166e92f8cf93edc79b91dc4cc8fa1cc4e6852d7 Mon Sep 17 00:00:00 2001
From: Avery Felts <averyfelts@Averys-MacBook-Air.local>
Date: Sat, 31 Jan 2026 19:59:43 -0700
Subject: [PATCH] UI: Hardware-aware video reveal with click-to-play bridge for
 iPhone XR

---
 src/components/UserHeader.tsx | 92 +++++++++++++++++++++--------------
 1 file changed, 55 insertions(+), 37 deletions(-)

diff --git a/src/components/UserHeader.tsx b/src/components/UserHeader.tsx
index b011968..b49d75a 100644
--- a/src/components/UserHeader.tsx
+++ b/src/components/UserHeader.tsx
@@ -287,44 +287,62 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
             }}
           />
 
-          {/* Static Poster Image Layer (Safe Fallback) */}
-          <img
-            src="/videos/smoke-poster.jpg"
-            alt=""
-            className={cn(
-              "absolute inset-0 w-full h-full object-cover scale-110 transition-opacity duration-1000",
-              isVideoPlaying ? "opacity-30" : "opacity-70 dark:opacity-50"
-            )}
-            aria-hidden="true"
-          />
-
-          {/* Smoke Video background - Only visible when MOVING */}
-          <video
-            ref={videoRef}
-            autoPlay
-            loop
-            muted
-            playsInline
-            {...({
-              "webkit-playsinline": "true",
-              "x-webkit-airplay": "deny",
-              "disableRemotePlayback": true
-            } as any)}
-            preload="auto"
-            controls={false}
-            disablePictureInPicture
-            onContextMenu={(e) => e.preventDefault()}
-            onLoadedData={() => setIsVideoLoaded(true)}
-            onPlay={() => setIsVideoPlaying(true)}
-            className={cn(
-              "absolute inset-0 w-full h-full object-cover scale-110 transition-opacity duration-[1500ms] ease-in-out",
-              isVideoPlaying
-                ? "opacity-70 dark:opacity-50"
-                : "opacity-0"
-            )}
+          {/* Wrapper for background image/video to allow click-to-play */}
+          <div
+            className="absolute inset-0 w-full h-full pointer-events-auto"
+            onClick={() => {
+              if (videoRef.current && videoRef.current.paused) {
+                videoRef.current.play().catch((err) => {
+                  console.warn("User interaction play failed:", err);
+                });
+              }
+            }}
           >
-            <source src="/videos/smoke.mp4" type="video/mp4" />
-          </video>
+            {/* Static Poster Image Layer (Safe Fallback) */}
+            <img
+              src="/videos/smoke-poster.jpg"
+              alt=""
+              className={cn(
+                "absolute inset-0 w-full h-full object-cover scale-110 transition-opacity duration-1000",
+                isVideoPlaying ? "opacity-30" : "opacity-70 dark:opacity-50"
+              )}
+              aria-hidden="true"
+            />
+
+            {/* Smoke Video background - Only visible when MOVING */}
+            <video
+              ref={videoRef}
+              autoPlay
+              loop
+              muted
+              playsInline
+              {...({
+                "webkit-playsinline": "true",
+                "x-webkit-airplay": "deny",
+                "disableRemotePlayback": true
+              } as any)}
+              preload="auto"
+              controls={false}
+              disablePictureInPicture
+              onContextMenu={(e) => e.preventDefault()}
+              onLoadedData={() => setIsVideoLoaded(true)}
+              onPlay={() => setIsVideoPlaying(true)}
+              onPlaying={() => setIsVideoPlaying(true)}
+              onTimeUpdate={() => {
+                if (!isVideoPlaying && videoRef.current && videoRef.current.currentTime > 0) {
+                  setIsVideoPlaying(true);
+                }
+              }}
+              className={cn(
+                "absolute inset-0 w-full h-full object-cover scale-110 transition-opacity duration-[1500ms] ease-in-out",
+                isVideoPlaying
+                  ? "opacity-70 dark:opacity-50"
+                  : "opacity-[0.01]" // Keep very slightly visible so OS doesn't throttle it
+              )}
+            >
+              <source src="/videos/smoke.mp4" type="video/mp4" />
+            </video>
+          </div>
 
           {/* Vignette/Readability Overlay - Reinforced for contrast */}
           <div className="absolute inset-0 bg-gradient-to-b from-black/30 via-transparent to-black/50 dark:from-black/60 dark:via-transparent dark:to-black/70 mix-blend-multiply" />