orchestra-music-score/src/subpages/colexiu/index.tsx

import { defineComponent, onMounted, onUnmounted, reactive, Ref, ref, watch, nextTick, Transition } from 'vue'
import MusicSheet from '/src/music-sheet'
import store from 'store'
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 { getAllNodes, getDuration } from '/src/pages/detail/helpers'
import SettingState from '/src/pages/detail/setting-state'
import {
  useMidi,
  useOriginSearch,
  useFee,
  useCamera,
  useUser,
  useFingering,
  useDetail,
  useSpecialShapedScreen,
  useSuspendPlay,
  useXml,
  useActivity,
  useConfigMusicSheetFreeRate,
} from './uses'
import Buttons, { followRef, IModelType, modelType, onChangeModelType } from './buttons'
import ButtonsPlayer from './buttons/player'
import Permission from './popups/permission'
import MusicList from './music-list'
import TickPopup from '/src/pages/detail/tick-popup'
import SoundEffect, { soundEffectShow } from './popups/sound-effect'
import HelperPopup from './popups/helper'
import { OpenSheetMusicDisplay, PageFormat } from '/osmd-extended/src'
import Fingering from './fingering'
import { Popup, Skeleton, Toast } from 'vant'
import Empty from '/src/components/empty'
import formatId from './fingering/format-id'
import { browser } from '/src/helpers/utils'
import { postMessage } from '/src/helpers/native-message'
import { svgtopng } from './helpers'
import { restPromptMain } from '/src/helpers/restPrompt'
import ProductJson from './popups/productJson'
import { useRoute } from 'vue-router'
import styles from './index.module.less'
import Tips from './tips'
import AfterClassTraining from './afterClassTraining'
import ModelWraper from './buttons/model-wraper'
import Follow from './popups/follow'
import UnitTest from './unitTest'
import { renderError } from './App'

// json化曲谱的note信息和svg
export const musicJSON = reactive({
  json: '',
  svg: '',
  rended: false, // 渲染完成
})

/** 暴露曲谱实例方便其他地方重新绘制曲谱 */
export const MusicSheetRef = ref()

export default defineComponent({
  name: 'Colexiu',
  setup() {
    const search = useOriginSearch()
    const browserInfo = browser()
    const tipShow = ref(false)
    const route = useRoute()
    // console.log("🚀 ~ route", route.query, search)
    detailState.midiPlayIniting = true
    const renderLoading = ref(true)
    const compulsionEvaluating = ref(false)
    const score = ref<string>('')
    const fingeringStatus: Ref<string> = ref('init')
    const fingeringWidth = ref('')
    const activeType = ref<object>({})
    const fingeringDetail = ref<ITypeContentItem | object>({})
    const [detailStatus, detail] = useDetail(search.id as string)

    /** 监听详情的获取状态，设置指法等信息 */
    watch(detailStatus, async () => {
      if (detailStatus.value === 'success' && detail.value.xmlFileUrl) {
        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)
        fingeringStatus.value = status.value as string
        fingeringWidth.value = width.value as string
        activeType.value = atype.value as object
        detailState.frozenMode = frozenMode.value
        compulsionEvaluating.value = compulsion.value
        const xml = await useXml(detail.value.xmlFileUrl, detail.value)
        if (!xml.value) {
          renderLoading.value = false
          renderError.value = true
          return
        } else {
          score.value = xml.value
        }
      }
    })

    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 () {
        if (!valid) {
          return false
        }
        valid = false
        setTimeout(() => {
          fn()
          valid = true
        }, delay)
      }
    }

    const settingFingeringChange = throttle(() => {
      // console.log('settingFingeringChange')
      const { direction } = fingeringDetail.value as ITypeContentItem
      if (direction === 'vertical') {
        // Toast('加载中，请稍后...')
        setTimeout(() => {
          MusicSheetRef.value.reRender()
        }, 16)
      }
    }, 300)

    // useUser()

    useSpecialShapedScreen()

    useSuspendPlay()

    //需要生成缓存数据的条件
    const isProductJson = ref(false)
    const productRef = ref()

    /**结束全屏动画 */
    const endFullLoading = () => {
      // @ts-ignore
      window.isLoading = false
      postMessage({
        api: 'cloudLoading',
        content: {
          show: false,
          type: 'fullscreen',
        },
      })
    }

    /** 当渲染完成后的回调 */
    const onRerender = async (osmd: OpenSheetMusicDisplay) => {
      endFullLoading()
      detailState.initRendered = true
      console.time('获取数据')
      runtime.osmd = osmd
      // 设置速度
      //@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
      detailState.baseSpeed = saveSpeed || detail.value.playSpeed || bpm || 100
      detailState.code = detail.value?.code || ''
      detailState.activeDetail.originalSpeed = detailState.baseSpeed
      // 设置成全部是特殊曲谱
      // detailState.isSpecialBookCategory = true
      if (detailState.renderType === 'native') {
        detailState.times = getAllNodes(osmd)
      }
      isProductJson.value =
        search.modeType === 'json' ||
        !detailState.activeDetail?.musicSvg ||
        !detailState.activeDetail?.musicJianSvg ||
        !detailState.activeDetail?.musicFirstSvg
      if (isProductJson.value) {
        const { numerator, denominator } = getDuration(osmd)
        try {
          musicJSON.json = JSON.stringify({
            musicId: detailState.activeDetail.id,
            musicSheetName: encodeURIComponent(detailState.activeDetail.musicSheetName),
            osmd: {
              product: true,
              bpm: osmd?.Sheet?.userStartTempoInBPM || (osmd as any)?.bpm,
              numerator,
              denominator,
              scoreSize: SettingState.sett.scoreSize || 'middle',
            },
            times: detailState.times,
          })
          // console.log('生成缓存数据', musicJSON)
          musicJSON.svg = document.getElementById('osmdSvgPage1')?.outerHTML || ''
          nextTick(() => {
            musicJSON.svg = document.getElementById('osmdSvgPage1')?.outerHTML || ''
            musicJSON.rended = true
            productRef.value?.autoProduct()
          })
          // console.log("🚀 ~ detailState.times", document.getElementById('osmdSvgPage1'))
        } catch (error) {
          console.log(error)
        }
      }
      console.timeEnd('获取数据')
      console.log('🚀 ~ detailState.times', detailState.times)

      const songEndTime = detailState.times[detailState.times.length - 1 || 0]?.endtime || 0
      if (detailState.isAppPlay) {
        const durationNum = songEndTime
        useMidi(durationNum, detail.value.midiUrl)
      }
      if (!runtime.durationNum) {
        runtime.durationNum = songEndTime
      }
      // const freeRate = await useConfigMusicSheetFreeRate()
      // detailState.freeRate = freeRate.value
      useCamera()
      RuntimeUtils.changeSpeed(detailState.activeSpeed)
      if (((detailState.setting?.resets || []) as string[]).includes('SPEED')) {
        if (detailState.activeDetail) {
          RuntimeUtils.changeSpeed(detailState.activeDetail?.originalSpeed)
        }
      }
      RuntimeUtils.setAudioInit()
      const _modelType: IModelType = route.query.modelType as IModelType
      if (_modelType) {
        modelType.value = _modelType
      }
      renderLoading.value = false
      try {
        restPromptMain(detailState.times)
      } catch (error) {}

      // 如果进来为评测模式,直接设置成评测模式
      if (_modelType && _modelType == 'evaluation') {
        runtime.evaluatingStatus = true
        nextTick(() => {
          onChangeModelType(_modelType)
        })
      }

      nextTick(() => {
        useFee()
      })
    }

    const onStartRender = async () => {
      renderLoading.value = true
    }
    const onRenderError = () => {
      endFullLoading()
      renderError.value = true
      renderLoading.value = false
    }

    return () => {
      const loading = renderLoading.value || detailStatus.value === 'loading'
      const error = renderError.value || detailStatus.value === 'error'
      // console.log('fingeringStatus', fingeringStatus.value, fingeringWidth.value, fingeringDetail.value)

      const { width, paddingRight, paddingLeft, direction } = fingeringDetail.value as ITypeContentItem

      const fingeringInited = fingeringStatus.value !== 'init'
      const calcWidh = width || '0px'
      const calcRight = paddingRight || '0px'
      const calcLeft = paddingLeft || '0px'
      const isVertical = direction === 'vertical'
      const calcRightWidth = direction === 'vertical' ? '20px' : '0px'
      const needFingering = fingeringStatus.value === 'show' && SettingState.sett.fingering && !runtime.evaluatingStatus
      const needFingeringWidth = direction === 'vertical' && needFingering
      const musicSheetStyle = {
        ...(isVertical && { margin: 'auto', marginRight: 0 }),
        width:
          fingeringDetail.value && needFingeringWidth
            ? `calc(100% - ${calcWidh} - ${calcRight} - ${calcLeft} - ${calcRightWidth})`
            : '',
      }
      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`
                  : '',
              }}
            >
              {!!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,
                    }}
                    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' : '',
                      }}
                      code={detail.value.code}
                    />
                  )}
                </>
              )}
              {modelType.value === 'follow' && <Follow ref={followRef} />}
            </div>
            {!renderLoading.value && <ButtonsPlayer />}
            {/* 节拍器弹窗 */}
            <TickPopup score={score.value} />
            <Permission />

            {/* 投屏帮助 */}
            <HelperPopup />
            {/** 曲目列表 */}
            <MusicList />
            {/* 保存json */}
            <ProductJson ref={productRef} />

            {/* 后台课后训练小节选择 */}
            <AfterClassTraining />

            {/* 模式选择 */}
            <Transition
              name="van-slide-up"
              onAfterEnter={() => {
                tipShow.value = true
              }}
            >
              {!renderLoading.value && modelType.value == 'init' && (
                <ModelWraper onChangeModelType={onChangeModelType} />
              )}
            </Transition>

            {/* 引导 */}
            {tipShow.value && !error && <Tips />}
          </div>
          {/* 效音 */}
          <Transition name="van-slide-up">{soundEffectShow.value && <SoundEffect />}</Transition>

          {/* 单元测验选段 */}
          {/* {!renderLoading.value && <UnitTest />} */}
        </>
      )
    }
  },
})