From 3aad0ead73201c6b9126b7d6ac063f43833558b4 Mon Sep 17 00:00:00 2001
From: HF <pixelplanetdev@gmail.com>
Date: Sat, 2 Apr 2022 03:34:57 +0200
Subject: [PATCH] add Twitter embed

---
 src/components/embeds/Twitter.jsx |  46 +++
 src/components/embeds/index.js    |   2 +
 src/components/telegram-widget.js | 528 ------------------------------
 3 files changed, 48 insertions(+), 528 deletions(-)
 create mode 100644 src/components/embeds/Twitter.jsx
 delete mode 100644 src/components/telegram-widget.js

diff --git a/src/components/embeds/Twitter.jsx b/src/components/embeds/Twitter.jsx
new file mode 100644
index 00000000..90f8a684
--- /dev/null
+++ b/src/components/embeds/Twitter.jsx
@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+
+const Twitter = ({ url }) => {
+  const [embedCode, setEmbedCode] = useState(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);
+    }
+  }, []);
+
+  if (!embedCode) {
+    return <div>LOADING</div>;
+  }
+
+  return (
+    <iframe
+      style={{
+        width: '100%',
+        height: 756,
+      }}
+      srcDoc={embedCode}
+      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 tiktok"
+    />
+  );
+};
+
+export default [
+  React.memo(Twitter),
+  (url) => url.includes('/status/'),
+  (url) => url,
+  `${window.ssv.assetserver}/embico/twitter.png`,
+];
diff --git a/src/components/embeds/index.js b/src/components/embeds/index.js
index 846ab4cc..0d4646d4 100644
--- a/src/components/embeds/index.js
+++ b/src/components/embeds/index.js
@@ -7,6 +7,7 @@ import TikTok from './TikTok';
 import YouTube from './YouTube';
 import Matrix from './Matrix';
 import Telegram from './Telegram';
+import Twitter from './Twitter';
 // import Odysee from './Odysee';
 import DirectLinkMedia from './DirectLinkMedia';
 
@@ -33,5 +34,6 @@ export default {
   'i.redd.it': DirectLinkMedia,
   'media.consumeproduct.win': DirectLinkMedia,
   't.me': Telegram,
+  'twitter': Twitter,
   // 'odysee': Odysee,
 };
diff --git a/src/components/telegram-widget.js b/src/components/telegram-widget.js
deleted file mode 100644
index 6d930252..00000000
--- a/src/components/telegram-widget.js
+++ /dev/null
@@ -1,528 +0,0 @@
-(function(window) {
-  (function(window){
-    window.__parseFunction = function(__func, __attrs) {
-      __attrs = __attrs || [];
-      __func = '(function(' + __attrs.join(',') + '){' + __func + '})';
-      return window.execScript ? window.execScript(__func) : eval(__func);
-    }
-  }(window));
-  (function(window){
-
-  function addEvent(el, event, handler) {
-    var events = event.split(/\s+/);
-    for (var i = 0; i < events.length; i++) {
-      if (el.addEventListener) {
-        el.addEventListener(events[i], handler);
-      } else {
-        el.attachEvent('on' + events[i], handler);
-      }
-    }
-  }
-  function removeEvent(el, event, handler) {
-    var events = event.split(/\s+/);
-    for (var i = 0; i < events.length; i++) {
-      if (el.removeEventListener) {
-        el.removeEventListener(events[i], handler);
-      } else {
-        el.detachEvent('on' + events[i], handler);
-      }
-    }
-  }
-  function getCssProperty(el, prop) {
-    if (window.getComputedStyle) {
-      return window.getComputedStyle(el, '').getPropertyValue(prop) || null;
-    } else if (el.currentStyle) {
-      return el.currentStyle[prop] || null;
-    }
-    return null;
-  }
-  function geById(el_or_id) {
-    if (typeof el_or_id == 'string' || el_or_id instanceof String) {
-      return document.getElementById(el_or_id);
-    } else if (el_or_id instanceof HTMLElement) {
-      return el_or_id;
-    }
-    return null;
-  }
-
-  var getWidgetsOrigin = function(default_origin, dev_origin) {
-    var link = document.createElement('A'), origin;
-    link.href = document.currentScript && document.currentScript.src || default_origin;
-    origin = link.origin || link.protocol + '//' + link.hostname;
-    if (origin == 'https://telegram.org') {
-      origin = default_origin;
-    } else if (origin == 'https://telegram-js.azureedge.net' || origin == 'https://tg.dev') {
-      origin = dev_origin;
-    }
-    return origin;
-  };
-
-  var getPageCanonical = function() {
-    var a = document.createElement('A'), link, href;
-    if (document.querySelector) {
-      link = document.querySelector('link[rel="canonical"]');
-      if (link && (href = link.getAttribute('href'))) {
-        a.href = href;
-        return a.href;
-      }
-    } else {
-      var links = document.getElementsByTagName('LINK');
-      for (var i = 0; i < links.length; i++) {
-        if ((link = links[i]) &&
-            (link.getAttribute('rel') == 'canonical') &&
-            (href = link.getAttribute('href'))) {
-          a.href = href;
-          return a.href;
-        }
-      }
-    }
-    return false;
-  };
-
-  function getXHR() {
-    if (navigator.appName == "Microsoft Internet Explorer"){
-      return new ActiveXObject("Microsoft.XMLHTTP");
-    } else {
-      return new XMLHttpRequest();
-    }
-  }
-
-  if (!window.Telegram) {
-    window.Telegram = {};
-  }
-  if (!window.Telegram.__WidgetUuid) {
-    window.Telegram.__WidgetUuid = 0;
-  }
-  if (!window.Telegram.__WidgetLastId) {
-    window.Telegram.__WidgetLastId = 0;
-  }
-  if (!window.Telegram.__WidgetCallbacks) {
-    window.Telegram.__WidgetCallbacks = {};
-  }
-
-  function postMessageToIframe(iframe, event, data, callback) {
-    if (!iframe._ready) {
-      if (!iframe._readyQueue) iframe._readyQueue = [];
-      iframe._readyQueue.push([event, data, callback]);
-      return;
-    }
-    try {
-      data = data || {};
-      data.event = event;
-      if (callback) {
-        data._cb = ++window.Telegram.__WidgetLastId;
-        window.Telegram.__WidgetCallbacks[data._cb] = {
-          iframe: iframe,
-          callback: callback
-        };
-      }
-      iframe.contentWindow.postMessage(JSON.stringify(data), '*');
-    } catch(e) {}
-  }
-
-  function initWidget(widgetEl) {
-    var widgetId, widgetElId, widgetsOrigin, existsEl,
-        src, styles = {}, allowedAttrs = [],
-        defWidth, defHeight, scrollable = false, onInitAuthUser, onAuthUser, onUnauth;
-    if (!widgetEl.tagName ||
-        !(widgetEl.tagName.toUpperCase() == 'SCRIPT' ||
-          widgetEl.tagName.toUpperCase() == 'BLOCKQUOTE' &&
-          widgetEl.classList.contains('telegram-post'))) {
-      return null;
-    }
-    if (widgetEl._iframe) {
-      return widgetEl._iframe;
-    }
-    if (widgetId = widgetEl.getAttribute('data-telegram-post')) {
-      var comment = widgetEl.getAttribute('data-comment') || '';
-      widgetsOrigin = getWidgetsOrigin('https://t.me', 'https://post.tg.dev');
-      widgetElId = 'telegram-post-' + widgetId.replace(/[^a-z0-9_]/ig, '-') + (comment ? '-comment' + comment : '');
-      src = widgetsOrigin + '/' + widgetId + '?embed=1';
-      allowedAttrs = ['comment', 'userpic', 'tme_mode?', 'single?', 'color', 'dark', 'dark_color'];
-      defWidth = widgetEl.getAttribute('data-width') || '100%';
-      defHeight = '';
-      styles.minWidth = '320px';
-    }
-    else if (widgetId = widgetEl.getAttribute('data-telegram-discussion')) {
-      widgetsOrigin = getWidgetsOrigin('https://t.me', 'https://post.tg.dev');
-      widgetElId = 'telegram-discussion-' + widgetId.replace(/[^a-z0-9_]/ig, '-') + '-' + (++window.Telegram.__WidgetUuid);
-      var websitePageUrl = widgetEl.getAttribute('data-page-url');
-      if (!websitePageUrl) {
-        websitePageUrl = getPageCanonical();
-      }
-      src = widgetsOrigin + '/' + widgetId + '?embed=1&discussion=1' + (websitePageUrl ? '&page_url=' + encodeURIComponent(websitePageUrl) : '');
-      allowedAttrs = ['comments_limit', 'color', 'colorful', 'dark', 'dark_color', 'width', 'height'];
-      defWidth = widgetEl.getAttribute('data-width') || '100%';
-      defHeight = widgetEl.getAttribute('data-height') || 0;
-      styles.minWidth = '320px';
-      if (defHeight > 0) {
-        scrollable = true;
-      }
-    }
-    else if (widgetEl.hasAttribute('data-telegram-login')) {
-      widgetId = widgetEl.getAttribute('data-telegram-login');
-      widgetsOrigin = getWidgetsOrigin('https://oauth.telegram.org', 'https://oauth.tg.dev');
-      widgetElId = 'telegram-login-' + widgetId.replace(/[^a-z0-9_]/ig, '-');
-      src = widgetsOrigin + '/embed/' + widgetId + '?origin=' + encodeURIComponent(location.origin || location.protocol + '//' + location.hostname);
-      allowedAttrs = ['size', 'userpic', 'init_auth', 'request_access', 'radius', 'min_width', 'max_width', 'lang'];
-      defWidth = 186;
-      defHeight = 28;
-      if (widgetEl.hasAttribute('data-size')) {
-        var size = widgetEl.getAttribute('data-size');
-        if (size == 'small') defWidth = 148, defHeight = 20;
-        else if (size == 'large') defWidth = 238, defHeight = 40;
-      }
-      if (widgetEl.hasAttribute('data-onauth')) {
-        onInitAuthUser = onAuthUser = __parseFunction(widgetEl.getAttribute('data-onauth'), ['user']);
-      }
-      else if (widgetEl.hasAttribute('data-auth-url')) {
-        var a = document.createElement('A');
-        a.href = widgetEl.getAttribute('data-auth-url');
-        onAuthUser = function(user) {
-          var authUrl = a.href;
-          authUrl += (authUrl.indexOf('?') >= 0) ? '&' : '?';
-          var params = [];
-          for (var key in user) {
-            params.push(key + '=' + encodeURIComponent(user[key]));
-          }
-          authUrl += params.join('&');
-          location.href = authUrl;
-        };
-      }
-      if (widgetEl.hasAttribute('data-onunauth')) {
-        onUnauth = __parseFunction(widgetEl.getAttribute('data-onunauth'));
-      }
-    }
-    else if (widgetId = widgetEl.getAttribute('data-telegram-share-url')) {
-      widgetsOrigin = getWidgetsOrigin('https://t.me', 'https://post.tg.dev');
-      widgetElId = 'telegram-share-' + window.btoa(widgetId);
-      src = widgetsOrigin + '/share/embed?origin=' + encodeURIComponent(location.origin || location.protocol + '//' + location.hostname);
-      allowedAttrs = ['telegram-share-url', 'comment', 'size', 'text'];
-      defWidth = 60;
-      defHeight = 20;
-      if (widgetEl.getAttribute('data-size') == 'large') {
-        defWidth = 76;
-        defHeight = 28;
-      }
-    }
-    else {
-      return null;
-    }
-    existsEl = document.getElementById(widgetElId);
-    if (existsEl) {
-      return existsEl;
-    }
-    for (var i = 0; i < allowedAttrs.length; i++) {
-      var attr = allowedAttrs[i];
-      var novalue = attr.substr(-1) == '?';
-      if (novalue) {
-        attr = attr.slice(0, -1);
-      }
-      var data_attr = 'data-' + attr.replace(/_/g, '-');
-      if (widgetEl.hasAttribute(data_attr)) {
-        var attr_value = novalue ? '1' : encodeURIComponent(widgetEl.getAttribute(data_attr));
-        src += '&' + attr + '=' + attr_value;
-      }
-    }
-    function getCurCoords(iframe) {
-      var docEl = document.documentElement;
-      var frect = iframe.getBoundingClientRect();
-      return {
-        frameTop: frect.top,
-        frameBottom: frect.bottom,
-        frameLeft: frect.left,
-        frameRight: frect.right,
-        frameWidth: frect.width,
-        frameHeight: frect.height,
-        scrollTop: window.pageYOffset,
-        scrollLeft: window.pageXOffset,
-        clientWidth: docEl.clientWidth,
-        clientHeight: docEl.clientHeight
-      };
-    }
-    function visibilityHandler() {
-      if (isVisible(iframe, 50)) {
-        postMessageToIframe(iframe, 'visible', {frame: widgetElId});
-      }
-    }
-    function focusHandler() {
-      postMessageToIframe(iframe, 'focus', {has_focus: document.hasFocus()});
-    }
-    function postMessageHandler(event) {
-      if (event.source !== iframe.contentWindow ||
-          event.origin != widgetsOrigin) {
-        return;
-      }
-      try {
-        var data = JSON.parse(event.data);
-      } catch(e) {
-        var data = {};
-      }
-      if (data.event == 'resize') {
-        if (data.height) {
-          iframe.style.height = data.height + 'px';
-        }
-        if (data.width) {
-          iframe.style.width = data.width + 'px';
-        }
-      }
-      else if (data.event == 'ready') {
-        iframe._ready = true;
-        focusHandler();
-        for (var i = 0; i < iframe._readyQueue.length; i++) {
-          var queue_item = iframe._readyQueue[i];
-          postMessageToIframe(iframe, queue_item[0], queue_item[1], queue_item[2]);
-        }
-        iframe._readyQueue = [];
-      }
-      else if (data.event == 'visible_off') {
-        removeEvent(window, 'scroll', visibilityHandler);
-        removeEvent(window, 'resize', visibilityHandler);
-      }
-      else if (data.event == 'get_coords') {
-        postMessageToIframe(iframe, 'callback', {
-          _cb: data._cb,
-          value: getCurCoords(iframe)
-        });
-      }
-      else if (data.event == 'scroll_to') {
-        try {
-          window.scrollTo(data.x || 0, data.y || 0);
-        } catch(e) {}
-      }
-      else if (data.event == 'auth_user') {
-        if (data.init) {
-          onInitAuthUser && onInitAuthUser(data.auth_data);
-        } else {
-          onAuthUser && onAuthUser(data.auth_data);
-        }
-      }
-      else if (data.event == 'unauthorized') {
-        onUnauth && onUnauth();
-      }
-      else if (data.event == 'callback') {
-        var cb_data = null;
-        if (cb_data = window.Telegram.__WidgetCallbacks[data._cb]) {
-          if (cb_data.iframe === iframe) {
-            cb_data.callback(data.value);
-            delete window.Telegram.__WidgetCallbacks[data._cb];
-          }
-        } else {
-          console.warn('Callback #' + data._cb + ' not found');
-        }
-      }
-    }
-    var iframe = document.createElement('iframe');
-    iframe.id = widgetElId;
-    iframe.src = src;
-    iframe.width = defWidth;
-    iframe.height = defHeight;
-    iframe.setAttribute('frameborder', '0');
-    if (!scrollable) {
-      iframe.setAttribute('scrolling', 'no');
-      iframe.style.overflow = 'hidden';
-    }
-    iframe.style.border = 'none';
-    for (var prop in styles) {
-      iframe.style[prop] = styles[prop];
-    }
-    if (widgetEl.parentNode) {
-      widgetEl.parentNode.insertBefore(iframe, widgetEl);
-      if (widgetEl.tagName.toUpperCase() == 'BLOCKQUOTE') {
-        widgetEl.parentNode.removeChild(widgetEl);
-      }
-    }
-    iframe._ready = false;
-    iframe._readyQueue = [];
-    widgetEl._iframe = iframe;
-    addEvent(iframe, 'load', function() {
-      removeEvent(iframe, 'load', visibilityHandler);
-      addEvent(window, 'scroll', visibilityHandler);
-      addEvent(window, 'resize', visibilityHandler);
-      visibilityHandler();
-    });
-    addEvent(window, 'focus blur', focusHandler);
-    addEvent(window, 'message', postMessageHandler);
-    return iframe;
-  }
-  function isVisible(el, padding) {
-    var node = el, val;
-    var visibility = getCssProperty(node, 'visibility');
-    if (visibility == 'hidden') return false;
-    while (node) {
-      if (node === document.documentElement) break;
-      var display = getCssProperty(node, 'display');
-      if (display == 'none') return false;
-      var opacity = getCssProperty(node, 'opacity');
-      if (opacity !== null && opacity < 0.1) return false;
-      node = node.parentNode;
-    }
-    if (el.getBoundingClientRect) {
-      padding = +padding || 0;
-      var rect = el.getBoundingClientRect();
-      var html = document.documentElement;
-      if (rect.bottom < padding ||
-          rect.right < padding ||
-          rect.top > (window.innerHeight || html.clientHeight) - padding ||
-          rect.left > (window.innerWidth || html.clientWidth) - padding) {
-        return false;
-      }
-    }
-    return true;
-  }
-
-  function getAllWidgets() {
-    var widgets = [];
-    if (document.querySelectorAll) {
-      widgets = document.querySelectorAll('script[data-telegram-post],blockquote.telegram-post,script[data-telegram-discussion],script[data-telegram-login],script[data-telegram-share-url]');
-    } else {
-      widgets = Array.prototype.slice.apply(document.getElementsByTagName('SCRIPT'));
-      widgets = widgets.concat(Array.prototype.slice.apply(document.getElementsByTagName('BLOCKQUOTE')));
-    }
-    return widgets;
-  }
-
-  function getWidgetInfo(el_or_id, callback) {
-    var e = null, iframe = null;
-    if (el = geById(el_or_id)) {
-      if (el.tagName &&
-          el.tagName.toUpperCase() == 'IFRAME') {
-        iframe = el;
-      } else if (el._iframe) {
-        iframe = el._iframe;
-      }
-      if (iframe && callback) {
-        postMessageToIframe(iframe, 'get_info', {}, callback);
-      }
-    }
-  }
-
-  function setWidgetOptions(options, el_or_id) {
-    var e = null, iframe = null;
-    if (typeof el_or_id === 'undefined') {
-      var widgets = getAllWidgets();
-      for (var i = 0; i < widgets.length; i++) {
-        if (iframe = widgets[i]._iframe) {
-          postMessageToIframe(iframe, 'set_options', {options: options});
-        }
-      }
-    } else {
-      if (el = geById(el_or_id)) {
-        if (el.tagName &&
-            el.tagName.toUpperCase() == 'IFRAME') {
-          iframe = el;
-        } else if (el._iframe) {
-          iframe = el._iframe;
-        }
-        if (iframe) {
-          postMessageToIframe(iframe, 'set_options', {options: options});
-        }
-      }
-    }
-  }
-
-  if (!document.currentScript ||
-      !initWidget(document.currentScript)) {
-    var widgets = getAllWidgets();
-    for (var i = 0; i < widgets.length; i++) {
-      initWidget(widgets[i]);
-    }
-  }
-
-  var TelegramLogin = {
-    popups: {},
-    auth: function(options, callback) {
-      var bot_id = parseInt(options.bot_id);
-      if (!bot_id) {
-        throw new Error('Bot id required');
-      }
-      var width = 550;
-      var height = 470;
-      var left = Math.max(0, (screen.width - width) / 2) + (screen.availLeft | 0),
-          top = Math.max(0, (screen.height - height) / 2) + (screen.availTop | 0);
-      var onMessage = function (event) {
-        try {
-          var data = JSON.parse(event.data);
-        } catch(e) {
-          var data = {};
-        }
-        if (!TelegramLogin.popups[bot_id]) return;
-        if (event.source !== TelegramLogin.popups[bot_id].window) return;
-        if (data.event == 'auth_result') {
-          onAuthDone(data.result);
-        }
-      };
-      var onAuthDone = function (authData) {
-        if (!TelegramLogin.popups[bot_id]) return;
-        if (TelegramLogin.popups[bot_id].authFinished) return;
-        callback && callback(authData);
-        TelegramLogin.popups[bot_id].authFinished = true;
-        removeEvent(window, 'message', onMessage);
-      };
-      var checkClose = function(bot_id) {
-        if (!TelegramLogin.popups[bot_id]) return;
-        if (!TelegramLogin.popups[bot_id].window ||
-            TelegramLogin.popups[bot_id].window.closed) {
-          return TelegramLogin.getAuthData(options, function(origin, authData) {
-            onAuthDone(authData);
-          });
-        }
-        setTimeout(checkClose, 100, bot_id);
-      }
-      var popup_url = Telegram.Login.widgetsOrigin + '/auth?bot_id=' + encodeURIComponent(options.bot_id) + '&origin=' + encodeURIComponent(location.origin || location.protocol + '//' + location.hostname) + (options.request_access ? '&request_access=' + encodeURIComponent(options.request_access) : '') + (options.lang ? '&lang=' + encodeURIComponent(options.lang) : '');
-      var popup = window.open(popup_url, 'telegram_oauth_bot' + bot_id, 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top + ',status=0,location=0,menubar=0,toolbar=0');
-      TelegramLogin.popups[bot_id] = {
-        window: popup,
-        authFinished: false
-      };
-      if (popup) {
-        addEvent(window, 'message', onMessage);
-        popup.focus();
-        checkClose(bot_id);
-      }
-    },
-    getAuthData: function(options, callback) {
-      var bot_id = parseInt(options.bot_id);
-      if (!bot_id) {
-        throw new Error('Bot id required');
-      }
-      var xhr = getXHR();
-      var url = Telegram.Login.widgetsOrigin + '/auth/get';
-      xhr.open('POST', url);
-      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
-      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
-      xhr.onreadystatechange = function() {
-        if (xhr.readyState == 4) {
-          if (typeof xhr.responseBody == 'undefined' && xhr.responseText) {
-            try {
-              var result = JSON.parse(xhr.responseText);
-            } catch(e) {
-              var result = {};
-            }
-            if (result.user) {
-              callback(result.origin, result.user);
-            } else {
-              callback(result.origin, false);
-            }
-          } else {
-            callback('*', false);
-          }
-        }
-      };
-      xhr.onerror = function() {
-        callback('*', false);
-      };
-      xhr.withCredentials = true;
-      xhr.send('bot_id=' + encodeURIComponent(options.bot_id) + (options.lang ? '&lang=' + encodeURIComponent(options.lang) : ''));
-    }
-  };
-
-  window.Telegram.getWidgetInfo = getWidgetInfo;
-  window.Telegram.setWidgetOptions = setWidgetOptions;
-  window.Telegram.Login = {
-    auth: TelegramLogin.auth,
-    widgetsOrigin: getWidgetsOrigin('https://oauth.telegram.org', 'https://oauth.tg.dev')
-  };
-
-  }(window));
-})(window);