更新

src/views/coursewarePlay/components/playRecordTime/playRecordTime.vue

@@ -6,7 +6,7 @@
 <template>
    <div class="playRecordTime">
       <div class="drop"></div>
-      <div class="time">{{ `${formatTime(playTime)}/${formatTime(props.coursewareTotalTIme)}` }}</div>
+      <div class="time">{{ `${formatTime(playTime)}/${formatTime(props.coursewareTotalTime)}` }}</div>
    </div>
 </template>
 
@@ -16,7 +16,7 @@ import { getCoursewarePlayTime_gyt, coursewarePlayTime_gyt } from "@/api/coursew
 import { httpAjax } from "@/plugin/httpAjax"
 import { ref, onUnmounted } from "vue"
 const props = defineProps<{
-   coursewareTotalTIme: number
+   coursewareTotalTime: number
    modeId: string
 }>()
 
@@ -37,7 +37,7 @@ function getCoursewarePlayTime() {
 }
 _time = setInterval(() => {
    // 播放时间大于总时间
-   if (playTime.value >= props.coursewareTotalTIme) {
+   if (playTime.value >= props.coursewareTotalTime) {
       _time && clearInterval(_time)
       timeRecord > 0 && handleCoursewarePlayTime(props.modeId, timeRecord)
       return

src/views/coursewarePlay/coursewarePlay.vue

@@ -5,67 +5,63 @@
 -->
 <template>
    <div class="coursewarePlay">
-      <videoPlay ref="videoPlayDom" @ended="handleChangeCourseware(1)" :disableEvents="true">
-         <div class="leftTools posTools">
-            <div v-if="activeCoursewareIndex > 0" class="posBtn" @click="handleChangeCourseware(-1)">
-               <img src="@/img/coursewarePlay/shang.png" />
-               <div>上一个</div>
-            </div>
-            <div v-if="activeCoursewareIndex < flattenCoursewareList.length - 1" class="posBtn" @click="handleChangeCourseware(1)">
-               <img src="@/img/coursewarePlay/xia.png" />
-               <div>下一个</div>
-            </div>
+      <videoPlay ref="videoPlayDom" @ended="handleChangeCourseware(1)" :disableEvents="true" />
+      <div class="leftTools posTools">
+         <div v-if="activeCoursewareIndex > 0" class="posBtn" @click="handleChangeCourseware(-1)">
+            <img src="@/img/coursewarePlay/shang.png" />
+            <div>上一个</div>
          </div>
-         <div class="rightTools posTools">
-            <div
-               class="posBtn"
-               @click="
-                  () => {
-                     videoPlayDom?.pauseVideo()
-                     whitePenShow = true
-                  }
-               "
-            >
-               <img src="@/img/coursewarePlay/baiban.png" />
-               <div>白板</div>
-            </div>
-            <div
-               class="posBtn"
-               @click="
-                  () => {
-                     videoPlayDom?.pauseVideo()
-                     penShow = true
-                  }
-               "
-            >
-               <img src="@/img/coursewarePlay/pizhu.png" />
-               <div>批注</div>
-            </div>
-            <div class="posBtn" @click="drawerShow = true">
-               <img src="@/img/coursewarePlay/zhishidian.png" />
-               <div>知识点</div>
-            </div>
-            <div class="posBtn" @click="handleCoursewareEnd">
-               <img src="@/img/coursewarePlay/jieshu.png" />
-               <div>结束</div>
-            </div>
+         <div v-if="activeCoursewareIndex < flattenCoursewareList.length - 1" class="posBtn" @click="handleChangeCourseware(1)">
+            <img src="@/img/coursewarePlay/xia.png" />
+            <div>下一个</div>
          </div>
-         <div class="topTools">
-            <div class="leftMenu">
-               <img @click="handleGoBack" class="backImg" src="@/img/coursewarePlay/back.png" />
-               <playRecordTime
-                  v-if="route.query.modeId && coursewareTotalTIme && !(userStoreHook.roles === 'GYM')"
-                  :modeId="route.query.modeId as string"
-                  :coursewareTotalTIme="coursewareTotalTIme"
-               />
-            </div>
-            <div class="midMenu">{{ activeCourseware?.parentData.name || "" }}</div>
-            <div class="rightMenu"></div>
+      </div>
+      <div class="rightTools posTools">
+         <div
+            class="posBtn"
+            @click="
+               () => {
+                  videoPlayDom?.pauseVideo()
+                  whitePenShow = true
+               }
+            "
+         >
+            <img src="@/img/coursewarePlay/baiban.png" />
+            <div>白板</div>
+         </div>
+         <div
+            class="posBtn"
+            @click="
+               () => {
+                  videoPlayDom?.pauseVideo()
+                  penShow = true
+               }
+            "
+         >
+            <img src="@/img/coursewarePlay/pizhu.png" />
+            <div>批注</div>
+         </div>
+         <div class="posBtn" @click="drawerShow = true">
+            <img src="@/img/coursewarePlay/zhishidian.png" />
+            <div>知识点</div>
+         </div>
+         <div class="posBtn" @click="handleCoursewareEnd">
+            <img src="@/img/coursewarePlay/jieshu.png" />
+            <div>结束</div>
          </div>
-         <div class="activeName">
-            <div>{{ activeCourseware?.name || "" }}</div>
+      </div>
+      <div class="topTools">
+         <div class="leftMenu">
+            <img @click="handleGoBack" class="backImg" src="@/img/coursewarePlay/back.png" />
+            <playRecordTime
+               v-if="route.query.modeId && coursewareTotalTime && !(userStoreHook.roles === 'GYM')"
+               :modeId="route.query.modeId as string"
+               :coursewareTotalTime="coursewareTotalTime"
+            />
          </div>
-      </videoPlay>
+         <div class="midMenu">{{ activeCourseware?.parentData.name || "" }}</div>
+         <div class="rightMenu"></div>
+      </div>
       <el-drawer class="elDrawer" v-model="drawerShow" :show-close="false">
          <template #header="{ close }">
             <img class="directory" src="@/img/coursewarePlay/kcml.png" />
@@ -111,13 +107,13 @@ import playRecordTime from "./components/playRecordTime"
 import useDialogConfirm from "@/hooks/useDialogConfirm"
 import { getRecentCourseSchedule_gym } from "@/api/homePage.api"
 
+const route = useRoute()
+const userStoreHook = userStore()
 // 批注
 const penShow = ref(false)
 // 白板
 const whitePenShow = ref(false)
-
-const route = useRoute()
-const userStoreHook = userStore()
+/* 获取资源 */
 const videoPlayDom = ref<InstanceType<typeof videoPlay>>()
 const coursewareList = shallowRef<any[]>([]) // 知识点
 const flattenCoursewareList = shallowRef<any[]>([]) // 扁平化coursewareList
@@ -128,15 +124,13 @@ const activeCourseware = computed<undefined | Record<string, any>>(() => {
 const activeCoursewareIndex = ref(0)
 const drawerShow = ref(false)
 // 课程总时间
-const coursewareTotalTIme = ref(0)
+const coursewareTotalTime = ref(0)
 watch(activeCourseware, () => {
-   activeCourseware.value && videoPlayDom.value?.playVideo(activeCourseware.value.content)
-})
-onMounted(() => {
-   document.addEventListener("keydown", handleVideoKeydown)
-})
-onUnmounted(() => {
-   document.removeEventListener("keydown", handleVideoKeydown)
+   activeCourseware.value &&
+      videoPlayDom.value?.playVideo({
+         src: activeCourseware.value.content,
+         name: activeCourseware.value.name
+      })
 })
 getCoursewareList()
 function getCoursewareList() {
@@ -174,7 +168,6 @@ function getCoursewareList() {
       }
    })
 }
-
 let flattenCoursewareListData: any = [] // 临时扁平化数据
 function handlePointList(pointList: any[]) {
    coursewareList.value = filterPointList(pointList)
@@ -195,7 +188,7 @@ function filterPointList(pointList: any[], parentData?: { ids: string[]; name: s
             children: filterPointList(point.children, { ids: [...(parentData?.ids || []), point.id], name: point.name })
          })
       } else {
-         coursewareTotalTIme.value += point.totalMaterialTimeSecond
+         coursewareTotalTime.value += point.totalMaterialTimeSecond
          return Object.assign(point, {
             materialList: point.materialList.map((item: any) => {
                item.parentData = {
@@ -209,7 +202,6 @@ function filterPointList(pointList: any[], parentData?: { ids: string[]; name: s
       }
    })
 }
-
 function handleChangeCourseware(index: -1 | 1) {
    const newIndex = index + activeCoursewareIndex.value
    if (newIndex < 0 || newIndex > flattenCoursewareList.value.length - 1) {
@@ -222,6 +214,14 @@ function handleCourseClick(value: any) {
       return value.id === item.id
    })
 }
+
+/* 按键事件相关 */
+onMounted(() => {
+   document.addEventListener("keydown", handleVideoKeydown)
+})
+onUnmounted(() => {
+   document.removeEventListener("keydown", handleVideoKeydown)
+})
 function handleVideoKeydown(e: KeyboardEvent) {
    const key = e.key
    if (key === "ArrowDown") {
@@ -230,6 +230,8 @@ function handleVideoKeydown(e: KeyboardEvent) {
       handleChangeCourseware(-1)
    }
 }
+
+/* 结束课程 */
 function handleGoBack() {
    window.open("about:blank", "_self")
    window.close()
@@ -282,18 +284,6 @@ function handleCoursewareEnd() {
    width: 100%;
    height: 100%;
    position: relative;
-   .activeName {
-      transition: all 0.5s;
-      position: absolute;
-      right: 30px;
-      bottom: 15px;
-      font-weight: 500;
-      font-size: 20px;
-      color: #ffffff;
-      display: flex;
-      align-items: flex-end;
-      padding-bottom: 13px;
-   }
    .topTools {
       position: absolute;
       top: 0;
@@ -371,10 +361,6 @@ function handleCoursewareEnd() {
          opacity: 0;
          transform: translateY(-100%);
       }
-      .activeName {
-         opacity: 0;
-         transform: translateY(100%);
-      }
    }
    &:deep(.elDrawer.el-drawer) {
       width: 346px !important;

src/views/coursewarePlay/videoPlay/videoPlay.vue

@@ -62,10 +62,13 @@
                   </div>
                </el-popover>
             </div>
-            <div class="rightPlayController"></div>
+            <div class="rightPlayController">
+               <div class="videoName">
+                  <div>{{ videoName || "" }}</div>
+               </div>
+            </div>
          </div>
       </div>
-      <slot></slot>
    </div>
 </template>
 
@@ -87,6 +90,7 @@ const emits = defineEmits<{
 const videoId = "video" + UUID()
 let playerVm: Record<string, any>
 let isReady = false // 是否初始化播放器播放器
+const videoName = ref("")
 
 /* 时间控制器 */
 const timeController = reactive({
@@ -190,7 +194,8 @@ function initVideo() {
  */
 // 接口请求可能在播放之前 所以这里等待播放器初始化
 let _time: any
-function playVideo(src: string) {
+function playVideo({ src, name }: { src: string; name: string }) {
+   videoName.value = name
    _time && clearInterval(_time)
    if (isReady) {
       handlePlayVideo(src)
@@ -313,6 +318,7 @@ defineExpose({
       color: #fff;
       transition: all 0.5s;
       &:hover {
+         cursor: initial;
          opacity: initial !important;
          transform: initial !important;
       }
@@ -387,6 +393,15 @@ defineExpose({
                }
             }
          }
+         .rightPlayController {
+            display: flex;
+            align-items: center;
+            .videoName {
+               font-weight: 500;
+               font-size: 20px;
+               color: #ffffff;
+            }
+         }
       }
    }
 }