From 57558111bc82baaeb2ed72fcf9a4838163bbb7dd Mon Sep 17 00:00:00 2001
From: Shawn <shawn@kafei.io>
Date: Fri, 2 Nov 2018 03:45:35 -0500
Subject: [PATCH 1/3] Make configurable embeds

---
 .../controllers/pages/sendVideoEmbedPage.js   | 84 +++++++++++++++++--
 server/routes/pages/index.js                  |  2 +-
 server/views/embed.handlebars                 |  7 +-
 server/views/layouts/embed.handlebars         | 46 +++++++---
 server/views/partials/logo.handlebars         |  5 ++
 5 files changed, 125 insertions(+), 19 deletions(-)
 create mode 100644 server/views/partials/logo.handlebars

diff --git a/server/controllers/pages/sendVideoEmbedPage.js b/server/controllers/pages/sendVideoEmbedPage.js
index 79d7eefa..78424d11 100644
--- a/server/controllers/pages/sendVideoEmbedPage.js
+++ b/server/controllers/pages/sendVideoEmbedPage.js
@@ -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;
diff --git a/server/routes/pages/index.js b/server/routes/pages/index.js
index 30f84a32..fc742b42 100644
--- a/server/routes/pages/index.js
+++ b/server/routes/pages/index.js
@@ -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
 };
diff --git a/server/views/embed.handlebars b/server/views/embed.handlebars
index 6b1a4ed6..5dd2f283 100644
--- a/server/views/embed.handlebars
+++ b/server/views/embed.handlebars
@@ -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>
diff --git a/server/views/layouts/embed.handlebars b/server/views/layouts/embed.handlebars
index c9202662..32df55d0 100644
--- a/server/views/layouts/embed.handlebars
+++ b/server/views/layouts/embed.handlebars
@@ -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>
diff --git a/server/views/partials/logo.handlebars b/server/views/partials/logo.handlebars
new file mode 100644
index 00000000..d0f8aa36
--- /dev/null
+++ b/server/views/partials/logo.handlebars
@@ -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}}
-- 
2.45.3


From 2161a49559cc1f4259a384c42923cdf8db1dc66c Mon Sep 17 00:00:00 2001
From: Shawn <shawn@kafei.io>
Date: Fri, 2 Nov 2018 04:47:09 -0500
Subject: [PATCH 2/3] Minor tweaks

---
 client/src/containers/AssetInfo/view.jsx | 2 +-
 server/views/layouts/embed.handlebars    | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/containers/AssetInfo/view.jsx b/client/src/containers/AssetInfo/view.jsx
index a84e7062..7ae2099c 100644
--- a/client/src/containers/AssetInfo/view.jsx
+++ b/client/src/containers/AssetInfo/view.jsx
@@ -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}/${claimId}/${name}.${fileExt}" allowfullscreen="true" style="border:0" /></iframe>`}
                   />
                 ) : (
                   <ClickToCopy
diff --git a/server/views/layouts/embed.handlebars b/server/views/layouts/embed.handlebars
index 32df55d0..0bd68f70 100644
--- a/server/views/layouts/embed.handlebars
+++ b/server/views/layouts/embed.handlebars
@@ -3,7 +3,8 @@
 <head>
   <style type="text/css">
   body {
-    margin:0;
+    margin: 0;
+    overflow: hidden;
   }
 
   .container {
-- 
2.45.3


From f53bf150a8b1fda448caa02a02591f6a66614bfb Mon Sep 17 00:00:00 2001
From: Shawn <shawn@kafei.io>
Date: Fri, 2 Nov 2018 04:51:49 -0500
Subject: [PATCH 3/3] Fix embed iframe url

---
 client/src/containers/AssetInfo/view.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/containers/AssetInfo/view.jsx b/client/src/containers/AssetInfo/view.jsx
index 7ae2099c..63d16e10 100644
--- a/client/src/containers/AssetInfo/view.jsx
+++ b/client/src/containers/AssetInfo/view.jsx
@@ -90,7 +90,7 @@ class AssetInfo extends React.Component {
                 {(contentType === 'video/mp4') ? (
                   <ClickToCopy
                     id={'embed-text-video'}
-                    value={`<iframe src="${host}/${claimId}/${name}.${fileExt}" allowfullscreen="true" style="border:0" /></iframe>`}
+                    value={`<iframe src="${host}/video-embed/${name}/${claimId}" allowfullscreen="true" style="border:0" /></iframe>`}
                   />
                 ) : (
                   <ClickToCopy
-- 
2.45.3