more embed changes for Telegram and Twitter
This commit is contained in:
parent
3aad0ead73
commit
cf74ca9f32
BIN
public/embico/odysee.png
Normal file
BIN
public/embico/odysee.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 818 B |
BIN
public/embico/twitter.png
Normal file
BIN
public/embico/twitter.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 441 B |
|
@ -3,48 +3,39 @@
|
||||||
* therefor we can't use it right now.
|
* therefor we can't use it right now.
|
||||||
* Still keeping this here in case that the policy changes in the future
|
* 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) {
|
import { stripQuery } from '../../core/utils';
|
||||||
let aPos = url.indexOf('/@');
|
|
||||||
if (aPos === -1) {
|
function stripCol(str) {
|
||||||
return url;
|
const posCol = str.lastIndexOf(':');
|
||||||
|
if (posCol !== -1) {
|
||||||
|
return str.substring(0, posCol);
|
||||||
}
|
}
|
||||||
aPos += 1;
|
return str;
|
||||||
let bPos = url.indexOf(':', aPos);
|
|
||||||
if (bPos === -1) {
|
|
||||||
bPos = url.length;
|
|
||||||
}
|
|
||||||
return url.substring(aPos, bPos);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const urlStr = '/@';
|
||||||
|
|
||||||
const Odysee = ({ url }) => {
|
const Odysee = ({ url }) => {
|
||||||
const [embedUrl, setEmbedUrl] = useState(null);
|
let oid = null;
|
||||||
|
let posA = url.indexOf(urlStr);
|
||||||
useEffect(async () => {
|
if (posA !== -1) {
|
||||||
const prot = window.location.protocol.startsWith('http')
|
oid = url.substring(url.indexOf('/', posA + urlStr.length) + 1);
|
||||||
? window.location.protocol : 'https';
|
} else {
|
||||||
// eslint-disable-next-line max-len
|
posA = url.indexOf('//');
|
||||||
const odurl = `${prot}//odysee.com/$/oembed?url=${encodeURIComponent(url)}&format=json`;
|
if (posA === -1) {
|
||||||
const resp = await fetch(odurl);
|
posA = 0;
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
}, []);
|
oid = url.substring(url.indexOf('/', posA + 2) + 1);
|
||||||
|
|
||||||
if (!embedUrl) {
|
|
||||||
return <div>LOADING</div>;
|
|
||||||
}
|
}
|
||||||
|
oid = stripCol(stripQuery(oid));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="vemb" style={{ paddingBottom: '56.25%' }}>
|
<div className="vemb" style={{ paddingBottom: '56.25%' }}>
|
||||||
<iframe
|
<iframe
|
||||||
className="vembc"
|
className="vembc"
|
||||||
src={embedUrl}
|
src={`https://odysee.com/$/embed/${oid}`}
|
||||||
frameBorder="0"
|
frameBorder="0"
|
||||||
referrerPolicy="no-referrer"
|
referrerPolicy="no-referrer"
|
||||||
allow="autoplay; picture-in-picture"
|
allow="autoplay; picture-in-picture"
|
||||||
|
@ -60,7 +51,48 @@ const Odysee = ({ url }) => {
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
React.memo(Odysee),
|
React.memo(Odysee),
|
||||||
(url) => url.indexOf('a') !== -1 && url.indexOf('/', url.indexOf('@')) !== -1,
|
(url) => {
|
||||||
(url) => getUserFromUrl(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`,
|
`${window.ssv.assetserver}/embico/odysee.png`,
|
||||||
];
|
];
|
||||||
|
|
|
@ -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';
|
import usePostMessage from '../hooks/postMessage';
|
||||||
|
|
||||||
const urlStr = 't.me/';
|
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 Telegram = ({ url }) => {
|
||||||
const [frameHeight, setFrameHeight] = useState(200);
|
const [frameHeight, setFrameHeight] = useState(200);
|
||||||
const iFrameRef = useRef(null);
|
const iFrameRef = useRef(null);
|
||||||
|
@ -45,17 +19,19 @@ const Telegram = ({ url }) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
console.error(`Could not read postMessage from frame: ${data}`);
|
console.error(`Could not read postMessage from frame: ${data}`);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
const userPost = url.substring(url.indexOf(urlStr) + urlStr.length)
|
let userPost = stripQuery(url);
|
||||||
const embedCode =
|
userPost = userPost.substring(userPost.indexOf(urlStr) + urlStr.length);
|
||||||
// eslint-disable-next-line max-len
|
const sslash = userPost.indexOf('/', userPost.indexOf('/') + 1);
|
||||||
`<script async src="https://telegram.org/js/telegram-widget.js?18" data-telegram-post="${userPost}" data-width="100%"></script>`;
|
if (sslash !== -1) {
|
||||||
|
userPost = userPost.substring(0, sslash);
|
||||||
|
}
|
||||||
|
|
||||||
// srcDoc={embedCode}
|
|
||||||
return (
|
return (
|
||||||
<iframe
|
<iframe
|
||||||
ref={iFrameRef}
|
ref={iFrameRef}
|
||||||
|
@ -78,7 +54,22 @@ const Telegram = ({ url }) => {
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
React.memo(Telegram),
|
React.memo(Telegram),
|
||||||
(url) => url.includes(urlStr),
|
(url) => {
|
||||||
(url) => getUserPostFromUrl(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`,
|
`${window.ssv.assetserver}/embico/telegram.png`,
|
||||||
];
|
];
|
||||||
|
|
|
@ -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 Twitter = ({ url }) => {
|
||||||
const [embedCode, setEmbedCode] = useState(null);
|
const [frameHeight, setFrameHeight] = useState(200);
|
||||||
|
const iFrameRef = useRef(null);
|
||||||
|
|
||||||
useEffect(async () => {
|
usePostMessage(iFrameRef,
|
||||||
const prot = window.location.protocol.startsWith('http')
|
(data) => {
|
||||||
? window.location.protocol : 'https';
|
try {
|
||||||
// eslint-disable-next-line max-len
|
if (data['twttr.embed']
|
||||||
const tkurl = `${prot}//publish.twitter.com/oembed?url=${encodeURIComponent(url)}`;
|
&& data['twttr.embed'].method === 'twttr.private.resize'
|
||||||
const resp = await fetch(tkurl);
|
&& data['twttr.embed'].params.length
|
||||||
const embedData = await resp.json();
|
&& data['twttr.embed'].params[0].height
|
||||||
if (embedData.html) {
|
) {
|
||||||
setEmbedCode(embedData.html);
|
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 (
|
return (
|
||||||
<iframe
|
<iframe
|
||||||
|
ref={iFrameRef}
|
||||||
style={{
|
style={{
|
||||||
width: '100%',
|
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"
|
frameBorder="0"
|
||||||
referrerPolicy="no-referrer"
|
referrerPolicy="no-referrer"
|
||||||
allow="autoplay; picture-in-picture"
|
allow="autoplay; picture-in-picture"
|
||||||
scrolling="no"
|
scrolling="no"
|
||||||
// eslint-disable-next-line max-len
|
// 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
|
allowFullScreen
|
||||||
title="Embedded tiktok"
|
title="Embedded twitter"
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
React.memo(Twitter),
|
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`,
|
`${window.ssv.assetserver}/embico/twitter.png`,
|
||||||
];
|
];
|
||||||
|
|
|
@ -8,7 +8,7 @@ import YouTube from './YouTube';
|
||||||
import Matrix from './Matrix';
|
import Matrix from './Matrix';
|
||||||
import Telegram from './Telegram';
|
import Telegram from './Telegram';
|
||||||
import Twitter from './Twitter';
|
import Twitter from './Twitter';
|
||||||
// import Odysee from './Odysee';
|
import Odysee from './Odysee';
|
||||||
import DirectLinkMedia from './DirectLinkMedia';
|
import DirectLinkMedia from './DirectLinkMedia';
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
@ -34,6 +34,7 @@ export default {
|
||||||
'i.redd.it': DirectLinkMedia,
|
'i.redd.it': DirectLinkMedia,
|
||||||
'media.consumeproduct.win': DirectLinkMedia,
|
'media.consumeproduct.win': DirectLinkMedia,
|
||||||
't.me': Telegram,
|
't.me': Telegram,
|
||||||
'twitter': Twitter,
|
twitter: Twitter,
|
||||||
// 'odysee': Odysee,
|
'nitter.net': Twitter,
|
||||||
|
odysee: Odysee,
|
||||||
};
|
};
|
||||||
|
|
|
@ -388,6 +388,17 @@ export function getExt(link) {
|
||||||
return link.slice(posDot, paramStart);
|
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
|
* convert timestamp to human readable date/time string
|
||||||
* @param timestamp Unix timestamp in seconds
|
* @param timestamp Unix timestamp in seconds
|
||||||
|
|
Loading…
Reference in New Issue
Block a user