|
@@ -1,11 +1,9 @@
|
|
|
import { defineComponent, onMounted, onUnmounted, reactive, Ref, ref, watch, nextTick, Transition } from 'vue'
|
|
|
import MusicSheet from '/src/music-sheet'
|
|
|
import store from 'store'
|
|
|
-// import { throttle } from 'lodash'
|
|
|
import runtime, * as RuntimeUtils from '/src/pages/detail/runtime'
|
|
|
import { typeById, ITypeContentItem } from '/src/constant/fingering-colexiu'
|
|
|
import detailState from '/src/pages/detail/state'
|
|
|
-import EvaluatingTips from '/src/pages/detail/evaluating-tips'
|
|
|
import { getAllNodes, getDuration } from '/src/pages/detail/helpers'
|
|
|
import SettingState from '/src/pages/detail/setting-state'
|
|
|
import {
|
|
@@ -45,6 +43,7 @@ import Tips from './tips'
|
|
|
import AfterClassTraining from './afterClassTraining'
|
|
|
import ModelWraper from './buttons/model-wraper'
|
|
|
import Follow from './popups/follow'
|
|
|
+import UnitTest from './unitTest'
|
|
|
|
|
|
// json化曲谱的note信息和svg
|
|
|
export const musicJSON = reactive({
|
|
@@ -63,7 +62,7 @@ export default defineComponent({
|
|
|
const browserInfo = browser()
|
|
|
const tipShow = ref(false)
|
|
|
const route = useRoute()
|
|
|
- console.log("🚀 ~ route", route.query, search)
|
|
|
+ // console.log("🚀 ~ route", route.query, search)
|
|
|
detailState.midiPlayIniting = true
|
|
|
const renderLoading = ref(true)
|
|
|
const renderError = ref(false)
|
|
@@ -74,11 +73,10 @@ export default defineComponent({
|
|
|
const activeType = ref<object>({})
|
|
|
const fingeringDetail = ref<ITypeContentItem | object>({})
|
|
|
const [detailStatus, detail] = useDetail(search.id as string)
|
|
|
- const pages = new PageFormat(650, 884)
|
|
|
+
|
|
|
/** 监听详情的获取状态,设置指法等信息 */
|
|
|
watch(detailStatus, async () => {
|
|
|
if (detailStatus.value === 'success' && detail.value.xmlFileUrl) {
|
|
|
- pushAppMusic(detail.value)
|
|
|
fingeringDetail.value = typeById[formatId(detail.value.code || '')] || {}
|
|
|
const { showFingering, frozenMode, compulsionEvaluating: compulsion } = useActivity()
|
|
|
const [status, width, atype] = await useFingering(showFingering.value ? detail.value.code : undefined)
|
|
@@ -87,8 +85,6 @@ export default defineComponent({
|
|
|
activeType.value = atype.value as object
|
|
|
detailState.frozenMode = frozenMode.value
|
|
|
compulsionEvaluating.value = compulsion.value
|
|
|
- }
|
|
|
- if (detailStatus.value === 'success' && detail.value.xmlFileUrl) {
|
|
|
const xml = await useXml(detail.value.xmlFileUrl, detail.value)
|
|
|
if (!xml.value) {
|
|
|
renderLoading.value = false
|
|
@@ -100,6 +96,24 @@ export default defineComponent({
|
|
|
}
|
|
|
})
|
|
|
|
|
|
+ onMounted(() => {
|
|
|
+ ;(window as any).appName = 'colexiu'
|
|
|
+ RuntimeUtils.event.on('settingFingeringChange', settingFingeringChange)
|
|
|
+ postMessage({
|
|
|
+ api: 'setEventTracking',
|
|
|
+ content: {
|
|
|
+ type: 'klx_xiaokuAI',
|
|
|
+ },
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ onUnmounted(() => {
|
|
|
+ RuntimeUtils.event.off('settingFingeringChange', settingFingeringChange)
|
|
|
+ if (typeof runtime?.audiosInstance?.destroy === 'function') {
|
|
|
+ runtime.audiosInstance?.destroy()
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
function throttle(fn: any, delay: number) {
|
|
|
let valid = true
|
|
|
return function () {
|
|
@@ -125,24 +139,6 @@ export default defineComponent({
|
|
|
}
|
|
|
}, 300)
|
|
|
|
|
|
- onMounted(() => {
|
|
|
- ;(window as any).appName = 'colexiu'
|
|
|
- RuntimeUtils.event.on('settingFingeringChange', settingFingeringChange)
|
|
|
- postMessage({
|
|
|
- api: 'setEventTracking',
|
|
|
- content: {
|
|
|
- type: 'klx_xiaokuAI',
|
|
|
- },
|
|
|
- })
|
|
|
- })
|
|
|
-
|
|
|
- onUnmounted(() => {
|
|
|
- RuntimeUtils.event.off('settingFingeringChange', settingFingeringChange)
|
|
|
- if (typeof runtime?.audiosInstance?.destroy === 'function') {
|
|
|
- runtime.audiosInstance?.destroy()
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
useUser()
|
|
|
|
|
|
useSpecialShapedScreen()
|
|
@@ -153,11 +149,10 @@ export default defineComponent({
|
|
|
const isProductJson = ref(false)
|
|
|
const productRef = ref()
|
|
|
|
|
|
- /** 当渲染完成后的回调 */
|
|
|
- const onRerender = async (osmd: OpenSheetMusicDisplay) => {
|
|
|
+ /**结束全屏动画 */
|
|
|
+ const endFullLoading = () => {
|
|
|
// @ts-ignore
|
|
|
window.isLoading = false
|
|
|
- console.log('onRerender', '渲染结束')
|
|
|
postMessage({
|
|
|
api: 'cloudLoading',
|
|
|
content: {
|
|
@@ -165,13 +160,18 @@ export default defineComponent({
|
|
|
type: 'fullscreen',
|
|
|
},
|
|
|
})
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 当渲染完成后的回调 */
|
|
|
+ const onRerender = async (osmd: OpenSheetMusicDisplay) => {
|
|
|
+ endFullLoading()
|
|
|
detailState.initRendered = true
|
|
|
- // console.log('onRerender', osmd)
|
|
|
- // console.log(search)
|
|
|
console.time('获取数据')
|
|
|
runtime.osmd = osmd
|
|
|
// 设置速度
|
|
|
- const saveSpeed = (store.get('speeds') || {})[search.id as string]
|
|
|
+ console.log(store.get('speeds22'))
|
|
|
+ //@ts-ignore
|
|
|
+ const saveSpeed = (store.get('speeds') || {})[search.id]
|
|
|
const bpm = (osmd as any).bpm || osmd.Sheet.userStartTempoInBPM
|
|
|
|
|
|
detailState.activeSpeed = saveSpeed || detail.value.playSpeed || bpm || 100
|
|
@@ -260,29 +260,11 @@ export default defineComponent({
|
|
|
renderLoading.value = true
|
|
|
}
|
|
|
const onRenderError = () => {
|
|
|
- // @ts-ignore
|
|
|
- window.isLoading = false
|
|
|
- postMessage({
|
|
|
- api: 'cloudLoading',
|
|
|
- content: {
|
|
|
- show: false,
|
|
|
- type: 'fullscreen',
|
|
|
- },
|
|
|
- })
|
|
|
+ endFullLoading()
|
|
|
renderError.value = true
|
|
|
renderLoading.value = false
|
|
|
}
|
|
|
|
|
|
- //给app传伴奏
|
|
|
- const pushAppMusic = (detail: any) => {
|
|
|
- postMessage({
|
|
|
- api: 'cloudAccompanyMessage',
|
|
|
- content: {
|
|
|
- accompanyUrl: detail.audioFileUrl || detail.metronomeUrl || detail.url || '',
|
|
|
- },
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
return () => {
|
|
|
const loading = renderLoading.value || detailStatus.value === 'loading'
|
|
|
const error = renderError.value || detailStatus.value === 'error'
|
|
@@ -306,117 +288,117 @@ export default defineComponent({
|
|
|
: '',
|
|
|
}
|
|
|
return (
|
|
|
- <div
|
|
|
- class={[
|
|
|
- styles.container,
|
|
|
- SettingState.sett.eyeProtection && 'eyeProtection',
|
|
|
- browserInfo.android && 'android',
|
|
|
- ]}
|
|
|
- >
|
|
|
- <Transition name="van-slide-down">{!renderLoading.value && <Buttons class={styles.buttons} />}</Transition>
|
|
|
+ <>
|
|
|
<div
|
|
|
- id="colexiu-detail-music-sheet"
|
|
|
- class={[styles.musicSheet, { evaluating: runtime.evaluatingStatus || modelType.value === 'follow' }]}
|
|
|
- style={{
|
|
|
- paddingLeft: detailState.isSpecialShapedScreen ? detailState.notchHeight / 2 + 'px' : 'auto',
|
|
|
- paddingBottom:
|
|
|
- needFingering && (fingeringDetail.value as any).height ? (fingeringDetail.value as any).height : '40px',
|
|
|
- background: SettingState.sett.camera
|
|
|
- ? `rgba(${SettingState.sett.eyeProtection ? '253,244,229' : '255,255,255'} ,${
|
|
|
- SettingState.sett.opacity / 100
|
|
|
- }) !important`
|
|
|
- : '',
|
|
|
- }}
|
|
|
+ class={[
|
|
|
+ styles.container,
|
|
|
+ SettingState.sett.eyeProtection && 'eyeProtection',
|
|
|
+ browserInfo.android && 'android',
|
|
|
+ ]}
|
|
|
>
|
|
|
- {!!detail.value.musicSheetName && (
|
|
|
- <div style={{ width: !renderLoading.value ? musicSheetStyle.width : '' }} class={styles.headTitle}>
|
|
|
- {detail.value.musicSheetName}
|
|
|
- </div>
|
|
|
- )}
|
|
|
- <Skeleton class={styles.skeleton} rowWidth="80%" title loading={detailStatus.value === 'loading'} />
|
|
|
- <Skeleton class={styles.skeleton} row={6} loading={renderLoading.value} />
|
|
|
- {score.value && fingeringInited && (
|
|
|
- <>
|
|
|
- <MusicSheet
|
|
|
- ref={MusicSheetRef}
|
|
|
- style={musicSheetStyle}
|
|
|
- score={score.value}
|
|
|
- EngravingRules={
|
|
|
- search.pageType === 'multiple'
|
|
|
- ? {
|
|
|
- PageFormat: pages,
|
|
|
- DYMusicScoreType: SettingState.sett.type,
|
|
|
- }
|
|
|
- : {
|
|
|
- DYMusicScoreType: SettingState.sett.type,
|
|
|
- }
|
|
|
- }
|
|
|
- opotions={{
|
|
|
- drawTitle: false,
|
|
|
- drawComposer: true,
|
|
|
- drawLyricist: false,
|
|
|
- drawMetronomeMarks: true,
|
|
|
- drawMeasureNumbers: true,
|
|
|
- autoResize: false,
|
|
|
- }}
|
|
|
- onStartRender={onStartRender}
|
|
|
- onRenderError={onRenderError}
|
|
|
- onRerender={onRerender}
|
|
|
- />
|
|
|
- {needFingering && (
|
|
|
- <Fingering
|
|
|
- style={{
|
|
|
- background: SettingState.sett.camera
|
|
|
- ? `rgba(${SettingState.sett.eyeProtection ? '253,244,229' : '255,255,255'} ,${
|
|
|
- SettingState.sett.opacity / 100
|
|
|
- })`
|
|
|
- : '',
|
|
|
- boxShadow: SettingState.sett.camera ? 'none' : '',
|
|
|
+ <Transition name="van-slide-down">{!renderLoading.value && <Buttons class={styles.buttons} />}</Transition>
|
|
|
+ <div
|
|
|
+ id="colexiu-detail-music-sheet"
|
|
|
+ class={[styles.musicSheet, { evaluating: runtime.evaluatingStatus || modelType.value === 'follow' }]}
|
|
|
+ style={{
|
|
|
+ paddingLeft: detailState.isSpecialShapedScreen ? detailState.notchHeight / 2 + 'px' : 'auto',
|
|
|
+ paddingBottom:
|
|
|
+ needFingering && (fingeringDetail.value as any).height
|
|
|
+ ? (fingeringDetail.value as any).height
|
|
|
+ : '40px',
|
|
|
+ background: SettingState.sett.camera
|
|
|
+ ? `rgba(${SettingState.sett.eyeProtection ? '253,244,229' : '255,255,255'} ,${
|
|
|
+ SettingState.sett.opacity / 100
|
|
|
+ }) !important`
|
|
|
+ : '',
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {!!detail.value.musicSheetName && (
|
|
|
+ <div style={{ width: !renderLoading.value ? musicSheetStyle.width : '' }} class={styles.headTitle}>
|
|
|
+ {detail.value.musicSheetName}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ <Skeleton class={styles.skeleton} rowWidth="80%" title loading={detailStatus.value === 'loading'} />
|
|
|
+ <Skeleton class={styles.skeleton} row={6} loading={renderLoading.value} />
|
|
|
+ {score.value && fingeringInited && (
|
|
|
+ <>
|
|
|
+ <MusicSheet
|
|
|
+ ref={MusicSheetRef}
|
|
|
+ style={musicSheetStyle}
|
|
|
+ score={score.value}
|
|
|
+ EngravingRules={{
|
|
|
+ DYMusicScoreType: SettingState.sett.type,
|
|
|
+ }}
|
|
|
+ opotions={{
|
|
|
+ drawTitle: false,
|
|
|
+ drawComposer: true,
|
|
|
+ drawLyricist: false,
|
|
|
+ drawMetronomeMarks: true,
|
|
|
+ drawMeasureNumbers: true,
|
|
|
+ autoResize: false,
|
|
|
}}
|
|
|
- code={detail.value.code}
|
|
|
+ onStartRender={onStartRender}
|
|
|
+ onRenderError={onRenderError}
|
|
|
+ onRerender={onRerender}
|
|
|
/>
|
|
|
- )}
|
|
|
- </>
|
|
|
- )}
|
|
|
- {modelType.value === 'follow' && <Follow ref={followRef} />}
|
|
|
- </div>
|
|
|
- {!renderLoading.value && <ButtonsPlayer />}
|
|
|
- {/* 节拍器弹窗 */}
|
|
|
- <TickPopup score={score.value} />
|
|
|
- <Permission />
|
|
|
- {/* 效音 */}
|
|
|
- <SoundEffect />
|
|
|
- {/* 投屏帮助 */}
|
|
|
- <HelperPopup />
|
|
|
- {/** 曲目列表 */}
|
|
|
- <MusicList />
|
|
|
- {/* 保存json */}
|
|
|
- <ProductJson ref={productRef} />
|
|
|
+ {needFingering && (
|
|
|
+ <Fingering
|
|
|
+ style={{
|
|
|
+ background: SettingState.sett.camera
|
|
|
+ ? `rgba(${SettingState.sett.eyeProtection ? '253,244,229' : '255,255,255'} ,${
|
|
|
+ SettingState.sett.opacity / 100
|
|
|
+ })`
|
|
|
+ : '',
|
|
|
+ boxShadow: SettingState.sett.camera ? 'none' : '',
|
|
|
+ }}
|
|
|
+ code={detail.value.code}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ {modelType.value === 'follow' && <Follow ref={followRef} />}
|
|
|
+ </div>
|
|
|
+ {!renderLoading.value && <ButtonsPlayer />}
|
|
|
+ {/* 节拍器弹窗 */}
|
|
|
+ <TickPopup score={score.value} />
|
|
|
+ <Permission />
|
|
|
+ {/* 效音 */}
|
|
|
+ <SoundEffect />
|
|
|
+ {/* 投屏帮助 */}
|
|
|
+ <HelperPopup />
|
|
|
+ {/** 曲目列表 */}
|
|
|
+ <MusicList />
|
|
|
+ {/* 保存json */}
|
|
|
+ <ProductJson ref={productRef} />
|
|
|
|
|
|
- {/* 后台课后训练小节选择 */}
|
|
|
- <AfterClassTraining />
|
|
|
+ {/* 后台课后训练小节选择 */}
|
|
|
+ <AfterClassTraining />
|
|
|
|
|
|
- {/* 模式选择 */}
|
|
|
- <Transition
|
|
|
- name="van-slide-up"
|
|
|
- onAfterEnter={() => {
|
|
|
- tipShow.value = true
|
|
|
- console.log('2342')
|
|
|
- }}
|
|
|
- >
|
|
|
- {!renderLoading.value && modelType.value == 'init' && <ModelWraper onChangeModelType={onChangeModelType} />}
|
|
|
- </Transition>
|
|
|
+ {/* 模式选择 */}
|
|
|
+ <Transition
|
|
|
+ name="van-slide-up"
|
|
|
+ onAfterEnter={() => {
|
|
|
+ tipShow.value = true
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {!renderLoading.value && modelType.value == 'init' && (
|
|
|
+ <ModelWraper onChangeModelType={onChangeModelType} />
|
|
|
+ )}
|
|
|
+ </Transition>
|
|
|
|
|
|
- {/* 引导 */}
|
|
|
- {tipShow.value && <Tips />}
|
|
|
+ {/* 引导 */}
|
|
|
+ {tipShow.value && !error && <Tips />}
|
|
|
|
|
|
- {/* 加载错误 */}
|
|
|
- {error && (
|
|
|
- <div class={styles.errorWrap}>
|
|
|
- <Empty />
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </div>
|
|
|
+ {/* 加载错误 */}
|
|
|
+ {error && (
|
|
|
+ <div class={styles.errorWrap}>
|
|
|
+ <Empty />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ {/* 单元测验选段 */}
|
|
|
+ {/* {!renderLoading.value && <UnitTest />} */}
|
|
|
+ </>
|
|
|
)
|
|
|
}
|
|
|
},
|