wip

locales/index.d.ts

@@ -5473,6 +5473,10 @@ export interface Locale extends ILocale {
      * 全ての「ヒントとコツ」を非表示
      */
     "hideAllTips": string;
+    /**
+     * デフォルトの画像圧縮度
+     */
+    "defaultImageCompressionLevel": string;
     "_chat": {
         /**
          * まだメッセージはありません
@@ -12008,6 +12012,10 @@ export interface Locale extends ILocale {
      * ウォーターマーク
      */
     "watermark": string;
+    /**
+     * デフォルトのプリセット
+     */
+    "defaultPreset": string;
     "_watermarkEditor": {
         /**
          * 画像にクレジット情報などのウォーターマークを追加することができます。

locales/ja-JP.yml

@@ -1363,6 +1363,7 @@ abort: "中止"
 tip: "ヒントとコツ"
 redisplayAllTips: "全ての「ヒントとコツ」を再表示"
 hideAllTips: "全ての「ヒントとコツ」を非表示"
+defaultImageCompressionLevel: "デフォルトの画像圧縮度"
 
 _chat:
   noMessagesYet: "まだメッセージはありません"
@@ -3216,6 +3217,7 @@ _userLists:
   tip: "任意のユーザーが含まれるリストを作成できます。作成したリストはタイムラインとして表示可能です。"
 
 watermark: "ウォーターマーク"
+defaultPreset: "デフォルトのプリセット"
 _watermarkEditor:
   tip: "画像にクレジット情報などのウォーターマークを追加することができます。"
   title: "ウォーターマークの編集"

packages/frontend/src/components/MkUploaderDialog.vue

@@ -40,8 +40,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<div><MkCondensedLine :minScale="2 / 3">{{ ctx.name }}</MkCondensedLine></div>
 							<div :class="$style.itemInfo">
 								<span>{{ ctx.file.type }}</span>
-								<span>{{ bytes(ctx.file.size) }}</span>
 								<span v-if="ctx.compressedSize">({{ i18n.tsx._uploader.compressedToX({ x: bytes(ctx.compressedSize) }) }} = {{ i18n.tsx._uploader.savedXPercent({ x: Math.round((1 - ctx.compressedSize / ctx.file.size) * 100) }) }})</span>
+								<span v-else>{{ bytes(ctx.file.size) }}</span>
 							</div>
 							<div>
 							</div>
@@ -557,8 +557,8 @@ function initializeFile(file: File) {
 		aborted: false,
 		uploaded: null,
 		uploadFailed: false,
-		compressionLevel: 2 as 0 | 1 | 2 | 3,
+		compressionLevel: prefer.s.defaultImageCompressionLevel,
-		watermarkPresetId: null,
+		watermarkPresetId: prefer.s.defaultWatermarkPresetId,
 		file: markRaw(file),
 	};
 	items.value.push(item);

packages/frontend/src/components/MkWatermarkEditorDialog.vue

@@ -52,20 +52,15 @@ import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
-import MkSwitch from '@/components/MkSwitch.vue';
-import FormSlot from '@/components/form/slot.vue';
 import XLayer from '@/components/MkWatermarkEditorDialog.Layer.vue';
 import * as os from '@/os.js';
-import { selectFile } from '@/utility/drive.js';
-import { misskeyApi } from '@/utility/misskey-api.js';
-import { prefer } from '@/preferences.js';
 import { deepClone } from '@/utility/clone.js';
 import { ensureSignin } from '@/i.js';
 
 const $i = ensureSignin();
 
 const props = defineProps<{
-	preset: WatermarkPreset | null;
+	preset?: WatermarkPreset | null;
 }>();
 
 const preset = reactive(deepClone(props.preset) ?? {

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

@@ -39,62 +39,107 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</FormSection>
 		</SearchMarker>
 
-		<FormSection>
+		<SearchMarker :keywords="['general']">
-			<div class="_gaps_m">
+			<FormSection>
-				<SearchMarker :keywords="['default', 'upload', 'folder']">
+				<template #label><SearchLabel>{{ i18n.ts.general }}</SearchLabel></template>
-					<FormLink @click="chooseUploadFolder()">
+
-						<SearchLabel>{{ i18n.ts.uploadFolder }}</SearchLabel>
+				<div class="_gaps_m">
-						<template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template>
+					<SearchMarker :keywords="['default', 'upload', 'folder']">
-						<template #suffixIcon><i class="ti ti-folder"></i></template>
+						<FormLink @click="chooseUploadFolder()">
+							<SearchLabel>{{ i18n.ts.uploadFolder }}</SearchLabel>
+							<template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template>
+							<template #suffixIcon><i class="ti ti-folder"></i></template>
+						</FormLink>
+					</SearchMarker>
+
+					<FormLink to="/settings/drive/cleaner">
+						{{ i18n.ts.drivecleaner }}
 					</FormLink>
-				</SearchMarker>
 
-				<FormLink to="/settings/drive/cleaner">
+					<SearchMarker :keywords="['keep', 'original', 'filename']">
-					{{ i18n.ts.drivecleaner }}
+						<MkPreferenceContainer k="keepOriginalFilename">
-				</FormLink>
+							<MkSwitch v-model="keepOriginalFilename">
+								<template #label><SearchLabel>{{ i18n.ts.keepOriginalFilename }}</SearchLabel></template>
+								<template #caption><SearchKeyword>{{ i18n.ts.keepOriginalFilenameDescription }}</SearchKeyword></template>
+							</MkSwitch>
+						</MkPreferenceContainer>
+					</SearchMarker>
 
-				<SearchMarker :keywords="['watermark', 'credit']">
+					<SearchMarker :keywords="['always', 'default', 'mark', 'nsfw', 'sensitive', 'media', 'file']">
-					<MkFolder>
+						<MkSwitch v-model="alwaysMarkNsfw" @update:modelValue="saveProfile()">
-						<template #icon><i class="ti ti-copyright"></i></template>
+							<template #label><SearchLabel>{{ i18n.ts.alwaysMarkSensitive }}</SearchLabel></template>
-						<template #label><SearchLabel>{{ i18n.ts.watermark }}</SearchLabel></template>
-
-						<div class="_gaps_s">
-							<XWatermarkItem
-								v-for="(preset, i) in prefer.r.watermarkPresets.value"
-								:key="preset.id"
-								:preset="preset"
-								@updatePreset="onUpdateWatermarkPreset(preset.id, $event)"
-								@del="onDeleteWatermarkPreset(preset.id)"
-							/>
-
-							<MkButton iconOnly rounded style="margin: 0 auto;" @click="addWatermarkPreset"><i class="ti ti-plus"></i></MkButton>
-						</div>
-					</MkFolder>
-				</SearchMarker>
-
-				<SearchMarker :keywords="['keep', 'original', 'filename']">
-					<MkPreferenceContainer k="keepOriginalFilename">
-						<MkSwitch v-model="keepOriginalFilename">
-							<template #label><SearchLabel>{{ i18n.ts.keepOriginalFilename }}</SearchLabel></template>
-							<template #caption><SearchKeyword>{{ i18n.ts.keepOriginalFilenameDescription }}</SearchKeyword></template>
 						</MkSwitch>
-					</MkPreferenceContainer>
+					</SearchMarker>
-				</SearchMarker>
 
-				<SearchMarker :keywords="['always', 'default', 'mark', 'nsfw', 'sensitive', 'media', 'file']">
+					<SearchMarker :keywords="['auto', 'nsfw', 'sensitive', 'media', 'file']">
-					<MkSwitch v-model="alwaysMarkNsfw" @update:modelValue="saveProfile()">
+						<MkSwitch v-model="autoSensitive" @update:modelValue="saveProfile()">
-						<template #label><SearchLabel>{{ i18n.ts.alwaysMarkSensitive }}</SearchLabel></template>
+							<template #label><SearchLabel>{{ i18n.ts.enableAutoSensitive }}</SearchLabel><span class="_beta">{{ i18n.ts.beta }}</span></template>
-					</MkSwitch>
+							<template #caption><SearchKeyword>{{ i18n.ts.enableAutoSensitiveDescription }}</SearchKeyword></template>
-				</SearchMarker>
+						</MkSwitch>
+					</SearchMarker>
+				</div>
+			</FormSection>
+		</SearchMarker>
 
-				<SearchMarker :keywords="['auto', 'nsfw', 'sensitive', 'media', 'file']">
+		<SearchMarker :keywords="['image']">
-					<MkSwitch v-model="autoSensitive" @update:modelValue="saveProfile()">
+			<FormSection>
-						<template #label><SearchLabel>{{ i18n.ts.enableAutoSensitive }}</SearchLabel><span class="_beta">{{ i18n.ts.beta }}</span></template>
+				<template #label><SearchLabel>{{ i18n.ts.image }}</SearchLabel></template>
-						<template #caption><SearchKeyword>{{ i18n.ts.enableAutoSensitiveDescription }}</SearchKeyword></template>
+
-					</MkSwitch>
+				<div class="_gaps_m">
-				</SearchMarker>
+					<SearchMarker :keywords="['watermark', 'credit']">
-			</div>
+						<MkFolder>
-		</FormSection>
+							<template #icon><i class="ti ti-copyright"></i></template>
+							<template #label><SearchLabel>{{ i18n.ts.watermark }}</SearchLabel></template>
+
+							<div class="_gaps">
+								<div class="_gaps_s">
+									<XWatermarkItem
+										v-for="(preset, i) in prefer.r.watermarkPresets.value"
+										:key="preset.id"
+										:preset="preset"
+										@updatePreset="onUpdateWatermarkPreset(preset.id, $event)"
+										@del="onDeleteWatermarkPreset(preset.id)"
+									/>
+
+									<MkButton iconOnly rounded style="margin: 0 auto;" @click="addWatermarkPreset"><i class="ti ti-plus"></i></MkButton>
+
+									<SearchMarker :keywords="['sync', 'watermark', 'preset', 'devices']">
+										<MkSwitch :modelValue="watermarkPresetsSyncEnabled" @update:modelValue="changeWatermarkPresetsSyncEnabled">
+											<template #label><i class="ti ti-cloud-cog"></i> <SearchLabel>{{ i18n.ts.syncBetweenDevices }}</SearchLabel></template>
+										</MkSwitch>
+									</SearchMarker>
+								</div>
+
+								<hr>
+
+								<SearchMarker :keywords="['default', 'watermark', 'preset']">
+									<MkPreferenceContainer k="defaultWatermarkPresetId">
+										<MkSelect v-model="defaultWatermarkPresetId" :items="[{ label: i18n.ts.none, value: null }, ...prefer.r.watermarkPresets.value.map(p => ({ label: p.name || i18n.ts.noName, value: p.id }))]">
+											<template #label><SearchLabel>{{ i18n.ts.defaultPreset }}</SearchLabel></template>
+										</MkSelect>
+									</MkPreferenceContainer>
+								</SearchMarker>
+							</div>
+						</MkFolder>
+					</SearchMarker>
+
+					<SearchMarker :keywords="['default', 'image', 'compression']">
+						<MkPreferenceContainer k="defaultImageCompressionLevel">
+							<MkSelect
+								v-model="defaultImageCompressionLevel" :items="[
+									{ label: i18n.ts.none, value: 0 },
+									{ label: i18n.ts.low, value: 1 },
+									{ label: i18n.ts.medium, value: 2 },
+									{ label: i18n.ts.high, value: 3 },
+								]"
+							>
+								<template #label><SearchLabel>{{ i18n.ts.defaultImageCompressionLevel }}</SearchLabel></template>
+							</MkSelect>
+						</MkPreferenceContainer>
+					</SearchMarker>
+				</div>
+			</FormSection>
+		</SearchMarker>
 	</div>
 </SearchMarker>
 </template>
@@ -107,6 +152,7 @@ import XWatermarkItem from './drive.WatermarkItem.vue';
 import type { WatermarkPreset } from '@/utility/watermarker.js';
 import FormLink from '@/components/form/link.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
+import MkSelect from '@/components/MkSelect.vue';
 import FormSection from '@/components/form/section.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import FormSplit from '@/components/form/split.vue';
@@ -146,6 +192,22 @@ const meterStyle = computed(() => {
 });
 
 const keepOriginalFilename = prefer.model('keepOriginalFilename');
+const defaultWatermarkPresetId = prefer.model('defaultWatermarkPresetId');
+const defaultImageCompressionLevel = prefer.model('defaultImageCompressionLevel');
+
+const watermarkPresetsSyncEnabled = ref(prefer.isSyncEnabled('watermarkPresets'));
+
+function changeWatermarkPresetsSyncEnabled(value: boolean) {
+	if (value) {
+		prefer.enableSync('watermarkPresets').then((res) => {
+			if (res == null) return;
+			if (res.enabled) watermarkPresetsSyncEnabled.value = true;
+		});
+	} else {
+		prefer.disableSync('watermarkPresets');
+		watermarkPresetsSyncEnabled.value = false;
+	}
+}
 
 misskeyApi('drive').then(info => {
 	capacity.value = info.capacity;
@@ -203,6 +265,10 @@ function onDeleteWatermarkPreset(id: string) {
 			...prefer.s.watermarkPresets.slice(0, index),
 			...prefer.s.watermarkPresets.slice(index + 1),
 		]);
+
+		if (prefer.s.defaultWatermarkPresetId === id) {
+			prefer.commit('defaultWatermarkPresetId', null);
+		}
 	}
 }
 

packages/frontend/src/preferences/def.ts

@@ -351,8 +351,16 @@ export const PREF_DEF = {
 		default: [] as string[],
 	},
 	watermarkPresets: {
+		accountDependent: true,
 		default: [] as WatermarkPreset[],
 	},
+	defaultWatermarkPresetId: {
+		accountDependent: true,
+		default: null as WatermarkPreset['id'] | null,
+	},
+	defaultImageCompressionLevel: {
+		default: 2,
+	},
 
 	'sound.masterVolume': {
 		default: 0.5,