diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/client/src/components/media-list.vue | 154 |
1 files changed, 68 insertions, 86 deletions
diff --git a/packages/client/src/components/media-list.vue b/packages/client/src/components/media-list.vue index efcbb12922..532627edbd 100644 --- a/packages/client/src/components/media-list.vue +++ b/packages/client/src/components/media-list.vue @@ -12,8 +12,8 @@ </div> </template> -<script lang="ts"> -import { defineComponent, onMounted, PropType, ref } from 'vue'; +<script lang="ts" setup> +import { onMounted, ref } from 'vue'; import * as misskey from 'misskey-js'; import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm.js'; import PhotoSwipe from 'photoswipe/dist/photoswipe.esm.js'; @@ -25,98 +25,80 @@ import * as os from '@/os'; import { FILE_TYPE_BROWSERSAFE } from '@/const'; import { defaultStore } from '@/store'; -export default defineComponent({ - components: { - XBanner, - XImage, - XVideo, - }, - props: { - mediaList: { - type: Array as PropType<misskey.entities.DriveFile[]>, - required: true, - }, - raw: { - default: false - }, - }, - setup(props) { - const gallery = ref(null); +const props = defineProps<{ + mediaList: misskey.entities.DriveFile[]; + raw?: boolean; +}>(); - onMounted(() => { - const lightbox = new PhotoSwipeLightbox({ - dataSource: props.mediaList - .filter(media => { - if (media.type === 'image/svg+xml') return true; // svgのwebpublicはpngなのでtrue - return media.type.startsWith('image') && FILE_TYPE_BROWSERSAFE.includes(media.type); - }) - .map(media => { - const item = { - src: media.url, - w: media.properties.width, - h: media.properties.height, - alt: media.name, - }; - if (media.properties.orientation != null && media.properties.orientation >= 5) { - [item.w, item.h] = [item.h, item.w]; - } - return item; - }), - gallery: gallery.value, - children: '.image', - thumbSelector: '.image', - loop: false, - padding: window.innerWidth > 500 ? { - top: 32, - bottom: 32, - left: 32, - right: 32, - } : { - top: 0, - bottom: 0, - left: 0, - right: 0, - }, - imageClickAction: 'close', - tapAction: 'toggle-controls', - pswpModule: PhotoSwipe, - }); +const gallery = ref(null); +const pswpZIndex = os.claimZIndex('middle'); - lightbox.on('itemData', (e) => { - const { itemData } = e; - - // element is children - const { element } = itemData; +onMounted(() => { + const lightbox = new PhotoSwipeLightbox({ + dataSource: props.mediaList + .filter(media => { + if (media.type === 'image/svg+xml') return true; // svgのwebpublicはpngなのでtrue + return media.type.startsWith('image') && FILE_TYPE_BROWSERSAFE.includes(media.type); + }) + .map(media => { + const item = { + src: media.url, + w: media.properties.width, + h: media.properties.height, + alt: media.name, + }; + if (media.properties.orientation != null && media.properties.orientation >= 5) { + [item.w, item.h] = [item.h, item.w]; + } + return item; + }), + gallery: gallery.value, + children: '.image', + thumbSelector: '.image', + loop: false, + padding: window.innerWidth > 500 ? { + top: 32, + bottom: 32, + left: 32, + right: 32, + } : { + top: 0, + bottom: 0, + left: 0, + right: 0, + }, + imageClickAction: 'close', + tapAction: 'toggle-controls', + pswpModule: PhotoSwipe, + }); - const id = element.dataset.id; - const file = props.mediaList.find(media => media.id === id); + lightbox.on('itemData', (ev) => { + const { itemData } = ev; - itemData.src = file.url; - itemData.w = Number(file.properties.width); - itemData.h = Number(file.properties.height); - if (file.properties.orientation != null && file.properties.orientation >= 5) { - [itemData.w, itemData.h] = [itemData.h, itemData.w]; - } - itemData.msrc = file.thumbnailUrl; - itemData.thumbCropped = true; - }); + // element is children + const { element } = itemData; - lightbox.init(); - }); + const id = element.dataset.id; + const file = props.mediaList.find(media => media.id === id); - const previewable = (file: misskey.entities.DriveFile): boolean => { - if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue - // FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切 - return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type); - }; + itemData.src = file.url; + itemData.w = Number(file.properties.width); + itemData.h = Number(file.properties.height); + if (file.properties.orientation != null && file.properties.orientation >= 5) { + [itemData.w, itemData.h] = [itemData.h, itemData.w]; + } + itemData.msrc = file.thumbnailUrl; + itemData.thumbCropped = true; + }); - return { - previewable, - gallery, - pswpZIndex: os.claimZIndex('middle'), - }; - }, + lightbox.init(); }); + +const previewable = (file: misskey.entities.DriveFile): boolean => { + if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue + // FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切 + return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type); +}; </script> <style lang="scss" scoped> |