From cf74ca9f32e32f0907b0e43bc986dd6384825716 Mon Sep 17 00:00:00 2001
From: HF <pixelplanetdev@gmail.com>
Date: Sat, 2 Apr 2022 04:06:14 +0200
Subject: [PATCH] more embed changes for Telegram and Twitter

---
 public/embico/odysee.png           | Bin 0 -> 818 bytes
 public/embico/twitter.png          | Bin 0 -> 441 bytes
 src/components/embeds/Odysee.jsx   |  96 +++++++++++++++++++----------
 src/components/embeds/Telegram.jsx |  61 ++++++++----------
 src/components/embeds/Twitter.jsx  |  70 ++++++++++++++-------
 src/components/embeds/index.js     |   7 ++-
 src/core/utils.js                  |  11 ++++
 7 files changed, 154 insertions(+), 91 deletions(-)
 create mode 100644 public/embico/odysee.png
 create mode 100644 public/embico/twitter.png

diff --git a/public/embico/odysee.png b/public/embico/odysee.png
new file mode 100644
index 0000000000000000000000000000000000000000..148c21035cd7142d9019aa9f1c46caad98c526b1
GIT binary patch
literal 818
zcmV-21I_%2P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00006VoOIv05Jem
z0RJPkL#O}%010qNS#tmYE+YT{E+YYWr9XB6000McNliru<^%!^2QV|jV|xGq02y>e
zSad^gZEa<4bO1wgWnpw>WFU8GbZ8()Nlj2!fese{00NpxL_t(I%XO1mNK{c6g};3+
zGd829T^>f#l%Vn<x*}p16f!D89|9@55ZOTZG!F$)1U*#-mGmG*7YH$sBno^9k|feX
zB9gL#E|O&yrbnIejGi-R?;do<)Ld_S?Y-9j@5TQMX2A+YO2nG1u(^Lz8M>b9Hg%$2
zTi=1Fz|HLbx(@yaD-_AFLXn2(`35OR$CT6kRmC4ZQ%-k}vR0i?Rw$xIsxM1#DB9$H
z{E?N^X-P5g1YH~qg!c%q{|{q3t}$`Djl{=qnBk28_z#r|EjztRU$*$^aPjGklmSo=
z6yX<Wi!zZh8ziV#LtwiY#f69*Kjzw%0C)q|I@N2}0|+Y=DFL1X0!@(Fbq<lffOvB&
zT4oU6w)G$c(i+8B9s*$OS~Kp&b_HxPfG{8ckcvc4AHGe61P<(+k&%`e1i<Ndi(A{y
zl;)TLlmZac@txd?QINxYaJxQXAHEAJMU@%&wLIUMQv8)$(3fV<D^^Yd`_w(Ky?^OE
z;k@rrW?_Dc@qP{<OcQNs)*KV>=O1D<*HN8=NlI$Qie<k5RLsV{-9mKpMeO=Vpwt`#
zJ!c8Qt4F~UNvc<qzlK_!7jKCkslz$j3KNpVjW@XOzNUnUFMTM-1;8lC!8pDldDW&x
zi!apMd+#XOF)*WAqI=q4ys?#d!{gN1w|xUlMtM`4n(fBP9tHj@y9qp~Caq%Ibb!_v
z?)7$%lixB|=R=y-nB8C3VNAWL0aj`i`9%x%mCxuz4vpfqe1QpxjM``mg9xAbM&FuW
zLl5WxwXv7Zsf^+#M#gi^%Jpls^nk#VxSx87U%HR#8UzW6_-}>a9x<mXP_t{4)CB&6
w;j(ijdijd5_vCY_`Y@80OnYjbZ_Qrkzs70|AycIMfdBvi07*qoM6N<$f}H$kd;kCd

literal 0
HcmV?d00001

diff --git a/public/embico/twitter.png b/public/embico/twitter.png
new file mode 100644
index 0000000000000000000000000000000000000000..ad280c6988b31aa91b32b8591dcf4829cd6f2d01
GIT binary patch
literal 441
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbMf#sHrXS0K$d`2=t0UV(X61!iC3
z>pjRn^E^-M4uJ*N`KO=dpLUvW;!&QKZGsDL@J~JgM11{+fwB;if6_6aI1v5)`<Jip
z5dVyGydAp*W?uyA5}131Z{jiDuDw8Wc-nTn{q+6kuiww#eYyJR-L4Cd*Pnc_;PCzG
zO&~MvrX2bF?dOLtKi+@-e*fjC`!7Bmz42=0si!jzKFHa4d&Zud8EbF2FS#Z=<E-|K
z(@6_Xp8ma18R%&7k|4ie2A+FBaQE(obKPBCckkXgckb-j13ld}IoU^mN)~v!IEF}E
z&ON`K>5u`BYv7|VPWsb?mzO)e|L|YFEs0<9LGE{-OE1n(>0P>NR+_}N#T|0$o)T<~
z$#eXxBl-9C#;|DbwB0znHgNqS)+VXAP1E)kdA*b^VeFqHcm9SX$Au>Csn(1FjBBO@
zINxbL7@=(SIw_v1KKw?z|C`@xO=oWxxp%KR?Dw35@18KD!~K=*3w+wlo*KXNxz4Hh
e?9$<XH^q;M3ppKnw)+dvtqh*7elF{r5}E-04c8X{

literal 0
HcmV?d00001

diff --git a/src/components/embeds/Odysee.jsx b/src/components/embeds/Odysee.jsx
index c79314c3..de35a3a7 100644
--- a/src/components/embeds/Odysee.jsx
+++ b/src/components/embeds/Odysee.jsx
@@ -3,48 +3,39 @@
  * 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';
+import React from 'react';
 
-function getUserFromUrl(url) {
-  let aPos = url.indexOf('/@');
-  if (aPos === -1) {
-    return url;
+import { stripQuery } from '../../core/utils';
+
+function stripCol(str) {
+  const posCol = str.lastIndexOf(':');
+  if (posCol !== -1) {
+    return str.substring(0, posCol);
   }
-  aPos += 1;
-  let bPos = url.indexOf(':', aPos);
-  if (bPos === -1) {
-    bPos = url.length;
-  }
-  return url.substring(aPos, bPos);
+  return str;
 }
 
+const urlStr = '/@';
+
 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);
+  let oid = null;
+  let posA = url.indexOf(urlStr);
+  if (posA !== -1) {
+    oid = url.substring(url.indexOf('/', posA + urlStr.length) + 1);
+  } else {
+    posA = url.indexOf('//');
+    if (posA === -1) {
+      posA = 0;
     }
-  }, []);
-
-  if (!embedUrl) {
-    return <div>LOADING</div>;
+    oid = url.substring(url.indexOf('/', posA + 2) + 1);
   }
+  oid = stripCol(stripQuery(oid));
 
   return (
     <div className="vemb" style={{ paddingBottom: '56.25%' }}>
       <iframe
         className="vembc"
-        src={embedUrl}
+        src={`https://odysee.com/$/embed/${oid}`}
         frameBorder="0"
         referrerPolicy="no-referrer"
         allow="autoplay; picture-in-picture"
@@ -60,7 +51,48 @@ const Odysee = ({ url }) => {
 
 export default [
   React.memo(Odysee),
-  (url) => url.indexOf('a') !== -1 && url.indexOf('/', url.indexOf('@')) !== -1,
-  (url) => getUserFromUrl(url),
+  (url) => {
+    const urlPart = stripQuery(url);
+    let posA = urlPart.indexOf(urlStr);
+    if (posA !== -1) {
+      // https://odysee.com/@lotuseaters_com:1/disney%E2%80%99s-%E2%80%9Cgay-agenda%E2%80%9D:1
+      if (posA === -1 || posA + 4 >= urlPart.length) {
+        return false;
+      }
+      posA = urlPart.indexOf('/', posA + urlStr.length);
+      if (posA === -1 || posA + 2 >= urlPart.length) {
+        return false;
+      }
+      return true;
+    }
+    // https://odysee.com/why-we-were-wrong-about-ukraine:6bd300b38bf1b30fa56e53c191b0652682c2ae6f
+    posA = urlPart.indexOf('//');
+    if (posA === -1) {
+      posA = 0;
+    }
+    posA = urlPart.indexOf('/', posA + 2);
+    if (posA === -1 || posA + 2 >= urlPart.length) {
+      return false;
+    }
+    return true;
+  },
+  (url) => {
+    let urlPart = stripQuery(url);
+    let posA = urlPart.indexOf(urlStr);
+    if (posA !== -1) {
+      urlPart = urlPart.substring(posA + urlStr.length);
+      let name = urlPart.substring(0, urlPart.indexOf('/'));
+      urlPart = stripCol(urlPart.substring(name.length + 1));
+      name = stripCol(name);
+      return `${name} | ${urlPart}`;
+    }
+    posA = urlPart.indexOf('//');
+    if (posA === -1) {
+      posA = 0;
+    }
+    urlPart = urlPart.substring(urlPart.indexOf('/', posA + 2) + 1);
+    urlPart = stripCol(stripQuery(urlPart));
+    return urlPart;
+  },
   `${window.ssv.assetserver}/embico/odysee.png`,
 ];
diff --git a/src/components/embeds/Telegram.jsx b/src/components/embeds/Telegram.jsx
index 21d1e41d..28e65c1a 100644
--- a/src/components/embeds/Telegram.jsx
+++ b/src/components/embeds/Telegram.jsx
@@ -1,36 +1,10 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useRef } from 'react';
 
+import { stripQuery } from '../../core/utils';
 import usePostMessage from '../hooks/postMessage';
 
 const urlStr = 't.me/';
 
-function getUserPostFromUrl(url) {
-  let aPos = url.indexOf(urlStr);
-  if (aPos === -1) {
-    return url;
-  }
-  aPos += urlStr.length;
-  if (aPos >= url.length) {
-    return url;
-  }
-  let bPos = url.indexOf('/', aPos);
-  if (bPos === -1) {
-    bPos = url.length;
-    return url.substring(aPos);
-  }
-  const user = url.substring(aPos, bPos);
-  bPos += 1;
-  if (bPos >= url.length) {
-    return user;
-  }
-  aPos = url.indexOf('/', bPos);
-  if (aPos === -1) {
-    aPos = url.length;
-  }
-  const post = url.substring(bPos, aPos);
-  return `${user} | ${post}`;
-}
-
 const Telegram = ({ url }) => {
   const [frameHeight, setFrameHeight] = useState(200);
   const iFrameRef = useRef(null);
@@ -45,17 +19,19 @@ const Telegram = ({ url }) => {
           }
         }
       } catch {
+        // eslint-disable-next-line no-console
         console.error(`Could not read postMessage from frame: ${data}`);
       }
     },
   );
 
-  const userPost = url.substring(url.indexOf(urlStr) + urlStr.length)
-  const embedCode =
-    // eslint-disable-next-line max-len
-    `<script async src="https://telegram.org/js/telegram-widget.js?18" data-telegram-post="${userPost}" data-width="100%"></script>`;
+  let userPost = stripQuery(url);
+  userPost = userPost.substring(userPost.indexOf(urlStr) + urlStr.length);
+  const sslash = userPost.indexOf('/', userPost.indexOf('/') + 1);
+  if (sslash !== -1) {
+    userPost = userPost.substring(0, sslash);
+  }
 
-//      srcDoc={embedCode}
   return (
     <iframe
       ref={iFrameRef}
@@ -78,7 +54,22 @@ const Telegram = ({ url }) => {
 
 export default [
   React.memo(Telegram),
-  (url) => url.includes(urlStr),
-  (url) => getUserPostFromUrl(url),
+  (url) => {
+    // https://t.me/name/34
+    let statPos = url.indexOf(urlStr);
+    if (statPos === -1 || statPos + urlStr.length + 1 >= url.length) {
+      return false;
+    }
+    statPos = url.indexOf('/', statPos + urlStr.length + 1);
+    if (statPos === -1 || statPos + 2 >= url.length) {
+      return false;
+    }
+    return true;
+  },
+  (url) => {
+    let title = url.substring(url.indexOf(urlStr) + urlStr.length);
+    title = title.substring(0, title.indexOf('/'));
+    return title;
+  },
   `${window.ssv.assetserver}/embico/telegram.png`,
 ];
diff --git a/src/components/embeds/Twitter.jsx b/src/components/embeds/Twitter.jsx
index 90f8a684..ddb56051 100644
--- a/src/components/embeds/Twitter.jsx
+++ b/src/components/embeds/Twitter.jsx
@@ -1,46 +1,74 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
+
+import { stripQuery } from '../../core/utils';
+import usePostMessage from '../hooks/postMessage';
+
+const urlStr = '/status/';
 
 const Twitter = ({ url }) => {
-  const [embedCode, setEmbedCode] = useState(null);
+  const [frameHeight, setFrameHeight] = useState(200);
+  const iFrameRef = useRef(null);
 
-  useEffect(async () => {
-    const prot = window.location.protocol.startsWith('http')
-      ? window.location.protocol : 'https';
-    // eslint-disable-next-line max-len
-    const tkurl = `${prot}//publish.twitter.com/oembed?url=${encodeURIComponent(url)}`;
-    const resp = await fetch(tkurl);
-    const embedData = await resp.json();
-    if (embedData.html) {
-      setEmbedCode(embedData.html);
-    }
-  }, []);
+  usePostMessage(iFrameRef,
+    (data) => {
+      try {
+        if (data['twttr.embed']
+          && data['twttr.embed'].method === 'twttr.private.resize'
+          && data['twttr.embed'].params.length
+          && data['twttr.embed'].params[0].height
+        ) {
+          setFrameHeight(data['twttr.embed'].params[0].height);
+        }
+      } catch {
+        // eslint-disable-next-line no-console
+        console.error(`Could not read postMessage from frame: ${data}`);
+      }
+    },
+  );
 
-  if (!embedCode) {
-    return <div>LOADING</div>;
+
+  let tid = stripQuery(url);
+  tid = tid.substring(tid.indexOf(urlStr) + urlStr.length);
+  if (tid.indexOf('/') !== -1) {
+    tid = tid.substring(tid.indexOf('/'));
   }
 
   return (
     <iframe
+      ref={iFrameRef}
       style={{
         width: '100%',
-        height: 756,
+        height: frameHeight,
       }}
-      srcDoc={embedCode}
+      src={
+        // eslint-disable-next-line max-len
+        `https://platform.twitter.com/embed/Tweet.html?dnt=true&embedId=twitter-widget-&frame=false&hideCard=false&hideThread=true&id=${tid}&theme=light&width=550px`
+      }
       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"
+      // sandbox="allow-scripts allow-modals allow-forms allow-popups allow-same-origin allow-presentation"
       allowFullScreen
-      title="Embedded tiktok"
+      title="Embedded twitter"
     />
   );
 };
 
 export default [
   React.memo(Twitter),
-  (url) => url.includes('/status/'),
-  (url) => url,
+  (url) => {
+    const statPos = url.indexOf(urlStr);
+    if (statPos === -1 || statPos + urlStr.length + 1 >= url.length) {
+      return false;
+    }
+    return true;
+  },
+  (url) => {
+    let title = url.substring(0, url.indexOf(urlStr));
+    title = title.substring(title.lastIndexOf('/') + 1);
+    return title;
+  },
   `${window.ssv.assetserver}/embico/twitter.png`,
 ];
diff --git a/src/components/embeds/index.js b/src/components/embeds/index.js
index 0d4646d4..c22e90f4 100644
--- a/src/components/embeds/index.js
+++ b/src/components/embeds/index.js
@@ -8,7 +8,7 @@ import YouTube from './YouTube';
 import Matrix from './Matrix';
 import Telegram from './Telegram';
 import Twitter from './Twitter';
-// import Odysee from './Odysee';
+import Odysee from './Odysee';
 import DirectLinkMedia from './DirectLinkMedia';
 
 /*
@@ -34,6 +34,7 @@ export default {
   'i.redd.it': DirectLinkMedia,
   'media.consumeproduct.win': DirectLinkMedia,
   't.me': Telegram,
-  'twitter': Twitter,
-  // 'odysee': Odysee,
+  twitter: Twitter,
+  'nitter.net': Twitter,
+  odysee: Odysee,
 };
diff --git a/src/core/utils.js b/src/core/utils.js
index 8980edc5..7656ba06 100644
--- a/src/core/utils.js
+++ b/src/core/utils.js
@@ -388,6 +388,17 @@ export function getExt(link) {
   return link.slice(posDot, paramStart);
 }
 
+/*
+ * Split query part from link
+ * @param link url
+ * @return link without query
+ */
+export function stripQuery(link) {
+  let posAnd = link.indexOf('?');
+  if (posAnd === -1) posAnd = link.indexOf('#');
+  return (posAnd === -1) ? link : link.substring(0, posAnd);
+}
+
 /*
  * convert timestamp to human readable date/time string
  * @param timestamp Unix timestamp in seconds