enhance(frontend): 添付画像のサムネイルを領域いっぱいに表示できるように

CHANGELOG.md

@@ -5,6 +5,7 @@
 
 ### Client
 - Enhance: チャンネル指定リノートでリノート先のチャンネルに移動できるように
+- Enhance: 添付画像のサムネイルを領域いっぱいに表示できるようにするオプションを追加
 - Fix: 一部のページ内リンクが正しく動作しない問題を修正
 
 ### Server

locales/ja-JP.yml

@@ -544,6 +544,7 @@ fontSize: "フォントサイズ"
 mediaListWithOneImageAppearance: "画像が1枚のみのメディアリストの高さ"
 limitTo: "{x}を上限に"
 showMediaListByGridInWideArea: "画面幅が広いときはメディアリストを横並びで表示する"
+coverMediaList: "添付画像のサムネイルを領域いっぱいに表示する"
 noFollowRequests: "フォロー申請はありません"
 openImageInNewTab: "画像を新しいタブで開く"
 dashboard: "ダッシュボード"

packages/frontend/src/components/MkMediaList.vue

@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		>
 			<template v-for="media in mediaList.filter(media => previewable(media))">
 				<XVideo v-if="media.type.startsWith('video')" :key="`video:${media.id}`" :class="$style.media" :video="media"/>
-				<XImage v-else-if="media.type.startsWith('image')" :key="`image:${media.id}`" :class="$style.media" class="image" :data-id="media.id" :image="media" :raw="raw"/>
+				<XImage v-else-if="media.type.startsWith('image')" :key="`image:${media.id}`" :class="$style.media" class="image" :data-id="media.id" :image="media" :raw="raw" :cover="prefer.r.coverMediaList.value"/>
 			</template>
 		</div>
 	</div>

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

@@ -229,6 +229,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 									</MkPreferenceContainer>
 								</SearchMarker>
 
+								<SearchMarker :keywords="['image', 'photo', 'picture', 'media', 'thumbnail', 'cover', 'size', 'full', 'attachment']">
+									<MkPreferenceContainer k="coverMediaList">
+										<MkSwitch v-model="coverMediaList">
+											<template #label><SearchLabel>{{ i18n.ts.coverMediaList }}</SearchLabel></template>
+										</MkSwitch>
+									</MkPreferenceContainer>
+								</SearchMarker>
+
 								<SearchMarker :keywords="['reaction', 'picker', 'contextmenu', 'open']">
 									<MkPreferenceContainer k="useReactionPickerForContextMenu">
 										<MkSwitch v-model="useReactionPickerForContextMenu">
@@ -911,6 +919,7 @@ const showReactionsCount = prefer.model('showReactionsCount');
 const enableQuickAddMfmFunction = prefer.model('enableQuickAddMfmFunction');
 const forceShowAds = prefer.model('forceShowAds');
 const loadRawImages = prefer.model('loadRawImages');
+const coverMediaList = prefer.model('coverMediaList');
 const imageNewTab = prefer.model('imageNewTab');
 const showFixedPostForm = prefer.model('showFixedPostForm');
 const showFixedPostFormInChannel = prefer.model('showFixedPostFormInChannel');

packages/frontend/src/preferences/def.ts

@@ -468,6 +468,9 @@ export const PREF_DEF = definePreferences({
 	defaultVideoCompressionLevel: {
 		default: 2 as 0 | 1 | 2 | 3,
 	},
+	coverMediaList: {
+		default: false,
+	},
 
 	'sound.masterVolume': {
 		default: 0.5,

packages/i18n/src/autogen/locale.ts

@@ -2188,6 +2188,10 @@ export interface Locale extends ILocale {
      * 画面幅が広いときはメディアリストを横並びで表示する
      */
     "showMediaListByGridInWideArea": string;
+    /**
+     * 添付画像のサムネイルを領域いっぱいに表示する
+     */
+    "coverMediaList": string;
     /**
      * フォロー申請はありません
      */