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

import { Icon, showConfirmDialog, showDialog, 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 iconGoPractice from '../coursewarePlay/image/icon-go-practice.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'
import { handleCheckVip } from '../hook/useFee'
import item from '@/student/coupons/item'
import { usePageVisibility } from '@vant/use'

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

export default defineComponent({
  name: 'exercise-after-class',
  setup() {
    const pageVisibility = usePageVisibility()
    /** 设置播放容器 16:9 */
    const parentContainer = reactive({
      width: '100vw'
    })
    const setContainer = () => {
      const min = Math.min(screen.width, screen.height)
      const max = Math.max(screen.width, screen.height)
      const 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,
      trainings: [] as any[],
      trainingTimes: 0,
      itemList: [] as any,
      showHead: true,
      loading: true,
      recordLoading: false,
      isPlayBaseStatus: true, // 初始状态是否播放完
      isPlayAll: true // 是否全部做完
    })
    const activeData = reactive({
      nowTime: 0,
      model: true, // 遮罩
      timer: null as any,
      item: null as any
    })
    // 获取课后练习记录
    const getTrainingRecord = 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)) {
          const trainings = res?.data?.trainings || []
          const tempLessonTraining: any = []
          trainings.forEach((item: any) => {
            tempLessonTraining.push(...(item.studentLessonTrainingDetails || []))
          })
          // 没有播放完
          tempLessonTraining.forEach((item: any) => {
            let trainingContent: any = {}
            try {
              trainingContent = JSON.parse(item.trainingContent)
            } catch (error) {
              trainingContent = ''
            }
            if (trainingContent.practiceTimes !== item.trainingTimes + '') {
              data.isPlayAll = false
            }

            if (item.materialId == route.query.materialId) {
              popupData.tabName = item.knowledgePointName
            }
          })

          return tempLessonTraining
        }
      } catch (error) {}
      return []
    }
    const setRecord = async (trainings: any[]) => {
      if (Array.isArray(trainings)) {
        data.trainings = trainings.map((n: any) => {
          try {
            n.trainingContent = JSON.parse(n.trainingContent)
          } catch (error) {
            n.trainingContent = ''
          }
          return {
            ...n,
            currentTime: 0,
            duration: 100,
            paused: true,
            loop: false,
            videoEle: null,
            timer: null,
            muted: true, // 静音
            autoplay: true //自动播放
          }
        })
        data.itemList = data.trainings.filter((n: any) => n.materialId == route.query.materialId)
        data.videoData = data.itemList[0]
        handleExerciseCompleted()
      }
    }

    onMounted(async () => {
      const trainings = await getTrainingRecord()
      // 初始化状态
      trainings.forEach((record: any) => {
        let trainingContent: any = {}
        try {
          trainingContent = JSON.parse(record.trainingContent)
        } catch (error) {
          trainingContent = ''
        }
        if (trainingContent.practiceTimes !== record.trainingTimes + '') {
          data.isPlayBaseStatus = false
        }
      })

      setRecord(trainings)
      handleCheckVip()
    })
    // 返回
    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: data.videoData?.materialId || ''
      }
      try {
        const res: any = await request.post(
          state.platformApi + '/studentLessonTraining/lessonTrainingRecord',
          {
            data: body,
            hideLoading: true
          }
        )
      } catch (error) {}
      data.recordLoading = false
      try {
        const trainings: any[] = await getTrainingRecord()
        if (Array.isArray(trainings)) {
          const item = trainings.find((n: any) => n.materialId == data.videoData?.materialId)
          if (item) {
            data.videoData.trainingTimes = item.trainingTimes
            handleExerciseCompleted()
          }
        }
      } catch (error) {}
    }
    // 停止所有的播放
    const handleStopVideo = () => {
      data.itemList.forEach((m: any) => {
        m.videoEle?.pause()
      })
    }

    // 判断练习是否完成
    const handleExerciseCompleted = () => {
      if (
        data?.videoData?.trainingTimes != 0 &&
        data?.videoData?.trainingTimes + '' === data.videoData?.trainingContent?.practiceTimes
      ) {
        let isLastIndex = false
        let itemIndex = 0
        // console.log(data.isPlayBaseStatus, data.isPlayAll, data.trainings)
        if (data.isPlayBaseStatus) {
          itemIndex = data.trainings.findIndex(
            (n: any) => n.materialId == data.videoData?.materialId
          )
          isLastIndex = itemIndex === data.trainings.length - 1
        } else {
          let i = -1
          let status = true
          data.trainings.forEach((item: any, index: number) => {
            if (item.trainingContent.practiceTimes !== item.trainingTimes + '' && i === -1) {
              // console.log(i, item.trainingContent.practiceTimes, item.trainingTimes, index)
              i = index
            }
            if (item.trainingContent.practiceTimes !== item.trainingTimes + '') {
              status = false
            }
          })
          itemIndex = i != -1 ? i - 1 : -1
          // console.log(status)
          isLastIndex = status
        }

        showConfirmDialog({
          title: '课后作业',
          message: '你已完成该练习~',
          confirmButtonColor: 'var(--van-primary)',
          confirmButtonText: isLastIndex ? '完成' : '下一题',
          cancelButtonText: '继续'
        })
          .then(() => {
            if (!isLastIndex) {
              const nextItem = data.trainings[itemIndex + 1]
              if (nextItem.knowledgePointName) {
                popupData.tabName = nextItem.knowledgePointName
              }
              if (nextItem?.type === materialType.视频) {
                data.itemList = [nextItem]
                data.videoData = nextItem
                handleExerciseCompleted()
              }
              if (nextItem?.type === materialType.曲目) {
                handleInit(1)
                goback()
                const parmas = qs.stringify({
                  id: nextItem.content,
                  courseScheduleId: query.courseScheduleId,
                  lessonTrainingId: query.lessonTrainingId,
                  materialId: nextItem.materialId
                })
                const 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.trainings[itemIndex].currentTime = 0
          })
      }
    }

    watch(pageVisibility, (value: any) => {
      handleStopVideo()
      if (value == 'visible') {
        // 横屏
        postMessage(
          {
            api: 'setRequestedOrientation',
            content: {
              orientation: 0
            }
          },
          () => {
            console.log(234)
          }
        )
      }
    })

    // 去练习
    const gotoPractice = () => {
      handleStopVideo()
      const url = window.location.origin + location.pathname + `#/accompany`
      postMessage({
        api: 'openWebView',
        content: {
          url: url,
          orientation: 1
        }
      })
    }

    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
                        }}
                        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}>
                  观看视频模仿并练习：{data.videoData?.trainingTimes || 0}/
                  {data.videoData?.trainingContent?.practiceTimes || 0}
                </div>
              </div>
            )}
          </Transition>
          <Transition name="right">
            {activeData.model && (
              <div class={styles.btnGroup}>
                <div class={styles.btnItem} onClick={gotoPractice}>
                  <img src={iconGoPractice} class={styles.btnImg} />
                  <span>去练习</span>
                </div>
              </div>
            )}
          </Transition>
        </div>
      </div>
    )
  }
})