From 5e5f46f5aeb53ed32b59cd10e062fff9569ed31f Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 14 Apr 2023 11:37:44 +0000
Subject: [PATCH] add 1:1, 3:4

---
 locales/ja-JP.yml                              |  2 +-
 .../frontend/src/components/MkMediaList.vue    | 18 +++++++++++++++++-
 .../frontend/src/pages/settings/general.vue    |  4 +++-
 packages/frontend/src/store.ts                 |  2 +-
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 96f31a7a40..8d9b308928 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -475,7 +475,7 @@ existingAccount: "既存のアカウント"
 regenerate: "再生成"
 fontSize: "フォントサイズ"
 mediaListWithOneImageAppearance: "画像が1枚のみのメディアリストの高さ"
-expandAsImage: "画像に応じて拡張"
+friendlyRecommended: "おすすめ"
 limitTo: "{x}を上限に"
 noFollowRequests: "フォロー申請はありません"
 openImageInNewTab: "画像を新しいタブで開く"
diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue
index bca56ed23d..7b678973a8 100644
--- a/packages/frontend/src/components/MkMediaList.vue
+++ b/packages/frontend/src/components/MkMediaList.vue
@@ -54,10 +54,18 @@ function calcAspectRatio() {
 		return;
 	}
 
+	const ratioMax = (ratio: number) => `${Math.max(ratio, img.properties.width / img.properties.height).toString()} / 1`;
+
 	switch (defaultStore.state.mediaListWithOneImageAppearance) {
 		// アスペクト比上限設定では、横長の場合は高さを縮小させる
 		case '16_9':
-			gallery.value.style.aspectRatio = Math.max(16 / 9, img.properties.width / img.properties.height).toString() + '/1';
+			gallery.value.style.aspectRatio = ratioMax(16 / 9);
+			break;
+		case '1_1':
+			gallery.value.style.aspectRatio = ratioMax(1);
+			break;
+		case '3_4':
+			gallery.value.style.aspectRatio = ratioMax(3 / 4);
 			break;
 		default:
 			gallery.value.style.aspectRatio = '';
@@ -205,6 +213,14 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 			max-height: none;
 			aspect-ratio: 16 / 9; // fallback
 		}
+		&.n11_1{
+			max-height: none;
+			aspect-ratio: 1 / 1; // fallback
+		}
+		&.n13_4 {
+			max-height: none;
+			aspect-ratio: 3 / 4; // fallback
+		}
 	}
 
 	&.n2 {
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index d63cc01b87..cefe4126b1 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -83,8 +83,10 @@
 
 			<MkRadios v-model="mediaListWithOneImageAppearance">
 				<template #label>{{ i18n.ts.mediaListWithOneImageAppearance }}</template>
-				<option value="expand">{{ i18n.ts.expandAsImage }}</option>
+				<option value="expand">{{ i18n.ts.friendlyRecommended }}</option>
 				<option value="16_9">{{ i18n.t('limitTo', { x: '16:9' }) }}</option>
+				<option value="1_1">{{ i18n.t('limitTo', { x: '1:1' }) }}</option>
+				<option value="3_4">{{ i18n.t('limitTo', { x: '3:4' }) }}</option>
 			</MkRadios>
 		</div>
 	</FormSection>
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 4b7da5ed0a..90977c9fd9 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -308,7 +308,7 @@ export const defaultStore = markRaw(new Storage('base', {
 	},
 	mediaListWithOneImageAppearance: {
 		where: 'device',
-		default: 'expand' as 'expand' | '16_9',
+		default: 'expand' as 'expand' | '16_9' | '1_1' | '3_4',
 	},
 }));