Hide video controls if player too small

packages/client/src/components/MkMediaList.vue

@@ -6,13 +6,9 @@
 			:media="media"
 		/>
 		<div
-			v-if="mediaList.filter((media) => previewable(media)).length > 0"
+			v-if="previewableCount > 0"
 			class="grid-container"
-			:data-count="
+			:data-count="previewableCount < 5 ? previewableCount : null"
-				mediaList.filter((media) => previewable(media)).length < 5
-				? mediaList.filter((media) => previewable(media)).length
-				: null
-			"
 			:class="{ dmWidth: inDm }"
 		>
 			<div
@@ -193,6 +189,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 		FILE_TYPE_BROWSERSAFE.includes(file.type)
 	);
 };
+const previewableCount = props.mediaList.filter((media) => previewable(media)).length;
 </script>
 
 <style lang="scss" scoped>

packages/client/src/components/MkMediaVideo.vue

@@ -12,8 +12,9 @@
 			<span>{{ i18n.ts.clickToShow }}</span>
 		</div>
 	</div>
-	<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
+	<div v-else class="video" :class="{ mini }">
 		<VuePlyr
+			ref="plyr"
 			:options="{
 				controls: [
 					'play-large',
@@ -40,12 +41,18 @@
 				<source :src="video.url" :type="video.type" />
 			</video>
 		</VuePlyr>
-		<i class="ph-eye-slash ph-bold ph-lg" @click="hide = true"></i>
+		<button
+			v-tooltip="i18n.ts.hide"
+			class="_button hide"
+			@click="hide = true"
+		>
+			<i class="ph-eye-slash ph-bold ph-lg"></i>
+		</button>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import VuePlyr from "vue-plyr";
 import type * as misskey from "calckey-js";
 import { defaultStore } from "@/store";
@@ -56,31 +63,47 @@ 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"
 );
+
+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>
-.kkjnbbplepmiyuadieoenjgutgcmtsvu {
+.video {
 	position: relative;
 	--plyr-color-main: var(--accent);
 
-	> i {
+	> .hide {
 		display: block;
 		position: absolute;
 		border-radius: 6px;
-		background-color: var(--fg);
+		background-color: var(--accentedBg);
-		color: var(--accentLighten);
+		-webkit-backdrop-filter: var(--blur, blur(15px));
-		font-size: 14px;
+		backdrop-filter: var(--blur, blur(15px));
-		opacity: 0.5;
+		color: var(--accent);
-		padding: 3px 6px;
+		font-size: 0.8em;
+		padding: 6px 8px;
 		text-align: center;
-		cursor: pointer;
 		top: 12px;
 		right: 12px;
+
+		> i {
+			display: block;
+		}
 	}
 
 	> video {
@@ -95,6 +118,17 @@ const hide = ref(
 		width: 100%;
 		height: 100%;
 	}
+
+	&.mini {
+		:deep(.plyr:not(:fullscreen)) {
+			min-width: unset !important;
+			.plyr__progress__container,
+			.plyr__volume,
+			[data-plyr="fullscreen"] {
+				display: none;
+			}
+		}
+	}
 }
 
 .icozogqfvdetwohsdglrbswgrejoxbdj {