From feaf502e440cc1305f0e5e5a5642389df1c6232c Mon Sep 17 00:00:00 2001
From: Tom Boullay <tom@famille-boullay.fr>
Date: Tue, 2 Jun 2026 09:40:18 +0200
Subject: [PATCH] feat: support webm mission notifications

---
 ...e.webm => ebike-mission-notification.webm} |  0
 ...me.webm => farm-mission-notification.webm} |  0
 ...e.webm => pylon-mission-notification.webm} |  0
 src/components/ui/MissionNotification.tsx     | 24 +++++++++++++++----
 src/data/gameplay/missionNotifications.ts     |  6 ++---
 5 files changed, 22 insertions(+), 8 deletions(-)
 rename public/assets/world/UI/{ebike.webm => ebike-mission-notification.webm} (100%)
 rename public/assets/world/UI/{laferme.webm => farm-mission-notification.webm} (100%)
 rename public/assets/world/UI/{centrale.webm => pylon-mission-notification.webm} (100%)

diff --git a/public/assets/world/UI/ebike.webm b/public/assets/world/UI/ebike-mission-notification.webm
similarity index 100%
rename from public/assets/world/UI/ebike.webm
rename to public/assets/world/UI/ebike-mission-notification.webm
diff --git a/public/assets/world/UI/laferme.webm b/public/assets/world/UI/farm-mission-notification.webm
similarity index 100%
rename from public/assets/world/UI/laferme.webm
rename to public/assets/world/UI/farm-mission-notification.webm
diff --git a/public/assets/world/UI/centrale.webm b/public/assets/world/UI/pylon-mission-notification.webm
similarity index 100%
rename from public/assets/world/UI/centrale.webm
rename to public/assets/world/UI/pylon-mission-notification.webm
diff --git a/src/components/ui/MissionNotification.tsx b/src/components/ui/MissionNotification.tsx
index 439ed9f..7b64447 100644
--- a/src/components/ui/MissionNotification.tsx
+++ b/src/components/ui/MissionNotification.tsx
@@ -14,6 +14,7 @@ export function MissionNotification({
 }: MissionNotificationProps): React.JSX.Element {
   const src =
     imagePath ?? (mission ? MISSION_NOTIFICATION_IMAGE_PATHS[mission] : "");
+  const isVideo = src.toLowerCase().endsWith(".webm");
 
   return (
     <div
@@ -22,11 +23,24 @@ export function MissionNotification({
     >
       <div className="mission-notification__glow" />
       <span className="mission-notification__image-wrap">
-        <img
-          className="mission-notification__image"
-          src={src}
-          alt="Nouvel objectif de mission"
-        />
+        {isVideo ? (
+          <video
+            className="mission-notification__image"
+            src={src}
+            aria-label="Nouvel objectif de mission"
+            autoPlay
+            loop
+            muted
+            playsInline
+            preload="auto"
+          />
+        ) : (
+          <img
+            className="mission-notification__image"
+            src={src}
+            alt="Nouvel objectif de mission"
+          />
+        )}
       </span>
     </div>
   );
diff --git a/src/data/gameplay/missionNotifications.ts b/src/data/gameplay/missionNotifications.ts
index 167a063..afbfbf0 100644
--- a/src/data/gameplay/missionNotifications.ts
+++ b/src/data/gameplay/missionNotifications.ts
@@ -5,7 +5,7 @@ export const INTRO_MISSION_NOTIFICATION_IMAGE_PATH =
 
 export const MISSION_NOTIFICATION_IMAGE_PATHS: Record<RepairMissionId, string> =
   {
-    ebike: "/assets/world/UI/ebike-mission-notification.png",
-    pylon: "/assets/world/UI/pylon-mission-notification.png",
-    farm: "/assets/world/UI/farm-mission-notification.png",
+    ebike: "/assets/world/UI/ebike-mission-notification.webm",
+    pylon: "/assets/world/UI/pylon-mission-notification.webm",
+    farm: "/assets/world/UI/farm-mission-notification.webm",
   };