mirror of
https://github.com/xpltdco/media-rip.git
synced 2026-06-02 08:44:30 -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
ccd863f57d
commit
313536233f
3 changed files with 642 additions and 72 deletions
|
|
@ -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