From 81b50498eee737cc32751058387c19342ac32d97 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Sat, 6 Jan 2024 18:27:50 +0900
Subject: [PATCH] audio

---
 locales/index.d.ts                            |   2 +
 locales/ja-JP.yml                             |   2 +
 .../frontend/src/components/MkMediaAudio.vue  | 347 ++++++++++++++++++
 .../frontend/src/components/MkMediaBanner.vue |  13 +-
 .../frontend/src/components/MkMediaRange.vue  |  16 +-
 .../frontend/src/components/MkMediaVideo.vue  |  17 +-
 packages/frontend/src/filters/hms.ts          |  39 +-
 7 files changed, 394 insertions(+), 42 deletions(-)
 create mode 100644 packages/frontend/src/components/MkMediaAudio.vue

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 3937784153..b74e4b096c 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1055,6 +1055,8 @@ export interface Locale {
     "noteIdOrUrl": string;
     "video": string;
     "videos": string;
+    "audio": string;
+    "audioFiles": string;
     "dataSaver": string;
     "accountMigration": string;
     "accountMoved": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 77f9a9ec0f..e76bb48656 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1052,6 +1052,8 @@ limitWidthOfReaction: "リアクションの最大横幅を制限し、縮小し
 noteIdOrUrl: "ノートIDまたはURL"
 video: "動画"
 videos: "動画"
+audio: "音声"
+audioFiles: "音声"
 dataSaver: "データセーバー"
 accountMigration: "アカウントの移行"
 accountMoved: "このユーザーは新しいアカウントに移行しました："
diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue
new file mode 100644
index 0000000000..453b17fe3b
--- /dev/null
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@@ -0,0 +1,347 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div
+	:class="[
+		$style.audioContainer,
+		(audio.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitive,
+	]"
+	@contextmenu.stop
+>
+	<button v-if="hide" :class="$style.hidden" @click="hide = false">
+		<div :class="$style.hiddenTextWrapper">
+			<b v-if="audio.isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.dataSaver.media ? ` (${i18n.ts.audio}${audio.size ? ' ' + bytes(audio.size) : ''})` : '' }}</b>
+			<b v-else style="display: block;"><i class="ti ti-music"></i> {{ defaultStore.state.dataSaver.media && audio.size ? bytes(audio.size) : i18n.ts.audio }}</b>
+			<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
+		</div>
+	</button>
+	<div v-else :class="$style.audioControls">
+		<audio
+			ref="audioEl"
+			preload="metadata"
+			:class="$style.audio"
+		>
+			<source :src="audio.url">
+		</audio>
+		<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>
+		</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"
+				:class="$style.volumeSeekbar"
+			/>
+		</div>
+		<MkMediaRange
+			v-model="rangePercent"
+			:class="$style.seekbarRoot"
+			:buffer="bufferedDataRatio"
+		/>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, watch, computed, ref, onDeactivated, onActivated, onMounted } from 'vue';
+import * as Misskey from 'misskey-js';
+import type { MenuItem } from '@/types/menu.js';
+import { defaultStore } from '@/store.js';
+import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
+import bytes from '@/filters/bytes.js';
+import hms from '@/filters/hms.js';
+import MkMediaRange from '@/components/MkMediaRange.vue';
+import { iAmModerator } from '@/account.js';
+
+const props = defineProps<{
+	audio: Misskey.entities.DriveFile;
+}>();
+
+const audioEl = shallowRef<HTMLAudioElement>();
+
+// eslint-disable-next-line vue/no-setup-props-destructure
+const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.audio.isSensitive && defaultStore.state.nsfw !== 'ignore'));
+
+// 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.audio.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
+			icon: props.audio.isSensitive ? 'ti ti-eye' : 'ti ti-eye-exclamation',
+			danger: true,
+			action: () => toggleSensitive(props.audio),
+		});
+	}
+
+	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: 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 (!audioEl.value) return;
+		audioEl.value.currentTime = to * durationMs.value / 1000;
+	},
+});
+const volume = ref(.5);
+const bufferedEnd = ref(0);
+const bufferedDataRatio = computed(() => {
+	if (!audioEl.value) return 0;
+	return bufferedEnd.value / audioEl.value.duration;
+});
+
+// MediaControl Events
+function togglePlayPause() {
+	if (!isReady.value || !audioEl.value) return;
+
+	if (isPlaying.value) {
+		audioEl.value.pause();
+		isPlaying.value = false;
+	} else {
+		audioEl.value.play();
+		isPlaying.value = true;
+		oncePlayed.value = true;
+	}
+}
+
+function toggleMute() {
+	if (volume.value === 0) {
+		volume.value = .3;
+	} else {
+		volume.value = 0;
+	}
+}
+
+let onceInit = false;
+let stopAudioElWatch: () => void;
+
+function init() {
+	if (onceInit) return;
+	onceInit = true;
+
+	stopAudioElWatch = watch(audioEl, () => {
+		if (audioEl.value) {
+			isReady.value = true;
+
+			function updateMediaTick() {
+				if (audioEl.value) {
+					try {
+						bufferedEnd.value = audioEl.value.buffered.end(0);
+					} catch (err) {
+						bufferedEnd.value = 0;
+					}
+
+					elapsedTimeMs.value = audioEl.value.currentTime * 1000;
+				}
+				window.requestAnimationFrame(updateMediaTick);
+			}
+
+			updateMediaTick();
+
+			audioEl.value.addEventListener('play', () => {
+				isActuallyPlaying.value = true;
+			});
+
+			audioEl.value.addEventListener('pause', () => {
+				isActuallyPlaying.value = false;
+				isPlaying.value = false;
+			});
+
+			audioEl.value.addEventListener('ended', () => {
+				oncePlayed.value = false;
+				isActuallyPlaying.value = false;
+				isPlaying.value = false;
+			});
+
+			audioEl.value.addEventListener('durationchange', () => {
+				if (audioEl.value) {
+					durationMs.value = audioEl.value.duration * 1000;
+				}
+			});
+
+			audioEl.value.volume = volume.value;
+		}
+	}, {
+		immediate: true,
+	});
+}
+
+watch(volume, (to) => {
+	if (audioEl.value) audioEl.value.volume = to;
+});
+
+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.audio.isSensitive && defaultStore.state.nsfw !== 'ignore');
+	stopAudioElWatch();
+	onceInit = false;
+});
+</script>
+
+<style lang="scss" module>
+.audioContainer {
+	container-type: inline-size;
+	position: relative;
+	border: .5px solid var(--divider);
+	border-radius: var(--radius);
+	overflow: clip;
+}
+
+.hidden {
+	width: 100%;
+	background: none;
+	border: none;
+	outline: none;
+	font: inherit;
+	color: inherit;
+	cursor: pointer;
+	padding: 12px 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #000;
+}
+
+.hiddenTextWrapper {
+	text-align: center;
+	font-size: 0.8em;
+	color: #fff;
+}
+
+.audioControls {
+	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: 10px;
+}
+
+.controlsChild {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+
+	.controlButton {
+		padding: 6px;
+		border-radius: calc(var(--radius) / 2);
+		transition: color .2s ease-in-out,background-color .2s ease-in-out;
+		font-size: 1.05rem;
+
+		&:hover {
+			color: var(--fgOnAccent);
+			background-color: var(--accent);
+		}
+	}
+}
+
+.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;
+}
+
+@container (min-width: 500px) {
+	.audioControls {
+		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>
diff --git a/packages/frontend/src/components/MkMediaBanner.vue b/packages/frontend/src/components/MkMediaBanner.vue
index 3f8fef6632..b21960a490 100644
--- a/packages/frontend/src/components/MkMediaBanner.vue
+++ b/packages/frontend/src/components/MkMediaBanner.vue
@@ -5,20 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.root">
-	<div v-if="media.isSensitive && hide" :class="$style.sensitive" @click="hide = false">
+	<MkMediaAudio v-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" :audio="media"/>
+	<div v-else-if="media.isSensitive && hide" :class="$style.sensitive" @click="hide = false">
 		<span style="font-size: 1.6em;"><i class="ti ti-alert-triangle"></i></span>
 		<b>{{ i18n.ts.sensitive }}</b>
 		<span>{{ i18n.ts.clickToShow }}</span>
 	</div>
-	<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" :class="$style.audio">
-		<audio
-			ref="audioEl"
-			:src="media.url"
-			:title="media.name"
-			controls
-			preload="metadata"
-		/>
-	</div>
 	<a
 		v-else :class="$style.download"
 		:href="media.url"
@@ -35,6 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { shallowRef, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { i18n } from '@/i18n.js';
+import MkMediaAudio from '@/components/MkMediaAudio.vue';
 
 const props = withDefaults(defineProps<{
 	media: Misskey.entities.DriveFile;
diff --git a/packages/frontend/src/components/MkMediaRange.vue b/packages/frontend/src/components/MkMediaRange.vue
index 86d8683f2a..e40947fe20 100644
--- a/packages/frontend/src/components/MkMediaRange.vue
+++ b/packages/frontend/src/components/MkMediaRange.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <!-- Media系専用のinput range -->
 <template>
-<div :class="$style.controlsSeekbar">
+<div :class="$style.controlsSeekbar" :style="sliderBgWhite ? '--sliderBg: rgba(255,255,255,.25);' : '--sliderBg: var(--scrollbarHandle);'">
 	<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>
@@ -14,9 +14,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script setup lang="ts">
 import { computed, ModelRef } from 'vue';
 
-defineProps<{
+withDefaults(defineProps<{
 	buffer?: number;
-}>();
+	sliderBgWhite?: boolean;
+}>(), {
+	buffer: undefined,
+	sliderBgWhite: false,
+});
 
 // eslint-disable-next-line no-undef
 const model = defineModel({ required: true }) as ModelRef<string | number>;
@@ -47,7 +51,7 @@ const modelValue = computed({
 		width: 100%;
 
 		&::-webkit-slider-runnable-track {
-			background-color: rgba(255, 255, 255, .25);
+			background-color: var(--sliderBg);
 			background-image: linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0));
 			border: 0;
 			border-radius: 99rem;
@@ -63,7 +67,7 @@ const modelValue = computed({
 			height: 5px;
 			transition: box-shadow .3s ease;
 			user-select: none;
-			background-color: rgba(255, 255, 255, .25);
+			background-color: var(--sliderBg);
 		}
 
 		&::-webkit-slider-thumb {
@@ -109,7 +113,7 @@ const modelValue = computed({
 	> .buffer {
 		appearance: none;
 		background: transparent;
-		color: rgba(255, 255, 255, .25);
+		color: var(--sliderBg);
 		border: 0;
 		border-radius: 99rem;
 		height: 5px;
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index d34219e49e..388944783d 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -29,12 +29,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:poster="video.thumbnailUrl ?? undefined"
 			:title="video.comment ?? undefined"
 			:alt="video.comment"
-			preload="none"
+			preload="metadata"
 			playsinline
 		>
-			<source
-				:src="video.url"
-			>
+			<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">
@@ -69,11 +67,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</button>
 				<MkMediaRange
 					v-model="volume"
+					:sliderBgWhite="true"
 					:class="$style.volumeSeekbar"
 				/>
 			</div>
 			<MkMediaRange
 				v-model="rangePercent"
+				:sliderBgWhite="true"
 				:class="$style.seekbarRoot"
 				:buffer="bufferedDataRatio"
 			/>
@@ -151,7 +151,6 @@ function toggleSensitive(file: Misskey.entities.DriveFile) {
 const videoEl = shallowRef<HTMLVideoElement>();
 const playerEl = shallowRef<HTMLDivElement>();
 const isHoverring = ref(false);
-const oncePlayed = ref(false);
 const controlsShowing = computed(() => {
 	if (!oncePlayed.value) return true;
 	if (isHoverring.value) return true;
@@ -159,8 +158,10 @@ const controlsShowing = computed(() => {
 	return false;
 });
 const isFullscreen = ref(false);
+let controlStateTimer: string | number;
 
 // MediaControl: Common State
+const oncePlayed = ref(false);
 const isReady = ref(false);
 const isPlaying = ref(false);
 const isActuallyPlaying = ref(false);
@@ -175,13 +176,12 @@ const rangePercent = computed({
 		videoEl.value.currentTime = to * durationMs.value / 1000;
 	},
 });
-const volume = ref(.3);
+const volume = ref(.5);
 const bufferedEnd = ref(0);
 const bufferedDataRatio = computed(() => {
 	if (!videoEl.value) return 0;
 	return bufferedEnd.value / videoEl.value.duration;
 });
-let controlStateTimer: string | number;
 
 // MediaControl Events
 function onMouseOver() {
@@ -338,6 +338,7 @@ onDeactivated(() => {
 .videoContainer {
 	container-type: inline-size;
 	position: relative;
+	overflow: clip;
 }
 
 .sensitive {
@@ -463,7 +464,7 @@ onDeactivated(() => {
 		"seekbar seekbar seekbar seekbar seekbar";
 	grid-template-columns: auto auto 1fr auto auto;
 	align-items: center;
-	gap: 4px;
+	gap: 4px 8px;
 	pointer-events: none;
 
 	padding: 35px 10px 10px 10px;
diff --git a/packages/frontend/src/filters/hms.ts b/packages/frontend/src/filters/hms.ts
index 0885f4118c..64fd5a6496 100644
--- a/packages/frontend/src/filters/hms.ts
+++ b/packages/frontend/src/filters/hms.ts
@@ -1,27 +1,30 @@
-export default (ms: number) => {
-    const res: string[] = [];
+export default (ms: number, enableMs = false) => {
+	const res: string[] = [];
 
-    // ミリ秒を秒に変換
-    let seconds = Math.floor(ms / 1000);
+	// ミリ秒を秒に変換
+	let seconds = Math.floor(ms / 1000);
 
-    // 時間を計算
-    let hours = Math.floor(seconds / 3600);
-    if (hours > 0) res.push(format(hours));
-    seconds %= 3600;
+	// 小数点以下の値（２位まで）
+	const mili = ms - seconds * 1000;
 
-    // 分を計算
-    let minutes = Math.floor(seconds / 60);
-    res.push(format(minutes));
-    seconds %= 60;
+	// 時間を計算
+	const hours = Math.floor(seconds / 3600);
+	if (hours > 0) res.push(format(hours));
+	seconds %= 3600;
 
-    // 残った秒数を取得
-    seconds = seconds % 60;
-    res.push(format(seconds));
+	// 分を計算
+	const minutes = Math.floor(seconds / 60);
+	res.push(format(minutes));
+	seconds %= 60;
 
-    // 結果を返す
-    return res.join(':');
+	// 残った秒数を取得
+	seconds = seconds % 60;
+	res.push(format(seconds));
+
+	// 結果を返す
+	return res.join(':') + (enableMs ? '.' + format(Math.floor(mili / 10)) : '');
 };
 
 function format(n: number) {
-    return n.toString().padStart(2, '0');
+	return n.toString().padStart(2, '0');
 }