From 7f0df2511b1cfa9b5e763c9e1de2ef661c3afd98 Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Mon, 7 Aug 2017 17:08:03 -0700
Subject: [PATCH] added twitter player route

---
 helpers/serveHelpers.js                |  9 +++++----
 routes/page-routes.js                  |  8 ++++++++
 speech.js                              | 14 +++++++-------
 views/layouts/show.handlebars          |  4 ++--
 views/layouts/twitterPlayer.handlebars | 16 ++++++++++++++++
 views/showLite.handlebars              |  1 -
 views/twitterPlayer.handlebars         |  1 +
 7 files changed, 39 insertions(+), 14 deletions(-)
 create mode 100644 views/layouts/twitterPlayer.handlebars
 create mode 100644 views/twitterPlayer.handlebars

diff --git a/helpers/serveHelpers.js b/helpers/serveHelpers.js
index d6107d55..017d485c 100644
--- a/helpers/serveHelpers.js
+++ b/helpers/serveHelpers.js
@@ -60,11 +60,12 @@ function checkLocalDbForClaims (name, shortUrl) {
     });
 }
 
-function createOpenGraphInfo ({ fileType, claimId, name, fileExt }) {
+function createOpenGraphInfo ({ fileType, claimId, name, fileName, fileExt }) {
   return {
-    type   : fileType.substring(0, fileType.indexOf('/')),
-    showUrl: `https://spee.ch/${claimId}/${name}`,
-    source : `https://spee.ch/${claimId}/${name}${fileExt}`,
+    twitterPlayerUrl: `https://spee.ch/twitterPlayer/${claimId}/${name}`,
+    showUrl         : `https://spee.ch/${claimId}/${name}`,
+    source          : `https://spee.ch/${claimId}/${name}${fileExt}`,
+    directFileUrl   : `https://spee.ch/media/${fileName}`,
   };
 }
 
diff --git a/routes/page-routes.js b/routes/page-routes.js
index d037658f..7907e907 100644
--- a/routes/page-routes.js
+++ b/routes/page-routes.js
@@ -36,6 +36,14 @@ module.exports = (app) => {
       });
   });
   // route to display all free public claims at a given name
+  app.get('/twitterPlayer/:claimId/:fileName', ({ params }, res) => {
+    const claimId = params.claimId;
+    const fileName = params.fileName;
+    const fileExtension = '.mp4';
+    // get and render the content
+    res.status(200).render('twitterPlayer', { layout: 'twitterPlayer', claimId, fileName, fileExtension });
+  });
+  // route to display all free public claims at a given name
   app.get('/:name/all', ({ ip, originalUrl, params }, res) => {
     // get and render the content
     getAllFreePublicClaims(params.name)
diff --git a/speech.js b/speech.js
index c77d69a8..cc2f0d4b 100644
--- a/speech.js
+++ b/speech.js
@@ -48,9 +48,9 @@ const hbs = expressHandlebars.create({
         </script>`
       );
     },
-    addOpenGraph (title, url, source, mimeType) {
+    addOpenGraph (title, mimeType, showUrl, source) {
       let basicTags = `<meta property="og:title" content="${title}"/> 
-          <meta property="og:url" content="${url}" /> 
+          <meta property="og:url" content="${showUrl}" /> 
           <meta property="og:site_name" content="Spee.ch" /> 
           <meta property="og:description" content="View or download ${title} from spee.ch: the open-source, decentralized content host." />`;
       if (mimeType === 'video/mp4') {
@@ -82,15 +82,15 @@ const hbs = expressHandlebars.create({
         );
       }
     },
-    addTwitterCard (source, mimeType, fileName, showUrl) {
-      let basicTwitterTags = `<meta name="twitter:card" content="player" />
-        <meta name="twitter:site" content="@lbryio" />`;
+    addTwitterCard (mimeType, source, twitterPlayerUrl, directFileUrl) {
+      let basicTwitterTags = `<meta name="twitter:site" content="@lbryio" />`;
       if (mimeType === 'video/mp4') {
         return new Handlebars.SafeString(
-          `${basicTwitterTags} <meta name="twitter:player" content="${showUrl}"/ >
+          `${basicTwitterTags} <meta name="twitter:card" content="player" />
+          <meta name="twitter:player" content="${twitterPlayerUrl}>
           <meta name="twitter:player:width" content="480" />
           <meta name="twitter:player:height" content="480" />
-          <meta name="twitter:player:stream" content="https://spee.ch/media/${fileName}" />
+          <meta name="twitter:player:stream" content="${directFileUrl}" />
           <meta name="twitter:player:stream:content_type" content="video/mp4" />
           `
         );
diff --git a/views/layouts/show.handlebars b/views/layouts/show.handlebars
index 34b3f3cd..15575e9f 100644
--- a/views/layouts/show.handlebars
+++ b/views/layouts/show.handlebars
@@ -8,8 +8,8 @@
 	<link rel="stylesheet" href="/assets/css/generalStyle.css" type="text/css">
 	<link rel="stylesheet" href="/assets/css/componentStyle.css" type="text/css">
 	<meta property="fb:app_id" content="1371961932852223">
-	{{{addTwitterCard openGraphInfo.source fileInfo.fileType fileInfo.fileName openGraphInfo.showUrl}}}
-	{{{addOpenGraph fileInfo.name openGraphInfo.showUrl openGraphInfo.source fileInfo.fileType }}}
+	{{{addTwitterCard fileInfo.fileType openGraphInfo.source openGraphInfo.twitterPlayerUrl openGraphInfo.directFileUrl}}}
+	{{{addOpenGraph fileInfo.name fileInfo.fileType openGraphInfo.showUrl openGraphInfo.source}}}
 </head>
 <body>
 	{{{ body }}}
diff --git a/views/layouts/twitterPlayer.handlebars b/views/layouts/twitterPlayer.handlebars
new file mode 100644
index 00000000..1c3f0d44
--- /dev/null
+++ b/views/layouts/twitterPlayer.handlebars
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<style type="text/css">
+video {  
+   width:100%; 
+   max-width:600px; 
+   height:auto; 
+}
+</style>
+
+{{{body}}}
+
+</body>
+</html>
\ No newline at end of file
diff --git a/views/showLite.handlebars b/views/showLite.handlebars
index 413293e9..a061259e 100644
--- a/views/showLite.handlebars
+++ b/views/showLite.handlebars
@@ -9,7 +9,6 @@
 
 	{{else}}
 		<img class="show-asset-lite" src="/media/{{fileInfo.fileName}}" alt="{{fileInfo.fileName}}"/>
-		
 	{{/ifConditional}}
 	</a>
 </div>
\ No newline at end of file
diff --git a/views/twitterPlayer.handlebars b/views/twitterPlayer.handlebars
new file mode 100644
index 00000000..ec88ee84
--- /dev/null
+++ b/views/twitterPlayer.handlebars
@@ -0,0 +1 @@
+<video id="video" width="100%" controls src="https://spee.ch/{{claimId}}/{{fileName}}{{fileExtension}}" type="video/mp4"></video>
\ No newline at end of file