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

UI: Critical fix for PWA/Safari video playback - programmatic initialization and 30fps optimization

Browse Source
This commit is contained in:
Avery Felts 2026-01-31 19:39:39 -07:00
parent 485f7a1e32
commit 5795fd0468
3 changed files with 8 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/videos/smoke-poster.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
public/videos/smoke.mp4
View File

Binary file not shown.

8
src/components/UserHeader.tsx
View File

@ -139,6 +139,12 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
// Force play background video // Force play background video
useEffect(() => { useEffect(() => {
if (videoRef.current) { if (videoRef.current) {
// Programmatic attributes for iOS Safari / PWA compatibility
videoRef.current.muted = true;
videoRef.current.defaultMuted = true;
videoRef.current.playsInline = true;
videoRef.current.loop = true;
// If already ready, set loaded immediately // If already ready, set loaded immediately
if (videoRef.current.readyState >= 3) { if (videoRef.current.readyState >= 3) {
setIsVideoLoaded(true); setIsVideoLoaded(true);
@ -258,6 +264,8 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
muted muted
playsInline playsInline
preload="auto" preload="auto"
controls={false}
onContextMenu={(e) => e.preventDefault()}
poster="/videos/smoke-poster.jpg" poster="/videos/smoke-poster.jpg"
onCanPlayThrough={() => setIsVideoLoaded(true)} onCanPlayThrough={() => setIsVideoLoaded(true)}
className={cn( className={cn(