video

packages/frontend/src/components/MkMediaRange.vue

@@ -0,0 +1,142 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<!-- Media系専用のinput range -->
+<template>
+<div :class="$style.controlsSeekbar">
+	<progress v-if="buffer !== undefined" :class="$style.buffer" :value="isNaN(buffer) ? 0 : buffer" min="0" max="1">% buffered</progress>
+	<input v-model="model" :class="$style.seek" :style="`--value: ${modelValue * 100}%;`" type="range" min="0" max="1" step="any"/>
+</div>
+</template>
+
+<script setup lang="ts">
+import { computed, ModelRef } from 'vue';
+
+defineProps<{
+	buffer?: number;
+}>();
+
+// eslint-disable-next-line no-undef
+const model = defineModel({ required: true }) as ModelRef<string | number>;
+const modelValue = computed({
+	get: () => typeof model.value === 'number' ? model.value : parseFloat(model.value),
+	set: v => { model.value = v; },
+});
+</script>
+
+<style lang="scss" module>
+.controlsSeekbar {
+	position: relative;
+
+	> .seek {
+		position: relative;
+		-webkit-appearance: none;
+		appearance: none;
+		background: transparent;
+		border: 0;
+		border-radius: 26px;
+		color: var(--accent);
+		display: block;
+		height: 19px;
+		margin: 0;
+		min-width: 0;
+		padding: 0;
+		transition: box-shadow .3s ease;
+		width: 100%;
+
+		&::-webkit-slider-runnable-track {
+			background-color: rgba(255, 255, 255, .25);
+			background-image: linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0));
+			border: 0;
+			border-radius: 99rem;
+			height: 5px;
+			transition: box-shadow .3s ease;
+			user-select: none;
+		}
+
+		&::-moz-range-track {
+			background: transparent;
+			border: 0;
+			border-radius: 99rem;
+			height: 5px;
+			transition: box-shadow .3s ease;
+			user-select: none;
+			background-color: rgba(255, 255, 255, .25);
+		}
+
+		&::-webkit-slider-thumb {
+			-webkit-appearance: none;
+			appearance: none;
+			background: #fff;
+			border: 0;
+			border-radius: 100%;
+			box-shadow: 0 1px 1px rgba(35, 40, 47, .15),0 0 0 1px rgba(35, 40, 47, .2);
+			height: 13px;
+			margin-top: -4px;
+			position: relative;
+			transition: all .2s ease;
+			width: 13px;
+
+			&:active {
+				box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .15), 0 0 0 3px rgba(255, 255, 255, .5);
+			}
+		}
+
+		&::-moz-range-thumb {
+			background: #fff;
+			border: 0;
+			border-radius: 100%;
+			box-shadow: 0 1px 1px rgba(35, 40, 47, .15),0 0 0 1px rgba(35, 40, 47, .2);
+			height: 13px;
+			position: relative;
+			transition: all .2s ease;
+			width: 13px;
+
+			&:active {
+				box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .15), 0 0 0 3px rgba(255, 255, 255, .5);
+			}
+		}
+
+		&::-moz-range-progress {
+			background: currentColor;
+			border-radius: 99rem;
+			height: 5px;
+		}
+	}
+
+	> .buffer {
+		appearance: none;
+		background: transparent;
+		color: rgba(255, 255, 255, .25);
+		border: 0;
+		border-radius: 99rem;
+		height: 5px;
+		left: 0;
+		margin-top: -2.5px;
+		padding: 0;
+		position: absolute;
+		top: 50%;
+		width: 100%;
+
+		&::-webkit-progress-bar {
+			background: transparent;
+		}
+
+		&::-webkit-progress-value {
+			background: currentColor;
+			border-radius: 100px;
+			min-width: 5px;
+			transition: width .2s ease;
+		}
+
+		&::-moz-progress-bar {
+			background: currentColor;
+			border-radius: 100px;
+			min-width: 5px;
+			transition: width .2s ease;
+		}
+	}
+}
+</style>

packages/frontend/src/components/MkMediaVideo.vue

@@ -4,15 +4,25 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="[$style.videoContainer, controlsShowing && $style.active]" @mouseover="onMouseOver" @mouseleave="onMouseLeave" @contextmenu.stop ref="playerEl">
+<div
-	<button v-if="hide" :class="$style.hide" @click="hide = false">
+	ref="playerEl"
-		<div :class="$style.hideContent">
+	:class="[
+		$style.videoContainer,
+		controlsShowing && $style.active,
+		(video.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitive,
+	]"
+	@mouseover="onMouseOver"
+	@mouseleave="onMouseLeave"
+	@contextmenu.stop
+>
+	<button v-if="hide" :class="$style.hidden" @click="hide = false">
+		<div :class="$style.hiddenTextWrapper">
 			<b v-if="video.isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.dataSaver.media ? ` (${i18n.ts.video}${video.size ? ' ' + bytes(video.size) : ''})` : '' }}</b>
 			<b v-else style="display: block;"><i class="ti ti-photo"></i> {{ defaultStore.state.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" @click.self="onClick">
+	<div v-else :class="$style.videoRoot" @click.self="togglePlayPause">
 		<video
 			ref="videoEl"
 			:class="$style.video"
@@ -26,19 +36,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 				:src="video.url"
 			>
 		</video>
-		<button v-if="isReady && !isPlaying" class="_button" :class="$style.videoOverlayPlayButton" @click="onClick"><i class="ti ti-player-play-filled"></i></button>
+		<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>
-		<div :class="$style.videoControls">
+		<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(--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="onClick">
+				<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">
+				<button class="_button" :class="$style.controlButton" @click="showMenu">
 					<i class="ti ti-settings"></i>
 				</button>
 				<button class="_button" :class="$style.controlButton" @click="toggleFullscreen">
@@ -52,31 +67,87 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<i v-if="volume === 0" class="ti ti-volume-3"></i>
 					<i v-else class="ti ti-volume"></i>
 				</button>
-
+				<MkMediaRange
+					v-model="volume"
+					:class="$style.volumeSeekbar"
+				/>
 			</div>
-			<div :class="[$style.controlsChild, $style.controlsSeekbar]"></div>
+			<MkMediaRange
+				v-model="rangePercent"
+				:class="$style.seekbarRoot"
+				:buffer="bufferedDataRatio"
+			/>
 		</div>
 	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, shallowRef, computed, watch } from 'vue';
+import { ref, shallowRef, computed, watch, onDeactivated, onActivated, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
+import type { MenuItem } from '@/types/menu.js';
 import bytes from '@/filters/bytes.js';
 import hms from '@/filters/hms.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
 import { isFullscreenNotSupported } from '@/scripts/device-kind.js';
 import hasAudio from '@/scripts/media-has-audio.js';
+import MkMediaRange from '@/components/MkMediaRange.vue';
+import { iAmModerator } from '@/account.js';
 
 const props = defineProps<{
 	video: Misskey.entities.DriveFile;
 }>();
 
+// eslint-disable-next-line vue/no-setup-props-destructure
 const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore'));
 
-// MediaControl State
+// Menu
+const menuShowing = ref(false);
+
+function showMenu(ev: MouseEvent) {
+	let menu: MenuItem[] = [];
+
+	menu = [
+		// TODO: 再生キューに追加
+		{
+			text: i18n.ts.hide,
+			icon: 'ti ti-eye-off',
+			action: () => {
+				hide.value = true;
+			},
+		},
+	];
+
+	if (iAmModerator) {
+		menu.push({
+			type: 'divider',
+		}, {
+			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),
+		});
+	}
+
+	menuShowing.value = true;
+	os.popupMenu(menu, ev.currentTarget ?? ev.target, {
+		align: 'right',
+		onClosing: () => {
+			menuShowing.value = false;
+		},
+	});
+}
+
+function toggleSensitive(file: Misskey.entities.DriveFile) {
+	os.apiWithDialog('drive/files/update', {
+		fileId: file.id,
+		isSensitive: !file.isSensitive,
+	});
+}
+
+// MediaControl: Video State
 const videoEl = shallowRef<HTMLVideoElement>();
 const playerEl = shallowRef<HTMLDivElement>();
 const isHoverring = ref(false);
@@ -84,37 +155,49 @@ const oncePlayed = 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);
 
+// MediaControl: Common State
 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(.3);
 const bufferedEnd = ref(0);
 const bufferedDataRatio = computed(() => {
 	if (!videoEl.value) return 0;
 	return bufferedEnd.value / videoEl.value.duration;
 });
-let controlStateTimer;
+let controlStateTimer: string | number;
 
 // MediaControl Events
-function onMouseOver(ev: MouseEvent) {
+function onMouseOver() {
 	if (controlStateTimer) {
 		clearTimeout(controlStateTimer);
 	}
 	isHoverring.value = true;
 }
 
-function onMouseLeave(ev: MouseEvent) {
+function onMouseLeave() {
-	controlStateTimer = setTimeout(() => {
+	controlStateTimer = window.setTimeout(() => {
 		isHoverring.value = false;
 	}, 100);
 }
 
-function onClick(ev: MouseEvent) {
+function togglePlayPause() {
 	if (!isReady.value || !videoEl.value) return;
 
 	if (isPlaying.value) {
@@ -130,10 +213,12 @@ function onClick(ev: MouseEvent) {
 function toggleFullscreen() {
 	if (isFullscreenNotSupported && videoEl.value) {
 		if (isFullscreen.value) {
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			//@ts-ignore
 			videoEl.value.webkitExitFullscreen();
 			isFullscreen.value = false;
 		} else {
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			//@ts-ignore
 			videoEl.value.webkitEnterFullscreen();
 			isFullscreen.value = true;
@@ -157,52 +242,96 @@ function toggleMute() {
 	}
 }
 
-const videoElWatcherStop = watch(videoEl, () => {
+let onceInit = false;
-	if (videoEl.value) {
+let stopVideoElWatch: () => void;
-		videoElWatcherStop();
 
-		isReady.value = true;
+function init() {
+	if (onceInit) return;
+	onceInit = true;
 
-		function updateBufferedEnd() {
+	stopVideoElWatch = watch(videoEl, () => {
-			if (videoEl.value) {
+		if (videoEl.value) {
-				try {
-					bufferedEnd.value = videoEl.value.buffered.end(0);
-				} catch(err) {
-					// do nothing
-				}
-			}
-			window.requestAnimationFrame(updateBufferedEnd);
-		}
-		updateBufferedEnd();
-
-		videoEl.value.addEventListener('play', () => {
-			isActuallyPlaying.value = true;
 			isReady.value = true;
-		});
 
-		videoEl.value.addEventListener('pause', () => {
+			function updateMediaTick() {
-			isActuallyPlaying.value = false;
+				if (videoEl.value) {
-		});
+					try {
+						bufferedEnd.value = videoEl.value.buffered.end(0);
+					} catch (err) {
+						bufferedEnd.value = 0;
+					}
 
-		videoEl.value.addEventListener('timeupdate', () => {
+					elapsedTimeMs.value = videoEl.value.currentTime * 1000;
-			if (videoEl.value) {
+				}
-				elapsedTimeMs.value = videoEl.value.currentTime * 1000;
+				window.requestAnimationFrame(updateMediaTick);
 			}
-		});
 
-		videoEl.value.volume = volume.value;
+			updateMediaTick();
-		hasAudio(videoEl.value).then(had => {
+
-			if (!had && videoEl.value) {
+			videoEl.value.addEventListener('play', () => {
-				videoEl.value.loop = videoEl.value.muted = true;
+				isActuallyPlaying.value = true;
-				videoEl.value.play();
+			});
-			}
+
-		});
+			videoEl.value.addEventListener('pause', () => {
-	}
+				isActuallyPlaying.value = false;
-});
+				isPlaying.value = false;
+			});
+
+			videoEl.value.addEventListener('ended', () => {
+				oncePlayed.value = false;
+				isActuallyPlaying.value = false;
+				isPlaying.value = false;
+			});
+
+			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(hide, (to) => {
+	if (to && isFullscreen.value) {
+		document.exitFullscreen();
+		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 = (defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore');
+	stopVideoElWatch();
+	onceInit = false;
+});
 </script>
 
 <style lang="scss" module>
@@ -211,13 +340,65 @@ watch(volume, (to) => {
 	position: relative;
 }
 
+.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(--warn);
+	}
+}
+
+.indicators {
+	display: inline-flex;
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	pointer-events: none;
+	opacity: .5;
+	gap: 6px;
+}
+
+.indicator {
+	/* Hardcode to black because either --bg or --fg makes it hard to read in dark/light mode */
+	background-color: black;
+	border-radius: 6px;
+	color: var(--accentLighten);
+	display: inline-block;
+	font-weight: bold;
+	font-size: 0.8em;
+	padding: 2px 5px;
+}
+
 .hide {
+	display: block;
+	position: absolute;
+	border-radius: 6px;
+	background-color: var(--fg);
+	color: var(--accentLighten);
+	font-size: 12px;
+	opacity: .5;
+	padding: 5px 8px;
+	text-align: center;
+	cursor: pointer;
+	top: 12px;
+	right: 12px;
+}
+
+.hidden {
 	width: 100%;
 	background: none;
 	border: none;
 	outline: none;
-  	font: inherit;
+	font: inherit;
-  	color: inherit;
+	color: inherit;
 	cursor: pointer;
 	padding: 120px 0;
 	display: flex;
@@ -226,7 +407,7 @@ watch(volume, (to) => {
 	background: #000;
 }
 
-.hideContent {
+.hiddenTextWrapper {
 	text-align: center;
 	font-size: 0.8em;
 	color: #fff;
@@ -283,6 +464,7 @@ watch(volume, (to) => {
 	grid-template-columns: auto auto 1fr auto auto;
 	align-items: center;
 	gap: 4px;
+	pointer-events: none;
 
 	padding: 35px 10px 10px 10px;
 	background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, .75));
@@ -310,15 +492,9 @@ watch(volume, (to) => {
 	}
 }
 
-@container (min-width: 500px) {
-	.videoControls {
-		grid-template-areas: "left seekbar time volume right";
-		grid-template-columns: auto 4fr auto 1fr auto;
-	}
-}
-
 .controlsChild {
 	display: flex;
+	align-items: center;
 	gap: 4px;
 	color: #fff;
 
@@ -344,14 +520,33 @@ watch(volume, (to) => {
 
 .controlsTime {
 	grid-area: time;
+	font-size: .9rem;
 }
 
 .controlsVolume {
 	grid-area: volume;
+
+	.volumeSeekbar {
+		display: none;
+	}
 }
 
-.controlsSeekbar {
+.seekbarRoot {
 	grid-area: seekbar;
 }
 
+@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;
+		}
+	}
+}
 </style>