chore: update

src/modules/live/test/components/Live.vue

@@ -76,7 +76,7 @@ const {
   },
   onStop: (blob) => {
     props.onStop && props.onStop(blob)
-    handleUpdateRecord()
+    handleUpdateRecord({ live_video_size: blob.size.toString() })
     // 保存录像到本地
     if (props.isLocalUpload) saveAs(blob, `${fileName.value}.mp4`)
   },
@@ -117,7 +117,7 @@ const handleUpload = () => {
   dialog.open({ accept: 'video/mp4' })
   dialog.onChange(async ([file]) => {
     const res = await upload(file)
-    handleUpdateRecord({ id: recordId.value, live_video_addres: res })
+    handleUpdateRecord({ id: recordId.value, live_video_addres: res, live_video_size: file.size.toString() })
     ElMessage.success('上传成功')
   })
 }

src/modules/live/test/components/LiveCover.vue

@@ -10,7 +10,12 @@ function scrollToBottom() {
   if (!messageRef.value) return
   messageRef.value.scrollTo(0, messageRef.value.scrollHeight)
 }
-watch(props.messages, () => nextTick(() => scrollToBottom()))
+
+watch(
+  () => props.messages,
+  () => nextTick(() => scrollToBottom()),
+  { deep: true }
+)
 
 const userName = computed(() => {
   const user = detail.value?.current_user || {}

src/modules/live/test/components/LivePlayback.vue

@@ -16,8 +16,11 @@ const userName = computed(() => {
 const video = ref(null)
 
 const playing = ref(false)
-
+const duration = ref(0)
 onMounted(() => {
+  video.value.onloadedmetadata = (e) => {
+    duration.value = e.target.duration
+  }
   video.value.ontimeupdate = () => {
     currentTime.value = Math.floor(video.value?.currentTime) || 0
   }
@@ -35,6 +38,15 @@ onMounted(() => {
 const togglePlay = () => {
   playing.value ? video.value?.pause() : video.value?.play()
 }
+
+const handleInput = () => {
+  video.value.pause()
+}
+const handleChange = (value) => {
+  video.value.currentTime = value
+  video.value.play()
+}
+const hover = ref(false)
 </script>
 
 <template>
@@ -44,8 +56,13 @@ const togglePlay = () => {
     </div>
     <div class="live-bd">
       <video :src="record.live_video_addres" ref="video"></video>
-      <LiveCover :messages="messages" :stats="stats" :viewers="viewers">
-        <div class="play-button" @click="togglePlay">
+      <LiveCover
+        :messages="messages"
+        :stats="stats"
+        :viewers="viewers"
+        @mouseover="hover = true"
+        @mouseleave="hover = false">
+        <div class="live-play-button" @click="togglePlay" v-show="hover || !playing">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="32"
@@ -77,6 +94,15 @@ const togglePlay = () => {
             </defs>
           </svg>
         </div>
+        <div class="live-slider" v-show="hover">
+          <el-slider
+            v-model="currentTime"
+            :max="duration"
+            size="small"
+            :show-tooltip="false"
+            @change="handleChange"
+            @input="handleInput" />
+        </div>
       </LiveCover>
     </div>
   </div>
@@ -113,20 +139,27 @@ const togglePlay = () => {
     margin-top: 10px;
     text-align: center;
   }
-
-  .play-button {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: #00000033;
-    border-radius: 1000px;
-    cursor: pointer;
-    height: 64px;
-    width: 64px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+}
+.live-play-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #00000033;
+  border-radius: 1000px;
+  cursor: pointer;
+  height: 64px;
+  width: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100000;
+}
+.live-slider {
+  position: absolute;
+  bottom: 5px;
+  left: 10px;
+  right: 10px;
+  z-index: 100000;
 }
 </style>

src/modules/live/test/composables/useLiveChat.ts

@@ -152,9 +152,9 @@ export function useLiveChat(options: UseLiveChatOptions = {}) {
     currentTime,
     () => {
       if (defaultMessages && defaultMessages.length > 0) {
-        // reset()
+        reset()
         defaultMessages.forEach((message) => {
-          if (message.currentTime == currentTime.value) addMessage(message)
+          if (message.currentTime <= currentTime.value) addMessage(message)
         })
       }
     },