Merge pull request #132 from lbryio/open-graph

Open graph

helpers/serveHelpers.js

@@ -60,6 +60,15 @@ function checkLocalDbForClaims (name, shortUrl) {
     });
 }
 
+function createOpenGraphInfo ({ fileType, claimId, name, fileName, fileExt }) {
+  return {
+    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}`,
+  };
+}
+
 module.exports = {
   serveFile ({ fileName, fileType, filePath }, res) {
     logger.info(`serving file ${fileName}`);
@@ -86,11 +95,12 @@ module.exports = {
     res.status(200).sendFile(filePath, options);
   },
   showFile (fileInfo, res) {
-    res.status(200).render('show', { layout: 'show', fileInfo });
+    const openGraphInfo = createOpenGraphInfo(fileInfo);
+    res.status(200).render('show', { layout: 'show', fileInfo, openGraphInfo });
   },
   showFileLite (fileInfo, res) {
-    logger.debug('showing file lite');
+    const openGraphInfo = createOpenGraphInfo(fileInfo);
-    res.status(200).render('showLite', { layout: 'show', fileInfo });
+    res.status(200).render('showLite', { layout: 'show', fileInfo, openGraphInfo });
   },
   getClaimIdFromShortUrl (shortUrl, name) {
     return new Promise((resolve, reject) => {

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)

routes/serve-routes.js

@@ -93,11 +93,7 @@ module.exports = (app) => {
         method = SERVE;
       }
     } else {
-      if (headers['accept'] && !headers['accept'].split(',').includes('text/html')) {
+      method = SHOW;
-        method = SERVE;
-      } else {
-        method = SHOW;
-      }
     }
     /* start: temporary patch for backwards compatability spee.ch/name/claim_id */
     if (isValidShortUrlOrClaimId(name) && !isValidShortUrlOrClaimId(identifier)) {

speech.js

@@ -48,6 +48,58 @@ const hbs = expressHandlebars.create({
         </script>`
       );
     },
+    addOpenGraph (title, mimeType, showUrl, source) {
+      let basicTags = `<meta property="og:title" content="${title}"/> 
+          <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') {
+        return new Handlebars.SafeString(
+          `${basicTags} <meta property="og:image" content="https://spee.ch/assets/img/content-freedom-large.png" /> 
+          <meta property="og:image:type" content="image/png" />
+          <meta property="og:image:width" content="600" />
+          <meta property="og:image:height" content="315" />
+          <meta property="og:type" content="video" /> 
+          <meta property="og:video" content="${source}" /> 
+          <meta property="og:video:secure_url" content="${source}" /> 
+          <meta property="og:video:type" content="${mimeType}" />`
+        );
+      } else if (mimeType === 'image/gif') {
+        return new Handlebars.SafeString(
+          `${basicTags} <meta property="og:image" content="${source}" /> 
+          <meta property="og:image:type" content="${mimeType}" />
+          <meta property="og:image:width" content="600" />
+          <meta property="og:image:height" content="315" />
+          <meta property="og:type" content="video.other" />`
+        );
+      } else {
+        return new Handlebars.SafeString(
+          `${basicTags} <meta property="og:image" content="${source}" /> 
+          <meta property="og:image:type" content="${mimeType}" />
+          <meta property="og:image:width" content="600" />
+          <meta property="og:image:height" content="315" />
+          <meta property="og:type" content="article" />`
+        );
+      }
+    },
+    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: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="${directFileUrl}" />
+          <meta name="twitter:player:stream:content_type" content="video/mp4" />
+          `
+        );
+      } else {
+        return new Handlebars.SafeString(
+          `${basicTwitterTags} <meta name="twitter:card" content="summary_large_image" />`
+        );
+      }
+    },
     ifConditional (varOne, operator, varTwo, options) {
       switch (operator) {
         case '===':

views/layouts/main.handlebars

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
@@ -7,7 +7,14 @@
 	<title>Spee.ch</title>
 	<link rel="stylesheet" href="/assets/css/generalStyle.css" type="text/css">
 	<link rel="stylesheet" href="/assets/css/componentStyle.css" type="text/css">
-	{{ twitterCard }}
+	<meta name="twitter:card" content="summary" />
+	<meta name="twitter:site" content="@lbryio" />
+	<meta property="og:title" content="spee.ch">
+	<meta property="og:site_name" content="spee.ch">
+	<meta property="og:type" content="website">
+	<meta property="og:image" content="https://spee.ch/assets/img/content-freedom-64px.png">
+	<meta property="og:url" content="http://spee.ch/">
+	<meta property="og:description" content="Open-source, decentralized image and video hosting.">
 </head>
 <body>
 	{{{ body }}}

views/layouts/show.handlebars

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
@@ -7,17 +7,17 @@
 	<title>Spee.ch</title>
 	<link rel="stylesheet" href="/assets/css/generalStyle.css" type="text/css">
 	<link rel="stylesheet" href="/assets/css/componentStyle.css" type="text/css">
-	<!-- twitter card -->
+	<meta property="fb:app_id" content="1371961932852223">
-	<meta name="twitter:card" content="summary_large_image">
+	{{{addTwitterCard fileInfo.fileType openGraphInfo.source openGraphInfo.twitterPlayerUrl openGraphInfo.directFileUrl}}}
-	<meta name="twitter:site" content="@spee.ch">
+	{{{addOpenGraph fileInfo.name fileInfo.fileType openGraphInfo.showUrl openGraphInfo.source}}}
-	<meta name="twitter:creator" content="@spee.ch">
-	<meta name="twitter:title" content="{{fileInfo.name}}">
-	<meta name="twitter:description" content="An image hosted via Spee.ch">
-	<meta name="twitter:image" content="https://spee.ch/media/{{fileInfo.fileName}}">
 </head>
 <body>
 	{{{ body }}}
 	<!-- google analytics -->
 	{{ googleAnalytics }}
 </body>
-</html>
+</html>
+
+<script>
+
+</script>

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>

views/showLite.handlebars

@@ -6,7 +6,7 @@
 			{{!--fallback--}}
 			Your browser does not support the <code>video</code> element.
 		</video>
-		
+
 	{{else}}
 		<img class="show-asset-lite" src="/media/{{fileInfo.fileName}}" alt="{{fileInfo.fileName}}"/>
 	{{/ifConditional}}

views/twitterPlayer.handlebars

@@ -0,0 +1 @@
+<video id="video" width="100%" controls src="https://spee.ch/{{claimId}}/{{fileName}}{{fileExtension}}" type="video/mp4"></video>