LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

Merge pull request #676 from lbryio/embedConfig

Browse source 
Make configurable embeds
This commit is contained in:
Shawn K 2018-11-02 17:47:26 -05:00 committed by GitHub
commit 7629b17f70
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 127 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/src/containers/AssetInfo/view.jsx
View file

@ -90,7 +90,7 @@ class AssetInfo extends React.Component {
{(contentType === 'video/mp4') ? (
<ClickToCopy
id={'embed-text-video'}
value={`<video width="100%" controls poster="${thumbnail}" src="${host}/${claimId}/${name}.${fileExt}"/></video>`}
value={`<iframe src="${host}/video-embed/${name}/${claimId}" allowfullscreen="true" style="border:0" /></iframe>`}
/>
) : (
<ClickToCopy

84
server/controllers/pages/sendVideoEmbedPage.js
View file

@ -1,13 +1,87 @@
const { details: { host } } = require('@config/siteConfig');
const {
assetDefaults: { thumbnail },
details: { host },
} = require('@config/siteConfig');
const padSizes = {
small: 'padSmall',
medium: 'padMedium',
large: 'padLarge',
};
const argumentProcessors = {
'bottom': async (config) => {
config.classNames.push('bottom');
return;
},
'right': async (config) => {
config.classNames.push('right');
return;
},
'pad': async (config, val) => {
config.classNames.push(padSizes[val]);
return;
},
'logoClaim': async (config, val) => {
config.logoUrl = `${host}/${val}`;
return;
},
'link': async (config, val) => {
config.logoLink = val;
return;
}
};
const parseLogoConfigParam = async (rawConfig) => {
if(rawConfig) {
let parsedConfig = {
classNames: ['logoLink'],
logoUrl: thumbnail,
};
let splitConfig;
try {
splitConfig = rawConfig.split(',');
} catch(e) { }
if(!splitConfig) {
return false;
}
for(let i = 0; i < splitConfig.length; i++) {
let currentArgument = splitConfig[i];
if(argumentProcessors[currentArgument]) {
await argumentProcessors[currentArgument](parsedConfig);
} else {
const splitArgument = currentArgument.split(':');
if(argumentProcessors[splitArgument[0]]) {
await argumentProcessors[splitArgument[0]](parsedConfig, splitArgument[1]);
}
}
}
parsedConfig.classNames = parsedConfig.classNames.join(' ');
return parsedConfig;
}
return false;
}
const sendVideoEmbedPage = async ({ params }, res) => {
const {
claimId,
config,
name,
} = params;
const logoConfig = await parseLogoConfigParam(config);
const sendVideoEmbedPage = ({ params }, res) => {
const claimId = params.claimId;
const name = params.name;
// test setting response headers
console.log('removing x-frame-options');
res.removeHeader('X-Frame-Options');
// get and render the content
res.status(200).render('embed', { host, claimId, name });
res.status(200).render('embed', { host, claimId, name, logoConfig });
};
module.exports = sendVideoEmbedPage;

2
server/routes/pages/index.js
View file

@ -16,5 +16,5 @@ module.exports = {
'/popular': { controller: handlePageRequest },
'/new': { controller: handlePageRequest },
'/multisite': { controller: handlePageRequest },
'/video-embed/:name/:claimId': { controller: handleVideoEmbedRequest }, // for twitter
'/video-embed/:name/:claimId/:config?': { controller: handleVideoEmbedRequest }, // for twitter
};

7
server/views/embed.handlebars
View file

@ -1,4 +1,7 @@
<video controls>
<div class="container">
{{> logo}}
<video controls>
<source src="{{host}}/{{claimId}}/{{name}}.mp4" type="video/mp4">
Your browser does not support video
</video>
</video>
</div>

43
server/views/layouts/embed.handlebars
View file

@ -1,16 +1,41 @@
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
video {
width:100%;
max-width:600px;
height:auto;
<head>
<style type="text/css">
body {
margin: 0;
overflow: hidden;
}
</style>
{{{ body }}}
.container {
height: 100vh;
}
video {
width: 100%;
height: 100%;
}
.logoLink {
margin-bottom: 80px; /* don't cover controls */
padding: 5px;
position: absolute;
z-index: 1;
}
.logo {
max-height: 128px;
max-width: 64px;
}
.bottom { bottom: 0 }
.right { right: 0 }
.padSmall { padding: 10px }
.padMedium { padding: 20px }
.padLarge { padding: 30px }
</style>
</head>
<body>
{{{ body }}}
</body>
</html>

5
server/views/partials/logo.handlebars Normal file
View file

@ -0,0 +1,5 @@
{{#if logoConfig}}
<a class="{{logoConfig.classNames}}" href="{{#if logoConfig.logoLink}}{{logoConfig.logoLink}}{{else}}{{host}}/{{claimId}}/{{name}}{{/if}}">
<img class="logo" src="{{logoConfig.logoUrl}}" />
</a>
{{/if}}