Merge pull request #104 from KIRAKIRA-DOUGA/feature-2023111201-MorePl…

…ayerFeatures-Aira More Player Features
KIRAKIRA-DOUGA · Nov 16, 2023 · 2feb124 · 2feb124
2 parents 0afe130 + 05959f4
commit 2feb124
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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,19 +119,19 @@
 		</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>
 		<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 +146,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 +166,7 @@
 
 <style scoped lang="scss">
 	$thickness: 36px;
+	$twin-thickness: 60px;
 
 	:comp {
 		position: relative;
@@ -182,8 +185,19 @@
 			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 {
+			flex-wrap: wrap;
+			height: $twin-thickness;
 		}
 
 		:where(& > *) {
@@ -196,6 +210,11 @@
 		justify-content: flex-start;
 		height: inherit;
 
+		@include mobile {
+			order: 2;
+			height: $thickness;
+		}
+
 		.play {
 			width: $thickness + 10px;
 		}
@@ -206,6 +225,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 +245,10 @@
 		min-width: 90px;
 		margin: 0 4px;
 
+		@include mobile {
+			order: 2;
+		}
+
 		> * {
 			@include flex-center;
 			text-align: center;
@@ -237,6 +270,10 @@
 		flex-shrink: 1;
 		width: 100%;
 
+		@include mobile {
+			order: 1;
+		}
+
 		:deep(.passed) {
 			opacity: 1;
 		}
@@ -253,6 +290,14 @@
 	.soft-button {
 		--wrapper-size: #{$thickness};
 
+		&:active:deep(.icon) {
+			scale: 0.8;
+		}
+
+		&[aria-label="fullscreen"]:active:deep(.icon) {
+			scale: 1.2;
+		}
+
 		&.quality-button:deep {
 			&,
 			* {