From e6146db781ac0b96a3c26a38183dd358d92557e4 Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Thu, 22 Feb 2018 23:36:37 -0800
Subject: [PATCH] added OpenGraphTag component

---
 helpers/renderFullPage.js                  |  1 +
 react/components/OpenGraphTags/index.jsx   | 21 ++++++
 react/components/OpenGraphTags/view.jsx    | 83 ++++++++++++++++++++++
 react/components/ShowAssetDetails/view.jsx |  2 +
 react/components/ShowAssetLite/view.jsx    |  2 +
 5 files changed, 109 insertions(+)
 create mode 100644 react/components/OpenGraphTags/index.jsx
 create mode 100644 react/components/OpenGraphTags/view.jsx

diff --git a/helpers/renderFullPage.js b/helpers/renderFullPage.js
index 4c5089ad..4786da58 100644
--- a/helpers/renderFullPage.js
+++ b/helpers/renderFullPage.js
@@ -9,6 +9,7 @@ module.exports = (helmet, html, preloadedState) => {
             <meta http-equiv="X-UA-Compatible" content="ie=edge">
             <!--helmet-->
             ${helmet.title.toString()}
+            ${helmet.meta.toString()}
             ${helmet.link.toString()}
             <!--style sheets-->
             <link rel="stylesheet" href="/assets/css/reset.css" type="text/css">
diff --git a/react/components/OpenGraphTags/index.jsx b/react/components/OpenGraphTags/index.jsx
new file mode 100644
index 00000000..0af0073c
--- /dev/null
+++ b/react/components/OpenGraphTags/index.jsx
@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+import View from './view';
+
+const mapStateToProps = ({ show }) => {
+  // select request info
+  const requestId = show.request.id;
+  // select asset info
+  let asset;
+  const request = show.requestList[requestId] || null;
+  const assetList = show.assetList;
+  if (request && assetList) {
+    const assetKey = request.key;  // note: just store this in the request
+    asset = assetList[assetKey] || null;
+  };
+  // return props
+  return {
+    asset,
+  };
+};
+
+export default connect(mapStateToProps, null)(View);
diff --git a/react/components/OpenGraphTags/view.jsx b/react/components/OpenGraphTags/view.jsx
new file mode 100644
index 00000000..85a53cfe
--- /dev/null
+++ b/react/components/OpenGraphTags/view.jsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import Helmet from 'react-helmet';
+
+const { site: { title, host }, claim: { defaultThumbnail, defaultDescription } } = require('../../../config/speechConfig.js');
+
+const determineOgThumbnailContentType = (thumbnail) => {
+  if (thumbnail) {
+    const fileExt = thumbnail.substring(thumbnail.lastIndexOf('.'));
+    switch (fileExt) {
+      case 'jpeg':
+      case 'jpg':
+        return 'image/jpeg';
+      case 'png':
+        return 'image/png';
+      case 'gif':
+        return 'image/gif';
+      case 'mp4':
+        return 'video/mp4';
+      default:
+        return 'image/jpeg';
+    }
+  }
+  return '';
+};
+
+class OpenGraphTags extends React.Component {
+  render () {
+    const { claimData } = this.props.asset;
+    const { contentType } = claimData;
+    const embedUrl = `${host}/${claimData.claimId}/${claimData.name}`;
+    const showUrl = `${host}/${claimData.claimId}/${claimData.name}`;
+    const source = `${host}/${claimData.claimId}/${claimData.name}.${claimData.fileExt}`;
+    const ogTitle = claimData.title || claimData.name;
+    const ogDescription = claimData.description || defaultDescription;
+    const ogThumbnailContentType = determineOgThumbnailContentType(claimData.thumbnail);
+    const ogThumbnail = claimData.thumbnail || defaultThumbnail;
+    return (
+      <div>
+        <Helmet>
+          {/* basic open graph tags */}
+          <meta property='og:title' content={ogTitle} />
+          <meta property='og:url' content={showUrl} />
+          <meta property='og:site_name' content={title} />
+          <meta property='og:description' content={ogDescription} />
+          <meta property='og:image:width' content='600' />
+          <meta property='og:image:height' content='315' />
+          {/* basic twitter tags */}
+          <meta name='twitter:site' content='@spee_ch' />
+        </Helmet>
+        { contentType === 'video/mp4' || contentType === 'video/webm' ? (
+          <Helmet>
+            {/* video open graph tags */}
+            <meta property='og:video' content={source} />
+            <meta property='og:video:secure_url' content={source} />
+            <meta property='og:video:type' content={contentType} />
+            <meta property='og:image' content={ogThumbnail} />
+            <meta property='og:image:type' content={ogThumbnailContentType} />
+            <meta property='og:type' content='video' />
+            {/* video twitter tags */}
+            <meta name='twitter:card' content='player' />
+            <meta name='twitter:player' content={embedUrl} />
+            <meta name='twitter:player:width' content='600' />
+            <meta name='twitter:text:player_width' content='600' />
+            <meta name='twitter:player:height' content='337' />
+            <meta name='twitter:player:stream' content={source} />
+            <meta name='twitter:player:stream:content_type' content={contentType} />
+          </Helmet>
+        ) : (
+          <Helmet>
+            {/* image open graph tags */}
+            <meta property='og:image' content={source} />
+            <meta property='og:image:type' content={contentType} />
+            <meta property='og:type' content='article' />
+            {/* image twitter tags */}
+            <meta name='twitter:card' content='summary_large_image' />
+          </Helmet>
+        )};
+      </div>
+    );
+  }
+};
+
+export default OpenGraphTags;
diff --git a/react/components/ShowAssetDetails/view.jsx b/react/components/ShowAssetDetails/view.jsx
index 3ee78911..af3e168a 100644
--- a/react/components/ShowAssetDetails/view.jsx
+++ b/react/components/ShowAssetDetails/view.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Helmet from 'react-helmet';
+import OpenGraphTags from 'components/OpenGraphTags';
 import NavBar from 'containers/NavBar';
 import ErrorPage from 'components/ErrorPage';
 import AssetTitle from 'components/AssetTitle';
@@ -26,6 +27,7 @@ class ShowAssetDetails extends React.Component {
               <link rel='canonical' href={`${host}/${claimId}/${name}`} />
             )}
           </Helmet>
+          <OpenGraphTags />
           <NavBar />
           <div className='row row--tall row--padded'>
             <div className='column column--10'>
diff --git a/react/components/ShowAssetLite/view.jsx b/react/components/ShowAssetLite/view.jsx
index e919b35d..25b0220a 100644
--- a/react/components/ShowAssetLite/view.jsx
+++ b/react/components/ShowAssetLite/view.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Helmet from 'react-helmet';
+import OpenGraphTags from 'components/OpenGraphTags';
 import { Link } from 'react-router-dom';
 import AssetDisplay from 'components/AssetDisplay';
 
@@ -22,6 +23,7 @@ class ShowLite extends React.Component {
             ) : (
               <link rel='canonical' href={`${host}/${claimId}/${name}.${fileExt}`} />
             )}
+            <OpenGraphTags />
           </Helmet>
           <div>
             <AssetDisplay />