From 862a29bb6ebde9fbabb9edc63aba0d2fa21af6fc Mon Sep 17 00:00:00 2001 From: DebaucheryLibrarian Date: Thu, 18 Mar 2021 04:36:04 +0100 Subject: [PATCH] Using thumbnail size instead of original photo size in image tags. --- assets/components/actors/photos.vue | 4 +++ assets/components/album/album.vue | 4 +-- assets/components/tags/photos.vue | 4 +-- assets/js/actors/actions.js | 8 ++++++ assets/js/fragments.js | 6 ++++ assets/js/releases/actions.js | 20 ++++++++++++++ assets/js/tags/actions.js | 6 ++++ src/web/plugins/media.js | 43 +++++++++++++++++++++++++++++ src/web/plugins/plugins.js | 2 ++ src/web/postgraphile.js | 3 +- 10 files changed, 95 insertions(+), 5 deletions(-) create mode 100644 src/web/plugins/media.js diff --git a/assets/components/actors/photos.vue b/assets/components/actors/photos.vue index 4835ab2c..621d1efd 100644 --- a/assets/components/actors/photos.vue +++ b/assets/components/actors/photos.vue @@ -17,6 +17,8 @@ :src="getPath(actor.avatar, 'thumbnail')" :style="{ 'background-image': getBgPath(actor.avatar, 'lazy') }" :title="actor.avatar.credit && `© ${actor.avatar.credit}`" + :width="actor.avatar.thumbnailWidth" + :height="actor.avatar.thumbnailHeight" loading="lazy" class="avatar photo" @load="$emit('load', $event)" @@ -35,6 +37,8 @@ :src="getPath(photo, 'thumbnail')" :style="{ 'background-image': getBgPath(photo, 'lazy') }" :title="`© ${photo.credit || photo.entity.name}`" + :width="photo.thumbnailWidth" + :height="photo.thumbnailHeight" loading="lazy" class="photo" @load="$emit('load', $event)" diff --git a/assets/components/album/album.vue b/assets/components/album/album.vue index e0e9c484..543e12c6 100644 --- a/assets/components/album/album.vue +++ b/assets/components/album/album.vue @@ -28,8 +28,8 @@ diff --git a/assets/js/actors/actions.js b/assets/js/actors/actions.js index 60482603..26cf7137 100644 --- a/assets/js/actors/actions.js +++ b/assets/js/actors/actions.js @@ -94,6 +94,10 @@ function initActorActions(store, router) { path thumbnail lazy + width + height + thumbnailWidth + thumbnailHeight hash comment credit @@ -126,6 +130,10 @@ function initActorActions(store, router) { path thumbnail lazy + width + height + thumbnailWidth + thumbnailHeight hash isS3 comment diff --git a/assets/js/fragments.js b/assets/js/fragments.js index ce88777a..3b35b7f1 100644 --- a/assets/js/fragments.js +++ b/assets/js/fragments.js @@ -110,6 +110,8 @@ const releasePosterFragment = ` thumbnail width height + thumbnailWidth + thumbnailHeight lazy isS3 comment @@ -133,6 +135,8 @@ const releaseCoversFragment = ` thumbnail width height + thumbnailWidth + thumbnailHeight lazy isS3 comment @@ -156,6 +160,8 @@ const releasePhotosFragment = ` thumbnail width height + thumbnailWidth + thumbnailHeight lazy isS3 comment diff --git a/assets/js/releases/actions.js b/assets/js/releases/actions.js index a32b9af4..48a9332c 100644 --- a/assets/js/releases/actions.js +++ b/assets/js/releases/actions.js @@ -109,6 +109,10 @@ function initReleasesActions(store, router) { path thumbnail lazy + width + height + thumbnailWidth + thumbnailHeight isS3 sfw: sfwMedia { id @@ -167,6 +171,10 @@ function initReleasesActions(store, router) { id path thumbnail + width + height + thumbnailWidth + thumbnailHeight lazy isS3 } @@ -177,6 +185,10 @@ function initReleasesActions(store, router) { path thumbnail lazy + width + height + thumbnailWidth + thumbnailHeight isS3 } } @@ -185,6 +197,10 @@ function initReleasesActions(store, router) { id path thumbnail + width + height + thumbnailWidth + thumbnailHeight lazy isS3 } @@ -212,6 +228,10 @@ function initReleasesActions(store, router) { path thumbnail lazy + width + height + thumbnailWidth + thumbnailHeight isS3 comment sfw: sfwMedia { diff --git a/assets/js/tags/actions.js b/assets/js/tags/actions.js index 7d67df83..98c8ffeb 100644 --- a/assets/js/tags/actions.js +++ b/assets/js/tags/actions.js @@ -41,6 +41,8 @@ function initTagsActions(store, _router) { path width height + thumbnailWidth + thumbnailHeight comment entity { id @@ -73,6 +75,8 @@ function initTagsActions(store, _router) { path width height + thumbnailWidth + thumbnailHeight comment entity { id @@ -166,6 +170,8 @@ function initTagsActions(store, _router) { lazy width height + thumbnailWidth + thumbnailHeight entity { id name diff --git a/src/web/plugins/media.js b/src/web/plugins/media.js new file mode 100644 index 00000000..62382973 --- /dev/null +++ b/src/web/plugins/media.js @@ -0,0 +1,43 @@ +'use strict'; + +const config = require('config'); +const { makeExtendSchemaPlugin, gql } = require('graphile-utils'); + +const schemaExtender = makeExtendSchemaPlugin(_build => ({ + typeDefs: gql` + extend type Media { + thumbnailWidth: Int @requires(columns: ["width", "height"]) + thumbnailHeight: Int @requires(columns: ["height", "width"]) + } + `, + resolvers: { + Media: { + thumbnailWidth(parent, _args, _context, _info) { + if (!parent.width || !parent.height) { + return null; + } + + if (parent.height <= config.media.thumbnailSize) { + // thumbnails aren't upscaled + return parent.width; + } + + return Math.round(parent.width / (parent.height / config.media.thumbnailSize)); + }, + thumbnailHeight(parent, _args, _context, _info) { + if (!parent.width || !parent.height) { + return null; + } + + if (parent.height <= config.media.thumbnailSize) { + // thumbnails aren't upscaled + return parent.height; + } + + return config.media.thumbnailSize; + }, + }, + }, +})); + +module.exports = [schemaExtender]; diff --git a/src/web/plugins/plugins.js b/src/web/plugins/plugins.js index ec09f859..3920ccf3 100644 --- a/src/web/plugins/plugins.js +++ b/src/web/plugins/plugins.js @@ -3,9 +3,11 @@ const ActorPlugins = require('./actors'); const SitePlugins = require('./sites'); // const ReleasePlugins = require('./releases'); +const MediaPlugins = require('./media'); module.exports = { ActorPlugins, SitePlugins, ReleasePlugins: [], + MediaPlugins, }; diff --git a/src/web/postgraphile.js b/src/web/postgraphile.js index e8e471d6..8b185958 100644 --- a/src/web/postgraphile.js +++ b/src/web/postgraphile.js @@ -8,7 +8,7 @@ const PgConnectionFilterPlugin = require('postgraphile-plugin-connection-filter' const PgSimplifyInflectorPlugin = require('@graphile-contrib/pg-simplify-inflector'); const PgOrderByRelatedPlugin = require('@graphile-contrib/pg-order-by-related'); -const { ActorPlugins, SitePlugins, ReleasePlugins } = require('./plugins/plugins'); +const { ActorPlugins, SitePlugins, ReleasePlugins, MediaPlugins } = require('./plugins/plugins'); const connectionString = `postgres://${config.database.query.user}:${config.database.query.password}@${config.database.query.host}:5432/${config.database.query.database}`; @@ -42,6 +42,7 @@ module.exports = postgraphile( ...ActorPlugins, ...SitePlugins, ...ReleasePlugins, + ...MediaPlugins, ], pgSettings, },