From 16574930f71394f194e8cabf340cd1506d898e56 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sat, 3 Sep 2022 16:28:15 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E8=A7=86=E9=A2=91=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E5=A4=B1=E8=B4=A5=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../element/VideoElement/VideoPlayer/index.vue   | 10 ++++++----
 .../element/VideoElement/VideoPlayer/style.scss  | 16 +++++++++++++++-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/views/components/element/VideoElement/VideoPlayer/index.vue b/src/views/components/element/VideoElement/VideoPlayer/index.vue
index bd0b0a75..0da92162 100644
--- a/src/views/components/element/VideoElement/VideoPlayer/index.vue
+++ b/src/views/components/element/VideoElement/VideoPlayer/index.vue
@@ -11,6 +11,8 @@
     @click="autoHideController()"
   >
     <div class="video-wrap" @click="toggle()">
+      <div class="load-error" v-if="loadError">视频加载失败</div>
+
       <video
         class="video"
         ref="videoRef"
@@ -72,7 +74,7 @@
       <div class="icons icons-right">
         <div class="speed">
           <div class="icon speed-icon">
-            <span class="icon-content" @click="speedMenuVisible = !speedMenuVisible">倍速</span>
+            <span class="icon-content" @click="speedMenuVisible = !speedMenuVisible">{{playbackRate === 1 ? '倍速' : (playbackRate + 'x')}}</span>
             <div class="speed-menu" v-if="speedMenuVisible" @mouseleave="speedMenuVisible = false">
               <div 
                 class="speed-menu-item" 
@@ -86,7 +88,7 @@
         </div>
         <div class="loop" @click="toggleLoop()">
           <div class="icon loop-icon" :class="{ 'active': loop }">
-            <span class="icon-content">循环</span>
+            <span class="icon-content">循环{{loop ? '开' : '关'}}</span>
           </div>
         </div>
       </div>
@@ -115,7 +117,6 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 import useMSE from './useMSE'
-import { message } from 'ant-design-vue'
 
 const props = defineProps({
   width: {
@@ -254,7 +255,8 @@ const handleProgress = () => {
   loaded.value = videoRef.value?.buffered.length ? videoRef.value.buffered.end(videoRef.value.buffered.length - 1) : 0
 }
 
-const handleError = () => message.error('视频加载失败')
+const loadError = ref(false)
+const handleError = () => loadError.value = true
 
 const thumbMove = (e: MouseEvent | TouchEvent) => {
   if (!videoRef.value || !playBarWrap.value) return
diff --git a/src/views/components/element/VideoElement/VideoPlayer/style.scss b/src/views/components/element/VideoElement/VideoPlayer/style.scss
index 8e38d826..ebccc6b1 100644
--- a/src/views/components/element/VideoElement/VideoPlayer/style.scss
+++ b/src/views/components/element/VideoElement/VideoPlayer/style.scss
@@ -161,7 +161,7 @@
     align-items: center;
 
     &.icons-right {
-      right: 8px;
+      right: 15px;
     }
     .time {
       line-height: 38px;
@@ -383,4 +383,18 @@
       }
     }
   }
+}
+
+.load-error {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  font-size: 15px;
+  color: #fff;
+  pointer-events: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
\ No newline at end of file