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>