client/build/components/DropzoneInstructionsDisplay/index.js

@@ -9,22 +9,26 @@ var _react = _interopRequireDefault(require("react"));
 
 var _FormFeedbackDisplay = _interopRequireDefault(require("@components/FormFeedbackDisplay"));
 
+var _Row = _interopRequireDefault(require("@components/Row"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var DropzoneInstructionsDisplay = function DropzoneInstructionsDisplay(_ref) {
   var fileError = _ref.fileError;
   return _react.default.createElement("div", {
     className: 'dropzone-instructions-display'
-  }, _react.default.createElement("p", {
+  }, _react.default.createElement(_Row.default, null, _react.default.createElement("p", {
     className: 'text--large'
-  }, "Drag & drop image or video here to publish"), _react.default.createElement("p", {
+  }, "Drag & drop image or video here to publish")), _react.default.createElement(_Row.default, null, _react.default.createElement("p", {
     className: 'text--small'
-  }, "OR"), _react.default.createElement("p", {
+  }, "OR")), fileError ? _react.default.createElement("div", null, _react.default.createElement(_Row.default, null, _react.default.createElement("p", {
     className: 'text--large text--underline'
-  }, "CHOOSE FILE"), _react.default.createElement(_FormFeedbackDisplay.default, {
+  }, "CHOOSE FILE")), _react.default.createElement(_FormFeedbackDisplay.default, {
     errorMessage: fileError,
     defaultMessage: false
-  }));
+  })) : _react.default.createElement("p", {
+    className: 'text--large text--underline'
+  }, "CHOOSE FILE"));
 };
 
 var _default = DropzoneInstructionsDisplay;

client/scss/_variables.scss

@@ -8,6 +8,7 @@ $failure-color: red;
 
 $primary-padding: 3em;
 $secondary-padding: 2em;
+$tertiary-padding: 1em;
 $thin-padding: 0.3em;
 $full-width-thin-padding: calc(100% - 0.6em);
 

client/scss/components/_nav-bar.scss

@@ -8,7 +8,7 @@
 }
 
 .nav-bar-link {
-  padding: $secondary-padding;
+  padding: calc(1em - 2px);
   display: inline-block;
 }
 

client/src/components/DropzoneInstructionsDisplay/index.jsx

@@ -1,16 +1,29 @@
 import React from 'react';
 import FormFeedbackDisplay from '@components/FormFeedbackDisplay';
+import Row from '@components/Row';
 
 const DropzoneInstructionsDisplay = ({fileError}) => {
   return (
     <div className={'dropzone-instructions-display'}>
-      <p className={'text--large'}>Drag & drop image or video here to publish</p>
+      <Row>
-      <p className={'text--small'}>OR</p>
+        <p className={'text--large'}>Drag & drop image or video here to publish</p>
-      <p className={'text--large text--underline'}>CHOOSE FILE</p>
+      </Row>
-      <FormFeedbackDisplay
+      <Row>
-        errorMessage={fileError}
+        <p className={'text--small'}>OR</p>
-        defaultMessage={false}
+      </Row>
-      />
+      { fileError ? (
+        <div>
+          <Row>
+            <p className={'text--large text--underline'}>CHOOSE FILE</p>
+          </Row>
+          <FormFeedbackDisplay
+            errorMessage={fileError}
+            defaultMessage={false}
+          />
+        </div>
+      ) : (
+        <p className={'text--large text--underline'}>CHOOSE FILE</p>
+      )}
     </div>
   );
 };

index.js

@@ -16,7 +16,6 @@ checkForConfig('siteConfig');
 const express = require('express');
 const bodyParser = require('body-parser');
 const expressHandlebars = require('express-handlebars');
-const Handlebars = require('handlebars');
 const helmet = require('helmet');
 const cookieSession = require('cookie-session');
 const http = require('http');
@@ -81,11 +80,15 @@ function Server () {
     app.use(speechPassport.session());
 
     // configure handlebars & register it with express app
-    const hbs = expressHandlebars.create({
+    const viewsPath = Path.resolve(process.cwd(), 'node_modules/spee.ch/server/views');
+    app.engine('handlebars', expressHandlebars({
+      async: false,
+      dataType: 'text',
       defaultLayout: 'embed',
-      handlebars   : Handlebars,
+      partialsDir: Path.join(viewsPath, '/partials'),
-    });
+      layoutsDir: Path.join(viewsPath, '/layouts')
-    app.engine('handlebars', hbs.engine);
+    }));
+    app.set('views', viewsPath);
     app.set('view engine', 'handlebars');
 
     // set the routes on the app

server/controllers/pages/sendVideoEmbedPage.js

@@ -3,8 +3,11 @@ const { details: { host } } = require('@config/siteConfig');
 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', { layout: 'embed', host, claimId, name });
+  res.status(200).render('embed', { host, claimId, name });
 };
 
 module.exports = sendVideoEmbedPage;

server/views/embed.handlebars

@@ -1 +1,4 @@
-<video width="100%" controls src="{{host}}/{{claimId}}/{{name}}.mp4" type="video/mp4"></video>
+<video controls>
+    <source src="{{host}}/{{claimId}}/{{name}}.mp4" type="video/mp4">
+    Your browser does not support video
+</video>

server/views/layouts/embed.handlebars

@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html>
-<body id="embed-video-player">
+<body>
 
 <style type="text/css">
-video {  
+    video {
-   width:100%; 
+        width:100%;
-   max-width:600px; 
+        max-width:600px;
-   height:auto; 
+        height:auto;
-}
+    }
 </style>
 
-{{{body}}}
+{{{ body }}}
 
 </body>
-</html>
+</html>

test/test-embed.html

@@ -9,12 +9,16 @@
 </head>
 <body>
     <img src="https://media.giphy.com/media/vwEHGjx71HSytx5mY8/giphy-facebook_s.jpg" alt="test embed"/>
+
     <p>no identifier, no ending</p>
     <img src="https://dev1.spee.ch/typingcat" alt="no identifier, no ending"/>
+
     <p>no identifier, yes ending</p>
     <img src="https://dev1.spee.ch/typingcat.gif" alt="no identifier, yes ending"/>
+
     <p>yes identifier, no ending</p>
     <img src="https://dev1.spee.ch/8/typingcat" alt="yes identifier, no ending"/>
+
     <p>yes identifier, yes ending</p>
     <img src="https://dev1.spee.ch/8/typingcat.gif" alt="yes identifier, yes ending"/>
 </body>

test/test-iframe.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <style>
+        iframe {
+            width: 100%;
+        }
+    </style>
+</head>
+<body>
+    <p>i frame: weather.gov</p>
+    <iframe src="http://www.weather.gov/"></iframe>
+
+    <p>i frame: dev1.spee.ch video direct embed page</p>
+    <iframe src="https://dev1.spee.ch/video-embed/sn123ow-1/c3cadc36688ca37c7526536cfed4448e31bacf56">
+        iframe not supported
+    </iframe>
+
+    <p>i frame: dev1.spee.ch image direct asset</p>
+    <iframe src="https://dev1.spee.ch/asset/donut-pla2tter/d8d93f3818f4cb8398637706fb20cc57c441261f">
+        iframe not supported
+    </iframe>
+
+    <p>i frame: image from internet</p>
+    <iframe src="https://c.static-nike.com/a/images/t_PDP_1280_v1/f_auto/kod3bxfy7vx99bca26cb/elite-competition-8p-basketball-721MyM.jpg">
+        iframe not supported
+    </iframe>
+
+    <p>i frame: giphy </p>
+    <iframe src="https://media.giphy.com/media/vwEHGjx71HSytx5mY8/giphy-facebook_s.jpg">
+        iframe not supported
+    </iframe>
+
+    <p>i frame: giphy 2</p>
+    <iframe src="https://media.giphy.com/media/vwEHGjx71HSytx5mY8/giphy-facebook_s">
+        iframe not supported
+    </iframe>
+</body>
+</html>