purovps/xdl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: DASH multi-phase progress + HLS fragment progress + indeterminate animation

Browse Source
This commit is contained in:
mini
2026-02-19 00:51:15 +08:00
parent deae827252
commit d419158c80
3 changed files with 39 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/views/Admin.vue
View File

@@ -33,12 +33,12 @@
<!-- 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">
<svg class="ring" :class="{ 'ring-spin': v.progress <= 1 }" 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`" />
:stroke-dasharray="v.progress > 1 ? `${(v.progress / 100) * 113} 113` : '30 113'" />
</svg>
<span class="ring-pct">{{ v.progress }}%</span>
<span class="ring-pct">{{ v.progress > 1 ? v.progress + '%' : '…' }}</span>
<button class="ring-cancel" @click.stop="cancelDownload(v)" title="Cancel">✕</button>
</div>
@@ -529,6 +529,8 @@ onUnmounted(() => { if (pollTimer) clearInterval(pollTimer) })
gap: 0.2rem; background: rgba(0,0,0,0.72); border-radius: 6px;
}
.ring { width: 36px; height: 36px; transform: rotate(-90deg); }
.ring-spin { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(270deg); } }
.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; }

11
frontend/src/views/Home.vue
View File

@@ -37,7 +37,7 @@
<div class="progress-bar">
<div class="progress-fill" :style="{ width: progress + '%' }"></div>
</div>
<p>{{ statusText }}</p>
<p>{{ statusText.replace('0%', '…') }}</p>
<a v-if="downloadReady" :href="downloadUrl" class="download-link" download>💾 Save to device</a>
</div>
</div>
@@ -193,7 +193,14 @@ h1 { font-size: 2rem; margin-bottom: 0.5rem; }
.cancel-btn:hover { background: rgba(231,76,60,0.1); }
.task-status { margin-top: 1.5rem; }
.progress-bar { height: 8px; background: #333; border-radius: 4px; overflow: hidden; margin-bottom: 0.5rem; }
.progress-fill { height: 100%; background: #1da1f2; transition: width 0.3s; }
.progress-fill { height: 100%; background: #1da1f2; transition: width 0.5s; }
.progress-bar:has(.progress-fill[style="width: 0%"]),
.progress-bar:has(.progress-fill[style="width: 1%"]) {
background: linear-gradient(90deg, #1a1a2e 25%, #1da1f2 50%, #1a1a2e 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.download-link {
display: inline-block; margin-top: 0.5rem; padding: 0.8rem 2rem;
background: #27ae60; color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600;