From dbcba0e2a92704c99daffc1dbf299abf4da3ad60 Mon Sep 17 00:00:00 2001
From: Momentry Studio <admin@momentry.local>
Date: Mon, 15 Jun 2026 00:24:24 +0800
Subject: [PATCH] feat: VideoPlayer loading state

---
 src/components/VideoPlayer.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue
index 267e5e3..9e0aac9 100644
--- a/src/components/VideoPlayer.vue
+++ b/src/components/VideoPlayer.vue
@@ -3,7 +3,12 @@
     <div class="video-player-box">
       <button class="close-btn" @click="close">×</button>
       
-      <video ref="videoEl" class="video" controls autoplay @loadedmetadata="onLoaded" @timeupdate="onTimeUpdate">
+      <div v-if="videoLoading" class="video-loading">
+        <div class="loading-spinner"></div>
+        <p>Loading video...</p>
+      </div>
+      
+      <video v-show="!videoLoading" ref="videoEl" class="video" controls autoplay @loadedmetadata="onLoaded" @timeupdate="onTimeUpdate">
         <source :src="videoSrc" type="video/mp4" />
       </video>
       
@@ -17,7 +22,7 @@
         </div>
       </div>
       
-      <div v-if="hasRange" class="segment-controls">
+      <div v-if="hasRange && !videoLoading" class="segment-controls">
         <button @click="seekToStart" class="seg-btn">⏮ 跳到起點</button>
         <button @click="togglePlay" class="seg-btn">{{ isPlaying ? '⏸ 暫停' : '▶ 播放' }}</button>
         <button @click="seekToEnd" class="seg-btn">跳到結尾 ⏭</button>
@@ -201,4 +206,7 @@ onUnmounted(() => {
   cursor: pointer; font-size: 0.85rem; transition: background 0.15s;
 }
 .seg-btn:hover { background: #374151; }
+.video-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: #9ca3af; }
+.loading-spinner { width: 40px; height: 40px; border: 4px solid #374151; border-top-color: #4f46e5; border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 12px; }
+@keyframes spin { to { transform: rotate(360deg); } }
 </style>