|
|
@@ -46,7 +46,15 @@ import { usePageVisibility, useRect } from '@vant/use'
|
|
|
import PlayRecordTime from './playRecordTime'
|
|
|
import dayjs from 'dayjs'
|
|
|
|
|
|
-import { Pagination, Navigation, EffectFade, EffectFlip, EffectCreative, Lazy } from 'swiper'
|
|
|
+import {
|
|
|
+ Pagination,
|
|
|
+ Navigation,
|
|
|
+ Virtual,
|
|
|
+ EffectFade,
|
|
|
+ EffectFlip,
|
|
|
+ EffectCreative,
|
|
|
+ Lazy
|
|
|
+} from 'swiper'
|
|
|
import { Swiper, SwiperSlide } from 'swiper/vue'
|
|
|
import 'swiper/less'
|
|
|
import 'swiper/less/effect-fade'
|
|
|
@@ -236,6 +244,7 @@ export default defineComponent({
|
|
|
if (route.query.kId) {
|
|
|
item = list.find((n: any) => n.materialId == route.query.kId)
|
|
|
const _firstIndex = list.findIndex((n: any) => n.materialId == route.query.kId)
|
|
|
+ console.log('🚀 ~ item:', _firstIndex, list)
|
|
|
popupData.firstIndex = _firstIndex > -1 ? _firstIndex : 0
|
|
|
}
|
|
|
item = item ? item : list[0] || {}
|
|
|
@@ -245,13 +254,14 @@ export default defineComponent({
|
|
|
popupData.itemActive = item.id
|
|
|
popupData.itemName = item.name
|
|
|
popupData.activeIndex = popupData.firstIndex
|
|
|
+ console.log("🚀 ~ popupData.activeIndex:", popupData.activeIndex)
|
|
|
item.autoPlay = true
|
|
|
item.muted = true
|
|
|
item.display = true
|
|
|
}
|
|
|
// console.log('🚀 ~ list', list)
|
|
|
- data.itemList = list
|
|
|
nextTick(() => {
|
|
|
+ data.itemList = list
|
|
|
postMessage({
|
|
|
api: 'courseLoading',
|
|
|
content: {
|
|
|
@@ -567,177 +577,185 @@ export default defineComponent({
|
|
|
return () => (
|
|
|
<div class={styles.playContent}>
|
|
|
<div class={styles.coursewarePlay} style={{ width: parentContainer.width }}>
|
|
|
- <Swiper
|
|
|
- style={{ height: '100%' }}
|
|
|
- effect="creative"
|
|
|
- modules={[Pagination, Navigation, EffectFade, EffectFlip, EffectCreative]}
|
|
|
- creativeEffect={swiperType.value}
|
|
|
- direction="vertical"
|
|
|
- navigation
|
|
|
- allowTouchMove={false}
|
|
|
- onSwiper={(swiper: any) => {
|
|
|
- swiperDom.value = swiper
|
|
|
- }}
|
|
|
- onSlideChange={(swiper: any) => {
|
|
|
- handleSwipeChange(swiper.activeIndex)
|
|
|
- }}
|
|
|
- >
|
|
|
- {data.itemList.map((m: any, mIndex: number) => {
|
|
|
- return (
|
|
|
- <SwiperSlide class={styles.swipeItem}>
|
|
|
- <div
|
|
|
- class={[styles.itemDiv]}
|
|
|
- onClick={() => {
|
|
|
- clearTimeout(activeData.timer)
|
|
|
- if (Date.now() - activeData.nowTime < 300) {
|
|
|
- handleDbClick(m)
|
|
|
- return
|
|
|
- }
|
|
|
- activeData.nowTime = Date.now()
|
|
|
- activeData.timer = setTimeout(() => {
|
|
|
- activeData.model = !activeData.model
|
|
|
- setModelOpen()
|
|
|
- }, 300)
|
|
|
- }}
|
|
|
- >
|
|
|
- {m.type === 'VIDEO' ? (
|
|
|
- <>
|
|
|
- <video
|
|
|
- class={['player']}
|
|
|
- playsinline="false"
|
|
|
- muted={m.muted}
|
|
|
- preload="auto"
|
|
|
- data-vid={m.id}
|
|
|
- src={m.content}
|
|
|
- loop={m.loop}
|
|
|
- autoplay={m.autoPlay}
|
|
|
- onLoadedmetadata={(e: Event) => {
|
|
|
- const videoEle = e.target as unknown as HTMLVideoElement
|
|
|
- m.currentTime = videoEle.currentTime
|
|
|
- m.duration = videoEle.duration
|
|
|
- m.videoEle = videoEle
|
|
|
- m.isprepare = true
|
|
|
- }}
|
|
|
- onTimeupdate={(e: Event) => {
|
|
|
- if (!m.isprepare) return
|
|
|
- const videoEle = e.target as unknown as HTMLVideoElement
|
|
|
- m.currentTime = videoEle.currentTime
|
|
|
- m.progress = Number((videoEle.currentTime / m.duration) * 100)
|
|
|
- }}
|
|
|
- onPlay={() => {
|
|
|
- // 播放
|
|
|
- m.paused = false
|
|
|
- console.log('播放')
|
|
|
- setModelOpen()
|
|
|
- // 第一次播放
|
|
|
- if (m.muted) {
|
|
|
- m.muted = false
|
|
|
- m.autoPlay = false
|
|
|
- }
|
|
|
- }}
|
|
|
- onPause={() => {
|
|
|
- //暂停
|
|
|
- clearTimeout(activeData.timer)
|
|
|
- m.paused = true
|
|
|
- }}
|
|
|
- onEnded={() => handleEnded(m)}
|
|
|
- >
|
|
|
- <source src={m.content} type="video/mp4" />
|
|
|
- </video>
|
|
|
- {m.muted && (
|
|
|
- <div class={styles.loadWrap}>
|
|
|
- <Vue3Lottie animationData={playLoadData}></Vue3Lottie>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- <div
|
|
|
- style={{ transform: activeData.model ? '' : 'translateY(100%)' }}
|
|
|
- class={styles.bottomFixedContainer}
|
|
|
- onClick={(e: Event) => {
|
|
|
- e.stopPropagation()
|
|
|
- setModelOpen()
|
|
|
- }}
|
|
|
- >
|
|
|
- <div style={{ opacity: m.isprepare ? '1' : '0' }}>
|
|
|
- <div class={styles.time}>
|
|
|
- <span>{getSecondRPM(m.currentTime)}</span>
|
|
|
- <span>{getSecondRPM(m.duration)}</span>
|
|
|
+ {data.itemList.length && (
|
|
|
+ <Swiper
|
|
|
+ style={{ height: '100%' }}
|
|
|
+ class={styles.swiperContainer}
|
|
|
+ effect="creative"
|
|
|
+ modules={[Pagination, Navigation, EffectCreative]}
|
|
|
+ creativeEffect={swiperType.value}
|
|
|
+ direction="vertical"
|
|
|
+ navigation
|
|
|
+ allowTouchMove={false}
|
|
|
+ onSwiper={(swiper: any) => {
|
|
|
+ swiperDom.value = swiper
|
|
|
+ }}
|
|
|
+ onSlideChange={(swiper: any) => {
|
|
|
+ handleSwipeChange(swiper.activeIndex)
|
|
|
+ }}
|
|
|
+ initialSlide={popupData.activeIndex}
|
|
|
+ >
|
|
|
+ {data.itemList.map((m: any, mIndex: number) => {
|
|
|
+ return (
|
|
|
+ <SwiperSlide class={styles.swipeItem} key={'index' + mIndex}>
|
|
|
+ <div
|
|
|
+ class={[styles.itemDiv]}
|
|
|
+ onClick={() => {
|
|
|
+ clearTimeout(activeData.timer)
|
|
|
+ if (Date.now() - activeData.nowTime < 300) {
|
|
|
+ handleDbClick(m)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ activeData.nowTime = Date.now()
|
|
|
+ activeData.timer = setTimeout(() => {
|
|
|
+ activeData.model = !activeData.model
|
|
|
+ setModelOpen()
|
|
|
+ }, 300)
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {m.type === 'VIDEO' ? (
|
|
|
+ <>
|
|
|
+ <video
|
|
|
+ class={['player']}
|
|
|
+ playsinline="false"
|
|
|
+ muted={m.muted}
|
|
|
+ preload="auto"
|
|
|
+ data-vid={m.id}
|
|
|
+ src={m.content}
|
|
|
+ loop={m.loop}
|
|
|
+ autoplay={m.autoPlay}
|
|
|
+ onLoadedmetadata={(e: Event) => {
|
|
|
+ const videoEle = e.target as unknown as HTMLVideoElement
|
|
|
+ m.currentTime = videoEle.currentTime
|
|
|
+ m.duration = videoEle.duration
|
|
|
+ m.videoEle = videoEle
|
|
|
+ m.isprepare = true
|
|
|
+ }}
|
|
|
+ onTimeupdate={(e: Event) => {
|
|
|
+ if (!m.isprepare) return
|
|
|
+ const videoEle = e.target as unknown as HTMLVideoElement
|
|
|
+ m.currentTime = videoEle.currentTime
|
|
|
+ m.progress = Number((videoEle.currentTime / m.duration) * 100)
|
|
|
+ }}
|
|
|
+ onPlay={() => {
|
|
|
+ // 播放
|
|
|
+ m.paused = false
|
|
|
+ console.log('播放')
|
|
|
+ setModelOpen()
|
|
|
+ // 第一次播放
|
|
|
+ if (m.muted) {
|
|
|
+ m.muted = false
|
|
|
+ m.autoPlay = false
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ onPause={() => {
|
|
|
+ //暂停
|
|
|
+ clearTimeout(activeData.timer)
|
|
|
+ m.paused = true
|
|
|
+ }}
|
|
|
+ onEnded={() => handleEnded(m)}
|
|
|
+ >
|
|
|
+ <source src={m.content} type="video/mp4" />
|
|
|
+ </video>
|
|
|
+ {m.muted && (
|
|
|
+ <div class={styles.loadWrap}>
|
|
|
+ <Vue3Lottie animationData={playLoadData}></Vue3Lottie>
|
|
|
</div>
|
|
|
- <div class={styles.slider}>
|
|
|
- <Slider
|
|
|
- onClick={() => setModelOpen()}
|
|
|
- buttonSize={16}
|
|
|
- step={1}
|
|
|
- modelValue={m.progress}
|
|
|
- onUpdate:modelValue={(val: any) => {
|
|
|
- console.log('val', val)
|
|
|
- m.progress = val
|
|
|
- handleChangeSlider(m)
|
|
|
- }}
|
|
|
- onDragStart={(e: Event) => {
|
|
|
- // 开始拖动,暂停播放
|
|
|
- console.log('开始拖动')
|
|
|
- // 如果拖动之前,视频是播放状态,拖动完毕后继续播放
|
|
|
- if (!m.paused) {
|
|
|
- m.isDrage = true
|
|
|
- }
|
|
|
- handlePaused(m)
|
|
|
- }}
|
|
|
- onDragEnd={(e: Event) => {
|
|
|
- console.log('结束拖动')
|
|
|
- if (m.isDrage) {
|
|
|
- m.isDrage = false
|
|
|
- handlePlay(m)
|
|
|
- }
|
|
|
- }}
|
|
|
- min={0}
|
|
|
- max={100}
|
|
|
- />
|
|
|
+ )}
|
|
|
+ <div
|
|
|
+ style={{ transform: activeData.model ? '' : 'translateY(100%)' }}
|
|
|
+ class={styles.bottomFixedContainer}
|
|
|
+ onClick={(e: Event) => {
|
|
|
+ e.stopPropagation()
|
|
|
+ setModelOpen()
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <div style={{ opacity: m.isprepare ? '1' : '0' }}>
|
|
|
+ <div class={styles.time}>
|
|
|
+ <span>{getSecondRPM(m.currentTime)}</span>
|
|
|
+ <span>{getSecondRPM(m.duration)}</span>
|
|
|
+ </div>
|
|
|
+ <div class={styles.slider}>
|
|
|
+ <Slider
|
|
|
+ onClick={() => setModelOpen()}
|
|
|
+ buttonSize={16}
|
|
|
+ step={1}
|
|
|
+ modelValue={m.progress}
|
|
|
+ onUpdate:modelValue={(val: any) => {
|
|
|
+ console.log('val', val)
|
|
|
+ m.progress = val
|
|
|
+ handleChangeSlider(m)
|
|
|
+ }}
|
|
|
+ onDragStart={(e: Event) => {
|
|
|
+ // 开始拖动,暂停播放
|
|
|
+ console.log('开始拖动')
|
|
|
+ // 如果拖动之前,视频是播放状态,拖动完毕后继续播放
|
|
|
+ if (!m.paused) {
|
|
|
+ m.isDrage = true
|
|
|
+ }
|
|
|
+ handlePaused(m)
|
|
|
+ }}
|
|
|
+ onDragEnd={(e: Event) => {
|
|
|
+ console.log('结束拖动')
|
|
|
+ if (m.isDrage) {
|
|
|
+ m.isDrage = false
|
|
|
+ handlePlay(m)
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ min={0}
|
|
|
+ max={100}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class={styles.actions}>
|
|
|
- <div class={styles.actionBtn}>
|
|
|
- {m.isprepare ? (
|
|
|
- <>
|
|
|
- {m.paused ? (
|
|
|
- <img src={iconplay} onClick={(e: Event) => handlePlay(m)} />
|
|
|
- ) : (
|
|
|
- <img src={iconpause} onClick={(e: Event) => handlePaused(m)} />
|
|
|
- )}
|
|
|
- </>
|
|
|
- ) : (
|
|
|
- <Loading color="#fff" />
|
|
|
- )}
|
|
|
+ <div class={styles.actions}>
|
|
|
+ <div class={styles.actionBtn}>
|
|
|
+ {m.isprepare ? (
|
|
|
+ <>
|
|
|
+ {m.paused ? (
|
|
|
+ <img src={iconplay} onClick={(e: Event) => handlePlay(m)} />
|
|
|
+ ) : (
|
|
|
+ <img
|
|
|
+ src={iconpause}
|
|
|
+ onClick={(e: Event) => handlePaused(m)}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </>
|
|
|
+ ) : (
|
|
|
+ <Loading color="#fff" />
|
|
|
+ )}
|
|
|
|
|
|
- {m.loop ? (
|
|
|
- <img
|
|
|
- src={iconLoopActive}
|
|
|
- onClick={(e: Event) => (m.loop = false)}
|
|
|
- />
|
|
|
- ) : (
|
|
|
- <img src={iconLoop} onClick={(e: Event) => (m.loop = true)} />
|
|
|
- )}
|
|
|
+ {m.loop ? (
|
|
|
+ <img
|
|
|
+ src={iconLoopActive}
|
|
|
+ onClick={(e: Event) => (m.loop = false)}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <img src={iconLoop} onClick={(e: Event) => (m.loop = true)} />
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ <div>{m.name}</div>
|
|
|
</div>
|
|
|
- <div>{m.name}</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </>
|
|
|
- ) : m.type === 'IMG' ? (
|
|
|
- <img src={m.content} />
|
|
|
- ) : (
|
|
|
- <MusicScore
|
|
|
- data-vid={m.id}
|
|
|
- music={m}
|
|
|
- onSetIframe={(el: any) => {
|
|
|
- m.iframeRef = el
|
|
|
- }}
|
|
|
- />
|
|
|
- )}
|
|
|
- </div>
|
|
|
- </SwiperSlide>
|
|
|
- )
|
|
|
- })}
|
|
|
- </Swiper>
|
|
|
+ </>
|
|
|
+ ) : m.type === 'IMG' ? (
|
|
|
+ <img src={m.content} />
|
|
|
+ ) : (
|
|
|
+ <MusicScore
|
|
|
+ data-vid={m.id}
|
|
|
+ music={m}
|
|
|
+ onSetIframe={(el: any) => {
|
|
|
+ m.iframeRef = el
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </SwiperSlide>
|
|
|
+ )
|
|
|
+ })}
|
|
|
+ </Swiper>
|
|
|
+ )}
|
|
|
+
|
|
|
<div
|
|
|
style={{ transform: activeData.model ? '' : 'translateY(-100%)' }}
|
|
|
id="coursePlayHeader"
|
