From 2da19d96bebbc5730336fa97a154f812225edfe8 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Sat, 6 Jan 2024 13:58:18 +0900
Subject: [PATCH 01/20] wip

---
 .../frontend/src/components/MkMediaVideo.vue  | 367 ++++++++++++++----
 packages/frontend/src/filters/hms.ts          |  27 ++
 packages/frontend/src/scripts/device-kind.ts  |   7 +
 3 files changed, 334 insertions(+), 67 deletions(-)
 create mode 100644 packages/frontend/src/filters/hms.ts

diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index f9dba0b15af7..6376e47b2246 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -4,39 +4,70 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div v-if="hide" :class="[$style.hidden, (video.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitiveContainer]" @click="hide = false">
-	<!-- 【注意】dataSaverMode が有効になっている際には、hide が false になるまでサムネイルや動画を読み込まないようにすること -->
-	<div :class="$style.sensitive">
-		<b v-if="video.isSensitive" style="display: block;"><i class="ti ti-alert-triangle"></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-movie"></i> {{ defaultStore.state.dataSaver.media && video.size ? bytes(video.size) : i18n.ts.video }}</b>
-		<span>{{ i18n.ts.clickToShow }}</span>
-	</div>
-</div>
-<div v-else :class="[$style.visible, (video.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitiveContainer]">
-	<video
-		ref="videoEl"
-		:class="$style.video"
-		:poster="video.thumbnailUrl"
-		:title="video.comment"
-		:alt="video.comment"
-		preload="none"
-		controls
-		@contextmenu.stop
-	>
-		<source
-			:src="video.url"
+<div :class="[$style.videoContainer, controlsShowing && $style.active]" @mouseover="onMouseOver" @mouseleave="onMouseLeave" @contextmenu.stop ref="playerEl">
+	<button v-if="hide" :class="$style.hide" @click="hide = false">
+		<div :class="$style.hideContent">
+			<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">
+		<video
+			ref="videoEl"
+			:class="$style.video"
+			:poster="video.thumbnailUrl ?? undefined"
+			:title="video.comment ?? undefined"
+			:alt="video.comment"
+			preload="none"
+			playsinline
 		>
-	</video>
-	<i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i>
+			<source
+				: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>
+		<div v-else-if="!isActuallyPlaying" :class="$style.videoLoading">
+			<MkLoading/>
+		</div>
+		<div :class="$style.videoControls">
+			<div :class="[$style.controlsChild, $style.controlsLeft]">
+				<button class="_button" :class="$style.controlButton" @click="onClick">
+					<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">
+					<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>
+
+			</div>
+			<div :class="[$style.controlsChild, $style.controlsSeekbar]"></div>
+		</div>
+	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, shallowRef, watch } from 'vue';
+import { ref, shallowRef, computed, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import bytes from '@/filters/bytes.js';
+import hms from '@/filters/hms.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
+import { isFullscreenNotSupported } from '@/scripts/device-kind.js';
 import hasAudio from '@/scripts/media-has-audio.js';
 
 const props = defineProps<{
@@ -45,80 +76,282 @@ const props = defineProps<{
 
 const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore'));
 
+// MediaControl State
 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;
+	return false;
+});
+const isFullscreen = ref(false);
+
+const isReady = ref(false);
+const isPlaying = ref(false);
+const isActuallyPlaying = ref(false);
+const elapsedTimeMs = ref(0);
+const volume = ref(.3);
+const bufferedEnd = ref(0);
+const bufferedDataRatio = computed(() => {
+	if (!videoEl.value) return 0;
+	return bufferedEnd.value / videoEl.value.duration;
+});
+let controlStateTimer;
+
+// MediaControl Events
+function onMouseOver(ev: MouseEvent) {
+	if (controlStateTimer) {
+		clearTimeout(controlStateTimer);
+	}
+	isHoverring.value = true;
+}
+
+function onMouseLeave(ev: MouseEvent) {
+	controlStateTimer = setTimeout(() => {
+		isHoverring.value = false;
+	}, 100);
+}
+
+function onClick(ev: MouseEvent) {
+	if (!isReady.value || !videoEl.value) return;
 
-watch(videoEl, () => {
+	if (isPlaying.value) {
+		videoEl.value.pause();
+		isPlaying.value = false;
+	} else {
+		videoEl.value.play();
+		isPlaying.value = true;
+		oncePlayed.value = true;
+	}
+}
+
+function toggleFullscreen() {
+	if (isFullscreenNotSupported && videoEl.value) {
+		if (isFullscreen.value) {
+			//@ts-ignore
+			videoEl.value.webkitExitFullscreen();
+			isFullscreen.value = false;
+		} else {
+			//@ts-ignore
+			videoEl.value.webkitEnterFullscreen();
+			isFullscreen.value = true;
+		}
+	} else if (playerEl.value) {
+		if (isFullscreen.value) {
+			document.exitFullscreen();
+			isFullscreen.value = false;
+		} else {
+			playerEl.value.requestFullscreen({ navigationUI: 'hide' });
+			isFullscreen.value = true;
+		}
+	}
+}
+
+function toggleMute() {
+	if (volume.value === 0) {
+		volume.value = .3;
+	} else {
+		volume.value = 0;
+	}
+}
+
+const videoElWatcherStop = watch(videoEl, () => {
 	if (videoEl.value) {
-		videoEl.value.volume = 0.3;
+		videoElWatcherStop();
+
+		isReady.value = true;
+
+		function updateBufferedEnd() {
+			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', () => {
+			isActuallyPlaying.value = false;
+		});
+
+		videoEl.value.addEventListener('timeupdate', () => {
+			if (videoEl.value) {
+				elapsedTimeMs.value = videoEl.value.currentTime * 1000;
+			}
+		});
+
+		videoEl.value.volume = volume.value;
 		hasAudio(videoEl.value).then(had => {
-			if (!had) {
+			if (!had && videoEl.value) {
 				videoEl.value.loop = videoEl.value.muted = true;
 				videoEl.value.play();
 			}
 		});
 	}
 });
+
+watch(volume, (to) => {
+	if (videoEl.value) videoEl.value.volume = to;
+});
 </script>
 
 <style lang="scss" module>
-.visible {
+.videoContainer {
+	container-type: inline-size;
 	position: relative;
 }
 
-.sensitiveContainer {
-	position: relative;
+.hide {
+	width: 100%;
+	background: none;
+	border: none;
+	outline: none;
+  	font: inherit;
+  	color: inherit;
+	cursor: pointer;
+	padding: 120px 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #000;
+}
 
-	&::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);
-	}
+.hideContent {
+	text-align: center;
+	font-size: 0.8em;
+	color: #fff;
 }
 
-.hide {
+.videoRoot {
+	background: #000;
+	position: relative;
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
+
+.video {
 	display: block;
+	height: 100%;
+	width: 100%;
+	pointer-events: none;
+}
+
+.videoOverlayPlayButton {
 	position: absolute;
-	border-radius: 6px;
-	background-color: var(--fg);
-	color: var(--accentLighten);
-	font-size: 14px;
-	opacity: .5;
-	padding: 3px 6px;
-	text-align: center;
-	cursor: pointer;
-	top: 12px;
-	right: 12px;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%,-50%);
+
+	opacity: 0;
+	transition: opacity .4s ease-in-out;
+
+	background: var(--accent);
+	color: #fff;
+	padding: 1rem;
+	border-radius: 99rem;
+
+	font-size: 1.1rem;
 }
 
-.video {
+.videoLoading {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
 	display: flex;
+	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;
-	font-size: 3.5em;
-	overflow: hidden;
-	background-position: center;
-	background-size: cover;
-	width: 100%;
-	height: 100%;
+	gap: 4px;
+
+	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;
+	}
 }
 
-.hidden {
+@container (min-width: 500px) {
+	.videoControls {
+		grid-template-areas: "left seekbar time volume right";
+		grid-template-columns: auto 4fr auto 1fr auto;
+	}
+}
+
+.controlsChild {
 	display: flex;
-	justify-content: center;
-	align-items: center;
-	background: #111;
+	gap: 4px;
 	color: #fff;
+
+	.controlButton {
+		padding: 6px;
+		border-radius: calc(var(--radius) / 2);
+		transition: background-color .2s ease-in-out;
+		font-size: 1.05rem;
+
+		&:hover {
+			background-color: var(--accent);
+		}
+	}
 }
 
-.sensitive {
-	display: table-cell;
-	text-align: center;
-	font-size: 12px;
+.controlsLeft {
+	grid-area: left;
+}
+
+.controlsRight {
+	grid-area: right;
+}
+
+.controlsTime {
+	grid-area: time;
+}
+
+.controlsVolume {
+	grid-area: volume;
 }
+
+.controlsSeekbar {
+	grid-area: seekbar;
+}
+
 </style>
diff --git a/packages/frontend/src/filters/hms.ts b/packages/frontend/src/filters/hms.ts
new file mode 100644
index 000000000000..0885f4118c06
--- /dev/null
+++ b/packages/frontend/src/filters/hms.ts
@@ -0,0 +1,27 @@
+export default (ms: number) => {
+    const res: string[] = [];
+
+    // ミリ秒を秒に変換
+    let seconds = Math.floor(ms / 1000);
+
+    // 時間を計算
+    let hours = Math.floor(seconds / 3600);
+    if (hours > 0) res.push(format(hours));
+    seconds %= 3600;
+
+    // 分を計算
+    let minutes = Math.floor(seconds / 60);
+    res.push(format(minutes));
+    seconds %= 60;
+
+    // 残った秒数を取得
+    seconds = seconds % 60;
+    res.push(format(seconds));
+
+    // 結果を返す
+    return res.join(':');
+};
+
+function format(n: number) {
+    return n.toString().padStart(2, '0');
+}
diff --git a/packages/frontend/src/scripts/device-kind.ts b/packages/frontend/src/scripts/device-kind.ts
index 3843052a2430..218eb718b109 100644
--- a/packages/frontend/src/scripts/device-kind.ts
+++ b/packages/frontend/src/scripts/device-kind.ts
@@ -11,6 +11,13 @@ const ua = navigator.userAgent.toLowerCase();
 const isTablet = /ipad/.test(ua) || (/mobile|iphone|android/.test(ua) && window.innerWidth > 700);
 const isSmartphone = !isTablet && /mobile|iphone|android/.test(ua);
 
+const isIPhone = /iphone|ipod/gi.test(ua) && navigator.maxTouchPoints > 1;
+// navigator.platform may be deprecated but this check is still required
+const isIPadOS = navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;
+const isIos = /ipad|iphone|ipod/gi.test(ua) && navigator.maxTouchPoints > 1;
+
+export const isFullscreenNotSupported = isIPhone || isIos;
+
 export const deviceKind: 'smartphone' | 'tablet' | 'desktop' = defaultStore.state.overridedDeviceKind ? defaultStore.state.overridedDeviceKind
 	: isSmartphone ? 'smartphone'
 	: isTablet ? 'tablet'

From f159fc80c6be2a259b790f26fd5190706a391e4e Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Sat, 6 Jan 2024 15:16:10 +0900
Subject: [PATCH 02/20] =?UTF-8?q?(fix)=20`/files`=20=E3=82=92=E3=83=90?=
 =?UTF-8?q?=E3=82=A4=E3=83=88=E3=83=AC=E3=83=B3=E3=82=B8=E3=83=AA=E3=82=AF?=
 =?UTF-8?q?=E3=82=A8=E3=82=B9=E3=83=88=E3=81=AB=E5=AF=BE=E5=BF=9C=E3=81=95?=
 =?UTF-8?q?=E3=81=9B=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../backend/src/server/FileServerService.ts   | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)

diff --git a/packages/backend/src/server/FileServerService.ts b/packages/backend/src/server/FileServerService.ts
index f59996ce17f5..346b2b6e6817 100644
--- a/packages/backend/src/server/FileServerService.ts
+++ b/packages/backend/src/server/FileServerService.ts
@@ -168,6 +168,29 @@ export class FileServerService {
 				}
 
 				if (!image) {
+					if (request.headers.range) {
+						const range = request.headers.range as string;
+						const parts = range.replace(/bytes=/, '').split('-');
+						const start = parseInt(parts[0], 10);
+						let end = parts[1] ? parseInt(parts[1], 10) : file.file.size - 1;
+						if (end > file.file.size) {
+							end = file.file.size - 1;
+						}
+
+						image = {
+							data: fs.createReadStream(file.path, {
+								start,
+								end,
+							}),
+							ext: file.ext,
+							type: file.mime,
+						};
+
+						const chunksize = end - start + 1;
+						reply.header('Content-Range', `bytes ${start}-${end}/${file.file.size}`);
+						reply.header('Accept-Ranges', 'bytes');
+						reply.header('Content-Length', chunksize);
+					}
 					image = {
 						data: fs.createReadStream(file.path),
 						ext: file.ext,
@@ -203,11 +226,54 @@ export class FileServerService {
 				reply.header('Content-Type', FILE_TYPE_BROWSERSAFE.includes(file.mime) ? file.mime : 'application/octet-stream');
 				reply.header('Cache-Control', 'max-age=31536000, immutable');
 				reply.header('Content-Disposition', contentDisposition('inline', filename));
+
+				if (request.headers.range) {
+					const range = request.headers.range as string;
+					const parts = range.replace(/bytes=/, '').split('-');
+					const start = parseInt(parts[0], 10);
+					let end = parts[1] ? parseInt(parts[1], 10) : file.file.size - 1;
+					if (end > file.file.size) {
+						end = file.file.size - 1;
+					}
+					const chunksize = end - start + 1;
+					const fileStream = fs.createReadStream(file.path, {
+						start,
+						end,
+					});
+					reply.header('Content-Range', `bytes ${start}-${end}/${file.file.size}`);
+					reply.header('Accept-Ranges', 'bytes');
+					reply.header('Content-Length', chunksize);
+					reply.code(206);
+					return fileStream;
+				}
+
 				return fs.createReadStream(file.path);
 			} else {
 				reply.header('Content-Type', FILE_TYPE_BROWSERSAFE.includes(file.file.type) ? file.file.type : 'application/octet-stream');
 				reply.header('Cache-Control', 'max-age=31536000, immutable');
 				reply.header('Content-Disposition', contentDisposition('inline', file.filename));
+
+				if (request.headers.range) {
+					const range = request.headers.range as string;
+					const parts = range.replace(/bytes=/, '').split('-');
+					const start = parseInt(parts[0], 10);
+					let end = parts[1] ? parseInt(parts[1], 10) : file.file.size - 1;
+					console.log(end);
+					if (end > file.file.size) {
+						end = file.file.size - 1;
+					}
+					const chunksize = end - start + 1;
+					const fileStream = fs.createReadStream(file.path, {
+						start,
+						end,
+					});
+					reply.header('Content-Range', `bytes ${start}-${end}/${file.file.size}`);
+					reply.header('Accept-Ranges', 'bytes');
+					reply.header('Content-Length', chunksize);
+					reply.code(206);
+					return fileStream;
+				}
+
 				return fs.createReadStream(file.path);
 			}
 		} catch (e) {

From fa9353350e5b6ae682480c868e34e9b08969c4f2 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Sat, 6 Jan 2024 17:32:45 +0900
Subject: [PATCH 03/20] video

---
 .../frontend/src/components/MkMediaRange.vue  | 142 ++++++++
 .../frontend/src/components/MkMediaVideo.vue  | 319 ++++++++++++++----
 2 files changed, 399 insertions(+), 62 deletions(-)
 create mode 100644 packages/frontend/src/components/MkMediaRange.vue

diff --git a/packages/frontend/src/components/MkMediaRange.vue b/packages/frontend/src/components/MkMediaRange.vue
new file mode 100644
index 000000000000..86d8683f2ab0
--- /dev/null
+++ b/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>
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index 6376e47b2246..d34219e49e78 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/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">
-	<button v-if="hide" :class="$style.hide" @click="hide = false">
-		<div :class="$style.hideContent">
+<div
+	ref="playerEl"
+	: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) {
-	controlStateTimer = setTimeout(() => {
+function onMouseLeave() {
+	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, () => {
-	if (videoEl.value) {
-		videoElWatcherStop();
+let onceInit = false;
+let stopVideoElWatch: () => void;
 
-		isReady.value = true;
+function init() {
+	if (onceInit) return;
+	onceInit = true;
 
-		function updateBufferedEnd() {
-			if (videoEl.value) {
-				try {
-					bufferedEnd.value = videoEl.value.buffered.end(0);
-				} catch(err) {
-					// do nothing
+	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;
 				}
+				window.requestAnimationFrame(updateMediaTick);
 			}
-			window.requestAnimationFrame(updateBufferedEnd);
-		}
-		updateBufferedEnd();
 
-		videoEl.value.addEventListener('play', () => {
-			isActuallyPlaying.value = true;
-			isReady.value = true;
-		});
+			updateMediaTick();
 
-		videoEl.value.addEventListener('pause', () => {
-			isActuallyPlaying.value = false;
-		});
+			videoEl.value.addEventListener('play', () => {
+				isActuallyPlaying.value = true;
+			});
 
-		videoEl.value.addEventListener('timeupdate', () => {
-			if (videoEl.value) {
-				elapsedTimeMs.value = videoEl.value.currentTime * 1000;
-			}
-		});
+			videoEl.value.addEventListener('pause', () => {
+				isActuallyPlaying.value = false;
+				isPlaying.value = false;
+			});
 
-		videoEl.value.volume = volume.value;
-		hasAudio(videoEl.value).then(had => {
-			if (!had && videoEl.value) {
-				videoEl.value.loop = videoEl.value.muted = true;
-				videoEl.value.play();
-			}
-		});
-	}
-});
+			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;
-  	color: inherit;
+	font: 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>

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 04/20] 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 3937784153d0..b74e4b096c1a 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 77f9a9ec0f13..e76bb4865683 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 000000000000..453b17fe3ba9
--- /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 3f8fef6632eb..b21960a4900c 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 86d8683f2ab0..e40947fe2099 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 d34219e49e78..388944783d90 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 0885f4118c06..64fd5a6496b3 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');
 }

From 773f67e254d85def150b1d6ab648e85966482d3c Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Sat, 6 Jan 2024 18:30:59 +0900
Subject: [PATCH 05/20] fix

---
 packages/backend/src/server/FileServerService.ts | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/backend/src/server/FileServerService.ts b/packages/backend/src/server/FileServerService.ts
index 346b2b6e6817..6d42bf49f8c7 100644
--- a/packages/backend/src/server/FileServerService.ts
+++ b/packages/backend/src/server/FileServerService.ts
@@ -176,6 +176,7 @@ export class FileServerService {
 						if (end > file.file.size) {
 							end = file.file.size - 1;
 						}
+						const chunksize = end - start + 1;
 
 						image = {
 							data: fs.createReadStream(file.path, {
@@ -186,16 +187,16 @@ export class FileServerService {
 							type: file.mime,
 						};
 
-						const chunksize = end - start + 1;
 						reply.header('Content-Range', `bytes ${start}-${end}/${file.file.size}`);
 						reply.header('Accept-Ranges', 'bytes');
 						reply.header('Content-Length', chunksize);
+					} else {
+						image = {
+							data: fs.createReadStream(file.path),
+							ext: file.ext,
+							type: file.mime,
+						};
 					}
-					image = {
-						data: fs.createReadStream(file.path),
-						ext: file.ext,
-						type: file.mime,
-					};
 				}
 
 				if ('pipe' in image.data && typeof image.data.pipe === 'function') {

From 1ee3ebc6eb8f31d1c0dff778b706232e5814178a Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Sat, 6 Jan 2024 18:35:51 +0900
Subject: [PATCH 06/20] fix

---
 packages/frontend/src/components/MkMediaAudio.vue | 2 +-
 packages/frontend/src/components/MkMediaVideo.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue
index 453b17fe3ba9..964a6ff1faed 100644
--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@@ -161,7 +161,7 @@ function togglePlayPause() {
 
 function toggleMute() {
 	if (volume.value === 0) {
-		volume.value = .3;
+		volume.value = .5;
 	} else {
 		volume.value = 0;
 	}
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index 388944783d90..0f5fdfedc78c 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -236,7 +236,7 @@ function toggleFullscreen() {
 
 function toggleMute() {
 	if (volume.value === 0) {
-		volume.value = .3;
+		volume.value = .5;
 	} else {
 		volume.value = 0;
 	}

From 31de7a5802d44be7d83a41a46611ba14f7eccbec Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Sat, 6 Jan 2024 18:49:26 +0900
Subject: [PATCH 07/20] spdx

---
 packages/frontend/src/filters/hms.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/frontend/src/filters/hms.ts b/packages/frontend/src/filters/hms.ts
index 64fd5a6496b3..b11313780be4 100644
--- a/packages/frontend/src/filters/hms.ts
+++ b/packages/frontend/src/filters/hms.ts
@@ -1,3 +1,8 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
 export default (ms: number, enableMs = false) => {
 	const res: string[] = [];
 

From 006aaf361391423098da46893f282db683d26151 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Sat, 6 Jan 2024 19:17:22 +0900
Subject: [PATCH 08/20] fix (rangeRequest)

---
 .../backend/src/server/FileServerService.ts   | 40 +++++++++++++++----
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/packages/backend/src/server/FileServerService.ts b/packages/backend/src/server/FileServerService.ts
index 6d42bf49f8c7..7745a6cb78b1 100644
--- a/packages/backend/src/server/FileServerService.ts
+++ b/packages/backend/src/server/FileServerService.ts
@@ -168,7 +168,7 @@ export class FileServerService {
 				}
 
 				if (!image) {
-					if (request.headers.range) {
+					if (request.headers.range && file.file.size > 0) {
 						const range = request.headers.range as string;
 						const parts = range.replace(/bytes=/, '').split('-');
 						const start = parseInt(parts[0], 10);
@@ -228,7 +228,7 @@ export class FileServerService {
 				reply.header('Cache-Control', 'max-age=31536000, immutable');
 				reply.header('Content-Disposition', contentDisposition('inline', filename));
 
-				if (request.headers.range) {
+				if (request.headers.range && file.file.size > 0) {
 					const range = request.headers.range as string;
 					const parts = range.replace(/bytes=/, '').split('-');
 					const start = parseInt(parts[0], 10);
@@ -254,7 +254,7 @@ export class FileServerService {
 				reply.header('Cache-Control', 'max-age=31536000, immutable');
 				reply.header('Content-Disposition', contentDisposition('inline', file.filename));
 
-				if (request.headers.range) {
+				if (request.headers.range && file.file.size > 0) {
 					const range = request.headers.range as string;
 					const parts = range.replace(/bytes=/, '').split('-');
 					const start = parseInt(parts[0], 10);
@@ -407,11 +407,35 @@ export class FileServerService {
 			}
 
 			if (!image) {
-				image = {
-					data: fs.createReadStream(file.path),
-					ext: file.ext,
-					type: file.mime,
-				};
+				if (request.headers.range && file.file && file.file.size > 0) {
+					const range = request.headers.range as string;
+					const parts = range.replace(/bytes=/, '').split('-');
+					const start = parseInt(parts[0], 10);
+					let end = parts[1] ? parseInt(parts[1], 10) : file.file.size - 1;
+					if (end > file.file.size) {
+						end = file.file.size - 1;
+					}
+					const chunksize = end - start + 1;
+
+					image = {
+						data: fs.createReadStream(file.path, {
+							start,
+							end,
+						}),
+						ext: file.ext,
+						type: file.mime,
+					};
+
+					reply.header('Content-Range', `bytes ${start}-${end}/${file.file.size}`);
+					reply.header('Accept-Ranges', 'bytes');
+					reply.header('Content-Length', chunksize);
+				} else {
+					image = {
+						data: fs.createReadStream(file.path),
+						ext: file.ext,
+						type: file.mime,
+					};
+				}
 			}
 
 			if ('cleanup' in file) {

From 488c0c248f03085ef4804b06f5d7b547ff7391e8 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Sat, 6 Jan 2024 20:09:45 +0900
Subject: [PATCH 09/20] fix

---
 packages/frontend/src/components/MkMediaAudio.vue | 3 ++-
 packages/frontend/src/components/MkMediaVideo.vue | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue
index 964a6ff1faed..bfeb60cc1b97 100644
--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@@ -207,7 +207,8 @@ function init() {
 				isActuallyPlaying.value = false;
 				isPlaying.value = false;
 			});
-
+			
+			durationMs.value = audioEl.value.duration * 1000;
 			audioEl.value.addEventListener('durationchange', () => {
 				if (audioEl.value) {
 					durationMs.value = audioEl.value.duration * 1000;
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index 0f5fdfedc78c..f08114fdd34e 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -283,6 +283,7 @@ function init() {
 				isPlaying.value = false;
 			});
 
+			durationMs.value = videoEl.value.duration * 1000;
 			videoEl.value.addEventListener('durationchange', () => {
 				if (videoEl.value) {
 					durationMs.value = videoEl.value.duration * 1000;

From 53e679be92dffd4aa2982b29a71e54954ac15082 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 8 Jan 2024 18:00:19 +0900
Subject: [PATCH 10/20] Update CHANGELOG.md

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1ea6862d1b8b..275436be9753 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@
 
 ### Client
 - Feat: 新しいゲームを追加
+- Feat: 音声・映像プレイヤーを追加
 - Enhance: ハッシュタグ入力時に、本文の末尾の行に何も書かれていない場合は新たにスペースを追加しないように
 - Enhance: チャンネルノートのピン留めをノートのメニューからできるように
 - Fix: ネイティブモードの絵文字がモノクロにならないように
@@ -29,6 +30,7 @@
 - Enhance: 連合先のレートリミットに引っかかった際にリトライするようになりました
 - Enhance: ActivityPub Deliver queueでBodyを事前処理するように (#12916)
 - Enhance: クリップをエクスポートできるように
+- Enhance: `/files`のファイルに対してHTTP Rangeリクエストを行えるように
 - Fix: `drive/files/update`でファイル名のバリデーションが機能していない問題を修正
 
 ## 2023.12.2

From 6271f9493b63f96d0dd9915207e97fe120ef9037 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Fri, 12 Jan 2024 14:46:40 +0900
Subject: [PATCH 11/20] =?UTF-8?q?(add)=20=E3=83=9C=E3=83=AA=E3=83=A5?=
 =?UTF-8?q?=E3=83=BC=E3=83=A0=E3=82=92=E4=BF=9D=E5=AD=98=E3=81=A7=E3=81=8D?=
 =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkMediaAudio.vue | 12 ++++++++++--
 packages/frontend/src/components/MkMediaRange.vue |  8 ++++++--
 packages/frontend/src/components/MkMediaVideo.vue | 10 +++++++++-
 packages/frontend/src/store.ts                    |  6 ++++++
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue
index bfeb60cc1b97..ef02fa01ae99 100644
--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@@ -46,6 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkMediaRange
 				v-model="volume"
 				:class="$style.volumeSeekbar"
+				@dragEnded="saveVolume"
 			/>
 		</div>
 		<MkMediaRange
@@ -138,7 +139,7 @@ const rangePercent = computed({
 		audioEl.value.currentTime = to * durationMs.value / 1000;
 	},
 });
-const volume = ref(.5);
+const volume = ref(defaultStore.state.mediaPlayer.volume);
 const bufferedEnd = ref(0);
 const bufferedDataRatio = computed(() => {
 	if (!audioEl.value) return 0;
@@ -167,6 +168,13 @@ function toggleMute() {
 	}
 }
 
+function saveVolume(newVolume: number) {
+	defaultStore.set('mediaPlayer', {
+		...defaultStore.state.mediaPlayer,
+		volume: newVolume,
+	});
+}
+
 let onceInit = false;
 let stopAudioElWatch: () => void;
 
@@ -207,7 +215,7 @@ function init() {
 				isActuallyPlaying.value = false;
 				isPlaying.value = false;
 			});
-			
+
 			durationMs.value = audioEl.value.duration * 1000;
 			audioEl.value.addEventListener('durationchange', () => {
 				if (audioEl.value) {
diff --git a/packages/frontend/src/components/MkMediaRange.vue b/packages/frontend/src/components/MkMediaRange.vue
index e40947fe2099..5f1b848b022f 100644
--- a/packages/frontend/src/components/MkMediaRange.vue
+++ b/packages/frontend/src/components/MkMediaRange.vue
@@ -6,8 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <!-- Media系専用のinput range -->
 <template>
 <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"/>
+	<progress v-if="buffer !== undefined" :class="$style.buffer" :value="isNaN(buffer) ? 0 : buffer" min="0" max="1">{{ Math.round(buffer * 100) }}% buffered</progress>
+	<input v-model="model" :class="$style.seek" :style="`--value: ${modelValue * 100}%;`" type="range" min="0" max="1" step="any" @change="emit('dragEnded', modelValue)"/>
 </div>
 </template>
 
@@ -22,6 +22,10 @@ withDefaults(defineProps<{
 	sliderBgWhite: false,
 });
 
+const emit = defineEmits<{
+	(ev: 'dragEnded', value: number): void;
+}>();
+
 // eslint-disable-next-line no-undef
 const model = defineModel({ required: true }) as ModelRef<string | number>;
 const modelValue = computed({
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index f08114fdd34e..12c822eac1a8 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -69,6 +69,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					v-model="volume"
 					:sliderBgWhite="true"
 					:class="$style.volumeSeekbar"
+					@dragEnded="saveVolume"
 				/>
 			</div>
 			<MkMediaRange
@@ -176,7 +177,7 @@ const rangePercent = computed({
 		videoEl.value.currentTime = to * durationMs.value / 1000;
 	},
 });
-const volume = ref(.5);
+const volume = ref(defaultStore.state.mediaPlayer.volume);
 const bufferedEnd = ref(0);
 const bufferedDataRatio = computed(() => {
 	if (!videoEl.value) return 0;
@@ -242,6 +243,13 @@ function toggleMute() {
 	}
 }
 
+function saveVolume(newVolume: number) {
+	defaultStore.set('mediaPlayer', {
+		...defaultStore.state.mediaPlayer,
+		volume: newVolume,
+	});
+}
+
 let onceInit = false;
 let stopVideoElWatch: () => void;
 
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index e3a85377d852..ecb81b83dc3d 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -427,6 +427,12 @@ export const defaultStore = markRaw(new Storage('base', {
 			sfxVolume: 1,
 		},
 	},
+	mediaPlayer: {
+		where: 'device',
+		default: {
+			volume: 0.5,
+		},
+	},
 
 	sound_masterVolume: {
 		where: 'device',

From a65002b56ecdcb10f76bcc2debbe38593a69643f Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Fri, 12 Jan 2024 14:50:52 +0900
Subject: [PATCH 12/20] =?UTF-8?q?(fix)=20=E3=83=9F=E3=83=A5=E3=83=BC?=
 =?UTF-8?q?=E3=83=88=E5=BE=A9=E5=B8=B0=E6=99=82=E3=81=AB=E9=9F=B3=E9=87=8F?=
 =?UTF-8?q?=E3=81=8C=E5=9B=BA=E5=AE=9A=E3=81=95=E3=82=8C=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkMediaAudio.vue | 2 +-
 packages/frontend/src/components/MkMediaVideo.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue
index ef02fa01ae99..ad05d1138e92 100644
--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@@ -162,7 +162,7 @@ function togglePlayPause() {
 
 function toggleMute() {
 	if (volume.value === 0) {
-		volume.value = .5;
+		volume.value = defaultStore.state.mediaPlayer.volume;
 	} else {
 		volume.value = 0;
 	}
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index 12c822eac1a8..b963290d5d0f 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -237,7 +237,7 @@ function toggleFullscreen() {
 
 function toggleMute() {
 	if (volume.value === 0) {
-		volume.value = .5;
+		volume.value = defaultStore.state.mediaPlayer.volume;
 	} else {
 		volume.value = 0;
 	}

From dcf8a002f7c02ec4046790a413ca9d136c0bd879 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Fri, 12 Jan 2024 14:57:08 +0900
Subject: [PATCH 13/20] named export

---
 packages/frontend/src/components/MkMediaAudio.vue | 2 +-
 packages/frontend/src/components/MkMediaVideo.vue | 2 +-
 packages/frontend/src/filters/hms.ts              | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue
index ad05d1138e92..1a4bc4e6bfde 100644
--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@@ -66,7 +66,7 @@ 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 { hms } from '@/filters/hms.js';
 import MkMediaRange from '@/components/MkMediaRange.vue';
 import { iAmModerator } from '@/account.js';
 
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index b963290d5d0f..928798650428 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -88,7 +88,7 @@ import { ref, shallowRef, computed, watch, onDeactivated, onActivated, onMounted
 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 { hms } from '@/filters/hms.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
diff --git a/packages/frontend/src/filters/hms.ts b/packages/frontend/src/filters/hms.ts
index b11313780be4..4de27d11dbc0 100644
--- a/packages/frontend/src/filters/hms.ts
+++ b/packages/frontend/src/filters/hms.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-export default (ms: number, enableMs = false) => {
+export function hms (ms: number, enableMs = false) {
 	const res: string[] = [];
 
 	// ミリ秒を秒に変換
@@ -28,7 +28,7 @@ export default (ms: number, enableMs = false) => {
 
 	// 結果を返す
 	return res.join(':') + (enableMs ? '.' + format(Math.floor(mili / 10)) : '');
-};
+}
 
 function format(n: number) {
 	return n.toString().padStart(2, '0');

From 6a651705e5945e2e2f02f0a4f7554e224576ff71 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Fri, 12 Jan 2024 15:27:35 +0900
Subject: [PATCH 14/20] tweak design

---
 packages/frontend/src/components/MkMediaAudio.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue
index 1a4bc4e6bfde..105f4022cf64 100644
--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@@ -304,12 +304,11 @@ onDeactivated(() => {
 	.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);
+			color: var(--accent);
+			background-color: var(--accentedBg);
 		}
 	}
 }

From 5ca0483d48877e9305a593a915e371f176e69c37 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Fri, 12 Jan 2024 15:31:54 +0900
Subject: [PATCH 15/20] Add sensitive class for audio component

---
 .../frontend/src/components/MkMediaAudio.vue     | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue
index 105f4022cf64..e2edb0ba26b1 100644
--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@@ -264,6 +264,22 @@ onDeactivated(() => {
 	overflow: clip;
 }
 
+.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);
+	}
+}
+
 .hidden {
 	width: 100%;
 	background: none;

From ec09bf23d27941a70417279c1b42b759d4a1b082 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Mon, 15 Jan 2024 15:36:34 +0900
Subject: [PATCH 16/20] Refactor seekbar styles

---
 .../frontend/src/components/MkMediaRange.vue  | 184 +++++++++---------
 1 file changed, 92 insertions(+), 92 deletions(-)

diff --git a/packages/frontend/src/components/MkMediaRange.vue b/packages/frontend/src/components/MkMediaRange.vue
index 5f1b848b022f..e6303a5c41d1 100644
--- a/packages/frontend/src/components/MkMediaRange.vue
+++ b/packages/frontend/src/components/MkMediaRange.vue
@@ -37,114 +37,114 @@ const modelValue = computed({
 <style lang="scss" module>
 .controlsSeekbar {
 	position: relative;
+}
 
-	> .seek {
-		position: relative;
-		-webkit-appearance: none;
-		appearance: none;
+.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: var(--sliderBg);
+		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: 26px;
-		color: var(--accent);
-		display: block;
-		height: 19px;
-		margin: 0;
-		min-width: 0;
-		padding: 0;
+		border-radius: 99rem;
+		height: 5px;
 		transition: box-shadow .3s ease;
-		width: 100%;
-
-		&::-webkit-slider-runnable-track {
-			background-color: var(--sliderBg);
-			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;
-		}
+		user-select: none;
+		background-color: var(--sliderBg);
+	}
 
-		&::-moz-range-track {
-			background: transparent;
-			border: 0;
-			border-radius: 99rem;
-			height: 5px;
-			transition: box-shadow .3s ease;
-			user-select: none;
-			background-color: var(--sliderBg);
-		}
+	&::-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;
 
-		&::-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);
-			}
+		&: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-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;
 
-		&::-moz-range-progress {
-			background: currentColor;
-			border-radius: 99rem;
-			height: 5px;
+		&: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);
 		}
 	}
 
-	> .buffer {
-		appearance: none;
-		background: transparent;
-		color: var(--sliderBg);
-		border: 0;
+	&::-moz-range-progress {
+		background: currentColor;
 		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;
-		}
+.buffer {
+	appearance: none;
+	background: transparent;
+	color: var(--sliderBg);
+	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;
+	}
 
-		&::-moz-progress-bar {
-			background: currentColor;
-			border-radius: 100px;
-			min-width: 5px;
-			transition: width .2s ease;
-		}
+	&::-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>

From 617ec1126169af7c2c20cafd102436704c36da2f Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Mon, 15 Jan 2024 16:15:49 +0900
Subject: [PATCH 17/20] Refactor hms

---
 packages/frontend/src/filters/hms.ts | 42 ++++++++++++++++++++++++----
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/filters/hms.ts b/packages/frontend/src/filters/hms.ts
index 4de27d11dbc0..7b5da965ff6d 100644
--- a/packages/frontend/src/filters/hms.ts
+++ b/packages/frontend/src/filters/hms.ts
@@ -3,8 +3,26 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-export function hms (ms: number, enableMs = false) {
-	const res: string[] = [];
+import { i18n } from '@/i18n.js';
+
+export function hms(ms: number, options: {
+	textFormat?: 'colon' | 'locale';
+	enableSeconds?: boolean;
+	enableMs?: boolean;
+}) {
+	const _options = {
+		textFormat: 'colon',
+		enableSeconds: true,
+		enableMs: false,
+		...options,
+	};
+
+	const res: {
+		h?: string;
+		m?: string;
+		s?: string;
+		ms?: string;
+	} = {};
 
 	// ミリ秒を秒に変換
 	let seconds = Math.floor(ms / 1000);
@@ -14,20 +32,32 @@ export function hms (ms: number, enableMs = false) {
 
 	// 時間を計算
 	const hours = Math.floor(seconds / 3600);
-	if (hours > 0) res.push(format(hours));
+	res.h = format(hours);
 	seconds %= 3600;
 
 	// 分を計算
 	const minutes = Math.floor(seconds / 60);
-	res.push(format(minutes));
+	res.m = format(minutes);
 	seconds %= 60;
 
 	// 残った秒数を取得
 	seconds = seconds % 60;
-	res.push(format(seconds));
+	res.s = format(seconds);
+
+	// ミリ秒を取得
+	res.ms = format(Math.floor(mili / 10));
 
 	// 結果を返す
-	return res.join(':') + (enableMs ? '.' + format(Math.floor(mili / 10)) : '');
+	if (_options.textFormat === 'locale') {
+		res.h += i18n.ts._time.hour;
+		res.m += i18n.ts._time.minute;
+		res.s += i18n.ts._time.second;
+	}
+	return [
+		res.h.startsWith('00') ? undefined : res.h,
+		res.m,
+		(_options.enableSeconds ? res.s : undefined),
+	].filter(v => v !== undefined).join(_options.textFormat === 'colon' ? ':' : ' ') + (_options.enableMs ? _options.textFormat === 'colon' ? `.${res.ms}` : ` ${res.ms}` : '');
 }
 
 function format(n: number) {

From 1d48491f1e371562c93e380199f44c4de9c3443b Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Mon, 15 Jan 2024 16:17:18 +0900
Subject: [PATCH 18/20] =?UTF-8?q?Revert=20"(add)=20=E3=83=9C=E3=83=AA?=
 =?UTF-8?q?=E3=83=A5=E3=83=BC=E3=83=A0=E3=82=92=E4=BF=9D=E5=AD=98=E3=81=A7?=
 =?UTF-8?q?=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 6271f9493b63f96d0dd9915207e97fe120ef9037.
---
 packages/frontend/src/components/MkMediaAudio.vue | 12 ++----------
 packages/frontend/src/components/MkMediaRange.vue |  8 ++------
 packages/frontend/src/components/MkMediaVideo.vue | 10 +---------
 packages/frontend/src/store.ts                    |  6 ------
 4 files changed, 5 insertions(+), 31 deletions(-)

diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue
index e2edb0ba26b1..708a1ea6cf84 100644
--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@@ -46,7 +46,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkMediaRange
 				v-model="volume"
 				:class="$style.volumeSeekbar"
-				@dragEnded="saveVolume"
 			/>
 		</div>
 		<MkMediaRange
@@ -139,7 +138,7 @@ const rangePercent = computed({
 		audioEl.value.currentTime = to * durationMs.value / 1000;
 	},
 });
-const volume = ref(defaultStore.state.mediaPlayer.volume);
+const volume = ref(.5);
 const bufferedEnd = ref(0);
 const bufferedDataRatio = computed(() => {
 	if (!audioEl.value) return 0;
@@ -168,13 +167,6 @@ function toggleMute() {
 	}
 }
 
-function saveVolume(newVolume: number) {
-	defaultStore.set('mediaPlayer', {
-		...defaultStore.state.mediaPlayer,
-		volume: newVolume,
-	});
-}
-
 let onceInit = false;
 let stopAudioElWatch: () => void;
 
@@ -215,7 +207,7 @@ function init() {
 				isActuallyPlaying.value = false;
 				isPlaying.value = false;
 			});
-
+			
 			durationMs.value = audioEl.value.duration * 1000;
 			audioEl.value.addEventListener('durationchange', () => {
 				if (audioEl.value) {
diff --git a/packages/frontend/src/components/MkMediaRange.vue b/packages/frontend/src/components/MkMediaRange.vue
index e6303a5c41d1..0ad37e7662f2 100644
--- a/packages/frontend/src/components/MkMediaRange.vue
+++ b/packages/frontend/src/components/MkMediaRange.vue
@@ -6,8 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <!-- Media系専用のinput range -->
 <template>
 <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">{{ Math.round(buffer * 100) }}% buffered</progress>
-	<input v-model="model" :class="$style.seek" :style="`--value: ${modelValue * 100}%;`" type="range" min="0" max="1" step="any" @change="emit('dragEnded', modelValue)"/>
+	<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>
 
@@ -22,10 +22,6 @@ withDefaults(defineProps<{
 	sliderBgWhite: false,
 });
 
-const emit = defineEmits<{
-	(ev: 'dragEnded', value: number): void;
-}>();
-
 // eslint-disable-next-line no-undef
 const model = defineModel({ required: true }) as ModelRef<string | number>;
 const modelValue = computed({
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index 928798650428..e9c532e247d5 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -69,7 +69,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 					v-model="volume"
 					:sliderBgWhite="true"
 					:class="$style.volumeSeekbar"
-					@dragEnded="saveVolume"
 				/>
 			</div>
 			<MkMediaRange
@@ -177,7 +176,7 @@ const rangePercent = computed({
 		videoEl.value.currentTime = to * durationMs.value / 1000;
 	},
 });
-const volume = ref(defaultStore.state.mediaPlayer.volume);
+const volume = ref(.5);
 const bufferedEnd = ref(0);
 const bufferedDataRatio = computed(() => {
 	if (!videoEl.value) return 0;
@@ -243,13 +242,6 @@ function toggleMute() {
 	}
 }
 
-function saveVolume(newVolume: number) {
-	defaultStore.set('mediaPlayer', {
-		...defaultStore.state.mediaPlayer,
-		volume: newVolume,
-	});
-}
-
 let onceInit = false;
 let stopVideoElWatch: () => void;
 
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index ecb81b83dc3d..e3a85377d852 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -427,12 +427,6 @@ export const defaultStore = markRaw(new Storage('base', {
 			sfxVolume: 1,
 		},
 	},
-	mediaPlayer: {
-		where: 'device',
-		default: {
-			volume: 0.5,
-		},
-	},
 
 	sound_masterVolume: {
 		where: 'device',

From 31fdd1c3ab6457a7bfb623991fb6e12c25e385f0 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Mon, 15 Jan 2024 16:17:23 +0900
Subject: [PATCH 19/20] =?UTF-8?q?Revert=20"(fix)=20=E3=83=9F=E3=83=A5?=
 =?UTF-8?q?=E3=83=BC=E3=83=88=E5=BE=A9=E5=B8=B0=E6=99=82=E3=81=AB=E9=9F=B3?=
 =?UTF-8?q?=E9=87=8F=E3=81=8C=E5=9B=BA=E5=AE=9A=E3=81=95=E3=82=8C=E3=82=8B?=
 =?UTF-8?q?"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit a65002b56ecdcb10f76bcc2debbe38593a69643f.
---
 packages/frontend/src/components/MkMediaAudio.vue | 2 +-
 packages/frontend/src/components/MkMediaVideo.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue
index 708a1ea6cf84..75b31b9a4916 100644
--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@@ -161,7 +161,7 @@ function togglePlayPause() {
 
 function toggleMute() {
 	if (volume.value === 0) {
-		volume.value = defaultStore.state.mediaPlayer.volume;
+		volume.value = .5;
 	} else {
 		volume.value = 0;
 	}
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index e9c532e247d5..977c9020c76d 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -236,7 +236,7 @@ function toggleFullscreen() {
 
 function toggleMute() {
 	if (volume.value === 0) {
-		volume.value = defaultStore.state.mediaPlayer.volume;
+		volume.value = .5;
 	} else {
 		volume.value = 0;
 	}

From 87be116f548982ac761a88b3167affa76b7bee8f Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Mon, 15 Jan 2024 16:18:35 +0900
Subject: [PATCH 20/20] revert revert changes

---
 packages/frontend/src/components/MkMediaRange.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkMediaRange.vue b/packages/frontend/src/components/MkMediaRange.vue
index 0ad37e7662f2..e6303a5c41d1 100644
--- a/packages/frontend/src/components/MkMediaRange.vue
+++ b/packages/frontend/src/components/MkMediaRange.vue
@@ -6,8 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <!-- Media系専用のinput range -->
 <template>
 <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"/>
+	<progress v-if="buffer !== undefined" :class="$style.buffer" :value="isNaN(buffer) ? 0 : buffer" min="0" max="1">{{ Math.round(buffer * 100) }}% buffered</progress>
+	<input v-model="model" :class="$style.seek" :style="`--value: ${modelValue * 100}%;`" type="range" min="0" max="1" step="any" @change="emit('dragEnded', modelValue)"/>
 </div>
 </template>
 
@@ -22,6 +22,10 @@ withDefaults(defineProps<{
 	sliderBgWhite: false,
 });
 
+const emit = defineEmits<{
+	(ev: 'dragEnded', value: number): void;
+}>();
+
 // eslint-disable-next-line no-undef
 const model = defineModel({ required: true }) as ModelRef<string | number>;
 const modelValue = computed({