refactor(client): use composition api

packages/client/src/components/media-list.vue

@@ -12,8 +12,8 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, onMounted, PropType, ref } from 'vue';
+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({
+const props = defineProps<{
-	components: {
+	mediaList: misskey.entities.DriveFile[];
-		XBanner,
+	raw?: boolean;
-		XImage,
+}>();
-		XVideo,
-	},
-	props: {
-		mediaList: {
-			type: Array as PropType<misskey.entities.DriveFile[]>,
-			required: true,
-		},
-		raw: {
-			default: false
-		},
-	},
-	setup(props) {
-		const gallery = ref(null);
 
-		onMounted(() => {
+const gallery = ref(null);
-			const lightbox = new PhotoSwipeLightbox({
+const pswpZIndex = os.claimZIndex('middle');
-				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,
-			});
 
-			lightbox.on('itemData', (e) => {
+onMounted(() => {
-				const { itemData } = e;
+	const lightbox = new PhotoSwipeLightbox({
-
+		dataSource: props.mediaList
-				// element is children
+			.filter(media => {
-				const { element } = itemData;
+				if (media.type === 'image/svg+xml') return true; // svgのwebpublicはpngなのでtrue
-
+				return media.type.startsWith('image') && FILE_TYPE_BROWSERSAFE.includes(media.type);
-				const id = element.dataset.id;
+			})
-				const file = props.mediaList.find(media => media.id === id);
+			.map(media => {
-
+				const item = {
-				itemData.src = file.url;
+					src: media.url,
-				itemData.w = Number(file.properties.width);
+					w: media.properties.width,
-				itemData.h = Number(file.properties.height);
+					h: media.properties.height,
-				if (file.properties.orientation != null && file.properties.orientation >= 5) {
+					alt: media.name,
-					[itemData.w, itemData.h] = [itemData.h, itemData.w];
+				};
+				if (media.properties.orientation != null && media.properties.orientation >= 5) {
+					[item.w, item.h] = [item.h, item.w];
 				}
-				itemData.msrc = file.thumbnailUrl;
+				return item;
-				itemData.thumbCropped = true;
+			}),
-			});
+		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,
+	});
 
-			lightbox.init();
+	lightbox.on('itemData', (ev) => {
-		});
+		const { itemData } = ev;
 
-		const previewable = (file: misskey.entities.DriveFile): boolean => {
+		// element is children
-			if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue
+		const { element } = itemData;
-			// FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切
-			return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type);
-		};
 
-		return {
+		const id = element.dataset.id;
-			previewable,
+		const file = props.mediaList.find(media => media.id === id);
-			gallery,
+
-			pswpZIndex: os.claimZIndex('middle'),
+		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;
+	});
+
+	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>