|
|
@@ -1,742 +0,0 @@
|
|
|
-import {
|
|
|
- closeToast,
|
|
|
- Icon,
|
|
|
- Loading,
|
|
|
- Popup,
|
|
|
- showToast,
|
|
|
- Slider,
|
|
|
- Swipe,
|
|
|
- SwipeInstance,
|
|
|
- SwipeItem
|
|
|
-} from 'vant'
|
|
|
-import {
|
|
|
- defineComponent,
|
|
|
- onMounted,
|
|
|
- reactive,
|
|
|
- nextTick,
|
|
|
- onUnmounted,
|
|
|
- ref,
|
|
|
- watch,
|
|
|
- Transition,
|
|
|
- TransitionGroup
|
|
|
-} from 'vue'
|
|
|
-import iconBack from './image/back.svg'
|
|
|
-import styles from './play.module.less'
|
|
|
-import 'plyr/dist/plyr.css'
|
|
|
-import request from '@/helpers/request'
|
|
|
-import { state } from '@/state'
|
|
|
-import { useRoute, useRouter } from 'vue-router'
|
|
|
-import { listenerMessage, postMessage, promisefiyPostMessage } from '@/helpers/native-message'
|
|
|
-import MusicScore from './component/musicScore'
|
|
|
-import iconMenu from './image/icon-menu.svg'
|
|
|
-import iconDian from './image/icon-dian.svg'
|
|
|
-import iconTouping from './image/icon-touping.svg'
|
|
|
-import iconPoint from './image/icon-point.svg'
|
|
|
-import iconLoop from './image/icon-loop.svg'
|
|
|
-import iconLoopActive from './image/icon-loop-active.svg'
|
|
|
-import iconplay from './image/icon-play.svg'
|
|
|
-import iconpause from './image/icon-pause.svg'
|
|
|
-import iconUp from './image/icon-up.svg'
|
|
|
-import iconDown from './image/icon-down.svg'
|
|
|
-import Points from './component/points'
|
|
|
-import { browser, getSecondRPM } from '@/helpers/utils'
|
|
|
-import { Vue3Lottie } from 'vue3-lottie'
|
|
|
-import playLoadData from './datas/data.json'
|
|
|
-import { usePageVisibility, useRect } from '@vant/use'
|
|
|
-import PlayRecordTime from './playRecordTime'
|
|
|
-import VideoPlay from './component/video-play'
|
|
|
-import {
|
|
|
- Pagination,
|
|
|
- Navigation,
|
|
|
- Virtual,
|
|
|
- EffectFade,
|
|
|
- EffectFlip,
|
|
|
- EffectCreative,
|
|
|
- Lazy
|
|
|
-} from 'swiper'
|
|
|
-import { Swiper, SwiperSlide } from 'swiper/vue'
|
|
|
-import 'swiper/less'
|
|
|
-import 'swiper/less/effect-fade'
|
|
|
-import 'swiper/less/effect-flip'
|
|
|
-import 'swiper/less/effect-creative'
|
|
|
-import { handleCheckVip } from '../hook/useFee'
|
|
|
-import OGuide from '@/components/o-guide'
|
|
|
-
|
|
|
-export default defineComponent({
|
|
|
- name: 'CoursewarePlay',
|
|
|
- setup() {
|
|
|
- const pageVisibility = usePageVisibility()
|
|
|
- const isPlay = ref(false)
|
|
|
- /** 页面显示和隐藏 */
|
|
|
- watch(pageVisibility, (value) => {
|
|
|
- const activeItem = data.itemList[popupData.activeIndex]
|
|
|
- if (activeItem.type != 'VIDEO') return
|
|
|
- if (value == 'hidden') {
|
|
|
- isPlay.value = !activeItem.videoEle.paused
|
|
|
- togglePlay(activeItem, false)
|
|
|
- } else {
|
|
|
- // 页面显示,并且
|
|
|
- if (isPlay.value) togglePlay(activeItem, true)
|
|
|
- }
|
|
|
- })
|
|
|
- /** 设置播放容器 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) => {
|
|
|
- //设置容器16:9
|
|
|
- setContainer()
|
|
|
- // 横屏
|
|
|
- postMessage(
|
|
|
- {
|
|
|
- api: 'setRequestedOrientation',
|
|
|
- content: {
|
|
|
- orientation: type
|
|
|
- }
|
|
|
- },
|
|
|
- () => {
|
|
|
- console.log(234)
|
|
|
- }
|
|
|
- )
|
|
|
- // 头,包括返回箭头
|
|
|
- postMessage({
|
|
|
- api: 'setTitleBarVisibility',
|
|
|
- content: {
|
|
|
- status: type
|
|
|
- }
|
|
|
- })
|
|
|
- // 安卓的状态栏
|
|
|
- postMessage({
|
|
|
- api: 'setStatusBarVisibility',
|
|
|
- content: {
|
|
|
- isVisibility: type
|
|
|
- }
|
|
|
- })
|
|
|
- // 进入页面设置常量
|
|
|
- postMessage({
|
|
|
- api: 'keepScreenLongLight',
|
|
|
- content: {
|
|
|
- isOpenLight: type ? true : false
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- handleInit()
|
|
|
- onUnmounted(() => {
|
|
|
- handleInit(1)
|
|
|
- window.removeEventListener('message', iframeHandle)
|
|
|
- })
|
|
|
-
|
|
|
- const route = useRoute()
|
|
|
- const router = useRouter()
|
|
|
- const headeRef = ref()
|
|
|
- const data = reactive({
|
|
|
- detail: null,
|
|
|
- knowledgePointList: [] as any,
|
|
|
- itemList: [] as any,
|
|
|
- showHead: true,
|
|
|
- isCourse: false,
|
|
|
- isRecordPlay: false,
|
|
|
- videoRefs: {}
|
|
|
- })
|
|
|
- const activeData = reactive({
|
|
|
- nowTime: 0,
|
|
|
- model: true, // 遮罩
|
|
|
- videoBtns: true, // 视频
|
|
|
- currentTime: 0,
|
|
|
- duration: 0,
|
|
|
- timer: null as any,
|
|
|
- item: null as any
|
|
|
- })
|
|
|
- // 获取缓存路径
|
|
|
- const getCacheFilePath = async (material: any) => {
|
|
|
- const res = await promisefiyPostMessage({
|
|
|
- api: 'getCourseFilePath',
|
|
|
- content: {
|
|
|
- url: material.content,
|
|
|
- localPath: '',
|
|
|
- materialId: material.materialId,
|
|
|
- updateTime: material.updateTime,
|
|
|
- type: material.type // SONG VIDEO IMAGE
|
|
|
- }
|
|
|
- })
|
|
|
- // console.log('缓存路径返回', res)
|
|
|
- return res
|
|
|
- }
|
|
|
- // 获取当前课程是否签退
|
|
|
- const getCourseSchedule = async () => {
|
|
|
- if (!route.query.courseId) return
|
|
|
- try {
|
|
|
- const res = await request.get(
|
|
|
- `${state.platformApi}/courseSchedule/detail/${route.query.courseId}`,
|
|
|
- {
|
|
|
- hideLoading: true
|
|
|
- }
|
|
|
- )
|
|
|
- if (res?.data) {
|
|
|
- data.isCourse =
|
|
|
- res.data.status === 'ING' && state.platformType == 'TEACHER' ? true : false
|
|
|
- // data.isRecordPlay = Date.now() > dayjs(res.data.startTime).valueOf()
|
|
|
- }
|
|
|
- } catch (e) {
|
|
|
- console.log(e)
|
|
|
- }
|
|
|
- }
|
|
|
- const getItemList = async () => {
|
|
|
- const list: any = []
|
|
|
- const browserInfo = browser()
|
|
|
- for (let i = 0; i < data.knowledgePointList.length; i++) {
|
|
|
- const item = data.knowledgePointList[i]
|
|
|
- const itemLength = item.materialList.length - 1
|
|
|
- for (let j = 0; j < item.materialList.length; j++) {
|
|
|
- const material = item.materialList[j]
|
|
|
- //请求本地缓存
|
|
|
- if (browserInfo.isApp && ['VIDEO', 'IMG'].includes(material.type)) {
|
|
|
- const localData = await getCacheFilePath(material)
|
|
|
- if (localData?.content?.localPath) {
|
|
|
- material.url = material.content
|
|
|
- material.content = localData.content.localPath
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- list.push({
|
|
|
- ...material,
|
|
|
- iframeRef: null,
|
|
|
- videoEle: null,
|
|
|
- tabName: item.name,
|
|
|
- isLast: j === itemLength, // 当前知识点
|
|
|
- autoPlay: false, //加载完成是否自动播放
|
|
|
- isprepare: false, // 视频是否加载完成
|
|
|
- isRender: false // 是否渲染了
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- let _firstIndex = list.findIndex((n: any) => n.materialId == route.query.kId)
|
|
|
- _firstIndex = _firstIndex > -1 ? _firstIndex : 0
|
|
|
- const item = list[_firstIndex]
|
|
|
- item.autoPlay = true
|
|
|
- popupData.activeIndex = _firstIndex
|
|
|
- popupData.tabName = item.tabName
|
|
|
- popupData.tabActive = item.knowledgePointId
|
|
|
- popupData.itemActive = item.id
|
|
|
- popupData.itemName = item.name
|
|
|
- // console.log('🚀 ~ list', list)
|
|
|
- nextTick(() => {
|
|
|
- data.itemList = list
|
|
|
- postMessage({
|
|
|
- api: 'courseLoading',
|
|
|
- content: {
|
|
|
- show: false,
|
|
|
- type: 'fullscreen'
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
- const getDetail = async () => {
|
|
|
- try {
|
|
|
- const res: any = await request.get(
|
|
|
- state.platformApi + `/lessonCoursewareDetail/detail/${route.query.id}`,
|
|
|
- {
|
|
|
- hideLoading: true
|
|
|
- }
|
|
|
- )
|
|
|
- if (Array.isArray(res?.data)) {
|
|
|
- data.detail = res.data
|
|
|
- }
|
|
|
- if (Array.isArray(res?.data?.knowledgePointList)) {
|
|
|
- let index = 0
|
|
|
- data.knowledgePointList = res.data.knowledgePointList.map((n: any) => {
|
|
|
- if (Array.isArray(n.materialList)) {
|
|
|
- n.materialList = n.materialList.map((item: any) => {
|
|
|
- index++
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- materialId: item.id,
|
|
|
- id: index + ''
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- return n
|
|
|
- })
|
|
|
- getItemList()
|
|
|
- }
|
|
|
- } catch (error) {}
|
|
|
- }
|
|
|
-
|
|
|
- const iframTime = ref()
|
|
|
- // ifram事件处理
|
|
|
- const iframeHandle = (ev: MessageEvent) => {
|
|
|
- if (ev.data?.api === 'headerTogge') {
|
|
|
- clearTimeout(iframTime.value)
|
|
|
- iframTime.value = setTimeout(() => {
|
|
|
- activeData.model = ev.data.show || (ev.data.playState == 'play' ? false : true)
|
|
|
- }, 500)
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- onMounted(() => {
|
|
|
- const hasVip = handleCheckVip()
|
|
|
- if (!hasVip) {
|
|
|
- nextTick(() => {
|
|
|
- postMessage({
|
|
|
- api: 'courseLoading',
|
|
|
- content: {
|
|
|
- show: false,
|
|
|
- type: 'fullscreen'
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- getDetail()
|
|
|
- getCourseSchedule()
|
|
|
- window.addEventListener('message', iframeHandle)
|
|
|
- })
|
|
|
- const playRef = ref()
|
|
|
- // 返回
|
|
|
- const goback = () => {
|
|
|
- try {
|
|
|
- playRef.value?.handleOut()
|
|
|
- } catch (error) {}
|
|
|
- if (route.query.source == 'my-course') {
|
|
|
- router.back()
|
|
|
- return
|
|
|
- }
|
|
|
- postMessage({ api: 'goBack' })
|
|
|
- }
|
|
|
-
|
|
|
- const popupData = reactive({
|
|
|
- open: false,
|
|
|
- activeIndex: 0,
|
|
|
- tabActive: '',
|
|
|
- tabName: '',
|
|
|
- itemActive: '',
|
|
|
- itemName: '',
|
|
|
- guideOpen: false
|
|
|
- })
|
|
|
-
|
|
|
- /**停止所有的播放 */
|
|
|
- const handleStop = () => {
|
|
|
- for (let i = 0; i < data.itemList.length; i++) {
|
|
|
- const activeItem = data.itemList[i]
|
|
|
- if (popupData.activeIndex !== i) {
|
|
|
- if (activeItem.type === 'VIDEO' && activeItem.videoEle) {
|
|
|
- activeItem.videoEle.stop()
|
|
|
- }
|
|
|
- // console.log('🚀 ~ activeItem:', activeItem)
|
|
|
- // 停止曲谱的播放
|
|
|
- if (activeItem.type === 'SONG') {
|
|
|
- activeItem.iframeRef?.contentWindow?.postMessage({ api: 'setPlayState' }, '*')
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- // 切换素材
|
|
|
- const toggleMaterial = () => {
|
|
|
- const index = data.itemList.findIndex((n: any) => n.id == popupData.itemActive)
|
|
|
- if (index > -1) {
|
|
|
- handleSwipeChange(index)
|
|
|
- }
|
|
|
- }
|
|
|
- /** 延迟收起模态框 */
|
|
|
- const setModelOpen = () => {
|
|
|
- clearTimeout(activeData.timer)
|
|
|
- closeToast()
|
|
|
- activeData.timer = setTimeout(() => {
|
|
|
- activeData.model = false
|
|
|
- Object.values(data.videoRefs).map((n: any) => n.toggleHideControl(false))
|
|
|
- }, 4000)
|
|
|
- }
|
|
|
-
|
|
|
- // 去点名,签退
|
|
|
- const gotoRollCall = (pageTag: string) => {
|
|
|
- postMessage({
|
|
|
- api: 'open_app_page',
|
|
|
- content: {
|
|
|
- action: 'app',
|
|
|
- pageTag: pageTag,
|
|
|
- url: '',
|
|
|
- params: JSON.stringify({ courseId: route.query.courseId })
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- // 双击
|
|
|
- const handleDbClick = (item: any) => {
|
|
|
- if (item && item.type === 'VIDEO') {
|
|
|
- const videoEle: HTMLVideoElement = item.videoEle
|
|
|
- if (videoEle) {
|
|
|
- if (videoEle.paused) {
|
|
|
- closeToast()
|
|
|
- videoEle.play()
|
|
|
- } else {
|
|
|
- showToast('已暂停')
|
|
|
- videoEle.pause()
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 切换播放
|
|
|
- const togglePlay = (m: any, isPlay: boolean) => {
|
|
|
- if (isPlay) {
|
|
|
- m.videoEle?.play()
|
|
|
- } else {
|
|
|
- m.videoEle?.pause()
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const showIndex = ref(-4)
|
|
|
- const effectIndex = ref(0)
|
|
|
- const effects = [
|
|
|
- {
|
|
|
- prev: {
|
|
|
- transform: 'translate3d(0, 0, -800px) rotateX(180deg)'
|
|
|
- },
|
|
|
- next: {
|
|
|
- transform: 'translate3d(0, 0, -800px) rotateX(-180deg)'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- prev: {
|
|
|
- transform: 'translate3d(-100%, 0, -800px)'
|
|
|
- },
|
|
|
- next: {
|
|
|
- transform: 'translate3d(100%, 0, -800px)'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- prev: {
|
|
|
- transform: 'translate3d(-50%, 0, -800px) rotateY(80deg)'
|
|
|
- },
|
|
|
- next: {
|
|
|
- transform: 'translate3d(50%, 0, -800px) rotateY(-80deg)'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- prev: {
|
|
|
- transform: 'translate3d(-100%, 0, -800px) rotateY(-120deg)'
|
|
|
- },
|
|
|
- next: {
|
|
|
- transform: 'translate3d(100%, 0, -800px) rotateY(120deg)'
|
|
|
- }
|
|
|
- },
|
|
|
- //风车4
|
|
|
- {
|
|
|
- prev: {
|
|
|
- transform: 'translate3d(-50%, 50%, -800px) rotateZ(-14deg)',
|
|
|
- opacity: 0
|
|
|
- },
|
|
|
- next: {
|
|
|
- transform: 'translate3d(50%, 50%, -800px) rotateZ(14deg)',
|
|
|
- opacity: 0
|
|
|
- }
|
|
|
- },
|
|
|
- //翻页5
|
|
|
- {
|
|
|
- prev: {
|
|
|
- transform: 'translateZ(-800px) rotate3d(0, -1, 0, 90deg)',
|
|
|
- opacity: 0
|
|
|
- },
|
|
|
- next: {
|
|
|
- transform: 'translateZ(-800px) rotate3d(0, 1, 0, 90deg)',
|
|
|
- opacity: 0
|
|
|
- },
|
|
|
- current: { transitionDelay: '700ms' }
|
|
|
- }
|
|
|
- ]
|
|
|
-
|
|
|
- // 轮播切换
|
|
|
- const handleSwipeChange = (index: number) => {
|
|
|
- if (popupData.activeIndex == index) return
|
|
|
- // console.log('轮播切换')
|
|
|
- popupData.activeIndex = index
|
|
|
- setTimeout(() => {
|
|
|
- handleStop()
|
|
|
- const item = data.itemList[index]
|
|
|
- if (item) {
|
|
|
- popupData.tabActive = item.knowledgePointId
|
|
|
- popupData.itemActive = item.id
|
|
|
- popupData.itemName = item.name
|
|
|
- popupData.tabName = item.tabName
|
|
|
- if (item.type == 'SONG') {
|
|
|
- activeData.model = true
|
|
|
- }
|
|
|
- if (item.type === 'VIDEO') {
|
|
|
- // 自动播放下一个视频
|
|
|
- clearTimeout(activeData.timer)
|
|
|
- closeToast()
|
|
|
- item.autoPlay = true
|
|
|
- nextTick(() => {
|
|
|
- item.videoEle?.play()
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }, 800)
|
|
|
- }
|
|
|
-
|
|
|
- // 上一个知识点, 下一个知识点
|
|
|
- const handlePreAndNext = (type: string) => {
|
|
|
- if (type === 'up') {
|
|
|
- handleSwipeChange(popupData.activeIndex - 1)
|
|
|
- } else {
|
|
|
- handleSwipeChange(popupData.activeIndex + 1)
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- return () => (
|
|
|
- <div class={styles.playContent}>
|
|
|
- <div
|
|
|
- onClick={() => {
|
|
|
- clearTimeout(activeData.timer)
|
|
|
- activeData.model = !activeData.model
|
|
|
- Object.values(data.videoRefs).map((n: any) => n.toggleHideControl(activeData.model))
|
|
|
- }}
|
|
|
- >
|
|
|
- <div
|
|
|
- class={styles.coursewarePlay}
|
|
|
- style={{ width: parentContainer.width }}
|
|
|
- onClick={(e: Event) => {
|
|
|
- e.stopPropagation()
|
|
|
- setModelOpen()
|
|
|
- }}
|
|
|
- >
|
|
|
- <div class={styles.wraps}>
|
|
|
- {data.itemList.map((m: any, mIndex: number) => {
|
|
|
- const isRender = m.isRender || Math.abs(popupData.activeIndex - mIndex) < 2
|
|
|
- if (isRender) {
|
|
|
- m.isRender = true
|
|
|
- }
|
|
|
- return isRender ? (
|
|
|
- <div
|
|
|
- key={'index' + mIndex}
|
|
|
- class={[styles.itemDiv, popupData.activeIndex === mIndex && styles.itemActive]}
|
|
|
- style={
|
|
|
- mIndex < popupData.activeIndex
|
|
|
- ? effects[effectIndex.value].prev
|
|
|
- : mIndex > popupData.activeIndex
|
|
|
- ? effects[effectIndex.value].next
|
|
|
- : effects[effectIndex.value].current
|
|
|
- }
|
|
|
- onClick={(e: Event) => {
|
|
|
- e.stopPropagation()
|
|
|
- clearTimeout(activeData.timer)
|
|
|
- if (Date.now() - activeData.nowTime < 300) {
|
|
|
- handleDbClick(m)
|
|
|
- return
|
|
|
- }
|
|
|
- activeData.nowTime = Date.now()
|
|
|
- activeData.timer = setTimeout(() => {
|
|
|
- activeData.model = !activeData.model
|
|
|
- Object.values(data.videoRefs).map((n: any) =>
|
|
|
- n.toggleHideControl(activeData.model)
|
|
|
- )
|
|
|
- if (activeData.model) {
|
|
|
- setModelOpen()
|
|
|
- }
|
|
|
- }, 300)
|
|
|
- }}
|
|
|
- >
|
|
|
- {m.type === 'VIDEO' ? (
|
|
|
- <>
|
|
|
- <VideoPlay
|
|
|
- ref={(v: any) => (data.videoRefs[mIndex] = v)}
|
|
|
- item={m}
|
|
|
- onLoadedmetadata={(videoItem: any) => {
|
|
|
- m.videoEle = videoItem
|
|
|
- }}
|
|
|
- onTogglePlay={(paused: boolean) => {
|
|
|
- // console.log('播放切换', paused)
|
|
|
- // 首次播放完成
|
|
|
- if (!m.isprepare) {
|
|
|
- m.isprepare = true
|
|
|
- }
|
|
|
- m.autoPlay = false
|
|
|
- if (paused || popupData.open || popupData.guideOpen) {
|
|
|
- clearTimeout(activeData.timer)
|
|
|
- } else {
|
|
|
- setModelOpen()
|
|
|
- }
|
|
|
- }}
|
|
|
- onEnded={() => handleSwipeChange(popupData.activeIndex + 1)}
|
|
|
- onReset={() => {
|
|
|
- if (!m.videoEle?.paused) {
|
|
|
- setModelOpen()
|
|
|
- }
|
|
|
- }}
|
|
|
- />
|
|
|
- <Transition name="van-fade">
|
|
|
- {!m.isprepare && (
|
|
|
- <div class={styles.loadWrap}>
|
|
|
- <Vue3Lottie animationData={playLoadData}></Vue3Lottie>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </Transition>
|
|
|
- </>
|
|
|
- ) : m.type === 'IMG' ? (
|
|
|
- <img src={m.content} />
|
|
|
- ) : (
|
|
|
- <MusicScore
|
|
|
- data-vid={m.id}
|
|
|
- music={m}
|
|
|
- onSetIframe={(el: any) => {
|
|
|
- m.iframeRef = el
|
|
|
- }}
|
|
|
- />
|
|
|
- )}
|
|
|
- </div>
|
|
|
- ) : null
|
|
|
- })}
|
|
|
- </div>
|
|
|
- <Transition name="right">
|
|
|
- {activeData.model && (
|
|
|
- <div
|
|
|
- class={styles.rightFixedBtns}
|
|
|
- onClick={(e: Event) => {
|
|
|
- e.stopPropagation()
|
|
|
- clearTimeout(activeData.timer)
|
|
|
- }}
|
|
|
- >
|
|
|
- <div class={styles.btnsWrap}>
|
|
|
- <div
|
|
|
- class={[styles.fullBtn, styles.point]}
|
|
|
- onClick={() => (popupData.open = true)}
|
|
|
- >
|
|
|
- <img src={iconMenu} />
|
|
|
- <span>知识点</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class={[styles.btnsWrap, styles.btnsBottom]}>
|
|
|
- <div class={styles.fullBtn} onClick={() => (popupData.guideOpen = true)}>
|
|
|
- <img src={iconTouping} />
|
|
|
- <span>投屏</span>
|
|
|
- </div>
|
|
|
- {data.isCourse && (
|
|
|
- <>
|
|
|
- <div
|
|
|
- class={styles.fullBtn}
|
|
|
- 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>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </Transition>
|
|
|
-
|
|
|
- <Transition name="left">
|
|
|
- {activeData.model && (
|
|
|
- <div class={styles.leftFixedBtns} onClick={(e: Event) => e.stopPropagation()}>
|
|
|
- {popupData.activeIndex != 0 && (
|
|
|
- <div class={[styles.btnsWrap, styles.prePoint]}>
|
|
|
- <div class={styles.fullBtn} onClick={() => handlePreAndNext('up')}>
|
|
|
- <img src={iconUp} />
|
|
|
- <span style={{ textAlign: 'center' }}>上一个</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- {popupData.activeIndex != data.itemList.length - 1 && (
|
|
|
- <div class={styles.btnsWrap}>
|
|
|
- <div class={styles.fullBtn} onClick={() => handlePreAndNext('down')}>
|
|
|
- <span style={{ textAlign: 'center' }}>下一个</span>
|
|
|
- <img src={iconDown} />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </Transition>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div
|
|
|
- style={{ transform: activeData.model ? '' : 'translateY(-100%)' }}
|
|
|
- id="coursePlayHeader"
|
|
|
- class={styles.headerContainer}
|
|
|
- ref={headeRef}
|
|
|
- >
|
|
|
- <div class={styles.backBtn} onClick={() => goback()}>
|
|
|
- <Icon name={iconBack} />
|
|
|
- 返回
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class={styles.menu}
|
|
|
- onClick={() => {
|
|
|
- showIndex.value += 1
|
|
|
- if (showIndex.value > 0) {
|
|
|
- effectIndex.value = effectIndex.value >= effects.length ? 0 : effectIndex.value + 1
|
|
|
- }
|
|
|
- setModelOpen()
|
|
|
- }}
|
|
|
- >
|
|
|
- {popupData.tabName} {showIndex.value > 0 ? `动画${effectIndex.value}` : ''}
|
|
|
- </div>
|
|
|
- {data.isCourse && <PlayRecordTime ref={playRef} list={data.itemList} />}
|
|
|
- </div>
|
|
|
-
|
|
|
- <Popup
|
|
|
- class={styles.popup}
|
|
|
- overlayClass={styles.overlayClass}
|
|
|
- position="right"
|
|
|
- round
|
|
|
- v-model:show={popupData.open}
|
|
|
- onClose={() => {
|
|
|
- const item = data.itemList[popupData.activeIndex]
|
|
|
- if (item?.type == 'VIDEO' && !item.videoEle?.paused) {
|
|
|
- setModelOpen()
|
|
|
- }
|
|
|
- }}
|
|
|
- >
|
|
|
- <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.tabName = res.tabName
|
|
|
- popupData.open = false
|
|
|
- toggleMaterial()
|
|
|
- }}
|
|
|
- />
|
|
|
- </Popup>
|
|
|
-
|
|
|
- <Popup
|
|
|
- class={styles.popup}
|
|
|
- overlayClass={styles.overlayClass}
|
|
|
- position="right"
|
|
|
- round
|
|
|
- v-model:show={popupData.guideOpen}
|
|
|
- onClose={() => {
|
|
|
- const item = data.itemList[popupData.activeIndex]
|
|
|
- if (item?.type == 'VIDEO' && !item.videoEle?.paused) {
|
|
|
- setModelOpen()
|
|
|
- }
|
|
|
- }}
|
|
|
- >
|
|
|
- <OGuide />
|
|
|
- </Popup>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
-})
|
