Restore Gallery to it's previous working state with updated tools.

(and relaxed security)

package.json

@@ -17,9 +17,9 @@
 		"date-fns": "~1.29.0",
 		"domvm": "~3.4.11",
 		"exif-parser": "~0.1.9",
-		"express": "~4.16.3",
+		"express": "^4.16.4",
 		"linear-partitioning": "0.3.2",
-		"pica": "~2.0.8",
+		"pica": "~5.1.0",
 		"pouchdb-adapter-idb": "~7.1.1",
 		"pouchdb-attachmentproxy": "git+https://gitea.thecookiejar.me/explorigin/pouchdb-attachmentproxy.git",
 		"pouchdb-core": "~7.1.1",
@@ -35,11 +35,11 @@
 	},
 	"devDependencies": {
 		"css-loader": "^3.2.0",
-		"file-loader": "~1.1.11",
+		"file-loader": "^4.2.0",
-		"html-webpack-plugin": "~3.2.0",
+		"html-webpack-plugin": "^3.2.0",
-		"url-loader": "~1.0.1",
+		"url-loader": "^2.1.0",
-		"webpack": "~4.10.2",
+		"webpack": "^4.39.2",
 		"webpack-cli": "^3.3.7",
-		"webpack-dev-server": "~3.1.4"
+		"webpack-dev-server": "^3.8.0"
 	}
 }

server/headers.js

@@ -1,28 +1,29 @@
 const STANDARD_HEADERS = {
 	'Service-Worker-Allowed': '/', // Allow a service worker to intercept requests
-	'Content-Security-Policy': {
+	// 'Content-Security-Policy': {
-		'default-src': "'self'", // FF has a bug with SVGs: https://bugzilla.mozilla.org/show_bug.cgi?id=1262842
+	// 	'default-src': "'self'", // FF has a bug with SVGs: https://bugzilla.mozilla.org/show_bug.cgi?id=1262842
-		'script-src': "'self'", // TODO: Use "strict-dynamic for production"
+	// 	'script-src': "'self' 'unsafe-eval'", // TODO: Use "strict-dynamic for production"
-		'media-src': "'self'",
+	// 	'media-src': "'self'",
-		'object-src': "'self'",
+	// 	'object-src': "'self'",
-		'img-src': "'self' blob:",
+	// 	'img-src': "'self' blob:",
-		'connect-src': '*',
+	// 	'connect-src': '*',
-		'style-src': "'self' 'unsafe-inline'",
+	// 	'style-src': "'self' 'unsafe-inline'",
-		'worker-src': "'self'",
+	// 	'worker-src': "'*'",
-		'frame-ancestors': "'none'" // No other sight may include this in a frame
+	// 	'frame-ancestors': "'none'" // No other sight may include this in a frame
-	},
+	// },
 	'X-Content-Type-Options': 'nosniff', // http://msdn.microsoft.com/en-us/library/ie/gg622941(v=vs.85).aspx
 	'X-Frame-Options': 'DENY', // No other sight may include this in a frame
 	'X-XSS-Protection': '1; mode=block',
-	'Referrer-Policy': 'same-origin' // Don't send a referrer except back to this server
+	'Referrer-Policy': 'same-origin', // Don't send a referrer except back to this server
+	'Access-Control-Allow-Origin': '*'
 	// 'Strict-Transport-Security': 'max-age=63,13904; includeSubDomains; preload',
 };
 
 function formatHeaders(headers = STANDARD_HEADERS) {
 	const _headers = Object.assign({}, headers);
-	_headers['Content-Security-Policy'] = Object.entries(_headers['Content-Security-Policy'])
+	// _headers['Content-Security-Policy'] = Object.entries(_headers['Content-Security-Policy'])
-		.map(e => e.join(' '))
+	// 	.map(e => e.join(' '))
-		.join('; ');
+	// 	.join('; ');
 	return _headers;
 }
 

src/context/generateThumbnails.js

@@ -1,9 +1,10 @@
-import pica from 'pica/dist/pica';
+import Pica from 'pica';
 
 import { FileType } from '../data/file.js';
 import { ImageType } from '../data/image.js';
 
 const THUMBNAIL_MAX_DIMENSION = 320;
+const pica = Pica();
 
 export function maxLinearSize(width, height, max) {
 	const ratio = width / height;
@@ -35,16 +36,10 @@ async function resizeImage(imageBlob, mimetype, width, height) {
 	$destinationCanvas.width = width;
 	$destinationCanvas.height = height;
 
-	const afterResize = (resolve, reject) => err => {
+	const result = await pica.resize($img, $destinationCanvas);
-		if (err) {
+	const blob = await pica.toBlob(result, mimetype);
-			return reject(err);
+	URL.revokeObjectURL(url);
-		}
+	return blob;
-		$destinationCanvas.toBlob(resolve, mimetype);
-	};
-
-	return new Promise((resolve, reject) => {
-		pica.resizeCanvas($img, $destinationCanvas, {}, afterResize(resolve, reject));
-	});
 }
 
 export async function generateThumbnailForImage(doc) {

src/interface/sectionPhoto.js

@@ -5,6 +5,7 @@ import {
 	patchNodeStyle,
 	subscribeToRender
 } from '../utils/domvm.js';
+import { router } from '../services/router.js';
 import { injectStyle, styled } from '../utils/style.js';
 import { DEFAULT_TRANSITION, FILL_STYLE, IMAGE_MARGIN, CLICKABLE } from './styles.js';
 import { Icon } from './components/icon.js';

src/utils/domvm.js

@@ -1,6 +1,5 @@
-// export * from 'domvm/dist/dev/domvm.dev.js';
+export * from 'domvm';
-export * from 'domvm/dist/mini/domvm.mini.js';
+import { defineView } from 'domvm';
-import { defineView } from 'domvm/dist/mini/domvm.mini.js';
 import { prop, computed, call } from 'reactimal';
 
 import { deepAssign } from './conversion.js';
@@ -87,7 +86,7 @@ export const availableViewportSize = computed(
 export const eventRouter = (handlerMap) => (evt, ...args) => {
 	return Object.entries(handlerMap).filter(([sel, f]) => evt.target.matches(sel))
 	 .map(([sel, f]) => f(evt, ...args))
-	 .some(r => r);
+	 .some(r => !r);
 }
 
 (function getScrollbarSize() {

webpack.config.js

@@ -57,5 +57,11 @@ module.exports = {
 			inject: 'body'
 		})
 	],
+	resolve: {
+		alias: {
+			pica: 'pica/dist/pica.js',
+			domvm: 'domvm/dist/dev/domvm.dev.js'
+		},
+	},
 	devtool: 'source-map'
 };