From af7d86f69dd89e138d98f1285976b502f382e6c6 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 12 Apr 2023 12:56:01 +0000
Subject: [PATCH] wip
---
locales/ja-JP.yml | 2 +-
.../frontend/src/components/MkMediaList.vue | 41 +++++++++++++++----
.../frontend/src/pages/settings/general.vue | 2 +-
3 files changed, 36 insertions(+), 9 deletions(-)
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 2383883cf8..f96f88fd4b 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -476,7 +476,7 @@ regenerate: "再生成"
fontSize: "フォントサイズ"
mediaListWithOneImageAppearance: "画像が1枚のみのメディアリストの高さ"
expandAsImage: "画像に応じて拡張"
-fixTo: "{x}に固定"
+limitTo: "{x}を上限に"
noFollowRequests: "フォロー申請はありません"
openImageInNewTab: "画像を新しいタブで開く"
dashboard: "ダッシュボード"
diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue
index c7e7871d54..bc6bc58272 100644
--- a/packages/frontend/src/components/MkMediaList.vue
+++ b/packages/frontend/src/components/MkMediaList.vue
@@ -2,10 +2,14 @@
<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 ref="gallery" :class="[
- $style.medias,
- count <= 4 ? $style['n' + count] : $style.nMany,
- $style[`n1${defaultStore.reactiveState.mediaListWithOneImageAppearance.value}`]]">
+ <div
+ ref="gallery"
+ :class="[
+ $style.medias,
+ 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"/>
@@ -16,7 +20,7 @@
</template>
<script lang="ts" setup>
-import { onMounted, ref, useCssModule } from 'vue';
+import { onMounted, ref, useCssModule, watch } from 'vue';
import * as misskey from 'misskey-js';
import PhotoSwipeLightbox from 'photoswipe/lightbox';
import PhotoSwipe from 'photoswipe';
@@ -35,11 +39,34 @@ const props = defineProps<{
const $style = useCssModule();
-const gallery = ref(null);
+const gallery = ref<HTMLDivElement>();
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
@@ -172,7 +199,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
&.n116_9 {
max-height: none;
- aspect-ratio: 16/9;
+ aspect-ratio: 16 / 9; // fallback
}
}
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 3f48d50257..d63cc01b87 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/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('fixTo', { x: '16:9' }) }}</option>
+ <option value="16_9">{{ i18n.t('limitTo', { x: '16:9' }) }}</option>
</MkRadios>
</div>
</FormSection>