Merge pull request #432 from danactive/danactive/walk-display-files

Walk and sort todo images

api/app/components/Img/test/index.jest.jsx

@@ -1,4 +1,5 @@
 /* global describe, expect, shallow, test */
+
 import React from 'react';
 
 import Img from '../index';

api/app/components/ThumbImg/test/index.jest.jsx

@@ -1,4 +1,5 @@
 /* global describe, expect, shallow, test */
+
 import React from 'react';
 
 import Img from '../index';

api/package.json

@@ -21,18 +21,19 @@
   "dependencies": {
     "@hapi/hapi": "^18.4.1",
     "@hapi/joi": "^15.1.1",
-    "app-root-path": "^2.2.1",
+    "app-root-path": "^3.0.0",
     "async": "^2.6.3",
     "babel-loader": "^7.0.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.16.0",
     "boom": "^7.0.0",
-    "camelcase": "^5.3.1",
+    "camelcase": "^6.0.0",
     "clone": "^2.1.1",
     "dot-prop": "^5.2.0",
     "dotenv": "^8.2.0",
     "dropbox": "^4.0.30",
     "extend": "^3.0.0",
+    "file-loader": "^6.0.0",
     "geojson": "^0.5.0",
     "glob": "^7.1.6",
     "gm": "^1.23.0",
@@ -46,12 +47,15 @@
     "node-notifier": "^7.0.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "sharp": "^0.25.3",
+    "sharp": "^0.25.4",
+    "style-loader": "^1.2.1",
     "styled-components": "^4.4.1",
     "tap-webpack-plugin": "^2.0.0",
     "tuxharness": "^2.0.4",
+    "url-loader": "^4.1.0",
     "vision": "^5.3.1",
     "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12",
     "xml2js": "^0.4.23"
   },
   "devDependencies": {
@@ -60,7 +64,7 @@
     "calipers": "^2.0.0",
     "calipers-jpeg": "^2.0.0",
     "codeclimate-test-reporter": "^0.5.0",
-    "coveralls": "^3.0.9",
+    "coveralls": "^3.1.0",
     "css-loader": "^2.1.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
@@ -71,18 +75,14 @@
     "eslint-plugin-markdown": "^1.0.1",
     "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^2.5.0",
-    "file-loader": "^3.0.1",
     "jest": "^23.6.0",
     "jsdom": "^15.2.1",
     "lodash": "^4.17.15",
     "nyc": "^14.1.1",
     "standard-version": "^8.0.0",
-    "style-loader": "^0.23.0",
     "tape": "^4.13.0",
     "tape-catch": "^1.0.6",
-    "typy": "^3.3.0",
-    "url-loader": "^1.0.1",
-    "webpack-cli": "^3.3.11"
+    "typy": "^3.3.0"
   },
   "description": "Your personal history storyboarded with photo and video albums. Associate photos with their meta data including geocode, caption, friends (characters)... in XML albums.",
   "repository": {

api/server/index.js

@@ -1,3 +1,4 @@
+const boom = require('boom');
 const hapi = require('@hapi/hapi');
 const hapiReactViews = require('hapi-react-views');
 const notifier = require('node-notifier');
@@ -8,14 +9,27 @@ const config = require('../../config.json');
 const log = require('./plugins/log');
 const plugins = require('./lib/plugins');
 
-const { apiPort: port } = config;
+const { apiPort: port, uiPort } = config;
 const logger = log.createLogger('server');
 
 const server = hapi.Server({
   port,
   routes: {
     cors: {
-      origin: ['http://localhost:3000'],
+      origin: [`http://localhost:${uiPort}`],
+    },
+    validate: {
+      failAction: async (request, h, err) => {
+        if (process.env.NODE_ENV === 'production') {
+          // In prod, log a limited error message and throw the default Bad Request error.
+          console.error('ValidationError:', err.message);
+          throw boom.badRequest('Invalid request payload input');
+        } else {
+          // During development, log and respond with the full error.
+          console.error(err);
+          throw err;
+        }
+      },
     },
   },
 });

api/server/lib/plugins.js

@@ -7,7 +7,6 @@ const utils = require('../plugins/utils');
 
 utils.env.load();
 
-const libAdmin = require('../plugins/admin/lib');
 const viewAlbum = require('../plugins/album/lib');
 const editAlbum = require('../plugins/editAlbum/lib');
 const libGallery = require('../plugins/gallery/lib');
@@ -25,11 +24,10 @@ const pkg = require('../../package');
 const plugins = [
   inert,
   vision,
-  { plugin: libAdmin, routes: { prefix: '/admin' } },
   { plugin: viewAlbum, routes: { prefix: '/view' } },
   { plugin: editAlbum, routes: { prefix: '/edit' } },
   { plugin: libGallery },
-  { plugin: generatePreview },
+  { plugin: generatePreview, routes: { prefix: '/preview' } },
   { plugin: libGeojson, routes: { prefix: '/geojson' } },
   { plugin: libHome },
   { plugin: libPublic },

api/server/plugins/album/lib/browser.js

@@ -1,2 +1,2 @@
-require('jquery-colorbox/example1/colorbox.css');
+require('../public/colorbox.css');
 require('jquery-colorbox/jquery.colorbox-min.js');

api/server/plugins/album/public/colorbox.css

@@ -0,0 +1,70 @@
+/*
+    Colorbox Core Style:
+    The following CSS is consistent between example themes and should not be altered.
+*/
+#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
+#cboxWrapper {max-width:none;}
+#cboxOverlay{position:fixed; width:100%; height:100%;}
+#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
+#cboxContent{position:relative;}
+#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
+#cboxTitle{margin:0;}
+#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
+#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
+.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
+.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
+#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
+
+/*
+    User Style:
+    Change the following styles to modify the appearance of Colorbox.  They are
+    ordered & tabbed in a way that represents the nesting of the generated HTML.
+*/
+#cboxOverlay{background:url(/view/album/static/images/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}
+#colorbox{outline:0;}
+#cboxTopLeft{width:21px; height:21px; background:url(/view/album/static/images/controls.png) no-repeat -101px 0;}
+#cboxTopRight{width:21px; height:21px; background:url(/view/album/static/images/controls.png) no-repeat -130px 0;}
+#cboxBottomLeft{width:21px; height:21px; background:url(/view/album/static/images/controls.png) no-repeat -101px -29px;}
+#cboxBottomRight{width:21px; height:21px; background:url(/view/album/static/images/controls.png) no-repeat -130px -29px;}
+#cboxMiddleLeft{width:21px; background:url(/view/album/static/images/controls.png) left top repeat-y;}
+#cboxMiddleRight{width:21px; background:url(/view/album/static/images/controls.png) right top repeat-y;}
+#cboxTopCenter{height:21px; background:url(/view/album/static/images/border.png) 0 0 repeat-x;}
+#cboxBottomCenter{height:21px; background:url(/view/album/static/images/border.png) 0 -29px repeat-x;}
+#cboxContent{background:#fff; overflow:hidden;}
+.cboxIframe{background:#fff;}
+#cboxError{padding:50px; border:1px solid #ccc;}
+#cboxLoadedContent{margin-bottom:28px;}
+#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
+#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
+#cboxLoadingOverlay{background:url(/view/album/static/images/loading_background.png) no-repeat center center;}
+#cboxLoadingGraphic{background:url(/view/album/static/images/loading.gif) no-repeat center center;}
+
+/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
+#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
+
+/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
+#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
+
+#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
+#cboxPrevious{position:absolute; bottom:0; left:0; background:url(/view/album/static/images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
+#cboxPrevious:hover{background-position:-75px -25px;}
+#cboxNext{position:absolute; bottom:0; left:27px; background:url(/view/album/static/images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
+#cboxNext:hover{background-position:-50px -25px;}
+#cboxClose{position:absolute; bottom:0; right:0; background:url(/view/album/static/images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
+#cboxClose:hover{background-position:-25px -25px;}
+
+/*
+  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
+  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
+  See: http://jacklmoore.com/notes/ie-transparency-problems/
+*/
+.cboxIE #cboxTopLeft,
+.cboxIE #cboxTopCenter,
+.cboxIE #cboxTopRight,
+.cboxIE #cboxBottomLeft,
+.cboxIE #cboxBottomCenter,
+.cboxIE #cboxBottomRight,
+.cboxIE #cboxMiddleLeft,
+.cboxIE #cboxMiddleRight {
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
+}

api/server/plugins/generatePreview/lib/index.js

@@ -1,14 +1,11 @@
-const resizeMod = require('./resize');
+const resizer = require('./resize');
 const validation = require('../../../lib/validation');
-const utils = require('../../utils');
-
-const uiPort = utils.config.get('uiPort');
 
 const handler = async (request) => {
   try {
     const sourcePath = request.payload.image_path;
 
-    const out = await resizeMod.resize(sourcePath);
+    const out = await resizer.resize(sourcePath);
     return out;
   } catch (error) {
     return error;
@@ -18,12 +15,9 @@ const handler = async (request) => {
 const register = (server) => {
   server.route({
     method: 'POST',
-    path: '/generate-preview',
+    path: '/generate',
     options: {
       handler,
-      cors: {
-        origin: [`http://localhost:${uiPort}`],
-      },
       tags: ['api', 'jpg', 'resize', 'generator', 'thumbnail'],
       validate: {
         payload: {