From 6f68a700cea3399fc7a3a161e2eee98cbc45b5ca Mon Sep 17 00:00:00 2001
From: Keyan <34140557+huumn@users.noreply.github.com>
Date: Tue, 3 Sep 2024 18:35:14 -0500
Subject: [PATCH] recognize video links (#1357)

---
 components/image.js        |  8 ++++++++
 components/text.module.css | 13 ++++++++-----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/components/image.js b/components/image.js
index 37ad0019..05860cb0 100644
--- a/components/image.js
+++ b/components/image.js
@@ -22,6 +22,7 @@ export function decodeOriginalUrl (imgproxyUrl) {
 function ImageOriginal ({ src, topLevel, rel, tab, children, onClick, ...props }) {
   const me = useMe()
   const [showImage, setShowImage] = useState(false)
+  const [showVideo, setShowVideo] = useState(false)
 
   useEffect(() => {
     if (me?.privates?.imgproxyOnly && tab !== 'preview') return
@@ -29,10 +30,15 @@ function ImageOriginal ({ src, topLevel, rel, tab, children, onClick, ...props }
     const img = new window.Image()
     img.onload = () => setShowImage(true)
     img.src = src
+    const video = document.createElement('video')
+    video.onloadeddata = () => setShowVideo(true)
+    video.src = src
 
     return () => {
       img.onload = null
       img.src = ''
+      video.onloadeddata = null
+      video.src = ''
     }
   }, [src, showImage])
 
@@ -45,6 +51,8 @@ function ImageOriginal ({ src, topLevel, rel, tab, children, onClick, ...props }
         onError={() => setShowImage(false)}
       />
     )
+  } else if (showVideo) {
+    return <video src={src} controls />
   } else {
     // user is not okay with loading original url automatically or there was an error loading the image
 
diff --git a/components/text.module.css b/components/text.module.css
index 8680b057..2fb1015b 100644
--- a/components/text.module.css
+++ b/components/text.module.css
@@ -128,21 +128,24 @@
     margin-bottom: .5rem;
 }
 
-.text img {
+.text img, .text video {
     display: block;
     margin-top: .5rem;
     margin-bottom: .5rem;
     max-width: 100%;
-    cursor: zoom-in;
     height: auto;
     max-height: 25vh;
-    object-fit: contain;
-    object-position: left top;
     min-width: 50%;
     aspect-ratio: var(--aspect-ratio);
 }
 
-.text img.topLevel {
+.text img {
+    cursor: zoom-in;
+    object-fit: contain;
+    object-position: left top;
+}
+
+.text img.topLevel, .text video.topLevel {
     margin-top: .75rem;
     margin-bottom: .75rem;
     max-height: 35vh;