From b62213f8b5ae4e886a3dc362a477163eb614097b Mon Sep 17 00:00:00 2001
From: mini <afanamigo@gmail.com>
Date: Thu, 19 Feb 2026 00:40:29 +0800
Subject: [PATCH] style: circular progress ring + X cancel button on
 downloading video thumb

---
 frontend/src/views/Admin.vue | 48 +++++++++++++++++++++++-------------
 1 file changed, 31 insertions(+), 17 deletions(-)

diff --git a/frontend/src/views/Admin.vue b/frontend/src/views/Admin.vue
index df5b863..18bc946 100644
--- a/frontend/src/views/Admin.vue
+++ b/frontend/src/views/Admin.vue
@@ -26,12 +26,22 @@
           <div class="video-main">
             <!-- Thumbnail or placeholder -->
             <div class="thumb-wrap">
-              <img v-if="v.thumbnail" :src="v.thumbnail" class="thumb" />
+              <img v-if="v.thumbnail && v.status === 'done'" :src="v.thumbnail" class="thumb" />
               <div v-else class="thumb-placeholder">
                 <span>{{ platformIcon(v.platform || v.url) }}</span>
               </div>
-              <!-- Status overlay for active states -->
-              <div v-if="v.status === 'downloading'" class="thumb-overlay">⏳</div>
+
+              <!-- Downloading: circular progress ring + cancel X -->
+              <div v-if="v.status === 'downloading'" class="thumb-overlay ring-overlay">
+                <svg class="ring" viewBox="0 0 44 44">
+                  <circle class="ring-bg" cx="22" cy="22" r="18" />
+                  <circle class="ring-fill" cx="22" cy="22" r="18"
+                    :stroke-dasharray="`${(v.progress / 100) * 113} 113`" />
+                </svg>
+                <span class="ring-pct">{{ v.progress }}%</span>
+                <button class="ring-cancel" @click.stop="cancelDownload(v)" title="Cancel">✕</button>
+              </div>
+
               <div v-else-if="v.status === 'pending'" class="thumb-overlay">🕐</div>
               <div v-else-if="v.status === 'error'" class="thumb-overlay err-overlay">✕</div>
             </div>
@@ -44,13 +54,7 @@
                 <span v-if="v.file_size">{{ humanSize(v.file_size) }}</span>
                 <span>{{ fmtTime(v.created_at) }}</span>
               </div>
-              <!-- Progress bar for downloading -->
-              <div v-if="v.status === 'downloading'" class="progress-wrap">
-                <div class="progress-bar">
-                  <div class="progress-fill" :style="{ width: v.progress + '%' }"></div>
-                </div>
-                <span class="progress-pct">{{ v.progress }}%</span>
-              </div>
+
               <!-- Error message -->
               <div v-if="v.status === 'error' && v.error_message" class="error-msg" :title="v.error_message">
                 ⚠️ {{ v.error_message }}
@@ -60,7 +64,7 @@
             </div>
           </div>
           <div class="actions">
-            <button v-if="v.status === 'downloading'" @click="cancelDownload(v)" class="btn-cancel" title="Cancel download">✕ Cancel</button>
+
             <button v-if="v.status === 'done'" @click="showLogs(v)" class="btn-log" title="Download logs">📋</button>
             <button v-if="v.status === 'done'" @click="playVideo(v)" class="btn-play">▶ Play</button>
             <a v-if="v.status === 'done'" :href="'/api/file/' + v.id" class="btn-dl"
@@ -519,12 +523,22 @@ onUnmounted(() => { if (pollTimer) clearInterval(pollTimer) })
 .status-pending { color: #888; }
 .status-deleted { color: #555; }
 .platform-tag { color: #1da1f2; font-size: 0.82rem; text-transform: capitalize; }
-.progress-wrap { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
-.progress-bar { flex: 1; max-width: 240px; height: 6px; background: #333; border-radius: 3px; overflow: hidden; }
-.progress-fill { height: 100%; background: #1da1f2; border-radius: 3px; transition: width 0.4s; }
-.progress-pct { font-size: 0.8rem; color: #1da1f2; min-width: 32px; }
-.btn-cancel { padding: 0.4rem 0.8rem; border: 1px solid #e74c3c; border-radius: 6px; background: transparent; color: #e74c3c; cursor: pointer; font-size: 0.85rem; }
-.btn-cancel:hover { background: rgba(231,76,60,0.15); }
+/* Circular progress ring */
+.ring-overlay {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 0.2rem; background: rgba(0,0,0,0.72); border-radius: 6px;
+}
+.ring { width: 36px; height: 36px; transform: rotate(-90deg); }
+.ring-bg { fill: none; stroke: #333; stroke-width: 4; }
+.ring-fill { fill: none; stroke: #1da1f2; stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray 0.4s; }
+.ring-pct { font-size: 0.65rem; color: #7fdbff; font-weight: 600; margin-top: -2px; }
+.ring-cancel {
+  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #e74c3c;
+  background: rgba(231,76,60,0.15); color: #e74c3c; cursor: pointer;
+  font-size: 0.7rem; display: flex; align-items: center; justify-content: center;
+  line-height: 1; padding: 0; margin-top: 2px; transition: background 0.2s;
+}
+.ring-cancel:hover { background: rgba(231,76,60,0.35); }
 .error-msg {
   color: #e74c3c; font-size: 0.8rem; margin-top: 0.3rem;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 500px;