AVIF support

CALCKEY.md

@@ -84,7 +84,8 @@
 - Phosphor icons instead of FontAwesome
 - Fully deprecate MkEmojiPickerWindow in favor of MkEmojiPickerDialog
 - Link hover effect
-- Replace all `$ts` with i18n
+- Replace all `$ts` with i18n\
+- AVIF support
 - Obliteration of Ai-chan
 - [Make showing ads optional](https://github.com/misskey-dev/misskey/pull/8996)
 - [Tapping avatar in mobile opens account modal](https://github.com/misskey-dev/misskey/pull/9056)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.13-rc.10",
+	"version": "12.119.0-calc.13-rc.11",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",

packages/backend/src/misc/get-file-info.ts

@@ -63,7 +63,7 @@ export async function getFileInfo(path: string, opts: {
 	let height: number | undefined;
 	let orientation: number | undefined;
 
-	if (['image/jpeg', 'image/gif', 'image/png', 'image/apng', 'image/webp', 'image/bmp', 'image/tiff', 'image/svg+xml', 'image/vnd.adobe.photoshop'].includes(type.mime)) {
+	if (['image/jpeg', 'image/gif', 'image/png', 'image/apng', 'image/webp', 'image/bmp', 'image/tiff', 'image/svg+xml', 'image/vnd.adobe.photoshop', 'image/avif'].includes(type.mime)) {
 		const imageSize = await detectImageSize(path).catch(e => {
 			warnings.push(`detectImageSize failed: ${e}`);
 			return undefined;
@@ -90,7 +90,7 @@ export async function getFileInfo(path: string, opts: {
 
 	let blurhash: string | undefined;
 
-	if (['image/jpeg', 'image/gif', 'image/png', 'image/apng', 'image/webp', 'image/svg+xml'].includes(type.mime)) {
+	if (['image/jpeg', 'image/gif', 'image/png', 'image/apng', 'image/webp', 'image/svg+xml', 'image/avif'].includes(type.mime)) {
 		blurhash = await getBlurhash(path).catch(e => {
 			warnings.push(`getBlurhash failed: ${e}`);
 			return undefined;

packages/backend/src/misc/is-mime-image.ts

@@ -2,7 +2,7 @@ import { FILE_TYPE_BROWSERSAFE } from '@/const.js';
 
 const dictionary = {
 	'safe-file': FILE_TYPE_BROWSERSAFE,
-	'sharp-convertible-image': ['image/jpeg', 'image/png', 'image/gif', 'image/apng', 'image/vnd.mozilla.apng', 'image/webp', 'image/svg+xml'],
+	'sharp-convertible-image': ['image/jpeg', 'image/png', 'image/gif', 'image/apng', 'image/vnd.mozilla.apng', 'image/webp', 'image/svg+xml', 'image/avif'],
 };
 
 export const isMimeImage = (mime: string, type: keyof typeof dictionary): boolean => dictionary[type].includes(mime);

packages/backend/src/models/repositories/drive-file.ts

@@ -60,7 +60,7 @@ export const DriveFileRepository = db.getRepository(DriveFile).extend({
 			}
 		}
 
-		const isImage = file.type && ['image/png', 'image/apng', 'image/gif', 'image/jpeg', 'image/webp', 'image/svg+xml'].includes(file.type);
+		const isImage = file.type && ['image/png', 'image/apng', 'image/gif', 'image/jpeg', 'image/webp', 'image/svg+xml', 'image/avif'].includes(file.type);
 
 		return thumbnail ? (file.thumbnailUrl || (isImage ? (file.webpublicUrl || file.url) : null)) : (file.webpublicUrl || file.url);
 	},

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

@@ -59,7 +59,7 @@ export default async function(ctx: Koa.Context) {
 
 				const convertFile = async () => {
 					if (isThumbnail) {
-						if (['image/jpeg', 'image/webp', 'image/png', 'image/svg+xml'].includes(mime)) {
+						if (['image/jpeg', 'image/webp', 'image/png', 'image/svg+xml', 'image/avif'].includes(mime)) {
 							return await convertToWebp(path, 498, 280);
 						} else if (mime.startsWith('video/')) {
 							return await GenerateVideoThumbnail(path);

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

@@ -49,6 +49,7 @@ async function save(file: DriveFile, path: string, name: string, type: string, h
 			if (type === 'image/png') ext = '.png';
 			if (type === 'image/webp') ext = '.webp';
 			if (type === 'image/apng') ext = '.apng';
+			if (type === 'image/avif') ext = '.avif';
 			if (type === 'image/vnd.mozilla.apng') ext = '.apng';
 		}
 
@@ -171,7 +172,7 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
 		}
 	}
 
-	if (!['image/jpeg', 'image/png', 'image/webp', 'image/svg+xml'].includes(type)) {
+	if (!['image/jpeg', 'image/png', 'image/webp', 'image/svg+xml', 'image/avif'].includes(type)) {
 		logger.debug('web image and thumbnail not created (not an required file)');
 		return {
 			webpublic: null,
@@ -238,7 +239,7 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
 	let thumbnail: IImage | null = null;
 
 	try {
-		if (['image/jpeg', 'image/webp', 'image/png', 'image/svg+xml'].includes(type)) {
+		if (['image/jpeg', 'image/webp', 'image/png', 'image/svg+xml', 'image/avif'].includes(type)) {
 			thumbnail = await convertSharpToWebp(img, 498, 280);
 		} else {
 			logger.debug('thumbnail not created (not an required file)');

packages/client/src/const.ts

@@ -11,6 +11,7 @@ export const FILE_TYPE_BROWSERSAFE = [
 	'image/bmp',
 	'image/tiff',
 	'image/x-icon',
+	'image/avif',
 
 	// OggS
 	'audio/opus',

packages/client/src/pages/user/index.photos.vue

@@ -52,6 +52,7 @@ onMounted(() => {
 		'image/gif',
 		'image/apng',
 		'image/vnd.mozilla.apng',
+		'image/avif',
 	];
 	os.api('users/notes', {
 		userId: props.user.id,

packages/client/src/scripts/upload.ts

@@ -26,6 +26,7 @@ const mimeTypeMap = {
 	'image/webp': 'webp',
 	'image/jpeg': 'jpg',
 	'image/png': 'png',
+	'image/avif': 'avif',
 } as const;
 
 export function uploadFile(