music-score/src/page-instrument/evaluat-model/index.tsx

import { Transition, defineComponent, onMounted, reactive, watch } from "vue";
import {
	connectWebsocket,
	evaluatingData,
	handleEndBegin,
	handleStartBegin,
	handleStartEvaluat,
	handleViewReport,
} from "/src/view/evaluating";
import Earphone from "./earphone";
import styles from "./index.module.less";
import SoundEffect from "./sound-effect";
import state from "/src/state";
import { storeData } from "/src/store";
import { browser } from "/src/utils";
import { getNoteByMeasuresSlursStart } from "/src/helpers/formateMusic";
import { Icon, Popup, showToast } from "vant";
import EvaluatResult from "./evaluat-result";
import EvaluatAudio from "./evaluat-audio";
import { api_getDeviceDelay, api_proxyServiceMessage, api_videoUpdate, getEarphone } from "/src/helpers/communication";
import EvaluatShare from "./evaluat-share";
import { Vue3Lottie } from "vue3-lottie";
import startData from "./data/start.json";
import startingData from "./data/starting.json";
import iconTastBg from "./icons/task-bg.svg";
import iconEvaluat from "./icons/evaluating.json";
import { api_musicPracticeRecordVideoUpload } from "../api";
import DelayCheck from "./delay-check";

// frequency 频率, amplitude 振幅, decibels 分贝
type TCriteria = "frequency" | "amplitude" | "decibels";

export default defineComponent({
	name: "evaluat-model",
	setup() {
		const evaluatModel = reactive({
			tips: true,
			evaluatUpdateAudio: false,
			isSaveVideo: state.setting.camera && state.setting.saveToAlbum,
			shareMode: false,
		});
		
		/**
		 * 执行检测
		 */
		const handlePerformDetection = async () => {
			// 检测完成不检测了
			if (evaluatingData.checkEnd) return;
			// 延迟检测
			if (evaluatingData.checkStep === 0) {
				evaluatingData.checkStep = 10;
				// 没有设备延迟数据 或 开启了效音 显示检测组件,并持续检测耳机状态
				if (state.setting.soundEffect) {
					evaluatingData.soundEffectMode = true;
					return;
				}
				const delayData = await api_getDeviceDelay();
				// console.log("🚀 ~ delayTime:", delayData);
				if (delayData && delayData.content?.value < 0) {	
					evaluatingData.soundEffectMode = true;
					return;
				}
				handlePerformDetection();
				return;
			}
			// 效验完成
			if (evaluatingData.checkStep === 10) {
				evaluatingData.checkEnd = true;
				console.log("检测结束,生成数据");
				handleConnect();
			}
		};
		const browserInfo = browser();
		/** 是否是节奏练习 */
		const isRhythmicExercises = () => {
			const examSongName = state.examSongName || "";
			return examSongName.indexOf("节奏练习") > -1;
		};

		/** 获取评测标准 */
		const getEvaluationCriteria = () => {
			let criteria: TCriteria = "frequency";
			// 声部打击乐
			if ([23, 113, 121].includes(state.subjectId)) {
				criteria = "amplitude";
			} else if (isRhythmicExercises()) {
				// 分类为节奏练习
				criteria = "decibels";
			}
			return criteria;
		};

		/** 生成评测曲谱数据 */
		const formatTimes = () => {
			let ListenMode = false;
			let dontEvaluatingMode = false;
			let skip = false;
			const datas = [];
			for (let index = 0; index < state.times.length; index++) {
				const item = state.times[index];
				const note = getNoteByMeasuresSlursStart(item);
				const rate = state.speed / state.originSpeed;
				const difftime = item.difftime;
				const start = difftime + (item.sourceRelativeTime || item.relativeTime);
				const end = difftime + (item.sourceRelaEndtime || item.relaEndtime);
				const isStaccato = note.noteElement.voiceEntry.isStaccato();
				const noteRate = isStaccato ? 0.5 : 1;
				if (note.formatLyricsEntries.contains("Play") || note.formatLyricsEntries.contains("Play...")) {
					ListenMode = false;
				}
				if (note.formatLyricsEntries.contains("Listen")) {
					ListenMode = true;
				}
				if (note.formatLyricsEntries.contains("纯律结束")) {
					dontEvaluatingMode = false;
				}
				if (note.formatLyricsEntries.contains("纯律")) {
					dontEvaluatingMode = true;
				}
				const nextNote = state.times[index + 1];
				// console.log("noteinfo", note.noteElement.isRestFlag && !!note.stave && !!nextNote)
				if (
					skip &&
					(note.stave || !item.noteElement.isRestFlag || (nextNote && !nextNote.noteElement.isRestFlag))
				) {
					skip = false;
				}
				if (
					note.noteElement.isRestFlag &&
					!!note.stave &&
					!!nextNote &&
					nextNote.noteElement.isRestFlag
				) {
					skip = true;
				}
				// console.log(note.measureOpenIndex, item.measureOpenIndex, note);
				// console.log("skip", skip)
				const data = {
					timeStamp: (start * 1000) / rate,
					duration: ((end * 1000) / rate - (start * 1000) / rate) * noteRate,
					frequency: item.frequency,
					nextFrequency: item.nextFrequency,
					prevFrequency: item.prevFrequency,
					// 重复的情况index会自然累加,render的index是谱面渲染的index
					measureIndex: note.measureOpenIndex,
					measureRenderIndex: item.measureListIndex,
					dontEvaluating: ListenMode || dontEvaluatingMode || item.skipMode,
					musicalNotesIndex: item.i,
					denominator: note.noteElement?.Length.denominator,
					isOrnament: !!note?.voiceEntry?.ornamentContainer,
				};
				datas.push(data);
			}
			return datas;
		};
		/** 连接websocket */
		const handleConnect = async () => {
			const behaviorId = localStorage.getItem("behaviorId") || undefined;
			const rate = state.speed / state.originSpeed;
			const content = {
				musicXmlInfos: formatTimes(),
				subjectId: state.subjectId,
				detailId: state.detailId,
				examSongId: state.examSongId,
				xmlUrl: state.xmlUrl,
				partIndex: state.partIndex,
				behaviorId,
				platform: browserInfo.ios ? "IOS" : browserInfo.android ? "ANDROID" : "WEB",
				clientId:
					storeData.platformType === "STUDENT"
						? "student"
						: storeData.platformType === "TEACHER"
						? "teacher"
						: "education",
				hertz: state.setting.frequency,
				reactionTimeMs: state.setting.reactionTimeMs,
				speed: state.speed,
				heardLevel: state.setting.evaluationDifficulty,
				beatLength: Math.round((state.fixtime * 1000) / rate),
				evaluationCriteria: getEvaluationCriteria(),
			};
			await connectWebsocket(content);
			// state.playSource = "music";
		};

		/** 评测结果按钮处理 */
		const handleEvaluatResult = (type: "practise" | "tryagain" | "look" | "share" | "update") => {
			if (type === "update") {
				// 上传云端
				evaluatModel.evaluatUpdateAudio = true;
				return;
			} else if (type === "share") {
				// 分享
				evaluatModel.shareMode = true;
				return;
			} else if (type === "look") {
				// 跳转
				handleViewReport("recordId", "instrument");
				return;
			} else if (type === "practise") {
				// 去练习
				handleStartEvaluat();
			} else if (type === "tryagain") {
				// 再来一次
				handleStartBegin();
			}
			evaluatingData.resulstMode = false;
		};

		/** 上传音视频 */
		const hanldeUpdateVideoAndAudio = async (update = false) => {
			if (!update) {
				evaluatModel.evaluatUpdateAudio = false;
				return;
			}
			if (state.setting.camera && state.setting.saveToAlbum) {
				evaluatModel.evaluatUpdateAudio = false;
				api_videoUpdate((res: any) => {
					if (res) {
						if (res?.content?.type === "success") {
							handleSaveResult({
								id: evaluatingData.resultData?.recordId,
								videoFilePath: res?.content?.filePath,
							});
						} else if (res?.content?.type === "error") {
							showToast({
								message: res.content?.message || "上传失败",
							});
						}
					}
				});
				return;
			}
			evaluatModel.evaluatUpdateAudio = false;
			showToast("上传成功");
		};
		const handleSaveResult = async (_body: any) => {
			await api_musicPracticeRecordVideoUpload(_body);
			showToast("上传成功");
		};

		onMounted(() => {
			handlePerformDetection();
		});
		return () => (
			<div>
				<Transition name="pop-center">
					{evaluatingData.websocketState && !evaluatingData.startBegin && evaluatingData.checkEnd && (
						<div class={styles.startBtn} onClick={handleStartBegin}>
							<img src={iconEvaluat.evaluatingStart} />
						</div>
					)}
				</Transition>
				<Transition name="pop-center">
					{evaluatingData.websocketState && evaluatingData.startBegin && (
						<div class={styles.endBtn} onClick={() => handleEndBegin()}>
							<img src={iconEvaluat.evaluatingEnd} />
						</div>
					)}
				</Transition>

				<div
					style={{ display: !evaluatingData.startBegin ? "" : "none" }}
					class={styles.dialogueBox}
					key="start"
				>
					<div class={styles.dialogue}>
						<img class={styles.dialoguebg} src={iconTastBg} />
						<div>演奏前请调整好乐器，保证最佳演奏状态。</div>
					</div>
					<Vue3Lottie class={styles.dialogueIcon} animationData={startData}></Vue3Lottie>
				</div>
				<div
					style={{ display: evaluatingData.startBegin ? "" : "none" }}
					class={styles.dialogueBox}
					key="start"
				>
					<div class={styles.dialogueing}>收音中...</div>
					<Vue3Lottie class={styles.dialogueIcon} animationData={startingData}></Vue3Lottie>
				</div>

				{evaluatingData.soundEffectMode && <DelayCheck onClose={() => {
					evaluatingData.soundEffectMode = false;
					handlePerformDetection();
				}} />}

				<Popup
					teleport="body"
					closeOnClickOverlay={false}
					class={["popup-custom", "van-scale"]}
					transition="van-scale"
					v-model:show={evaluatingData.earphoneMode}
				>
					<Earphone
						onClose={() => {
							evaluatingData.earphoneMode = false;
							handlePerformDetection();
						}}
					/>
				</Popup>
				{/* <Popup
					teleport="body"
					closeOnClickOverlay={false}
					class={["popup-custom", "van-scale"]}
					transition="van-scale"
					v-model:show={evaluatingData.soundEffectMode}
				>
					<SoundEffect
						onClose={(value: any) => {
							evaluatingData.soundEffectMode = false;
							if (value) {
								state.setting.soundEffect = false;
							}
							handleEndSoundCheck();
							handlePerformDetection();
						}}
					/>
				</Popup> */}

				<Popup
					teleport="body"
					closeOnClickOverlay={false}
					class={["popup-custom", "van-scale"]}
					transition="van-scale"
					v-model:show={evaluatingData.resulstMode}
				>
					<EvaluatResult onClose={handleEvaluatResult} />
				</Popup>
				<Popup
					teleport="body"
					closeOnClickOverlay={false}
					class={["popup-custom", "van-scale"]}
					transition="van-scale"
					v-model:show={evaluatModel.evaluatUpdateAudio}
				>
					<EvaluatAudio onClose={hanldeUpdateVideoAndAudio} />
				</Popup>
				<Popup
					teleport="body"
					class={["popup-custom", "van-scale"]}
					transition="van-scale"
					v-model:show={evaluatModel.shareMode}
				>
					<EvaluatShare onClose={() => (evaluatModel.shareMode = false)} />
				</Popup>
			</div>
		);
	},
});