fix:课件播放

src/views/courseware-play/component/musicScore.tsx

@@ -1,12 +1,12 @@
-import { defineComponent, ref, nextTick, onMounted, watch } from 'vue'
-import styles from './musicScore.module.less'
-import qs from 'query-string'
-import iconStart from '../image/icon-start.svg'
-import { listenerMessage, postMessage } from '@/helpers/native-message'
-import { Loading, Skeleton } from 'vant'
-import { usePageVisibility } from '@vant/use'
-import { useRoute } from 'vue-router'
-import { browser } from '@/helpers/utils'
+import { defineComponent, ref, nextTick, onMounted, watch } from 'vue';
+import styles from './musicScore.module.less';
+import qs from 'query-string';
+import iconStart from '../image/icon-start.svg';
+import { listenerMessage, postMessage } from '@/helpers/native-message';
+import { Loading, Skeleton } from 'vant';
+import { usePageVisibility } from '@vant/use';
+import { useRoute } from 'vue-router';
+import { browser } from '@/helpers/utils';
 
 export default defineComponent({
   name: 'musicScore',
@@ -21,92 +21,106 @@ export default defineComponent({
   },
   emits: ['setIframe'],
   setup(props, { emit }) {
-    const browserInfo = browser()
-    const route = useRoute()
-    const isLoading = ref(false)
-    const pageVisibility = usePageVisibility()
+    const browserInfo = browser();
+    const route = useRoute();
+    const isLoading = ref(false);
+    const pageVisibility = usePageVisibility();
     /** 页面显示和隐藏 */
-    watch(pageVisibility, (value) => {
-      console.log("🚀 ~ value:", value)
+    watch(pageVisibility, value => {
+      console.log('🚀 ~ value:', value);
       if (value == 'hidden') {
-        isLoading.value = false
+        isLoading.value = false;
       }
-    })
-    const iframeRef = ref()
-    const isLoaded = ref(false)
-    const renderError = ref(false)
-    const renderSuccess = ref(false)
-    const Authorization = sessionStorage.getItem('Authorization') || ''
+    });
+    const iframeRef = ref();
+    const isLoaded = ref(false);
+    const renderError = ref(false);
+    const renderSuccess = ref(false);
+    const Authorization =
+      sessionStorage.getItem('Authorization') ||
+      'bearer 529d1359-20c6-4ea2-b2ba-2694cdeda8a4';
     const origin = /(localhost|192)/.test(location.host)
-      ? 'https://test.lexiaoya.cn'
-      : location.origin
-    const query = qs.stringify({
-      id: props.music.content,
-      modelType: 'practice',
-      headerHeight: 32,
-      Authorization: Authorization
-    })
-    let src = `http://192.168.3.114:3000/instrument.html?id=${props.music.content}&modelType=practise&Authorization=bearer c35c286f-fff1-4ba7-86fc-d911c79b39ab`
+      ? 'https://dev.kt.colexiu.com'
+      : location.origin;
+    let src = qs.stringifyUrl({
+      url: origin + '/instrument',
+      query: {
+        id: props.music.content,
+        modelType: 'practise',
+        Authorization: Authorization
+      }
+    });
     const checkView = () => {
       fetch(src)
         .then(() => {
-          renderSuccess.value = true
-          renderError.value = false
-        })
-        .catch((err) => {
-          renderError.value = true
+          renderSuccess.value = true;
+          renderError.value = false;
         })
-    }
+        .catch(err => {
+          renderError.value = true;
+        });
+    };
     watch(props.music, () => {
-      if (renderSuccess.value) return
-      renderError.value = false
+      if (renderSuccess.value) return;
+      renderError.value = false;
       if (props.music.display) {
-        checkView()
+        checkView();
       }
-    })
+    });
 
     // 去云教练完整版
     const gotoAccomany = () => {
-      if (isLoading.value) return
-      if (!browserInfo.ios){
-        isLoading.value = true
+      if (isLoading.value) return;
+      if (!browserInfo.ios) {
+        isLoading.value = true;
       }
-      const parmas = qs.stringify({
-        id: props.music.content
-      })
-      // let src = `${location.origin}/orchestra-music-score/?` + parmas
-      let src = `https://test.lexiaoya.cn/orchestra-music-score/?_t=1687590480955&id=11707&modelType=practice&modeType=json&Authorization=bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOlsib2F1dGgyLXJlc291cmNlIl0sImNsaWVudFR5cGUiOiJCQUNLRU5EIiwidXNlcl9uYW1lIjoiMTgxNjI4NTU4MDAiLCJzY29wZSI6WyJhbGwiXSwidXNlcklkIjoiMTAwMDE0OSIsImF1dGhvcml0aWVzIjpbIjE4MTYyODU1ODAwIl0sImp0aSI6IjY0MzA2NjllLTE5NGItNDk3Yy1hMDQ5LWM4YWUxMGU0NDNiOCIsImNsaWVudF9pZCI6ImptZWR1LWJhY2tlbmQifQ.aeJ0o-lSfx1Ok-YptZuC-AUY6M7k3LK9rr0Bmx7sj81pPt2HDiDqeT2PuriYdJacxWnxboyhdG_lwU0QK-W-vON97c45NQpSEFLVpZ0m1xdIqwllwf20xhyj5YJwdOFUzxf1TNEfGsHZg66J7wEJQBSzlmQwcxmEE5lqLVD8o_3f2SBqnWCj9RqE4air7FUemllMnZiu8HsS-TKtLDaGa_XW8Yb_Zjzzz6r5UcYNI-C1uKPXg18o1dhHBJ8O-Pl0U8WivPRub_opvO2NSn5L9YtPt7Dd50UeSwaIOdMeCGdii1bg__h77Stek1_5IaZLYkoo2gvmUA-xk09TwCQBpA`
-      postMessage({
-        api: 'openAccompanyWebView',
-        content: {
-          url: src,
-          orientation: 0,
-          isHideTitle: true,
-          statusBarTextColor: false,
-          isOpenLight: true
+      const Authorization =
+        sessionStorage.getItem('Authorization') ||
+        'bearer 529d1359-20c6-4ea2-b2ba-2694cdeda8a4';
+      const origin = /(localhost|192)/.test(location.host)
+        ? 'https://dev.kt.colexiu.com'
+        : location.origin;
+      let src = qs.stringifyUrl({
+        url: origin + '/instrument',
+        query: {
+          id: props.music.content,
+          modelType: 'practise',
+          Authorization: Authorization
         }
-      }, () => {
-        if (browserInfo.ios){
-          isLoading.value = true
+      });
+      postMessage(
+        {
+          api: 'openAccompanyWebView',
+          content: {
+            url: src,
+            orientation: 0,
+            isHideTitle: true,
+            statusBarTextColor: false,
+            isOpenLight: true
+          }
+        },
+        () => {
+          if (browserInfo.ios) {
+            isLoading.value = true;
+          }
         }
-      })
-    }
+      );
+    };
     listenerMessage('webViewOnResume', () => {
-      isLoading.value = false
-    })
+      isLoading.value = false;
+    });
 
     return () => (
       <div class={styles.musicScore}>
         <iframe
           ref={iframeRef}
           onLoad={(e: Event) => {
-            emit('setIframe', iframeRef.value)
-            isLoaded.value = true
+            emit('setIframe', iframeRef.value);
+            isLoaded.value = true;
           }}
           class={[styles.container, 'musicIframe']}
           frameborder="0"
-          src={src}
-        ></iframe>
+          src={src}></iframe>
         {isLoaded.value && (
           <div
             style={{
@@ -114,10 +128,9 @@ export default defineComponent({
             }}
             class={styles.startBtn}
             onClick={(e: Event) => {
-              e.stopPropagation()
-              gotoAccomany()
-            }}
-          >
+              e.stopPropagation();
+              gotoAccomany();
+            }}>
             <img src={iconStart} />
           </div>
         )}
@@ -125,6 +138,6 @@ export default defineComponent({
           <Skeleton class={styles.skeleton} row={8} />
         </div>
       </div>
-    )
+    );
   }
-})
+});

src/views/courseware-play/component/points.tsx

@@ -63,14 +63,7 @@ export default defineComponent({
                   });
                 }}>
                 <div class={styles.cover}>
-                  {item.type === 'VIDEO' && (
-                    <img src="https://daya.ks3-cn-beijing.ksyuncs.com/1687681877690iShot2023-06-25_16.31.11.png" />
-                  )}
-                  {item.type === 'IMG' && <img src={item.content} />}
-                  {item.type === 'AUDIO' && <img src={item.content} />}
-                  {item.type === 'SONG' && (
-                    <img src={item.img} />
-                  )}
+                  <img src={item.url} />
                 </div>
                 <div class={styles.title}>
                   <div class={styles.tag}>{types[item.type]}</div>

src/views/courseware-play/index.tsx

@@ -152,44 +152,45 @@ export default defineComponent({
       data.knowledgePointList = [
         {
           id: '1',
-          name: '乐器讲解 萨克斯',
+          name: '歌曲表演 大鹿',
+          title: '歌曲表演 大鹿',
           type: 'VIDEO',
-          content: 'https://courseware.lexiaoya.cn/%E5%BF%85%E5%AD%A6%E5%BF%85%E7%9C%8B-%E8%90%A8%E5%85%8B%E6%96%AF-1-C4-4.mp4'
+          content:
+            'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1687838624636.mp4',
+          url: 'https://daya.ks3-cn-beijing.ksyun.com/202306/TiLloDA.jpg'
         },
         {
           id: '2',
-          name: '歌曲表演 大鹿',
+          name: '知识 音的高低',
+          title: '知识 音的高低',
           type: 'IMG',
-          content: 'https://daya.ks3-cn-beijing.ksyuncs.com/1687681629423%E4%B9%A6%E9%A1%B5.png'
+          content: 'https://daya.ks3-cn-beijing.ksyun.com/202306/TiLlteU.png',
+          url: 'https://daya.ks3-cn-beijing.ksyun.com/202306/TiLlteU.png'
         },
         {
           id: '3',
           name: '欣赏 永远在童话里',
+          title: '欣赏 永远在童话里',
           type: 'IMG',
-          content: 'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1686815979899.png'
+          content: 'https://daya.ks3-cn-beijing.ksyun.com/202306/TiLlxJ0.png',
+          url: 'https://daya.ks3-cn-beijing.ksyun.com/202306/TiLlxJ0.png'
         },
         {
           id: '4',
-          name: '唱歌 上学歌',
-          type: 'SONG',
-          img: "https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-first/1687673062603-1.png",
-          content: '43539'
-        },
-        {
-          id: '5',
-          name: '唱歌 无别',
+          name: '彩虹岛',
+          title: '彩虹岛',
           type: 'SONG',
-          img: "https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-first/1687686201378-1.png",
-          content: '43540'
+          content: '22078',
+          url: 'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-fixed/1675770786664-1.png'
         }
       ];
       popupData.itemActive = data.knowledgePointList[0].id;
-      data.itemList = data.knowledgePointList.map((m: any) => {
+      data.itemList = data.knowledgePointList.map((m: any, index: number) => {
         return {
           ...m,
           iframeRef: null,
           videoEle: null,
-          autoPlay: false, //加载完成是否自动播放
+          autoPlay: index === 0, //加载完成是否自动播放
           isprepare: false, // 视频是否加载完成
           isRender: false // 是否渲染了
         };
@@ -399,11 +400,11 @@ export default defineComponent({
               });
             }
           }
-        //   requestAnimationFrame(() => {
-        //     const _effectIndex = effectIndex.value + 1;
-        //     effectIndex.value =
-        //       _effectIndex >= effects.length - 1 ? 0 : _effectIndex;
-        //   });
+          //   requestAnimationFrame(() => {
+          //     const _effectIndex = effectIndex.value + 1;
+          //     effectIndex.value =
+          //       _effectIndex >= effects.length - 1 ? 0 : _effectIndex;
+          //   });
         },
         activeData.isAnimation ? 800 : 0
       );