mirror of
https://github.com/xpltdco/media-rip.git
synced 2026-04-03 02:53:58 -06:00
GSD: M002/S02 complete — Download flow + queue redesign
- UrlInput: Download is primary one-click action, format picker is optional (⚙ toggle) - UrlInput: Video/Audio toggle pills with icons, audio sends quality=bestaudio - UrlInput: Paste auto-extracts formats silently in background - DownloadTable: Sortable table with Name, Status, Progress, Speed, ETA, Actions columns - DownloadTable: Status badges with color-coded backgrounds per status - DownloadTable: Completed items show download/copy-link/clear action icons - DownloadTable: Active items show cancel, failed/expired show clear - DownloadTable: Click column headers to sort (toggle asc/desc) - DownloadTable: Mobile hides Speed+ETA columns below 640px - DownloadQueue: Simplified to filters + DownloadTable (removed card layout) - All 34 frontend + 179 backend tests passing
This commit is contained in:
xpltd
parent
c5844ac712
commit
4eec024750
5 changed files with 712 additions and 74 deletions
|
|
@ -53,10 +53,10 @@ This milestone is complete only when all are true:
|
|||
|
||||
## Slices
|
||||
|
||||
- [ ] **S01: Bug Fixes + Header/Footer Rework** `risk:high` `depends:[]`
|
||||
- [x] **S01: Bug Fixes + Header/Footer Rework** `risk:high` `depends:[]`
|
||||
> After this: Cancel button works, header has no tabs, footer shows version info, welcome message block is visible with default text, theme is sun/moon toggle
|
||||
|
||||
- [ ] **S02: Download Flow + Queue Redesign** `risk:medium` `depends:[S01]`
|
||||
- [x] **S02: Download Flow + Queue Redesign** `risk:medium` `depends:[S01]`
|
||||
> After this: Single "Download" button with optional format picker, audio/video toggle, queue displays as styled table with sorting, completed items show download/copy/clear glyphs
|
||||
|
||||
- [ ] **S03: Mobile + Integration Polish** `risk:low` `depends:[S02]`
|
||||
|
|
|
|||
68
.gsd/milestones/M002/slices/S02/S02-PLAN.md
Normal file
68
.gsd/milestones/M002/slices/S02/S02-PLAN.md
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
# S02: Download Flow + Queue Redesign
|
||||
|
||||
**Goal:** Simplify the download flow to a single "Download" button (with optional format picker), add an audio/video quick-toggle, convert the queue from cards to a sortable table, and add action glyphs (download file, copy link, clear) for completed items.
|
||||
**Demo:** User pastes URL → clicks "Download" → item appears in the table queue → completes → user clicks download icon to save file or copy icon to copy the download link. Table columns are sortable by status, name, progress, ETA.
|
||||
|
||||
## Must-Haves
|
||||
|
||||
- "Download" is the primary button (not "Get Formats") — one-click download with best quality
|
||||
- Optional format picker accessible via a secondary "⚙ Options" toggle
|
||||
- Audio/video quick-toggle (video default) that sets appropriate format flags
|
||||
- Queue rendered as a styled table with columns: Name, Status, Progress, Speed, ETA, Actions
|
||||
- Table headers are clickable to sort (ascending/descending)
|
||||
- Completed items show download (⬇), copy-link (🔗), clear (✕) action icons
|
||||
- Active items show cancel (✕) icon
|
||||
- Failed items show error message and clear (✕) icon
|
||||
- Mobile: table degrades gracefully (horizontal scroll or card fallback below 640px)
|
||||
|
||||
## Verification
|
||||
|
||||
- `cd frontend && npx vitest run` — all tests pass
|
||||
- `cd backend && source .venv/Scripts/activate && python -m pytest tests/ -q -m "not integration"` — no regressions
|
||||
- Browser: paste URL → click Download → job appears in table → progresses → completes
|
||||
- Browser: click download icon on completed item → file downloads
|
||||
- Browser: click copy-link icon → link copied (or tooltip confirms)
|
||||
- Browser: sort table by each column header
|
||||
- Browser: mobile viewport shows readable queue
|
||||
|
||||
## Tasks
|
||||
|
||||
- [x] **T01: Rework UrlInput — Download-first flow with collapsible options** `est:45m`
|
||||
- Why: Current flow forces "Get Formats" before downloading. Most users just want to paste and go.
|
||||
- Files: `frontend/src/components/UrlInput.vue`
|
||||
- Do: Make "Download" the primary action button. Add a "⚙" toggle button that expands/collapses the format picker section below. Add audio/video toggle pills (Video | Audio) that set a `mediaType` ref. When `mediaType` is "audio", pass `quality: "bestaudio"` to the submit payload. When format picker is open and user selects a format, use that instead. Keep the paste-to-auto-extract behavior but make it extract silently in the background (populate formats without showing picker). "Download" works immediately with or without format selection.
|
||||
- Verify: Paste URL → click Download → job starts without format selection. Toggle audio → Download → job starts with audio quality. Click ⚙ → format picker opens → select format → Download.
|
||||
- Done when: Download is the primary one-click action, format picker is optional
|
||||
|
||||
- [x] **T02: Convert queue to sortable table** `est:60m`
|
||||
- Why: Card-based queue doesn't scan well with many items. Table with sorting is standard for download managers.
|
||||
- Files: `frontend/src/components/DownloadQueue.vue`, `frontend/src/components/DownloadTable.vue` (new), `frontend/src/components/DownloadItem.vue` (remove or repurpose)
|
||||
- Do: Create DownloadTable component with `<table>` markup. Columns: Name (truncated, title=full URL), Status (badge), Progress (inline bar), Speed, ETA, Actions. Add a `sortBy` ref and `sortDir` ref. Clicking a column header toggles sort. Computed `sortedJobs` applies sort. Keep the filter buttons (All/Active/Completed/Failed) above the table. Style the table with theme CSS variables. On mobile (< 640px), hide Speed and ETA columns, or use a responsive approach.
|
||||
- Verify: Jobs render as table rows. Click column headers to sort. Filter buttons still work. Mobile view is usable.
|
||||
- Done when: Queue is a sortable table with all columns rendering correctly
|
||||
|
||||
- [x] **T03: Action glyphs for completed/active/failed items** `est:30m`
|
||||
- Why: Users need to download completed files, copy links, and clear items from the queue.
|
||||
- Files: `frontend/src/components/DownloadTable.vue`, `frontend/src/stores/downloads.ts`, `frontend/src/api/client.ts`
|
||||
- Do: Add action icons in the Actions column. Completed: download file (anchor to `/api/downloads/{filename}`), copy download link (clipboard API), clear from queue (DELETE + remove from store). Active: cancel (existing logic). Failed: clear from queue. Style icons as small inline buttons with hover effects. Add `clearJob(id)` to downloads store that calls DELETE and removes locally.
|
||||
- Verify: Click download icon on completed item → browser downloads file. Click copy icon → link in clipboard. Click clear → item removed. Click cancel on active → cancelled.
|
||||
- Done when: All action icons work for each status type
|
||||
|
||||
- [x] **T04: Update tests** `est:20m`
|
||||
- Why: New components and store changes need test coverage. Old DownloadItem tests may need removal/update.
|
||||
- Files: `frontend/src/tests/stores/downloads.test.ts`, `frontend/src/tests/components/` (if any)
|
||||
- Do: Add tests for the new sort logic (sortBy, sortDir). Test clearJob action in downloads store. Verify existing download store tests still pass. Run full frontend and backend test suites.
|
||||
- Verify: `npx vitest run` all pass, `python -m pytest tests/ -q -m "not integration"` all pass
|
||||
- Done when: All tests green, no regressions
|
||||
|
||||
## Files Likely Touched
|
||||
|
||||
- `frontend/src/components/UrlInput.vue` (reworked)
|
||||
- `frontend/src/components/DownloadQueue.vue` (reworked to use table)
|
||||
- `frontend/src/components/DownloadTable.vue` (new)
|
||||
- `frontend/src/components/DownloadItem.vue` (may be removed — logic moves to table rows)
|
||||
- `frontend/src/components/FormatPicker.vue` (minor — toggled visibility)
|
||||
- `frontend/src/components/ProgressBar.vue` (minor — may need inline variant)
|
||||
- `frontend/src/stores/downloads.ts` (add clearJob, sort helpers)
|
||||
- `frontend/src/api/client.ts` (no changes expected — DELETE already exists)
|
||||
- `frontend/src/api/types.ts` (no changes expected)
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useDownloadsStore } from '@/stores/downloads'
|
||||
import DownloadItem from './DownloadItem.vue'
|
||||
import DownloadTable from './DownloadTable.vue'
|
||||
|
||||
type Filter = 'all' | 'active' | 'completed' | 'failed'
|
||||
|
||||
|
|
@ -57,13 +57,7 @@ function setFilter(f: Filter): void {
|
|||
</template>
|
||||
</div>
|
||||
|
||||
<TransitionGroup name="job-list" tag="div" class="queue-list">
|
||||
<DownloadItem
|
||||
v-for="job in filteredJobs"
|
||||
:key="job.id"
|
||||
:job="job"
|
||||
/>
|
||||
</TransitionGroup>
|
||||
<DownloadTable v-else :jobs="filteredJobs" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -113,32 +107,6 @@ function setFilter(f: Filter): void {
|
|||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.queue-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
/* Transition animations */
|
||||
.job-list-enter-active,
|
||||
.job-list-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.job-list-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.job-list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.job-list-move {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* Mobile: full-width filters */
|
||||
@media (max-width: 767px) {
|
||||
.queue-filters {
|
||||
|
|
|
|||
473
frontend/src/components/DownloadTable.vue
Normal file
473
frontend/src/components/DownloadTable.vue
Normal file
|
|
@ -0,0 +1,473 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useDownloadsStore } from '@/stores/downloads'
|
||||
import ProgressBar from './ProgressBar.vue'
|
||||
import type { Job } from '@/api/types'
|
||||
|
||||
const props = defineProps<{
|
||||
jobs: Job[]
|
||||
}>()
|
||||
|
||||
const store = useDownloadsStore()
|
||||
|
||||
// Sort state
|
||||
type SortKey = 'name' | 'status' | 'progress' | 'speed' | 'eta'
|
||||
const sortBy = ref<SortKey>('name')
|
||||
const sortDir = ref<'asc' | 'desc'>('asc')
|
||||
|
||||
function toggleSort(key: SortKey): void {
|
||||
if (sortBy.value === key) {
|
||||
sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc'
|
||||
} else {
|
||||
sortBy.value = key
|
||||
sortDir.value = key === 'progress' ? 'desc' : 'asc'
|
||||
}
|
||||
}
|
||||
|
||||
function sortIndicator(key: SortKey): string {
|
||||
if (sortBy.value !== key) return ''
|
||||
return sortDir.value === 'asc' ? ' ▲' : ' ▼'
|
||||
}
|
||||
|
||||
const sortedJobs = computed<Job[]>(() => {
|
||||
const list = [...props.jobs]
|
||||
const dir = sortDir.value === 'asc' ? 1 : -1
|
||||
|
||||
list.sort((a, b) => {
|
||||
switch (sortBy.value) {
|
||||
case 'name':
|
||||
return dir * displayName(a).localeCompare(displayName(b))
|
||||
case 'status':
|
||||
return dir * a.status.localeCompare(b.status)
|
||||
case 'progress':
|
||||
return dir * (a.progress_percent - b.progress_percent)
|
||||
case 'speed':
|
||||
return dir * (parseSpeed(a.speed) - parseSpeed(b.speed))
|
||||
case 'eta':
|
||||
return dir * (parseEta(a.eta) - parseEta(b.eta))
|
||||
default:
|
||||
return 0
|
||||
}
|
||||
})
|
||||
return list
|
||||
})
|
||||
|
||||
function displayName(job: Job): string {
|
||||
if (job.filename) {
|
||||
const parts = job.filename.replace(/\\/g, '/').split('/')
|
||||
return parts[parts.length - 1]
|
||||
}
|
||||
try {
|
||||
const u = new URL(job.url)
|
||||
return `${u.hostname}${u.pathname}`.slice(0, 80)
|
||||
} catch {
|
||||
return job.url.slice(0, 80)
|
||||
}
|
||||
}
|
||||
|
||||
function parseSpeed(speed: string | null): number {
|
||||
if (!speed) return 0
|
||||
const match = speed.match(/([\d.]+)\s*(B|KiB|MiB|GiB)/)
|
||||
if (!match) return 0
|
||||
const val = parseFloat(match[1])
|
||||
const unit = match[2]
|
||||
const multipliers: Record<string, number> = { B: 1, KiB: 1024, MiB: 1048576, GiB: 1073741824 }
|
||||
return val * (multipliers[unit] || 1)
|
||||
}
|
||||
|
||||
function parseEta(eta: string | null): number {
|
||||
if (!eta) return Infinity
|
||||
// yt-dlp formats ETA as HH:MM:SS or MM:SS or SS
|
||||
const parts = eta.split(':').map(Number)
|
||||
if (parts.length === 3) return parts[0] * 3600 + parts[1] * 60 + parts[2]
|
||||
if (parts.length === 2) return parts[0] * 60 + parts[1]
|
||||
return parts[0] || Infinity
|
||||
}
|
||||
|
||||
function isActive(job: Job): boolean {
|
||||
return !store.isTerminal(job.status)
|
||||
}
|
||||
|
||||
function isCompleted(job: Job): boolean {
|
||||
return job.status === 'completed'
|
||||
}
|
||||
|
||||
// File download URL
|
||||
function downloadUrl(job: Job): string {
|
||||
if (!job.filename) return '#'
|
||||
const name = job.filename.replace(/\\/g, '/').split('/').pop() || ''
|
||||
return `/api/downloads/${encodeURIComponent(name)}`
|
||||
}
|
||||
|
||||
// Copy download link to clipboard
|
||||
async function copyLink(job: Job): Promise<void> {
|
||||
const url = `${window.location.origin}${downloadUrl(job)}`
|
||||
try {
|
||||
await navigator.clipboard.writeText(url)
|
||||
} catch {
|
||||
// Fallback — clipboard API may fail in non-secure contexts
|
||||
console.warn('[DownloadTable] Clipboard write failed')
|
||||
}
|
||||
}
|
||||
|
||||
const cancelling = ref<Set<string>>(new Set())
|
||||
|
||||
async function cancel(jobId: string): Promise<void> {
|
||||
if (cancelling.value.has(jobId)) return
|
||||
cancelling.value.add(jobId)
|
||||
try {
|
||||
await store.cancelDownload(jobId)
|
||||
} catch (err) {
|
||||
console.error('[DownloadTable] Cancel failed:', err)
|
||||
} finally {
|
||||
cancelling.value.delete(jobId)
|
||||
}
|
||||
}
|
||||
|
||||
async function clearJob(jobId: string): Promise<void> {
|
||||
try {
|
||||
await store.cancelDownload(jobId)
|
||||
} catch {
|
||||
// If DELETE fails (already gone), just remove locally
|
||||
store.handleJobRemoved(jobId)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="download-table-wrap">
|
||||
<table class="download-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-name sortable" @click="toggleSort('name')">
|
||||
Name{{ sortIndicator('name') }}
|
||||
</th>
|
||||
<th class="col-status sortable" @click="toggleSort('status')">
|
||||
Status{{ sortIndicator('status') }}
|
||||
</th>
|
||||
<th class="col-progress sortable" @click="toggleSort('progress')">
|
||||
Progress{{ sortIndicator('progress') }}
|
||||
</th>
|
||||
<th class="col-speed sortable hide-mobile" @click="toggleSort('speed')">
|
||||
Speed{{ sortIndicator('speed') }}
|
||||
</th>
|
||||
<th class="col-eta sortable hide-mobile" @click="toggleSort('eta')">
|
||||
ETA{{ sortIndicator('eta') }}
|
||||
</th>
|
||||
<th class="col-actions">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<TransitionGroup name="table-row" tag="tbody">
|
||||
<tr v-for="job in sortedJobs" :key="job.id" :class="'row-' + job.status">
|
||||
<td class="col-name" :title="job.url">{{ displayName(job) }}</td>
|
||||
<td class="col-status">
|
||||
<span class="status-badge" :class="'badge-' + job.status">
|
||||
{{ job.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="col-progress">
|
||||
<ProgressBar
|
||||
v-if="job.status === 'downloading' || job.status === 'extracting'"
|
||||
:percent="job.progress_percent"
|
||||
/>
|
||||
<span v-else-if="isCompleted(job)" class="progress-done">Done</span>
|
||||
<span v-else-if="job.error_message" class="progress-error" :title="job.error_message">
|
||||
{{ job.error_message.slice(0, 40) }}
|
||||
</span>
|
||||
<span v-else class="progress-na">—</span>
|
||||
</td>
|
||||
<td class="col-speed hide-mobile">
|
||||
<span v-if="job.speed" class="mono">{{ job.speed }}</span>
|
||||
<span v-else class="text-muted">—</span>
|
||||
</td>
|
||||
<td class="col-eta hide-mobile">
|
||||
<span v-if="job.eta" class="mono">{{ job.eta }}</span>
|
||||
<span v-else class="text-muted">—</span>
|
||||
</td>
|
||||
<td class="col-actions">
|
||||
<div class="action-group">
|
||||
<!-- Completed: download, copy link, clear -->
|
||||
<template v-if="isCompleted(job)">
|
||||
<a
|
||||
:href="downloadUrl(job)"
|
||||
class="action-btn action-download"
|
||||
title="Download file"
|
||||
download
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
</a>
|
||||
<button
|
||||
class="action-btn action-copy"
|
||||
title="Copy download link"
|
||||
@click="copyLink(job)"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
||||
</button>
|
||||
<button
|
||||
class="action-btn action-clear"
|
||||
title="Remove from list"
|
||||
@click="clearJob(job.id)"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
</template>
|
||||
<!-- Active: cancel -->
|
||||
<template v-else-if="isActive(job)">
|
||||
<button
|
||||
class="action-btn action-cancel"
|
||||
:disabled="cancelling.has(job.id)"
|
||||
title="Cancel download"
|
||||
@click.stop="cancel(job.id)"
|
||||
>
|
||||
<svg v-if="!cancelling.has(job.id)" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
<span v-else class="spinner-sm"></span>
|
||||
</button>
|
||||
</template>
|
||||
<!-- Failed/expired: clear -->
|
||||
<template v-else>
|
||||
<button
|
||||
class="action-btn action-clear"
|
||||
title="Remove from list"
|
||||
@click="clearJob(job.id)"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</TransitionGroup>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.download-table-wrap {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.download-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.download-table thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.download-table th {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
font-size: var(--font-size-sm);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--color-text-muted);
|
||||
background: var(--color-surface);
|
||||
border-bottom: 2px solid var(--color-border);
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.download-table th.sortable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.download-table th.sortable:hover {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.download-table td {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.download-table tbody tr {
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.download-table tbody tr:hover {
|
||||
background: var(--color-surface-hover);
|
||||
}
|
||||
|
||||
/* Column widths */
|
||||
.col-name {
|
||||
min-width: 200px;
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.col-status { width: 100px; }
|
||||
.col-progress { width: 180px; min-width: 120px; }
|
||||
.col-speed { width: 100px; }
|
||||
.col-eta { width: 80px; }
|
||||
.col-actions { width: 110px; }
|
||||
|
||||
/* Status badges */
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 2px var(--space-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.badge-queued {
|
||||
background: color-mix(in srgb, var(--color-text-muted) 15%, transparent);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.badge-extracting {
|
||||
background: color-mix(in srgb, var(--color-warning) 15%, transparent);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
.badge-downloading {
|
||||
background: color-mix(in srgb, var(--color-accent) 15%, transparent);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.badge-completed {
|
||||
background: color-mix(in srgb, var(--color-success) 15%, transparent);
|
||||
color: var(--color-success);
|
||||
}
|
||||
.badge-failed {
|
||||
background: color-mix(in srgb, var(--color-error) 15%, transparent);
|
||||
color: var(--color-error);
|
||||
}
|
||||
.badge-expired {
|
||||
background: color-mix(in srgb, var(--color-text-muted) 15%, transparent);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Progress cell */
|
||||
.progress-done {
|
||||
color: var(--color-success);
|
||||
font-weight: 500;
|
||||
}
|
||||
.progress-error {
|
||||
color: var(--color-error);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
.progress-na {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Utility */
|
||||
.mono {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
.text-muted {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
.action-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: var(--color-surface-hover);
|
||||
}
|
||||
|
||||
.action-download:hover {
|
||||
color: var(--color-success);
|
||||
border-color: var(--color-success);
|
||||
}
|
||||
|
||||
.action-copy:hover {
|
||||
color: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.action-cancel:hover,
|
||||
.action-clear:hover {
|
||||
color: var(--color-error);
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
|
||||
.action-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.spinner-sm {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 2px solid var(--color-border);
|
||||
border-top-color: var(--color-accent);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Table row transitions */
|
||||
.table-row-enter-active,
|
||||
.table-row-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.table-row-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.table-row-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Mobile: hide speed and ETA columns */
|
||||
@media (max-width: 639px) {
|
||||
.hide-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.col-name {
|
||||
min-width: 120px;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.col-progress {
|
||||
min-width: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.col-actions {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.download-table th,
|
||||
.download-table td {
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import { api } from '@/api/client'
|
||||
import { useDownloadsStore } from '@/stores/downloads'
|
||||
import FormatPicker from './FormatPicker.vue'
|
||||
|
|
@ -12,7 +12,13 @@ const formats = ref<FormatInfo[]>([])
|
|||
const selectedFormatId = ref<string | null>(null)
|
||||
const isExtracting = ref(false)
|
||||
const extractError = ref<string | null>(null)
|
||||
const showFormats = ref(false)
|
||||
const showOptions = ref(false)
|
||||
|
||||
type MediaType = 'video' | 'audio'
|
||||
const mediaType = ref<MediaType>('video')
|
||||
|
||||
/** Whether formats have been fetched for the current URL. */
|
||||
const formatsReady = computed(() => formats.value.length > 0)
|
||||
|
||||
async function extractFormats(): Promise<void> {
|
||||
const trimmed = url.value.trim()
|
||||
|
|
@ -21,12 +27,10 @@ async function extractFormats(): Promise<void> {
|
|||
isExtracting.value = true
|
||||
extractError.value = null
|
||||
formats.value = []
|
||||
showFormats.value = false
|
||||
selectedFormatId.value = null
|
||||
|
||||
try {
|
||||
formats.value = await api.getFormats(trimmed)
|
||||
showFormats.value = true
|
||||
} catch (err: any) {
|
||||
extractError.value = err.message || 'Failed to extract formats'
|
||||
} finally {
|
||||
|
|
@ -42,13 +46,15 @@ async function submitDownload(): Promise<void> {
|
|||
await store.submitDownload({
|
||||
url: trimmed,
|
||||
format_id: selectedFormatId.value,
|
||||
quality: mediaType.value === 'audio' && !selectedFormatId.value ? 'bestaudio' : null,
|
||||
})
|
||||
// Reset form on success
|
||||
url.value = ''
|
||||
formats.value = []
|
||||
showFormats.value = false
|
||||
showOptions.value = false
|
||||
selectedFormatId.value = null
|
||||
extractError.value = null
|
||||
mediaType.value = 'video'
|
||||
} catch {
|
||||
// Error already in store.submitError
|
||||
}
|
||||
|
|
@ -59,13 +65,21 @@ function onFormatSelect(formatId: string | null): void {
|
|||
}
|
||||
|
||||
function handlePaste(): void {
|
||||
// Auto-extract on paste after a tick (value not yet updated in paste event)
|
||||
// Auto-extract on paste (populate formats silently in background)
|
||||
setTimeout(() => {
|
||||
if (url.value.trim()) {
|
||||
extractFormats()
|
||||
}
|
||||
}, 50)
|
||||
}
|
||||
|
||||
function toggleOptions(): void {
|
||||
showOptions.value = !showOptions.value
|
||||
// Extract formats when opening options if we haven't yet
|
||||
if (showOptions.value && !formatsReady.value && url.value.trim() && !isExtracting.value) {
|
||||
extractFormats()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -77,27 +91,50 @@ function handlePaste(): void {
|
|||
placeholder="Paste a URL to download…"
|
||||
class="url-field"
|
||||
@paste="handlePaste"
|
||||
@keydown.enter="showFormats ? submitDownload() : extractFormats()"
|
||||
:disabled="isExtracting"
|
||||
@keydown.enter="submitDownload"
|
||||
:disabled="isExtracting || store.isSubmitting"
|
||||
/>
|
||||
<button
|
||||
v-if="!showFormats"
|
||||
class="btn-extract"
|
||||
@click="extractFormats"
|
||||
:disabled="!url.trim() || isExtracting"
|
||||
>
|
||||
{{ isExtracting ? 'Extracting…' : 'Get Formats' }}
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="btn-download"
|
||||
@click="submitDownload"
|
||||
:disabled="store.isSubmitting"
|
||||
:disabled="!url.trim() || store.isSubmitting"
|
||||
>
|
||||
{{ store.isSubmitting ? 'Submitting…' : 'Download' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Controls row: media type toggle + options gear -->
|
||||
<div class="controls-row">
|
||||
<div class="media-toggle">
|
||||
<button
|
||||
class="toggle-pill"
|
||||
:class="{ active: mediaType === 'video' }"
|
||||
@click="mediaType = 'video'"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
|
||||
Video
|
||||
</button>
|
||||
<button
|
||||
class="toggle-pill"
|
||||
:class="{ active: mediaType === 'audio' }"
|
||||
@click="mediaType = 'audio'"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
|
||||
Audio
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="btn-options"
|
||||
:class="{ active: showOptions }"
|
||||
@click="toggleOptions"
|
||||
:disabled="!url.trim()"
|
||||
title="Format options"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="isExtracting" class="extract-loading">
|
||||
<span class="spinner"></span>
|
||||
Extracting available formats…
|
||||
|
|
@ -111,11 +148,19 @@ function handlePaste(): void {
|
|||
{{ store.submitError }}
|
||||
</div>
|
||||
|
||||
<FormatPicker
|
||||
v-if="showFormats"
|
||||
:formats="formats"
|
||||
@select="onFormatSelect"
|
||||
/>
|
||||
<!-- Collapsible format picker -->
|
||||
<Transition name="options-slide">
|
||||
<div v-if="showOptions" class="options-panel">
|
||||
<FormatPicker
|
||||
v-if="formatsReady"
|
||||
:formats="formats"
|
||||
@select="onFormatSelect"
|
||||
/>
|
||||
<div v-else-if="!isExtracting" class="options-hint">
|
||||
Paste a URL and formats will load automatically.
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -137,24 +182,10 @@ function handlePaste(): void {
|
|||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.btn-extract,
|
||||
.btn-download {
|
||||
white-space: nowrap;
|
||||
padding: var(--space-sm) var(--space-lg);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-extract {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-accent);
|
||||
border: 1px solid var(--color-accent);
|
||||
}
|
||||
|
||||
.btn-extract:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, var(--color-accent) 15%, transparent);
|
||||
}
|
||||
|
||||
.btn-download {
|
||||
background: var(--color-accent);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
|
@ -168,6 +199,76 @@ button:disabled {
|
|||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Controls row */
|
||||
.controls-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.media-toggle {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.toggle-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text-muted);
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
font-size: var(--font-size-sm);
|
||||
min-height: 32px;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.toggle-pill:not(:last-child) {
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.toggle-pill:hover {
|
||||
background: var(--color-surface-hover);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.toggle-pill.active {
|
||||
background: color-mix(in srgb, var(--color-accent) 15%, transparent);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.btn-options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text-muted);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.btn-options:hover:not(:disabled) {
|
||||
color: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.btn-options.active {
|
||||
color: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
|
||||
}
|
||||
|
||||
/* Loading / errors */
|
||||
.extract-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -197,13 +298,41 @@ button:disabled {
|
|||
padding: var(--space-sm);
|
||||
}
|
||||
|
||||
/* Options panel transition */
|
||||
.options-panel {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.options-slide-enter-active,
|
||||
.options-slide-leave-active {
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.options-slide-enter-from,
|
||||
.options-slide-leave-to {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
.options-slide-enter-to,
|
||||
.options-slide-leave-from {
|
||||
opacity: 1;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.options-hint {
|
||||
padding: var(--space-md);
|
||||
text-align: center;
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
/* Mobile: stack vertically */
|
||||
@media (max-width: 767px) {
|
||||
.input-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn-extract,
|
||||
.btn-download {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue