Lazy loaded video component (#254)

* Trying new VideoComponent

* Remove mouse check

* Increased rootMargin

frontend/src/components/VideoComponent.tsx

@@ -0,0 +1,73 @@
+
+import { CSSProperties, useEffect, useRef } from "react";
+import { useIsVisible } from "../lib/useIsVisible";
+
+
+type VideoComponentProps = {
+  src: string;
+  poster?: string;
+  alt?: string;
+  style?: CSSProperties;
+};
+export const VideoComponent = ({
+  src,
+  poster,
+  style,
+  alt,
+}: VideoComponentProps) => {
+  const { isVisible, targetRef } = useIsVisible(
+    {
+      root: null,
+      rootMargin: "500px",
+      threshold: 0.1,
+    },
+    false,
+  );
+
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    const handleVideoPlayback = async () => {
+      if (isVisible) {
+        await videoRef.current?.play();
+      } else {
+        videoRef.current?.pause();
+      }
+    };
+
+    handleVideoPlayback();
+  }, [isVisible]);
+
+  return (
+    <span
+      ref={targetRef as any}
+      style={{
+        position: "relative",
+        minHeight: "50px",
+        height: "100%",
+      }}
+    >
+      <video
+        ref={videoRef}
+        loop
+        muted
+        autoPlay={false}
+        preload="none"
+        playsInline
+        poster={poster}
+        aria-label={alt}
+        style={{
+          objectFit: "contain",
+          display: "block",
+          width: "100%",
+          height: "100%",
+          ...style,
+        }}
+      >
+        <source src={src} type="video/mp4" />
+        Your browser does not support the video tag. Please try viewing this
+        page in a modern browser.
+      </video>
+    </span>
+  );
+};

frontend/src/components/cards/MemeCard.tsx

@@ -4,6 +4,7 @@ import { MemeType } from "../../lib/types";
 import { BaseCard } from "./BaseCard";
 import { SlackReaction } from "../SlackReaction";
 import { Badge } from "../Badge";
+import { VideoComponent } from "../VideoComponent";
 
 const WIDTH = 500;
 const MAX_RETRIES = 10;
@@ -68,23 +69,7 @@ export const MemeCard = ({ meme }: { meme: MemeType }) => {
         </div>
       ) : meme.type === "video" ? (
         <div className="relative">
-          {isLoading && (
-            <div className="absolute inset-0 flex items-center justify-center animate-pulse dark:text-white">
-              <span>Gjør deg klar for smuud meme...</span>
-            </div>
-          )}
-          <video
-            className="bg-white dark:bg-gray-800 dark:text-white"
-            src={meme.url}
-            style={{ width: `${WIDTH}px` }}
-            autoPlay
-            muted
-            loop
-            onError={handleMediaError}
-            onCanPlay={() => setIsLoading(false)}
-          >
-            Ooops, denne nettleseren støtter ikke video :(
-          </video>
+          <VideoComponent src={meme.url} style={{ width: `${WIDTH}px` }} />
         </div>
       ) : null}
       {meme.reactions.length > 0 && (

frontend/src/lib/useIsVisible.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useRef, useState } from "react";
+
+interface IntersectionObserverOptions {
+  root?: Element | null;
+  rootMargin?: string;
+  threshold?: number | number[];
+}
+
+export const useIsVisible = (
+  options?: IntersectionObserverOptions,
+  once = false,
+) => {
+  const optionsRef = useRef(options);
+  const [isVisible, setIsVisible] = useState(false);
+  const targetRef = useRef<Element | null>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setIsVisible(() => true);
+          if (once) {
+            observer.unobserve(entry.target);
+            observer.disconnect();
+          }
+        } else {
+          setIsVisible(() => false);
+        }
+      });
+    }, optionsRef.current);
+
+    if (targetRef.current) {
+      observer.observe(targetRef.current);
+    }
+
+    return () => {
+      if (targetRef.current) {
+        observer.unobserve(targetRef.current);
+      }
+      observer.disconnect(); // Clean up the IntersectionObserver
+    };
+  }, [once]);
+
+  return { isVisible, targetRef };
+};