From 6dc2084bc7c58eb5507d984aa7f41603dd1dd160 Mon Sep 17 00:00:00 2001
From: HF <pixelplanetdev@gmail.com>
Date: Thu, 10 Feb 2022 21:25:54 +0100
Subject: [PATCH] add odysee support and remove it cause no CORSE support

---
 src/components/embeds/Odysee.jsx | 66 ++++++++++++++++++++++++++++++++
 src/components/embeds/TikTok.jsx |  2 +-
 src/components/embeds/index.js   |  2 +
 src/styles/default.css           |  2 +-
 4 files changed, 70 insertions(+), 2 deletions(-)
 create mode 100644 src/components/embeds/Odysee.jsx

diff --git a/src/components/embeds/Odysee.jsx b/src/components/embeds/Odysee.jsx
new file mode 100644
index 0000000..c79314c
--- /dev/null
+++ b/src/components/embeds/Odysee.jsx
@@ -0,0 +1,66 @@
+/*
+ * Odysee oembed API does not allow CORS request,
+ * therefor we can't use it right now.
+ * Still keeping this here in case that the policy changes in the future
+ */
+import React, { useState, useEffect } from 'react';
+
+function getUserFromUrl(url) {
+  let aPos = url.indexOf('/@');
+  if (aPos === -1) {
+    return url;
+  }
+  aPos += 1;
+  let bPos = url.indexOf(':', aPos);
+  if (bPos === -1) {
+    bPos = url.length;
+  }
+  return url.substring(aPos, bPos);
+}
+
+const Odysee = ({ url }) => {
+  const [embedUrl, setEmbedUrl] = useState(null);
+
+  useEffect(async () => {
+    const prot = window.location.protocol.startsWith('http')
+      ? window.location.protocol : 'https';
+    // eslint-disable-next-line max-len
+    const odurl = `${prot}//odysee.com/$/oembed?url=${encodeURIComponent(url)}&format=json`;
+    const resp = await fetch(odurl);
+    const embedData = await resp.json();
+    if (embedData.html) {
+      const { html } = embedData;
+      let emUrl = html.substring(html.indexOf('src="') + 5);
+      emUrl = emUrl.substring(0, emUrl.indexOf('"'));
+      setEmbedUrl(emUrl);
+    }
+  }, []);
+
+  if (!embedUrl) {
+    return <div>LOADING</div>;
+  }
+
+  return (
+    <div className="vemb" style={{ paddingBottom: '56.25%' }}>
+      <iframe
+        className="vembc"
+        src={embedUrl}
+        frameBorder="0"
+        referrerPolicy="no-referrer"
+        allow="autoplay; picture-in-picture"
+        scrolling="no"
+        // eslint-disable-next-line max-len
+        sandbox="allow-scripts allow-modals allow-forms allow-popups allow-same-origin allow-presentation"
+        allowFullScreen
+        title="Embedded odysee"
+      />
+    </div>
+  );
+};
+
+export default [
+  React.memo(Odysee),
+  (url) => url.indexOf('a') !== -1 && url.indexOf('/', url.indexOf('@')) !== -1,
+  (url) => getUserFromUrl(url),
+  `${window.ssv.assetserver}/embico/odysee.png`,
+];
diff --git a/src/components/embeds/TikTok.jsx b/src/components/embeds/TikTok.jsx
index e0ea412..3fc447c 100644
--- a/src/components/embeds/TikTok.jsx
+++ b/src/components/embeds/TikTok.jsx
@@ -46,7 +46,7 @@ const TikTok = ({ url }) => {
       // eslint-disable-next-line max-len
       sandbox="allow-scripts allow-modals allow-forms allow-popups allow-same-origin allow-presentation"
       allowFullScreen
-      title="Embedded youtube"
+      title="Embedded tiktok"
     />
   );
 };
diff --git a/src/components/embeds/index.js b/src/components/embeds/index.js
index 2567e3c..d3424e7 100644
--- a/src/components/embeds/index.js
+++ b/src/components/embeds/index.js
@@ -5,6 +5,7 @@
 import TikTok from './TikTok';
 import YouTube from './YouTube';
 import Matrix from './Matrix';
+// import Odysee from './Odysee';
 import DirectLinkMedia from './DirectLinkMedia';
 
 /*
@@ -27,4 +28,5 @@ export default {
   'files.catbox.moe': DirectLinkMedia,
   'i.redd.it': DirectLinkMedia,
   'media.consumeproduct.win': DirectLinkMedia,
+  // 'odysee': Odysee,
 };
diff --git a/src/styles/default.css b/src/styles/default.css
index 05d414d..65fa32b 100644
--- a/src/styles/default.css
+++ b/src/styles/default.css
@@ -693,7 +693,7 @@ tr:nth-child(even) {
 .msg {
   color: #2d2d2d;
   padding-left: 15px;
-  overflow-y: auto;
+  overflow-y: clip;
   overflow-x: hidden;
 }
 .msg.info {