Commit 9977a73a authored by Quoc Huy Nguyen Dinh's avatar Quoc Huy Nguyen Dinh
Browse files

Fix broken embed players

parent fcf0bd36
......@@ -56,10 +56,8 @@ export function validateIframeUrl(url) {
const match = url.match(regex.sanitize);
if (!match || match.length !== 2) {
console.log('no match');
return false;
}
console.log('match');
return 'https://bandcamp.com/EmbeddedPlayer/' + match[1];
}
......
......@@ -13,7 +13,7 @@ export default regex;
*/
export const sandboxConfig = {
useSandbox: true,
sandboxAttributes: [],
sandboxAttributes: ['allow-scripts', 'allow-same-origin', 'allow-popups'],
};
/**
......
# Example Media Players 2020-07-23
## dapplr direct html iframe markup
## archive.org direct html iframe markup
<iframe src="https://archive.org/embed/namaz-nasil-kilinir" width="640" height="480" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
## bandcamp direct html iframe markup
Small artwork without tracklist
<iframe style="border: 0; width: 100%; height: 120px;" src="https://bandcamp.com/EmbeddedPlayer/album=1820259073/size=large/bgcol=ffffff/linkcol=0687f5/tracklist=false/artwork=small/transparent=true/" seamless><a href="https://bluetech.bandcamp.com/album/tomorrow">Tomorrow by Steve Roach</a></iframe>
Small artwork with tracklist
<iframe style="border: 0; width: 100%; height: 120px;" src="https://bandcamp.com/EmbeddedPlayer/album=1820259073/size=large/bgcol=ffffff/linkcol=0687f5/tracklist=true/artwork=small/transparent=true/" seamless><a href="https://bluetech.bandcamp.com/album/tomorrow">Tomorrow by Steve Roach</a></iframe>
Large artwork without tracklist
<iframe style="border: 0; width: 100%; height: 120px;" src="https://bandcamp.com/EmbeddedPlayer/album=1820259073/size=large/bgcol=ffffff/linkcol=0687f5/tracklist=false/artwork=large/transparent=true/" seamless><a href="https://bluetech.bandcamp.com/album/tomorrow">Tomorrow by Steve Roach</a></iframe>
Large artwork with tracklist
<iframe style="border: 0; width: 100%; height: 120px;" src="https://bandcamp.com/EmbeddedPlayer/album=1820259073/size=large/bgcol=ffffff/linkcol=0687f5/tracklist=true/artwork=large/transparent=true/" seamless><a href="https://bluetech.bandcamp.com/album/tomorrow">Tomorrow by Steve Roach</a></iframe>
## dapplr direct html iframe markup
<iframe src="https://cdn.dapplr.in/file/dapplr-videos/cryptoanalysis/yuHDBQG8XY3IBMwD0f4je9b1P7u7PAsT.mp4"></iframe>
## dapplr iframe embedded from link
Not supported
## dtube direct html iframe markup
<iframe title="DTube embedded player" src="https://emb.d.tube/#!/cyberspacegod/QmfHTqZWQkJ6uqLsca4wgZffGE3To6YVSzazFD3ReS1NcA"></iframe>
## dtube iframe embedded from link
https://emb.d.tube/#!/cyberspacegod/QmfHTqZWQkJ6uqLsca4wgZffGE3To6YVSzazFD3ReS1NcA
## soundcloud direct html iframe markup
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/257659076&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
## soundcloud iframe embedded from link
Not supported
## mixcloud direct html iframe markup
<iframe width="100%" height="120" src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&feed=%2FMagneticMagazine%2Fambient-meditations-vol-21-anane%2F" frameborder="0" ></iframe>
## threespeak direct html iframe markup
## mixcloud iframe embedded from link
https://www.mixcloud.com/MagneticMagazine/ambient-meditations-vol-21-anane
<iframe src="https://3speak.online/embed?v=threespeak/iaarkpvf"></iframe>
## spotify direct html iframe markup
Playlist
<iframe src="https://open.spotify.com/embed/playlist/37i9dQZF1DWSDCcNkUu5tr" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
Show
<iframe src="https://open.spotify.com/embed-podcast/show/6C1Q7ITJKvZVosOdC9M1RM" width="100%" height="232" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
Episode
<iframe src="https://open.spotify.com/embed-podcast/episode/49EzBVgb4exGi2AIRKmTGK" width="100%" height="232" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
## threespeak iframe embedded from link
## spotify iframe embedded from link
https://open.spotify.com/episode/523CYPCmCXdv8uBME5yzZ7?si=l2uwhVjERe21N86grg3ZEg
It's broken
## threespeak direct html iframe markup
<iframe src="https://3speak.online/embed?v=threespeak/iaarkpvf"></iframe>
## threespeak iframe embedded from link
https://3speak.online/watch?v=threespeak/iaarkpvf
## twitch direct html iframe markup
It's broken, because we don't set parameter `parent` in url query. Iframe's attribute `src` should be something like `https://player.twitch.tv/?<channel, video, or collection>&parent=streamernews.example.com`. From their docs: "parent string (required) Domain(s) that will be embedding Twitch. You must have one parent key for each domain your site uses."
<iframe src="https://player.twitch.tv/?channel=tfue" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>
## twitter
https://twitter.com/missybahia/status/1281295770298318849
## vimeo direct html iframe markup
<iframe src="https://player.vimeo.com/video/179213493"></iframe>
## vimeo iframe embedded from link
https://player.vimeo.com/video/179213493
## youtube direct html iframe markup
<iframe src="https://www.youtube.com/embed/KOnk7Nbqkhs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
## youtube iframe embedded from link
https://www.youtube.com/embed/KOnk7Nbqkhs
......@@ -5,7 +5,7 @@ import React from 'react';
* @type {{htmlReplacement: RegExp, main: RegExp, sanitize: RegExp}}
*/
const regex = {
main: /(?:https?:\/\/(?:(?:www\.mixcloud.com(\/(.*?)\/(.*?)\/))))/i,
main: /https:\/\/www\.mixcloud\.com(\/[^/]+\/[^/]+)/i,
sanitize: /^https:\/\/www\.mixcloud\.com\/widget\/iframe\/.*?feed=(.*)/i,
};
......@@ -75,11 +75,10 @@ function extractMetadata(data) {
const startTime = m.input.match(/t=(\d+)s?/);
return {
id: m[1],
id: `${m[1]}/`,
url: m[0],
startTime: startTime ? startTime[1] : 0,
canonical: `https://open.mixcloud.com/playlist/${m[1]}`,
// thumbnail: requires a callback - http://stackoverflow.com/questions/1361149/get-img-thumbnails-from-mixcloud
};
}
......
......@@ -20,7 +20,12 @@ export default regex;
*/
export const sandboxConfig = {
useSandbox: true,
sandboxAttributes: ['allow-scripts', 'allow-same-origin', 'allow-popups'],
sandboxAttributes: [
'allow-scripts',
'allow-same-origin',
'allow-popups',
'allow-forms',
],
};
/**
......
......@@ -138,7 +138,7 @@ export function embedNode(child, links, images) {
if (threespeak) {
child.data = data.replace(
threespeak.url,
`~~~ embed:${threespeak.id} threespeak ~~~`
`~~~ embed:${threespeak.fullId} threespeak ~~~`
);
if (links) {
......
......@@ -5,7 +5,7 @@ import React from 'react';
* @type {{htmlReplacement: RegExp, main: RegExp, sanitize: RegExp}}
*/
const regex = {
sanitize: /^(https?:)?\/\/player\.twitch.tv\/.*/i,
sanitize: /^(https?:)?\/\/player\.twitch\.tv\/\?(channel|video)=([A-Za-z0-9]+)/i,
main: /https?:\/\/(?:www.)?twitch\.tv\/(?:(videos)\/)?([a-zA-Z0-9][\w]{3,24})/i,
};
export default regex;
......@@ -19,6 +19,15 @@ export const sandboxConfig = {
sandboxAttributes: [],
};
function getParentDomain() {
let parentDomain = $STM_Config.site_domain;
if (typeof window !== 'undefined') {
parentDomain = window.location.hostname;
}
return parentDomain;
}
/**
* Check if the iframe code in the post editor is to an allowed URL
* <iframe src="https://player.twitch.tv/?channel=tfue" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>
......@@ -29,7 +38,9 @@ export function validateIframeUrl(url) {
const match = url.match(regex.sanitize);
if (match) {
return url;
return `https://player.twitch.tv/?${match[2]}=${
match[3]
}&parent=${getParentDomain()}`;
}
return false;
......@@ -47,10 +58,12 @@ export function normalizeEmbedUrl(url) {
if (match[1] === undefined) {
return `https://player.twitch.tv/?autoplay=false&channel=${
match[2]
}`;
}&parent=${getParentDomain()}`;
}
return `https://player.twitch.tv/?autoplay=false&video=${match[1]}`;
return `https://player.twitch.tv/?autoplay=false&video=${
match[1]
}&parent=${getParentDomain()}`;
}
return false;
......@@ -73,8 +86,12 @@ function extractMetadata(data) {
url: m[0],
canonical:
m[1] === `videos`
? `https://player.twitch.tv/?video=${m[2]}`
: `https://player.twitch.tv/?channel=${m[2]}`,
? `https://player.twitch.tv/?video=${
m[2]
}&parent=${getParentDomain()}`
: `https://player.twitch.tv/?channel=${
m[2]
}&parent=${getParentDomain()}`,
};
}
......@@ -100,17 +117,13 @@ export function embedNode(child, links /*images*/) {
/**
* Generates the Markdown/HTML code to override the detected URL with an iFrame
* @param idx
* @param threespeakId
* @param id
* @param width
* @param height
* @returns {*}
*/
export function genIframeMd(idx, id, width, height) {
let parentDomain = $STM_Config.site_domain;
if (typeof window !== 'undefined') {
parentDomain = window.location.hostname;
}
const url = `https://player.twitch.tv/${id}&parent=${parentDomain}`;
const url = `https://player.twitch.tv/${id}?parent=${getParentDomain()}`;
let sandbox = sandboxConfig.useSandbox;
if (sandbox) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment