UI: Robust fix for iOS PWA play HUD - Ghosting logic and comprehensive media control suppression

src/components/UserHeader.tsx

@@ -135,6 +135,7 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
   const { isSupported, permission, requestPermission } = useNotifications(reminderSettings);
   const videoRef = useRef<HTMLVideoElement>(null);
   const [isVideoLoaded, setIsVideoLoaded] = useState(false);
+  const [isVideoPlaying, setIsVideoPlaying] = useState(false);
 
   // Force play background video
   useEffect(() => {
@@ -248,10 +249,19 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
         <div className="absolute inset-0 z-[-1] pointer-events-none overflow-hidden">
           <style dangerouslySetInnerHTML={{
             __html: `
+            /* Hide all native iOS media controls */
+            video::-webkit-media-controls {
+              display: none !important;
+              -webkit-appearance: none;
+            }
             video::-webkit-media-controls-start-playback-button {
               display: none !important;
               -webkit-appearance: none;
             }
+            video::-webkit-media-controls-panel {
+              display: none !important;
+              -webkit-appearance: none;
+            }
           ` }} />
 
           {/* Base Color & Blur Layer */}
@@ -279,11 +289,12 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
             onContextMenu={(e) => e.preventDefault()}
             poster="/videos/smoke-poster.jpg"
             onCanPlayThrough={() => setIsVideoLoaded(true)}
+            onPlay={() => setIsVideoPlaying(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
+              isVideoPlaying
                 ? "opacity-70 dark:opacity-50 blur-0"
-                : "opacity-40 dark:opacity-30 blur-sm"
+                : "opacity-0 blur-sm"
             )}
           >
             <source src="/videos/smoke.mp4" type="video/mp4" />