From 4d4ac5dda5706e8ce5121137f16791d2f0ea7df6 Mon Sep 17 00:00:00 2001
From: mei23 <m@m544.net>
Date: Sat, 22 Jan 2022 20:17:29 +0900
Subject: [PATCH 01/36] wip

---
 .../backend/src/services/drive/add-file.ts    | 12 +++++++++---
 packages/client/package.json                  |  1 +
 packages/client/src/os.ts                     | 17 +++++++++++++++--
 packages/client/yarn.lock                     | 19 +++++++++++++++++++
 4 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/packages/backend/src/services/drive/add-file.ts b/packages/backend/src/services/drive/add-file.ts
index 9de4465eb95b..c117fe9100e0 100644
--- a/packages/backend/src/services/drive/add-file.ts
+++ b/packages/backend/src/services/drive/add-file.ts
@@ -178,6 +178,7 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
 	}
 
 	let img: sharp.Sharp | null = null;
+	let webpublicNeeded: boolean;
 
 	try {
 		img = sharp(path);
@@ -191,6 +192,9 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
 				thumbnail: null,
 			};
 		}
+
+		webpublicNeeded = !!metadata.exif || !!metadata.icc || !!metadata.iptc || !!metadata.xmp || !!metadata.tifftagPhotoshop
+			|| !metadata.width || metadata.width > 2048 || !metadata.height || metadata.height > 2048;
 	} catch (e) {
 		logger.warn(`sharp failed: ${e}`);
 		return {
@@ -206,11 +210,13 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
 		logger.info(`creating web image`);
 
 		try {
-			if (['image/jpeg'].includes(type)) {
+			if (['image/jpeg'].includes(type) && webpublicNeeded) {
 				webpublic = await convertSharpToJpeg(img, 2048, 2048);
-			} else if (['image/webp'].includes(type)) {
+			} else if (['image/webp'].includes(type) && webpublicNeeded) {
 				webpublic = await convertSharpToWebp(img, 2048, 2048);
-			} else if (['image/png', 'image/svg+xml'].includes(type)) {
+			} else if (['image/png'].includes(type) && webpublicNeeded) {
+				webpublic = await convertSharpToPng(img, 2048, 2048);
+			} else if (['image/svg+xml'].includes(type)) {
 				webpublic = await convertSharpToPng(img, 2048, 2048);
 			} else {
 				logger.debug(`web image not created (not an required image)`);
diff --git a/packages/client/package.json b/packages/client/package.json
index 6c4cf764d0c3..19a1fb5a6fb9 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -45,6 +45,7 @@
 		"autwh": "0.1.0",
 		"blurhash": "1.1.4",
 		"broadcast-channel": "4.9.0",
+		"browser-image-resizer": "2.2.1",
 		"chart.js": "3.7.0",
 		"chartjs-adapter-date-fns": "2.0.0",
 		"chartjs-plugin-zoom": "1.2.0",
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index 378523e1bc7f..6e8a93822039 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -9,6 +9,7 @@ import MkPostFormDialog from '@/components/post-form-dialog.vue';
 import MkWaitingDialog from '@/components/waiting-dialog.vue';
 import { resolve } from '@/router';
 import { $i } from '@/account';
+import { readAndCompressImage } from 'browser-image-resizer';
 
 export const pendingApiRequestsCount = ref(0);
 
@@ -548,7 +549,7 @@ export function upload(file: File, folder?: any, name?: string): Promise<Misskey
 		const id = Math.random().toString();
 
 		const reader = new FileReader();
-		reader.onload = (e) => {
+		reader.onload = async (e) => {
 			const ctx = reactive({
 				id: id,
 				name: name || file.name || 'untitled',
@@ -557,12 +558,24 @@ export function upload(file: File, folder?: any, name?: string): Promise<Misskey
 				img: window.URL.createObjectURL(file)
 			});
 
+			let resizedImage: any;
+			if (file.type === 'image/jpeg') {
+				const config = {
+					quality: 0.85,
+					maxWidth: 2048,
+					maxHeight: 2048,
+					autoRotate: true,
+					debug: true
+				};
+				resizedImage = await readAndCompressImage(file, config)
+			}
+
 			uploads.value.push(ctx);
 
 			const data = new FormData();
 			data.append('i', $i.token);
 			data.append('force', 'true');
-			data.append('file', file);
+			data.append('file', resizedImage || file);
 
 			if (folder) data.append('folderId', folder);
 			if (name) data.append('name', name);
diff --git a/packages/client/yarn.lock b/packages/client/yarn.lock
index d983d01ba8df..fe297d10134c 100644
--- a/packages/client/yarn.lock
+++ b/packages/client/yarn.lock
@@ -1428,6 +1428,13 @@ broadcast-channel@4.9.0:
     rimraf "3.0.2"
     unload "2.3.1"
 
+browser-image-resizer@2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/browser-image-resizer/-/browser-image-resizer-2.2.1.tgz#61ba6d71edbdcc2caf2017c5687f5a8cf6301689"
+  integrity sha512-NwtjlgzKzX9zjI8bh77bnVeOrn6ZuOhD1u7NFjNClQbjCEwI4VH0GYqCh5Bcb0WIWZCDEVJFH9PH49Blk53nlw==
+  dependencies:
+    exifreader "^3.1.0"
+
 browser-stdout@1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60"
@@ -2748,6 +2755,13 @@ executable@^4.1.1:
   dependencies:
     pify "^2.2.0"
 
+exifreader@^3.1.0:
+  version "3.16.0"
+  resolved "https://registry.yarnpkg.com/exifreader/-/exifreader-3.16.0.tgz#3c106eccd134e8f4786f9e8e600f8269c5296b80"
+  integrity sha512-RfdE1LrU3KJm8NFnU3jJG4/1quEancwTz1VgwzItP11fBoVnb3Vp7JL8bQKU8rSgZm+Roa3+BJ7zg4OtoFhTFA==
+  optionalDependencies:
+    xmldom "^0.1.31"
+
 exit-on-epipe@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz#0bdd92e87d5285d267daa8171d0eb06159689692"
@@ -6417,6 +6431,11 @@ xml-js@^1.6.11:
   dependencies:
     sax "^1.2.4"
 
+xmldom@^0.1.31:
+  version "0.1.31"
+  resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.31.tgz#b76c9a1bd9f0a9737e5a72dc37231cf38375e2ff"
+  integrity sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==
+
 y18n@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.1.tgz#8db2b83c31c5d75099bb890b23f3094891e247d4"

From bb11a37d1addc3ec161a2abc60c44a2474b46a09 Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Sat, 29 Jan 2022 14:53:16 +0900
Subject: [PATCH 02/36] Update packages/client/src/os.ts

Co-authored-by: tamaina <tamaina@hotmail.co.jp>
---
 packages/client/src/os.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index 6e8a93822039..5664cded77b6 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -567,7 +567,7 @@ export function upload(file: File, folder?: any, name?: string): Promise<Misskey
 					autoRotate: true,
 					debug: true
 				};
-				resizedImage = await readAndCompressImage(file, config)
+				resizedImage = await readAndCompressImage(file, config);
 			}
 
 			uploads.value.push(ctx);

From ed5805e5afe940a40948198f6d20ec4b5ca3dd92 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 29 Jan 2022 18:37:36 +0900
Subject: [PATCH 03/36] =?UTF-8?q?=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC?=
 =?UTF-8?q?=E3=82=92Composition=20API=E5=8C=96=E3=80=81switch=E3=82=A2?=
 =?UTF-8?q?=E3=82=A4=E3=83=86=E3=83=A0=E8=BF=BD=E5=8A=A0=20=E3=82=AF?=
 =?UTF-8?q?=E3=83=A9=E3=82=A4=E3=82=A2=E3=83=B3=E3=83=88=E3=82=B5=E3=82=A4?=
 =?UTF-8?q?=E3=83=89=E7=94=BB=E5=83=8F=E5=9C=A7=E7=B8=AE=E3=81=AE=E6=BA=96?=
 =?UTF-8?q?=E5=82=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                             |   2 +
 .../client/src/components/form/switch.vue     |  64 +++---
 .../client/src/components/ui/context-menu.vue | 128 +++++-------
 packages/client/src/components/ui/menu.vue    | 189 ++++++++----------
 .../client/src/components/ui/popup-menu.vue   |  50 ++---
 packages/client/src/os.ts                     |   9 +-
 packages/client/src/pages/settings/drive.vue  |   7 +-
 packages/client/src/scripts/select-file.ts    |   9 +-
 packages/client/src/store.ts                  |   4 +
 9 files changed, 215 insertions(+), 247 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index b3279d78b88f..8fd41e533b30 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -235,6 +235,8 @@ resetAreYouSure: "リセットしますか？"
 saved: "保存しました"
 messaging: "チャット"
 upload: "アップロード"
+keepOriginalUploading: "オリジナル画像を保持"
+keepOriginalUploadingDescription: "画像をアップロードする時にオリジナル版を保持します。オフにするとアップロード時にブラウザでWeb公開用画像を生成します。"
 fromDrive: "ドライブから"
 fromUrl: "URLから"
 uploadFromUrl: "URLアップロード"
diff --git a/packages/client/src/components/form/switch.vue b/packages/client/src/components/form/switch.vue
index f8a07b4caaae..e57941c6702e 100644
--- a/packages/client/src/components/form/switch.vue
+++ b/packages/client/src/components/form/switch.vue
@@ -20,44 +20,38 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, toRefs } from 'vue';
+<script lang="ts" setup>
+import { toRefs, Ref } from 'vue';
 import * as os from '@/os';
 import Ripple from '@/components/ripple.vue';
 
-export default defineComponent({
-	props: {
-		modelValue: {
-			type: Boolean,
-			default: false
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		}
-	},
-
-	setup(props, context) {
-		const button = ref<HTMLElement>();
-		const checked = toRefs(props).modelValue;
-		const toggle = () => {
-			if (props.disabled) return;
-			context.emit('update:modelValue', !checked.value);
-
-			if (!checked.value) {
-				const rect = button.value.getBoundingClientRect();
-				const x = rect.left + (button.value.offsetWidth / 2);
-				const y = rect.top + (button.value.offsetHeight / 2);
-				os.popup(Ripple, { x, y, particle: false }, {}, 'end');
-			}
-		};
-
-		return {
-			button,
-			checked,
-			toggle,
-		};
-	},
+const props = defineProps<{
+	modelValue: boolean | Ref<boolean>;
+	disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', v: boolean): void;
+}>();
+
+let button = $ref<HTMLElement>();
+const checked = toRefs(props).modelValue;
+const toggle = () => {
+	if (props.disabled) return;
+	emit('update:modelValue', !checked.value);
+
+	if (!checked.value) {
+		const rect = button.getBoundingClientRect();
+		const x = rect.left + (button.offsetWidth / 2);
+		const y = rect.top + (button.offsetHeight / 2);
+		os.popup(Ripple, { x, y, particle: false }, {}, 'end');
+	}
+};
+
+defineExpose({
+	button,
+	checked,
+	toggle,
 });
 </script>
 
diff --git a/packages/client/src/components/ui/context-menu.vue b/packages/client/src/components/ui/context-menu.vue
index 85606bf6d521..463426282aa2 100644
--- a/packages/client/src/components/ui/context-menu.vue
+++ b/packages/client/src/components/ui/context-menu.vue
@@ -1,88 +1,70 @@
 <template>
 <transition :name="$store.state.animation ? 'fade' : ''" appear>
-	<div class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
+	<div ref="rootEl" class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
 		<MkMenu :items="items" class="_popup _shadow" :align="'left'" @close="$emit('closed')"/>
 	</div>
 </transition>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { onMounted, onBeforeUnmount } from 'vue';
 import contains from '@/scripts/contains';
-import MkMenu from './menu.vue';
+import MkMenu, { MenuItem } from './menu.vue';
 import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		MkMenu,
-	},
-	props: {
-		items: {
-			type: Array,
-			required: true
-		},
-		ev: {
-			required: true
-		},
-		viaKeyboard: {
-			type: Boolean,
-			required: false
-		},
-	},
-	emits: ['closed'],
-	data() {
-		return {
-			zIndex: os.claimZIndex('high'),
-		};
-	},
-	computed: {
-		keymap(): any {
-			return {
-				'esc': () => this.$emit('closed'),
-			};
-		},
-	},
-	mounted() {
-		let left = this.ev.pageX + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
-		let top = this.ev.pageY + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
-
-		const width = this.$el.offsetWidth;
-		const height = this.$el.offsetHeight;
-
-		if (left + width - window.pageXOffset > window.innerWidth) {
-			left = window.innerWidth - width + window.pageXOffset;
-		}
-
-		if (top + height - window.pageYOffset > window.innerHeight) {
-			top = window.innerHeight - height + window.pageYOffset;
-		}
-
-		if (top < 0) {
-			top = 0;
-		}
-
-		if (left < 0) {
-			left = 0;
-		}
-
-		this.$el.style.top = top + 'px';
-		this.$el.style.left = left + 'px';
-
-		for (const el of Array.from(document.querySelectorAll('body *'))) {
-			el.addEventListener('mousedown', this.onMousedown);
-		}
-	},
-	beforeUnmount() {
-		for (const el of Array.from(document.querySelectorAll('body *'))) {
-			el.removeEventListener('mousedown', this.onMousedown);
-		}
-	},
-	methods: {
-		onMousedown(e) {
-			if (!contains(this.$el, e.target) && (this.$el != e.target)) this.$emit('closed');
-		},
+const props = defineProps<{
+	items: MenuItem[];
+	ev: MouseEvent;
+}>();
+
+const emit = defineEmits<{
+	(e: 'closed'): void;
+}>();
+
+let rootEl = $ref<HTMLDivElement>();
+
+let zIndex = $ref<number>(os.claimZIndex('high'));
+
+onMounted(() => {
+	let left = props.ev.pageX + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
+	let top = props.ev.pageY + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
+
+	const width = rootEl.offsetWidth;
+	const height = rootEl.offsetHeight;
+
+	if (left + width - window.pageXOffset > window.innerWidth) {
+		left = window.innerWidth - width + window.pageXOffset;
+	}
+
+	if (top + height - window.pageYOffset > window.innerHeight) {
+		top = window.innerHeight - height + window.pageYOffset;
+	}
+
+	if (top < 0) {
+		top = 0;
+	}
+
+	if (left < 0) {
+		left = 0;
+	}
+
+	rootEl.style.top = `${top}px`;
+	rootEl.style.left = `${left}px`;
+
+	for (const el of Array.from(document.querySelectorAll('body *'))) {
+		el.addEventListener('mousedown', onMousedown);
 	}
 });
+
+onBeforeUnmount(() => {
+	for (const el of Array.from(document.querySelectorAll('body *'))) {
+		el.removeEventListener('mousedown', onMousedown);
+	}
+});
+
+function onMousedown(e: Event) {
+	if (!contains(rootEl, e.target) && (rootEl != e.target)) emit('closed');
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/ui/menu.vue b/packages/client/src/components/ui/menu.vue
index 41165c8d3376..6e8e2dd94b12 100644
--- a/packages/client/src/components/ui/menu.vue
+++ b/packages/client/src/components/ui/menu.vue
@@ -1,8 +1,8 @@
 <template>
-<div ref="items" v-hotkey="keymap"
+<div ref="itemsEl" v-hotkey="keymap"
 	class="rrevdjwt"
 	:class="{ center: align === 'center', asDrawer }"
-	:style="{ width: (width && !asDrawer) ? width + 'px' : null, maxHeight: maxHeight ? maxHeight + 'px' : null }"
+	:style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }"
 	@contextmenu.self="e => e.preventDefault()"
 >
 	<template v-for="(item, i) in items2">
@@ -28,6 +28,9 @@
 			<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
 			<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 		</button>
+		<span v-else-if="item.type === 'switch'" :tabindex="i" class="item">
+			<FormSwitch v-model="item.ref" class="form-switch">{{ item.text }}</FormSwitch>
+		</span>
 		<button v-else :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)">
 			<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
 			<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
@@ -42,113 +45,97 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, unref } from 'vue';
+import * as Misskey from 'misskey-js';
+import { Ref } from 'vue';
+
+export type MenuAction = (ev: MouseEvent) => void;
+
+export type MenuDivider = null;
+export type MenuNull = undefined;
+export type MenuLabel = { type: 'label', text: string };
+export type MenuLink = { type: 'link', to: string, text: string, icon?: string, indicate?: boolean, avatar: Misskey.entities.User };
+export type MenuA = { type: 'a', href: string, target?: string, download?: string, text: string, icon?: string, indicate?: boolean };
+export type MenuUser = { type: 'user', user: Misskey.entities.User, active?: boolean, indicate?: boolean, action: MenuAction };
+export type MenuSwitch = { type: 'switch', ref: Ref<boolean>, text: string };
+export type MenuButton = { type?: 'button', text: string, icon?: string, indicate?: boolean, danger?: boolean, active?: boolean, avatar: Misskey.entities.User; action: MenuAction };
+
+export type MenuPending = { type: 'pending' };
+
+type OuterMenuItem = MenuDivider | MenuNull | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton;
+export type MenuItem = OuterMenuItem | Promise<OuterMenuItem>;
+export type InnerMenuItem = MenuDivider | MenuPending | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton;
+</script>
+<script lang="ts" setup>
+import { nextTick, onMounted, watch } from 'vue';
 import { focusPrev, focusNext } from '@/scripts/focus';
-import contains from '@/scripts/contains';
-
-export default defineComponent({
-	props: {
-		items: {
-			type: Array,
-			required: true
-		},
-		viaKeyboard: {
-			type: Boolean,
-			required: false
-		},
-		asDrawer: {
-			type: Boolean,
-			required: false
-		},
-		align: {
-			type: String,
-			requried: false
-		},
-		width: {
-			type: Number,
-			required: false
-		},
-		maxHeight: {
-			type: Number,
-			required: false
-		},
-	},
-	emits: ['close'],
-	data() {
-		return {
-			items2: [],
-		};
-	},
-	computed: {
-		keymap(): any {
-			return {
-				'up|k|shift+tab': this.focusUp,
-				'down|j|tab': this.focusDown,
-				'esc': this.close,
-			};
-		},
-	},
-	watch: {
-		items: {
-			handler() {
-				const items = ref(unref(this.items).filter(item => item !== undefined));
-
-				for (let i = 0; i < items.value.length; i++) {
-					const item = items.value[i];
-					
-					if (item && item.then) { // if item is Promise
-						items.value[i] = { type: 'pending' };
-						item.then(actualItem => {
-							items.value[i] = actualItem;
-						});
-					}
-				}
+import FormSwitch from '@/components/form/switch.vue';
 
-				this.items2 = items;
-			},
-			immediate: true
-		}
-	},
-	mounted() {
-		if (this.viaKeyboard) {
-			this.$nextTick(() => {
-				focusNext(this.$refs.items.children[0], true, false);
+const props = defineProps<{
+	items: MenuItem[];
+	viaKeyboard?: boolean;
+	asDrawer?: boolean;
+	align?: 'center' | string;
+	width?: number;
+	maxHeight?: number;
+}>();
+
+const emit = defineEmits<{
+	(e: 'close'): void;
+}>();
+
+let itemsEl = $ref<HTMLDivElement>();
+
+let items2: InnerMenuItem[] = $ref([]);
+
+let keymap = $computed(() => ({
+	'up|k|shift+tab': focusUp,
+	'down|j|tab': focusDown,
+	'esc': close,
+}));
+
+watch(() => props.items, () => {
+	const items: (MenuItem | MenuPending)[] = [...props.items].filter(item => item !== undefined);
+
+	for (let i = 0; i < items.length; i++) {
+		const item = items[i];
+
+		if (item && 'then' in item) { // if item is Promise
+			items[i] = { type: 'pending' };
+			item.then(actualItem => {
+				items[i] = actualItem;
 			});
 		}
+	}
 
-		if (this.contextmenuEvent) {
-			this.$el.style.top = this.contextmenuEvent.pageY + 'px';
-			this.$el.style.left = this.contextmenuEvent.pageX + 'px';
+	items2 = items as InnerMenuItem[];
+}, {
+	immediate: true,
+});
 
-			for (const el of Array.from(document.querySelectorAll('body *'))) {
-				el.addEventListener('mousedown', this.onMousedown);
-			}
-		}
-	},
-	beforeUnmount() {
-		for (const el of Array.from(document.querySelectorAll('body *'))) {
-			el.removeEventListener('mousedown', this.onMousedown);
-		}
-	},
-	methods: {
-		clicked(fn, ev) {
-			fn(ev);
-			this.close();
-		},
-		close() {
-			this.$emit('close');
-		},
-		focusUp() {
-			focusPrev(document.activeElement);
-		},
-		focusDown() {
-			focusNext(document.activeElement);
-		},
-		onMousedown(e) {
-			if (!contains(this.$el, e.target) && (this.$el != e.target)) this.close();
-		},
+onMounted(() => {
+	if (props.viaKeyboard) {
+		nextTick(() => {
+			focusNext(itemsEl.children[0], true, false);
+		});
 	}
 });
+
+function clicked(fn: MenuAction, ev: MouseEvent) {
+	fn(ev);
+	close();
+}
+
+function close() {
+	emit('close');
+}
+
+function focusUp() {
+	focusPrev(document.activeElement);
+}
+
+function focusDown() {
+	focusNext(document.activeElement);
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/ui/popup-menu.vue b/packages/client/src/components/ui/popup-menu.vue
index 8ffc4ad19556..ecf5db1b7171 100644
--- a/packages/client/src/components/ui/popup-menu.vue
+++ b/packages/client/src/components/ui/popup-menu.vue
@@ -1,44 +1,28 @@
 <template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'high'" :src="src" :transparent-bg="true" @click="$refs.modal.close()" @closed="$emit('closed')">
-	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" class="sfhdhdhq _popup _shadow" :class="{ drawer: type === 'drawer' }" @close="$refs.modal.close()"/>
+<MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'high'" :src="src" :transparent-bg="true" @click="modal.close()" @closed="emit('closed')">
+	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" class="sfhdhdhq _popup _shadow" :class="{ drawer: type === 'drawer' }" @close="modal.close()"/>
 </MkModal>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import MkModal from './modal.vue';
-import MkMenu from './menu.vue';
+import MkMenu, { MenuItem } from './menu.vue';
 
-export default defineComponent({
-	components: {
-		MkModal,
-		MkMenu,
-	},
+defineProps<{
+	items: MenuItem[];
+	align?: 'center' | string;
+	width?: number;
+	viaKeyboard?: boolean;
+	src?: any;
+	ev: MouseEvent;
+}>();
 
-	props: {
-		items: {
-			type: Array,
-			required: true
-		},
-		align: {
-			type: String,
-			required: false
-		},
-		width: {
-			type: Number,
-			required: false
-		},
-		viaKeyboard: {
-			type: Boolean,
-			required: false
-		},
-		src: {
-			required: false
-		},
-	},
+const emit = defineEmits<{
+	(e: 'closed'): void;
+}>();
 
-	emits: ['close', 'closed'],
-});
+let modal = $ref<InstanceType<typeof MkModal>>();
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index f3be5c68fbba..3c8e5708b048 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -7,6 +7,7 @@ import * as Misskey from 'misskey-js';
 import { apiUrl, url } from '@/config';
 import MkPostFormDialog from '@/components/post-form-dialog.vue';
 import MkWaitingDialog from '@/components/waiting-dialog.vue';
+import { MenuItem } from '@/components/ui/menu.vue';
 import { resolve } from '@/router';
 import { $i } from '@/account';
 
@@ -470,7 +471,7 @@ export async function openEmojiPicker(src?: HTMLElement, opts, initialTextarea:
 	});
 }
 
-export function popupMenu(items: any[] | Ref<any[]>, src?: HTMLElement, options?: {
+export function popupMenu(items: MenuItem[] | Ref<MenuItem[]>, src?: HTMLElement, options?: {
 	align?: string;
 	width?: number;
 	viaKeyboard?: boolean;
@@ -494,7 +495,7 @@ export function popupMenu(items: any[] | Ref<any[]>, src?: HTMLElement, options?
 	});
 }
 
-export function contextMenu(items: any[], ev: MouseEvent) {
+export function contextMenu(items: MenuItem[] | Ref<MenuItem[]>, ev: MouseEvent) {
 	ev.preventDefault();
 	return new Promise((resolve, reject) => {
 		let dispose;
@@ -541,7 +542,7 @@ export const uploads = ref<{
 	img: string;
 }[]>([]);
 
-export function upload(file: File, folder?: any, name?: string): Promise<Misskey.entities.DriveFile> {
+export function upload(file: File, folder?: any, name?: string, keepOriginal?: boolean): Promise<Misskey.entities.DriveFile> {
 	if (folder && typeof folder == 'object') folder = folder.id;
 
 	return new Promise((resolve, reject) => {
@@ -559,6 +560,8 @@ export function upload(file: File, folder?: any, name?: string): Promise<Misskey
 
 			uploads.value.push(ctx);
 
+			console.log(keepOriginal);
+
 			const data = new FormData();
 			data.append('i', $i.token);
 			data.append('force', 'true');
diff --git a/packages/client/src/pages/settings/drive.vue b/packages/client/src/pages/settings/drive.vue
index f1016ebd843c..134fa633080c 100644
--- a/packages/client/src/pages/settings/drive.vue
+++ b/packages/client/src/pages/settings/drive.vue
@@ -28,6 +28,7 @@
 			<template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template>
 			<template #suffixIcon><i class="fas fa-folder-open"></i></template>
 		</FormLink>
+		<FormSwitch v-model="keepOriginalUploading" class="_formBlock">{{ $ts.keepOriginalUploading }}<template #caption>{{ $ts.keepOriginalUploadingDescription }}</template></FormSwitch>
 	</FormSection>
 </div>
 </template>
@@ -36,18 +37,21 @@
 import { defineComponent } from 'vue';
 import * as tinycolor from 'tinycolor2';
 import FormLink from '@/components/form/link.vue';
+import FormSwitch from '@/components/form/switch.vue';
 import FormSection from '@/components/form/section.vue';
 import MkKeyValue from '@/components/key-value.vue';
 import FormSplit from '@/components/form/split.vue';
 import * as os from '@/os';
 import bytes from '@/filters/bytes';
 import * as symbols from '@/symbols';
+import { defaultStore } from '@/store';
 
 // TODO: render chart
 
 export default defineComponent({
 	components: {
 		FormLink,
+		FormSwitch,
 		FormSection,
 		MkKeyValue,
 		FormSplit,
@@ -79,7 +83,8 @@ export default defineComponent({
 					l: 0.5
 				})
 			};
-		}
+		},
+		keepOriginalUploading: defaultStore.makeGetterSetter('keepOriginalUploading'),
 	},
 
 	async created() {
diff --git a/packages/client/src/scripts/select-file.ts b/packages/client/src/scripts/select-file.ts
index 56e0b564f367..23df4edf54aa 100644
--- a/packages/client/src/scripts/select-file.ts
+++ b/packages/client/src/scripts/select-file.ts
@@ -1,3 +1,4 @@
+import { ref } from 'vue';
 import * as os from '@/os';
 import { stream } from '@/stream';
 import { i18n } from '@/i18n';
@@ -6,12 +7,14 @@ import { DriveFile } from 'misskey-js/built/entities';
 
 function select(src: any, label: string | null, multiple: boolean): Promise<DriveFile | DriveFile[]> {
 	return new Promise((res, rej) => {
+		const keepOriginal = ref(defaultStore.state.keepOriginalUploading);
+
 		const chooseFileFromPc = () => {
 			const input = document.createElement('input');
 			input.type = 'file';
 			input.multiple = multiple;
 			input.onchange = () => {
-				const promises = Array.from(input.files).map(file => os.upload(file, defaultStore.state.uploadFolder));
+				const promises = Array.from(input.files).map(file => os.upload(file, defaultStore.state.uploadFolder, undefined, keepOriginal.value));
 
 				Promise.all(promises).then(driveFiles => {
 					res(multiple ? driveFiles : driveFiles[0]);
@@ -74,6 +77,10 @@ function select(src: any, label: string | null, multiple: boolean): Promise<Driv
 			text: label,
 			type: 'label'
 		} : undefined, {
+			type: 'switch',
+			text: i18n.ts.keepOriginalUploading,
+			ref: keepOriginal
+		}, {
 			text: i18n.ts.upload,
 			icon: 'fas fa-upload',
 			action: chooseFileFromPc
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index cd358d29d03d..b80fc8bbe38d 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -43,6 +43,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'account',
 		default: 'yyyy-MM-dd HH-mm-ss [{{number}}]'
 	},
+	keepOriginalUploading: {
+		where: 'account',
+		default: false
+	},
 	memo: {
 		where: 'account',
 		default: null

From 0a788d1df1f7477df11906edf7ede843ebe48f0e Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 29 Jan 2022 18:45:24 +0900
Subject: [PATCH 04/36] =?UTF-8?q?=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC?=
 =?UTF-8?q?=E5=9E=8B=E5=AE=9A=E7=BE=A9=E3=82=92=E5=88=86=E9=9B=A2=20(TypeS?=
 =?UTF-8?q?cript=E3=81=AE=E5=9E=8B=E6=94=AF=E6=8F=B4=E3=81=8C=E5=8A=B9?=
 =?UTF-8?q?=E3=81=8B=E3=81=AA=E3=81=84=E3=81=AE=E3=81=A7)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../client/src/components/ui/context-menu.vue |  3 ++-
 packages/client/src/components/ui/menu.vue    | 22 +------------------
 .../client/src/components/ui/popup-menu.vue   |  3 ++-
 packages/client/src/os.ts                     |  2 +-
 packages/client/src/types/menu.ts             | 19 ++++++++++++++++
 5 files changed, 25 insertions(+), 24 deletions(-)
 create mode 100644 packages/client/src/types/menu.ts

diff --git a/packages/client/src/components/ui/context-menu.vue b/packages/client/src/components/ui/context-menu.vue
index 463426282aa2..f491b43b46fd 100644
--- a/packages/client/src/components/ui/context-menu.vue
+++ b/packages/client/src/components/ui/context-menu.vue
@@ -9,7 +9,8 @@
 <script lang="ts" setup>
 import { onMounted, onBeforeUnmount } from 'vue';
 import contains from '@/scripts/contains';
-import MkMenu, { MenuItem } from './menu.vue';
+import MkMenu from './menu.vue';
+import { MenuItem } from './types/menu.vue';
 import * as os from '@/os';
 
 const props = defineProps<{
diff --git a/packages/client/src/components/ui/menu.vue b/packages/client/src/components/ui/menu.vue
index 6e8e2dd94b12..02f470ac3043 100644
--- a/packages/client/src/components/ui/menu.vue
+++ b/packages/client/src/components/ui/menu.vue
@@ -44,31 +44,11 @@
 </div>
 </template>
 
-<script lang="ts">
-import * as Misskey from 'misskey-js';
-import { Ref } from 'vue';
-
-export type MenuAction = (ev: MouseEvent) => void;
-
-export type MenuDivider = null;
-export type MenuNull = undefined;
-export type MenuLabel = { type: 'label', text: string };
-export type MenuLink = { type: 'link', to: string, text: string, icon?: string, indicate?: boolean, avatar: Misskey.entities.User };
-export type MenuA = { type: 'a', href: string, target?: string, download?: string, text: string, icon?: string, indicate?: boolean };
-export type MenuUser = { type: 'user', user: Misskey.entities.User, active?: boolean, indicate?: boolean, action: MenuAction };
-export type MenuSwitch = { type: 'switch', ref: Ref<boolean>, text: string };
-export type MenuButton = { type?: 'button', text: string, icon?: string, indicate?: boolean, danger?: boolean, active?: boolean, avatar: Misskey.entities.User; action: MenuAction };
-
-export type MenuPending = { type: 'pending' };
-
-type OuterMenuItem = MenuDivider | MenuNull | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton;
-export type MenuItem = OuterMenuItem | Promise<OuterMenuItem>;
-export type InnerMenuItem = MenuDivider | MenuPending | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton;
-</script>
 <script lang="ts" setup>
 import { nextTick, onMounted, watch } from 'vue';
 import { focusPrev, focusNext } from '@/scripts/focus';
 import FormSwitch from '@/components/form/switch.vue';
+import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from '@/types/menu';
 
 const props = defineProps<{
 	items: MenuItem[];
diff --git a/packages/client/src/components/ui/popup-menu.vue b/packages/client/src/components/ui/popup-menu.vue
index ecf5db1b7171..0a86c77e9190 100644
--- a/packages/client/src/components/ui/popup-menu.vue
+++ b/packages/client/src/components/ui/popup-menu.vue
@@ -7,7 +7,8 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import MkModal from './modal.vue';
-import MkMenu, { MenuItem } from './menu.vue';
+import MkMenu from './menu.vue';
+import { MenuItem } from '@/types/menu';
 
 defineProps<{
 	items: MenuItem[];
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index 3c8e5708b048..a8d1f933d6b9 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -7,7 +7,7 @@ import * as Misskey from 'misskey-js';
 import { apiUrl, url } from '@/config';
 import MkPostFormDialog from '@/components/post-form-dialog.vue';
 import MkWaitingDialog from '@/components/waiting-dialog.vue';
-import { MenuItem } from '@/components/ui/menu.vue';
+import { MenuItem } from '@/types/menu';
 import { resolve } from '@/router';
 import { $i } from '@/account';
 
diff --git a/packages/client/src/types/menu.ts b/packages/client/src/types/menu.ts
new file mode 100644
index 000000000000..ec79e74c07a2
--- /dev/null
+++ b/packages/client/src/types/menu.ts
@@ -0,0 +1,19 @@
+import * as Misskey from 'misskey-js';
+import { Ref } from 'vue';
+
+export type MenuAction = (ev: MouseEvent) => void;
+
+export type MenuDivider = null;
+export type MenuNull = undefined;
+export type MenuLabel = { type: 'label', text: string };
+export type MenuLink = { type: 'link', to: string, text: string, icon?: string, indicate?: boolean, avatar: Misskey.entities.User };
+export type MenuA = { type: 'a', href: string, target?: string, download?: string, text: string, icon?: string, indicate?: boolean };
+export type MenuUser = { type: 'user', user: Misskey.entities.User, active?: boolean, indicate?: boolean, action: MenuAction };
+export type MenuSwitch = { type: 'switch', ref: Ref<boolean>, text: string };
+export type MenuButton = { type?: 'button', text: string, icon?: string, indicate?: boolean, danger?: boolean, active?: boolean, avatar: Misskey.entities.User; action: MenuAction };
+
+export type MenuPending = { type: 'pending' };
+
+type OuterMenuItem = MenuDivider | MenuNull | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton;
+export type MenuItem = OuterMenuItem | Promise<OuterMenuItem>;
+export type InnerMenuItem = MenuDivider | MenuPending | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton;

From 8da8329b5136c7472f1181fbbfb0eeb62c639c0c Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 29 Jan 2022 18:48:11 +0900
Subject: [PATCH 05/36] disabled

---
 packages/client/src/components/ui/menu.vue | 2 +-
 packages/client/src/types/menu.ts          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/ui/menu.vue b/packages/client/src/components/ui/menu.vue
index 02f470ac3043..c5cb4b477153 100644
--- a/packages/client/src/components/ui/menu.vue
+++ b/packages/client/src/components/ui/menu.vue
@@ -29,7 +29,7 @@
 			<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 		</button>
 		<span v-else-if="item.type === 'switch'" :tabindex="i" class="item">
-			<FormSwitch v-model="item.ref" class="form-switch">{{ item.text }}</FormSwitch>
+			<FormSwitch v-model="item.ref" :disabled="item.disabled" class="form-switch">{{ item.text }}</FormSwitch>
 		</span>
 		<button v-else :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)">
 			<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
diff --git a/packages/client/src/types/menu.ts b/packages/client/src/types/menu.ts
index ec79e74c07a2..306bb562b976 100644
--- a/packages/client/src/types/menu.ts
+++ b/packages/client/src/types/menu.ts
@@ -9,7 +9,7 @@ export type MenuLabel = { type: 'label', text: string };
 export type MenuLink = { type: 'link', to: string, text: string, icon?: string, indicate?: boolean, avatar: Misskey.entities.User };
 export type MenuA = { type: 'a', href: string, target?: string, download?: string, text: string, icon?: string, indicate?: boolean };
 export type MenuUser = { type: 'user', user: Misskey.entities.User, active?: boolean, indicate?: boolean, action: MenuAction };
-export type MenuSwitch = { type: 'switch', ref: Ref<boolean>, text: string };
+export type MenuSwitch = { type: 'switch', ref: Ref<boolean>, text: string, disabled?: boolean };
 export type MenuButton = { type?: 'button', text: string, icon?: string, indicate?: boolean, danger?: boolean, active?: boolean, avatar: Misskey.entities.User; action: MenuAction };
 
 export type MenuPending = { type: 'pending' };

From bb67923fa8eb051eca75203b83837210245926f8 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 29 Jan 2022 18:53:36 +0900
Subject: [PATCH 06/36] make keepOriginal to follow setting value

---
 packages/client/src/os.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index a8d1f933d6b9..95b4e87a1fad 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -10,6 +10,7 @@ import MkWaitingDialog from '@/components/waiting-dialog.vue';
 import { MenuItem } from '@/types/menu';
 import { resolve } from '@/router';
 import { $i } from '@/account';
+import { defaultStore } from '@/store';
 
 export const pendingApiRequestsCount = ref(0);
 
@@ -542,7 +543,7 @@ export const uploads = ref<{
 	img: string;
 }[]>([]);
 
-export function upload(file: File, folder?: any, name?: string, keepOriginal?: boolean): Promise<Misskey.entities.DriveFile> {
+export function upload(file: File, folder?: any, name?: string, keepOriginal: boolean = defaultStore.state.keepOriginalUploading): Promise<Misskey.entities.DriveFile> {
 	if (folder && typeof folder == 'object') folder = folder.id;
 
 	return new Promise((resolve, reject) => {

From 323d020caffa3930e6a5ef3ce79536c057ea5c49 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 29 Jan 2022 20:02:15 +0900
Subject: [PATCH 07/36] :v:

---
 packages/client/src/components/drive.vue      | 10 +-
 packages/client/src/components/post-form.vue  |  3 +-
 packages/client/src/os.ts                     | 86 ----------------
 .../pages/messaging/messaging-room.form.vue   |  3 +-
 packages/client/src/scripts/select-file.ts    |  3 +-
 packages/client/src/scripts/upload.ts         | 98 +++++++++++++++++++
 packages/client/src/ui/_common_/common.vue    |  3 +-
 packages/client/src/ui/_common_/upload.vue    |  2 +-
 8 files changed, 115 insertions(+), 93 deletions(-)
 create mode 100644 packages/client/src/scripts/upload.ts

diff --git a/packages/client/src/components/drive.vue b/packages/client/src/components/drive.vue
index e044c67523e4..1b11c6e98c1a 100644
--- a/packages/client/src/components/drive.vue
+++ b/packages/client/src/components/drive.vue
@@ -97,6 +97,7 @@ import * as os from '@/os';
 import { stream } from '@/stream';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
+import { uploadFile, uploads } from '@/scripts/upload';
 
 const props = withDefaults(defineProps<{
 	initialFolder?: Misskey.entities.DriveFolder;
@@ -127,8 +128,9 @@ const moreFolders = ref(false);
 const hierarchyFolders = ref<Misskey.entities.DriveFolder[]>([]);
 const selectedFiles = ref<Misskey.entities.DriveFile[]>([]);
 const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
-const uploadings = os.uploads;
+const uploadings = uploads;
 const connection = stream.useChannel('drive');
+let keepOriginal = $ref<boolean>(defaultStore.state.keepOriginalUploading);
 
 // ドロップされようとしているか
 const draghover = ref(false);
@@ -355,7 +357,7 @@ function onChangeFileInput() {
 }
 
 function upload(file: File, folderToUpload?: Misskey.entities.DriveFolder | null) {
-	os.upload(file, (folderToUpload && typeof folderToUpload == 'object') ? folderToUpload.id : null).then(res => {
+	uploadFile(file, (folderToUpload && typeof folderToUpload == 'object') ? folderToUpload.id : null, undefined, keepOriginal).then(res => {
 		addFile(res, true);
 	});
 }
@@ -562,6 +564,10 @@ function fetchMoreFiles() {
 
 function getMenu() {
 	return [{
+		type: 'switch',
+		text: i18n.ts.keepOriginalUploading,
+		ref: keepOriginal,
+	}, null, {
 		text: i18n.ts.addFile,
 		type: 'label'
 	}, {
diff --git a/packages/client/src/components/post-form.vue b/packages/client/src/components/post-form.vue
index 6db4d926da07..016733567b7b 100644
--- a/packages/client/src/components/post-form.vue
+++ b/packages/client/src/components/post-form.vue
@@ -87,6 +87,7 @@ import MkInfo from '@/components/ui/info.vue';
 import { i18n } from '@/i18n';
 import { instance } from '@/instance';
 import { $i, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account';
+import { uploadFile } from '@/scripts/upload';
 
 const modal = inject('modal');
 
@@ -366,7 +367,7 @@ function updateFileName(file, name) {
 }
 
 function upload(file: File, name?: string) {
-	os.upload(file, defaultStore.state.uploadFolder, name).then(res => {
+	uploadFile(file, defaultStore.state.uploadFolder, name).then(res => {
 		files.push(res);
 	});
 }
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index f93cdc65b25c..2769e891b96f 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -10,8 +10,6 @@ import MkWaitingDialog from '@/components/waiting-dialog.vue';
 import { MenuItem } from '@/types/menu';
 import { resolve } from '@/router';
 import { $i } from '@/account';
-import { defaultStore } from '@/store';
-import { readAndCompressImage } from 'browser-image-resizer';
 
 export const pendingApiRequestsCount = ref(0);
 
@@ -536,90 +534,6 @@ export function post(props: Record<string, any> = {}) {
 
 export const deckGlobalEvents = new EventEmitter();
 
-export const uploads = ref<{
-	id: string;
-	name: string;
-	progressMax: number | undefined;
-	progressValue: number | undefined;
-	img: string;
-}[]>([]);
-
-export function upload(file: File, folder?: any, name?: string, keepOriginal: boolean = defaultStore.state.keepOriginalUploading): Promise<Misskey.entities.DriveFile> {
-	if (folder && typeof folder == 'object') folder = folder.id;
-
-	return new Promise((resolve, reject) => {
-		const id = Math.random().toString();
-
-		const reader = new FileReader();
-		reader.onload = async (e) => {
-			const ctx = reactive({
-				id: id,
-				name: name || file.name || 'untitled',
-				progressMax: undefined,
-				progressValue: undefined,
-				img: window.URL.createObjectURL(file)
-			});
-
-			let resizedImage: any;
-			if (file.type === 'image/jpeg') {
-				const config = {
-					quality: 0.85,
-					maxWidth: 2048,
-					maxHeight: 2048,
-					autoRotate: true,
-					debug: true
-				};
-				resizedImage = await readAndCompressImage(file, config);
-			}
-
-			uploads.value.push(ctx);
-
-			console.log(keepOriginal);
-
-			const data = new FormData();
-			data.append('i', $i.token);
-			data.append('force', 'true');
-			data.append('file', resizedImage || file);
-
-			if (folder) data.append('folderId', folder);
-			if (name) data.append('name', name);
-
-			const xhr = new XMLHttpRequest();
-			xhr.open('POST', apiUrl + '/drive/files/create', true);
-			xhr.onload = (ev) => {
-				if (xhr.status !== 200 || ev.target == null || ev.target.response == null) {
-					// TODO: 消すのではなくて再送できるようにしたい
-					uploads.value = uploads.value.filter(x => x.id != id);
-
-					alert({
-						type: 'error',
-						text: 'upload failed'
-					});
-
-					reject();
-					return;
-				}
-
-				const driveFile = JSON.parse(ev.target.response);
-
-				resolve(driveFile);
-
-				uploads.value = uploads.value.filter(x => x.id != id);
-			};
-
-			xhr.upload.onprogress = e => {
-				if (e.lengthComputable) {
-					ctx.progressMax = e.total;
-					ctx.progressValue = e.loaded;
-				}
-			};
-
-			xhr.send(data);
-		};
-		reader.readAsArrayBuffer(file);
-	});
-}
-
 /*
 export function checkExistence(fileData: ArrayBuffer): Promise<any> {
 	return new Promise((resolve, reject) => {
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index 3863c8f82b4d..35cb75743f6f 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -31,6 +31,7 @@ import * as os from '@/os';
 import { stream } from '@/stream';
 import { Autocomplete } from '@/scripts/autocomplete';
 import { throttle } from 'throttle-debounce';
+import { uploadFile } from '@/scripts/upload';
 
 export default defineComponent({
 	props: {
@@ -164,7 +165,7 @@ export default defineComponent({
 		},
 
 		upload(file: File, name?: string) {
-			os.upload(file, this.$store.state.uploadFolder, name).then(res => {
+			uploadFile(file, this.$store.state.uploadFolder, name).then(res => {
 				this.file = res;
 			});
 		},
diff --git a/packages/client/src/scripts/select-file.ts b/packages/client/src/scripts/select-file.ts
index 23df4edf54aa..49a46f0bb23e 100644
--- a/packages/client/src/scripts/select-file.ts
+++ b/packages/client/src/scripts/select-file.ts
@@ -4,6 +4,7 @@ import { stream } from '@/stream';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
 import { DriveFile } from 'misskey-js/built/entities';
+import { uploadFile } from '@/scripts/upload';
 
 function select(src: any, label: string | null, multiple: boolean): Promise<DriveFile | DriveFile[]> {
 	return new Promise((res, rej) => {
@@ -14,7 +15,7 @@ function select(src: any, label: string | null, multiple: boolean): Promise<Driv
 			input.type = 'file';
 			input.multiple = multiple;
 			input.onchange = () => {
-				const promises = Array.from(input.files).map(file => os.upload(file, defaultStore.state.uploadFolder, undefined, keepOriginal.value));
+				const promises = Array.from(input.files).map(file => uploadFile(file, defaultStore.state.uploadFolder, undefined, keepOriginal.value));
 
 				Promise.all(promises).then(driveFiles => {
 					res(multiple ? driveFiles : driveFiles[0]);
diff --git a/packages/client/src/scripts/upload.ts b/packages/client/src/scripts/upload.ts
new file mode 100644
index 000000000000..06d4e9ddd772
--- /dev/null
+++ b/packages/client/src/scripts/upload.ts
@@ -0,0 +1,98 @@
+import { reactive, ref } from 'vue';
+import { defaultStore } from '@/store';
+import { readAndCompressImage } from 'browser-image-resizer';
+import { apiUrl } from '@/config';
+import * as Misskey from 'misskey-js';
+import { $i } from '@/account';
+
+type Uploading = {
+	id: string;
+	name: string;
+	progressMax: number | undefined;
+	progressValue: number | undefined;
+	img: string;
+};
+export const uploads = ref<Uploading[]>([]);
+
+const compressTypeMap = new Map([
+	// [圧縮前の形式, 圧縮後の形式],
+	['image/jpeg', 'image/jpeg'],
+	['image/webp', 'image/jpeg'],
+	['image/png', 'image/png'],
+	['image/svg', 'image/png'],
+]);
+
+export function uploadFile(file: File, folder?: any, name?: string, keepOriginal: boolean = defaultStore.state.keepOriginalUploading): Promise<Misskey.entities.DriveFile> {
+	if (folder && typeof folder == 'object') folder = folder.id;
+
+	return new Promise((resolve, reject) => {
+		const id = Math.random().toString();
+
+		const reader = new FileReader();
+		reader.onload = async (e) => {
+			const ctx = reactive<Uploading>({
+				id: id,
+				name: name || file.name || 'untitled',
+				progressMax: undefined,
+				progressValue: undefined,
+				img: window.URL.createObjectURL(file)
+			});
+
+			let resizedImage: any;
+			if (!keepOriginal && compressTypeMap.has(file.type)) {
+				const config = {
+					quality: 0.85,
+					maxWidth: 2048,
+					maxHeight: 2048,
+					autoRotate: true,
+					mimeType: compressTypeMap.get(file.type),
+					debug: true,
+				};
+				resizedImage = await readAndCompressImage(file, config);
+			}
+
+			uploads.value.push(ctx);
+
+			const data = new FormData();
+			data.append('i', $i.token);
+			data.append('force', 'true');
+			data.append('file', resizedImage || file);
+
+			if (folder) data.append('folderId', folder);
+			if (name) data.append('name', name);
+
+			const xhr = new XMLHttpRequest();
+			xhr.open('POST', apiUrl + '/drive/files/create', true);
+			xhr.onload = (ev) => {
+				if (xhr.status !== 200 || ev.target == null || ev.target.response == null) {
+					// TODO: 消すのではなくて再送できるようにしたい
+					uploads.value = uploads.value.filter(x => x.id != id);
+
+					alert({
+						type: 'error',
+						text: 'upload failed'
+					});
+
+					reject();
+					return;
+				}
+
+				const driveFile = JSON.parse(ev.target.response);
+				console.log(driveFile)
+				resolve(driveFile);
+
+				uploads.value = uploads.value.filter(x => x.id != id);
+			};
+
+			xhr.upload.onprogress = e => {
+				if (e.lengthComputable) {
+					ctx.progressMax = e.total;
+					ctx.progressValue = e.loaded;
+				}
+			};
+
+			xhr.send(data);
+		};
+		reader.readAsArrayBuffer(file);
+	});
+}
diff --git a/packages/client/src/ui/_common_/common.vue b/packages/client/src/ui/_common_/common.vue
index 98069258d94c..1f507db11cd7 100644
--- a/packages/client/src/ui/_common_/common.vue
+++ b/packages/client/src/ui/_common_/common.vue
@@ -15,7 +15,8 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import { popup, popups, uploads, pendingApiRequestsCount } from '@/os';
+import { popup, popups, pendingApiRequestsCount } from '@/os';
+import { uploads } from '@/scripts/upload';
 import * as sound from '@/scripts/sound';
 import { $i } from '@/account';
 import { stream } from '@/stream';
diff --git a/packages/client/src/ui/_common_/upload.vue b/packages/client/src/ui/_common_/upload.vue
index ab7678a5056a..f3703d0e8fe6 100644
--- a/packages/client/src/ui/_common_/upload.vue
+++ b/packages/client/src/ui/_common_/upload.vue
@@ -20,8 +20,8 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import * as os from '@/os';
+import { uploads } from '@/scripts/upload';
 
-const uploads = os.uploads;
 const zIndex = os.claimZIndex('high');
 </script>
 

From 08023060e6d8fe2a9f01413cd5ed4b88c62f9bac Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 29 Jan 2022 20:08:14 +0900
Subject: [PATCH 08/36] fix

---
 packages/client/src/components/ui/popup-menu.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/client/src/components/ui/popup-menu.vue b/packages/client/src/components/ui/popup-menu.vue
index 0a86c77e9190..8d6c1b5695e9 100644
--- a/packages/client/src/components/ui/popup-menu.vue
+++ b/packages/client/src/components/ui/popup-menu.vue
@@ -16,7 +16,6 @@ defineProps<{
 	width?: number;
 	viaKeyboard?: boolean;
 	src?: any;
-	ev: MouseEvent;
 }>();
 
 const emit = defineEmits<{

From 32dd3bf8420efad9e4c25fcbc701c9d0e377dbbe Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 29 Jan 2022 20:13:29 +0900
Subject: [PATCH 09/36] fix

---
 packages/client/src/types/menu.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/types/menu.ts b/packages/client/src/types/menu.ts
index 306bb562b976..d178a8208e42 100644
--- a/packages/client/src/types/menu.ts
+++ b/packages/client/src/types/menu.ts
@@ -6,11 +6,11 @@ export type MenuAction = (ev: MouseEvent) => void;
 export type MenuDivider = null;
 export type MenuNull = undefined;
 export type MenuLabel = { type: 'label', text: string };
-export type MenuLink = { type: 'link', to: string, text: string, icon?: string, indicate?: boolean, avatar: Misskey.entities.User };
+export type MenuLink = { type: 'link', to: string, text: string, icon?: string, indicate?: boolean, avatar?: Misskey.entities.User };
 export type MenuA = { type: 'a', href: string, target?: string, download?: string, text: string, icon?: string, indicate?: boolean };
 export type MenuUser = { type: 'user', user: Misskey.entities.User, active?: boolean, indicate?: boolean, action: MenuAction };
 export type MenuSwitch = { type: 'switch', ref: Ref<boolean>, text: string, disabled?: boolean };
-export type MenuButton = { type?: 'button', text: string, icon?: string, indicate?: boolean, danger?: boolean, active?: boolean, avatar: Misskey.entities.User; action: MenuAction };
+export type MenuButton = { type?: 'button', text: string, icon?: string, indicate?: boolean, danger?: boolean, active?: boolean, avatar?: Misskey.entities.User; action: MenuAction };
 
 export type MenuPending = { type: 'pending' };
 

From 1ce9e920ffccdb7332b5b7530a31fede97826642 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 29 Jan 2022 20:29:37 +0900
Subject: [PATCH 10/36] :v:

---
 .../src/server/file/send-drive-file.ts        |  4 +--
 .../backend/src/services/drive/add-file.ts    | 32 +++++++++----------
 .../src/services/drive/image-processor.ts     | 24 ++------------
 3 files changed, 19 insertions(+), 41 deletions(-)

diff --git a/packages/backend/src/server/file/send-drive-file.ts b/packages/backend/src/server/file/send-drive-file.ts
index f3c6c518fa00..967df1d57cee 100644
--- a/packages/backend/src/server/file/send-drive-file.ts
+++ b/packages/backend/src/server/file/send-drive-file.ts
@@ -11,7 +11,7 @@ import { DriveFiles } from '@/models/index';
 import { InternalStorage } from '@/services/drive/internal-storage';
 import { downloadUrl } from '@/misc/download-url';
 import { detectType } from '@/misc/get-file-info';
-import { convertToJpeg, convertToPng, convertToPngOrJpeg } from '@/services/drive/image-processor';
+import { convertToJpeg, convertToPng } from '@/services/drive/image-processor';
 import { GenerateVideoThumbnail } from '@/services/drive/generate-video-thumbnail';
 import { StatusError } from '@/misc/fetch';
 import { FILE_TYPE_BROWSERSAFE } from '@/const';
@@ -68,7 +68,7 @@ export default async function(ctx: Koa.Context) {
 						if (['image/jpeg', 'image/webp'].includes(mime)) {
 							return await convertToJpeg(path, 498, 280);
 						} else if (['image/png', 'image/svg+xml'].includes(mime)) {
-							return await convertToPngOrJpeg(path, 498, 280);
+							return await convertToPng(path, 498, 280);
 						} else if (mime.startsWith('video/')) {
 							return await GenerateVideoThumbnail(path);
 						}
diff --git a/packages/backend/src/services/drive/add-file.ts b/packages/backend/src/services/drive/add-file.ts
index a91b00d0bcaf..0135ca107ca9 100644
--- a/packages/backend/src/services/drive/add-file.ts
+++ b/packages/backend/src/services/drive/add-file.ts
@@ -7,7 +7,7 @@ import { deleteFile } from './delete-file';
 import { fetchMeta } from '@/misc/fetch-meta';
 import { GenerateVideoThumbnail } from './generate-video-thumbnail';
 import { driveLogger } from './logger';
-import { IImage, convertSharpToJpeg, convertSharpToWebp, convertSharpToPng, convertSharpToPngOrJpeg } from './image-processor';
+import { IImage, convertSharpToJpeg, convertSharpToWebp, convertSharpToPng } from './image-processor';
 import { contentDisposition } from '@/misc/content-disposition';
 import { getFileInfo } from '@/misc/get-file-info';
 import { DriveFiles, DriveFolders, Users, Instances, UserProfiles } from '@/models/index';
@@ -178,7 +178,7 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
 	}
 
 	let img: sharp.Sharp | null = null;
-	let webpublicNeeded: boolean;
+	let satisfyWebpublic: boolean;
 
 	try {
 		img = sharp(path);
@@ -193,8 +193,11 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
 			};
 		}
 
-		webpublicNeeded = !!metadata.exif || !!metadata.icc || !!metadata.iptc || !!metadata.xmp || !!metadata.tifftagPhotoshop
-			|| !metadata.width || metadata.width > 2048 || !metadata.height || metadata.height > 2048;
+		satisfyWebpublic = !!(
+			!(metadata.exif || metadata.iptc || metadata.xmp || metadata.tifftagPhotoshop) &&
+			metadata.width && metadata.width <= 2048 &&
+			metadata.height && metadata.height <= 2048
+		);
 	} catch (e) {
 		logger.warn(`sharp failed: ${e}`);
 		return {
@@ -206,18 +209,14 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
 	// #region webpublic
 	let webpublic: IImage | null = null;
 
-	if (generateWeb) {
+	if (generateWeb && !satisfyWebpublic) {
 		logger.info(`creating web image`);
 
 		try {
-			if (['image/jpeg'].includes(type) && webpublicNeeded) {
-				webpublic = await convertSharpToJpeg(img, 2048, 2048);
-			} else if (['image/webp'].includes(type) && webpublicNeeded) {
+			if (['image/webp', 'image/jpeg'].includes(type)) {
 				webpublic = await convertSharpToWebp(img, 2048, 2048);
-			} else if (['image/png'].includes(type) && webpublicNeeded) {
-				webpublic = await convertSharpToPng(img, 2048, 2048);
-			} else if (['image/svg+xml'].includes(type)) {
-				webpublic = await convertSharpToPng(img, 2048, 2048);
+			} else if (['image/png', 'image/svg+xml'].includes(type)) {
+				webpublic = await convertSharpToWebp(img, 2048, 2048, 100);
 			} else {
 				logger.debug(`web image not created (not an required image)`);
 			}
@@ -225,7 +224,8 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
 			logger.warn(`web image not created (an error occured)`, e);
 		}
 	} else {
-		logger.info(`web image not created (from remote)`);
+		if (satisfyWebpublic) logger.info(`web image not created (original satisfies webpublic)`);
+		else logger.info(`web image not created (from remote)`);
 	}
 	// #endregion webpublic
 
@@ -233,10 +233,8 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
 	let thumbnail: IImage | null = null;
 
 	try {
-		if (['image/jpeg', 'image/webp'].includes(type)) {
-			thumbnail = await convertSharpToJpeg(img, 498, 280);
-		} else if (['image/png', 'image/svg+xml'].includes(type)) {
-			thumbnail = await convertSharpToPngOrJpeg(img, 498, 280);
+		if (['image/jpeg', 'image/webp', 'image/png', 'image/svg+xml'].includes(type)) {
+			thumbnail = await convertSharpToWebp(img, 498, 280);
 		} else {
 			logger.debug(`thumbnail not created (not an required file)`);
 		}
diff --git a/packages/backend/src/services/drive/image-processor.ts b/packages/backend/src/services/drive/image-processor.ts
index f3c4a2abd91a..bb31ca705768 100644
--- a/packages/backend/src/services/drive/image-processor.ts
+++ b/packages/backend/src/services/drive/image-processor.ts
@@ -42,7 +42,7 @@ export async function convertToWebp(path: string, width: number, height: number)
 	return convertSharpToWebp(await sharp(path), width, height);
 }
 
-export async function convertSharpToWebp(sharp: sharp.Sharp, width: number, height: number): Promise<IImage> {
+export async function convertSharpToWebp(sharp: sharp.Sharp, width: number, height: number, quality: number = 85): Promise<IImage> {
 	const data = await sharp
 		.resize(width, height, {
 			fit: 'inside',
@@ -50,7 +50,7 @@ export async function convertSharpToWebp(sharp: sharp.Sharp, width: number, heig
 		})
 		.rotate()
 		.webp({
-			quality: 85,
+			quality,
 		})
 		.toBuffer();
 
@@ -85,23 +85,3 @@ export async function convertSharpToPng(sharp: sharp.Sharp, width: number, heigh
 		type: 'image/png',
 	};
 }
-
-/**
- * Convert to PNG or JPEG
- *   with resize, remove metadata, resolve orientation, stop animation
- */
-export async function convertToPngOrJpeg(path: string, width: number, height: number): Promise<IImage> {
-	return convertSharpToPngOrJpeg(await sharp(path), width, height);
-}
-
-export async function convertSharpToPngOrJpeg(sharp: sharp.Sharp, width: number, height: number): Promise<IImage> {
-	const stats = await sharp.stats();
-	const metadata = await sharp.metadata();
-
-	// 不透明で300x300pxの範囲を超えていればJPEG
-	if (stats.isOpaque && ((metadata.width && metadata.width >= 300) || (metadata.height && metadata!.height >= 300))) {
-		return await convertSharpToJpeg(sharp, width, height);
-	} else {
-		return await convertSharpToPng(sharp, width, height);
-	}
-}

From 3236ebac6bdeeef4aefd2901b4631893e742da6b Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 29 Jan 2022 21:02:58 +0900
Subject: [PATCH 11/36] WEBP

---
 packages/backend/src/server/file/send-drive-file.ts | 8 +++-----
 packages/backend/src/services/drive/add-file.ts     | 1 +
 packages/client/src/scripts/upload.ts               | 8 ++++----
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/backend/src/server/file/send-drive-file.ts b/packages/backend/src/server/file/send-drive-file.ts
index 967df1d57cee..cefd13a514ca 100644
--- a/packages/backend/src/server/file/send-drive-file.ts
+++ b/packages/backend/src/server/file/send-drive-file.ts
@@ -11,7 +11,7 @@ import { DriveFiles } from '@/models/index';
 import { InternalStorage } from '@/services/drive/internal-storage';
 import { downloadUrl } from '@/misc/download-url';
 import { detectType } from '@/misc/get-file-info';
-import { convertToJpeg, convertToPng } from '@/services/drive/image-processor';
+import { convertToWebp, convertToPng } from '@/services/drive/image-processor';
 import { GenerateVideoThumbnail } from '@/services/drive/generate-video-thumbnail';
 import { StatusError } from '@/misc/fetch';
 import { FILE_TYPE_BROWSERSAFE } from '@/const';
@@ -65,10 +65,8 @@ export default async function(ctx: Koa.Context) {
 
 				const convertFile = async () => {
 					if (isThumbnail) {
-						if (['image/jpeg', 'image/webp'].includes(mime)) {
-							return await convertToJpeg(path, 498, 280);
-						} else if (['image/png', 'image/svg+xml'].includes(mime)) {
-							return await convertToPng(path, 498, 280);
+						if (['image/jpeg', 'image/webp', 'image/png', 'image/svg+xml'].includes(mime)) {
+							return await convertToWebp(path, 498, 280);
 						} else if (mime.startsWith('video/')) {
 							return await GenerateVideoThumbnail(path);
 						}
diff --git a/packages/backend/src/services/drive/add-file.ts b/packages/backend/src/services/drive/add-file.ts
index 0135ca107ca9..04e9c8dbce81 100644
--- a/packages/backend/src/services/drive/add-file.ts
+++ b/packages/backend/src/services/drive/add-file.ts
@@ -194,6 +194,7 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
 		}
 
 		satisfyWebpublic = !!(
+			type !== 'image/svg+xml' &&
 			!(metadata.exif || metadata.iptc || metadata.xmp || metadata.tifftagPhotoshop) &&
 			metadata.width && metadata.width <= 2048 &&
 			metadata.height && metadata.height <= 2048
diff --git a/packages/client/src/scripts/upload.ts b/packages/client/src/scripts/upload.ts
index 06d4e9ddd772..af0de3878cd2 100644
--- a/packages/client/src/scripts/upload.ts
+++ b/packages/client/src/scripts/upload.ts
@@ -16,10 +16,10 @@ export const uploads = ref<Uploading[]>([]);
 
 const compressTypeMap = new Map([
 	// [圧縮前の形式, 圧縮後の形式],
-	['image/jpeg', 'image/jpeg'],
-	['image/webp', 'image/jpeg'],
-	['image/png', 'image/png'],
-	['image/svg', 'image/png'],
+	['image/jpeg', 'image/webp'],
+	['image/webp', 'image/webp'],
+	['image/png', 'image/webp'],
+	['image/svg', 'image/webp'],
 ]);
 
 export function uploadFile(file: File, folder?: any, name?: string, keepOriginal: boolean = defaultStore.state.keepOriginalUploading): Promise<Misskey.entities.DriveFile> {

From 35845bc09081bacb9df4b5fab4f415aca27aacf9 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 29 Jan 2022 21:06:08 +0900
Subject: [PATCH 12/36] aaa


From 0f8f7de16530a9d727bf18f38d5cec460d1714fd Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 29 Jan 2022 21:49:46 +0900
Subject: [PATCH 13/36] :v:

---
 packages/client/src/components/drive.vue |  4 +--
 packages/client/src/scripts/upload.ts    | 32 +++++++++++++-----------
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/client/src/components/drive.vue b/packages/client/src/components/drive.vue
index 1b11c6e98c1a..fa9289abba48 100644
--- a/packages/client/src/components/drive.vue
+++ b/packages/client/src/components/drive.vue
@@ -130,7 +130,7 @@ const selectedFiles = ref<Misskey.entities.DriveFile[]>([]);
 const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
 const uploadings = uploads;
 const connection = stream.useChannel('drive');
-let keepOriginal = $ref<boolean>(defaultStore.state.keepOriginalUploading);
+const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading);
 
 // ドロップされようとしているか
 const draghover = ref(false);
@@ -357,7 +357,7 @@ function onChangeFileInput() {
 }
 
 function upload(file: File, folderToUpload?: Misskey.entities.DriveFolder | null) {
-	uploadFile(file, (folderToUpload && typeof folderToUpload == 'object') ? folderToUpload.id : null, undefined, keepOriginal).then(res => {
+	uploadFile(file, (folderToUpload && typeof folderToUpload == 'object') ? folderToUpload.id : null, undefined, keepOriginal.value).then(res => {
 		addFile(res, true);
 	});
 }
diff --git a/packages/client/src/scripts/upload.ts b/packages/client/src/scripts/upload.ts
index af0de3878cd2..21f4a5d2d335 100644
--- a/packages/client/src/scripts/upload.ts
+++ b/packages/client/src/scripts/upload.ts
@@ -14,13 +14,16 @@ type Uploading = {
 };
 export const uploads = ref<Uploading[]>([]);
 
-const compressTypeMap = new Map([
-	// [圧縮前の形式, 圧縮後の形式],
-	['image/jpeg', 'image/webp'],
-	['image/webp', 'image/webp'],
-	['image/png', 'image/webp'],
-	['image/svg', 'image/webp'],
-]);
+const compressTypeMap = {
+	'image/jpeg': { quality: 0.85, mimeType: 'image/webp'},
+	'image/webp': { quality: 0.85, mimeType: 'image/webp'},
+	'image/png': { quality: 1, mimeType: 'image/webp'},
+	'image/svg+xml': { quality: 1, mimeType: 'image/webp'},
+} as const;
+
+const mimeTypeMap = {
+	'image/webp': 'webp',
+} as const;
 
 export function uploadFile(file: File, folder?: any, name?: string, keepOriginal: boolean = defaultStore.state.keepOriginalUploading): Promise<Misskey.entities.DriveFile> {
 	if (folder && typeof folder == 'object') folder = folder.id;
@@ -38,28 +41,27 @@ export function uploadFile(file: File, folder?: any, name?: string, keepOriginal
 				img: window.URL.createObjectURL(file)
 			});
 
+			uploads.value.push(ctx);
+
 			let resizedImage: any;
-			if (!keepOriginal && compressTypeMap.has(file.type)) {
+			if (!keepOriginal && file.type in compressTypeMap) {
 				const config = {
-					quality: 0.85,
 					maxWidth: 2048,
 					maxHeight: 2048,
 					autoRotate: true,
-					mimeType: compressTypeMap.get(file.type),
 					debug: true,
+					...compressTypeMap[file.type],
 				};
 				resizedImage = await readAndCompressImage(file, config);
+				ctx.name = `${ctx.name}.${mimeTypeMap[compressTypeMap[file.type].mimeType]}`;
 			}
 
-			uploads.value.push(ctx);
-
 			const data = new FormData();
 			data.append('i', $i.token);
 			data.append('force', 'true');
 			data.append('file', resizedImage || file);
-
+			data.append('name', ctx.name);
 			if (folder) data.append('folderId', folder);
-			if (name) data.append('name', name);
 
 			const xhr = new XMLHttpRequest();
 			xhr.open('POST', apiUrl + '/drive/files/create', true);
@@ -78,7 +80,7 @@ export function uploadFile(file: File, folder?: any, name?: string, keepOriginal
 				}
 
 				const driveFile = JSON.parse(ev.target.response);
-				console.log(driveFile)
+
 				resolve(driveFile);
 
 				uploads.value = uploads.value.filter(x => x.id != id);

From 8a32cedf6e72fa257c32019b0961258ca3dc8bcb Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 29 Jan 2022 22:01:58 +0900
Subject: [PATCH 14/36] webp

---
 packages/backend/src/server/file/send-drive-file.ts       | 4 ++--
 packages/backend/src/server/proxy/proxy-media.ts          | 8 ++++----
 .../src/services/drive/generate-video-thumbnail.ts        | 4 ++--
 packages/backend/src/services/drive/image-processor.ts    | 4 ++--
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/backend/src/server/file/send-drive-file.ts b/packages/backend/src/server/file/send-drive-file.ts
index cefd13a514ca..c0444b0ead4c 100644
--- a/packages/backend/src/server/file/send-drive-file.ts
+++ b/packages/backend/src/server/file/send-drive-file.ts
@@ -11,7 +11,7 @@ import { DriveFiles } from '@/models/index';
 import { InternalStorage } from '@/services/drive/internal-storage';
 import { downloadUrl } from '@/misc/download-url';
 import { detectType } from '@/misc/get-file-info';
-import { convertToWebp, convertToPng } from '@/services/drive/image-processor';
+import { convertToWebp } from '@/services/drive/image-processor';
 import { GenerateVideoThumbnail } from '@/services/drive/generate-video-thumbnail';
 import { StatusError } from '@/misc/fetch';
 import { FILE_TYPE_BROWSERSAFE } from '@/const';
@@ -74,7 +74,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);
 						}
 					}
 
diff --git a/packages/backend/src/server/proxy/proxy-media.ts b/packages/backend/src/server/proxy/proxy-media.ts
index c234b70c5528..0cad41613b89 100644
--- a/packages/backend/src/server/proxy/proxy-media.ts
+++ b/packages/backend/src/server/proxy/proxy-media.ts
@@ -1,7 +1,7 @@
 import * as fs from 'fs';
 import * as Koa from 'koa';
 import { serverLogger } from '../index';
-import { IImage, convertToPng, convertToJpeg } from '@/services/drive/image-processor';
+import { IImage, convertToWebp } from '@/services/drive/image-processor';
 import { createTemp } from '@/misc/create-temp';
 import { downloadUrl } from '@/misc/download-url';
 import { detectType } from '@/misc/get-file-info';
@@ -22,11 +22,11 @@ export async function proxyMedia(ctx: Koa.Context) {
 		let image: IImage;
 
 		if ('static' in ctx.query && ['image/png', 'image/gif', 'image/apng', 'image/vnd.mozilla.apng', 'image/webp', 'image/svg+xml'].includes(mime)) {
-			image = await convertToPng(path, 498, 280);
+			image = await convertToWebp(path, 498, 280);
 		} else if ('preview' in ctx.query && ['image/jpeg', 'image/png', 'image/gif', 'image/apng', 'image/vnd.mozilla.apng', 'image/svg+xml'].includes(mime)) {
-			image = await convertToJpeg(path, 200, 200);
+			image = await convertToWebp(path, 200, 200);
 		}	else if (['image/svg+xml'].includes(mime)) {
-			image = await convertToPng(path, 2048, 2048);
+			image = await convertToWebp(path, 2048, 2048, 1);
 		} else if (!mime.startsWith('image/') || !FILE_TYPE_BROWSERSAFE.includes(mime)) {
 			throw new StatusError('Rejected type', 403, 'Rejected type');
 		} else {
diff --git a/packages/backend/src/services/drive/generate-video-thumbnail.ts b/packages/backend/src/services/drive/generate-video-thumbnail.ts
index e8cc952b9a2f..439079196d4a 100644
--- a/packages/backend/src/services/drive/generate-video-thumbnail.ts
+++ b/packages/backend/src/services/drive/generate-video-thumbnail.ts
@@ -1,6 +1,6 @@
 import * as fs from 'fs';
 import * as tmp from 'tmp';
-import { IImage, convertToJpeg } from './image-processor';
+import { IImage, convertToWebp } from './image-processor';
 import * as FFmpeg from 'fluent-ffmpeg';
 
 export async function GenerateVideoThumbnail(path: string): Promise<IImage> {
@@ -27,7 +27,7 @@ export async function GenerateVideoThumbnail(path: string): Promise<IImage> {
 
 	const outPath = `${outDir}/output.png`;
 
-	const thumbnail = await convertToJpeg(outPath, 498, 280);
+	const thumbnail = await convertToWebp(outPath, 498, 280);
 
 	// cleanup
 	await fs.promises.unlink(outPath);
diff --git a/packages/backend/src/services/drive/image-processor.ts b/packages/backend/src/services/drive/image-processor.ts
index bb31ca705768..448c46bdf718 100644
--- a/packages/backend/src/services/drive/image-processor.ts
+++ b/packages/backend/src/services/drive/image-processor.ts
@@ -38,8 +38,8 @@ export async function convertSharpToJpeg(sharp: sharp.Sharp, width: number, heig
  * Convert to WebP
  *   with resize, remove metadata, resolve orientation, stop animation
  */
-export async function convertToWebp(path: string, width: number, height: number): Promise<IImage> {
-	return convertSharpToWebp(await sharp(path), width, height);
+export async function convertToWebp(path: string, width: number, height: number, quality: number = 85): Promise<IImage> {
+	return convertSharpToWebp(await sharp(path), width, height, quality);
 }
 
 export async function convertSharpToWebp(sharp: sharp.Sharp, width: number, height: number, quality: number = 85): Promise<IImage> {

From 38f84a94baffb3b321eddc49d4de413de4d20a5d Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 29 Jan 2022 22:18:12 +0900
Subject: [PATCH 15/36] lazy load browser-image-resizer

---
 packages/client/src/scripts/upload.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/scripts/upload.ts b/packages/client/src/scripts/upload.ts
index 21f4a5d2d335..4e37a5ddc9dc 100644
--- a/packages/client/src/scripts/upload.ts
+++ b/packages/client/src/scripts/upload.ts
@@ -1,6 +1,5 @@
 import { reactive, ref } from 'vue';
 import { defaultStore } from '@/store';
-import { readAndCompressImage } from 'browser-image-resizer';
 import { apiUrl } from '@/config';
 import * as Misskey from 'misskey-js';
 import { $i } from '@/account';
@@ -52,6 +51,8 @@ export function uploadFile(file: File, folder?: any, name?: string, keepOriginal
 					debug: true,
 					...compressTypeMap[file.type],
 				};
+
+				const { readAndCompressImage } = await import('browser-image-resizer');
 				resizedImage = await readAndCompressImage(file, config);
 				ctx.name = `${ctx.name}.${mimeTypeMap[compressTypeMap[file.type].mimeType]}`;
 			}

From 4fdec4015b6f5db7572a5c793f563d3a3790a43e Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 29 Jan 2022 22:38:01 +0900
Subject: [PATCH 16/36] rename

---
 packages/backend/src/misc/populate-emojis.ts   | 2 +-
 packages/backend/src/server/web/url-preview.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/backend/src/misc/populate-emojis.ts b/packages/backend/src/misc/populate-emojis.ts
index 26c05e5fa6ef..6681578c963a 100644
--- a/packages/backend/src/misc/populate-emojis.ts
+++ b/packages/backend/src/misc/populate-emojis.ts
@@ -63,7 +63,7 @@ export async function populateEmoji(emojiName: string, noteUserHost: string | nu
 
 	const isLocal = emoji.host == null;
 	const emojiUrl = emoji.publicUrl || emoji.originalUrl; // || emoji.originalUrl してるのは後方互換性のため
-	const url = isLocal ? emojiUrl : `${config.url}/proxy/image.png?${query({ url: emojiUrl })}`;
+	const url = isLocal ? emojiUrl : `${config.url}/proxy/image.webp?${query({ url: emojiUrl })}`;
 
 	return {
 		name: emojiName,
diff --git a/packages/backend/src/server/web/url-preview.ts b/packages/backend/src/server/web/url-preview.ts
index 71465c808366..1af82954e94c 100644
--- a/packages/backend/src/server/web/url-preview.ts
+++ b/packages/backend/src/server/web/url-preview.ts
@@ -44,7 +44,7 @@ module.exports = async (ctx: Koa.Context) => {
 function wrap(url?: string): string | null {
 	return url != null
 		? url.match(/^https?:\/\//)
-			? `${config.url}/proxy/preview.jpg?${query({
+			? `${config.url}/proxy/preview.webp?${query({
 				url,
 				preview: '1',
 			})}`

From d42c9854fca83943c93204583112f18d7cdfab47 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 29 Jan 2022 22:59:26 +0900
Subject: [PATCH 17/36] rename 2

---
 packages/backend/src/misc/populate-emojis.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/backend/src/misc/populate-emojis.ts b/packages/backend/src/misc/populate-emojis.ts
index 6681578c963a..a6e5705ec00b 100644
--- a/packages/backend/src/misc/populate-emojis.ts
+++ b/packages/backend/src/misc/populate-emojis.ts
@@ -63,7 +63,7 @@ export async function populateEmoji(emojiName: string, noteUserHost: string | nu
 
 	const isLocal = emoji.host == null;
 	const emojiUrl = emoji.publicUrl || emoji.originalUrl; // || emoji.originalUrl してるのは後方互換性のため
-	const url = isLocal ? emojiUrl : `${config.url}/proxy/image.webp?${query({ url: emojiUrl })}`;
+	const url = isLocal ? emojiUrl : `${config.url}/proxy/${encodeURIComponent(emojiUrl)}?${query({ url: emojiUrl })}`;
 
 	return {
 		name: emojiName,

From af42693ea1cbb070d04a521862447d7f977e6faa Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 29 Jan 2022 16:52:44 +0000
Subject: [PATCH 18/36] Fix

---
 packages/client/src/components/ui/menu.vue | 2 +-
 packages/client/src/types/menu.ts          | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/ui/menu.vue b/packages/client/src/components/ui/menu.vue
index c5cb4b477153..a93cc8cda877 100644
--- a/packages/client/src/components/ui/menu.vue
+++ b/packages/client/src/components/ui/menu.vue
@@ -82,7 +82,7 @@ watch(() => props.items, () => {
 		if (item && 'then' in item) { // if item is Promise
 			items[i] = { type: 'pending' };
 			item.then(actualItem => {
-				items[i] = actualItem;
+				items2[i] = actualItem;
 			});
 		}
 	}
diff --git a/packages/client/src/types/menu.ts b/packages/client/src/types/menu.ts
index d178a8208e42..ed67e6ab88c1 100644
--- a/packages/client/src/types/menu.ts
+++ b/packages/client/src/types/menu.ts
@@ -15,5 +15,6 @@ export type MenuButton = { type?: 'button', text: string, icon?: string, indicat
 export type MenuPending = { type: 'pending' };
 
 type OuterMenuItem = MenuDivider | MenuNull | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton;
-export type MenuItem = OuterMenuItem | Promise<OuterMenuItem>;
+type OuterPromiseMenuItem = Promise<MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton>;
+export type MenuItem = OuterMenuItem | OuterPromiseMenuItem;
 export type InnerMenuItem = MenuDivider | MenuPending | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton;

From 8a5fdd159d21b8725954215d6288c25418237c74 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 29 Jan 2022 17:04:30 +0000
Subject: [PATCH 19/36] clean up

---
 packages/client/src/components/form/switch.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/client/src/components/form/switch.vue b/packages/client/src/components/form/switch.vue
index e57941c6702e..b5a30d635ce5 100644
--- a/packages/client/src/components/form/switch.vue
+++ b/packages/client/src/components/form/switch.vue
@@ -47,12 +47,6 @@ const toggle = () => {
 		os.popup(Ripple, { x, y, particle: false }, {}, 'end');
 	}
 };
-
-defineExpose({
-	button,
-	checked,
-	toggle,
-});
 </script>
 
 <style lang="scss" scoped>

From 7b4f5acc55a1cc0fd679784f27d676a7d02f7210 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 29 Jan 2022 17:06:02 +0000
Subject: [PATCH 20/36] add comment

---
 packages/client/src/components/drive.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/drive.vue b/packages/client/src/components/drive.vue
index fa9289abba48..2ec885b00c9b 100644
--- a/packages/client/src/components/drive.vue
+++ b/packages/client/src/components/drive.vue
@@ -130,7 +130,7 @@ const selectedFiles = ref<Misskey.entities.DriveFile[]>([]);
 const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
 const uploadings = uploads;
 const connection = stream.useChannel('drive');
-const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading);
+const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading); // 外部渡しが多いので$refは使わないほうがよい
 
 // ドロップされようとしているか
 const draghover = ref(false);

From 39f0eb134d60dbbea7047f014a7a3f0152e0de2e Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 30 Jan 2022 13:25:41 +0000
Subject: [PATCH 21/36] clean up

---
 packages/client/src/os.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index 4bf6daa7cbf0..d23d459b8eae 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -1,6 +1,6 @@
 // TODO: なんでもかんでもos.tsに突っ込むのやめたいのでよしなに分割する
 
-import { Component, defineAsyncComponent, markRaw, reactive, Ref, ref } from 'vue';
+import { Component, markRaw, Ref, ref } from 'vue';
 import { EventEmitter } from 'eventemitter3';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import * as Misskey from 'misskey-js';
@@ -10,7 +10,6 @@ import MkWaitingDialog from '@/components/waiting-dialog.vue';
 import { MenuItem } from '@/types/menu';
 import { resolve } from '@/router';
 import { $i } from '@/account';
-import { defaultStore } from '@/store';
 
 export const pendingApiRequestsCount = ref(0);
 

From 6a000b318492759ffc0293b07c63a4dcb5640794 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 31 Jan 2022 01:36:52 +0900
Subject: [PATCH 22/36] =?UTF-8?q?jpeg,=20png=E3=81=AB=E3=82=82=E3=81=A9?=
 =?UTF-8?q?=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/scripts/upload.ts | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/scripts/upload.ts b/packages/client/src/scripts/upload.ts
index 4e37a5ddc9dc..e3dbbf5dcb70 100644
--- a/packages/client/src/scripts/upload.ts
+++ b/packages/client/src/scripts/upload.ts
@@ -14,17 +14,22 @@ type Uploading = {
 export const uploads = ref<Uploading[]>([]);
 
 const compressTypeMap = {
-	'image/jpeg': { quality: 0.85, mimeType: 'image/webp'},
-	'image/webp': { quality: 0.85, mimeType: 'image/webp'},
-	'image/png': { quality: 1, mimeType: 'image/webp'},
-	'image/svg+xml': { quality: 1, mimeType: 'image/webp'},
+	'image/jpeg': { quality: 0.85, mimeType: 'image/jpeg'},
+	'image/webp': { quality: 0.85, mimeType: 'image/jpeg'},
+	'image/png': { quality: 1, mimeType: 'image/png'},
+	'image/svg+xml': { quality: 1, mimeType: 'image/png'},
 } as const;
 
 const mimeTypeMap = {
 	'image/webp': 'webp',
 } as const;
 
-export function uploadFile(file: File, folder?: any, name?: string, keepOriginal: boolean = defaultStore.state.keepOriginalUploading): Promise<Misskey.entities.DriveFile> {
+export function uploadFile(
+	file: File,
+	folder?: any,
+	name?: string,
+	keepOriginal: boolean = defaultStore.state.keepOriginalUploading
+): Promise<Misskey.entities.DriveFile> {
 	if (folder && typeof folder == 'object') folder = folder.id;
 
 	return new Promise((resolve, reject) => {

From 599510c5be0c6c2ea0758173866d572739afccdc Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 31 Jan 2022 01:37:14 +0900
Subject: [PATCH 23/36] fix

---
 packages/client/src/scripts/upload.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/client/src/scripts/upload.ts b/packages/client/src/scripts/upload.ts
index e3dbbf5dcb70..3d632edb80d0 100644
--- a/packages/client/src/scripts/upload.ts
+++ b/packages/client/src/scripts/upload.ts
@@ -22,6 +22,8 @@ const compressTypeMap = {
 
 const mimeTypeMap = {
 	'image/webp': 'webp',
+	'image/jpeg': 'jpg',
+	'image/png': 'png',
 } as const;
 
 export function uploadFile(

From ee6e1633efa6bbf89bf8a462ad01da26c1334431 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 5 Feb 2022 02:16:56 +0900
Subject: [PATCH 24/36] fix name

---
 packages/client/src/scripts/upload.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/scripts/upload.ts b/packages/client/src/scripts/upload.ts
index 3d632edb80d0..e4e761eb5b49 100644
--- a/packages/client/src/scripts/upload.ts
+++ b/packages/client/src/scripts/upload.ts
@@ -14,9 +14,9 @@ type Uploading = {
 export const uploads = ref<Uploading[]>([]);
 
 const compressTypeMap = {
-	'image/jpeg': { quality: 0.85, mimeType: 'image/jpeg'},
+	'image/jpeg': { quality: 0.85 },
 	'image/webp': { quality: 0.85, mimeType: 'image/jpeg'},
-	'image/png': { quality: 1, mimeType: 'image/png'},
+	'image/png': { quality: 1 },
 	'image/svg+xml': { quality: 1, mimeType: 'image/png'},
 } as const;
 
@@ -51,17 +51,21 @@ export function uploadFile(
 
 			let resizedImage: any;
 			if (!keepOriginal && file.type in compressTypeMap) {
+				const imgConfig = compressTypeMap[file.type];
+				const changeType = 'mimeType' in imgConfig;
+
 				const config = {
 					maxWidth: 2048,
 					maxHeight: 2048,
 					autoRotate: true,
 					debug: true,
-					...compressTypeMap[file.type],
+					...imgConfig,
+					...(changeType ? {} : { mimeType: file.type }),
 				};
 
 				const { readAndCompressImage } = await import('browser-image-resizer');
 				resizedImage = await readAndCompressImage(file, config);
-				ctx.name = `${ctx.name}.${mimeTypeMap[compressTypeMap[file.type].mimeType]}`;
+				ctx.name = changeType ? `${ctx.name}.${mimeTypeMap[compressTypeMap[file.type].mimeType]}` : ctx.name;
 			}
 
 			const data = new FormData();

From e7d9221a7135ad620b2c12a20d2169f63c86cb60 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 7 Feb 2022 03:01:23 +0900
Subject: [PATCH 25/36] =?UTF-8?q?webp=E3=81=A7=E3=81=AA=E3=81=8F=E3=81=99?=
 =?UTF-8?q?=E3=82=8B=20=E3=81=9F=E3=81=A0=E3=81=97=E3=82=B5=E3=83=A0?=
 =?UTF-8?q?=E3=83=8D=E3=82=84=E3=83=97=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC?=
 =?UTF-8?q?=E3=81=AFwebp=E3=81=AE=E3=81=BE=E3=81=BE=20(=E3=83=86=E3=82=B9?=
 =?UTF-8?q?=E3=83=88)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/backend/src/misc/populate-emojis.ts        |  2 +-
 packages/backend/src/server/file/send-drive-file.ts |  4 ++--
 packages/backend/src/services/drive/add-file.ts     | 12 +++++++-----
 packages/client/src/scripts/upload.ts               |  1 -
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/backend/src/misc/populate-emojis.ts b/packages/backend/src/misc/populate-emojis.ts
index a6e5705ec00b..3baa57d5ac12 100644
--- a/packages/backend/src/misc/populate-emojis.ts
+++ b/packages/backend/src/misc/populate-emojis.ts
@@ -63,7 +63,7 @@ export async function populateEmoji(emojiName: string, noteUserHost: string | nu
 
 	const isLocal = emoji.host == null;
 	const emojiUrl = emoji.publicUrl || emoji.originalUrl; // || emoji.originalUrl してるのは後方互換性のため
-	const url = isLocal ? emojiUrl : `${config.url}/proxy/${encodeURIComponent(emojiUrl)}?${query({ url: emojiUrl })}`;
+	const url = isLocal ? emojiUrl : `${config.url}/proxy/${encodeURIComponent((new URL(emojiUrl)).pathname)}?${query({ url: emojiUrl })}`;
 
 	return {
 		name: emojiName,
diff --git a/packages/backend/src/server/file/send-drive-file.ts b/packages/backend/src/server/file/send-drive-file.ts
index c0444b0ead4c..9d5b7981367a 100644
--- a/packages/backend/src/server/file/send-drive-file.ts
+++ b/packages/backend/src/server/file/send-drive-file.ts
@@ -11,7 +11,7 @@ import { DriveFiles } from '@/models/index';
 import { InternalStorage } from '@/services/drive/internal-storage';
 import { downloadUrl } from '@/misc/download-url';
 import { detectType } from '@/misc/get-file-info';
-import { convertToWebp } from '@/services/drive/image-processor';
+import { convertToWebp, convertToJpeg, convertToPng } from '@/services/drive/image-processor';
 import { GenerateVideoThumbnail } from '@/services/drive/generate-video-thumbnail';
 import { StatusError } from '@/misc/fetch';
 import { FILE_TYPE_BROWSERSAFE } from '@/const';
@@ -74,7 +74,7 @@ export default async function(ctx: Koa.Context) {
 
 					if (isWebpublic) {
 						if (['image/svg+xml'].includes(mime)) {
-							return await convertToWebp(path, 2048, 2048, 100);
+							return await convertToPng(path, 2048, 2048);
 						}
 					}
 
diff --git a/packages/backend/src/services/drive/add-file.ts b/packages/backend/src/services/drive/add-file.ts
index 3788824612ed..04eb31191e5d 100644
--- a/packages/backend/src/services/drive/add-file.ts
+++ b/packages/backend/src/services/drive/add-file.ts
@@ -194,7 +194,7 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
 		}
 
 		satisfyWebpublic = !!(
-			type !== 'image/svg+xml' &&
+			type !== 'image/svg+xml' && type !== 'image/webp' &&
 			!(metadata.exif || metadata.iptc || metadata.xmp || metadata.tifftagPhotoshop) &&
 			metadata.width && metadata.width <= 2048 &&
 			metadata.height && metadata.height <= 2048
@@ -214,10 +214,12 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
 		logger.info(`creating web image`);
 
 		try {
-			if (['image/webp', 'image/jpeg'].includes(type)) {
-				webpublic = await convertSharpToWebp(img, 2048, 2048);
-			} else if (['image/png', 'image/svg+xml'].includes(type)) {
-				webpublic = await convertSharpToWebp(img, 2048, 2048, 100);
+			if (['image/jpeg', 'image/webp'].includes(type)) {
+				webpublic = await convertSharpToJpeg(img, 2048, 2048);
+			} else if (['image/png'].includes(type)) {
+				webpublic = await convertSharpToPng(img, 2048, 2048);
+			} else if (['image/svg+xml'].includes(type)) {
+				webpublic = await convertSharpToPng(img, 2048, 2048);
 			} else {
 				logger.debug(`web image not created (not an required image)`);
 			}
diff --git a/packages/client/src/scripts/upload.ts b/packages/client/src/scripts/upload.ts
index e4e761eb5b49..ee3b41475eb2 100644
--- a/packages/client/src/scripts/upload.ts
+++ b/packages/client/src/scripts/upload.ts
@@ -16,7 +16,6 @@ export const uploads = ref<Uploading[]>([]);
 const compressTypeMap = {
 	'image/jpeg': { quality: 0.85 },
 	'image/webp': { quality: 0.85, mimeType: 'image/jpeg'},
-	'image/png': { quality: 1 },
 	'image/svg+xml': { quality: 1, mimeType: 'image/png'},
 } as const;
 

From fdb17e08b97d3052eb02869580373aaec5aedf96 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 7 Feb 2022 03:22:00 +0900
Subject: [PATCH 26/36] =?UTF-8?q?=E5=8B=95=E7=94=BB=E3=82=B5=E3=83=A0?=
 =?UTF-8?q?=E3=83=8D=E3=82=A4=E3=83=AB=E3=81=AFjpeg=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../backend/src/services/drive/generate-video-thumbnail.ts   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/backend/src/services/drive/generate-video-thumbnail.ts b/packages/backend/src/services/drive/generate-video-thumbnail.ts
index 439079196d4a..c3ff98bc3f0a 100644
--- a/packages/backend/src/services/drive/generate-video-thumbnail.ts
+++ b/packages/backend/src/services/drive/generate-video-thumbnail.ts
@@ -1,6 +1,6 @@
 import * as fs from 'fs';
 import * as tmp from 'tmp';
-import { IImage, convertToWebp } from './image-processor';
+import { IImage, convertToJpeg } from './image-processor';
 import * as FFmpeg from 'fluent-ffmpeg';
 
 export async function GenerateVideoThumbnail(path: string): Promise<IImage> {
@@ -27,7 +27,8 @@ export async function GenerateVideoThumbnail(path: string): Promise<IImage> {
 
 	const outPath = `${outDir}/output.png`;
 
-	const thumbnail = await convertToWebp(outPath, 498, 280);
+	// JPEGに変換 (Webpでもいいが、MastodonはWebpをサポートせず表示できなくなる)
+	const thumbnail = await convertToJpeg(outPath, 498, 280);
 
 	// cleanup
 	await fs.promises.unlink(outPath);

From 7102e43e1e85bd9ae5708dd62096ee03c141c6ea Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 7 Feb 2022 03:26:22 +0900
Subject: [PATCH 27/36] =?UTF-8?q?=E3=82=A8=E3=83=A9=E3=83=BC=E3=83=8F?=
 =?UTF-8?q?=E3=83=B3=E3=83=89=E3=83=AA=E3=83=B3=E3=82=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/scripts/upload.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/scripts/upload.ts b/packages/client/src/scripts/upload.ts
index ee3b41475eb2..ccba142c5c1f 100644
--- a/packages/client/src/scripts/upload.ts
+++ b/packages/client/src/scripts/upload.ts
@@ -62,9 +62,13 @@ export function uploadFile(
 					...(changeType ? {} : { mimeType: file.type }),
 				};
 
-				const { readAndCompressImage } = await import('browser-image-resizer');
-				resizedImage = await readAndCompressImage(file, config);
-				ctx.name = changeType ? `${ctx.name}.${mimeTypeMap[compressTypeMap[file.type].mimeType]}` : ctx.name;
+				try {
+					const { readAndCompressImage } = await import('browser-image-resizer');
+					resizedImage = await readAndCompressImage(file, config);
+					ctx.name = changeType ? `${ctx.name}.${mimeTypeMap[compressTypeMap[file.type].mimeType]}` : ctx.name;
+				} catch (e) {
+					console.error('Failed to resize image', e);
+				}
 			}
 
 			const data = new FormData();

From 8979dbc1a56b890df8c1d13c05a77245d1f28e09 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 16 Feb 2022 18:25:29 +0900
Subject: [PATCH 28/36] :v:

---
 packages/client/package.json |  2 +-
 packages/client/yarn.lock    | 29 ++++++++++++++---------------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/client/package.json b/packages/client/package.json
index b328afa07f79..30971863ea81 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -44,7 +44,7 @@
 		"autwh": "0.1.0",
 		"blurhash": "1.1.4",
 		"broadcast-channel": "4.9.0",
-		"browser-image-resizer": "2.2.1",
+		"browser-image-resizer": "git+https://github.com/misskey-dev/browser-image-resizer#v2.2.1-misskey-beta.1",
 		"chart.js": "3.7.0",
 		"chartjs-adapter-date-fns": "2.0.0",
 		"chartjs-plugin-gradient": "0.2.1",
diff --git a/packages/client/yarn.lock b/packages/client/yarn.lock
index 7b4aba2794f0..8a4e1c21ee4d 100644
--- a/packages/client/yarn.lock
+++ b/packages/client/yarn.lock
@@ -1041,6 +1041,11 @@
   resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.6.0.tgz#2c275aa05c895eccebbfc34cfb223c6e8bd591a2"
   integrity sha512-ZkVeqEmRpBV2GHvjjUZqEai2PpUbuq8Bqd//vEYsp63J8WyexI8ppCqVS3Zs0QADf6aWuPdU+0XsPI647PVlQA==
 
+"@xmldom/xmldom@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.7.5.tgz#09fa51e356d07d0be200642b0e4f91d8e6dd408d"
+  integrity sha512-V3BIhmY36fXZ1OtVcI9W+FxQqxVLsPKcNjWigIaa81dLC9IolJl5Mt4Cvhmr0flUnjSpTdrbMTSbXqYqV5dT6A==
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -1421,12 +1426,11 @@ broadcast-channel@4.9.0:
     rimraf "3.0.2"
     unload "2.3.1"
 
-browser-image-resizer@2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/browser-image-resizer/-/browser-image-resizer-2.2.1.tgz#61ba6d71edbdcc2caf2017c5687f5a8cf6301689"
-  integrity sha512-NwtjlgzKzX9zjI8bh77bnVeOrn6ZuOhD1u7NFjNClQbjCEwI4VH0GYqCh5Bcb0WIWZCDEVJFH9PH49Blk53nlw==
+"browser-image-resizer@git+https://github.com/misskey-dev/browser-image-resizer#v2.2.1-misskey-beta.1":
+  version "2.2.1-misskey-beta.1"
+  resolved "git+https://github.com/misskey-dev/browser-image-resizer#298437278e8ed5ba5aa8ad42107b6486adb78636"
   dependencies:
-    exifreader "^3.1.0"
+    exifreader "^4.2.0"
 
 browser-stdout@1.3.1:
   version "1.3.1"
@@ -2721,12 +2725,12 @@ executable@^4.1.1:
   dependencies:
     pify "^2.2.0"
 
-exifreader@^3.1.0:
-  version "3.16.0"
-  resolved "https://registry.yarnpkg.com/exifreader/-/exifreader-3.16.0.tgz#3c106eccd134e8f4786f9e8e600f8269c5296b80"
-  integrity sha512-RfdE1LrU3KJm8NFnU3jJG4/1quEancwTz1VgwzItP11fBoVnb3Vp7JL8bQKU8rSgZm+Roa3+BJ7zg4OtoFhTFA==
+exifreader@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/exifreader/-/exifreader-4.2.0.tgz#c1db08348a17dcaba345bfe63d91e15c24681360"
+  integrity sha512-PfBYmkC4jqVRC+hIJevXuCY6RQDCy3XrIb9+S4Ro2gSeRepbDLx3SQoD89Go3e+eeV5QdEg71q3aWA2DgeKSGw==
   optionalDependencies:
-    xmldom "^0.1.31"
+    "@xmldom/xmldom" "^0.7.5"
 
 exit-on-epipe@~1.0.1:
   version "1.0.1"
@@ -6390,11 +6394,6 @@ xml-js@^1.6.11:
   dependencies:
     sax "^1.2.4"
 
-xmldom@^0.1.31:
-  version "0.1.31"
-  resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.31.tgz#b76c9a1bd9f0a9737e5a72dc37231cf38375e2ff"
-  integrity sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==
-
 y18n@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.1.tgz#8db2b83c31c5d75099bb890b23f3094891e247d4"

From 211bdb0cea00941cf09eea966102628822fdd7de Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 16 Feb 2022 19:14:30 +0900
Subject: [PATCH 29/36] v2.2.1-misskey-beta.2

---
 packages/client/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/package.json b/packages/client/package.json
index 30971863ea81..b407bab86fa4 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -44,7 +44,7 @@
 		"autwh": "0.1.0",
 		"blurhash": "1.1.4",
 		"broadcast-channel": "4.9.0",
-		"browser-image-resizer": "git+https://github.com/misskey-dev/browser-image-resizer#v2.2.1-misskey-beta.1",
+		"browser-image-resizer": "git+https://github.com/misskey-dev/browser-image-resizer#v2.2.1-misskey-beta.2",
 		"chart.js": "3.7.0",
 		"chartjs-adapter-date-fns": "2.0.0",
 		"chartjs-plugin-gradient": "0.2.1",

From 40dfef960d943f7e53fee20005143204d618590a Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 16 Feb 2022 20:11:06 +0900
Subject: [PATCH 30/36] browser-image-resizer#v2.2.1-misskey.1

---
 packages/client/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/package.json b/packages/client/package.json
index b407bab86fa4..f0a410148759 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -44,7 +44,7 @@
 		"autwh": "0.1.0",
 		"blurhash": "1.1.4",
 		"broadcast-channel": "4.9.0",
-		"browser-image-resizer": "git+https://github.com/misskey-dev/browser-image-resizer#v2.2.1-misskey-beta.2",
+		"browser-image-resizer": "git+https://github.com/misskey-dev/browser-image-resizer#v2.2.1-misskey.1",
 		"chart.js": "3.7.0",
 		"chartjs-adapter-date-fns": "2.0.0",
 		"chartjs-plugin-gradient": "0.2.1",

From 60d7d03ecb95d85d4201e5ce33edb9b0674b7dc2 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 16 Feb 2022 20:23:40 +0900
Subject: [PATCH 31/36] :v:

---
 packages/client/src/scripts/upload.ts | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/scripts/upload.ts b/packages/client/src/scripts/upload.ts
index ccba142c5c1f..cadbd8d20896 100644
--- a/packages/client/src/scripts/upload.ts
+++ b/packages/client/src/scripts/upload.ts
@@ -3,6 +3,7 @@ import { defaultStore } from '@/store';
 import { apiUrl } from '@/config';
 import * as Misskey from 'misskey-js';
 import { $i } from '@/account';
+import { readAndCompressImage } from 'browser-image-resizer';
 
 type Uploading = {
 	id: string;
@@ -14,9 +15,9 @@ type Uploading = {
 export const uploads = ref<Uploading[]>([]);
 
 const compressTypeMap = {
-	'image/jpeg': { quality: 0.85 },
-	'image/webp': { quality: 0.85, mimeType: 'image/jpeg'},
-	'image/svg+xml': { quality: 1, mimeType: 'image/png'},
+	'image/jpeg': { quality: 0.85, mimeType: 'image/jpeg' },
+	'image/webp': { quality: 0.85, mimeType: 'image/jpeg' },
+	'image/svg+xml': { quality: 1, mimeType: 'image/png' },
 } as const;
 
 const mimeTypeMap = {
@@ -51,21 +52,17 @@ export function uploadFile(
 			let resizedImage: any;
 			if (!keepOriginal && file.type in compressTypeMap) {
 				const imgConfig = compressTypeMap[file.type];
-				const changeType = 'mimeType' in imgConfig;
 
 				const config = {
 					maxWidth: 2048,
 					maxHeight: 2048,
-					autoRotate: true,
 					debug: true,
 					...imgConfig,
-					...(changeType ? {} : { mimeType: file.type }),
 				};
 
 				try {
-					const { readAndCompressImage } = await import('browser-image-resizer');
 					resizedImage = await readAndCompressImage(file, config);
-					ctx.name = changeType ? `${ctx.name}.${mimeTypeMap[compressTypeMap[file.type].mimeType]}` : ctx.name;
+					ctx.name = file.type !== imgConfig.mimeType ? `${ctx.name}.${mimeTypeMap[compressTypeMap[file.type].mimeType]}` : ctx.name;
 				} catch (e) {
 					console.error('Failed to resize image', e);
 				}

From 673361f2147ae9f5f9840452e644170e6fafce7e Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 19 Feb 2022 19:15:47 +0900
Subject: [PATCH 32/36] fix alert

---
 packages/client/src/scripts/upload.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/scripts/upload.ts b/packages/client/src/scripts/upload.ts
index cadbd8d20896..7e4f793b4495 100644
--- a/packages/client/src/scripts/upload.ts
+++ b/packages/client/src/scripts/upload.ts
@@ -4,6 +4,7 @@ import { apiUrl } from '@/config';
 import * as Misskey from 'misskey-js';
 import { $i } from '@/account';
 import { readAndCompressImage } from 'browser-image-resizer';
+import { alert } from '@/os';
 
 type Uploading = {
 	id: string;
@@ -84,7 +85,8 @@ export function uploadFile(
 
 					alert({
 						type: 'error',
-						text: 'upload failed'
+						title: 'Failed to upload',
+						text: `${JSON.stringify(ev.target?.response)}, ${JSON.stringify(xhr.response)}`
 					});
 
 					reject();

From 8f4c9ad15caa22dbfe0c89e97a4472b696f78d46 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 21 Feb 2022 02:29:13 +0900
Subject: [PATCH 33/36] :v:

---
 .../backend/src/models/repositories/user.ts   |   6 +-
 packages/backend/src/server/index.ts          |  19 +--
 packages/backend/src/server/proxy/avatar.ts   | 110 ++++++++++++++++++
 packages/backend/src/server/proxy/index.ts    |  26 -----
 .../backend/src/server/proxy/proxy-media.ts   |  22 +++-
 .../client/src/components/autocomplete.vue    |   3 +-
 .../client/src/components/global/avatar.vue   |   7 +-
 .../client/src/components/page-preview.vue    |  24 ++--
 packages/client/src/components/signin.vue     |   5 +-
 packages/client/src/scripts/get-avatar-url.ts |  14 +++
 10 files changed, 168 insertions(+), 68 deletions(-)
 create mode 100644 packages/backend/src/server/proxy/avatar.ts
 delete mode 100644 packages/backend/src/server/proxy/index.ts
 create mode 100644 packages/client/src/scripts/get-avatar-url.ts

diff --git a/packages/backend/src/models/repositories/user.ts b/packages/backend/src/models/repositories/user.ts
index aea94b379755..2f14784a3fb1 100644
--- a/packages/backend/src/models/repositories/user.ts
+++ b/packages/backend/src/models/repositories/user.ts
@@ -185,10 +185,14 @@ export class UserRepository extends Repository<User> {
 		if (user.avatarUrl) {
 			return user.avatarUrl;
 		} else {
-			return `${config.url}/identicon/${user.id}`;
+			return this.getIdenticonUrl(user);
 		}
 	}
 
+	public getIdenticonUrl(user: User): string {
+		return `${config.url}/identicon/${user.id}`;
+	}
+
 	public async pack<ExpectsMe extends boolean | null = null, D extends boolean = false>(
 		src: User['id'] | User,
 		me?: { id: User['id'] } | null | undefined,
diff --git a/packages/backend/src/server/index.ts b/packages/backend/src/server/index.ts
index 4d6b402e645c..a7458914ffdb 100644
--- a/packages/backend/src/server/index.ts
+++ b/packages/backend/src/server/index.ts
@@ -23,7 +23,6 @@ import { UserProfiles, Users } from '@/models/index';
 import { genIdenticon } from '@/misc/gen-identicon';
 import { createTemp } from '@/misc/create-temp';
 import { publishMainStream } from '@/services/stream';
-import * as Acct from 'misskey-js/built/acct';
 
 export const serverLogger = new Logger('server', 'gray', false);
 
@@ -56,7 +55,8 @@ if (config.url.startsWith('https') && !config.disableHsts) {
 
 app.use(mount('/api', apiServer));
 app.use(mount('/files', require('./file')));
-app.use(mount('/proxy', require('./proxy')));
+app.use(mount('/proxy', require('./proxy/proxy-media')));
+app.use(mount('/avatar.webp', require('./proxy/avatar')));
 
 // Init router
 const router = new Router();
@@ -66,21 +66,6 @@ router.use(activityPub.routes());
 router.use(nodeinfo.routes());
 router.use(wellKnown.routes());
 
-router.get('/avatar/@:acct', async ctx => {
-	const { username, host } = Acct.parse(ctx.params.acct);
-	const user = await Users.findOne({
-		usernameLower: username.toLowerCase(),
-		host: host === config.host ? null : host,
-		isSuspended: false,
-	});
-
-	if (user) {
-		ctx.redirect(Users.getAvatarUrl(user));
-	} else {
-		ctx.redirect('/static-assets/user-unknown.png');
-	}
-});
-
 router.get('/identicon/:x', async ctx => {
 	const [temp] = await createTemp();
 	await genIdenticon(ctx.params.x, fs.createWriteStream(temp));
diff --git a/packages/backend/src/server/proxy/avatar.ts b/packages/backend/src/server/proxy/avatar.ts
new file mode 100644
index 000000000000..2f52ffd8ddd5
--- /dev/null
+++ b/packages/backend/src/server/proxy/avatar.ts
@@ -0,0 +1,110 @@
+import * as Koa from 'koa';
+import { serverLogger } from '../index';
+import { createTemp } from '@/misc/create-temp';
+import { downloadUrl } from '@/misc/download-url';
+import { detectType } from '@/misc/get-file-info';
+import { StatusError } from '@/misc/fetch';
+import { FILE_TYPE_BROWSERSAFE } from '@/const';
+import * as Acct from 'misskey-js/built/acct';
+import { Users } from '@/models/index';
+import config from '@/config/index';
+import * as sharp from 'sharp';
+import { User } from '@/models/entities/user';
+import * as cors from '@koa/cors';
+import * as Router from '@koa/router';
+
+const logger = serverLogger.createSubLogger('proxy-avatar', 'yellow');
+
+// Init app
+const app = new Koa();
+app.use(cors());
+app.use(async (ctx, next) => {
+	ctx.set('Content-Security-Policy', `default-src 'none'; img-src 'self'; media-src 'self'; style-src 'unsafe-inline'`);
+	await next();
+});
+
+// Init router
+const router = new Router();
+
+router.get('(.*)', proxyAvatar);
+
+// Register router
+app.use(router.routes());
+
+module.exports = app;
+
+export async function proxyAvatar(ctx: Koa.Context) {
+	let user: User | undefined;
+
+	if (ctx.query.acct) {
+		if (Array.isArray(ctx.query.acct)) {
+			logger.info(`acct is duplicated`);
+			return ctx.redirect('/static-assets/user-unknown.png');
+		};
+		const { username, host } = Acct.parse(ctx.query.acct);
+		user = await Users.findOne({
+			usernameLower: username.toLowerCase(),
+			host: host === config.host ? null : host,
+			isSuspended: false,
+		});
+	} else if (ctx.query.userId) {
+		if (Array.isArray(ctx.query.userId)) {
+			logger.info(`userId is duplicated`);
+			return ctx.redirect('/static-assets/user-unknown.png');
+		};
+		user = await Users.findOne(ctx.query.userId);
+	}
+
+	if (!user || user.isSuspended) {
+		logger.info(`user is not found or is suspended: ${ctx.query}`);
+		return ctx.redirect('/static-assets/user-unknown.png');
+	}
+	if (!user.avatarUrl) return ctx.redirect(Users.getIdenticonUrl(user));
+	if (ctx.query.url !== user.avatarUrl) {
+		logger.info(`redirect`);
+		// 最新の、キャッシュすべきURLへリダイレクト
+		const url = new URL(ctx.URL);
+		url.searchParams.set('url', user.avatarUrl);
+		return ctx.redirect(url.toString());
+	}
+
+	// Create temp file
+	const [path, cleanup] = await createTemp();
+
+	try {
+		await downloadUrl(user.avatarUrl, path);
+
+		const { mime, ext } = await detectType(path);
+
+		if (!mime.startsWith('image/') || !FILE_TYPE_BROWSERSAFE.includes(mime)) {
+			cleanup();
+			return ctx.redirect(Users.getIdenticonUrl(user));
+		}
+
+		ctx.set('Content-Type', 'image/webp');
+		ctx.set('Cache-Control', 'max-age=31536000, immutable');
+
+		ctx.body = await sharp(path, {
+			pages: 'static' in ctx.query ? 256 : 1,
+		})
+		.resize(256, 256, {
+			fit: 'cover',
+			withoutEnlargement: true,
+		})
+		.rotate()
+		.webp({
+			quality: 95,
+		})
+		.toBuffer();
+	} catch (e) {
+		serverLogger.error(`${e}`);
+
+		if (e instanceof StatusError && e.isClientError) {
+			ctx.status = e.statusCode;
+		} else {
+			ctx.status = 500;
+		}
+	} finally {
+		cleanup();
+	}
+}
diff --git a/packages/backend/src/server/proxy/index.ts b/packages/backend/src/server/proxy/index.ts
deleted file mode 100644
index 7a3094311cf5..000000000000
--- a/packages/backend/src/server/proxy/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Media Proxy
- */
-
-import * as Koa from 'koa';
-import * as cors from '@koa/cors';
-import * as Router from '@koa/router';
-import { proxyMedia } from './proxy-media';
-
-// Init app
-const app = new Koa();
-app.use(cors());
-app.use(async (ctx, next) => {
-	ctx.set('Content-Security-Policy', `default-src 'none'; img-src 'self'; media-src 'self'; style-src 'unsafe-inline'`);
-	await next();
-});
-
-// Init router
-const router = new Router();
-
-router.get('/:url*', proxyMedia);
-
-// Register router
-app.use(router.routes());
-
-module.exports = app;
diff --git a/packages/backend/src/server/proxy/proxy-media.ts b/packages/backend/src/server/proxy/proxy-media.ts
index 7caac382cc2d..0e4dd4d7c6ce 100644
--- a/packages/backend/src/server/proxy/proxy-media.ts
+++ b/packages/backend/src/server/proxy/proxy-media.ts
@@ -7,8 +7,28 @@ import { downloadUrl } from '@/misc/download-url';
 import { detectType } from '@/misc/get-file-info';
 import { StatusError } from '@/misc/fetch';
 import { FILE_TYPE_BROWSERSAFE } from '@/const';
+import * as cors from '@koa/cors';
+import * as Router from '@koa/router';
 
-export async function proxyMedia(ctx: Koa.Context) {
+// Init app
+const app = new Koa();
+app.use(cors());
+app.use(async (ctx, next) => {
+	ctx.set('Content-Security-Policy', `default-src 'none'; img-src 'self'; media-src 'self'; style-src 'unsafe-inline'`);
+	await next();
+});
+
+// Init router
+const router = new Router();
+
+router.get('/:url*', proxyMedia);
+
+// Register router
+app.use(router.routes());
+
+module.exports = app;
+
+async function proxyMedia(ctx: Koa.Context) {
 	const url = 'url' in ctx.query ? ctx.query.url : 'https://' + ctx.params.url;
 
 	if (typeof url !== 'string') {
diff --git a/packages/client/src/components/autocomplete.vue b/packages/client/src/components/autocomplete.vue
index 91a50ffa5999..bba4cf52e2e8 100644
--- a/packages/client/src/components/autocomplete.vue
+++ b/packages/client/src/components/autocomplete.vue
@@ -2,7 +2,7 @@
 <div ref="rootEl" class="swhvrteh _popup _shadow" :style="{ zIndex }" @contextmenu.prevent="() => {}">
 	<ol v-if="type === 'user'" ref="suggests" class="users">
 		<li v-for="user in users" tabindex="-1" class="user" @click="complete(type, user)" @keydown="onKeydown">
-			<img class="avatar" :src="user.avatarUrl"/>
+			<img class="avatar" :src="getAvatarUrl(user)"/>
 			<span class="name">
 				<MkUserName :key="user.id" :user="user"/>
 			</span>
@@ -44,6 +44,7 @@ import { emojilist } from '@/scripts/emojilist';
 import { instance } from '@/instance';
 import { twemojiSvgBase } from '@/scripts/twemoji-base';
 import { i18n } from '@/i18n';
+import { getAvatarUrl } from '@/scripts/get-avatar-url';
 
 type EmojiDef = {
 	emoji: string;
diff --git a/packages/client/src/components/global/avatar.vue b/packages/client/src/components/global/avatar.vue
index 27cfb6e4d425..19d034cca906 100644
--- a/packages/client/src/components/global/avatar.vue
+++ b/packages/client/src/components/global/avatar.vue
@@ -12,11 +12,10 @@
 <script lang="ts" setup>
 import { onMounted, watch } from 'vue';
 import * as misskey from 'misskey-js';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
 import { acct, userPage } from '@/filters/user';
 import MkUserOnlineIndicator from '@/components/user-online-indicator.vue';
-import { defaultStore } from '@/store';
+import { getAvatarUrl } from '@/scripts/get-avatar-url';
 
 const props = withDefaults(defineProps<{
 	user: misskey.entities.User;
@@ -35,9 +34,7 @@ const emit = defineEmits<{
 	(e: 'click', ev: MouseEvent): void;
 }>();
 
-const url = $computed(() => defaultStore.state.disableShowingAnimatedImages
-	? getStaticImageUrl(props.user.avatarUrl)
-	: props.user.avatarUrl);
+const url = $computed(() => getAvatarUrl(props.user));
 
 function onClick(ev: MouseEvent) {
 	emit('click', ev);
diff --git a/packages/client/src/components/page-preview.vue b/packages/client/src/components/page-preview.vue
index 090aff6c65d2..8add7f4ce53b 100644
--- a/packages/client/src/components/page-preview.vue
+++ b/packages/client/src/components/page-preview.vue
@@ -7,29 +7,21 @@
 		</header>
 		<p v-if="page.summary" :title="page.summary">{{ page.summary.length > 85 ? page.summary.slice(0, 85) + '…' : page.summary }}</p>
 		<footer>
-			<img class="icon" :src="page.user.avatarUrl"/>
+			<img class="icon" :src="getAvatarUrl(page.user)"/>
 			<p>{{ userName(page.user) }}</p>
 		</footer>
 	</article>
 </MkA>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import * as Misskey from 'misskey-js';
 import { userName } from '@/filters/user';
-import * as os from '@/os';
-
-export default defineComponent({
-	props: {
-		page: {
-			type: Object,
-			required: true
-		},
-	},
-	methods: {
-		userName
-	}
-});
+import { getAvatarUrl } from '@/scripts/get-avatar-url';
+
+defineProps<{
+	page: Misskey.entities.Page;
+}>();
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/signin.vue b/packages/client/src/components/signin.vue
index f640e948ad12..ccf749de4132 100644
--- a/packages/client/src/components/signin.vue
+++ b/packages/client/src/components/signin.vue
@@ -1,7 +1,7 @@
 <template>
 <form class="eppvobhk _monolithic_" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
 	<div class="auth _section _formRoot">
-		<div v-show="withAvatar" class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }"></div>
+		<div v-show="withAvatar" class="avatar" :style="{ backgroundImage: user ? `url('${ getAvatarUrl(user) }')` : null }"></div>
 		<div v-if="!totpLogin" class="normal-signin">
 			<MkInput v-model="username" class="_formBlock" :placeholder="$ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required data-cy-signin-username @update:modelValue="onUsernameChange">
 				<template #prefix>@</template>
@@ -55,6 +55,7 @@ import { byteify, hexify } from '@/scripts/2fa';
 import * as os from '@/os';
 import { login } from '@/account';
 import { showSuspendedDialog } from '../scripts/show-suspended-dialog';
+import { getAvatarUrl } from '@/scripts/get-avatar-url';
 
 export default defineComponent({
 	components: {
@@ -90,6 +91,8 @@ export default defineComponent({
 			credential: null,
 			challengeData: null,
 			queryingKey: false,
+
+			getAvatarUrl,
 		};
 	},
 
diff --git a/packages/client/src/scripts/get-avatar-url.ts b/packages/client/src/scripts/get-avatar-url.ts
new file mode 100644
index 000000000000..7ba8dc3ff73b
--- /dev/null
+++ b/packages/client/src/scripts/get-avatar-url.ts
@@ -0,0 +1,14 @@
+import * as misskey from 'misskey-js';
+import { url as instanceUrl } from '@/config';
+import { defaultStore } from "@/store";
+
+export function getAvatarUrl(user: misskey.entities.User) {
+	if (user.avatarUrl && user.avatarUrl.startsWith(`${instanceUrl}/identicon`)) return user.avatarUrl;
+
+	const builder = new URL(`${instanceUrl}/avatar.webp`);
+	if (defaultStore.state.disableShowingAnimatedImages) builder.searchParams.set('static', '1');
+	if (user.avatarUrl) builder.searchParams.set('url', user.avatarUrl);
+	builder.searchParams.set('userId', user.id);
+
+	return builder.toString();
+}

From 3f0b914962bcee5f3f56e3f6606c917ccdf6afc7 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 21 Feb 2022 02:42:49 +0900
Subject: [PATCH 34/36] fix mention

---
 packages/client/src/components/mention.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/mention.vue b/packages/client/src/components/mention.vue
index 479acfbc8f1e..1a8c73c0f7e0 100644
--- a/packages/client/src/components/mention.vue
+++ b/packages/client/src/components/mention.vue
@@ -1,6 +1,6 @@
 <template>
 <MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="ldlomzub" :class="{ isMe }" :to="url" :style="{ background: bg }">
-	<img class="icon" :src="`/avatar/@${username}@${host}`" alt="">
+	<img class="icon" :src="`/avatar.webp?acct=${username}%40${host}`" alt="">
 	<span class="main">
 		<span class="username">@{{ username }}</span>
 		<span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span>

From db6acc97a5d84d3b9c382daf6c156ee5524bfd5c Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 21 Feb 2022 03:16:40 +0900
Subject: [PATCH 35/36] =?UTF-8?q?=E9=9D=99=E6=AD=A2=E7=94=BB=E5=83=8F?=
 =?UTF-8?q?=E3=81=AE=E5=A0=B4=E5=90=88=E3=81=AFstatic=E3=81=A7=E3=81=AA?=
 =?UTF-8?q?=E3=81=84URL=E3=81=AB=E3=83=AA=E3=83=80=E3=82=A4=E3=83=AC?=
 =?UTF-8?q?=E3=82=AF=E3=83=88=E3=81=97=E3=81=A6=E3=82=AD=E3=83=A3=E3=83=83?=
 =?UTF-8?q?=E3=82=B7=E3=83=A5=E3=83=92=E3=83=83=E3=83=88=E3=81=95=E3=81=9B?=
 =?UTF-8?q?=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/backend/src/server/proxy/avatar.ts | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/backend/src/server/proxy/avatar.ts b/packages/backend/src/server/proxy/avatar.ts
index 2f52ffd8ddd5..3a64c0e7e3bb 100644
--- a/packages/backend/src/server/proxy/avatar.ts
+++ b/packages/backend/src/server/proxy/avatar.ts
@@ -61,8 +61,8 @@ export async function proxyAvatar(ctx: Koa.Context) {
 	}
 	if (!user.avatarUrl) return ctx.redirect(Users.getIdenticonUrl(user));
 	if (ctx.query.url !== user.avatarUrl) {
-		logger.info(`redirect`);
 		// 最新の、キャッシュすべきURLへリダイレクト
+		logger.info(`redirect`);
 		const url = new URL(ctx.URL);
 		url.searchParams.set('url', user.avatarUrl);
 		return ctx.redirect(url.toString());
@@ -81,6 +81,20 @@ export async function proxyAvatar(ctx: Koa.Context) {
 			return ctx.redirect(Users.getIdenticonUrl(user));
 		}
 
+		//#region If image is not animated, redirect to non static url
+		const metadata = await sharp(path).metadata();
+		const isAnimated = metadata.pages && metadata.pages > 1;
+		if (ctx.query.static && !isAnimated) {
+			logger.info(`redirect to non static url`);
+			cleanup();
+			const url = new URL(ctx.URL);
+			url.searchParams.delete('static');
+			ctx.status = 301;
+			ctx.redirect(url.toString());
+			return;
+		}
+		//#endregion
+
 		ctx.set('Content-Type', 'image/webp');
 		ctx.set('Cache-Control', 'max-age=31536000, immutable');
 

From 105e6d0b619366ca4effc7c6ac2bd7ef2ee8c4e1 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 21 Feb 2022 03:26:44 +0900
Subject: [PATCH 36/36] =?UTF-8?q?acct=E3=81=AE=E3=83=AA=E3=82=AF=E3=82=A8?=
 =?UTF-8?q?=E3=82=B9=E3=83=88=E3=81=AFuserId=E3=81=B8=E3=83=AA=E3=83=80?=
 =?UTF-8?q?=E3=82=A4=E3=83=AC=E3=82=AF=E3=83=88=E3=81=99=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/backend/src/server/proxy/avatar.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/backend/src/server/proxy/avatar.ts b/packages/backend/src/server/proxy/avatar.ts
index 3a64c0e7e3bb..eaac9b71c6d3 100644
--- a/packages/backend/src/server/proxy/avatar.ts
+++ b/packages/backend/src/server/proxy/avatar.ts
@@ -60,11 +60,15 @@ export async function proxyAvatar(ctx: Koa.Context) {
 		return ctx.redirect('/static-assets/user-unknown.png');
 	}
 	if (!user.avatarUrl) return ctx.redirect(Users.getIdenticonUrl(user));
-	if (ctx.query.url !== user.avatarUrl) {
+	if (ctx.query.acct || ctx.query.url !== user.avatarUrl) {
 		// 最新の、キャッシュすべきURLへリダイレクト
 		logger.info(`redirect`);
 		const url = new URL(ctx.URL);
 		url.searchParams.set('url', user.avatarUrl);
+		if (ctx.query.acct) {
+			url.searchParams.delete('acct');
+			url.searchParams.set('userId', user.id);
+		}
 		return ctx.redirect(url.toString());
 	}