From c410294022725e50890f0583ad9ca5a23ca985b1 Mon Sep 17 00:00:00 2001
From: Niels Simenon <niels.simenon@gmail.com>
Date: Thu, 7 May 2020 02:10:28 +0200
Subject: [PATCH] Added lazy-loading to release tile posters.

---
 assets/components/releases/releases.vue |  5 +++-
 assets/components/tile/release.vue      |  6 +++--
 assets/js/fragments.js                  |  2 ++
 assets/js/releases/actions.js           |  2 ++
 config/default.js                       |  2 ++
 src/media.js                            | 31 ++++++++++++++++++-------
 6 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/assets/components/releases/releases.vue b/assets/components/releases/releases.vue
index ffbb23b0..82e5ca54 100644
--- a/assets/components/releases/releases.vue
+++ b/assets/components/releases/releases.vue
@@ -5,7 +5,10 @@
             class="heading"
         ><span class="range">{{ range }}</span> releases for '{{ context }}'</h3>
 
-        <ul class="nolist tiles">
+        <ul
+            v-lazy-container="{ selector: '.thumbnail' }"
+            class="nolist tiles"
+        >
             <li
                 v-for="(release, index) in releases"
                 :key="`release-${release.id}`"
diff --git a/assets/components/tile/release.vue b/assets/components/tile/release.vue
index 0f3b8daa..ae42c946 100644
--- a/assets/components/tile/release.vue
+++ b/assets/components/tile/release.vue
@@ -69,7 +69,8 @@
                 >
                     <img
                         v-if="release.poster"
-                        :src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
+                        :data-src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
+                        :data-loading="sfw ? `/img/${release.poster.sfw.lazy}` : `/media/${release.poster.lazy}`"
                         :alt="release.title"
                         class="thumbnail"
                     >
@@ -81,7 +82,8 @@
                         <img
                             v-for="cover in release.covers"
                             :key="cover.id"
-                            :src="`/${release.batch === 'dummy' ? 'img' : 'media'}/${cover.thumbnail}`"
+                            :data-src="`/media/${cover.thumbnail}`"
+                            :data-loading="`/media/${cover.lazy}`"
                             :alt="release.title"
                             class="thumbnail cover"
                         >
diff --git a/assets/js/fragments.js b/assets/js/fragments.js
index 0b429ee7..6484946d 100644
--- a/assets/js/fragments.js
+++ b/assets/js/fragments.js
@@ -79,6 +79,7 @@ const releasePosterFragment = `
             index
             path
             thumbnail
+            lazy
             comment
             sfw: sfwMedia {
                 id
@@ -96,6 +97,7 @@ const releaseCoversFragment = `
             index
             path
             thumbnail
+            lazy
             comment
             sfw: sfwMedia {
                 id
diff --git a/assets/js/releases/actions.js b/assets/js/releases/actions.js
index af9f8b11..3df2f8c6 100644
--- a/assets/js/releases/actions.js
+++ b/assets/js/releases/actions.js
@@ -72,12 +72,14 @@ function initReleasesActions(store, _router) {
                         media {
                             id
                             thumbnail
+                            lazy
                         }
                     }
                     covers: releasesCovers {
                         media {
                             id
                             thumbnail
+                            lazy
                         }
                     }
                 }
diff --git a/config/default.js b/config/default.js
index 8ac6e8d5..80c90510 100644
--- a/config/default.js
+++ b/config/default.js
@@ -168,6 +168,8 @@ module.exports = {
         path: './media',
         thumbnailSize: 320, // width for 16:9 will be exactly 576px
         thumbnailQuality: 100,
+        lazySize: 90,
+        lazyQuality: 90,
         videoQuality: [480, 360, 320, 540, 720, 1080, 2160, 270, 240, 180],
         limit: 25, // max number of photos per release
     },
diff --git a/src/media.js b/src/media.js
index 8e92a60e..409ab2d3 100644
--- a/src/media.js
+++ b/src/media.js
@@ -267,6 +267,9 @@ async function storeImageFile(media, hashDir, hashSubDir, filename, filedir, fil
     const thumbdir = path.join(media.role, 'thumbs', hashDir, hashSubDir);
     const thumbpath = path.join(thumbdir, filename);
 
+    const lazydir = path.join(media.role, 'lazy', hashDir, hashSubDir);
+    const lazypath = path.join(lazydir, filename);
+
     const image = sharp(media.file.path);
 
     const [info, stat] = await Promise.all([
@@ -277,16 +280,26 @@ async function storeImageFile(media, hashDir, hashSubDir, filename, filedir, fil
     await Promise.all([
         fsPromises.mkdir(path.join(config.media.path, filedir), { recursive: true }),
         fsPromises.mkdir(path.join(config.media.path, thumbdir), { recursive: true }),
+        fsPromises.mkdir(path.join(config.media.path, lazydir), { recursive: true }),
     ]);
 
-    // generate thumbnail
-    await sharp(media.file.path)
-        .resize({
-            height: config.media.thumbnailSize,
-            withoutEnlargement: true,
-        })
-        .jpeg({ quality: config.media.thumbnailQuality })
-        .toFile(path.join(config.media.path, thumbpath));
+    // generate thumbnail and lazy
+    await Promise.all([
+        image
+            .resize({
+                height: config.media.thumbnailSize,
+                withoutEnlargement: true,
+            })
+            .jpeg({ quality: config.media.thumbnailQuality })
+            .toFile(path.join(config.media.path, thumbpath)),
+        image
+            .resize({
+                height: config.media.lazySize,
+                withoutEnlargement: true,
+            })
+            .jpeg({ quality: config.media.lazyQuality })
+            .toFile(path.join(config.media.path, lazypath)),
+    ]);
 
     if (media.meta.subtype === 'jpeg') {
         // move temp file to permanent location
@@ -310,6 +323,7 @@ async function storeImageFile(media, hashDir, hashSubDir, filename, filedir, fil
         file: {
             path: filepath,
             thumbnail: thumbpath,
+            lazy: lazypath,
         },
         meta: {
             ...media.meta,
@@ -492,6 +506,7 @@ function curateMediaEntry(media, index) {
         id: media.id,
         path: media.file.path,
         thumbnail: media.file.thumbnail,
+        lazy: media.file.lazy,
         index,
         mime: media.meta.mimetype,
         hash: media.meta.hash,