fix

src/views/coursewarePlay/index.tsx

@@ -64,8 +64,6 @@ import Tool, { ToolItem, ToolType } from './component/tool'
 import Tools from './component/tools/pen'
 import Pen from './component/tools/pen'
 
-const DEV = import.meta.env.DEV
-
 export default defineComponent({
   name: 'CoursewarePlay',
   setup() {
@@ -154,7 +152,7 @@ export default defineComponent({
       videoRefs: {}
     })
     const activeData = reactive({
-      isAutoPlay: !DEV, // 是否自动播放
+      isAutoPlay: true, // 是否自动播放
       nowTime: 0,
       model: true, // 遮罩
       isAnimation: true, // 是否动画
@@ -229,7 +227,7 @@ export default defineComponent({
       let _firstIndex = list.findIndex((n: any) => n.materialId == route.query.kId)
       _firstIndex = _firstIndex > -1 ? _firstIndex : 0
       const item = list[_firstIndex]
-      
+
       // 是否自动播放
       if (activeData.isAutoPlay) {
         item.autoPlay = true
@@ -272,7 +270,7 @@ export default defineComponent({
           })
           showDialog({
             title: '温馨提示',
-            message: '课件已锁定',
+            message: '课件已锁定'
           }).then((value) => {
             goback()
           })
@@ -398,7 +396,7 @@ export default defineComponent({
       itemActive: '',
       itemName: '',
       guideOpen: false,
-      toolOpen: false, // 工具弹窗控制
+      toolOpen: false // 工具弹窗控制
     })
 
     /**停止所有的播放 */
@@ -438,6 +436,10 @@ export default defineComponent({
       activeData.model = false
       Object.values(data.videoRefs).map((n: any) => n.toggleHideControl(false))
     }
+    const toggleModel = (type: boolean = true) => {
+      activeData.model = type
+      Object.values(data.videoRefs).map((n: any) => n.toggleHideControl(type))
+    }
 
     // 去点名,签退
     const gotoRollCall = (pageTag: string) => {
@@ -625,18 +627,31 @@ export default defineComponent({
 
     /** 打开教学工具 */
     const openStudyTool = (item: ToolItem) => {
-      handleStop()
+      const activeItem = data.itemList[popupData.activeIndex]
+      // 暂停视频和曲谱的播放
+      if (activeItem.type === 'VIDEO' && activeItem.videoEle) {
+        activeItem.videoEle.pause()
+      }
+      if (activeItem.type === 'SONG') {
+        activeItem.iframeRef?.contentWindow?.postMessage({ api: 'setPlayState' }, '*')
+      }
       clearModel()
       popupData.toolOpen = false
       studyData.type = item.type
 
-      switch(item.type){
+      switch (item.type) {
         case 'pen':
           studyData.penShow = true
-          break;
+          break
       }
     }
 
+    /** 关闭教学工具 */
+    const closeStudyTool = () => {
+      studyData.type = 'init'
+      toggleModel()
+    }
+
     return () => (
       <div class={styles.playContent}>
         <div
@@ -767,10 +782,10 @@ export default defineComponent({
                   </div>
 
                   <div class={[styles.btnsWrap, styles.btnsBottom]}>
-                    <div class={styles.fullBtn} onClick={() => (popupData.guideOpen = true)}>
+                    {/* <div class={styles.fullBtn} onClick={() => (popupData.guideOpen = true)}>
                       <img src={iconTouping} />
                       <span>投屏</span>
-                    </div>
+                    </div> */}
                     {data.isCourse && (
                       <>
                         <div
@@ -838,7 +853,13 @@ export default defineComponent({
             {popupData.tabName}
           </div>
 
-          <div class={styles.headRight}>
+          <div
+            class={styles.headRight}
+            onClick={(e: Event) => {
+              e.stopPropagation()
+              clearTimeout(activeData.timer)
+            }}
+          >
             <div class={styles.rightBtn} onClick={() => (popupData.guideOpen = true)}>
               <img src={iconTouping} />
             </div>
@@ -890,7 +911,9 @@ export default defineComponent({
           <OGuide />
         </Popup>
 
-        {studyData.penShow && <Pen show={studyData.type === 'pen'} close={() => studyData.type = 'init'} />}
+        {studyData.penShow && (
+          <Pen show={studyData.type === 'pen'} close={() => closeStudyTool()} />
+        )}
       </div>
     )
   }