添加控制

src/components/card-preview/listen-modal/index.tsx

@@ -1,66 +1,67 @@
-import { defineComponent, ref, watch } from 'vue';
-import styles from './index.module.less';
-import { useUserStore } from '/src/store/modules/users';
-import { vaildMusicScoreUrl } from '/src/utils/urlUtils';
-import { iframeDislableKeyboard } from '/src/utils';
-
-export default defineComponent({
-  name: 'song-modal',
-  props: {
-    item: {
-      type: Object,
-      default: () => ({})
-    },
-    activeStatus: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['setIframe'],
-  setup(props, { emit }) {
-    const userStore = useUserStore();
-    const iframeRef = ref();
-    const isLoaded = ref(false);
-
-    const src = `${vaildMusicScoreUrl()}/instrument?v=${new Date().getTime()}/#/view-figner?Authorization=${
-      userStore.getToken
-    }&code=${props.item.content}&platform=pc&type=listenMode&linkSource=class`;
-    // if (/(localhost|192)/.test(location.host)) {
-    //   src = `http://localhost:3001/instrument.html#/view-figner?Authorization=${userStore.getToken}&code=${props.item.content}&platform=pc&type=listenMode`;
-    // }
-    // if (props.item.dataJson) {
-    //   src += '&dataJson=' + props.item.dataJson;
-    // }
-
-    watch(
-      () => props.activeStatus,
-      () => {
-        if (!props.activeStatus) {
-          iframeRef.value?.contentWindow?.postMessage(
-            {
-              api: 'setPlayState',
-              data: {
-                code: props.item.content
-              }
-            },
-            '*'
-          );
-        }
-      }
-    );
-    return () => (
-      <div class={styles.musicScore}>
-        <iframe
-          ref={iframeRef}
-          onLoad={(val: any) => {
-            emit('setIframe', iframeRef.value);
-            isLoaded.value = true;
-            iframeDislableKeyboard(val.target);
-          }}
-          class={[styles.container, 'musicIframe']}
-          frameborder="0"
-          src={src}></iframe>
-      </div>
-    );
-  }
-});
+import { defineComponent, ref, watch } from 'vue';
+import styles from './index.module.less';
+import { useUserStore } from '/src/store/modules/users';
+import { vaildMusicScoreUrl } from '/src/utils/urlUtils';
+import { iframeDislableKeyboard } from '/src/utils';
+
+export default defineComponent({
+  name: 'song-modal',
+  props: {
+    item: {
+      type: Object,
+      default: () => ({})
+    },
+    activeStatus: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['setIframe'],
+  setup(props, { emit }) {
+    const userStore = useUserStore();
+    const iframeRef = ref();
+    const isLoaded = ref(false);
+
+    const src = `${vaildMusicScoreUrl()}/instrument?v=${new Date().getTime()}/#/view-figner?Authorization=${
+      userStore.getToken
+    }&code=${props.item.content}&platform=pc&type=listenMode&linkSource=class`;
+    // if (/(192)/.test(location.host)) {
+    //   src = `http://192.168.3.220:3000/instrument.html#/view-figner?Authorization=${userStore.getToken}&code=${props.item.content}&platform=pc&type=listenMode&linkSource=class`;
+    // }
+    // if (props.item.dataJson) {
+    //   src += '&dataJson=' + props.item.dataJson;
+    // }
+
+    console.log(src, 'src');
+    watch(
+      () => props.activeStatus,
+      () => {
+        if (!props.activeStatus) {
+          iframeRef.value?.contentWindow?.postMessage(
+            {
+              api: 'setPlayState',
+              data: {
+                code: props.item.content
+              }
+            },
+            '*'
+          );
+        }
+      }
+    );
+    return () => (
+      <div class={styles.musicScore}>
+        <iframe
+          ref={iframeRef}
+          onLoad={(val: any) => {
+            emit('setIframe', iframeRef.value);
+            isLoaded.value = true;
+            iframeDislableKeyboard(val.target);
+          }}
+          class={[styles.container, 'musicIframe']}
+          frameborder="0"
+          src={src}></iframe>
+      </div>
+    );
+  }
+});

src/views/attend-class/index.tsx

@@ -393,6 +393,8 @@ export default defineComponent({
       window.addEventListener('offline', handleOffline);
 
       document.addEventListener('keydown', (e: KeyboardEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
         if (
           data.nextEndShow ||
           data.removeVisiable ||
@@ -418,7 +420,7 @@ export default defineComponent({
           // if (popupData.activeIndex === data.itemList.length - 1) return;
           setModalOpen();
           handlePreAndNext('down');
-        } else if (e.code === 'Space') {
+        } else if (e.code === 'Tab') {
           console.log('Space clicked');
 
           const activeItem = data.itemList[popupData.activeIndex];
@@ -432,16 +434,17 @@ export default defineComponent({
           }
           if (activeItem.type === 'MUSIC') {
             activeItem.iframeRef?.contentWindow?.postMessage(
-              { api: 'setPlayState' },
+              { api: 'startPlayState' },
+              '*'
+            );
+          }
+          if (activeItem.type === 'LISTEN') {
+            console.log(activeItem.type, 'listening');
+            activeItem.iframeRef?.contentWindow?.postMessage(
+              { api: 'startPlayState' },
               '*'
             );
           }
-          // if (activeItem.type === 'LISTEN') {
-          //   activeItem.iframeRef?.contentWindow?.postMessage(
-          //     { api: 'setPlayState' },
-          //     '*'
-          //   );
-          // }
           if (activeItem.type === 'RHYTHM') {
             activeItem.iframeRef?.contentWindow?.postMessage(
               { api: 'setPlayState', data: true },