Stop theme-irrelevant videos from loading

Author: pimterry

src/components/elements/video-player/index.tsx

@@ -1,3 +1,10 @@
+'use client';
+
+import * as React from "react";
+import { useTheme } from "next-themes";
+
+import { useMounted } from '@/lib/hooks/use-mounted';
+
 import { StyledIframe } from "./video-player.styles";
 
 const urlOptions = new URLSearchParams({
@@ -14,23 +21,47 @@ export const VideoPlayer = (props: {
     lightId: string,
     aspectRatio: string
 }) => {
+    const { isMounted } = useMounted();
+    const { resolvedTheme: theme } = useTheme();
+
     const darkUrl = `https://iframe.mediadelivery.net/embed/${props.libraryId}/${props.darkId}?${urlOptions}`;
     const lightUrl = `https://iframe.mediadelivery.net/embed/${props.libraryId}/${props.lightId}?${urlOptions}`;
 
+    const darkVisibility = isMounted
+        ? theme === 'dark'
+        : undefined;
+    const lightVisibility = isMounted
+        ? theme === 'light'
+        : undefined;
+
     return <>
-        <StyledIframe
-            src={lightUrl}
-            data-hide-on-theme="dark"
-            aspectRatio={props.aspectRatio}
-            allow="autoplay;picture-in-picture;"
-            allowFullScreen={true}
-        />
-        <StyledIframe
-            src={darkUrl}
-            data-hide-on-theme="light"
-            aspectRatio={props.aspectRatio}
-            allow="autoplay;picture-in-picture;"
-            allowFullScreen={true}
-        />
+        { (!isMounted || theme === 'dark') &&
+            <StyledIframe
+                src={darkUrl}
+
+                loading="lazy"
+                // Hide if wrong theme
+                data-hide-on-theme="light"
+                $visible={darkVisibility}
+
+                $aspectRatio={props.aspectRatio}
+                allow="autoplay;picture-in-picture;"
+                allowFullScreen={true}
+            />
+        }
+        { (!isMounted || theme === 'light') &&
+            <StyledIframe
+                src={lightUrl}
+
+                loading="lazy"
+                // Hide if wrong theme
+                data-hide-on-theme="dark"
+                $visible={lightVisibility}
+
+                $aspectRatio={props.aspectRatio}
+                allow="autoplay;picture-in-picture;"
+                allowFullScreen={true}
+            />
+        }
     </>;
 };

src/components/elements/video-player/video-player.styles.ts

@@ -3,9 +3,29 @@
 import { styled } from '@/styles';
 
 export const StyledIframe = styled.iframe<{
-    aspectRatio: string
+    $aspectRatio: string,
+    $visible: boolean | undefined
 }>`
     width: 100%;
-    aspect-ratio: ${props => props.aspectRatio};
+    aspect-ratio: ${props => props.$aspectRatio};
     border: none;
+
+    ${p => p.$visible === undefined &&
+    // During SSR, we render both and use CSS only to show the right default
+    `
+        @media (prefers-color-scheme: dark) {
+            &[data-hide-on-theme="dark"] { display: none; }
+        }
+
+        @media (prefers-color-scheme: light) {
+            &[data-hide-on-theme="light"] { display: none; }
+        }
+    `}
+
+    ${p => p.$visible === false &&
+    // Once rendering is active, we render only the right one, but then we also
+    // make it hidden until the content is actually ready.
+    `
+        visibility: hidden;
+    `}
 `;