Make configurable embeds
This commit is contained in:
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
|
||||
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;
|
||||
|
|
|
@ -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
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,16 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
<style type="text/css">
|
||||
video {
|
||||
width:100%;
|
||||
max-width:600px;
|
||||
height:auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
{{{ body }}}
|
||||
|
||||
{{{ body }}}
|
||||
</body>
|
||||
</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