orchestra-app/src/views/exercise-after-class/index.tsx

import { Icon, showConfirmDialog, Slider, Swipe, SwipeItem } from 'vant'
import {
  defineComponent,
  onMounted,
  reactive,
  onUnmounted,
  ref,
  watch,
  Transition,
  nextTick,
  computed
} from 'vue'
import styles from './index.module.less'
import 'plyr/dist/plyr.css'
import request from '@/helpers/request'
import { state } from '@/state'
import { useRoute, useRouter } from 'vue-router'
import iconBack from '../coursewarePlay/image/back.svg'
import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
import iconLoop from '../coursewarePlay/image/icon-loop.svg'
import iconLoopActive from '../coursewarePlay/image/icon-loop-active.svg'
import iconplay from '../coursewarePlay/image/icon-play.svg'
import iconpause from '../coursewarePlay/image/icon-pause.svg'
import iconVideobg from '../coursewarePlay/image/icon-videobg.png'
import { browser, getSecondRPM } from '@/helpers/utils'
import qs from 'query-string'
import { Vue3Lottie } from 'vue3-lottie'
import playLoadData from '../coursewarePlay/datas/data.json'

const materialType = {
  视频: 'VIDEO',
  图片: 'IMG',
  曲目: 'SONG'
}

export default defineComponent({
  name: 'exercise-after-class',
  setup() {
    /** 设置播放容器 16:9 */
    const parentContainer = reactive({
      width: '100vw'
    })
    const setContainer = () => {
      let min = Math.min(screen.width, screen.height)
      let max = Math.max(screen.width, screen.height)
      let width = min * (16 / 9)
      if (width > max) {
        parentContainer.width = '100vw'
        return
      } else {
        parentContainer.width = width + 'px'
      }
    }
    const handleInit = (type = 0) => {
      setContainer()
      // 横屏
      postMessage({
        api: 'setRequestedOrientation',
        content: {
          orientation: type
        }
      })
      // 头,包括返回箭头
      postMessage({
        api: 'setTitleBarVisibility',
        content: {
          status: type
        }
      })
      // 安卓的状态栏
      postMessage({
        api: 'setStatusBarVisibility',
        content: {
          isVisibility: type
        }
      })
    }
    handleInit()
    onUnmounted(() => {
      handleInit(1)
    })

    const route = useRoute()
    const router = useRouter()
    const query = route.query
    const browserInfo = browser()
    const headeRef = ref()
    const data = reactive({
      videoData: null as any,
      details: [] as any,
      trainings: [] as any[],
      trainingTimes: 0,
      itemList: [] as any,
      showHead: true,
      loading: true,
      recordLoading: false
    })
    const activeData = reactive({
      nowTime: 0,
      model: true, // 遮罩
      timer: null as any,
      item: null as any
    })
    const getDetail = async () => {
      data.itemList = []
      let details = []
      try {
        const res: any = await request.get(
          state.platformApi + `/lessonTraining/courseSchedule/${route.query.courseScheduleId}`,
          {
            hideLoading: true
          }
        )
        if (Array.isArray(res?.data)) {
          const studentLevel = state.user?.data?.studentLevel || 1
          details = res.data.find((n: any) => n.studentLevel === studentLevel)?.details || []
        }
      } catch (error) {
        console.log('error')
      }
      if (details.length) {
        details.forEach((n: any) => {
          try {
            n.trainingConfigJson = JSON.parse(n.lessonTrainingTemp.trainingConfigJson)
          } catch (error) {
            n.trainingConfigJson = {}
          }
        })
        data.details = details
        // console.log("🚀 ~ data.details", data.details)
        data.videoData = details.find((n: any) => n.materialId == route.query.materialId) || null
        // console.log('🚀 ~ data.videoData', data.videoData)
        data.itemList = [
          {
            ...data.videoData,
            id: data.videoData?.materialId || '',
            loaded: false,
            currentTime: 0,
            duration: 100,
            paused: true,
            loop: false,
            videoEle: null,
            timer: null,
            muted: true, // 静音
            autoplay: true //自动播放
          }
        ]
      }
    }
    // 获取课后练习记录
    const trainingRecord = async () => {
      try {
        const res: any = await request.post(
          state.platformApi +
            `/studentLessonTraining/trainingRecord/${query.courseScheduleId}?userId=${state.user?.data?.id}`,
          {
            hideLoading: true
          }
        )
        if (Array.isArray(res?.data.trainings)) {
          data.trainings = res.data.trainings
          handleExerciseCompleted()
        }
      } catch (error) {}
    }
    const currentNum = computed(() => {
      const item = data.trainings.find((n: any) => n.materialId == data.videoData?.materialId)
      // console.log(item)
      if (item) handleExerciseCompleted()
      return item?.trainingTimes || 0
    })
    onMounted(async () => {
      await getDetail()
      trainingRecord()
    })
    // 返回
    const goback = () => {
      postMessage({ api: 'back' })
    }

    const swipeRef = ref()
    const popupData = reactive({
      firstIndex: 0,
      open: false,
      activeIndex: -1,
      tabActive: '',
      tabName: '',
      itemActive: '',
      itemName: ''
    })

    // 达到指标,记录
    const addTrainingRecord = async (m: any) => {
      if (data.recordLoading) return
      console.log('记录观看次数')
      data.recordLoading = true
      const query = route.query
      const body = {
        materialType: 'VIDEO',
        record: {
          sourceTime: m.duration,
          clientType: state.platformType,
          feature: 'LESSON_TRAINING',
          deviceType: browserInfo.android ? 'ANDROID' : browserInfo.isApp ? 'IOS' : 'WEB'
        },
        courseScheduleId: query.courseScheduleId,
        lessonTrainingId: query.lessonTrainingId,
        materialId: query.materialId
      }
      try {
        const res: any = await request.post(
          state.platformApi + '/studentLessonTraining/lessonTrainingRecord',
          {
            data: body,
            hideLoading: true
          }
        )
        trainingRecord()
      } catch (error) {}
      data.recordLoading = false
    }
    // 停止所有的播放
    const handleStopVideo = () => {
      data.itemList.forEach((m: any) => {
        m.videoEle?.pause()
      })
    }

    // 判断练习是否完成
    const handleExerciseCompleted = () => {
      if (
        currentNum.value != 0 &&
        currentNum.value + '' === data.videoData?.trainingConfigJson?.practiceTimes
      ) {
        // handleStopVideo()
        const itemIndex = data.details.findIndex(
          (n: any) => n.materialId == data.videoData?.materialId
        )
        const isLastIndex = itemIndex === data.details.length - 1
        showConfirmDialog({
          title: '课后训练',
          message: '你已完成该练习~',
          confirmButtonColor: 'var(--van-primary)',
          confirmButtonText: isLastIndex ? '完成' : '下一题',
          cancelButtonText: '继续'
        })
          .then(() => {
            if (!isLastIndex) {
              const nextItem = data.details[itemIndex + 1]
              if (nextItem?.type === materialType.视频) {
                data.videoData = nextItem
                data.itemList = [
                  {
                    ...nextItem,
                    id: nextItem?.materialId || '',
                    currentTime: 0,
                    duration: 100,
                    paused: true,
                    loop: false,
                    videoEle: null,
                    timer: null,
                    muted: true, // 静音
                    autoplay: true //自动播放
                  }
                ]
                nextTick(() => {
                  console.log(data.itemList[0].videoEle)
                })
              }
              if (nextItem?.type === materialType.曲目) {
                handleInit(1)
                goback()
                const parmas = qs.stringify({
                  id: nextItem.content,
                  courseScheduleId: query.courseScheduleId,
                  lessonTrainingId: query.lessonTrainingId,
                  materialId: nextItem.materialId
                })
                let src = `${location.origin}/orchestra-music-score/?` + parmas
                postMessage({
                  api: 'openAccompanyWebView',
                  content: {
                    url: src,
                    orientation: 0,
                    isHideTitle: true,
                    statusBarTextColor: false,
                    isOpenLight: true
                  }
                })
              }
            } else {
              postMessage({ api: 'goBack' })
            }
          })
          .catch(() => {
            data.details[itemIndex].currentTime = 0
          })
      }
    }

    return () => (
      <div class={styles.playContent}>
        <div class={styles.coursewarePlay} style={{ width: parentContainer.width }}>
          <Swipe
            style={{ height: '100%' }}
            ref={swipeRef}
            showIndicators={false}
            loop={false}
            vertical
            lazyRender={true}
            touchable={false}
            duration={0}
          >
            {data.itemList.map((m: any, mIndex: number) => {
              return (
                <SwipeItem>
                  <>
                    <div
                      class={styles.itemDiv}
                      onClick={() => {
                        clearTimeout(m.timer)
                        activeData.model = !activeData.model
                      }}
                    >
                      <video
                        playsinline="false"
                        preload="auto"
                        class="player"
                        poster={iconVideobg}
                        data-vid={m.id}
                        src={m.content}
                        loop={m.loop}
                        autoplay={m.autoplay}
                        muted={m.muted}
                        onLoadedmetadata={async (e: Event) => {
                          const videoEle = e.target as unknown as HTMLVideoElement
                          m.duration = videoEle.duration
                          m.videoEle = videoEle
                          m.loaded = true
                          console.time('播放')
                          videoEle.play()
                        }}
                        onTimeupdate={(e: Event) => {
                          if (!m.loaded) return
                          const videoEle = e.target as unknown as HTMLVideoElement
                          m.currentTime = videoEle.currentTime
                        }}
                        onPlay={() => {
                          console.log('播放')
                          // 播放
                          m.paused = false
                          if (m.muted) {
                            m.muted = false
                            m.videoEle.pause()
                          }
                        }}
                        onPause={() => {
                          console.log('暂停')
                          //暂停
                          m.paused = true
                        }}
                        onEnded={() => addTrainingRecord(m)}
                      >
                        <source src={m.content} type="video/mp4" />
                      </video>
                    </div>
                    <Transition name="bottom">
                      {activeData.model && !m.muted && (
                        <div class={styles.bottomFixedContainer}>
                          <div class={styles.time}>
                            <span>{getSecondRPM(m.currentTime)}</span>
                            <span>{getSecondRPM(m.duration)}</span>
                          </div>
                          <div class={styles.slider}>
                            {m.duration && (
                              <Slider
                                buttonSize={16}
                                modelValue={m.currentTime}
                                min={0}
                                max={m.duration}
                              />
                            )}
                          </div>

                          <div class={styles.actions}>
                            <div class={styles.actionBtn}>
                              {m.paused ? (
                                <img
                                  src={iconplay}
                                  onClick={(e: Event) => {
                                    clearTimeout(m.timer)
                                    m.videoEle?.play()
                                    m.paused = false
                                    m.timer = setTimeout(() => {
                                      activeData.model = false
                                    }, 4000)
                                  }}
                                />
                              ) : (
                                <img
                                  src={iconpause}
                                  onClick={(e: Event) => {
                                    clearTimeout(m.timer)
                                    m.videoEle?.pause()
                                    m.paused = true
                                  }}
                                />
                              )}
                            </div>
                          </div>
                        </div>
                      )}
                    </Transition>
                    {m.muted && (
                      <div class={styles.loadWrap}>
                        <Vue3Lottie animationData={playLoadData}></Vue3Lottie>
                      </div>
                    )}
                  </>
                </SwipeItem>
              )
            })}
          </Swipe>

          <Transition name="top">
            {activeData.model && (
              <div class={styles.headerContainer} ref={headeRef}>
                <div class={styles.backBtn} onClick={() => goback()}>
                  <Icon name={iconBack} />
                  返回
                </div>
                <div class={styles.menu}>{popupData.tabName}</div>
                <div class={styles.nums}>
                  练习次数：{currentNum.value}/
                  {data.videoData?.trainingConfigJson?.practiceTimes || 0}
                </div>
              </div>
            )}
          </Transition>
        </div>
      </div>
    )
  }
})