feat(View Album): Change HTML5 video to preload, autoplay and use JPE…

…G poster [#104]

package.json

@@ -11,7 +11,7 @@
     "start": "webpack --config plugins/webpack.js && node .",
     "test:all": "gulp --gulpfile plugins/gulpfile.js test",
     "test": "nyc  --extension .jsx tape plugins/**/*.spec.js",
-    "test:react": "babel-tape-runner plugins/album/test/*.js | faucet",
+    "test:react": "babel-tape-runner plugins/album/test/*.js plugins/video/test/*.js | faucet",
     "ci-cover:coveralls": "nyc report --reporter=text-lcov | coveralls",
     "ci-cover:prep-codeclimate": "nyc report --reporter=text-lcov > coverage.lcov",
     "ci-cover:codeclimate": "codeclimate-test-reporter < coverage.lcov"

plugins/album/test/react-thumb-enzyme.js

@@ -2,7 +2,7 @@ import test from 'tape';
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 
-import './react-enzyme-setup';
+import '../../../test/react-enzyme-setup';
 import Thumb from '../views/thumb';
 
 test('React Component - Thumb', { skip: false }, (describe) => {

plugins/utils/lib/index.js

@@ -24,7 +24,7 @@ function customMime(extension) {
   }
 }
 
-const file = {
+const fileMethods = {
   type: (filepath) => {
     if (!filepath) {
       return false;
@@ -42,6 +42,18 @@ const file = {
   photoPath: filepath => filepath && filepath.replace('thumbs', 'photos'),
 };
 
+fileMethods.videoToThumbsPath = (filepath = null, gallery = null) => {
+  if (filepath === null || gallery === null) {
+    return undefined;
+  }
+
+  const year = filepath.substr(0, 4);
+  const firstVideoSource = filepath.split(',')[0];
+  const type = fileMethods.type(firstVideoSource);
+  const file = firstVideoSource.substr(0, firstVideoSource.indexOf(type) - 1);
+  return `/static/gallery-${gallery}/media/thumbs/${year}/${file}.jpg`;
+};
+
 /**
  Find associated path and filename based on file without extension
 
@@ -52,10 +64,10 @@ const file = {
  @param {bool} [options.ignoreExtension] Apply pattern without file extension
  @return {Promise} array of string associated filenames with absolute path
  **/
-file.glob = (sourceFolder, pattern, options = {}) => new Promise((resolve, reject) => {
-  let absolutePath = file.absolutePath(sourceFolder);
+fileMethods.glob = (sourceFolder, pattern, options = {}) => new Promise((resolve, reject) => {
+  let absolutePath = fileMethods.absolutePath(sourceFolder);
   if (options.ignoreExtension === true) {
-    absolutePath = absolutePath.replace(`.${file.type(absolutePath)}`, '');
+    absolutePath = absolutePath.replace(`.${fileMethods.type(absolutePath)}`, '');
   } else {
     absolutePath = path.join(absolutePath, '/');
   }
@@ -70,4 +82,4 @@ file.glob = (sourceFolder, pattern, options = {}) => new Promise((resolve, rejec
   });
 });
 
-module.exports.file = file;
+module.exports.file = fileMethods;

plugins/utils/test/index.spec.js

@@ -105,6 +105,19 @@ tape('Utilities', { skip: false }, (describe) => {
     assert.end();
   });
 
+  describe.test('* File - Convert video filename to thumbs path', (assert) => {
+    const test = lib.file.videoToThumbsPath;
+    assert.equal(test(), undefined, 'Missing path arg');
+    assert.equal(test('2001-video-description.mp4'), undefined, 'Missing gallery');
+    assert.equal(test('2001-video-description.mp4', 'demo'),
+      '/static/gallery-demo/media/thumbs/2001/2001-video-description.jpg', 'Single Video');
+    assert.equal(test('2002-03-21-01.mp4', 'demo'),
+      '/static/gallery-demo/media/thumbs/2002/2002-03-21-01.jpg', 'Single Video as Year');
+    assert.equal(test('2003-video.avi,2004-video.mts', 'demo'),
+      '/static/gallery-demo/media/thumbs/2003/2003-video.jpg', 'Multiple videos');
+    assert.end();
+  });
+
   describe.test('* File - Glob', (assert) => {
     assert.plan(8);
 

plugins/video/test/.eslintrc

@@ -3,6 +3,7 @@
     "rules": {
         "max-len": [2, 150, 4],
         "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
-        "global-require": 0
+        "global-require": 0,
+		"react/jsx-filename-extension": 0
     }
 }

plugins/video/test/index.spec.js

@@ -46,7 +46,6 @@ tape('Verify /video route', { skip: false }, (describe) => {
       });
 
       return server.inject(request, (response) => {
-        assert.ok(response.result.indexOf('<video controls=""') > -1, 'Video controls');
         assert.ok(response.result.indexOf('><source src=') > -1, 'Source element');
         assert.equal((response.result.match(/><source src="/g) || []).length, sources.split(',').length, 'Source elements count');
 

plugins/video/test/react-video-enzyme.js

@@ -0,0 +1,27 @@
+import test from 'tape';
+import React from 'react';
+import { mount } from 'enzyme';
+
+import '../../../test/react-enzyme-setup';
+import Video from '../views/video';
+
+test('React Component - Video', { skip: false }, (describe) => {
+  const item = {
+    w: 800,
+    h: 600,
+    gallery: 'test',
+    sources: '2017-video.mp4',
+  };
+
+  describe.test('* Parent element', (assert) => {
+    const wrapper = mount(<Video video={item} />);
+    const liProps = wrapper.find('video').props();
+    assert.equal(liProps.width, 800, 'Width');
+    assert.equal(liProps.height, 600, 'Height');
+    assert.equal(liProps.poster, '/static/gallery-test/media/photos/2017/2017-video.jpg', 'Poster');
+    assert.equal(liProps.controls, true, 'Controls');
+    assert.equal(liProps.preload, 'auto', 'Preload');
+    assert.equal(liProps.autoPlay, 'true', 'Autoplay');
+    assert.end();
+  });
+});

plugins/video/views/video.jsx

@@ -12,7 +12,9 @@ function Video({ video }) {
     return <Source key={id} extension={extension} gallery={video.gallery} source={source} />;
   });
 
-  return (<video controls width={video.w} height={video.h}>{sources}</video>);
+  const poster = utils.file.photoPath(utils.file.videoToThumbsPath(video.sources, video.gallery));
+
+  return (<video width={video.w} height={video.h} poster={poster} controls preload="auto" autoPlay="true">{sources}</video>);
 }
 
 Video.propTypes = {