From 681531cfe2854e2ba9a703ecbffa4221f7b9d1fc Mon Sep 17 00:00:00 2001
From: Aira Sakuranomiya <aira@aira.cafe>
Date: Sun, 12 Nov 2023 03:07:20 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=8F=8C?=
 =?UTF-8?q?=E8=A1=8C=E6=92=AD=E6=94=BE=E5=99=A8=E6=8E=A7=E5=88=B6=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PlayerVideo/PlayerVideoController.vue     | 40 ++++++++++++++++---
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/components/Player/PlayerVideo/PlayerVideoController.vue b/components/Player/PlayerVideo/PlayerVideoController.vue
index 1b29e020..72c3fa01 100755
--- a/components/Player/PlayerVideo/PlayerVideoController.vue
+++ b/components/Player/PlayerVideo/PlayerVideoController.vue
@@ -125,12 +125,12 @@
 		<div class="slider">
 			<Slider v-model="currentPercent" :min="0" :max="1" :buffered="buffered" />
 		</div>
+		<div class="time">
+			<span class="current">{{ currentTime }} </span>
+			<span class="divide">/</span>
+			<span class="duration">{{ duration }}</span>
+		</div>
 		<div class="right">
-			<div class="time">
-				<span class="current">{{ currentTime }} </span>
-				<span class="divide">/</span>
-				<span class="duration">{{ duration }}</span>
-			</div>
 			<SoftButton
 				class="quality-button"
 				:text="quality"
@@ -145,6 +145,7 @@
 			/>
 			<SoftButton
 				:icon="volumeSet >= 0.5 ? 'volume_up' : volumeSet > 0 ? 'volume_down' : 'volume_mute'"
+				class="volume"
 				@click="muted = !muted"
 				@mouseenter="e => volumeMenu = e"
 				@mouseleave="volumeMenu = undefined"
@@ -164,6 +165,7 @@
 
 <style scoped lang="scss">
 	$thickness: 36px;
+	$twin-thickness: 60px;
 
 	:comp {
 		position: relative;
@@ -186,6 +188,11 @@
 			transition: $fallback-transitions, background-color 0s;
 		}
 
+		@include mobile {
+			flex-wrap: wrap;
+			height: $twin-thickness;
+		}
+
 		:where(& > *) {
 			flex-shrink: 0;
 		}
@@ -196,6 +203,11 @@
 		justify-content: flex-start;
 		height: inherit;
 
+		@include mobile {
+			order: 2;
+			height: $thickness;
+		}
+
 		.play {
 			width: $thickness + 10px;
 		}
@@ -206,6 +218,16 @@
 		justify-content: flex-end;
 		height: inherit;
 
+		@include mobile {
+			order: 3;
+			height: $thickness;
+			margin-left: auto;
+
+			.volume {
+				display: none;
+			}
+		}
+
 		button {
 			@include square($thickness);
 		}
@@ -216,6 +238,10 @@
 		min-width: 90px;
 		margin: 0 4px;
 
+		@include mobile {
+			order: 2;
+		}
+
 		> * {
 			@include flex-center;
 			text-align: center;
@@ -237,6 +263,10 @@
 		flex-shrink: 1;
 		width: 100%;
 
+		@include mobile {
+			order: 1;
+		}
+
 		:deep(.passed) {
 			opacity: 1;
 		}

From dc0f84342a64d2e0b18eea037c715095a5c7386b Mon Sep 17 00:00:00 2001
From: Aira Sakuranomiya <aira@aira.cafe>
Date: Tue, 14 Nov 2023 21:48:36 +0800
Subject: [PATCH 2/3] Add player icon click scale

---
 components/Player/PlayerVideo/PlayerVideoController.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/Player/PlayerVideo/PlayerVideoController.vue b/components/Player/PlayerVideo/PlayerVideoController.vue
index 72c3fa01..0a506a3a 100755
--- a/components/Player/PlayerVideo/PlayerVideoController.vue
+++ b/components/Player/PlayerVideo/PlayerVideoController.vue
@@ -283,6 +283,10 @@
 	.soft-button {
 		--wrapper-size: #{$thickness};
 
+		&:active:deep(.icon) {
+			scale: 0.9;
+		}
+
 		&.quality-button:deep {
 			&,
 			* {

From 05959f49600c895e3a799770ea572adebc04ee25 Mon Sep 17 00:00:00 2001
From: Aira Sakuranomiya <aira@aira.cafe>
Date: Thu, 16 Nov 2023 23:15:14 +0800
Subject: [PATCH 3/3] Add auto hide player controller when fullscreen

---
 components/CapsuleSlider.vue                  |  1 +
 components/Player/PlayerVideo/PlayerVideo.vue | 23 ++++++++++++++++++-
 .../PlayerVideo/PlayerVideoController.vue     | 17 +++++++++++---
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/components/CapsuleSlider.vue b/components/CapsuleSlider.vue
index e21163a3..9752bb78 100644
--- a/components/CapsuleSlider.vue
+++ b/components/CapsuleSlider.vue
@@ -149,6 +149,7 @@
 		color: c(accent);
 		transition: none;
 		pointer-events: none;
+		font-variant-numeric: tabular-nums;
 
 		html.dark & {
 			color: white;
diff --git a/components/Player/PlayerVideo/PlayerVideo.vue b/components/Player/PlayerVideo/PlayerVideo.vue
index 3fa27ead..a348b065 100755
--- a/components/Player/PlayerVideo/PlayerVideo.vue
+++ b/components/Player/PlayerVideo/PlayerVideo.vue
@@ -33,6 +33,8 @@
 	const resample = computed({ get: () => !preservesPitch.value, set: value => preservesPitch.value = !value });
 	const menu = ref<MenuModel>();
 	const showDanmaku = ref(true);
+	const hideController = ref(false);
+	const hideControllerTimeout = ref<Timeout>();
 	const willSendDanmaku = ref<DanmakuComment[]>();
 	const willInsertDanmaku = ref<DanmakuListItem[]>();
 	const initialDanmaku = ref<DanmakuComment[]>();
@@ -114,6 +116,7 @@
 			} else {
 				screen.orientation.lock(screenOrientationBeforeFullscreen.value);
 				screen.orientation.unlock();
+				hideController.value = false; // 退出全屏时确保显示播放器控制栏。
 			}
 		} catch { }
 	});
@@ -241,6 +244,18 @@
 			// TODO: 这个只能获取视频缓存的总长度值，当用户手动跳时间时，会导致显示不准确。待优化。
 		} catch { }
 	}
+
+	/**
+	 * 在全屏时自动隐藏控制栏。
+	 */
+	function autoHideController() {
+		hideController.value = false;
+		clearTimeout(hideControllerTimeout.value);
+		hideControllerTimeout.value = setTimeout(() => {
+			if (fullscreen.value)
+				hideController.value = true;
+		}, 3000);
+	}
 </script>
 
 <template>
@@ -264,7 +279,7 @@
 			</Accordion>
 		</Alert>
 
-		<div ref="videoContainer" class="main" :class="{ fullscreen }">
+		<div ref="videoContainer" class="main" :class="{ fullscreen, 'hide-cursor': hideController }">
 			<video
 				ref="video"
 				class="player"
@@ -277,6 +292,7 @@
 				@click="playing = !playing"
 				@dblclick="toggle"
 				@contextmenu.prevent="e => menu = e"
+				@mousemove="autoHideController"
 			></video>
 			<PlayerVideoDanmaku v-model="willSendDanmaku" :comments="initialDanmaku" :media="video" :hidden="!showDanmaku" />
 			<PlayerVideoController
@@ -291,6 +307,7 @@
 				v-model:steplessRate="steplessRate"
 				v-model:showDanmaku="showDanmaku"
 				v-model:quality="quality"
+				v-model:hide="hideController"
 				:duration="duration"
 				:toggleFullscreen="toggle"
 				:buffered="buffered"
@@ -344,6 +361,10 @@
 				height: 100%;
 			}
 		}
+
+		&.hide-cursor {
+			cursor: none;
+		}
 	}
 
 	table {
diff --git a/components/Player/PlayerVideo/PlayerVideoController.vue b/components/Player/PlayerVideo/PlayerVideoController.vue
index 0a506a3a..0d0a28c7 100755
--- a/components/Player/PlayerVideo/PlayerVideoController.vue
+++ b/components/Player/PlayerVideo/PlayerVideoController.vue
@@ -34,6 +34,7 @@
 	const steplessRate = defineModel<boolean>("steplessRate", { default: false });
 	const showDanmaku = defineModel<boolean>("showDanmaku", { default: false });
 	const quality = defineModel<string>("quality", { default: "720P" });
+	const hide = defineModel<boolean>("hide", { default: false });
 	const volumeBackup = ref(volume);
 	const volumeSet = computed({
 		get: () => muted.value ? 0 : volume.value,
@@ -118,7 +119,7 @@
 		</PlayerVideoMenu>
 	</div>
 
-	<Comp role="toolbar" :class="{ fullscreen, ...fullscreenColorClass }">
+	<Comp role="toolbar" :class="{ fullscreen, ...fullscreenColorClass, hide }">
 		<div class="left">
 			<SoftButton class="play" :icon="playing ? 'pause' : 'play'" @click="playing = !playing" />
 		</div>
@@ -184,8 +185,14 @@
 			right: 0;
 			bottom: 0;
 			left: 0;
-			background-color: transparent;
+			background-color: c(acrylic-bg, 75%);
+			backdrop-filter: blur(8px);
 			transition: $fallback-transitions, background-color 0s;
+
+			&.hide {
+				translate: 0 100%;
+				visibility: hidden;
+			}
 		}
 
 		@include mobile {
@@ -284,7 +291,11 @@
 		--wrapper-size: #{$thickness};
 
 		&:active:deep(.icon) {
-			scale: 0.9;
+			scale: 0.8;
+		}
+
+		&[aria-label="fullscreen"]:active:deep(.icon) {
+			scale: 1.2;
 		}
 
 		&.quality-button:deep {