From 7bcbba4eb1fd3e63093400cd0e3927e88edfea8d Mon Sep 17 00:00:00 2001
From: Tom Boullay <tom@famille-boullay.fr>
Date: Wed, 3 Jun 2026 03:27:18 +0200
Subject: [PATCH] fix(ui): polish demo-flow overlays

- OutroVideoOverlay: stagger reveal so 'Next step :' appears immediately and
  'La ferme' fades in 500ms later, instead of both showing at once.
- MissionNotification: enforce 589/211 aspect-ratio + objectFit cover on the
  <video> branch so webm assets (square 2000x2000) render at the same place
  as the legacy PNG notifications instead of shifting the layout.
- HandTrackingTutorial: add a 5000ms fallback timeout that auto-dismisses
  the overlay if MediaPipe never reports a hand (camera blocked, mouse-only
  player), so the screen never stays stuck.
---
 src/components/ui/MissionNotification.tsx     |  9 ++++++
 src/components/ui/OutroVideoOverlay.tsx       | 31 ++++++++++++++++++-
 .../ui/tutorial/HandTrackingTutorial.tsx      | 16 ++++++++++
 3 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/MissionNotification.tsx b/src/components/ui/MissionNotification.tsx
index 7b64447..008df34 100644
--- a/src/components/ui/MissionNotification.tsx
+++ b/src/components/ui/MissionNotification.tsx
@@ -1,6 +1,11 @@
 import { MISSION_NOTIFICATION_IMAGE_PATHS } from "@/data/gameplay/missionNotifications";
 import type { RepairMissionId } from "@/types/gameplay/repairMission";
 
+// Reference aspect ratio of the original PNG mission notifications
+// (589 × 211). Webm assets are square (2000 × 2000), so without this hint the
+// <video> element renders at the wrong dimensions and shifts the layout.
+const NOTIFICATION_ASPECT_RATIO = "589 / 211";
+
 interface MissionNotificationProps {
   mission?: RepairMissionId;
   imagePath?: string;
@@ -26,6 +31,10 @@ export function MissionNotification({
         {isVideo ? (
           <video
             className="mission-notification__image"
+            style={{
+              aspectRatio: NOTIFICATION_ASPECT_RATIO,
+              objectFit: "cover",
+            }}
             src={src}
             aria-label="Nouvel objectif de mission"
             autoPlay
diff --git a/src/components/ui/OutroVideoOverlay.tsx b/src/components/ui/OutroVideoOverlay.tsx
index d2949ee..451dcea 100644
--- a/src/components/ui/OutroVideoOverlay.tsx
+++ b/src/components/ui/OutroVideoOverlay.tsx
@@ -6,6 +6,8 @@ const OUTRO_VIDEO_SRC = "/cinematics/outro.mp4";
 const TRANSITION_FADE_MS = 600;
 const TRANSITION_HOLD_MS = 2000;
 const TRANSITION_TEXT_FADE_MS = 500;
+// Delay between "Next step :" appearing and "La ferme" fading in.
+const TRANSITION_LAFERME_DELAY_MS = 500;
 
 const MUTED_CATEGORIES: readonly AudioCategory[] = ["music", "sfx", "dialogue"];
 
@@ -28,6 +30,7 @@ type Stage =
  */
 export function OutroVideoOverlay(): React.JSX.Element | null {
   const [stage, setStage] = useState<Stage>("hidden");
+  const [lafermeVisible, setLafermeVisible] = useState(false);
   const videoRef = useRef<HTMLVideoElement>(null);
   const savedVolumesRef = useRef<Partial<Record<AudioCategory, number>>>({});
 
@@ -74,6 +77,24 @@ export function OutroVideoOverlay(): React.JSX.Element | null {
     return undefined;
   }, [stage]);
 
+  // Stagger the second word ("La ferme") so it fades in after "Next step :"
+  // is already visible.
+  useEffect(() => {
+    if (stage === "showing-text") {
+      const timer = window.setTimeout(
+        () => setLafermeVisible(true),
+        TRANSITION_LAFERME_DELAY_MS,
+      );
+      return () => window.clearTimeout(timer);
+    }
+    if (stage === "hidden" || stage === "fading-in") {
+      // Reset the staged reveal so a re-triggered outro replays correctly.
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setLafermeVisible(false);
+    }
+    return undefined;
+  }, [stage]);
+
   // Mute all game audio while the video is showing; restore on cleanup so
   // a re-mounted page doesn't stay silent.
   useEffect(() => {
@@ -135,7 +156,15 @@ export function OutroVideoOverlay(): React.JSX.Element | null {
             transition: `opacity ${TRANSITION_TEXT_FADE_MS}ms ease-in`,
           }}
         >
-          Next step : La ferme
+          Next step :{" "}
+          <span
+            style={{
+              opacity: lafermeVisible ? 1 : 0,
+              transition: `opacity ${TRANSITION_TEXT_FADE_MS}ms ease-in`,
+            }}
+          >
+            La ferme
+          </span>
         </div>
       ) : null}
       {stage === "video" ? (
diff --git a/src/components/ui/tutorial/HandTrackingTutorial.tsx b/src/components/ui/tutorial/HandTrackingTutorial.tsx
index 03fbb26..d435dc8 100644
--- a/src/components/ui/tutorial/HandTrackingTutorial.tsx
+++ b/src/components/ui/tutorial/HandTrackingTutorial.tsx
@@ -14,6 +14,11 @@ const HAND_TUTORIAL_STEPS: ReadonlySet<MissionStep> = new Set([
   "inspected",
 ]);
 
+// Fallback: if hand detection never fires (camera blocked, MediaPipe failure,
+// player using mouse), the tutorial auto-dismisses after this delay so it
+// never blocks the screen indefinitely.
+const HAND_TUTORIAL_FALLBACK_TIMEOUT_MS = 5000;
+
 /**
  * First-time hand-tracking tutorial. Visible during the early ebike repair
  * steps until MediaPipe actually detects a hand on screen. Once dismissed it
@@ -39,6 +44,17 @@ export function HandTrackingTutorial(): React.JSX.Element | null {
     }
   }, [handsDetected, dismissed]);
 
+  // Fallback timeout: dismiss the tutorial even if no hand is ever detected,
+  // so the overlay never gets stuck on screen.
+  useEffect(() => {
+    if (!isInShowWindow || dismissed) return undefined;
+    const timer = window.setTimeout(
+      () => setDismissed(true),
+      HAND_TUTORIAL_FALLBACK_TIMEOUT_MS,
+    );
+    return () => window.clearTimeout(timer);
+  }, [isInShowWindow, dismissed]);
+
   if (!isInShowWindow || dismissed) return null;
 
   return (