serve static assets on urls with file extension #538
10 changed files with 103 additions and 28 deletions
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
}
|
||||
|
||||
.nav-bar-link {
|
||||
padding: $secondary-padding;
|
||||
padding: calc(1em - 2px);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
<p className={'text--small'}>OR</p>
|
||||
<p className={'text--large text--underline'}>CHOOSE FILE</p>
|
||||
<FormFeedbackDisplay
|
||||
errorMessage={fileError}
|
||||
defaultMessage={false}
|
||||
/>
|
||||
<Row>
|
||||
<p className={'text--large'}>Drag & drop image or video here to publish</p>
|
||||
</Row>
|
||||
<Row>
|
||||
<p className={'text--small'}>OR</p>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
|
13
index.js
13
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,
|
||||
});
|
||||
app.engine('handlebars', hbs.engine);
|
||||
partialsDir: Path.join(viewsPath, '/partials'),
|
||||
layoutsDir: Path.join(viewsPath, '/layouts')
|
||||
}));
|
||||
app.set('views', viewsPath);
|
||||
app.set('view engine', 'handlebars');
|
||||
|
||||
// set the routes on the app
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,16 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body id="embed-video-player">
|
||||
<body>
|
||||
|
||||
<style type="text/css">
|
||||
video {
|
||||
width:100%;
|
||||
max-width:600px;
|
||||
height:auto;
|
||||
}
|
||||
video {
|
||||
width:100%;
|
||||
max-width:600px;
|
||||
height:auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
{{{body}}}
|
||||
{{{ body }}}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</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>
|
44
test/test-iframe.html
Normal file
44
test/test-iframe.html
Normal file
|
@ -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>
|
Loading…
Reference in a new issue