refactor: combine MediaVideo & MediaImage components

packages/client/src/components/MkMedia.vue

@@ -1,9 +1,9 @@
 <template>
 	<button v-if="hide" class="qjewsnkg" @click="hide = false">
 		<ImgWithBlurhash
-			:hash="image.blurhash"
+			:hash="media.blurhash"
-			:title="image.comment"
+			:title="media.comment"
-			:alt="image.comment"
+			:alt="media.comment"
 		/>
 		<div class="text">
 			<div class="wrapper">
@@ -15,20 +15,51 @@
 			</div>
 		</div>
 	</button>
-	<div v-else class="gqnyydlz">
+	<div v-else class="gqnyydlz media" :class="{ mini: plyrMini }">
-		<a :href="image.url">
+		<a 
+			v-if="media.type.startsWith('image')" 
+			:href="media.url"
+		>
 			<ImgWithBlurhash
-				:hash="image.blurhash"
+				:hash="media.blurhash"
 				:src="url"
-				:alt="image.comment"
+				:alt="media.comment"
-				:type="image.type"
+				:type="media.type"
 				:cover="false"
 			/>
-			<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
+			<div v-if="media.type === 'image/gif'" class="gif">GIF</div>
 		</a>
+		<VuePlyr
+			v-if="media.type.startsWith('video')" 
+			ref="plyr"
+			:options="{
+				controls: [
+					'play-large',
+					'play',
+					'progress',
+					'current-time',
+					'mute',
+					'volume',
+					'pip',
+					'download',
+					'fullscreen',
+				],
+				disableContextMenu: false,
+			}"
+		>
+			<video
+				:poster="media.thumbnailUrl"
+				:aria-label="media.comment"
+				preload="none"
+				controls
+				@contextmenu.stop
+			>
+				<source :src="media.url" :type="media.type" />
+			</video>
+		</VuePlyr>
 		<div class="buttons">
 			<button
-				v-if="image.comment"
+				v-if="media.comment"
 				v-tooltip="i18n.ts.alt"
 				class="_button"
 				@click.stop="captionPopup"
@@ -47,7 +78,9 @@
 </template>
 
 <script lang="ts" setup>
-import { watch } from "vue";
+import { watch, ref, onMounted } from "vue";
+import VuePlyr from "vue-plyr";
+import "vue-plyr/dist/vue-plyr.css";
 import type * as misskey from "calckey-js";
 import { getStaticImageUrl } from "@/scripts/get-static-image-url";
 import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
@@ -56,34 +89,37 @@ import { i18n } from "@/i18n";
 import * as os from "@/os";
 
 const props = defineProps<{
-	image: misskey.entities.DriveFile;
+	media: misskey.entities.DriveFile;
 	raw?: boolean;
 }>();
 
 let hide = $ref(true);
 
+const plyr = ref();
+const plyrMini = ref(false);
+
 const url =
 	props.raw || defaultStore.state.loadRawImages
-		? props.image.url
+		? props.media.url
 		: defaultStore.state.disableShowingAnimatedImages
-		? getStaticImageUrl(props.image.thumbnailUrl)
+		? getStaticImageUrl(props.media.thumbnailUrl)
-		: props.image.thumbnailUrl;
+		: props.media.thumbnailUrl;
 
 function captionPopup() {
 	os.alert({
 		type: "info",
-		text: props.image.comment,
+		text: props.media.comment,
 	});
 }
 
 // Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
 watch(
-	() => props.image,
+	() => props.media,
 	() => {
 		hide =
 			defaultStore.state.nsfw === "force"
 				? true
-				: props.image.isSensitive &&
+				: props.media.isSensitive &&
 				  defaultStore.state.nsfw !== "ignore";
 	},
 	{
@@ -91,6 +127,17 @@ watch(
 		immediate: true,
 	}
 );
+
+onMounted(() => {
+	if (props.media.type.startsWith('video')) {
+		plyrMini.value = plyr.value.player.media.scrollWidth < 300;
+		if (plyrMini.value) {
+			plyr.value.player.on("play", () => {
+				plyr.value.player.fullscreen.enter();
+			});
+		}
+	}
+});
 </script>
 
 <style lang="scss" scoped>
@@ -123,7 +170,7 @@ watch(
 	}
 }
 
-.gqnyydlz {
+.media {
 	position: relative;
 	background: var(--bg);
 
@@ -175,5 +222,16 @@ watch(
 			pointer-events: none;
 		}
 	}
+	&.mini {
+		:deep(.plyr:not(:fullscreen)) {
+			min-width: unset !important;
+			.plyr__control--overlaid,
+			.plyr__progress__container,
+			.plyr__volume,
+			[data-plyr="fullscreen"] {
+				display: none;
+			}
+		}
+	}
 }
 </style>

packages/client/src/components/MkMediaList.vue

@@ -12,25 +12,16 @@
 			:class="{ dmWidth: inDm }"
 		>
 			<div ref="gallery" @click.stop>
-				<template
+				<XMedia
 					v-for="media in mediaList.filter((media) =>
 						previewable(media)
 					)"
-				>
+					:key="media.id"
-					<XVideo
+					:class="{ image: media.type.startsWith('image') }"
-						v-if="media.type.startsWith('video')"
+					:data-id="media.id"
-						:key="media.id"
+					:media="media"
-						:video="media"
+					:raw="raw"
-					/>
+				/>
-					<XImage
-						v-else-if="media.type.startsWith('image')"
-						:key="media.id"
-						class="image"
-						:data-id="media.id"
-						:image="media"
-						:raw="raw"
-					/>
-				</template>
 			</div>
 		</div>
 	</div>
@@ -43,8 +34,7 @@ import PhotoSwipeLightbox from "photoswipe/lightbox";
 import PhotoSwipe from "photoswipe";
 import "photoswipe/style.css";
 import XBanner from "@/components/MkMediaBanner.vue";
-import XImage from "@/components/MkMediaImage.vue";
+import XMedia from "@/components/MkMedia.vue";
-import XVideo from "@/components/MkMediaVideo.vue";
 import * as os from "@/os";
 import { FILE_TYPE_BROWSERSAFE } from "@/const";
 import { defaultStore } from "@/store";

packages/client/src/components/MkMediaVideo.vue

@@ -1,169 +0,0 @@
-<template>
-	<div
-		v-if="hide"
-		class="icozogqfvdetwohsdglrbswgrejoxbdj"
-		@click="hide = false"
-	>
-		<div>
-			<b
-				><i class="ph-warning ph-bold ph-lg"></i>
-				{{ i18n.ts.sensitive }}</b
-			>
-			<span>{{ i18n.ts.clickToShow }}</span>
-		</div>
-	</div>
-	<div v-else class="video" :class="{ mini }">
-		<VuePlyr
-			ref="plyr"
-			:options="{
-				controls: [
-					'play-large',
-					'play',
-					'progress',
-					'current-time',
-					'mute',
-					'volume',
-					'pip',
-					'download',
-					'fullscreen',
-				],
-				disableContextMenu: false,
-			}"
-		>
-			<video
-				:poster="video.thumbnailUrl"
-				:aria-label="video.comment"
-				preload="none"
-				controls
-				@contextmenu.stop
-			>
-				<source :src="video.url" :type="video.type" />
-			</video>
-		</VuePlyr>
-		<div class="buttons">
-			<button
-				v-if="video.comment"
-				v-tooltip="i18n.ts.alt"
-				class="_button"
-				@click.stop="captionPopup"
-			>
-				<i class="ph-subtitles ph-bold ph-lg"></i>
-			</button>
-			<button
-				v-tooltip="i18n.ts.hide"
-				class="_button"
-				@click="hide = true"
-			>
-				<i class="ph-eye-slash ph-bold ph-lg"></i>
-			</button>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref } from "vue";
-import VuePlyr from "vue-plyr";
-import type * as misskey from "calckey-js";
-import { defaultStore } from "@/store";
-import "vue-plyr/dist/vue-plyr.css";
-import { i18n } from "@/i18n";
-import * as os from "@/os";
-
-const props = defineProps<{
-	video: misskey.entities.DriveFile;
-}>();
-
-const plyr = ref();
-const mini = ref(false);
-
-const hide = ref(
-	defaultStore.state.nsfw === "force"
-		? true
-		: props.video.isSensitive && defaultStore.state.nsfw !== "ignore"
-);
-
-function captionPopup() {
-	os.alert({
-		type: "info",
-		text: props.video.comment,
-	});
-}
-
-onMounted(() => {
-	mini.value = plyr.value.player.media.scrollWidth < 300;
-	if (mini.value) {
-		plyr.value.player.on("play", () => {
-			plyr.value.player.fullscreen.enter();
-		});
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.video {
-	position: relative;
-	--plyr-color-main: var(--accent);
-
-	> .buttons {
-		display: flex;
-		gap: 4px;
-		position: absolute;
-		border-radius: 6px;
-		overflow: hidden;
-		top: 12px;
-		right: 12px;
-		> * {
-			background-color: var(--accentedBg);
-			-webkit-backdrop-filter: var(--blur, blur(15px));
-			backdrop-filter: var(--blur, blur(15px));
-			color: var(--accent);
-			font-size: 0.8em;
-			padding: 6px 8px;
-			text-align: center;
-		}
-	}
-
-	> video {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-		font-size: 3.5em;
-		overflow: hidden;
-		background-position: center;
-		background-size: cover;
-		width: 100%;
-		height: 100%;
-	}
-
-	&.mini {
-		:deep(.plyr:not(:fullscreen)) {
-			min-width: unset !important;
-			.plyr__control--overlaid,
-			.plyr__progress__container,
-			.plyr__volume,
-			[data-plyr="fullscreen"] {
-				display: none;
-			}
-		}
-	}
-}
-
-.icozogqfvdetwohsdglrbswgrejoxbdj {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	background: #111;
-	color: #fff;
-
-	> div {
-		display: table-cell;
-		text-align: center;
-		font-size: 12px;
-
-		> b {
-			display: block;
-		}
-	}
-}
-</style>