Merge pull request #3 from i544c-me/feature/fix-drive-setting-page

feat: 画像縮小・非可逆圧縮の設定を分離

locales/en-US.yml

@@ -2374,6 +2374,13 @@ _webhookSettings:
     renote: "When renoted"
     reaction: "When receiving a reaction"
     mention: "When being mentioned"
+_imageCompressionMode:
+  title: "Image compression format"
+  description: "If 'Keep original image' turned off, you can select the image compression format for web publication."
+  imageResize: "Resize image"
+  imageResizeDescription: "If turned on, the size will be reduced to 2560x2560 or less."
+  imageCompressionLossy: "Always Lossy Compression"
+  imageCompressionLossyDescription: "If turned off, the compression mode is automatically selected to lossy or lossless depending on the original image."
 _moderationLogTypes:
   createRole: "Role created"
   deleteRole: "Role deleted"

locales/index.d.ts

@@ -9202,25 +9202,25 @@ export interface Locale extends ILocale {
          */
         "title": string;
         /**
-         * オリジナル画像を保持しない場合に、Web公開用画像の圧縮形式を選択できます。縮小する場合は2560x2560より小さくなるように縮小されます。非可逆圧縮を指定しない場合は、元画像に応じて非可逆圧縮か可逆圧縮かが自動的に選択されます。
+         * オリジナル画像を保持しない場合に、Web公開用画像の圧縮形式を選択できます。
          */
         "description": string;
         /**
-         * 縮小して再圧縮する
+         * 画像を縮小する
          */
-        "resizeCompress": string;
+        "imageResize": string;
         /**
-         * 縮小せず再圧縮する
+         * 縮小する場合は2560x2560以下になるように縮小されます。
          */
-        "noResizeCompress": string;
+        "imageResizeDescription": string;
         /**
-         * 縮小して非可逆圧縮する
+         * 画像を常に非可逆圧縮する
          */
-        "resizeCompressLossy": string;
+        "imageCompressionLossy": string;
         /**
-         * 縮小せず非可逆圧縮する
+         * 非可逆圧縮を指定しない場合は、元画像に応じて非可逆圧縮か可逆圧縮かが自動的に選択されます。
          */
-        "noResizeCompressLossy": string;
+        "imageCompressionLossyDescription": string;
     };
     "_moderationLogTypes": {
         /**

locales/ja-JP.yml

@@ -2442,11 +2442,11 @@ _webhookSettings:
 
 _imageCompressionMode:
   title: "画像の圧縮形式"
-  description: "オリジナル画像を保持しない場合に、Web公開用画像の圧縮形式を選択できます。縮小する場合は2560x2560より小さくなるように縮小されます。非可逆圧縮を指定しない場合は、元画像に応じて非可逆圧縮か可逆圧縮かが自動的に選択されます。"
-  resizeCompress: "縮小して再圧縮する"
-  noResizeCompress: "縮小せず再圧縮する"
-  resizeCompressLossy: "縮小して非可逆圧縮する"
-  noResizeCompressLossy: "縮小せず非可逆圧縮する"
+  description: "オリジナル画像を保持しない場合に、Web公開用画像の圧縮形式を選択できます。"
+  imageResize: "画像を縮小する"
+  imageResizeDescription: "縮小する場合は2560x2560以下になるように縮小されます。"
+  imageCompressionLossy: "画像を常に非可逆圧縮する"
+  imageCompressionLossyDescription: "非可逆圧縮を指定しない場合は、元画像に応じて非可逆圧縮か可逆圧縮かが自動的に選択されます。"
 
 _moderationLogTypes:
   createRole: "ロールを作成"

packages/frontend/src/pages/settings/drive.vue

@@ -44,14 +44,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #label>{{ i18n.ts.keepOriginalUploading }}</template>
 				<template #caption>{{ i18n.ts.keepOriginalUploadingDescription }}</template>
 			</MkSwitch>
-			<MkSelect v-model="imageCompressionMode">
+
+			<MkFolder :defaultOpen="true">
+				<template #icon><i class="ti ti-photo"></i></template>
 				<template #label>{{ i18n.ts._imageCompressionMode.title }}</template>
-				<option value="resizeCompress">{{ i18n.ts._imageCompressionMode.resizeCompress }}</option>
-				<option value="noResizeCompress">{{ i18n.ts._imageCompressionMode.noResizeCompress }}</option>
-				<option value="resizeCompressLossy">{{ i18n.ts._imageCompressionMode.resizeCompressLossy }}</option>
-				<option value="noResizeCompressLossy">{{ i18n.ts._imageCompressionMode.noResizeCompressLossy }}</option>
 				<template #caption>{{ i18n.ts._imageCompressionMode.description }}</template>
-			</MkSelect>
+
+				<div class="_gaps">
+					<MkSwitch v-model="imageResize">
+						<template #label>{{ i18n.ts._imageCompressionMode.imageResize }}</template>
+						<template #caption>{{ i18n.ts._imageCompressionMode.imageResizeDescription }}</template>
+					</MkSwitch>
+					<MkSwitch v-model="imageCompressionLossy">
+						<template #label>{{ i18n.ts._imageCompressionMode.imageCompressionLossy }}</template>
+						<template #caption>{{ i18n.ts._imageCompressionMode.imageCompressionLossyDescription }}</template>
+					</MkSwitch>
+				</div>
+			</MkFolder>
+
 			<MkSwitch v-model="alwaysMarkNsfw" @update:modelValue="saveProfile()">
 				<template #label>{{ i18n.ts.alwaysMarkSensitive }}</template>
 			</MkSwitch>
@@ -65,14 +75,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import tinycolor from 'tinycolor2';
 import FormLink from '@/components/form/link.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import FormSection from '@/components/form/section.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import FormSplit from '@/components/form/split.vue';
+import MkFolder from '@/components/MkFolder.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import bytes from '@/filters/bytes.js';
@@ -81,7 +92,6 @@ import MkChart from '@/components/MkChart.vue';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { signinRequired } from '@/account.js';
-import MkSelect from '@/components/MkSelect.vue';
 
 const $i = signinRequired();
 
@@ -106,6 +116,14 @@ const meterStyle = computed(() => {
 
 const keepOriginalUploading = computed(defaultStore.makeGetterSetter('keepOriginalUploading'));
 const imageCompressionMode = computed(defaultStore.makeGetterSetter('imageCompressionMode'));
+const imageResize = ref(!!imageCompressionMode.value?.startsWith('resize'));
+const imageCompressionLossy = ref(!!imageCompressionMode.value?.endsWith('CompressLossy'));
+
+watch([imageResize, imageCompressionLossy], ([imageResizeValue, imageCompressionLossyValue]) => {
+	const resizeMode: 'resize' | 'noResize' = imageResizeValue ? 'resize' : 'noResize';
+	const compressionMode: 'CompressLossy' | 'Compress' = imageCompressionLossyValue ? 'CompressLossy' : 'Compress';
+	imageCompressionMode.value = resizeMode + compressionMode;
+});
 
 misskeyApi('drive').then(info => {
 	capacity.value = info.capacity;

packages/frontend/src/scripts/upload/compress-config.ts

@@ -60,29 +60,8 @@ export async function getCompressionConfig(file: File): Promise<BrowserImageResi
 	const inputCompressKind = await inputImageKind(file);
 	if (!inputCompressKind) return undefined;
 
-	let compressKind: 'lossy' | 'lossless';
-	let resize: boolean;
-
-	switch (defaultStore.state.imageCompressionMode) {
-		case 'resizeCompress':
-		case null:
-		default:
-			resize = true;
-			compressKind = inputCompressKind;
-			break;
-		case 'noResizeCompress':
-			resize = false;
-			compressKind = inputCompressKind;
-			break;
-		case 'resizeCompressLossy':
-			resize = true;
-			compressKind = 'lossy';
-			break;
-		case 'noResizeCompressLossy':
-			resize = false;
-			compressKind = 'lossy';
-			break;
-	}
+	const resize = defaultStore.state.imageCompressionMode.startsWith('resize');
+	const compressKind = defaultStore.state.imageCompressionMode.endsWith('CompressLossy') ? 'lossy' : inputCompressKind;
 
 	const webpSupported = isWebpSupported();
 

packages/frontend/src/store.ts

@@ -115,7 +115,7 @@ export const defaultStore = markRaw(new Storage('base', {
 	},
 	imageCompressionMode: {
 		where: 'account',
-		default: 'resizeCompress' as 'resizeCompress' | 'noResizeCompress' | 'resizeCompressLossy' | 'noResizeCompressLossy' | null,
+		default: 'resizeCompress' as 'resizeCompress' | 'noResizeCompress' | 'resizeCompressLossy' | 'noResizeCompressLossy',
 	},
 	memo: {
 		where: 'account',