Add gifs and png support

packages/gallery/src/context/generateThumbnails.js

@@ -2,6 +2,8 @@ import pica from 'pica/dist/pica';
 
 import { FileType } from '../data/file.js';
 
+const THUMBNAIL_MAX_DIMENSION = 320;
+
 export function maxLinearSize(width, height, max) {
 	const ratio = width / height;
 	if (width > height) {
@@ -49,16 +51,27 @@ export async function generateThumbnailForImage(doc) {
 		return;
 	}
 
+	const { width, height } = maxLinearSize(doc.width, doc.height, THUMBNAIL_MAX_DIMENSION);
+
+	if (width < doc.width && height < doc.height) {
+		console.log('generating thumbnail');
+		// Thumbnail would be smaller
 		const attachment = await FileType.getFromURL(doc.sizes.full);
-	const mimetype = attachment.content_type || attachment.type;
+		const mimetype = attachment.type;
-	const { width, height } = maxLinearSize(doc.width, doc.height, 320);
 		const resizedBlob = await resizeImage(attachment, mimetype, width, height);
-
 		const thumbfile = await FileType.upload(resizedBlob);
-
 		await doc.update({
 			sizes: {
 				thumbnail: FileType.getURL(thumbfile)
 			}
 		});
+	} else {
+		console.log('using original as thumbnail');
+		// Thumbnail would be bigger so let's just use the original.
+		await doc.update({
+			sizes: {
+				thumbnail: doc.sizes.full
+			}
+		});
+	}
 }

packages/gallery/src/data/image.js

@@ -1,7 +1,8 @@
 import { PouchDB, TypeSpec } from '../services/db.js';
-import { blobToArrayBuffer } from '../utils/conversion.js';
+import { blobToArrayBuffer, deepAssign } from '../utils/conversion.js';
 import { backgroundTask } from '../utils/event.js';
 import { FileType } from './file.js';
+import { error } from '../services/console.js';
 
 class ImageSpec extends TypeSpec {
 	static async upload(blob) {
@@ -30,7 +31,7 @@ class ImageSpec extends TypeSpec {
 
 	async delete(cascade = true) {
 		if (cascade) {
-			Object.keys(this.sizes).forEach(async key => {
+			new Set(Object.keys(this.sizes)).forEach(async key => {
 				const f = await FileType.getDocFromURL(this.sizes[key]);
 				f.delete();
 			});
@@ -76,23 +77,32 @@ class ImageSpec extends TypeSpec {
 }
 
 const processImportables = backgroundTask(async function _processImportables(image) {
-	const { _id, _rev } = image;
+	const { _id, _rev, sizes, digest } = image;
 	const imageData = await FileType.getFromURL(image.sizes.full);
 
-	const ExifParser = await import('exif-parser');
+	const img = new Image();
+	const imageProps = await new Promise(resolve => {
+		img.onload = () => {
+			resolve({ width: img.width, height: img.height });
+			URL.revokeObjectURL(img.src);
+		};
+		img.src = URL.createObjectURL(imageData);
+	});
 
+	if (new Set(['image/jpg', 'image/jpeg']).has(imageData.type)) {
+		const ExifParser = await import('exif-parser');
 		const buffer = await blobToArrayBuffer(imageData);
 
+		try {
 			const exifData = ExifParser.create(buffer).parse();
-	const { tags, imageSize } = exifData;
+			const { tags } = exifData;
-	const { width, height } = imageSize;
-	const { sizes, digest } = image;
 			const originalDate = new Date(
-		tags.DateTimeOriginal ? new Date(tags.DateTimeOriginal * 1000).toISOString() : image.originalDate
+				tags.DateTimeOriginal
+					? new Date(tags.DateTimeOriginal * 1000).toISOString()
+					: image.originalDate
 			).toISOString();
 
-	delete image.importing;
+			deepAssign(imageProps, {
-	await image.update({
 				originalDate,
 				width,
 				height,
@@ -110,6 +120,13 @@ const processImportables = backgroundTask(async function _processImportables(ima
 					heading: tags.GPSImgDirection
 				}
 			});
+		} catch (e) {
+			error(e);
+		}
+	}
+
+	delete image.importing;
+	image.update(imageProps);
 
 	const module = await import('../context/generateThumbnails');
 	module.generateThumbnailForImage(image);

packages/gallery/src/interface/allImages.js

@@ -90,7 +90,7 @@ export function AllImagesView(vm, params, key, context) {
 				name: 'uploadButton',
 				type: 'file',
 				multiple: true,
-				accept: '.jpg,.jpeg', // no love for gifs, pngs yet
+				accept: '.jpg,.jpeg,.png,.gif',
 				onchange: uploadImages,
 				class: injectStyle({ display: 'none' })
 			})