Added lazy-loading to release tile posters.

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}`"

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"
                         >

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

assets/js/releases/actions.js

@@ -72,12 +72,14 @@ function initReleasesActions(store, _router) {
                         media {
                             id
                             thumbnail
+                            lazy
                         }
                     }
                     covers: releasesCovers {
                         media {
                             id
                             thumbnail
+                            lazy
                         }
                     }
                 }

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
     },

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
+    // generate thumbnail and lazy
-    await sharp(media.file.path)
+    await Promise.all([
-        .resize({
+        image
-            height: config.media.thumbnailSize,
+            .resize({
-            withoutEnlargement: true,
+                height: config.media.thumbnailSize,
-        })
+                withoutEnlargement: true,
-        .jpeg({ quality: config.media.thumbnailQuality })
+            })
-        .toFile(path.join(config.media.path, thumbpath));
+            .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,