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

import { defineComponent, Transition, Teleport, onMounted, onUnmounted } from 'vue'
import runtime, * as RuntimeUtils from '/src/pages/detail/runtime'
import detailState from '/src/pages/detail/state'
import { Button } from 'vant'
import { evaluatingRef, startButtonShow } from './'
import ButtonIcon from './icon'
import { useMenu, useWiredHeadsetCheck } from '../uses'
import iconEvaluatingStart from './icons/icon-evaluatingStart.png'
import styles from './index.module.less'

export default defineComponent({
  name: 'ButtonsPlayer',
  setup() {
    const [wiredStatus] = useWiredHeadsetCheck()

    const reset = () => {
      sendMessage()
      if (detailState.activeTick > -1) {
        return
      }
      RuntimeUtils.setCurrentTime(0)
      RuntimeUtils.ended(new Event('ended'))
    }

    // 播放进入的圆周长
    const circleLength = Math.floor(2 * Math.PI * 16)

    const changePlay = (res: any) => {
      if (res?.data?.api === 'setPlayState') {
        console.log('父页面的切换事件', res.data, runtime.playState)
        if (runtime.playState == 'play') {
          RuntimeUtils.setPlayState()
        }
        RuntimeUtils.stopTick()
      }
    }
    const sendMessage = () => {
      window.parent.postMessage(
        {
          api: 'headerTogge',
          playState: runtime.playState
        },
        '*'
      )
    }
    onMounted(() => {
      window.addEventListener('message', changePlay)
    })
    onUnmounted(() => {
      window.removeEventListener('message', changePlay)
    })

    return () => {
      const playProgress = (runtime.currentTimeNum / runtime.durationNum) * circleLength
      return (
        <Teleport to="body">
          <div class={styles.player} id="globalPlayer">
            <Transition name="start" duration={300}>
              {wiredStatus.value && !evaluatingRef.value?.connentLoading && startButtonShow.value && (
                <Button
                  style={{ backgroundImage: `url(${iconEvaluatingStart})` }}
                  class={[styles.button, styles.start]}
                  onClick={() => {
                    startButtonShow.value = false
                    evaluatingRef.value?.togglePlay?.()
                  }}
                >
                </Button>
              )}
            </Transition>
            {!runtime.evaluatingStatus && (
              <>
                {(runtime.playState === 'pause' || runtime.playState === 'suspend') &&
                  runtime.currentTimeNum > 0 &&
                  !detailState.sectionStatus && (
                    <Button class={[styles.button, styles.fullbtn]} onClick={reset}>
                      <ButtonIcon key="reset" name="reset" />
                    </Button>
                  )}
                <Button
                  class={[styles.button, styles.fullbtn]}
                  style={{
                    marginLeft: '14px',
                  }}
                  disabled={detailState.activeDetail?.isAppPlay && detailState.midiPlayIniting}
                  onClick={() => {
                    RuntimeUtils.setPlayState()
                    sendMessage()
                  }}
                >
                  <div class={styles.schedule}>
                    <div class={styles.schedule}>
                      {runtime.playState === 'play' ? (
                        <ButtonIcon key="pause" name="pause" />
                      ) : (
                        <ButtonIcon key="play" name="play" />
                      )}
                      {runtime.currentTimeNum > 0 && !detailState.sectionStatus && (
                        <svg
                          class={styles.ring}
                          width="40"
                          height="40"
                          viewBox="0 0 40 40"
                          xmlns="http://www.w3.org/200/svg"
                        >
                          <circle
                            cx="20"
                            cy="20"
                            r="16"
                            fill="none"
                            stroke="#fff"
                            stroke-width="2"
                            stroke-linecap="round"
                          />
                          <circle
                            class={styles.fillring}
                            cx="20"
                            cy="20"
                            r="16"
                            fill="none"
                            stroke="#FFC459"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-dasharray={playProgress + ',10000'}
                          />
                        </svg>
                      )}
                    </div>
                  </div>
                </Button>
              </>
            )}
          </div>
        </Teleport>
      )
    }
  },
})