|
|
@@ -1,28 +1,8 @@
|
|
|
import { Popup, Skeleton } from "vant";
|
|
|
-import {
|
|
|
- computed,
|
|
|
- defineComponent,
|
|
|
- nextTick,
|
|
|
- onBeforeMount,
|
|
|
- onBeforeUnmount,
|
|
|
- onMounted,
|
|
|
- reactive,
|
|
|
- Transition,
|
|
|
- watch,
|
|
|
- watchEffect,
|
|
|
-} from "vue";
|
|
|
+import { computed, defineComponent, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, Transition, watch, watchEffect } from "vue";
|
|
|
import { formateTimes } from "../../helpers/formateMusic";
|
|
|
import Metronome, { metronomeData } from "../../helpers/metronome";
|
|
|
-import state, {
|
|
|
- EnumMusicRenderType,
|
|
|
- evaluatCreateMusicPlayer,
|
|
|
- handleSetSpeed,
|
|
|
- IAudioState,
|
|
|
- IPlatform,
|
|
|
- isRhythmicExercises,
|
|
|
- resetPlaybackToStart,
|
|
|
- togglePlay,
|
|
|
-} from "/src/state";
|
|
|
+import state, { EnumMusicRenderType, evaluatCreateMusicPlayer, handleSetSpeed, IAudioState, IPlatform, isRhythmicExercises, resetPlaybackToStart, togglePlay } from "/src/state";
|
|
|
import { browser, setGlobalData } from "../../utils";
|
|
|
import AudioList from "../../view/audio-list";
|
|
|
import MusicScore, { resetMusicScore } from "../../view/music-score";
|
|
|
@@ -30,17 +10,7 @@ import { sysMusicScoreAccompanimentQueryPage } from "../api";
|
|
|
import EvaluatModel from "../evaluat-model";
|
|
|
import HeaderTop from "../header-top";
|
|
|
import styles from "./index.module.less";
|
|
|
-import {
|
|
|
- api_cloudAccompanyMessage,
|
|
|
- api_cloudLoading,
|
|
|
- api_keepScreenLongLight,
|
|
|
- api_openCamera,
|
|
|
- api_openWebView,
|
|
|
- api_setEventTracking,
|
|
|
- api_setRequestedOrientation,
|
|
|
- api_setStatusBarVisibility,
|
|
|
- isSpecialShapedScreen,
|
|
|
-} from "/src/helpers/communication";
|
|
|
+import { api_cloudAccompanyMessage, api_cloudLoading, api_keepScreenLongLight, api_openCamera, api_openWebView, api_setEventTracking, api_setRequestedOrientation, api_setStatusBarVisibility, isSpecialShapedScreen } from "/src/helpers/communication";
|
|
|
import { getQuery } from "/src/utils/queryString";
|
|
|
import Evaluating, { evaluatingData } from "/src/view/evaluating";
|
|
|
import MeasureSpeed from "/src/view/plugins/measure-speed";
|
|
|
@@ -62,416 +32,394 @@ import { recalculateNoteData } from "/src/view/selection";
|
|
|
*/
|
|
|
const instrumentSubject = [120];
|
|
|
const resetFrequency = (list: any[]) => {
|
|
|
- if (!instrumentSubject.includes(state.subjectId)) return list;
|
|
|
- for (let i = 0; i < list.length; i++) {
|
|
|
- if (list[i].prevFrequency) list[i].prevFrequency = list[i].prevFrequency * 2;
|
|
|
- if (list[i].frequency) list[i].frequency = list[i].frequency * 2;
|
|
|
- if (list[i].nextFrequency) list[i].nextFrequency = list[i].nextFrequency * 2;
|
|
|
- }
|
|
|
- return list;
|
|
|
+ if (!instrumentSubject.includes(state.subjectId)) return list;
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ if (list[i].prevFrequency) list[i].prevFrequency = list[i].prevFrequency * 2;
|
|
|
+ if (list[i].frequency) list[i].frequency = list[i].frequency * 2;
|
|
|
+ if (list[i].nextFrequency) list[i].nextFrequency = list[i].nextFrequency * 2;
|
|
|
+ }
|
|
|
+ return list;
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
* 乐器指法处理
|
|
|
*/
|
|
|
const setNoteHalfTone = (list: any[]) => {
|
|
|
- const instrumentNames = ["hulusi-flute"];
|
|
|
- if (!state.fingeringInfo?.name || !instrumentNames.includes(state.fingeringInfo.name)) return list;
|
|
|
- for (let i = 0; i < list.length; i++) {
|
|
|
- const note = list[i];
|
|
|
- if (note.realKey === 0) continue;
|
|
|
- note.realKey = note.realKey + 12;
|
|
|
- }
|
|
|
- return list;
|
|
|
+ const instrumentNames = ["hulusi-flute"];
|
|
|
+ if (!state.fingeringInfo?.name || !instrumentNames.includes(state.fingeringInfo.name)) return list;
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ const note = list[i];
|
|
|
+ if (note.realKey === 0) continue;
|
|
|
+ note.realKey = note.realKey + 12;
|
|
|
+ }
|
|
|
+ return list;
|
|
|
};
|
|
|
|
|
|
export default defineComponent({
|
|
|
- name: "music-list",
|
|
|
- setup() {
|
|
|
- const query: any = getQuery();
|
|
|
+ name: "music-list",
|
|
|
+ setup() {
|
|
|
+ const query: any = getQuery();
|
|
|
|
|
|
- const detailData = reactive({
|
|
|
- isLoading: true,
|
|
|
- skeletonLoading: true,
|
|
|
- paddingLeft: "",
|
|
|
- headerHide: false,
|
|
|
- fingerPreView: false,
|
|
|
- orientation: 0,
|
|
|
- fingerPreViewGuide: false,
|
|
|
- });
|
|
|
- const getAPPData = async () => {
|
|
|
- const screenData = await isSpecialShapedScreen();
|
|
|
- if (screenData?.content) {
|
|
|
- // console.log("🚀 ~ screenData:", screenData.content);
|
|
|
- const { isSpecialShapedScreen, notchHeight } = screenData.content;
|
|
|
- if (isSpecialShapedScreen) {
|
|
|
- detailData.paddingLeft = 25 + "px";
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
- onBeforeMount(() => {
|
|
|
- api_keepScreenLongLight();
|
|
|
- getAPPData();
|
|
|
- api_setStatusBarVisibility();
|
|
|
- const settting = store.get("musicscoresetting");
|
|
|
- if (settting) {
|
|
|
- state.setting = settting;
|
|
|
- if (state.setting.camera) {
|
|
|
- api_openCamera();
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
+ const detailData = reactive({
|
|
|
+ isLoading: true,
|
|
|
+ skeletonLoading: true,
|
|
|
+ paddingLeft: "",
|
|
|
+ headerHide: false,
|
|
|
+ fingerPreView: false,
|
|
|
+ orientation: 0,
|
|
|
+ fingerPreViewGuide: false,
|
|
|
+ });
|
|
|
+ const getAPPData = async () => {
|
|
|
+ const screenData = await isSpecialShapedScreen();
|
|
|
+ if (screenData?.content) {
|
|
|
+ // console.log("🚀 ~ screenData:", screenData.content);
|
|
|
+ const { isSpecialShapedScreen, notchHeight } = screenData.content;
|
|
|
+ if (isSpecialShapedScreen) {
|
|
|
+ detailData.paddingLeft = 25 + "px";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ onBeforeMount(() => {
|
|
|
+ api_keepScreenLongLight();
|
|
|
+ getAPPData();
|
|
|
+ api_setStatusBarVisibility();
|
|
|
+ const settting = store.get("musicscoresetting");
|
|
|
+ if (settting) {
|
|
|
+ state.setting = settting;
|
|
|
+ if (state.setting.camera) {
|
|
|
+ api_openCamera();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- //给app传伴奏
|
|
|
- const pushAppMusic = () => {
|
|
|
- api_cloudAccompanyMessage(state.accompany);
|
|
|
- };
|
|
|
- // console.log(route.params, query)
|
|
|
- /** 获取曲谱数据 */
|
|
|
- const getMusicInfo = (res: any) => {
|
|
|
- const index = query["part-index"] ? parseInt(query["part-index"] as string) : 0;
|
|
|
- const musicData = res.data.background[index] || {};
|
|
|
- const musicInfo = {
|
|
|
- ...res.data,
|
|
|
- music: musicData.audioFileUrl || res.data.audioFileUrl,
|
|
|
- accompany: musicData.metronomeUrl || res.data.metronomeUrl,
|
|
|
- musicSheetId: musicData.musicSheetId || res.data.id,
|
|
|
- track: musicData.track || res.data.track,
|
|
|
- };
|
|
|
- console.log("🚀 ~ musicInfo:", musicInfo);
|
|
|
- setState(musicInfo, index);
|
|
|
- setCustom();
|
|
|
- detailData.isLoading = false;
|
|
|
- };
|
|
|
+ //给app传伴奏
|
|
|
+ const pushAppMusic = () => {
|
|
|
+ api_cloudAccompanyMessage(state.accompany);
|
|
|
+ };
|
|
|
+ // console.log(route.params, query)
|
|
|
+ /** 获取曲谱数据 */
|
|
|
+ const getMusicInfo = (res: any) => {
|
|
|
+ const index = query["part-index"] ? parseInt(query["part-index"] as string) : 0;
|
|
|
+ const musicData = res.data.background[index] || {};
|
|
|
+ const musicInfo = {
|
|
|
+ ...res.data,
|
|
|
+ music: musicData.audioFileUrl || res.data.audioFileUrl,
|
|
|
+ accompany: musicData.metronomeUrl || res.data.metronomeUrl,
|
|
|
+ musicSheetId: musicData.musicSheetId || res.data.id,
|
|
|
+ track: musicData.track || res.data.track,
|
|
|
+ };
|
|
|
+ console.log("🚀 ~ musicInfo:", musicInfo);
|
|
|
+ setState(musicInfo, index);
|
|
|
+ setCustom();
|
|
|
+ detailData.isLoading = false;
|
|
|
+ };
|
|
|
|
|
|
- const setState = (data: any, index: number) => {
|
|
|
- state.appName = "COLEXIU";
|
|
|
- state.detailId = data.id;
|
|
|
- state.xmlUrl = data.xmlFileUrl;
|
|
|
- state.partIndex = index;
|
|
|
- state.subjectId = data.musicSubject;
|
|
|
- state.categoriesId = data.categoriesId;
|
|
|
- state.categoriesName = data.musicTagNames;
|
|
|
- state.enableEvaluation = data.canEvaluate ? true : false;
|
|
|
- state.examSongId = data.id + "";
|
|
|
- state.examSongName = data.musicSheetName;
|
|
|
- // 解析扩展字段
|
|
|
- if (data.extConfigJson) {
|
|
|
- try {
|
|
|
- state.extConfigJson = JSON.parse(data.extConfigJson as string);
|
|
|
- } catch (error) {
|
|
|
- console.error("解析扩展字段错误:", error);
|
|
|
- }
|
|
|
- }
|
|
|
- state.isOpenMetronome = data.mp3Type === "MP3_METRONOME" ? true : false;
|
|
|
- // 曲子包含节拍器,就不开启节拍器
|
|
|
- state.needTick = data.mp3Type === "MP3_METRONOME" ? false : true;
|
|
|
- state.isShowFingering = data.showFingering ? true : false;
|
|
|
- state.music = data.music;
|
|
|
- state.accompany = data.accompany;
|
|
|
- state.midiUrl = data.midiUrl;
|
|
|
- state.parentCategoriesId = data.musicTag;
|
|
|
- state.musicSheetCategoriesId = data.musicSheetCategoriesId;
|
|
|
- state.playMode = data.audioType === "MP3" ? "MP3" : "MIDI";
|
|
|
- state.originSpeed = state.speed = data.playSpeed;
|
|
|
- const track = data.code || data.track;
|
|
|
- state.track = track ? track.replace(/ /g, "").toLocaleLowerCase() : "";
|
|
|
- state.enableNotation = data.notation ? true : false;
|
|
|
+ const setState = (data: any, index: number) => {
|
|
|
+ state.appName = "COLEXIU";
|
|
|
+ state.detailId = data.id;
|
|
|
+ state.xmlUrl = data.xmlFileUrl;
|
|
|
+ state.partIndex = index;
|
|
|
+ state.subjectId = data.musicSubject;
|
|
|
+ state.categoriesId = data.categoriesId;
|
|
|
+ state.categoriesName = data.musicTagNames;
|
|
|
+ state.enableEvaluation = data.canEvaluate ? true : false;
|
|
|
+ state.examSongId = data.id + "";
|
|
|
+ state.examSongName = data.musicSheetName;
|
|
|
+ // 解析扩展字段
|
|
|
+ if (data.extConfigJson) {
|
|
|
+ try {
|
|
|
+ state.extConfigJson = JSON.parse(data.extConfigJson as string);
|
|
|
+ } catch (error) {
|
|
|
+ console.error("解析扩展字段错误:", error);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ state.isOpenMetronome = data.mp3Type === "MP3_METRONOME" ? true : false;
|
|
|
+ // 曲子包含节拍器,就不开启节拍器
|
|
|
+ state.needTick = data.mp3Type === "MP3_METRONOME" ? false : true;
|
|
|
+ state.isShowFingering = data.showFingering ? true : false;
|
|
|
+ state.music = data.music;
|
|
|
+ state.accompany = data.accompany;
|
|
|
+ state.midiUrl = data.midiUrl;
|
|
|
+ state.parentCategoriesId = data.musicTag;
|
|
|
+ state.musicSheetCategoriesId = data.musicSheetCategoriesId;
|
|
|
+ state.playMode = data.audioType === "MP3" ? "MP3" : "MIDI";
|
|
|
+ state.originSpeed = state.speed = data.playSpeed;
|
|
|
+ const track = data.code || data.track;
|
|
|
+ state.track = track ? track.replace(/ /g, "").toLocaleLowerCase() : "";
|
|
|
+ state.enableNotation = data.notation ? true : false;
|
|
|
|
|
|
- // console.log("🚀 ~ state.subjectId:", state.subjectId, state.track as any , state.subjectId)
|
|
|
- // 是否打击乐
|
|
|
- // state.isPercussion =
|
|
|
- // state.subjectId == 23 ||
|
|
|
- // state.subjectId == 113 ||
|
|
|
- // state.subjectId == 121 ||
|
|
|
- // isRhythmicExercises();
|
|
|
+ // console.log("🚀 ~ state.subjectId:", state.subjectId, state.track as any , state.subjectId)
|
|
|
+ // 是否打击乐
|
|
|
+ // state.isPercussion =
|
|
|
+ // state.subjectId == 23 ||
|
|
|
+ // state.subjectId == 113 ||
|
|
|
+ // state.subjectId == 121 ||
|
|
|
+ // isRhythmicExercises();
|
|
|
|
|
|
- // 设置指法
|
|
|
- const code = mappingVoicePart(state.subjectId, "INSTRUMENT");
|
|
|
- state.fingeringInfo = subjectFingering(code);
|
|
|
- console.log("🚀 ~ state.fingeringInfo:", state.fingeringInfo, state.subjectId, state.track);
|
|
|
+ // 设置指法
|
|
|
+ const code = mappingVoicePart(state.subjectId, "INSTRUMENT");
|
|
|
+ state.fingeringInfo = subjectFingering(code);
|
|
|
+ console.log("🚀 ~ state.fingeringInfo:", state.fingeringInfo, state.subjectId, state.track);
|
|
|
|
|
|
- // 检测是否原音和伴奏都有
|
|
|
- if (!state.music || !state.accompany) {
|
|
|
- state.playSource = state.music ? "music" : "background";
|
|
|
- }
|
|
|
+ // 检测是否原音和伴奏都有
|
|
|
+ if (!state.music || !state.accompany) {
|
|
|
+ state.playSource = state.music ? "music" : "background";
|
|
|
+ }
|
|
|
|
|
|
- // 如果是PC端,放大曲谱
|
|
|
- state.platform = query.platform?.toLocaleUpperCase() || "";
|
|
|
- if (state.platform === IPlatform.PC) {
|
|
|
- state.zoom = query.zoom || 1.5;
|
|
|
- }
|
|
|
+ // 如果是PC端,放大曲谱
|
|
|
+ state.platform = query.platform?.toLocaleUpperCase() || "";
|
|
|
+ if (state.platform === IPlatform.PC) {
|
|
|
+ state.zoom = query.zoom || 1.5;
|
|
|
+ }
|
|
|
|
|
|
- //课堂乐器,默认简谱
|
|
|
- state.musicRenderType = EnumMusicRenderType.firstTone;
|
|
|
- };
|
|
|
+ //课堂乐器,默认简谱
|
|
|
+ state.musicRenderType = EnumMusicRenderType.firstTone;
|
|
|
+ };
|
|
|
|
|
|
- const setCustom = () => {
|
|
|
- if (state.extConfigJson.multitrack) {
|
|
|
- setGlobalData("multitrack", state.extConfigJson.multitrack);
|
|
|
- }
|
|
|
- };
|
|
|
+ const setCustom = () => {
|
|
|
+ if (state.extConfigJson.multitrack) {
|
|
|
+ setGlobalData("multitrack", state.extConfigJson.multitrack);
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- onMounted(() => {
|
|
|
- (window as any).appName = "colexiu";
|
|
|
- const id = query.id || "43554";
|
|
|
- Promise.all([sysMusicScoreAccompanimentQueryPage(id)]).then((values) => {
|
|
|
- getMusicInfo(values[0]);
|
|
|
- });
|
|
|
- api_setEventTracking();
|
|
|
- });
|
|
|
+ onMounted(() => {
|
|
|
+ (window as any).appName = "colexiu";
|
|
|
+ const id = query.id || "43554";
|
|
|
+ Promise.all([sysMusicScoreAccompanimentQueryPage(id)]).then((values) => {
|
|
|
+ getMusicInfo(values[0]);
|
|
|
+ });
|
|
|
+ api_setEventTracking();
|
|
|
+ });
|
|
|
|
|
|
- /** 渲染完成 */
|
|
|
- const handleRendered = (osmd: any) => {
|
|
|
- detailData.skeletonLoading = false;
|
|
|
- state.osmd = osmd;
|
|
|
- // 没有设置速度使用读取的速度
|
|
|
- if (state.originSpeed === 0) {
|
|
|
- state.originSpeed = state.speed = (osmd as any).bpm || osmd.Sheet.userStartTempoInBPM || 100;
|
|
|
- }
|
|
|
- const saveSpeed =
|
|
|
- (store.get("speeds") || {})[state.examSongId] ||
|
|
|
- (osmd as any).bpm ||
|
|
|
- osmd.Sheet.userStartTempoInBPM;
|
|
|
- // 加载本地缓存的速度
|
|
|
- if (saveSpeed) {
|
|
|
- handleSetSpeed(saveSpeed);
|
|
|
- }
|
|
|
- state.times = formateTimes(osmd);
|
|
|
- state.times = resetFrequency(state.times);
|
|
|
- state.times = setNoteHalfTone(state.times);
|
|
|
- console.log("🚀 ~ state.times:", state.times, state.subjectId);
|
|
|
- try {
|
|
|
- metronomeData.metro = new Metronome();
|
|
|
- metronomeData.metro.init(state.times);
|
|
|
- } catch (error) {}
|
|
|
- // 设置节拍器
|
|
|
- if (state.needTick) {
|
|
|
- const beatLengthInMilliseconds = (60 / state.speed) * 1000;
|
|
|
- // console.log(state.speed, osmd?.Sheet?.SheetPlaybackSetting?.beatLengthInMilliseconds , (60 / state.speed) * 1000)
|
|
|
- handleInitTick(
|
|
|
- beatLengthInMilliseconds,
|
|
|
- osmd?.Sheet?.SheetPlaybackSetting?.Rhythm?.Numerator || 4
|
|
|
- );
|
|
|
- }
|
|
|
- api_cloudLoading();
|
|
|
+ /** 渲染完成 */
|
|
|
+ const handleRendered = (osmd: any) => {
|
|
|
+ detailData.skeletonLoading = false;
|
|
|
+ state.osmd = osmd;
|
|
|
+ // 没有设置速度使用读取的速度
|
|
|
+ if (state.originSpeed === 0) {
|
|
|
+ state.originSpeed = state.speed = (osmd as any).bpm || osmd.Sheet.userStartTempoInBPM || 100;
|
|
|
+ }
|
|
|
+ const saveSpeed = (store.get("speeds") || {})[state.examSongId] || (osmd as any).bpm || osmd.Sheet.userStartTempoInBPM;
|
|
|
+ // 加载本地缓存的速度
|
|
|
+ if (saveSpeed) {
|
|
|
+ handleSetSpeed(saveSpeed);
|
|
|
+ }
|
|
|
+ state.times = formateTimes(osmd);
|
|
|
+ state.times = resetFrequency(state.times);
|
|
|
+ state.times = setNoteHalfTone(state.times);
|
|
|
+ console.log("🚀 ~ state.times:", state.times, state.subjectId);
|
|
|
+ try {
|
|
|
+ metronomeData.metro = new Metronome();
|
|
|
+ metronomeData.metro.init(state.times);
|
|
|
+ } catch (error) {}
|
|
|
+ // 设置节拍器
|
|
|
+ if (state.needTick) {
|
|
|
+ const beatLengthInMilliseconds = (60 / state.speed) * 1000;
|
|
|
+ // console.log(state.speed, osmd?.Sheet?.SheetPlaybackSetting?.beatLengthInMilliseconds , (60 / state.speed) * 1000)
|
|
|
+ handleInitTick(beatLengthInMilliseconds, osmd?.Sheet?.SheetPlaybackSetting?.Rhythm?.Numerator || 4);
|
|
|
+ }
|
|
|
+ api_cloudLoading();
|
|
|
|
|
|
- state.musicRendered = true;
|
|
|
+ state.musicRendered = true;
|
|
|
|
|
|
- evaluatCreateMusicPlayer();
|
|
|
- resetPlaybackToStart();
|
|
|
+ evaluatCreateMusicPlayer();
|
|
|
+ resetPlaybackToStart();
|
|
|
|
|
|
- pushAppMusic();
|
|
|
- };
|
|
|
- /** 指法配置 */
|
|
|
- const fingerConfig = computed<any>(() => {
|
|
|
- if (state.setting.displayFingering && state.fingeringInfo?.name) {
|
|
|
- if (state.fingeringInfo.direction === "transverse") {
|
|
|
- return {
|
|
|
- container: {
|
|
|
- paddingBottom: state.fingeringInfo.height,
|
|
|
- },
|
|
|
- fingerBox: {
|
|
|
- height: state.fingeringInfo.height,
|
|
|
- },
|
|
|
- };
|
|
|
- } else {
|
|
|
- return {
|
|
|
- container: {
|
|
|
- paddingRight: state.fingeringInfo.width,
|
|
|
- },
|
|
|
- fingerBox: {
|
|
|
- position: "absolute",
|
|
|
- width: state.fingeringInfo.width,
|
|
|
- height: "100%",
|
|
|
- right: 0,
|
|
|
- top: 0,
|
|
|
- },
|
|
|
- };
|
|
|
- }
|
|
|
- }
|
|
|
- return {
|
|
|
- container: {},
|
|
|
- fingerBox: {},
|
|
|
- };
|
|
|
- });
|
|
|
+ pushAppMusic();
|
|
|
+ };
|
|
|
+ /** 指法配置 */
|
|
|
+ const fingerConfig = computed<any>(() => {
|
|
|
+ if (state.setting.displayFingering && state.fingeringInfo?.name) {
|
|
|
+ if (state.fingeringInfo.direction === "transverse") {
|
|
|
+ return {
|
|
|
+ container: {
|
|
|
+ paddingBottom: state.platform === IPlatform.PC ? `calc(${state.fingeringInfo.height} + ${state.attendHideMenu ? "0px" : "1.8rem"})` : state.fingeringInfo.height,
|
|
|
+ },
|
|
|
+ fingerBox: {
|
|
|
+ height: state.fingeringInfo.height,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ return {
|
|
|
+ container: {
|
|
|
+ paddingRight: state.fingeringInfo.width,
|
|
|
+ },
|
|
|
+ fingerBox: {
|
|
|
+ position: "absolute",
|
|
|
+ width: state.fingeringInfo.width,
|
|
|
+ height: "100%",
|
|
|
+ right: 0,
|
|
|
+ top: 0,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ container: {},
|
|
|
+ fingerBox: {},
|
|
|
+ };
|
|
|
+ });
|
|
|
|
|
|
- // 监听指法显示
|
|
|
- watch(
|
|
|
- () => state.setting.displayFingering,
|
|
|
- () => {
|
|
|
- if (state.fingeringInfo.direction === "vertical") {
|
|
|
- nextTick(() => {
|
|
|
- resetMusicScore();
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- );
|
|
|
- watch(
|
|
|
- () => state.setting.soundEffect,
|
|
|
- () => {
|
|
|
- store.set("musicscoresetting", state.setting);
|
|
|
- }
|
|
|
- );
|
|
|
- /**播放状态改变时,向父页面发送事件 */
|
|
|
- const sendParentMessage = (playState: IAudioState) => {
|
|
|
- window.parent.postMessage(
|
|
|
- {
|
|
|
- api: "headerTogge",
|
|
|
- playState: playState,
|
|
|
- },
|
|
|
- "*"
|
|
|
- );
|
|
|
- };
|
|
|
- // 监听播放状态
|
|
|
- watch(
|
|
|
- () => state.playState,
|
|
|
- () => {
|
|
|
- if (state.platform != IPlatform.PC) {
|
|
|
- detailData.headerHide = state.playState === "play" ? true : false;
|
|
|
- }
|
|
|
- sendParentMessage(state.playState);
|
|
|
- }
|
|
|
- );
|
|
|
- /** 指法预览切换 */
|
|
|
- watch(
|
|
|
- () => detailData.fingerPreView,
|
|
|
- () => {
|
|
|
- console.log(2342);
|
|
|
- window.parent.postMessage(
|
|
|
- {
|
|
|
- api: "api_fingerPreView",
|
|
|
- state: detailData.fingerPreView,
|
|
|
- },
|
|
|
- "*"
|
|
|
- );
|
|
|
- }
|
|
|
- );
|
|
|
- onMounted(() => {
|
|
|
- window.addEventListener("resize", resetMusicScore);
|
|
|
- });
|
|
|
- onBeforeUnmount(() => {
|
|
|
- window.removeEventListener("resize", resetMusicScore);
|
|
|
- });
|
|
|
- const browsInfo = browser();
|
|
|
- const handleOpenFignerView = () => {
|
|
|
- if (!query.modelType) {
|
|
|
- detailData.orientation = state.fingeringInfo.orientation || 0;
|
|
|
- api_setRequestedOrientation(detailData.orientation);
|
|
|
- }
|
|
|
- // const url = `${
|
|
|
- // /(192|localhost)/.test(location.origin)
|
|
|
- // ? "http://192.168.3.114:3000/instrument.html"
|
|
|
- // : location.origin + location.pathname
|
|
|
- // }#/view-figner`;
|
|
|
- // console.log("🚀 ~ url:", url);
|
|
|
- // api_openWebView({
|
|
|
- // url: url,
|
|
|
- // orientation: state.fingeringInfo.orientation || 0,
|
|
|
- // });
|
|
|
+ // 监听指法显示
|
|
|
+ watch(
|
|
|
+ () => state.setting.displayFingering,
|
|
|
+ () => {
|
|
|
+ if (state.fingeringInfo.direction === "vertical") {
|
|
|
+ nextTick(() => {
|
|
|
+ resetMusicScore();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ watch(
|
|
|
+ () => state.setting.soundEffect,
|
|
|
+ () => {
|
|
|
+ store.set("musicscoresetting", state.setting);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ /**播放状态改变时,向父页面发送事件 */
|
|
|
+ const sendParentMessage = (playState: IAudioState) => {
|
|
|
+ window.parent.postMessage(
|
|
|
+ {
|
|
|
+ api: "headerTogge",
|
|
|
+ playState: playState,
|
|
|
+ },
|
|
|
+ "*"
|
|
|
+ );
|
|
|
+ };
|
|
|
+ // 监听播放状态
|
|
|
+ watch(
|
|
|
+ () => state.playState,
|
|
|
+ () => {
|
|
|
+ if (state.platform != IPlatform.PC) {
|
|
|
+ detailData.headerHide = state.playState === "play" ? true : false;
|
|
|
+ }
|
|
|
+ sendParentMessage(state.playState);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ /** 指法预览切换 */
|
|
|
+ watch(
|
|
|
+ () => detailData.fingerPreView,
|
|
|
+ () => {
|
|
|
+ console.log(2342);
|
|
|
+ window.parent.postMessage(
|
|
|
+ {
|
|
|
+ api: "api_fingerPreView",
|
|
|
+ state: detailData.fingerPreView,
|
|
|
+ },
|
|
|
+ "*"
|
|
|
+ );
|
|
|
+ }
|
|
|
+ );
|
|
|
+ onMounted(() => {
|
|
|
+ window.addEventListener("resize", resetMusicScore);
|
|
|
+ });
|
|
|
+ onBeforeUnmount(() => {
|
|
|
+ window.removeEventListener("resize", resetMusicScore);
|
|
|
+ });
|
|
|
+ const browsInfo = browser();
|
|
|
+ const handleOpenFignerView = () => {
|
|
|
+ if (!query.modelType) {
|
|
|
+ detailData.orientation = state.fingeringInfo.orientation || 0;
|
|
|
+ api_setRequestedOrientation(detailData.orientation);
|
|
|
+ }
|
|
|
+ // const url = `${
|
|
|
+ // /(192|localhost)/.test(location.origin)
|
|
|
+ // ? "http://192.168.3.114:3000/instrument.html"
|
|
|
+ // : location.origin + location.pathname
|
|
|
+ // }#/view-figner`;
|
|
|
+ // console.log("🚀 ~ url:", url);
|
|
|
+ // api_openWebView({
|
|
|
+ // url: url,
|
|
|
+ // orientation: state.fingeringInfo.orientation || 0,
|
|
|
+ // });
|
|
|
|
|
|
- if (state.playState === "play") {
|
|
|
- togglePlay("paused");
|
|
|
- setTimeout(() => {
|
|
|
- detailData.fingerPreView = true;
|
|
|
- }, 500);
|
|
|
- return;
|
|
|
- }
|
|
|
- detailData.fingerPreView = true;
|
|
|
- };
|
|
|
- const handleCloseFignerView = () => {
|
|
|
- if (!query.modelType && detailData.orientation == 1) {
|
|
|
- api_setRequestedOrientation(0);
|
|
|
- }
|
|
|
- detailData.fingerPreView = false;
|
|
|
- detailData.fingerPreViewGuide = false;
|
|
|
- };
|
|
|
- return () => (
|
|
|
- <div
|
|
|
- class={[
|
|
|
- styles.detail,
|
|
|
- state.setting.eyeProtection && "eyeProtection",
|
|
|
- state.platform === IPlatform.PC && styles.PC,
|
|
|
- ]}
|
|
|
- style={{
|
|
|
- paddingLeft: detailData.paddingLeft,
|
|
|
- opacity: state.setting.camera ? `${state.setting.cameraOpacity / 100}` : "",
|
|
|
- }}
|
|
|
- >
|
|
|
- <Transition name="van-fade">
|
|
|
- {detailData.skeletonLoading && (
|
|
|
- <div class={styles.skeleton}>
|
|
|
- <Skeleton row={8} />
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </Transition>
|
|
|
- <div class={[styles.headHeight, detailData.headerHide && styles.headHide]}>
|
|
|
- {state.musicRendered && <HeaderTop />}
|
|
|
- </div>
|
|
|
- <div
|
|
|
- id="scrollContainer"
|
|
|
- style={{ ...fingerConfig.value.container, height: detailData.headerHide ? "100vh" : "" }}
|
|
|
- class={[
|
|
|
- styles.container,
|
|
|
- !state.setting.displayCursor && "hideCursor",
|
|
|
- browsInfo.xiaomi && styles.xiaomi,
|
|
|
- ]}
|
|
|
- onClick={(e: Event) => {
|
|
|
- if (state.playState === "play" && state.platform != IPlatform.PC) {
|
|
|
- detailData.headerHide = !detailData.headerHide;
|
|
|
- }
|
|
|
- }}
|
|
|
- >
|
|
|
- {/* 曲谱渲染 */}
|
|
|
- {!detailData.isLoading && <MusicScore onRendered={handleRendered} />}
|
|
|
+ if (state.playState === "play") {
|
|
|
+ togglePlay("paused");
|
|
|
+ setTimeout(() => {
|
|
|
+ detailData.fingerPreView = true;
|
|
|
+ }, 500);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ detailData.fingerPreView = true;
|
|
|
+ };
|
|
|
+ const handleCloseFignerView = () => {
|
|
|
+ if (!query.modelType && detailData.orientation == 1) {
|
|
|
+ api_setRequestedOrientation(0);
|
|
|
+ }
|
|
|
+ detailData.fingerPreView = false;
|
|
|
+ detailData.fingerPreViewGuide = false;
|
|
|
+ };
|
|
|
+ return () => (
|
|
|
+ <div
|
|
|
+ class={[styles.detail, state.setting.eyeProtection && "eyeProtection", state.platform === IPlatform.PC && styles.PC]}
|
|
|
+ style={{
|
|
|
+ paddingLeft: detailData.paddingLeft,
|
|
|
+ opacity: state.setting.camera ? `${state.setting.cameraOpacity / 100}` : "",
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Transition name="van-fade">
|
|
|
+ {detailData.skeletonLoading && (
|
|
|
+ <div class={styles.skeleton}>
|
|
|
+ <Skeleton row={8} />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </Transition>
|
|
|
+ <div class={[styles.headHeight, detailData.headerHide && styles.headHide]}>{state.musicRendered && <HeaderTop />}</div>
|
|
|
+ <div
|
|
|
+ id="scrollContainer"
|
|
|
+ style={{ ...fingerConfig.value.container, height: detailData.headerHide ? "100vh" : "" }}
|
|
|
+ class={[styles.container, !state.setting.displayCursor && "hideCursor", browsInfo.xiaomi && styles.xiaomi]}
|
|
|
+ onClick={(e: Event) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ if (state.playState === "play" && state.platform != IPlatform.PC) {
|
|
|
+ detailData.headerHide = !detailData.headerHide;
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {/* 曲谱渲染 */}
|
|
|
+ {!detailData.isLoading && <MusicScore onRendered={handleRendered} />}
|
|
|
|
|
|
- {/* 指法 */}
|
|
|
- {state.setting.displayFingering && state.fingeringInfo?.name && (
|
|
|
- <div style={{ ...fingerConfig.value.fingerBox }}>
|
|
|
- <Fingering onOpen={() => handleOpenFignerView()} />
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </div>
|
|
|
+ {/* 指法 */}
|
|
|
+ {state.setting.displayFingering && state.fingeringInfo?.name && (
|
|
|
+ <div style={{ ...fingerConfig.value.fingerBox }}>
|
|
|
+ <Fingering onOpen={() => handleOpenFignerView()} />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
|
|
|
- {/* 节拍器 */}
|
|
|
- {state.needTick && <Tick />}
|
|
|
+ {/* 节拍器 */}
|
|
|
+ {state.needTick && <Tick />}
|
|
|
|
|
|
- {/* 播放 */}
|
|
|
- {!detailData.isLoading && <AudioList />}
|
|
|
+ {/* 播放 */}
|
|
|
+ {!detailData.isLoading && <AudioList />}
|
|
|
|
|
|
- {/* 评测 */}
|
|
|
- {state.modeType === "evaluating" && (
|
|
|
- <>
|
|
|
- <Evaluating />
|
|
|
- {evaluatingData.rendered && <EvaluatModel />}
|
|
|
- </>
|
|
|
- )}
|
|
|
+ {/* 评测 */}
|
|
|
+ {state.modeType === "evaluating" && (
|
|
|
+ <>
|
|
|
+ <Evaluating />
|
|
|
+ {evaluatingData.rendered && <EvaluatModel />}
|
|
|
+ </>
|
|
|
+ )}
|
|
|
|
|
|
- {/* 跟练模式 */}
|
|
|
- {state.modeType === "follow" && (
|
|
|
- <>
|
|
|
- <FollowPractice />
|
|
|
- <FollowModel />
|
|
|
- </>
|
|
|
- )}
|
|
|
+ {/* 跟练模式 */}
|
|
|
+ {state.modeType === "follow" && (
|
|
|
+ <>
|
|
|
+ <FollowPractice />
|
|
|
+ <FollowModel />
|
|
|
+ </>
|
|
|
+ )}
|
|
|
|
|
|
- {state.musicRendered && (
|
|
|
- <>
|
|
|
- {/* 统计训练时长 */}
|
|
|
- {storeData.isApp && <RecordingTime />}
|
|
|
- {/* 作业 */}
|
|
|
- {query.workRecord && <WorkIndex />}
|
|
|
- {/* 曲谱列表 */}
|
|
|
- {state.playState == "play" ||
|
|
|
- followData.start ||
|
|
|
- evaluatingData.startBegin ||
|
|
|
- query.workRecord ||
|
|
|
- query.modelType ||
|
|
|
- state.platform === IPlatform.PC ? null : (
|
|
|
- <TheMusicList />
|
|
|
- )}
|
|
|
- </>
|
|
|
- )}
|
|
|
+ {state.musicRendered && (
|
|
|
+ <>
|
|
|
+ {/* 统计训练时长 */}
|
|
|
+ {storeData.isApp && <RecordingTime />}
|
|
|
+ {/* 作业 */}
|
|
|
+ {query.workRecord && <WorkIndex />}
|
|
|
+ {/* 曲谱列表 */}
|
|
|
+ {state.playState == "play" || followData.start || evaluatingData.startBegin || query.workRecord || query.modelType || state.platform === IPlatform.PC ? null : <TheMusicList />}
|
|
|
+ </>
|
|
|
+ )}
|
|
|
|
|
|
<Popup
|
|
|
zIndex={5050}
|
