UI: Final fix for 'stuck' video - add React force-play and re-encode for speed

src/components/UserHeader.tsx

@@ -27,7 +27,7 @@ import { Button } from '@/components/ui/button';
 import { User } from '@/lib/session';
 import { fetchPreferences, fetchReminderSettings, saveReminderSettings, ReminderSettings, UserPreferences } from '@/lib/storage';
 import { useNotifications } from '@/hooks/useNotifications';
-import { useEffect, useState } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { Cigarette, Leaf, LogOut, Home, ChevronDown, Sun, Moon, Bell, BellOff, BellRing, Menu, Sparkles, Link as LinkIcon } from 'lucide-react';
 import { useTheme } from '@/lib/theme-context';
@@ -133,6 +133,16 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
   const router = useRouter();
   const { theme, toggleTheme } = useTheme();
   const { isSupported, permission, requestPermission } = useNotifications(reminderSettings);
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  // Force play background video
+  useEffect(() => {
+    if (videoRef.current) {
+      videoRef.current.play().catch((err) => {
+        console.warn("Autoplay failed, user interaction might be needed:", err);
+      });
+    }
+  }, []);
 
   useEffect(() => {
     if (onModalStateChange) {
@@ -230,16 +240,17 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
         {/* Smoke Video Background */}
         <div className="absolute inset-0 z-[-1] overflow-hidden pointer-events-none">
           <video
+            ref={videoRef}
             autoPlay
             loop
             muted
             playsInline
-            className="absolute min-w-full min-h-full object-cover scale-110 opacity-60 dark:opacity-40 brightness-[0.9] dark:brightness-[0.7]"
+            className="absolute min-w-full min-h-full object-cover scale-110 opacity-70 dark:opacity-50 brightness-[1.0] dark:brightness-[0.8]"
           >
             <source src="/videos/smoke.mp4" type="video/mp4" />
           </video>
           {/* Subtle Dark Overlay for Text Readability */}
-          <div className="absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-black/20 dark:from-black/40 dark:to-black/40" />
+          <div className="absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-black/20 dark:from-black/40 dark:via-transparent dark:to-black/40" />
         </div>
 
         <div className="container mx-auto px-4 h-16 sm:h-20 flex items-center justify-between relative z-50">