orchestra-app/src/views/coursewarePlay/index.tsx

import { Button, Icon, Popup, Slider, Swipe, SwipeItem, Tab, Tabs } from 'vant'
import {
  defineComponent,
  onMounted,
  reactive,
  nextTick,
  onUnmounted,
  ref,
  watch,
  Transition,
  computed
} from 'vue'
import iconBack from './image/back.svg'
import styles from './index.module.less'
import Plyr from 'plyr'
import 'plyr/dist/plyr.css'
import request from '@/helpers/request'
import { state } from '@/state'
import { useRoute } from 'vue-router'
import { listenerMessage, postMessage } from '@/helpers/native-message'
import MusicScore from './component/musicScore'
import iconMenu from './image/icon-menu.svg'
import iconDian from './image/icon-dian.svg'
import iconPoint from './image/icon-point.svg'
import Points from './component/points'

export default defineComponent({
  name: 'CoursewarePlay',
  setup() {
    const handleInit = () => {
      postMessage({
        api: 'setRequestedOrientation',
        content: {
          orientation: 0
        }
      })
      postMessage({
        api: 'setBarStatus',
        content: {
          status: 0
        }
      })
      postMessage({
        api: 'setStatusBarVisibility',
        content: {
          isVisibility: 0
        }
      })
    }
    handleInit()

    const route = useRoute()
    const data = reactive({
      detail: null,
      active: '',
      itemActive: '',
      knowledgePointList: [] as any,
      showHead: true,
      players: [] as any
    })
    const activeData = reactive({
      model: true, // 遮罩
      currentTime: 10
    })
    const itemList = computed(() => {
      const list: any = []
      for (let i = 0; i < data.knowledgePointList.length; i++) {
        const item = data.knowledgePointList[i]
        for (let j = 0; j < item.materialList.length; j++) {
          const material = item.materialList[j]
          if (popupData.itemActive === '') {
            popupData.tabActive = material.knowledgePointId
            popupData.tabName = item.name
            popupData.itemActive = material.id
            popupData.itemName = material.name
          }
          list.push({
            ...material
          })
        }
      }
      // console.log('🚀 ~ list', list)
      return list
    })
    const getDetail = async () => {
      try {
        const res: any = await request.get(
          state.platformApi + `/lessonCoursewareDetail/detail/${route.query.id}`
        )
        if (Array.isArray(res?.data)) {
          data.detail = res.data
        }
        if (Array.isArray(res?.data?.knowledgePointList)) {
          data.knowledgePointList = res.data.knowledgePointList.map((n: any) => {
            n.index = 0
            return n
          })
        }
      } catch (error) {}
    }
    const videoInit = () => {
      console.log(document.querySelectorAll('.player'))
      data.players = Plyr.setup('.player', {
        debug: false,
        ratio: '16:9',
        clickToPlay: true,
        controls: [
          'play-large',
          'play',
          'progress',
          'current-time',
          'duration',
          'mute',
          'volume',
          'restart'
        ]
      })
      data.players.forEach((p: Plyr) => {
        // console.log(p)
        p.on('play', () => {
          console.log('开始播放了')
          data.showHead = false
        })
        p.on('pause', () => {
          console.log('暂停了')
          data.showHead = true
        })
        p.on('controlsshown', () => {
          console.log('显示控件')
          data.showHead = true
        })
        p.on('controlshidden', () => {
          console.log('控件隐藏')
          data.showHead = false
        })
      })
      console.log('🚀 ~ player', data.players)
    }
    const testFile = ref('')
    onMounted(() => {
      // const o = new ActiveXObject("wscript.shell")
      getDetail()
      postMessage(
        {
          api: 'getCourseFilePath',
          content: {
            url: 'https://daya.ks3-cn-beijing.ksyuncs.com/01/1672976208474.jpg',
            materialId: '1610610237357969409',
            updateTime: '2023-01-04 20:12:58',
            type: 'VIDEO' // SONG VIDEO IMAGE
          }
        },
        (res) => {
          if (res?.content) {
            testFile.value = 'customScheme://' + res.content.localPath
            fetch(testFile.value)
          }
        }
      )
    })
    listenerMessage('getCourseFilePath', (res) => {
      if (res?.content) {
        testFile.value = res.content.localPath
      }
    })
    // 返回
    const goback = () => {
      // history.go(-1)
      postMessage({ api: 'back' })
    }
    // 所有的切换
    const handleChange = () => {
      // console.log('切换了')
      const iframes = document.querySelectorAll('.musicIframe')
      Array.from(iframes).map((f: any) => {
        f.contentWindow.postMessage({ api: 'setPlayState' }, '*')
      })
      data.players.forEach((p: any) => {
        p.stop()
      })
    }
    onUnmounted(() => {
      postMessage({
        api: 'setRequestedOrientation',
        content: {
          orientation: 1
        }
      })
      postMessage({
        api: 'setBarStatus',
        content: {
          status: 1
        }
      })
      postMessage({
        api: 'setStatusBarVisibility',
        content: {
          isVisibility: 1
        }
      })
    })

    const popupData = reactive({
      open: false,
      activeIndex: 0,
      tabActive: '',
      tabName: '',
      itemActive: '',
      itemName: ''
    })
    // 切换素材
    const toggleMaterial = () => {
      const index = itemList.value.findIndex((n: any) => n.id == popupData.itemActive)
      popupData.activeIndex = index
      console.log('🚀 ~ popupData', popupData.activeIndex)
    }
    // 上一个知识点, 下一个知识点
    const handlePreAndNext = (type: string) => {
      console.log(popupData.tabActive)
      const tabIndex = data.knowledgePointList.findIndex((n: any) => n.id == popupData.tabActive)
      const itemIndex = itemList.value.findIndex((n: any) => n.id == popupData.itemActive)
      
      console.log("🚀 ~ tab", tabIndex, itemIndex)
    }

    // 去点名,签退
    const gotoRollCall = (pageTag: string) => {
      postMessage({
        api: 'open_app_page',
        content: {
          action: 'app',
          pageTag: pageTag,
          url: '',
          params: JSON.stringify({ courseId: route.query.courseId })
        }
      })
    }
    return () => (
      <div class={styles.coursewarePlay}>
        <Swipe
          style={{ height: '100vh' }}
          showIndicators={false}
          loop={false}
          initialSwipe={popupData.activeIndex}
          vertical
          lazyRender={true}
          onChange={(val: any) => {
            // item.index = val
            // popupData.itemActive = `${item.id}-${item?.materialList?.[item.index]?.id}`
          }}
        >
          {itemList.value.map((m: any) => {
            return (
              <SwipeItem>
                {m.type === 'VIDEO' ? (
                  <div class={styles.videoItem}>
                    <video class="player">
                      <source src={m.content} type="video/mp4" />
                    </video>
                  </div>
                ) : m.type === 'IMG' ? (
                  <div class={styles.imgItem}>
                    <img src={m.content} />
                  </div>
                ) : (
                  <div class={styles.songItem}>
                    <MusicScore music={m} />
                  </div>
                )}
              </SwipeItem>
            )
          })}
        </Swipe>
        <div
          class={styles.playModel}
          onClick={() => {
            activeData.model = !activeData.model
          }}
        ></div>
        <Transition name="top">
          {activeData.model && (
            <div class={styles.headerContainer}>
              <div class={styles.backBtn} onClick={() => goback()}>
                <Icon name={iconBack} />
                返回
              </div>
              <div class={styles.menu}>{popupData.tabName}</div>
            </div>
          )}
        </Transition>

        <Transition name="right">
          {activeData.model && (
            <div class={styles.rightFixedBtns}>
              <div class={styles.fullBtn} onClick={() => (popupData.open = true)}>
                <img src={iconMenu} />
                <span>知识点</span>
              </div>
              {route.query.courseId && (
                <>
                  <div
                    class={[styles.fullBtn, styles.point]}
                    onClick={() => gotoRollCall('student_roll_call')}
                  >
                    <img src={iconDian} />
                    <span>点名</span>
                  </div>
                  <div class={styles.fullBtn} onClick={() => gotoRollCall('sign_out')}>
                    <img src={iconPoint} />
                    <span>签退</span>
                  </div>
                </>
              )}
            </div>
          )}
        </Transition>

        <Transition name="left">
          {activeData.model && (
            <div class={styles.leftFixedBtns}>
              <div class={[styles.fullBtn, styles.prePoint]} onClick={() => handlePreAndNext('up')}>
                <span style={{ textAlign: 'center' }}>
                  上一
                  <br />
                  知识点
                </span>
              </div>
              <div class={styles.fullBtn} onClick={() => handlePreAndNext('down')}>
                <span style={{ textAlign: 'center' }}>
                  下一
                  <br />
                  知识点
                </span>
              </div>
            </div>
          )}
        </Transition>

        <Transition name="bottom">
          {activeData.model && (
            <div class={styles.bottomFixedContainer}>
              <div class={styles.time}>
                <span>03:12</span>
                <span>10:12</span>
              </div>
              <Slider
                buttonSize={16}
                style={{ margin: '8px 0' }}
                v-model:modelValue={activeData.currentTime}
                min={0}
                max={100}
              />
              <div class={styles.actions}>
                <div>
                  <Icon name="play-circle" />
                  <Icon name="pause-circle" />
                </div>
                <div>长笛的呼吸练习</div>
              </div>
            </div>
          )}
        </Transition>
        <Popup
          class={styles.popup}
          overlayClass={styles.overlayClass}
          position="right"
          round
          v-model:show={popupData.open}
        >
          <Points
            data={data.knowledgePointList}
            tabActive={popupData.tabActive}
            itemActive={popupData.itemActive}
            onHandleSelect={(res: any) => {
              // console.log(res)
              popupData.tabActive = res.tabActive
              popupData.itemActive = res.itemActive
              popupData.open = false
              toggleMaterial()
            }}
          />
        </Popup>
      </div>
    )
  }
})