feat: support webm mission notifications

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>
   );

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",
   };