修改全屏功能

src/components/card-preview/index.tsx

@@ -32,12 +32,12 @@ export default defineComponent({
     /** 是否下载 只支持 video audio */
     isDownload: {
       type: Boolean,
-      default: false
+      default: true
     },
     /** 是否下载 只支持 video audio */
     fullscreen: {
       type: Boolean,
-      default: false
+      default: true
     },
     /** 从哪里使用 */
     from: {

src/components/card-preview/song-modal/index.module.less

@@ -1,144 +1,157 @@
-.audioWrap {
-  width: 100%;
-  height: 518px;
-  background-color: #fff;
-}
-
-.audioContainer {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: 0 0 78px 0;
-
-  &>div {
-    flex: 1;
-  }
-
-  .audio {
-    position: absolute;
-    top: 0;
-    opacity: 0;
-  }
-
-  .tempVudio {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 80px;
-    left: 0;
-    padding: 0;
-  }
-
-  canvas {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.controls {
-  border-radius: 0 0 16px 16px !important;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(26px);
-  height: 80px;
-  padding: 0 26px 0 26px !important;
-  transition: all 0.5s;
-  display: flex;
-  align-items: center;
-  transition: all .5s;
-
-  .time {
-    display: flex;
-    justify-content: space-between;
-    color: #fff;
-    padding: 4px 12px 4px;
-    font-size: 24px;
-    font-weight: 600;
-    line-height: 33px;
-    min-width: 150px;
-
-    .line {
-      font-size: 12px;
-    }
-
-    :global {
-      .plyr__time {
-        font-size: max(22px, 12Px);
-      }
-
-      .plyr__time+.plyr__time:before {
-        content: '';
-        margin-right: 0;
-      }
-    }
-  }
-}
-
-.actions {
-  display: flex;
-  justify-content: space-between;
-  height: 100%;
-  color: #fff;
-  font-size: 12px;
-  align-items: center;
-
-  .actionWrap {
-    display: flex;
-    align-items: center;
-  }
-
-  .actionBtn {
-    display: flex;
-    width: 40px;
-    height: 40px;
-    padding: 0;
-    background: transparent;
-    cursor: pointer;
-
-    &>img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-
-  .iconReplay {
-    width: 40px;
-    height: 40px;
-    background-color: transparent;
-    cursor: pointer;
-    margin-left: 22px;
-    margin-right: 10px;
-
-    &>img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-
-.slider {
-  width: 100%;
-  padding: 0 8px 0 12px;
-
-  :global {
-
-    .n-slider .n-slider-rail .n-slider-rail__fill,
-    .n-slider .n-slider-handles .n-slider-handle-wrapper {
-      transition: all .2s;
-    }
-  }
-}
-
-.sectionAnimate {
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(100%);
-  transition: all .5s;
-}
+.audioWrap {
+  width: 100%;
+  height: 518px;
+  background-color: #fff;
+}
+
+.audioContainer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 0 78px 0;
+
+  &>div {
+    flex: 1;
+  }
+
+  .audio {
+    position: absolute;
+    top: 0;
+    opacity: 0;
+  }
+
+  .tempVudio {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 80px;
+    left: 0;
+    padding: 0;
+  }
+
+  canvas {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.controls {
+  // border-radius: 0 0 16px 16px !important;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(26px);
+  height: 80px;
+  padding: 0 26px 0 26px !important;
+  transition: all 0.5s;
+  display: flex;
+  align-items: center;
+  transition: all .5s;
+
+  .time {
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    padding: 4px 12px 4px;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 33px;
+    min-width: 150px;
+
+    .line {
+      font-size: 12px;
+    }
+
+    :global {
+      .plyr__time {
+        font-size: max(22px, 12Px);
+      }
+
+      .plyr__time+.plyr__time:before {
+        content: '';
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+  color: #fff;
+  font-size: 12px;
+  align-items: center;
+
+  .actionWrap {
+    display: flex;
+    align-items: center;
+  }
+
+  .actionBtn {
+    display: flex;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    background: transparent;
+    cursor: pointer;
+
+    &>img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+
+  .iconReplay {
+    width: 36px;
+    height: 36px;
+    background-color: transparent;
+    cursor: pointer;
+    margin-left: 22px;
+    margin-right: 10px;
+
+    &>img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .iconDownload {
+    width: 36px;
+    height: 36px;
+    margin-left: 22px;
+    background-color: transparent;
+    cursor: pointer;
+
+    &>img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.slider {
+  width: 100%;
+  padding: 0 8px 0 12px;
+
+  :global {
+
+    .n-slider .n-slider-rail .n-slider-rail__fill,
+    .n-slider .n-slider-handles .n-slider-handle-wrapper {
+      transition: all .2s;
+    }
+  }
+}
+
+.sectionAnimate {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(100%);
+  transition: all .5s;
+}

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

@@ -4,10 +4,13 @@ import iconplay from '@views/attend-class/image/icon-pause.png';
 import iconpause from '@views/attend-class/image/icon-play.png';
 import iconReplay from '@views/attend-class/image/icon-replay.png';
 import iconPreviewDownload from '@views/attend-class/image/icon-preivew-download.png';
+import iconFullscreen from '@views/attend-class/image/icon-fullscreen.png';
+import iconFullscreenExit from '@views/attend-class/image/icon-fullscreen-exit.png';
 import { NSlider, useMessage } from 'naive-ui';
 import Vudio from 'vudio.js';
 import tickMp3 from '@views/attend-class/image/tick.mp3';
 import { saveAs } from 'file-saver';
+import { exitFullscreen } from '/src/utils';
 
 export default defineComponent({
   name: 'audio-play',
@@ -32,8 +35,11 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const videoId =
+      'vFullscreen' + Date.now() + Math.floor(Math.random() * 100);
     const message = useMessage();
     const audioForms = reactive({
+      isFullScreen: false, // 是否全屏
       paused: true,
       currentTimeNum: 0,
       currentTime: '00:00',
@@ -141,8 +147,38 @@ export default defineComponent({
       vudio1.dance();
     });
 
+    /** 全屏 */
+    const isElementFullscreen = (element: any) => {
+      const dom: any = document;
+      return (
+        element ===
+        (dom.fullscreenElement ||
+          dom.webkitFullscreenElement ||
+          dom.mozFullScreenElement ||
+          dom.msFullscreenElement)
+      );
+    };
+    const onFullScreen = () => {
+      const el: any = document.querySelector('#' + videoId);
+
+      //   //进入全屏
+      if (el) {
+        if (isElementFullscreen(el)) {
+          exitFullscreen();
+          audioForms.isFullScreen = false;
+        } else {
+          (el.requestFullscreen && el.requestFullscreen()) ||
+            (el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
+            (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) ||
+            (el.msRequestFullscreen && el.msRequestFullscreen());
+          audioForms.isFullScreen = true;
+        }
+        // audioForms.isFullScreen = isElementFullscreen(el);
+      }
+    };
+
     return () => (
-      <div class={styles.audioWrap}>
+      <div class={styles.audioWrap} id={videoId}>
         <div class={styles.audioContainer}>
           <audio
             ref={audio}
@@ -227,13 +263,21 @@ export default defineComponent({
             </div>
             <div class={styles.actionWrap}>
               {props.isDownload && (
-                <button
-                  class={styles.iconReplay}
-                  onClick={onDownload}
-                  style={{ marginLeft: '15px' }}>
+                <button class={styles.iconDownload} onClick={onDownload}>
                   <img src={iconPreviewDownload} />
                 </button>
               )}
+              {props.fullscreen && (
+                <button class={styles.iconDownload} onClick={onFullScreen}>
+                  <img
+                    src={
+                      audioForms.isFullScreen
+                        ? iconFullscreenExit
+                        : iconFullscreen
+                    }
+                  />
+                </button>
+              )}
             </div>
           </div>
         </div>

src/components/card-preview/video-modal/index.module.less

@@ -93,8 +93,8 @@
 
     .actionBtn {
       display: flex;
-      width: 40px;
-      height: 40px;
+      width: 36px;
+      height: 36px;
       padding: 0;
       background: transparent;
       cursor: pointer;
@@ -108,8 +108,8 @@
 
     .actionBtnSpeed {
       position: relative;
-      width: 40px;
-      height: 40px;
+      width: 36px;
+      height: 36px;
       background-color: transparent;
       cursor: pointer;
 
@@ -121,8 +121,8 @@
 
 
     .iconReplay {
-      width: 40px;
-      height: 40px;
+      width: 36px;
+      height: 36px;
       background-color: transparent;
       cursor: pointer;
       margin: 0 22px;
@@ -134,9 +134,9 @@
     }
 
     .iconDownload {
-      width: 40px;
-      height: 40px;
-      margin-left: 12px;
+      width: 36px;
+      height: 36px;
+      margin-left: 22px;
       background-color: transparent;
       cursor: pointer;
 
@@ -211,7 +211,7 @@
     font-weight: 500;
     height: 22Px;
     color: #198CFE;
-    min-width: 40px;
+    min-width: 36px;
     text-align: center;
     vertical-align: text-bottom;
 
@@ -261,7 +261,7 @@
 //   // backdrop-filter: blur(26px);
 //   height: 80px !important;
 //   min-height: 80px !important;
-//   padding: 0px 40px !important;
+//   padding: 0px 36px !important;
 //   z-index: 999;
 
 //   .time {
@@ -272,7 +272,7 @@
 //     font-size: 24px;
 //     font-weight: 600;
 //     line-height: 33px;
-//     min-width: 140px;
+//     min-width: 136px;
 
 //     .line {
 //       font-size: 12px;

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

@@ -10,6 +10,7 @@ import iconpause from '@views/attend-class/image/icon-play.png';
 import iconReplay from '@views/attend-class/image/icon-replay.png';
 import iconPreviewDownload from '@views/attend-class/image/icon-preivew-download.png';
 import iconFullscreen from '@views/attend-class/image/icon-fullscreen.png';
+import iconFullscreenExit from '@views/attend-class/image/icon-fullscreen-exit.png';
 import iconSpeed from '@views/attend-class/image/icon-speed.png';
 import { NSlider, useMessage } from 'naive-ui';
 import { saveAs } from 'file-saver';
@@ -50,6 +51,7 @@ export default defineComponent({
       'vFullscreen' + Date.now() + Math.floor(Math.random() * 100);
     const { src, poster, isEmtry } = toRefs(props);
     const videoFroms = reactive({
+      isFullScreen: false, // 是否全屏
       paused: true,
       currentTimeNum: 0,
       currentTime: '00:00',
@@ -173,12 +175,15 @@ export default defineComponent({
       if (el) {
         if (isElementFullscreen(el)) {
           exitFullscreen();
+          videoFroms.isFullScreen = false;
         } else {
           (el.requestFullscreen && el.requestFullscreen()) ||
             (el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
             (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) ||
             (el.msRequestFullscreen && el.msRequestFullscreen());
+          videoFroms.isFullScreen = true;
         }
+        // videoFroms.isFullScreen = isElementFullscreen(el);
       }
     };
 
@@ -341,7 +346,13 @@ export default defineComponent({
                 )}
                 {props.fullscreen && (
                   <button class={styles.iconDownload} onClick={onFullScreen}>
-                    <img src={iconFullscreen} />
+                    <img
+                      src={
+                        videoFroms.isFullScreen
+                          ? iconFullscreenExit
+                          : iconFullscreen
+                      }
+                    />
                   </button>
                 )}
               </div>

src/views/attend-class/model/train-type/index.tsx

@@ -417,7 +417,6 @@ export default defineComponent({
           from={props.from}
           v-model:show={previewShow.value}
           item={preivewItem.value}
-          isDownload={isDownload.value}
         />
 
         <NModal

src/views/classList/work-item/index.tsx

@@ -46,8 +46,6 @@ export default defineComponent({
     //     return false;
     //   }
     // });
-
-    console.log(props.item, 'fileList');
     return () => (
       <div
         class={[
@@ -210,8 +208,6 @@ export default defineComponent({
         <CardPreview
           v-model:show={previewShow.value}
           item={preivewItem.value}
-          isDownload
-          fullscreen
         />
 
         <NModal