From 0cf9dc357e5a307b0cac2b29e83477dba69ff889 Mon Sep 17 00:00:00 2001
From: ila <2+ila@noreply.git.ilapage.cn>
Date: Thu, 13 Aug 2026 15:08:28 +0800
Subject: [PATCH] fix: load player while waiting for stream (#54)

---
 Sense/ui/src/components/sense/liveview/StreamPlayer.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/Sense/ui/src/components/sense/liveview/StreamPlayer.vue b/Sense/ui/src/components/sense/liveview/StreamPlayer.vue
index 3dd5e38..594ba01 100644
--- a/Sense/ui/src/components/sense/liveview/StreamPlayer.vue
+++ b/Sense/ui/src/components/sense/liveview/StreamPlayer.vue
@@ -1,14 +1,15 @@
 <template>
   <div class="stream-player">
-    <div v-if="state === 'loading'" class="player-state"><el-icon class="is-loading" size="42"><Loading /></el-icon><strong>正在打开视频</strong><span>通常需要几秒钟</span></div>
-    <div v-else-if="state !== 'ready'" class="player-state"><el-icon size="46"><WarningFilled /></el-icon><strong>{{ title }}</strong><span>{{ detail }}</span><el-button type="primary" @click="$emit('retry')">重新连接</el-button></div>
-    <iframe v-else :key="playerUrl" :src="playerUrl" title="Sense 单路实时视频" allow="autoplay; fullscreen" @load="$emit('loaded')" />
+    <iframe v-if="playable" :key="playerUrl" :src="playerUrl" title="Sense 单路实时视频" allow="autoplay; fullscreen" @load="$emit('loaded')" />
+    <div v-else-if="state === 'loading'" class="player-state"><el-icon class="is-loading" size="42"><Loading /></el-icon><strong>正在打开视频</strong><span>通常需要几秒钟</span></div>
+    <div v-else class="player-state"><el-icon size="46"><WarningFilled /></el-icon><strong>{{ title }}</strong><span>{{ detail }}</span><el-button type="primary" @click="$emit('retry')">重新连接</el-button></div>
   </div>
 </template>
 <script setup>
 import{computed}from'vue'
 const props=defineProps({state:{type:String,default:'loading'},detail:{type:String,default:''},playerUrl:{type:String,default:''}});defineEmits(['retry','loaded'])
+const playable=computed(()=>Boolean(props.playerUrl)&&['waiting','ready'].includes(props.state))
 const title=computed(()=>({stopped:'视频已停止',process_failed:'视频服务未启动',apply_failed:'视频配置失败',unconverged:'视频状态未同步',waiting:'正在等待视频',expired:'播放会话已过期',offline:'视频已断开'})[props.state]||'暂时无法播放')
 </script>
 <style scoped>.stream-player{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:#101419}.stream-player iframe{width:100%;height:100%;border:0}.player-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#c9cdd4}.player-state strong{color:#fff;font-size:18px}.player-state span{max-width:70%;text-align:center;font-size:13px}</style>
-
+