chore: update

src/modules/course/components/CoursePlayerVideo.vue

@@ -7,6 +7,7 @@ import { Swiper, SwiperSlide } from 'swiper/vue'
 import { Navigation } from 'swiper'
 import 'swiper/css'
 import 'swiper/css/navigation'
+import { Close } from '@element-plus/icons-vue'
 import AppVideoPlayer from '@/components/base/AppVideoPlayer.vue'
 import { getCoursePlayInfo, getVideoRecords, uploadVideoRecords } from '../api'
 import { useLog } from '@/composables/useLog'
@@ -40,7 +41,12 @@ watchEffect(() => {
 
 const playerWrapperRef = ref(null)
 const playerIsVisible = useElementVisibility(playerWrapperRef)
-
+let miniPlayerClosed = $ref(false)
+watchEffect(() => {
+  if (playerIsVisible.value) {
+    miniPlayerClosed = false
+  }
+})
 /**
  * 视频播放器相关
  */
@@ -270,7 +276,7 @@ onUnmounted(() => {
 <template>
   <div class="course-player-wrapper">
     <div ref="playerWrapperRef" :style="resource ? `height: 510px` : ''">
-      <div class="player-box" :class="{ 'is-pinned': !playerIsVisible }">
+      <div class="player-box" :class="{ 'is-pinned': !playerIsVisible && !miniPlayerClosed }">
         <AppVideoPlayer
           :options="options"
           :src="src"
@@ -282,6 +288,9 @@ onUnmounted(() => {
           style="width: 100%; height: 100%"
           v-if="src"
         ></AppVideoPlayer>
+        <el-icon class="mini-player-close" @click="miniPlayerClosed = true">
+          <Close></Close>
+        </el-icon>
       </div>
     </div>
     <!-- 设置 -->
@@ -338,6 +347,7 @@ onUnmounted(() => {
   border-bottom: 1px solid #e2e2e2;
 }
 .player-box {
+  position: relative;
   width: 100%;
   height: 100%;
   &.is-pinned {
@@ -353,8 +363,20 @@ onUnmounted(() => {
     :deep(.vjs-fullscreen-control) {
       display: none;
     }
+    .mini-player-close {
+      display: block;
+    }
   }
 }
+.mini-player-close {
+  display: none;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  color: #fff;
+  z-index: 1000;
+  cursor: pointer;
+}
 .vjs-icon-hd,
 .vjs-icon-cog {
   font-size: 1.8em;