Merge pull request 'feature/2xthumbnails' (#9526) from Skystryder/chakey:feature/2xthumbnails into develop

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9526

packages/backend/src/server/file/send-drive-file.ts

@@ -11,11 +11,7 @@ import { InternalStorage } from "@/services/drive/internal-storage.js";
 import { createTemp } from "@/misc/create-temp.js";
 import { downloadUrl } from "@/misc/download-url.js";
 import { detectType } from "@/misc/get-file-info.js";
-import {
-	convertToWebp,
-	convertToJpeg,
-	convertToPng,
-} from "@/services/drive/image-processor.js";
+import { convertToWebp } from "@/services/drive/image-processor.js";
 import { GenerateVideoThumbnail } from "@/services/drive/generate-video-thumbnail.js";
 import { StatusError } from "@/misc/fetch.js";
 import { FILE_TYPE_BROWSERSAFE } from "@/const.js";
@@ -77,7 +73,7 @@ export default async function (ctx: Koa.Context) {
 								"image/avif",
 							].includes(mime)
 						) {
-							return await convertToWebp(path, 498, 280);
+							return await convertToWebp(path, 996, 560);
 						} else if (mime.startsWith("video/")) {
 							return await GenerateVideoThumbnail(path);
 						}
@@ -85,7 +81,7 @@ export default async function (ctx: Koa.Context) {
 
 					if (isWebpublic) {
 						if (["image/svg+xml"].includes(mime)) {
-							return await convertToPng(path, 2048, 2048);
+							return await convertToWebp(path, 2048, 2048, 100);
 						}
 					}
 

packages/backend/src/server/proxy/proxy-media.ts

@@ -31,9 +31,9 @@ export async function proxyMedia(ctx: Koa.Context) {
 		let image: IImage;
 
 		if ("static" in ctx.query && isConvertibleImage) {
-			image = await convertToWebp(path, 498, 280);
+			image = await convertToWebp(path, 996, 560);
 		} else if ("preview" in ctx.query && isConvertibleImage) {
-			image = await convertToWebp(path, 200, 200);
+			image = await convertToWebp(path, 400, 400);
 		} else if ("badge" in ctx.query) {
 			if (!isConvertibleImage) {
 				// 画像でないなら404でお茶を濁す

packages/backend/src/services/drive/add-file.ts

@@ -30,11 +30,7 @@ import { IdentifiableError } from "@/misc/identifiable-error.js";
 import { getS3 } from "./s3.js";
 import { InternalStorage } from "./internal-storage.js";
 import type { IImage } from "./image-processor.js";
-import {
-	convertSharpToJpeg,
-	convertSharpToWebp,
-	convertSharpToPng,
-} from "./image-processor.js";
+import { convertSharpToWebp } from "./image-processor.js";
 import { driveLogger } from "./logger.js";
 import { GenerateVideoThumbnail } from "./generate-video-thumbnail.js";
 import { deleteFile } from "./delete-file.js";
@@ -75,8 +71,8 @@ async function save(
 			if (type === "image/vnd.mozilla.apng") ext = ".apng";
 		}
 
-		// 拡張子からContent-Typeを設定してそうな挙動を示すオブジェクトストレージ (upcloud?) も存在するので、
-		// 許可されているファイル形式でしか拡張子をつけない
+		// Some cloud providers (notably upcloud) will infer the content-type based
+		// on extension, so we remove extensions from non-browser-safe types.
 		if (!FILE_TYPE_BROWSERSAFE.includes(type)) {
 			ext = "";
 		}
@@ -282,13 +278,13 @@ export async function generateAlts(
 
 		try {
 			if (["image/jpeg"].includes(type)) {
-				webpublic = await convertSharpToJpeg(img, 2048, 2048);
+				webpublic = await convertSharpToWebp(img, 2048, 2048);
 			} else if (["image/webp"].includes(type)) {
-				webpublic = await convertSharpToPng(img, 2048, 2048);
+				webpublic = await convertSharpToWebp(img, 2048, 2048);
 			} else if (["image/png"].includes(type)) {
-				webpublic = await convertSharpToPng(img, 2048, 2048);
+				webpublic = await convertSharpToWebp(img, 2048, 2048, 100);
 			} else if (["image/svg+xml"].includes(type)) {
-				webpublic = await convertSharpToPng(img, 2048, 2048);
+				webpublic = await convertSharpToWebp(img, 2048, 2048);
 			} else {
 				logger.debug("web image not created (not an required image)");
 			}
@@ -315,7 +311,7 @@ export async function generateAlts(
 				"image/avif",
 			].includes(type)
 		) {
-			thumbnail = await convertSharpToWebp(img, 498, 280);
+			thumbnail = await convertSharpToWebp(img, 996, 560);
 		} else {
 			logger.debug("thumbnail not created (not an required file)");
 		}

packages/backend/src/services/drive/generate-video-thumbnail.ts

@@ -1,7 +1,7 @@
 import * as fs from "node:fs";
 import { createTempDir } from "@/misc/create-temp.js";
 import type { IImage } from "./image-processor.js";
-import { convertToJpeg } from "./image-processor.js";
+import { convertToWebp } from "./image-processor.js";
 import FFmpeg from "fluent-ffmpeg";
 
 export async function GenerateVideoThumbnail(source: string): Promise<IImage> {
@@ -22,8 +22,7 @@ export async function GenerateVideoThumbnail(source: string): Promise<IImage> {
 				});
 		});
 
-		// JPEGに変換 (Webpでもいいが、MastodonはWebpをサポートせず表示できなくなる)
-		return await convertToJpeg(`${dir}/out.png`, 498, 280);
+		return await convertToWebp(`${dir}/out.png`, 996, 560);
 	} finally {
 		cleanup();
 	}

packages/backend/src/services/drive/image-processor.ts

@@ -6,42 +6,6 @@ export type IImage = {
 	type: string;
 };
 
-/**
- * Convert to JPEG
- *   with resize, remove metadata, resolve orientation, stop animation
- */
-export async function convertToJpeg(
-	path: string,
-	width: number,
-	height: number,
-): Promise<IImage> {
-	return convertSharpToJpeg(await sharp(path), width, height);
-}
-
-export async function convertSharpToJpeg(
-	sharp: sharp.Sharp,
-	width: number,
-	height: number,
-): Promise<IImage> {
-	const data = await sharp
-		.resize(width, height, {
-			fit: "inside",
-			withoutEnlargement: true,
-		})
-		.rotate()
-		.jpeg({
-			quality: 85,
-			progressive: true,
-		})
-		.toBuffer();
-
-	return {
-		data,
-		ext: "jpg",
-		type: "image/jpeg",
-	};
-}
-
 /**
  * Convert to WebP
  *   with resize, remove metadata, resolve orientation, stop animation
@@ -78,36 +42,3 @@ export async function convertSharpToWebp(
 		type: "image/webp",
 	};
 }
-
-/**
- * Convert to PNG
- *   with resize, remove metadata, resolve orientation, stop animation
- */
-export async function convertToPng(
-	path: string,
-	width: number,
-	height: number,
-): Promise<IImage> {
-	return convertSharpToPng(await sharp(path), width, height);
-}
-
-export async function convertSharpToPng(
-	sharp: sharp.Sharp,
-	width: number,
-	height: number,
-): Promise<IImage> {
-	const data = await sharp
-		.resize(width, height, {
-			fit: "inside",
-			withoutEnlargement: true,
-		})
-		.rotate()
-		.png()
-		.toBuffer();
-
-	return {
-		data,
-		ext: "png",
-		type: "image/png",
-	};
-}