add odysee support and remove it cause no CORSE support
This commit is contained in:
parent
34c53d0c89
commit
6dc2084bc7
66
src/components/embeds/Odysee.jsx
Normal file
66
src/components/embeds/Odysee.jsx
Normal file
|
@ -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`,
|
||||
];
|
|
@ -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"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue
Block a user