Revert "wip"

This reverts commit af7d86f69d.

locales/ja-JP.yml

@@ -476,7 +476,7 @@ regenerate: "再生成"
 fontSize: "フォントサイズ"
 mediaListWithOneImageAppearance: "画像が1枚のみのメディアリストの高さ"
 expandAsImage: "画像に応じて拡張"
-limitTo: "{x}を上限に"
+fixTo: "{x}に固定"
 noFollowRequests: "フォロー申請はありません"
 openImageInNewTab: "画像を新しいタブで開く"
 dashboard: "ダッシュボード"

packages/frontend/src/components/MkMediaList.vue

@@ -2,14 +2,10 @@
 <div>
 	<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
 	<div v-if="mediaList.filter(media => previewable(media)).length > 0" :class="$style.container">
-		<div
+		<div ref="gallery" :class="[
-			ref="gallery"
+			$style.medias,
-			:class="[
+			count <= 4 ? $style['n' + count] : $style.nMany,
-				$style.medias,
+			$style[`n1${defaultStore.reactiveState.mediaListWithOneImageAppearance.value}`]]">
-				count <= 4 ? $style['n' + count] : $style.nMany,
-				$style[`n1${defaultStore.reactiveState.mediaListWithOneImageAppearance.value}`]
-			]"
-		>
 			<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"/>
@@ -20,7 +16,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, useCssModule, watch } from 'vue';
+import { onMounted, ref, useCssModule } from 'vue';
 import * as misskey from 'misskey-js';
 import PhotoSwipeLightbox from 'photoswipe/lightbox';
 import PhotoSwipe from 'photoswipe';
@@ -39,34 +35,11 @@ const props = defineProps<{
 
 const $style = useCssModule();
 
-const gallery = ref<HTMLDivElement>();
+const gallery = ref(null);
 const pswpZIndex = os.claimZIndex('middle');
 document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString());
 const count = $computed(() => props.mediaList.filter(media => previewable(media)).length);
 
-function calcAspectRatio() {
-	if (!gallery.value) return;
-
-	let img = props.mediaList[0];
-
-	if (!(img.properties.width && img.properties.height)) {
-		gallery.value.style.aspectRatio = '';
-		return;
-	}
-
-	switch (defaultStore.state.mediaListWithOneImageAppearance) {
-		// アスペクト比上限設定では、横長の場合は高さを縮小させる
-		case '16_9':
-			gallery.value.style.aspectRatio = Math.max(16 / 9, img.properties.width / img.properties.height).toString();
-			break;
-		default:
-			gallery.value.style.aspectRatio = '';
-			break;
-	}
-}
-
-watch([defaultStore.reactiveState.mediaListWithOneImageAppearance, gallery], () => calcAspectRatio());
-
 onMounted(() => {
 	const lightbox = new PhotoSwipeLightbox({
 		dataSource: props.mediaList
@@ -199,7 +172,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 
 		&.n116_9 {
 			max-height: none;
-			aspect-ratio: 16 / 9; // fallback
+			aspect-ratio: 16/9;
 		}
 	}
 

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

@@ -84,7 +84,7 @@
 			<MkRadios v-model="mediaListWithOneImageAppearance">
 				<template #label>{{ i18n.ts.mediaListWithOneImageAppearance }}</template>
 				<option value="expand">{{ i18n.ts.expandAsImage }}</option>
-				<option value="16_9">{{ i18n.t('limitTo', { x: '16:9' }) }}</option>
+				<option value="16_9">{{ i18n.t('fixTo', { x: '16:9' }) }}</option>
 			</MkRadios>
 		</div>
 	</FormSection>