averyfelts/Stop_smoking_website_ver2
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Hardware-aware video reveal with click-to-play bridge for iPhone XR

Browse Source
This commit is contained in:
Avery Felts 2026-01-31 19:59:43 -07:00
parent 3c3f803a1c
commit d166e92f8c
1 changed files with 55 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/UserHeader.tsx
View File

@ -287,6 +287,17 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
}} }}
/> />
{/* 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);
});
}
}}
>
{/* Static Poster Image Layer (Safe Fallback) */} {/* Static Poster Image Layer (Safe Fallback) */}
<img <img
src="/videos/smoke-poster.jpg" src="/videos/smoke-poster.jpg"
@ -316,15 +327,22 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
onContextMenu={(e) => e.preventDefault()} onContextMenu={(e) => e.preventDefault()}
onLoadedData={() => setIsVideoLoaded(true)} onLoadedData={() => setIsVideoLoaded(true)}
onPlay={() => setIsVideoPlaying(true)} onPlay={() => setIsVideoPlaying(true)}
onPlaying={() => setIsVideoPlaying(true)}
onTimeUpdate={() => {
if (!isVideoPlaying && videoRef.current && videoRef.current.currentTime > 0) {
setIsVideoPlaying(true);
}
}}
className={cn( className={cn(
"absolute inset-0 w-full h-full object-cover scale-110 transition-opacity duration-[1500ms] ease-in-out", "absolute inset-0 w-full h-full object-cover scale-110 transition-opacity duration-[1500ms] ease-in-out",
isVideoPlaying isVideoPlaying
? "opacity-70 dark:opacity-50" ? "opacity-70 dark:opacity-50"
: "opacity-0" : "opacity-[0.01]" // Keep very slightly visible so OS doesn't throttle it
)} )}
> >
<source src="/videos/smoke.mp4" type="video/mp4" /> <source src="/videos/smoke.mp4" type="video/mp4" />
</video> </video>
</div>
{/* Vignette/Readability Overlay - Reinforced for contrast */} {/* 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" /> <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" />