From e0eae9606a8c57e873d6041939b52837a7a4f7e2 Mon Sep 17 00:00:00 2001
From: ayes-web <ayes2022@protonmail.com>
Date: Thu, 17 Nov 2022 02:41:58 +0200
Subject: [PATCH] Added basic url previews

---
 src/app/molecules/media/Media.jsx  | 86 +++++++++++++++++++++++-------
 src/app/molecules/media/Media.scss | 11 ++++
 2 files changed, 78 insertions(+), 19 deletions(-)

diff --git a/src/app/molecules/media/Media.jsx b/src/app/molecules/media/Media.jsx
index 9490e6c7..a9482470 100644
--- a/src/app/molecules/media/Media.jsx
+++ b/src/app/molecules/media/Media.jsx
@@ -416,31 +416,79 @@ function Embed({ link }) {
     return <YoutubeEmbed link={link} />;
   }
 
-  // TODO: url preview
-  // const [urlPreviewInfo, setUrlPreviewInfo] = useState(null);
-  // const mx = initMatrix.matrixClient;
+  const [urlPreviewInfo, setUrlPreviewInfo] = useState({});
+  const mx = initMatrix.matrixClient;
 
-  // useEffect(() => {
-  //   let unmounted = false;
+  useEffect(() => {
+    let unmounted = false;
 
-  //   async function getThumbnail() {
-  //     const info = await mx.getUrlPreview(link, 0);
-  //     console.log('DEBUG', info);
-  //     if (unmounted) return;
+    async function getUrlPreview() {
+      const info = await mx.getUrlPreview(link, 0);
+      if (unmounted) return;
+      setUrlPreviewInfo(info);
+    }
 
-  //     setUrlPreviewInfo(info);
-  //   }
+    getUrlPreview();
 
-  //   getThumbnail();
+    return () => {
+      unmounted = true;
+    };
+  });
 
-  //   return () => {
-  //     unmounted = true;
-  //   };
-  // });
+  if (urlPreviewInfo !== undefined) {
+    // Image only embed
+    if (urlPreviewInfo['og:image'] != null && urlPreviewInfo['og:image:width'] != null && urlPreviewInfo['og:image:height'] != null && urlPreviewInfo['og:title'] == null && urlPreviewInfo['og:description'] == null) {
+      return (
+        <div className="file-container">
+          <Image
+            link={mx.mxcUrlToHttp(urlPreviewInfo['og:image'])}
+            height={urlPreviewInfo['og:image:height']}
+            width={urlPreviewInfo['og:image:width']}
+            name={urlPreviewInfo['og:image:alt'] || urlPreviewInfo['og:title'] || urlPreviewInfo['og:site_name'] || ''}
+            type={urlPreviewInfo['og:image:type']}
+          />
+        </div>
+      );
+    }
 
-  // if (urlPreviewInfo !== null) {
-  //   return <div>url preview here!/div>;
-  // }
+    let embedTitle;
+
+    if (urlPreviewInfo['og:site_name'] != null && urlPreviewInfo['og:title'] != null) {
+      embedTitle = `${urlPreviewInfo['og:site_name']} - ${urlPreviewInfo['og:title']}`;
+    } else {
+      embedTitle = urlPreviewInfo['og:title'] || urlPreviewInfo['og:site_name'];
+    }
+
+    return (
+      <div className="file-container">
+        <div className="embed-container">
+          <div className="embed-text">
+            {(embedTitle != null) && (
+              <Text className="embed-title" variant="h2">
+                {embedTitle}
+              </Text>
+            )}
+
+            {(urlPreviewInfo['og:description'] != null) && (
+              <Text className="embed-description" variant="b3">
+                {urlPreviewInfo['og:description']}
+              </Text>
+            )}
+          </div>
+
+          {urlPreviewInfo['og:image'] != null && urlPreviewInfo['og:image:width'] != null && urlPreviewInfo['og:image:height'] != null && (
+            <Image
+              link={mx.mxcUrlToHttp(urlPreviewInfo['og:image'])}
+              height={urlPreviewInfo['og:image:height']}
+              width={urlPreviewInfo['og:image:width']}
+              name={urlPreviewInfo['og:image:alt'] || urlPreviewInfo['og:title'] || urlPreviewInfo['og:site_name'] || ''}
+              type={urlPreviewInfo['og:image:type']}
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
 
   return null;
 }
diff --git a/src/app/molecules/media/Media.scss b/src/app/molecules/media/Media.scss
index 8d98c428..4bd1d894 100644
--- a/src/app/molecules/media/Media.scss
+++ b/src/app/molecules/media/Media.scss
@@ -88,3 +88,14 @@
     width: 100%;
   }
 }
+
+.embed-container {
+  color: var(--tc-surface-low);
+  background-color: var(--bg-surface-hover);
+  border-radius: calc(var(--bo-radius) / 2);
+  padding: 15px;
+
+  .embed-text {
+    margin-bottom: 5px;
+  }
+}
\ No newline at end of file