more embed changes for Telegram and Twitter

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`,
 ];

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`,
 ];

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`,
 ];

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,
 };

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