From 292005b27bb6126db2f5d4680ec5d49850b61db0 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 11 Jul 2026 17:11:49 +0900
Subject: [PATCH] wip

---
 .../frontend/src/components/MkMediaList.vue   |   2 +-
 .../frontend/src/components/MkMediaVideo.vue  | 599 +-----------------
 .../src/components/MkMediaVideoPreview.vue    | 196 ------
 3 files changed, 2 insertions(+), 795 deletions(-)
 delete mode 100644 packages/frontend/src/components/MkMediaVideoPreview.vue

diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue
index 780b98934b..79744bacd3 100644
--- a/packages/frontend/src/components/MkMediaList.vue
+++ b/packages/frontend/src/components/MkMediaList.vue
@@ -34,7 +34,7 @@ import * as Misskey from 'misskey-js';
 import { FILE_TYPE_BROWSERSAFE } from '@@/js/const.js';
 import XBanner from '@/components/MkMediaBanner.vue';
 import XImage from '@/components/MkMediaImage.vue';
-import XVideo from '@/components/MkMediaVideoPreview.vue';
+import XVideo from '@/components/MkMediaVideo.vue';
 import * as os from '@/os.js';
 import { focusParent } from '@/utility/focus.js';
 import { prefer } from '@/preferences.js';
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index be3b3ad396..885c4052e2 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -6,16 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div
 	ref="playerEl"
-	v-hotkey="keymap"
 	tabindex="0"
 	:class="[
 		$style.videoContainer,
-		controlsShowing && $style.active,
 		(video.isSensitive && prefer.s.highlightSensitiveMedia) && $style.sensitive,
 	]"
-	@mouseover.passive="onMouseOver"
-	@mousemove.passive="onMouseMove"
-	@mouseleave.passive="onMouseLeave"
 	@contextmenu.stop
 	@keydown.stop
 >
@@ -27,84 +22,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 	</button>
 
-	<div v-else-if="prefer.s.useNativeUiForVideoAudioPlayer" :class="$style.videoRoot">
-		<video
-			ref="videoEl"
-			:class="$style.video"
-			:poster="video.thumbnailUrl ?? undefined"
-			:title="video.comment ?? undefined"
-			:alt="video.comment"
-			preload="metadata"
-			controls
-			@keydown.prevent
-		>
-			<source :src="video.url">
-		</video>
-		<i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i>
-		<div :class="$style.indicators">
-			<div v-if="video.comment" :class="$style.indicator">ALT</div>
-			<div v-if="video.isSensitive" :class="$style.indicator" style="color: var(--MI_THEME-warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
-		</div>
-	</div>
-
 	<div v-else :class="$style.videoRoot">
 		<video
 			ref="videoEl"
 			:class="$style.video"
 			:poster="video.thumbnailUrl ?? undefined"
-			:title="video.comment ?? undefined"
 			:alt="video.comment"
 			preload="metadata"
 			playsinline
-			@keydown.prevent
-			@click.self="togglePlayPause"
 		>
 			<source :src="video.url">
 		</video>
-		<button v-if="isReady && !isPlaying" class="_button" :class="$style.videoOverlayPlayButton" @click="togglePlayPause"><i class="ti ti-player-play-filled"></i></button>
-		<div v-else-if="!isActuallyPlaying" :class="$style.videoLoading">
-			<MkLoading/>
-		</div>
-		<i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i>
-		<div :class="$style.indicators">
-			<div v-if="video.comment" :class="$style.indicator">ALT</div>
-			<div v-if="video.isSensitive" :class="$style.indicator" style="color: var(--MI_THEME-warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
-		</div>
-		<div :class="$style.videoControls" @click.self="togglePlayPause">
-			<div :class="[$style.controlsChild, $style.controlsLeft]">
-				<button class="_button" :class="$style.controlButton" @click="togglePlayPause">
-					<i v-if="isPlaying" class="ti ti-player-pause-filled"></i>
-					<i v-else class="ti ti-player-play-filled"></i>
-				</button>
-			</div>
-			<div :class="[$style.controlsChild, $style.controlsRight]">
-				<button class="_button" :class="$style.controlButton" @click="showMenu">
-					<i class="ti ti-settings"></i>
-				</button>
-				<button class="_button" :class="$style.controlButton" @click="toggleFullscreen">
-					<i v-if="isFullscreen" class="ti ti-arrows-minimize"></i>
-					<i v-else class="ti ti-arrows-maximize"></i>
-				</button>
-			</div>
-			<div :class="[$style.controlsChild, $style.controlsTime]">{{ hms(elapsedTimeMs) }}</div>
-			<div :class="[$style.controlsChild, $style.controlsVolume]">
-				<button class="_button" :class="$style.controlButton" @click="toggleMute">
-					<i v-if="volume === 0" class="ti ti-volume-3"></i>
-					<i v-else class="ti ti-volume"></i>
-				</button>
-				<MkMediaRange
-					v-model="volume"
-					:sliderBgWhite="true"
-					:class="$style.volumeSeekbar"
-				/>
-			</div>
-			<MkMediaRange
-				v-model="rangePercent"
-				:sliderBgWhite="true"
-				:class="$style.seekbarRoot"
-				:buffer="bufferedDataRatio"
-			/>
-		</div>
+		<i class="ti ti-player-play-filled"></i>
 	</div>
 </div>
 </template>
@@ -112,17 +41,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref, useTemplateRef, computed, watch, onDeactivated, onActivated, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
-import type { MenuItem } from '@/types/menu.js';
-import type { Keymap } from '@/utility/hotkey.js';
-import { copyToClipboard } from '@/utility/copy-to-clipboard';
 import bytes from '@/filters/bytes.js';
 import { hms } from '@/filters/hms.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
-import { exitFullscreen, requestFullscreen } from '@/utility/fullscreen.js';
-import hasAudio from '@/utility/media-has-audio.js';
-import MkMediaRange from '@/components/MkMediaRange.vue';
-import { $i, iAmModerator } from '@/i.js';
 import { prefer } from '@/preferences.js';
 import { shouldHideFileByDefault, canRevealFile } from '@/utility/sensitive-file.js';
 
@@ -130,52 +52,6 @@ const props = defineProps<{
 	video: Misskey.entities.DriveFile;
 }>();
 
-const keymap = {
-	'up': {
-		allowRepeat: true,
-		callback: () => {
-			if (hasFocus() && videoEl.value) {
-				volume.value = Math.min(volume.value + 0.1, 1);
-			}
-		},
-	},
-	'down': {
-		allowRepeat: true,
-		callback: () => {
-			if (hasFocus() && videoEl.value) {
-				volume.value = Math.max(volume.value - 0.1, 0);
-			}
-		},
-	},
-	'left': {
-		allowRepeat: true,
-		callback: () => {
-			if (hasFocus() && videoEl.value) {
-				videoEl.value.currentTime = Math.max(videoEl.value.currentTime - 5, 0);
-			}
-		},
-	},
-	'right': {
-		allowRepeat: true,
-		callback: () => {
-			if (hasFocus() && videoEl.value) {
-				videoEl.value.currentTime = Math.min(videoEl.value.currentTime + 5, videoEl.value.duration);
-			}
-		},
-	},
-	'space': () => {
-		if (hasFocus()) {
-			togglePlayPause();
-		}
-	},
-} as const satisfies Keymap;
-
-// PlayerElもしくはその子要素にフォーカスがあるかどうか
-function hasFocus() {
-	if (!playerEl.value) return false;
-	return playerEl.value === window.document.activeElement || playerEl.value.contains(window.document.activeElement);
-}
-
 // eslint-disable-next-line vue/no-setup-props-reactivity-loss
 const hide = ref(shouldHideFileByDefault(props.video));
 
@@ -186,362 +62,6 @@ async function reveal() {
 
 	hide.value = false;
 }
-
-// Menu
-const menuShowing = ref(false);
-
-function showMenu(ev: PointerEvent) {
-	const menu: MenuItem[] = [
-		// TODO: 再生キューに追加
-		{
-			type: 'switch',
-			text: i18n.ts._mediaControls.loop,
-			icon: 'ti ti-repeat',
-			ref: loop,
-		},
-		{
-			type: 'radio',
-			text: i18n.ts._mediaControls.playbackRate,
-			icon: 'ti ti-clock-play',
-			ref: speed,
-			options: [{
-				label: '0.25x',
-				value: 0.25,
-			}, {
-				label: '0.5x',
-				value: 0.5,
-			}, {
-				label: '0.75x',
-				value: 0.75,
-			}, {
-				label: '1.0x',
-				value: 1,
-			}, {
-				label: '1.25x',
-				value: 1.25,
-			}, {
-				label: '1.5x',
-				value: 1.5,
-			}, {
-				label: '2.0x',
-				value: 2,
-			}],
-		},
-		...(window.document.pictureInPictureEnabled ? [{
-			text: i18n.ts._mediaControls.pip,
-			icon: 'ti ti-picture-in-picture',
-			action: togglePictureInPicture,
-		}] : []),
-		{
-			type: 'divider',
-		},
-		{
-			text: i18n.ts.hide,
-			icon: 'ti ti-eye-off',
-			action: () => {
-				hide.value = true;
-			},
-		},
-	];
-
-	if (iAmModerator) {
-		menu.push({
-			text: props.video.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
-			icon: props.video.isSensitive ? 'ti ti-eye' : 'ti ti-eye-exclamation',
-			danger: true,
-			action: () => toggleSensitive(props.video),
-		});
-	}
-
-	const details: MenuItem[] = [];
-	if ($i?.id === props.video.userId) {
-		details.push({
-			type: 'link',
-			text: i18n.ts._fileViewer.title,
-			icon: 'ti ti-info-circle',
-			to: `/my/drive/file/${props.video.id}`,
-		});
-	}
-
-	if (iAmModerator) {
-		details.push({
-			type: 'link',
-			text: i18n.ts.moderation,
-			icon: 'ti ti-photo-exclamation',
-			to: `/admin/file/${props.video.id}`,
-		});
-	}
-
-	if (details.length > 0) {
-		menu.push({ type: 'divider' }, ...details);
-	}
-
-	if (prefer.s.devMode) {
-		menu.push({ type: 'divider' }, {
-			icon: 'ti ti-hash',
-			text: i18n.ts.copyFileId,
-			action: () => {
-				copyToClipboard(props.video.id);
-			},
-		});
-	}
-
-	menuShowing.value = true;
-	os.popupMenu(menu, ev.currentTarget ?? ev.target, {
-		align: 'right',
-		onClosing: () => {
-			menuShowing.value = false;
-		},
-	});
-}
-
-async function toggleSensitive(file: Misskey.entities.DriveFile) {
-	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: file.isSensitive ? i18n.ts.unmarkAsSensitiveConfirm : i18n.ts.markAsSensitiveConfirm,
-	});
-
-	if (canceled) return;
-
-	os.apiWithDialog('drive/files/update', {
-		fileId: file.id,
-		isSensitive: !file.isSensitive,
-	});
-}
-
-// MediaControl: Video State
-const videoEl = useTemplateRef('videoEl');
-const playerEl = useTemplateRef('playerEl');
-const isHoverring = ref(false);
-const controlsShowing = computed(() => {
-	if (!oncePlayed.value) return true;
-	if (isHoverring.value) return true;
-	if (menuShowing.value) return true;
-	return false;
-});
-const isFullscreen = ref(false);
-let controlStateTimer: number | null = null;
-
-// MediaControl: Common State
-const oncePlayed = ref(false);
-const isReady = ref(false);
-const isPlaying = ref(false);
-const isActuallyPlaying = ref(false);
-const elapsedTimeMs = ref(0);
-const durationMs = ref(0);
-const rangePercent = computed({
-	get: () => {
-		return (elapsedTimeMs.value / durationMs.value) || 0;
-	},
-	set: (to) => {
-		if (!videoEl.value) return;
-		videoEl.value.currentTime = to * durationMs.value / 1000;
-	},
-});
-const volume = ref(.25);
-const speed = ref(1);
-const loop = ref(false); // TODO: ドライブファイルのフラグに置き換える
-const bufferedEnd = ref(0);
-const bufferedDataRatio = computed(() => {
-	if (!videoEl.value) return 0;
-	return bufferedEnd.value / videoEl.value.duration;
-});
-
-// MediaControl Events
-function onMouseOver() {
-	if (controlStateTimer) {
-		window.clearTimeout(controlStateTimer);
-	}
-	isHoverring.value = true;
-
-	controlStateTimer = window.setTimeout(() => {
-		isHoverring.value = false;
-	}, 3000);
-}
-
-function onMouseMove() {
-	if (controlStateTimer) {
-		window.clearTimeout(controlStateTimer);
-	}
-	isHoverring.value = true;
-	controlStateTimer = window.setTimeout(() => {
-		isHoverring.value = false;
-	}, 3000);
-}
-
-function onMouseLeave() {
-	if (controlStateTimer) {
-		window.clearTimeout(controlStateTimer);
-	}
-	controlStateTimer = window.setTimeout(() => {
-		isHoverring.value = false;
-	}, 100);
-}
-
-function togglePlayPause() {
-	if (!isReady.value || !videoEl.value) return;
-
-	if (isPlaying.value) {
-		videoEl.value.pause();
-		isPlaying.value = false;
-	} else {
-		videoEl.value.play();
-		isPlaying.value = true;
-		oncePlayed.value = true;
-	}
-}
-
-function toggleFullscreen() {
-	if (playerEl.value == null || videoEl.value == null) return;
-	if (isFullscreen.value) {
-		exitFullscreen({
-			videoEl: videoEl.value,
-		});
-		isFullscreen.value = false;
-	} else {
-		requestFullscreen({
-			videoEl: videoEl.value,
-			playerEl: playerEl.value,
-			options: {
-				navigationUI: 'hide',
-			},
-		});
-		isFullscreen.value = true;
-	}
-}
-
-function togglePictureInPicture() {
-	if (videoEl.value) {
-		if (window.document.pictureInPictureElement) {
-			window.document.exitPictureInPicture();
-		} else {
-			videoEl.value.requestPictureInPicture();
-		}
-	}
-}
-
-function toggleMute() {
-	if (volume.value === 0) {
-		volume.value = .25;
-	} else {
-		volume.value = 0;
-	}
-}
-
-let onceInit = false;
-let mediaTickFrameId: number | null = null;
-let stopVideoElWatch: () => void;
-
-function init() {
-	if (onceInit) return;
-	onceInit = true;
-
-	stopVideoElWatch = watch(videoEl, () => {
-		if (videoEl.value) {
-			isReady.value = true;
-
-			function updateMediaTick() {
-				if (videoEl.value) {
-					try {
-						bufferedEnd.value = videoEl.value.buffered.end(0);
-					} catch (err) {
-						bufferedEnd.value = 0;
-					}
-
-					elapsedTimeMs.value = videoEl.value.currentTime * 1000;
-
-					if (videoEl.value.loop !== loop.value) {
-						loop.value = videoEl.value.loop;
-					}
-				}
-				mediaTickFrameId = window.requestAnimationFrame(updateMediaTick);
-			}
-
-			updateMediaTick();
-
-			videoEl.value.addEventListener('play', () => {
-				isActuallyPlaying.value = true;
-			});
-
-			videoEl.value.addEventListener('pause', () => {
-				isActuallyPlaying.value = false;
-				isPlaying.value = false;
-			});
-
-			videoEl.value.addEventListener('ended', () => {
-				oncePlayed.value = false;
-				isActuallyPlaying.value = false;
-				isPlaying.value = false;
-			});
-
-			durationMs.value = videoEl.value.duration * 1000;
-			videoEl.value.addEventListener('durationchange', () => {
-				if (videoEl.value) {
-					durationMs.value = videoEl.value.duration * 1000;
-				}
-			});
-
-			videoEl.value.volume = volume.value;
-			hasAudio(videoEl.value).then(had => {
-				if (!had && videoEl.value) {
-					videoEl.value.loop = videoEl.value.muted = true;
-					videoEl.value.play();
-				}
-			});
-		}
-	}, {
-		immediate: true,
-	});
-}
-
-watch(volume, (to) => {
-	if (videoEl.value) videoEl.value.volume = to;
-});
-
-watch(speed, (to) => {
-	if (videoEl.value) videoEl.value.playbackRate = to;
-});
-
-watch(loop, (to) => {
-	if (videoEl.value) videoEl.value.loop = to;
-});
-
-watch(hide, (to) => {
-	if (videoEl.value && to && isFullscreen.value) {
-		exitFullscreen({
-			videoEl: videoEl.value,
-		});
-		isFullscreen.value = false;
-	}
-});
-
-onMounted(() => {
-	init();
-});
-
-onActivated(() => {
-	init();
-});
-
-onDeactivated(() => {
-	isReady.value = false;
-	isPlaying.value = false;
-	isActuallyPlaying.value = false;
-	elapsedTimeMs.value = 0;
-	durationMs.value = 0;
-	bufferedEnd.value = 0;
-	hide.value = (prefer.s.nsfw === 'force' || prefer.s.dataSaver.media) ? true : (props.video.isSensitive && prefer.s.nsfw !== 'ignore');
-	stopVideoElWatch();
-	onceInit = false;
-	if (mediaTickFrameId) {
-		window.cancelAnimationFrame(mediaTickFrameId);
-		mediaTickFrameId = null;
-	}
-	if (controlStateTimer) {
-		window.clearTimeout(controlStateTimer);
-		controlStateTimer = null;
-	}
-});
 </script>
 
 <style lang="scss" module>
@@ -673,121 +193,4 @@ onDeactivated(() => {
 	align-items: center;
 	justify-content: center;
 }
-
-.videoControls {
-	display: grid;
-	grid-template-areas:
-		"left time . volume right"
-		"seekbar seekbar seekbar seekbar seekbar";
-	grid-template-columns: auto auto 1fr auto auto;
-	align-items: center;
-	gap: 4px 8px;
-
-	padding: 35px 10px 10px 10px;
-	background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, .75));
-
-	position: absolute;
-	left: 0;
-	right: 0;
-	bottom: 0;
-
-	transform: translateY(100%);
-	pointer-events: none;
-	opacity: 0;
-	transition: opacity .4s ease-in-out, transform .4s ease-in-out;
-}
-
-.active {
-	.videoControls {
-		transform: translateY(0);
-		opacity: 1;
-		pointer-events: auto;
-	}
-
-	.videoOverlayPlayButton {
-		opacity: 1;
-	}
-}
-
-.controlsChild {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	color: #fff;
-
-	.controlButton {
-		padding: 6px;
-		border-radius: calc(var(--MI-radius) / 2);
-		transition: background-color .15s ease;
-		font-size: 1.05rem;
-
-		&:hover {
-			background-color: var(--MI_THEME-accent);
-		}
-
-		&:focus-visible {
-			outline: none;
-		}
-	}
-}
-
-.controlsLeft {
-	grid-area: left;
-}
-
-.controlsRight {
-	grid-area: right;
-}
-
-.controlsTime {
-	grid-area: time;
-	font-size: .9rem;
-}
-
-.controlsVolume {
-	grid-area: volume;
-
-	.volumeSeekbar {
-		display: none;
-	}
-}
-
-.seekbarRoot {
-	grid-area: seekbar;
-	/* ▼シークバー操作をやりやすくするためにクリックイベントが伝播されないエリアを拡張する */
-	margin: -10px;
-	padding: 10px;
-}
-
-@container (min-width: 500px) {
-	.videoControls {
-		grid-template-areas: "left seekbar time volume right";
-		grid-template-columns: auto 1fr auto auto auto;
-	}
-
-	.controlsVolume {
-		.volumeSeekbar {
-			max-width: 90px;
-			display: block;
-			flex-grow: 1;
-		}
-	}
-}
-
-@container (max-width: 300px) {
-	.videoControls {
-		grid-template-areas:
-			"left . right"
-			"seekbar seekbar seekbar";
-		grid-template-columns: auto 1fr auto;
-	}
-
-	.controlsTime {
-		display: none;
-	}
-
-	.controlsVolume {
-		display: none;
-	}
-}
 </style>
diff --git a/packages/frontend/src/components/MkMediaVideoPreview.vue b/packages/frontend/src/components/MkMediaVideoPreview.vue
deleted file mode 100644
index 885c4052e2..0000000000
--- a/packages/frontend/src/components/MkMediaVideoPreview.vue
+++ /dev/null
@@ -1,196 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<div
-	ref="playerEl"
-	tabindex="0"
-	:class="[
-		$style.videoContainer,
-		(video.isSensitive && prefer.s.highlightSensitiveMedia) && $style.sensitive,
-	]"
-	@contextmenu.stop
-	@keydown.stop
->
-	<button v-if="hide" :class="$style.hidden" @click="reveal">
-		<div :class="$style.hiddenTextWrapper">
-			<b v-if="video.isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ prefer.s.dataSaver.media ? ` (${i18n.ts.video}${video.size ? ' ' + bytes(video.size) : ''})` : '' }}</b>
-			<b v-else style="display: block;"><i class="ti ti-movie"></i> {{ prefer.s.dataSaver.media && video.size ? bytes(video.size) : i18n.ts.video }}</b>
-			<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
-		</div>
-	</button>
-
-	<div v-else :class="$style.videoRoot">
-		<video
-			ref="videoEl"
-			:class="$style.video"
-			:poster="video.thumbnailUrl ?? undefined"
-			:alt="video.comment"
-			preload="metadata"
-			playsinline
-		>
-			<source :src="video.url">
-		</video>
-		<i class="ti ti-player-play-filled"></i>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { ref, useTemplateRef, computed, watch, onDeactivated, onActivated, onMounted } from 'vue';
-import * as Misskey from 'misskey-js';
-import bytes from '@/filters/bytes.js';
-import { hms } from '@/filters/hms.js';
-import { i18n } from '@/i18n.js';
-import * as os from '@/os.js';
-import { prefer } from '@/preferences.js';
-import { shouldHideFileByDefault, canRevealFile } from '@/utility/sensitive-file.js';
-
-const props = defineProps<{
-	video: Misskey.entities.DriveFile;
-}>();
-
-// eslint-disable-next-line vue/no-setup-props-reactivity-loss
-const hide = ref(shouldHideFileByDefault(props.video));
-
-async function reveal() {
-	if (!(await canRevealFile(props.video))) {
-		return;
-	}
-
-	hide.value = false;
-}
-</script>
-
-<style lang="scss" module>
-.videoContainer {
-	container-type: inline-size;
-	position: relative;
-	overflow: clip;
-
-	&:focus-visible {
-		outline: none;
-	}
-}
-
-.sensitive {
-	position: relative;
-
-	&::after {
-		content: "";
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		pointer-events: none;
-		border-radius: inherit;
-		box-shadow: inset 0 0 0 4px var(--MI_THEME-warn);
-	}
-}
-
-.indicators {
-	display: inline-flex;
-	position: absolute;
-	top: 10px;
-	left: 10px;
-	pointer-events: none;
-	opacity: .5;
-	gap: 6px;
-}
-
-.indicator {
-	/* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */
-	background-color: black;
-	border-radius: 6px;
-	color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
-	display: inline-block;
-	font-weight: bold;
-	font-size: 0.8em;
-	padding: 2px 5px;
-}
-
-.hide {
-	display: block;
-	position: absolute;
-	border-radius: 6px;
-	background-color: var(--MI_THEME-fg);
-	color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
-	font-size: 12px;
-	opacity: .5;
-	padding: 5px 8px;
-	text-align: center;
-	cursor: pointer;
-	top: 12px;
-	right: 12px;
-}
-
-.hidden {
-	width: 100%;
-	height: 100%;
-	background: #000;
-	border: none;
-	outline: none;
-	font: inherit;
-	color: inherit;
-	cursor: pointer;
-	padding: 60px 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.hiddenTextWrapper {
-	text-align: center;
-	font-size: 0.8em;
-	color: #fff;
-}
-
-.videoRoot {
-	background: #000;
-	position: relative;
-	width: 100%;
-	height: 100%;
-	object-fit: contain;
-}
-
-.video {
-	display: block;
-	height: 100%;
-	width: 100%;
-}
-
-.videoOverlayPlayButton {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%,-50%);
-
-	opacity: 0;
-	transition: opacity .4s ease-in-out;
-
-	background: var(--MI_THEME-accent);
-	color: #fff;
-	padding: 1rem;
-	border-radius: 99rem;
-
-	font-size: 1.1rem;
-
-	&:focus-visible {
-		outline: none;
-	}
-}
-
-.videoLoading {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-</style>