parent
c1d94a45c5
commit
bb0036ae22
|
@ -476,7 +476,7 @@ regenerate: "再生成"
|
||||||
fontSize: "フォントサイズ"
|
fontSize: "フォントサイズ"
|
||||||
mediaListWithOneImageAppearance: "画像が1枚のみのメディアリストの高さ"
|
mediaListWithOneImageAppearance: "画像が1枚のみのメディアリストの高さ"
|
||||||
expandAsImage: "画像に応じて拡張"
|
expandAsImage: "画像に応じて拡張"
|
||||||
limitTo: "{x}を上限に"
|
fixTo: "{x}に固定"
|
||||||
noFollowRequests: "フォロー申請はありません"
|
noFollowRequests: "フォロー申請はありません"
|
||||||
openImageInNewTab: "画像を新しいタブで開く"
|
openImageInNewTab: "画像を新しいタブで開く"
|
||||||
dashboard: "ダッシュボード"
|
dashboard: "ダッシュボード"
|
||||||
|
|
|
@ -2,14 +2,10 @@
|
||||||
<div>
|
<div>
|
||||||
<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
|
<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 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))">
|
<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"/>
|
<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"/>
|
||||||
|
@ -20,7 +16,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { onMounted, ref, useCssModule, watch } from 'vue';
|
import { onMounted, ref, useCssModule } from 'vue';
|
||||||
import * as misskey from 'misskey-js';
|
import * as misskey from 'misskey-js';
|
||||||
import PhotoSwipeLightbox from 'photoswipe/lightbox';
|
import PhotoSwipeLightbox from 'photoswipe/lightbox';
|
||||||
import PhotoSwipe from 'photoswipe';
|
import PhotoSwipe from 'photoswipe';
|
||||||
|
@ -39,34 +35,11 @@ const props = defineProps<{
|
||||||
|
|
||||||
const $style = useCssModule();
|
const $style = useCssModule();
|
||||||
|
|
||||||
const gallery = ref<HTMLDivElement>();
|
const gallery = ref(null);
|
||||||
const pswpZIndex = os.claimZIndex('middle');
|
const pswpZIndex = os.claimZIndex('middle');
|
||||||
document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString());
|
document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString());
|
||||||
const count = $computed(() => props.mediaList.filter(media => previewable(media)).length);
|
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(() => {
|
onMounted(() => {
|
||||||
const lightbox = new PhotoSwipeLightbox({
|
const lightbox = new PhotoSwipeLightbox({
|
||||||
dataSource: props.mediaList
|
dataSource: props.mediaList
|
||||||
|
@ -199,7 +172,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
|
||||||
|
|
||||||
&.n116_9 {
|
&.n116_9 {
|
||||||
max-height: none;
|
max-height: none;
|
||||||
aspect-ratio: 16 / 9; // fallback
|
aspect-ratio: 16/9;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -84,7 +84,7 @@
|
||||||
<MkRadios v-model="mediaListWithOneImageAppearance">
|
<MkRadios v-model="mediaListWithOneImageAppearance">
|
||||||
<template #label>{{ i18n.ts.mediaListWithOneImageAppearance }}</template>
|
<template #label>{{ i18n.ts.mediaListWithOneImageAppearance }}</template>
|
||||||
<option value="expand">{{ i18n.ts.expandAsImage }}</option>
|
<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>
|
</MkRadios>
|
||||||
</div>
|
</div>
|
||||||
</FormSection>
|
</FormSection>
|
||||||
|
|
Loading…
Reference in New Issue