moris/misskey
1
0
Fork 0
forked from mirror/misskey
Code Pull Requests Activity

revert mkmedialist changes

Browse Source
This commit is contained in:
kakkokari-gtyih 2024-08-20 16:43:38 +09:00
parent 8b6f0f204c
commit a92b555427
1 changed files with 7 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
packages/frontend/src/components/MkMediaList.vue
View File

@ -5,10 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div> <div>
<div v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :class="$style.banner"> <XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
<XBanner :media="media" :inert="inEmbedPage"/>
<a v-if="inEmbedPage && originalEntityUrl" :href="originalEntityUrl" target="_blank" rel="noopener" :class="$style.mediaLinkForEmbed"></a>
</div>
<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" ref="gallery"
@ -21,18 +18,17 @@ SPDX-License-Identifier: AGPL-3.0-only
}] : count === 2 ? $style.n2 : count === 3 ? $style.n3 : count === 4 ? $style.n4 : $style.nMany, }] : count === 2 ? $style.n2 : count === 3 ? $style.n3 : count === 4 ? $style.n4 : $style.nMany,
]" ]"
> >
<div v-for="media in mediaList.filter(media => previewable(media))" :class="$style.media"> <template v-for="media in mediaList.filter(media => previewable(media))">
<XVideo v-if="media.type.startsWith('video')" :key="`video:${media.id}`" :video="media" :class="$style.mediaInner" :inert="inEmbedPage"/> <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.mediaInner" class="image" :inert="inEmbedPage" :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"/>
<a v-if="inEmbedPage && originalEntityUrl" :href="originalEntityUrl" target="_blank" rel="noopener" :class="$style.mediaLinkForEmbed"></a> </template>
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, onMounted, onUnmounted, shallowRef, inject } from 'vue'; import { computed, onMounted, onUnmounted, shallowRef } 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';
@ -48,13 +44,8 @@ import { focusParent } from '@/scripts/focus.js';
const props = defineProps<{ const props = defineProps<{
mediaList: Misskey.entities.DriveFile[]; mediaList: Misskey.entities.DriveFile[];
raw?: boolean; raw?: boolean;
/** 埋め込みページ用 親要素の正規URL */
originalEntityUrl?: string;
}>(); }>();
const inEmbedPage = inject<boolean>('EMBED_PAGE', false);
const gallery = shallowRef<HTMLDivElement>(); const gallery = shallowRef<HTMLDivElement>();
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());
@ -102,7 +93,7 @@ async function calcAspectRatio() {
onMounted(() => { onMounted(() => {
calcAspectRatio(); calcAspectRatio();
if (defaultStore.state.imageNewTab || inEmbedPage) return; if (defaultStore.state.imageNewTab) return;
lightbox = new PhotoSwipeLightbox({ lightbox = new PhotoSwipeLightbox({
dataSource: props.mediaList dataSource: props.mediaList
@ -316,26 +307,6 @@ defineExpose({
.media { .media {
overflow: hidden; // clipにするとバグる overflow: hidden; // clipにするとバグる
border-radius: 8px; border-radius: 8px;
position: relative;
>.mediaInner {
width: 100%;
height: 100%;
}
}
.banner {
position: relative;
}
.mediaLinkForEmbed::after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
content: '';
} }
:global(.pswp) { :global(.pswp) {