feat: 视频增加加载中的状态

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

@@ -14,9 +14,11 @@ const userName = computed(() => {
 })
 
 const video = ref(null)
-
 const playing = ref(false)
 const duration = ref(0)
+const loading = ref(true) // 新增的 loading 状态
+const hover = ref(false)
+
 onMounted(() => {
   video.value.ondurationchange = (e) => {
     if (e.target.duration === Infinity) {
@@ -25,7 +27,6 @@ onMounted(() => {
       video.value.currentTime = 0
     }
     duration.value = e.target.duration === Infinity ? parseFloat(record.value.live_duration) : e.target.duration
-    console.log('ondurationchange', e.target.duration)
   }
   video.value.ontimeupdate = () => {
     currentTime.value = video.value.currentTime
@@ -39,6 +40,12 @@ onMounted(() => {
   video.value.onended = () => {
     playing.value = false
   }
+  video.value.onwaiting = () => {
+    loading.value = true
+  }
+  video.value.oncanplay = () => {
+    loading.value = false
+  }
 })
 
 const togglePlay = () => {
@@ -48,8 +55,6 @@ const togglePlay = () => {
 const handleInput = (value) => {
   video.value.currentTime = value
 }
-
-const hover = ref(false)
 </script>
 
 <template>
@@ -58,6 +63,10 @@ const hover = ref(false)
       <p>主播：{{ userName }}</p>
     </div>
     <div class="live-bd">
+      <!-- 显示加载状态 -->
+      <div class="loading-overlay" v-if="loading">
+        <div class="spinner"></div>
+      </div>
       <video :src="record.live_video_addres" preload="metadata" ref="video"></video>
       <LiveCover
         :messages="messages"
@@ -165,4 +174,34 @@ const hover = ref(false)
   right: 10px;
   z-index: 100000;
 }
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 10;
+
+  .spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid transparent;
+    border-top-color: #fff;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
 </style>

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

@@ -46,13 +46,15 @@ const listOptions = {
         return row.live_video_addres ? '已上传' : '未上传'
       },
     },
-    { label: '操作', slots: 'table-x', width: 100 },
+    { label: '操作', slots: 'table-x', width: 150 },
   ],
 }
 
 // 上传视频
 const uploading = ref(false)
+const currentRow = ref()
 const handleUpload = (row) => {
+  currentRow.value = row
   const dialog = useFileDialog()
   dialog.open({ accept: 'video/*' })
   dialog.onChange(async ([file]) => {
@@ -87,7 +89,14 @@ const handleUpload = (row) => {
           <router-link :to="{ path: 'test/view', query: { ...$route.query, id: data.id, record_id: row.id } }"
             >查看</router-link
           >
-          <el-button type="primary" text :disabled="uploading" @click="handleUpload(row)">上传</el-button>
+          <el-button
+            type="primary"
+            text
+            :loading="uploading && currentRow.id === row.id"
+            :disabled="uploading"
+            @click="handleUpload(row)"
+            >上传</el-button
+          >
         </el-button>
       </template>
     </AppList>