Merge branch 'iteration-classroom-listen' into online

src/views/courseware-play/component/instrument-info/index.module.less

@@ -315,6 +315,33 @@
         min-height: 50px;
         background-color: #CBCBCB;
       }
+
+
+      // :global {
+      //   video::-webkit-media-controls-panel {
+      //     width: calc(100% - 2em);
+      //     /* 调整控件宽度以避免边界问题 */
+      //   }
+
+      //   video::-webkit-media-controls-play-button {
+      //     position: absolute;
+      //     top: 50%;
+      //     left: 50%;
+      //     transform: translate(-50%, -50%);
+      //     /* 使播放按钮居中 */
+      //   }
+
+      //   /* 隐藏默认播放控件 */
+      //   video::-webkit-media-controls {
+      //     display: none;
+      //   }
+      // }
     }
   }
-}
+}
+
+// :global {
+//   .media-controls.inline.ios:not(.audio):is(:empty, .shows-start-button, .faded) {
+//     width: 100% !important;
+//   }
+// }

src/views/courseware-play/component/listen-item/index.module.less

@@ -0,0 +1,40 @@
+.tempoItem {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  -webkit-overflow-scrolling: touch;
+  overflow: scroll;
+
+  .container {
+    position: relative;
+    display: block;
+    border: none;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+  }
+
+  .musicModel {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+.skeletonWrap {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  height: 100%;
+  z-index: 1;
+  padding-top: 1.2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  background: #fff;
+  pointer-events: none;
+}

src/views/courseware-play/component/listen-item/index.tsx

@@ -0,0 +1,106 @@
+import { defineComponent, ref, watch } from 'vue';
+import styles from './index.module.less';
+import qs from 'query-string';
+import { storage } from '@/helpers/storage';
+import { ACCESS_TOKEN } from '@/store/mutation-types';
+
+export function vaildMusicScoreUrl() {
+  const url: string = window.location.href;
+  let returnUrl = '';
+  if (/192/.test(url) || /localhost/.test(url)) {
+    //本地环境
+    returnUrl = 'https://test.kt.colexiu.com';
+  } else if (/test/.test(url)) {
+    // dev 环境
+    returnUrl = 'https://test.kt.colexiu.com';
+  } else if (/dev/.test(url)) {
+    returnUrl = 'https://dev.kt.colexiu.com';
+  } else {
+    returnUrl = 'https://mec.colexiu.com';
+  }
+  return returnUrl;
+}
+
+export default defineComponent({
+  name: 'tempo-item',
+  props: {
+    pageVisibility: {
+      type: String,
+      default: ''
+    },
+    show: {
+      type: Boolean,
+      default: false
+    },
+    activeModel: {
+      type: Boolean,
+      default: false
+    },
+    item: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ['setIframe'],
+  setup(props, { emit }) {
+    const iframeRef = ref();
+    const isLoading = ref(false);
+    const isLoaded = ref(false);
+
+    /** 页面显示和隐藏 */
+    watch(
+      () => props.pageVisibility,
+      value => {
+        if (value == 'hidden') {
+          isLoading.value = false;
+        }
+        if (value == 'hidden' && props.show) {
+          iframeRef.value?.contentWindow?.postMessage(
+            { api: 'setPlayState' },
+            '*'
+          );
+        }
+      }
+    );
+    // 是否显示当前曲谱
+    watch(
+      () => props.show,
+      val => {
+        if (!val) {
+          iframeRef.value?.contentWindow?.postMessage(
+            {
+              api: 'setPlayState',
+              data: {
+                code: props.item.content
+              }
+            },
+            '*'
+          );
+        }
+      }
+    );
+
+    const Authorization = storage.get(ACCESS_TOKEN);
+    // const src = `${location.origin}/classroom-app/#/tempo-practice?dataJson=${props.dataJson}&Authorization=${Authorization}&modeType=courseware`;
+    let src = `${vaildMusicScoreUrl()}/instrument/#/view-figner?Authorization=${Authorization}&code=${
+      props.item.content
+    }&type=listenMode&linkSource=class&isPreView=true`;
+    if (/(localhost|192)/.test(location.host)) {
+      src = `https://test.kt.colexiu.com/instrument/#/view-figner?Authorization=${Authorization}&code=${props.item.content}&type=listenMode&linkSource=class&isPreView=true`;
+    }
+
+    return () => (
+      <div class={styles.tempoItem}>
+        <iframe
+          ref={iframeRef}
+          onLoad={(e: Event) => {
+            emit('setIframe', iframeRef.value);
+            isLoaded.value = true;
+          }}
+          class={[styles.container]}
+          frameborder="0"
+          src={src}></iframe>
+      </div>
+    );
+  }
+});

src/views/courseware-play/index.tsx

@@ -55,6 +55,7 @@ import InstrumentInfo from './component/instrument-info';
 import SelectCoursewarePop from '@/components/select-courseware-pop';
 import { debounce } from '../../helpers/utils';
 import TempoItem from './component/tempo-item';
+import ListenItem from './component/listen-item';
 
 export default defineComponent({
   name: 'CoursewarePlay',
@@ -227,7 +228,7 @@ export default defineComponent({
           );
           data.zsdId = currentCourse?.knowledgeList?.[0].id;
           courseList = currentCourse?.knowledgeList?.[0].materialInfo || [];
-          data.currentCourse = currentCourse || {}
+          data.currentCourse = currentCourse || {};
         }
       } else {
         // const res = await api_lessonCoursewareKnowledgeDetailDetail({
@@ -246,7 +247,7 @@ export default defineComponent({
           );
           data.zsdId = currentCourse?.knowledgeList?.[0].id;
           courseList = currentCourse?.knowledgeList?.[0].materialInfo || [];
-          data.currentCourse = currentCourse || {}
+          data.currentCourse = currentCourse || {};
           // console.log('课件类型', data.allList);
         }
       }
@@ -296,9 +297,7 @@ export default defineComponent({
           resource.zsdId = material.id; // 知识点id
           resource.kjId = data.currentCourse.id; // 课件id
           resource.bizId =
-            route.query.tab == 'course'
-              ? resource.materialId
-              : resource.bizId;
+            route.query.tab == 'course' ? resource.materialId : resource.bizId;
           resource.url =
             resource.type === 'SONG'
               ? 'https://oss.dayaedu.com/ktqy/1698420034679a22d3f7a.png'
@@ -347,7 +346,7 @@ export default defineComponent({
         activeData.model = !ev.data.state;
       }
 
-      if (ev.data?.api === 'clickTempo') {
+      if (ev.data?.api === 'clickTempo' || ev.data?.api === 'clickViewFigner') {
         setModelOpen();
       }
     };
@@ -836,7 +835,7 @@ export default defineComponent({
 
     // 是否允许下一页
     const isDownArrow = computed(() => {
-      console.log(22222222222)
+      console.log(22222222222);
       if (popupData.activeIndex < data.itemList.length - 1) {
         return true;
       }
@@ -908,9 +907,9 @@ export default defineComponent({
 
     // 加载新的章节里的课件
     const loadNewCourseware = async (item: any) => {
-      if(item.id === data.kjId) {
+      if (item.id === data.kjId) {
         showSelectCourseware.value = false;
-        return
+        return;
       }
       if (debounceSkip.value) return;
       debounceSkip.value = true;
@@ -956,17 +955,21 @@ export default defineComponent({
         try {
           if (checkType) {
             // @ts-ignore
-            temporaryData.zjId = activeData.coursewareDetailKnowledgeId
+            temporaryData.zjId = activeData.coursewareDetailKnowledgeId;
             // @ts-ignore
-            temporaryData.dyId = activeData.lessonCoursewareDetailId
+            temporaryData.dyId = activeData.lessonCoursewareDetailId;
           }
           const res =
             route.query.tab == 'all'
               ? await api_lessonDetailCourseware({
-                  lessonCoursewareKnowledgeDetailId: checkType ? activeData.coursewareDetailKnowledgeId : item.itemActive
+                  lessonCoursewareKnowledgeDetailId: checkType
+                    ? activeData.coursewareDetailKnowledgeId
+                    : item.itemActive
                 })
               : await api_classDetailCourseware({
-                  lessonCoursewareKnowledgeDetailId: checkType ? activeData.coursewareDetailKnowledgeId : item.itemActive
+                  lessonCoursewareKnowledgeDetailId: checkType
+                    ? activeData.coursewareDetailKnowledgeId
+                    : item.itemActive
                 });
           if (res?.code == 200 && res.data?.length) {
             data.coursewareList = res.data;
@@ -1193,6 +1196,15 @@ export default defineComponent({
                           show={popupData.activeIndex === mIndex}
                         />
                       )}
+                      {m.type === 'LISTEN' && (
+                        <ListenItem
+                          pageVisibility={pageVisibility.value}
+                          show={popupData.activeIndex === mIndex}
+                          activeModel={activeData.model}
+                          data-vid={m.id}
+                          item={m}
+                        />
+                      )}
                     </>
                     {/* )} */}
                   </div>
@@ -1297,10 +1309,10 @@ export default defineComponent({
               popupData.open = false;
               toggleMaterial(res.itemActive, res.zsdId, res.kjId);
             }}
-            onCourseSelect={ async () => {
+            onCourseSelect={async () => {
               popupData.open = false;
-              checkCourseware({}, 'same')
-            }}            
+              checkCourseware({}, 'same');
+            }}
           />
         </Popup>
         {/* 知识点列表 */}