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

UI: Final fix for video delay - aggressive keyframes, poster frame, and smooth fade-in

Browse Source
This commit is contained in:
Avery Felts 2026-01-31 19:34:47 -07:00
parent 60ca78b9d8
commit 485f7a1e32
3 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
public/videos/smoke.mp4
View File

Binary file not shown.

16
src/components/UserHeader.tsx
View File

@ -134,10 +134,16 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
const { theme, toggleTheme } = useTheme();
const { isSupported, permission, requestPermission } = useNotifications(reminderSettings);
const videoRef = useRef<HTMLVideoElement>(null);
const [isVideoLoaded, setIsVideoLoaded] = useState(false);
// Force play background video
useEffect(() => {
if (videoRef.current) {
// If already ready, set loaded immediately
if (videoRef.current.readyState >= 3) {
setIsVideoLoaded(true);
}
videoRef.current.play().catch((err) => {
console.warn("Autoplay failed, user interaction might be needed:", err);
});
@ -251,7 +257,15 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
loop
muted
playsInline
className="absolute inset-0 w-full h-full object-cover scale-110 opacity-70 dark:opacity-50 brightness-[1.1] dark:brightness-[0.85] transition-opacity duration-1000"
preload="auto"
poster="/videos/smoke-poster.jpg"
onCanPlayThrough={() => setIsVideoLoaded(true)}
className={cn(
"absolute inset-0 w-full h-full object-cover scale-110 brightness-[1.1] dark:brightness-[0.85] transition-all duration-[2000ms] ease-in-out",
isVideoLoaded
? "opacity-70 dark:opacity-50 blur-0"
: "opacity-40 dark:opacity-30 blur-sm"
)}
>
<source src="/videos/smoke.mp4" type="video/mp4" />
</video>