From d20543d7a3dc6ca3cfa04f261d1a82ab5aff7f3d Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Wed, 6 Dec 2023 16:53:52 +0200
Subject: [PATCH] spotlight videos

---
 .../app/src/Element/Embed/MediaElement.tsx    |  1 +
 .../src/Element/Spotlight/SpotlightMedia.tsx  | 27 ++++++++++++++++++-
 .../Spotlight/SpotlightThreadModal.tsx        |  4 ++-
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/Element/Embed/MediaElement.tsx b/packages/app/src/Element/Embed/MediaElement.tsx
index 011a57d8..a2e18fa7 100644
--- a/packages/app/src/Element/Embed/MediaElement.tsx
+++ b/packages/app/src/Element/Embed/MediaElement.tsx
@@ -30,6 +30,7 @@ export function MediaElement(props: MediaElementProps) {
       <div className="-mx-4 md:mx-0 my-3 md:h-80 flex items-center justify-center">
         <video
           autoPlay={autoplay}
+          loop={true}
           muted={autoplay}
           key={props.url}
           src={props.url}
diff --git a/packages/app/src/Element/Spotlight/SpotlightMedia.tsx b/packages/app/src/Element/Spotlight/SpotlightMedia.tsx
index 567b4d78..968e95e3 100644
--- a/packages/app/src/Element/Spotlight/SpotlightMedia.tsx
+++ b/packages/app/src/Element/Spotlight/SpotlightMedia.tsx
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from "react";
 import Modal from "@/Element/Modal";
 import Icon from "@/Icons/Icon";
 import { ProxyImg } from "@/Element/ProxyImg";
+import useImgProxy from "@/Hooks/useImgProxy";
 
 interface SpotlightMediaProps {
   images: Array<string>;
@@ -9,7 +10,10 @@ interface SpotlightMediaProps {
   onClose: () => void;
 }
 
+const videoSuffixes = ["mp4", "webm", "ogg", "mov", "avi", "mkv"];
+
 export function SpotlightMedia(props: SpotlightMediaProps) {
+  const { proxy } = useImgProxy();
   const [idx, setIdx] = useState(props.idx);
 
   const image = useMemo(() => {
@@ -58,9 +62,30 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
     });
   }
 
+  const isVideo = useMemo(() => {
+    return image && videoSuffixes.some(suffix => image.endsWith(suffix));
+  }, [image]);
+
+  const mediaEl = useMemo(() => {
+    if (image && isVideo) {
+      return (
+        <video
+          src={image}
+          poster={proxy(image)}
+          autoPlay={true}
+          loop={true}
+          controls={true}
+          className="max-h-screen max-w-full"
+        />
+      );
+    } else {
+      return <ProxyImg src={image} className="max-h-screen max-w-full" />;
+    }
+  }, [image, isVideo]);
+
   return (
     <>
-      <ProxyImg src={image} className="max-h-screen max-w-full" />
+      {mediaEl}
       <div className="select-none absolute flex flex-row items-center gap-4 cursor-pointer left-0 top-0 p-4">
         <Icon name="x-close" size={24} onClick={props.onClose} />
         {props.images.length > 1 && `${idx + 1}/${props.images.length}`}
diff --git a/packages/app/src/Element/Spotlight/SpotlightThreadModal.tsx b/packages/app/src/Element/Spotlight/SpotlightThreadModal.tsx
index 41baedc1..f0c7aa70 100644
--- a/packages/app/src/Element/Spotlight/SpotlightThreadModal.tsx
+++ b/packages/app/src/Element/Spotlight/SpotlightThreadModal.tsx
@@ -30,7 +30,9 @@ function SpotlightFromThread({ onClose }: { onClose: () => void }) {
   const thread = useContext(ThreadContext);
 
   const parsed = thread.root ? transformTextCached(thread.root.id, thread.root.content, thread.root.tags) : [];
-  const images = parsed.filter(a => a.type === "media" && a.mimeType?.startsWith("image/"));
+  const images = parsed.filter(
+    a => a.type === "media" && (a.mimeType?.startsWith("image/") || a.mimeType?.startsWith("video/")),
+  );
   if (images.length === 0) return;
   return <SpotlightMedia images={images.map(a => a.content)} idx={0} onClose={onClose} />;
 }