Merge branch 'iteration_0307' into jenkins

src/views/coursewarePlay/index.tsx

@@ -260,6 +260,7 @@ export default defineComponent({
         item.autoPlay = true
       }
       popupData.activeIndex = _firstIndex
+      popupData.playIndex = _firstIndex
       popupData.tabName = item.tabName
       popupData.tabActive = item.knowledgePointId
       popupData.itemActive = item.id
@@ -433,6 +434,7 @@ export default defineComponent({
     const popupData = reactive({
       open: false,
       activeIndex: 0,
+      playIndex: 0,
       tabActive: '',
       tabName: '',
       itemActive: '',
@@ -447,10 +449,8 @@ export default defineComponent({
         const activeItem = data.itemList[i]
 
         if (activeItem.type === 'VIDEO') {
-          if (popupData.activeIndex !== i) {
-            activeItem.videoEle?.pause()
-            activeItem.videoEle?.stop()
-          }
+          activeItem.videoEle?.pause()
+          activeItem.videoEle?.stop()
         }
         // console.log('🚀 ~ activeItem:', activeItem)
         // 停止曲谱的播放
@@ -598,6 +598,7 @@ export default defineComponent({
 
       acitveTimer.value = setTimeout(
         () => {
+          popupData.playIndex = index
           const item = data.itemList[index]
           if (item) {
             popupData.tabActive = item.knowledgePointId
@@ -612,7 +613,6 @@ export default defineComponent({
             const _effectIndex = effectIndex.value + 1
             effectIndex.value = _effectIndex >= effects.length - 1 ? 0 : _effectIndex
 
-            handleStop()
             if (item && item.type === 'VIDEO') {
               // 自动播放下一个视频
               clearTimeout(activeData.timer)
@@ -732,17 +732,13 @@ export default defineComponent({
           >
             <div class={styles.wraps}>
               {data.itemList.map((m: any, mIndex: number) => {
-                const isRender = Math.abs(popupData.activeIndex - mIndex) < 3
-                const isEmtry = Math.abs(popupData.activeIndex - mIndex) > 2
-                // const isRender = Math.abs(popupData.activeIndex - mIndex) < 2;
-                //   const isEmtry = Math.abs(popupData.activeIndex - mIndex) > 4;
-                // if (isRender) {
-                //   m.isRender = true
-                // }
+                const isRenderItem = Math.abs(popupData.activeIndex - mIndex) < 2
+                const isRender = Math.abs(popupData.playIndex - mIndex) < 2
+                const isEmtry = popupData.activeIndex != mIndex
                 // 判断是否是当前选中的元素
-                const activeEle = popupData.activeIndex === mIndex ? true : false
+                const activeEle = popupData.playIndex === mIndex ? true : false
 
-                return isRender ? (
+                return isRenderItem ? (
                   <div
                     key={'index' + mIndex}
                     data-id={'data' + mIndex}
@@ -750,7 +746,7 @@ export default defineComponent({
                       styles.itemDiv,
                       activeEle && styles.itemActive,
                       activeData.isAnimation && styles.acitveAnimation,
-                      Math.abs(popupData.activeIndex - mIndex) < 2 ? styles.show : styles.hide
+                      isRenderItem ? styles.show : styles.hide
                     ]}
                     style={
                       mIndex < popupData.activeIndex
@@ -778,7 +774,7 @@ export default defineComponent({
                       }, 300)
                     }}
                   >
-                    {m.type === 'VIDEO' ? (
+                    {isRender && m.type === 'VIDEO' && (
                       <>
                         <VideoPlay
                           ref={(v: any) => (data.videoRefs[mIndex] = v)}
@@ -821,9 +817,9 @@ export default defineComponent({
                           )}
                         </Transition>
                       </>
-                    ) : m.type === 'IMG' ? (
-                      <img src={m.content} />
-                    ) : (
+                    )}
+                    {isRender && m.type === 'IMG' && <img src={m.content} />}
+                    {isRender && m.type === 'SONG' && (
                       <MusicScore
                         activeModel={activeData.model}
                         data-vid={m.id}
@@ -833,6 +829,11 @@ export default defineComponent({
                         }}
                       />
                     )}
+                    {!isRender && (
+                      <div class={styles.loadWrap}>
+                        <Vue3Lottie animationData={playLoadData}></Vue3Lottie>
+                      </div>
+                    )}
                   </div>
                 ) : (
                   ''