Просмотр исходного кода

全屏被遮挡时,需要做暂停处理(声音和画面同时暂停)

liushengqiang 2 лет назад
Родитель
Сommit
3d19dde2b0
1 измененных файлов с 32 добавлено и 9 удалено
  1. 32 9
      src/page-gym/header-top/index.tsx

+ 32 - 9
src/page-gym/header-top/index.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, onMounted, reactive, ref } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
 import styles from "./index.module.less";
 
 import iconBack from "./image/icon-back.svg";
@@ -9,13 +9,15 @@ import icons from "./image/headerTop.json";
 import { Badge, Circle, Popover } from "vant";
 import { metronomeData } from "../../helpers/metronome";
 import Speed from "./speed";
-import { evaluatingData, handleStartEvaluat } from "/src/view/evaluating";
+import { handleEndBegin, handleStartEvaluat } from "/src/view/evaluating";
 import { Popup } from "@varlet/ui";
 import Settting from "./settting";
 import MusciList from "../musci-list";
 import { handleNoEndExit } from "../custom-plugins/recording-time";
 import { api_back } from "/src/helpers/communication";
 import { getInstrumentName } from "/src/constant/instruments";
+import { handle_stopFollow } from "/src/page-orchestra/follow-model";
+import { useRouter } from "vue-router";
 
 export const headData = reactive({
 	speedShow: false,
@@ -24,6 +26,7 @@ export const headData = reactive({
 export default defineComponent({
 	name: "header-top",
 	setup() {
+		const router = useRouter()
 		const headerData = reactive({
 			settingMode: false,
 			listShow: false,
@@ -39,7 +42,7 @@ export default defineComponent({
 			// 评测开始 禁用
 			if (state.modeType === "evaluating") return { display: true, disabled: true };
 			// 原声, 伴奏 少一个,就不能切换
-			if (!state.music || !state.accompany) return { display: true, disabled: true}
+			if (!state.music || !state.accompany) return { display: true, disabled: true };
 
 			return {
 				disabled: false,
@@ -47,15 +50,35 @@ export default defineComponent({
 			};
 		});
 
-
 		/** 退出 */
 		const handleBack = () => {
-			handleNoEndExit()
+			handleNoEndExit();
+			router.back()
 			api_back();
-		}
+		};
 		const disabledList = ["evaluating"];
-		const trackName = getInstrumentName(state.track)
-		const examSongName = state.examSongName + (trackName ? ` - ${state.track} (${trackName})` : '')
+		const trackName = getInstrumentName(state.track);
+		const examSongName = state.examSongName + (trackName ? ` - ${state.track} (${trackName})` : "");
+
+		/** 页面显示隐藏 */
+		const visibilitychange = () => {
+			if (document.visibilityState === "hidden") {
+				console.log("页面隐藏");
+				if (state.modeType === "practise") {
+					togglePlay("paused");
+				} else if (state.modeType === "evaluating") {
+					handleEndBegin();
+				} else if (state.modeType === "follow") {
+					handle_stopFollow();
+				}
+			}
+		};
+		onMounted(() => {
+			document.addEventListener("visibilitychange", visibilitychange, false);
+		});
+		onUnmounted(() => {
+			document.removeEventListener("visibilitychange", visibilitychange, false);
+		})
 		return () => (
 			<div ref={headRef} class={styles.headerTop}>
 				<div class={styles.back} onClick={handleBack}>
@@ -143,7 +166,7 @@ export default defineComponent({
 					</div>
 				</div>
 
-				<Popup v-model:show={headerData.settingMode} teleport="body" defaultStyle={false} >
+				<Popup v-model:show={headerData.settingMode} teleport="body" defaultStyle={false}>
 					<Settting onClose={() => (headerData.settingMode = false)} />
 				</Popup>
 				<Popup class="musicListPopup" v-model:show={headerData.listShow} teleport="body" defaultStyle={false} position="left">