orchestra-music-score/src/subpages/colexiu/buttons/evaluating.tsx

import { Button, Toast } from 'vant'
import { defineComponent, Directive, onBeforeUnmount, onMounted, Ref, ref, Teleport } from 'vue'
import '@dotlottie/player-component'
import ButtonIcon from './icon'
import detailState from '/src/pages/detail/state'
import SettingState from '/src/pages/detail/setting-state'
import appState from '/src/state'
import { Fraction } from '/osmd-extended/src'
import {
  IPostMessage,
  listenerMessage,
  postMessage,
  promisefiyPostMessage,
  removeListenerMessage,
} from '/src/helpers/native-message'
import { browser, getRequestHostname } from '/src/helpers/utils'
import runtime, * as RuntimeUtils from '/src/pages/detail/runtime'
import { getBoundingBoxByverticalNote, getNoteByMeasuresSlursStart, getParentNote } from '/src/pages/detail/helpers'
import { useClientType, useOriginSearch } from '../uses'
import { startButtonShow } from './index'
import { getLeveByScoreMeasure } from '/src/pages/detail/evaluating/helper'
import Evaluating, { evaluatingShow } from '../popups/evaluating'
// @ts-ignore
import StartEvaluating from './dotlotties/start-evaluating.lottie?url'
import iconStartEvaluating from './dotlotties/StartEvaluating.png'
import iconRecord from './dotlotties/iconRecord.png'
// @ts-ignore
import Recording from './dotlotties/recording2.lottie?url'
import request from '/src/helpers/request'
import styles from './index.module.less'

let backtime = 0

const initBehaviorId = '' + new Date().valueOf()
const evaluating = ref(false)
const playStatus: Ref<'connecting' | 'play' | 'stop'> = ref('stop')
const endloading = ref(false)
const connentLoading = ref(false)
const playUrl: Ref<string> = ref('')

const endResult = ref(null)

export const animate: Directive = {
  mounted: (el: HTMLElement) => {
    el.addEventListener('click', (evt: Event) => {
      let element = evt.target as HTMLElement
      element.classList.add(...['animate__animated', 'animate__tada'])
    })
    el.addEventListener('animationend', (evt: Event) => {
      let element = evt.target as HTMLElement
      element.classList.remove(...['animate__animated', 'animate__tada'])
    })
  },
}

const browserInfo = browser()

/**
 * 默认按照442计算的音符频率，此处转化为按照设置进行调整
 * @param num 频率
 * @returns 转化后频率
 */
const formatPitch = (num?: number): number => {
  if (!num) {
    return -1
  }
  if (SettingState.sett.hertz && SettingState.sett.hertz !== 442) {
    return (num / 442) * SettingState.sett.hertz
  }
  return num
}

const formatTimes = () => {
  const difftime = detailState.times?.[0]?.difftime || 0
  let ListenMode = false
  let dontEvaluatingMode = false
  let skip = false
  const datas = []
  for (let index = 0; index < detailState.times.length; index++) {
    const item = detailState.times[index]
    const note = getNoteByMeasuresSlursStart(item)
    // console.log(item.nodeElement)
    const rate = runtime.speed / detailState.baseSpeed //1
    // const fixtime = 0
    const start = difftime + (item.sourceRelativeTime || item.relativeTime)
    const end = difftime + (item.sourceRelaEndtime || item.relaEndtime)
    const isStaccato =
      typeof note.voiceEntry.isStaccato === 'function' ? note.voiceEntry.isStaccato() : note.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 = detailState.times[index + 1]
    // console.log("noteinfo", note.noteElement.isRestFlag && !!note.stave && !!nextNote)
    if (skip && (note.stave || !note.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: formatPitch(item.noteElement?.pitch?.frequency),
      nextFrequency: formatPitch(item.noteElement?.pitch?.nextFrequency),
      prevFrequency: formatPitch(item.noteElement?.pitch?.prevFrequency),
      // 重复的情况index会自然累加,render的index是谱面渲染的index
      measureIndex: note.measureOpenIndex,
      measureRenderIndex: note.noteElement.sourceMeasure.measureListIndex,
      // dontEvaluating: ListenMode,
      dontEvaluating: ListenMode || dontEvaluatingMode || item.skipMode,
      musicalNotesIndex: item.i,
      denominator: note.noteElement?.Length.denominator,
      isOrnament: !!note?.voiceEntry?.ornamentContainer,
    }
    datas.push(data)
  }
  // console.log("🚀 ~ datas", datas)
  return datas
}
const connect = async () => {
  const search = useOriginSearch()
  connentLoading.value = true
  const behaviorId = sessionStorage.getItem('behaviorId') || search.behaviorId || initBehaviorId
  const rate = runtime.speed / detailState.baseSpeed //1

  const content = {
    musicXmlInfos: formatTimes(),
    // id: search.id,
    subjectId: detailState.subjectId,
    detailId: detailState.activeDetail?.id,
    examSongId: search.id,
    xmlUrl: detailState?.activeDetail?.xmlUrl,
    partIndex: detailState.partIndex,
    behaviorId,
    platform: 'WEB',
    clientId: 'STUDENT',
    hertz: SettingState.sett.hertz,
    feature: 'EVALUATION',
    practiceSource: search.unitId ? 'UNIT_TEST' : 'PRACTICE',
    // 这里定义的是数字但是因为是通过input输入所以强制转化一次
    reactionTimeMs: parseFloat('' + SettingState.eva.reactionTimeMs) || 0,
    speed: runtime.speed,
    heardLevel: SettingState.eva.difficulty,
    beatLength: Math.round((RuntimeUtils.getFixTime(detailState.times[0].beatSpeed) * 1000) / rate),
  }
  const clientType = useClientType()
  if (clientType === 'student') {
    content.clientId = 'STUDENT'
  } else if (clientType === 'teacher') {
    content.clientId = 'TEACHER'
  } else {
    content.clientId = 'BACKEND'
  }
  if (browserInfo.android) {
    content.platform = 'ANDROID'
  }
  if (browserInfo.ios) {
    content.platform = 'IOS'
  }
  // console.log("评测数据", content)
  const evt = await promisefiyPostMessage({
    api: 'startEvaluating',
    content: content,
  })
  if (evt?.content?.reson) {
    Toast.fail({
      message: evt?.content?.reson,
    })
    connentLoading.value = false
    throw evt
  }

  connentLoading.value = false
}

const sendOffsetTime = (offsetTime: number) => {
  postMessage(
    {
      api: 'proxyServiceMessage',
      content: {
        header: {
          commond: 'audioPlayStart',
          type: 'SOUND_COMPARE',
        },
        body: {
          offsetTime,
        },
      },
    },
    () => {
      backtime = 0
    }
  )
}

const cancelTheEvaluation = () => {
  const search = useOriginSearch()
  RuntimeUtils.resetPlayStatus()
  RuntimeUtils.clearIntervalTimeline()
  RuntimeUtils.setCurrentTime(0)
  playStatus.value = 'stop'
  postMessage(
    {
      api: 'endEvaluating',
      content: {
        musicScoreId: search.id,
      },
    },
    (evt) => {
      evaluating.value = false
      // RuntimeUtils.setCaptureMode()
      Toast.clear()
    }
  )
}

const stopPlay = (show: boolean = true) => {
  console.log('调用stopPlay')
  if (show) {
    // Toast({
    //   duration: 0,
    //   message: '评分中...',
    //   type: 'loading',
    // })
  }
  startButtonShow.value = true
  cancelTheEvaluation()
}
export const evaluatStopPlay = stopPlay

const startPlay = () => {
  console.log('连接服务成功,开始播放', new Date().getTime() - runtime.clickTime)
  // synced = false
  if (!SettingState.eva.mute) {
    RuntimeUtils.changeAllMode()
  } else {
    RuntimeUtils.changeMode('background')
  }
  startButtonShow.value = false
  // RuntimeUtils.changeSpeed(90)
  RuntimeUtils.setPlayState()
}

const setPlayer = async () => {
  console.log('调用setPlayer')
  // this.startloading = true
  runtime.clickTime = new Date().getTime()
  RuntimeUtils.resetPlayStatus()
  runtime.evaluatingTips = false
  if (detailState.isPauseRecording) {
    evaluating.value = false
    // this.startloading = false
    startPlay()
    return
  }
  detailState.evaluatings = {}
  RuntimeUtils.setCurrentTime(0)
  const hint = Toast({
    duration: 0,
    message: '服务连接中...',
    type: 'loading',
  })
  try {
    await connect()
    startPlay()
    setTimeout(() => {
      Toast.clear()
      hint.close()
    }, 100)
  } catch (error) {
    runtime.evaluatingStatus = false
    Toast.clear()
  }
}

const togglePlay = () => {
  if (detailState.isPauseRecording) {
    evaluating.value = false
    startPlay()
    return
  }
  if (evaluating.value) {
    stopPlay()
  } else {
    setPlayer()
  }
}

const cancelEvaluating = (data?: IPostMessage) => {
  // this.starting = false
  if (data?.content.reson) {
    // Toast.fail({
    //   message: data?.content?.reson,
    // })
    stopPlay()
  }
}

const timeupdate = () => {
  console.log('播放事件被触发', playUrl.value, evaluating.value)
  if (playUrl.value) {
    const nowTime = new Date().getTime()
    console.log('第一次播放时间', nowTime)
    // synced = true
    const time = runtime.audiosInstance?.audios[playUrl.value].currentTime
    console.log('已播放时长: ', time * 1000)
    console.log('不减掉已播放时间: ', nowTime - backtime)
    const delayTime = nowTime - backtime - time * 1000
    console.log('真正播放延迟', delayTime)
    // 蓝牙耳机延迟一点发送消息确保在录音后面
    setTimeout(() => {
      sendOffsetTime(delayTime)
    }, 220)
  }
}

/**
 * 播放器停止事件
 */
const playerStop = () => {
  // alert('stop' + this.endloading)
  console.log('playerStop播放器停止事件', endloading.value)
  if (endloading.value) {
    return
  }
  playStatus.value = 'stop'
  endloading.value = true
  startButtonShow.value = true
  RuntimeUtils.resetPlayStatus()
  RuntimeUtils.clearIntervalTimeline()
  RuntimeUtils.setCurrentTime(0)
  Toast({
    duration: 0,
    message: '评分中...',
    type: 'loading',
  })
  // const route = (this as any).$route
  postMessage(
    {
      api: 'endEvaluating',
      content: {
        musicScoreId: useOriginSearch().id,
      },
    },
    (evt) => {
      console.log('调用endEvaluating结束', evt)
      endloading.value = false
      evaluating.value = false
      // RuntimeUtils.setCaptureMode()
    }
  )
}
export const evaluatPlayerStop = playerStop

const endevent = (evt: Event) => {
  if ((evt.target as HTMLAudioElement)?.src === playUrl.value && playStatus.value === 'play') {
    playerStop()
    canSubmit.value = true
  }
  if (detailState.isAppPlay) {
    playerStop()
    canSubmit.value = true
  }
}

const start = () => {
  playStatus.value = 'play'
  if (detailState.isPauseRecording) {
    postMessage(
      {
        api: 'resumeRecording',
      },
      () => {
        evaluating.value = true
        detailState.isPauseRecording = false
        RuntimeUtils.setCaptureMode()
      }
    )
    return
  }
  console.log('开始录音', new Date().getTime())
  postMessage(
    {
      api: 'startRecording',
    },
    () => {
      console.log('开始录音回调时间', new Date().getTime())
      backtime = new Date().getTime()
      evaluating.value = true
      console.log('midiUrl', detailState.activeDetail?.midiUrl)
      if (detailState.activeDetail?.midiUrl) {
        setTimeout(() => {
          sendOffsetTime(0)
        }, 220)
      }
    }
  )
}

/**
 * 活动接口，Url中有设置并且仅在学生端提评分交数据
 */
const submitEvaluationScore = async (data: any) => {
  if (detailState.setting && detailState.setting.mode === 'EVALUATING') {
    if (!canSubmit.value) {
      Toast('请完成整首曲目评测！')
      return
    }
    try {
      await request.post('/activity/evaluationScore', {
        requestType: 'json',
        data: {
          userId: appState.user.userId,
          score: data.score,
          ...detailState.setting.submitData,
        },
      })
    } catch (error) {}
    canSubmit.value = false
  }
}

/** 活动使用，只有在全部评测完成后才能提交，避免只是一小节就高分的情况 */
const canSubmit = ref(false)

/** 有单元测验时,存储分数缓存 */
const setUnitReuslt = () => {
  // 评测结束,如果是单元测验
  const search = useOriginSearch()
  if (search.unitId) {
    postMessage({
      api: 'setCache',
      content: {
        key: 'h5-orchestra-unit',
        value: JSON.stringify({
          musicId: search.id || '',
          unitId: search.unitId || '',
          score: (endResult.value as any)?.score || 0,
        }),
      },
    })
  }
}

const sendResult = (evt?: IPostMessage) => {
  console.log('评测返回', evt?.content)
  if (evt?.content) {
    const data = evt?.content?.body
    if (evt?.content.header.commond === 'overall') {
      // console.log(evt)
      Toast.clear()
      endResult.value = data
      evaluatingShow.value = true
      submitEvaluationScore(data)
      setUnitReuslt()
    } else if (evt?.content.header.commond === 'checkDone') {
      // 此处已经在校音中单独监听不做处理
    } else if (evt?.content.header.commond === 'checking') {
      // 此处已经在校音中单独监听不做处理
    } else {
      const getBeforeNote = (index: number) => {
        while (index >= 0) {
          const item = detailState.times[index]
          if (item.stave) {
            return item
          }
          index--
        }
      }
      const setEvaluatings = (note: any, data: any, dontTransition = false) => {
        const startNote = getBoundingBoxByverticalNote(note)
        console.log(detailState.evaluatings, startNote)
        detailState.evaluatings = {
          ...detailState.evaluatings,
          [startNote.measureIndex]: {
            ...startNote,
            ...getLeveByScoreMeasure(data.score),
            score: data.score,
            dontTransition,
          },
        }
      }

      for (let index = 0; index < detailState.times.length; index++) {
        let time = detailState.times[index]
        if (data.measureRenderIndex == time.noteElement.sourceMeasure.measureListIndex) {
          if (!time.stave) {
            const ntime = getBeforeNote(index)
            // console.log('ntime', ntime)
            if (ntime) {
              time = ntime
            }
          }
          if (!time.noteElement.tie) {
            setEvaluatings(time, data)
          } else {
            for (const item of time.noteElement.tie.notes) {
              const note = getParentNote(item)
              if (!note) continue
              setEvaluatings(
                note,
                data,
                item.NoteToGraphicalNoteObjectId !== time.noteElement.tie.StartNote?.NoteToGraphicalNoteObjectId
              )
            }
          }
          break
        }
      }
    }
  }
}

const onProgress = () => {
  // console.log(runtime.currentTimeNum, detailState.times[detailState.times.length - 1]?.time - 2, detailState.times)
  if (runtime.currentTimeNum >= detailState.times[detailState.times.length - 1]?.time - 2) {
    canSubmit.value = true
  }
}

const cloudMetronome = (evt: any) => {
  startButtonShow.value = true
}

export default defineComponent({
  name: 'ColexiuButtonEvaluating',
  directives: { animate },
  setup(props, { expose }) {
    onMounted(async () => {
      runtime.evaluatingTips = true
      detailState.section = []
      detailState.sectionStatus = false
      RuntimeUtils.changeAllMode()
      playUrl.value = runtime.songs.background || (runtime.songs.music as string)
      runtime.audiosInstance?.audios[playUrl.value]?.addEventListener('play', timeupdate)
      runtime.audiosInstance?.audios[playUrl.value]?.addEventListener('timeupdate', onProgress)
      RuntimeUtils.event.on('next-click', playerStop)
      RuntimeUtils.event.on('ended', endevent)
      listenerMessage('sendResult', sendResult)
      listenerMessage('cancelEvaluating', cancelEvaluating)
      listenerMessage('cloudTimeUpdae', onProgress)
      RuntimeUtils.event.on('tickDestroy', cloudMetronome)
      RuntimeUtils.event.on('tickEnd', start)
      await RuntimeUtils.pause()
      RuntimeUtils.setCurrentTime(0)
    })

    onBeforeUnmount(() => {
      runtime.audiosInstance?.audios[playUrl.value]?.removeEventListener('play', timeupdate)
      runtime.audiosInstance?.audios[playUrl.value]?.removeEventListener('timeupdate', onProgress)
      RuntimeUtils.event.off('next-click', playerStop)
      RuntimeUtils.event.off('ended', endevent)
      RuntimeUtils.event.off('tickDestroy', cloudMetronome)
      removeListenerMessage('sendResult', sendResult)
      removeListenerMessage('cancelEvaluating', cancelEvaluating)
      removeListenerMessage('cloudTimeUpdae', onProgress)
      RuntimeUtils.event.off('tickEnd', start)
    })

    expose({
      setPlayer,
      startPlay,
      stopPlay,
      togglePlay,
      playerStop,
      evaluating,
      connentLoading,
      playStatus,
      cancelTheEvaluation,
    })

    return () => {
      return (
        <>
          {/* <Button
            v-animate
            class={[styles.button, styles.hasText]}
            style={{ display: detailState.frozenMode ? 'none' : '' }}
            onClick={() => {
              runtime.evaluatingStatus = false
              if (playStatus.value === 'play' || playStatus.value === 'connecting') {
                cancelTheEvaluation()
              }
            }}
          >
            <ButtonIcon name="practise" />
            <span>练习</span>
          </Button> */}
          {/* 评测 */}
          <Evaluating data={endResult.value} />

          {!evaluating.value ? (
            <Teleport to="body" key="StartEvaluating">
              <div class={styles.dialogueBox}>
                <div class={styles.dialogue}>
                  <div>
                    演奏前请调整好乐器，保证最佳演奏状态。<span class={styles.triangle}></span>
                  </div>
                </div>
                <img class={styles.dialogueIcon} src={iconStartEvaluating} />
                {/* <dotlottie-player src={StartEvaluating} autoplay loop class={styles.animation} /> */}
              </div>
            </Teleport>
          ) : (
            <Teleport to="body" key="Recording">
              <div class={styles.dialogueBox}>
                <div class={styles.inRadio}>收音中...</div>
                <img class={styles.inRadioIcon} src={iconRecord} />
                {/* <dotlottie-player src={Recording} autoplay loop class={styles.animation} /> */}
              </div>
            </Teleport>
          )}
        </>
      )
    }
  },
})