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,
} 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'

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

export default defineComponent({
  name: 'exercise-after-class',
  setup() {
    const handleInit = (type = 0) => {
      // 横屏
      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()
    watch(
      () => route.query,
      () => {
        getDetail()
        trainingRecord()
      }
    )
    const router = useRouter()
    const query = route.query
    const browserInfo = browser()
    const headeRef = ref()
    const data = reactive({
      videoData: null as any,
      details: [] 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}`
        )
        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) {
        data.details = details
        const videoData: any =
          details.find((n: any) => n.materialId == route.query.materialId) || {}
        try {
          videoData.training = JSON.parse(videoData?.lessonTrainingTemp?.trainingConfigJson)
        } catch (error) {}
        data.itemList.push({
          ...videoData,
          id: videoData.materialId,
          currentTime: 0,
          duration: 100,
          paused: true,
          loop: false,
          videoEle: null,
          timer: null,
          muted: true, // 静音
          autoplay: true, //自动播放
        })
        popupData.itemActive = videoData.id
        popupData.tabName = videoData.materialName
        data.videoData = videoData
        handleExerciseCompleted()
      }
    }
    const getTrainingTimes = (res: any) => {
      let trainingTimes = 0
      if (Array.isArray(res?.trainings)) {
        const train = res.trainings.find((n: any) => n.materialId === route.query?.materialId)
        if (train) {
          trainingTimes = train.trainingTimes
        }
      }
      data.trainingTimes = trainingTimes
    }
    // 获取课后练习记录
    const trainingRecord = async () => {
      try {
        const res: any = await request.post(
          state.platformApi +
            `/studentLessonTraining/trainingRecord/${query.courseScheduleId}?userId=${state.user?.data?.id}`
        )
        if (res?.data) {
          getTrainingTimes(res.data)
          handleExerciseCompleted()
        }
      } catch (error) {}
    }
    onMounted(() => {
      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
          }
        )
        trainingRecord()
      } catch (error) {}
      data.recordLoading = false
    }
    // 停止所有的播放
    const handleStopVideo = () => {
      data.itemList.forEach((m: any) => {
        m.videoEle?.pause()
      })
    }

    // 判断练习是否完成
    const handleExerciseCompleted = () => {
      if (
        data.trainingTimes != 0 &&
        data.trainingTimes == (data.videoData as any)?.training?.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.视频) {
                // console.log('下一题视频', data.details[itemIndex].materialId, nextItem.materialId)
                router.replace({
                  path: '/exerciseAfterClass',
                  query: {
                    ...query,
                    materialId: nextItem.materialId
                  }
                })
              }
              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
                // console.log("🚀 ~ src", src)
                postMessage({
                  api: 'openAccompanyWebView',
                  content: {
                    url: src,
                    orientation: 0,
                    isHideTitle: true,
                    statusBarTextColor: false,
                    isOpenLight: true
                  }
                })
              }
            }
          })
          .catch(() => {
            data.details[itemIndex].currentTime = 0
          })
      }
    }

    return () => (
      <div class={styles.coursewarePlay}>
        <Swipe
          style={{ height: '100vh' }}
          ref={swipeRef}
          showIndicators={false}
          loop={false}
          vertical
          lazyRender={true}
          touchable={false}
        >
          {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
                      }}
                      onTimeupdate={(e: Event) => {
                        const videoEle = e.target as unknown as HTMLVideoElement
                        m.currentTime = videoEle.currentTime
                        console.log("🚀 ~ videoEle.currentTime", videoEle.currentTime)
                      }}
                      onPlay={() => {
                        // 播放
                        m.paused = false
                        if (m.muted){
                          m.muted = false
                          m.videoEle.pause()
                        }
                      }}
                      onPause={() => {
                        //暂停
                        m.paused = true
                      }}
                      onEnded={() => addTrainingRecord(m)}
                    >
                      <source src={m.content} type="video/mp4" />
                    </video>
                  </div>
                  <Transition name="bottom">
                    {activeData.model && (
                      <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>
                </>
              </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}>
                练习次数：{data.trainingTimes}/
                {(data.videoData as any)?.training?.practiceTimes || 0}
              </div>
            </div>
          )}
        </Transition>
      </div>
    )
  }
})