Make configurable embeds
This commit is contained in:
Shawn
parent
d975aae2cc
commit
57558111bc
5 changed files with 125 additions and 19 deletions
|
|
@ -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
|
// test setting response headers
|
||||||
console.log('removing x-frame-options');
|
console.log('removing x-frame-options');
|
||||||
res.removeHeader('X-Frame-Options');
|
res.removeHeader('X-Frame-Options');
|
||||||
// get and render the content
|
// 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;
|
module.exports = sendVideoEmbedPage;
|
||||||
|
|
|
||||||
|
|
@ -16,5 +16,5 @@ module.exports = {
|
||||||
'/popular': { controller: handlePageRequest },
|
'/popular': { controller: handlePageRequest },
|
||||||
'/new': { controller: handlePageRequest },
|
'/new': { controller: handlePageRequest },
|
||||||
'/multisite': { controller: handlePageRequest },
|
'/multisite': { controller: handlePageRequest },
|
||||||
'/video-embed/:name/:claimId': { controller: handleVideoEmbedRequest }, // for twitter
|
'/video-embed/:name/:claimId/:config?': { controller: handleVideoEmbedRequest }, // for twitter
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,7 @@
|
||||||
<video controls>
|
<div class="container">
|
||||||
|
{{> logo}}
|
||||||
|
<video controls>
|
||||||
<source src="{{host}}/{{claimId}}/{{name}}.mp4" type="video/mp4">
|
<source src="{{host}}/{{claimId}}/{{name}}.mp4" type="video/mp4">
|
||||||
Your browser does not support video
|
Your browser does not support video
|
||||||
</video>
|
</video>
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,40 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<body>
|
<head>
|
||||||
|
<style type="text/css">
|
||||||
<style type="text/css">
|
body {
|
||||||
video {
|
margin:0;
|
||||||
width:100%;
|
|
||||||
max-width:600px;
|
|
||||||
height:auto;
|
|
||||||
}
|
}
|
||||||
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
5
server/views/partials/logo.handlebars
Normal file
5
server/views/partials/logo.handlebars
Normal 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}}
|
||||||
Loading…
Reference in a new issue