feat: add video backgrounds for the nova hero (#1453)

* feat: add video backgrounds for the nova hero

* fix: add missing playsInline for iOS :)

client/src/app/components/Hero.scss

@@ -22,11 +22,20 @@
         pointer-events: none;
         z-index: -1;
 
-        .bg-image {
+        video {
+            position: absolute;
+            top: 0;
+            left: 0;
             width: auto;
-            max-width: 100%;
             height: 100%;
+            max-width: 100%;
             object-fit: cover;
+            opacity: 1;
+            transition: opacity 300ms;
+        }
+
+        video.bg--hidden {
+            opacity: 0;
         }
     }
 

client/src/app/components/Hero.tsx

@@ -14,13 +14,22 @@ interface IHero {
 }
 
 export default function Hero({ network, subtitle, overline, networkStats, assetStats }: IHero): React.JSX.Element {
-    const theme = useGetThemeMode();
-
-    const backgroundImage = HERO_BACKGROUNDS[theme];
+    const activeTheme = useGetThemeMode();
     return (
         <div id="hero">
             <div className="bg-container">
-                <img src={backgroundImage} className="bg-image" alt="background" />
+                {Object.entries(HERO_BACKGROUNDS).map(([theme, backgroundUrl]) => (
+                    <video
+                        key={backgroundUrl}
+                        autoPlay
+                        playsInline
+                        loop
+                        muted
+                        className={activeTheme === theme ? "bg--active" : "bg--hidden"}
+                    >
+                        <source src={backgroundUrl} type="video/mp4" />
+                    </video>
+                ))}
             </div>
             <div className="wrapper">
                 <div className="inner">

client/src/app/lib/constants/backgrounds.constants.ts

@@ -1,8 +1,9 @@
-import HeroTestnetLight from "~/assets/background/hero-testnet-light.png";
-import HeroTestnetDark from "~/assets/background/hero-testnet-dark.png";
 import { ThemeMode } from "../enums";
 
+const LIGHTMODE_BACKGROUND_URL = "https://files.iota.org/media/explorer_hero_nova_light.mp4";
+const DARKMODE_BACKGROUND_URL = "https://files.iota.org/media/explorer_hero_nova_dark.mp4";
+
 export const HERO_BACKGROUNDS: Record<ThemeMode, string> = {
-    [ThemeMode.Light]: HeroTestnetLight,
-    [ThemeMode.Dark]: HeroTestnetDark,
+    [ThemeMode.Light]: LIGHTMODE_BACKGROUND_URL,
+    [ThemeMode.Dark]: DARKMODE_BACKGROUND_URL,
 };