Merge branch 'master' of http://git.dayaedu.com/lex/orchestra-app

src/teacher/main.ts

@@ -26,7 +26,6 @@ const app = createApp(App).use(Vue3Lottie)
 
 // 获取token
 promisefiyPostMessage({ api: 'getToken' }).then((res: any) => {
-  console.log(res, 'res')
   const content = res.content
   if (content?.accessToken) {
     setAuth(content.tokenType + ' ' + content.accessToken)

src/views/coursewarePlay/component/musicScore.module.less

@@ -1,13 +1,14 @@
 .musicScore {
   position: relative;
+  width: 100%;
   height: 100%;
   -webkit-overflow-scrolling: touch;
   overflow: scroll;
   .container {
     display: block;
     border: none;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
   }
   .musicModel {
     position: absolute;

src/views/coursewarePlay/index.module.less

@@ -30,13 +30,17 @@
 }
 .backBtn {
   color: #fff;
-  width: 40px;
   height: 26px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index: 10;
-  padding: 4px 10px 4px 20px;
+  padding: 4px 10px 4px 15px;
+  :global{
+    .van-icon{
+      margin-right: 8px;
+    }
+  }
 }
 .menu {
   position: absolute;
@@ -83,7 +87,7 @@
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  right: 20px;
+  right: 12px;
   z-index: 10;
   .point {
     margin-top: 10px;
@@ -99,7 +103,7 @@
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  left: 26px;
+  left: 12px;
   z-index: 10;
   .prePoint {
     margin-bottom: 8px;
@@ -115,6 +119,8 @@
   align-items: center;
   color: #fff;
   justify-content: space-evenly;
+  overflow: hidden;
+  white-space: nowrap;
   &:active {
     opacity: 0.8;
   }
@@ -126,6 +132,7 @@
   bottom: 0;
   z-index: 10;
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
+  transition: transform 0.5s;
   .time {
     display: flex;
     justify-content: space-between;
@@ -146,16 +153,16 @@
     justify-content: space-between;
     color: #fff;
     font-size: 12px;
-    padding: 0 10px 0 20px;
+    padding: 0 10px 4px 20px;
     align-items: center;
     .actionBtn {
       display: flex;
     }
     .actionBtn > img {
-      width: 26px;
-      height: 26px;
+      width: 30px;
+      height: 30px;
       display: block;
-      padding: 4px 10px 14px 4px;
+      padding: 4px 10px 4px 4px;
     }
   }
 }

src/views/coursewarePlay/index.tsx

@@ -1,5 +1,4 @@
 import {
-  Button,
   closeToast,
   Icon,
   Loading,
@@ -8,9 +7,7 @@ import {
   Slider,
   Swipe,
   SwipeInstance,
-  SwipeItem,
-  Tab,
-  Tabs
+  SwipeItem
 } from 'vant'
 import {
   defineComponent,
@@ -20,8 +17,7 @@ import {
   onUnmounted,
   ref,
   watch,
-  Transition,
-  computed
+  Transition
 } from 'vue'
 import iconBack from './image/back.svg'
 import styles from './index.module.less'
@@ -29,7 +25,7 @@ import 'plyr/dist/plyr.css'
 import request from '@/helpers/request'
 import { state } from '@/state'
 import { useRoute } from 'vue-router'
-import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
+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'
@@ -44,22 +40,49 @@ import Points from './component/points'
 import { browser, getSecondRPM } from '@/helpers/utils'
 import { Vue3Lottie } from 'vue3-lottie'
 import playLoadData from './datas/data.json'
+import { usePageVisibility } from '@vant/use'
 
 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.paused
+        handlePaused(activeItem)
+      } else {
+        // 页面显示,并且
+        if (isPlay.value) handlePlay(activeItem)
+      }
+    })
+    /** 设置播放容器 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('横屏回调')
-        nextTick(() => {
-          setContainer()
-        })
       })
       // 头,包括返回箭头
       postMessage({
@@ -81,20 +104,6 @@ export default defineComponent({
       handleInit(1)
       window.removeEventListener('message', iframeHandle)
     })
-    /** 设置播放容器 16:9 */
-    const parentContainer = reactive({
-      width: '100vw'
-    })
-    const setContainer = () => {
-      let width = screen.height * (16 / 9)
-      console.log('计算的屏幕宽度', width, screen.width)
-      if (width > screen.width) {
-        return
-      }
-      parentContainer.width = width + 'px'
-      console.log('设置宽度', parentContainer.width)
-    }
-    // window.addEventListener('resize', setContainer)
 
     const route = useRoute()
     const headeRef = ref()
@@ -204,7 +213,7 @@ export default defineComponent({
         item.autoPlay = true
         item.muted = true
       }
-      console.log('🚀 ~ list', list)
+      // console.log('🚀 ~ list', list)
       data.itemList = list
     }
     const getDetail = async () => {
@@ -241,6 +250,7 @@ export default defineComponent({
         activeData.model = !activeData.model
       }
     }
+
     onMounted(() => {
       getDetail()
       getCourseSchedule()
@@ -263,26 +273,32 @@ export default defineComponent({
     })
     // 设置当前的激活状态
     const setActiveData = (val: any, oldVal: any) => {
-      handleStopVideo()
-      handleStopMusicScore()
+      handleStop()
     }
     watch(() => popupData.activeIndex, setActiveData)
 
-    // 停止所有的播放
-    const handleStopVideo = () => {
-      data.itemList.forEach((m: any) => {
-        const item = data.itemList[popupData.activeIndex]
-        if (item?.id != m.id) {
-          m.autoPlay = false
-          m.videoEle?.pause()
+    /**停止所有的播放 */
+    const handleStop = () => {
+      const activeItem = data.itemList[popupData.activeIndex]
+      for (let i = 0; i < data.itemList.length; i++) {
+        const item = data.itemList[i]
+        // 停止视频播放
+        if (item.type === 'VIDEO') {
+          // console.log("🚀 ~ item", item)
+          if (item?.id != activeItem.id) {
+            item.currentTime = 0
+            item.progress = 0
+            if (item.videoEle) {
+              item.videoEle.currentTime = 0
+              item.videoEle.pause()
+            }
+          }
         }
-      })
-    }
-    // 停止曲谱的播放
-    const handleStopMusicScore = () => {
-      data.itemList.forEach((m: any) => {
-        m.iframeRef?.contentWindow?.postMessage({ api: 'setPlayState' }, '*')
-      })
+        // 停止曲谱的播放
+        if (item.type === 'SONG') {
+          item.iframeRef?.contentWindow?.postMessage({ api: 'setPlayState' }, '*')
+        }
+      }
     }
     // 切换素材
     const toggleMaterial = () => {
@@ -369,14 +385,12 @@ export default defineComponent({
     }
 
     // 暂停播放
-    const handlePaused = (e: Event, m: any) => {
-      e.stopPropagation()
+    const handlePaused = (m: any) => {
       m.videoEle?.pause()
       m.paused = true
     }
     // 开始播放
-    const handlePlay = (e: Event, m: any) => {
-      e.stopPropagation()
+    const handlePlay = (m: any) => {
       closeToast()
       m.videoEle?.play()
     }
@@ -406,6 +420,7 @@ export default defineComponent({
             ref={swipeRef}
             showIndicators={false}
             loop={false}
+            duration={0}
             vertical
             lazyRender={true}
             touchable={false}
@@ -453,16 +468,18 @@ export default defineComponent({
                               if (!m.isprepare) return
                               const videoEle = e.target as unknown as HTMLVideoElement
                               m.currentTime = videoEle.currentTime
-                              m.progress = Number(
-                                ((videoEle.currentTime / m.duration) * 100).toFixed(1)
-                              )
+                              m.progress = Number((videoEle.currentTime / m.duration) * 100)
                             }}
                             onPlay={() => {
                               // 播放
                               m.paused = false
                               console.log('播放')
                               setModelOpen()
-                              m.muted = false
+                              // 第一次播放
+                              if (m.muted) {
+                                m.muted = false
+                                m.autoPlay = false
+                              }
                             }}
                             onPause={() => {
                               //暂停
@@ -478,90 +495,86 @@ export default defineComponent({
                               <Vue3Lottie animationData={playLoadData}></Vue3Lottie>
                             </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}>
-                                  <Slider
-                                    onClick={() => {
-                                      setModelOpen()
-                                    }}
-                                    style={{ display: m.isprepare ? 'block' : 'none' }}
-                                    buttonSize={16}
-                                    step={0.1}
-                                    modelValue={m.progress}
-                                    onUpdate:modelValue={(val: any) => {
-                                      m.progress = val
-                                      handleChangeSlider(m)
-                                    }}
-                                    onDragStart={(e: Event) => {
-                                      // 开始拖动,暂停播放
-                                      console.log('开始拖动')
-                                      // 如果拖动之前,视频是播放状态,拖动完毕后继续播放
-                                      if (!m.paused) {
-                                        m.isDrage = true
-                                      }
-                                      handlePaused(e, m)
-                                    }}
-                                    onDragEnd={(e: Event) => {
-                                      console.log('结束拖动')
-                                      if (m.isDrage) {
-                                        m.isDrage = false
-                                        handlePlay(e, m)
-                                      }
-                                    }}
-                                    min={0}
-                                    max={100}
-                                  />
-                                </div>
-
-                                <div class={styles.actions}>
-                                  <div class={styles.actionBtn}>
-                                    {m.isprepare ? (
-                                      <>
-                                        {m.paused ? (
-                                          <img
-                                            src={iconplay}
-                                            onClick={(e: Event) => handlePlay(e, m)}
-                                          />
-                                        ) : (
-                                          <img
-                                            src={iconpause}
-                                            onClick={(e: Event) => handlePaused(e, m)}
-                                          />
-                                        )}
-                                      </>
-                                    ) : (
-                                      <Loading color="#fff" />
-                                    )}
+                          <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>
 
-                                    {m.loop ? (
-                                      <img
-                                        src={iconLoopActive}
-                                        onClick={(e: Event) => {
-                                          e.stopPropagation()
-                                          m.loop = false
-                                        }}
-                                      />
+                            <div class={styles.actions}>
+                              <div class={styles.actionBtn}>
+                                {m.isprepare ? (
+                                  <>
+                                    {m.paused ? (
+                                      <img src={iconplay} onClick={(e: Event) => handlePlay(m)} />
                                     ) : (
                                       <img
-                                        src={iconLoop}
-                                        onClick={(e: Event) => {
-                                          e.stopPropagation()
-                                          m.loop = true
-                                        }}
+                                        src={iconpause}
+                                        onClick={(e: Event) => handlePaused(m)}
                                       />
                                     )}
-                                  </div>
-                                  <div>{m.name}</div>
-                                </div>
+                                  </>
+                                ) : (
+                                  <Loading color="#fff" />
+                                )}
+
+                                {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>
+                          {/* <Transition name="bottom">
+                            {activeData.model && (
+                              
                             )}
-                          </Transition>
+                          </Transition> */}
                         </>
                       ) : m.type === 'IMG' ? (
                         <img src={m.content} />