From 586ff6d4bd17fd461f221dbda9ee9cb3910463f9 Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <moonloop.adult@protonmail.com>
Date: Tue, 16 Mar 2021 04:35:26 +0100
Subject: [PATCH] Calculating tag photo dimensions in seed file, improved tag
 photo lazy loading.

---
 assets/components/tags/photos.vue |  7 +++++--
 assets/js/tags/actions.js         |  6 ++++++
 seeds/04_media.js                 | 21 +++++++++++++++++++--
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/assets/components/tags/photos.vue b/assets/components/tags/photos.vue
index 46f3662f..37d943c8 100644
--- a/assets/components/tags/photos.vue
+++ b/assets/components/tags/photos.vue
@@ -10,9 +10,11 @@
 			class="photo-link"
 		>
 			<img
-				:src="`/img/${photo.thumbnail}`"
-				:style="{ 'background-image': `url(/img/${photo.thumbnail})` }"
+				:src="getPath(photo, 'thumbnail', { local: true })"
+				:style="{ 'background-image': `url(${getPath(photo, 'lazy', { local: true })})` }"
 				:alt="photo.comment"
+				:width="photo.width"
+				:height="photo.height"
 				class="photo"
 				@load="$emit('load', $event)"
 			>
@@ -122,6 +124,7 @@ export default {
 
 .poster,
 .photo {
+	width: auto;
 	max-height: 15rem;
 	max-width: 100%;
 	box-shadow: 0 0 3px var(--shadow-weak);
diff --git a/assets/js/tags/actions.js b/assets/js/tags/actions.js
index 69aa0508..7d67df83 100644
--- a/assets/js/tags/actions.js
+++ b/assets/js/tags/actions.js
@@ -39,6 +39,8 @@ function initTagsActions(store, _router) {
                             thumbnail
 							lazy
                             path
+							width
+							height
                             comment
 							entity {
 								id
@@ -69,6 +71,8 @@ function initTagsActions(store, _router) {
                             thumbnail
                             lazy
                             path
+							width
+							height
                             comment
 							entity {
 								id
@@ -160,6 +164,8 @@ function initTagsActions(store, _router) {
                             thumbnail
                             comment
                             lazy
+							width
+							height
 							entity {
 								id
 								name
diff --git a/seeds/04_media.js b/seeds/04_media.js
index 6841e300..0a2969a5 100644
--- a/seeds/04_media.js
+++ b/seeds/04_media.js
@@ -1,4 +1,7 @@
-// const nanoid = require('nanoid/non-secure');
+const path = require('path');
+const Promise = require('bluebird');
+const sharp = require('sharp');
+
 const upsert = require('../src/utils/upsert');
 
 const sfw = Object.entries({
@@ -951,13 +954,27 @@ exports.seed = knex => Promise.resolve()
 			[entity.slug]: entity,
 		}), {});
 
-		const { inserted, updated } = await upsert('media', tagMedia.map(media => ({
+		const tagMediaWithDimensions = await Promise.map(tagMedia, async (media) => {
+			const { width, height } = await sharp(path.join('public/img', media.path)).metadata(); // size not available from filepath
+
+			return {
+				...media,
+				width,
+				height,
+			};
+		}, {
+			concurrency: 20,
+		});
+
+		const { inserted, updated } = await upsert('media', tagMediaWithDimensions.map(media => ({
 			id: media.id,
 			path: media.path,
 			thumbnail: media.thumbnail,
 			lazy: media.lazy,
 			mime: media.mime,
 			index: media.index,
+			width: media.width,
+			height: media.height,
 			comment: media.comment,
 			entity_id: entitiesBySlug[media.entitySlug]?.id,
 		})), 'path', knex);