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"
>{{ range }} releases for '{{ context }}'
-
+
-
@@ -81,7 +82,8 @@
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,