xpltdco/media-rip
1
0
Fork 0
mirror of https://github.com/xpltdco/media-rip.git synced 2026-04-03 02:53:58 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions

M002/S04: output format selection, media icons, gear repositioned

Browse source 
- Move gear icon to left of Video/Audio toggle
- Add output format selector in options panel:
  Audio: Auto, MP3, WAV, M4A, FLAC, OPUS
  Video: Auto, MP4, WEBM
- Backend: postprocess audio to selected codec via FFmpegExtractAudio
- Backend: postprocessor_hooks capture final filename after conversion
  (fixes .webm showing when file was converted to .mp3)
- Add media type icon (video camera / music note) in download table
  next to filename, inferred from quality field and file extension
- Pass media_type and output_format through JobCreate model
This commit is contained in:
xpltd 2026-03-19 01:03:21 -05:00
parent 1da3ef37f1
commit 6e27f8e424
5 changed files with 209 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
backend/app/models/job.py
View file

@ -25,6 +25,8 @@ class JobCreate(BaseModel):
format_id: str | None = None
quality: str | None = None
output_template: str | None = None
media_type: str | None = None # "video" | "audio"
output_format: str | None = None # e.g. "mp3", "wav", "mp4", "webm"
class Job(BaseModel):

42
backend/app/services/download.py
View file

@ -119,6 +119,25 @@ class DownloadService:
elif job_create.quality:
opts["format"] = job_create.quality
# Output format post-processing (e.g. convert to mp3, mp4)
out_fmt = job_create.output_format
if out_fmt:
if out_fmt in ("mp3", "wav", "m4a", "flac", "opus"):
# Audio conversion via yt-dlp postprocessor
opts["postprocessors"] = [{
"key": "FFmpegExtractAudio",
"preferredcodec": out_fmt,
"preferredquality": "0" if out_fmt in ("flac", "wav") else "192",
}]
elif out_fmt == "mp4":
# Prefer mp4-native streams; remux if needed
opts["merge_output_format"] = "mp4"
opts.setdefault("format", "bestvideo[ext=mp4]+bestaudio[ext=m4a]/best[ext=mp4]/best")
opts["postprocessors"] = [{
"key": "FFmpegVideoRemuxer",
"preferedformat": "mp4",
}]
self._loop.run_in_executor(
self._executor,
self._run_download,
@ -245,7 +264,25 @@ class DownloadService:
except Exception:
logger.exception("Job %s progress hook error (status=%s)", job_id, d.get("status"))
# Track final filename after postprocessing (e.g. audio conversion)
final_filename = [None] # mutable container for closure
def postprocessor_hook(d: dict) -> None:
"""Capture the final filename after postprocessing."""
if d.get("status") == "finished":
info = d.get("info_dict", {})
# After postprocessing, filepath reflects the converted file
filepath = info.get("filepath") or info.get("filename")
if filepath:
abs_path = Path(filepath).resolve()
out_dir = Path(self._config.downloads.output_dir).resolve()
try:
final_filename[0] = str(abs_path.relative_to(out_dir))
except ValueError:
final_filename[0] = abs_path.name
opts["progress_hooks"] = [progress_hook]
opts["postprocessor_hooks"] = [postprocessor_hook]
try:
# Mark as downloading and notify SSE
@ -278,6 +315,11 @@ class DownloadService:
ydl.download([url])
# Use postprocessor's final filename if available (handles
# audio conversion changing .webm → .mp3 etc.)
if final_filename[0]:
relative_fn = final_filename[0]
# Persist filename to DB (progress hooks may not have fired
# if the file already existed)
if relative_fn:

2
frontend/src/api/types.ts
View file

@ -40,6 +40,8 @@ export interface JobCreate {
format_id?: string | null
quality?: string | null
output_template?: string | null
media_type?: string | null // "video" | "audio"
output_format?: string | null // e.g. "mp3", "wav", "mp4", "webm"
}
export interface ProgressEvent {

38
frontend/src/components/DownloadTable.vue
View file

@ -102,6 +102,16 @@ function isCompleted(job: Job): boolean {
return job.status === 'completed'
}
/** Infer whether the job is audio or video from quality/filename. */
function isAudioJob(job: Job): boolean {
if (job.quality === 'bestaudio') return true
if (job.filename) {
const ext = job.filename.split('.').pop()?.toLowerCase() || ''
if (['mp3', 'wav', 'flac', 'opus', 'm4a', 'aac', 'ogg', 'wma'].includes(ext)) return true
}
return false
}
// File download URL — filename is relative to the output directory
// (normalized by the backend). May contain subdirectories for source templates.
function downloadUrl(job: Job): string {
@ -171,7 +181,14 @@ async function clearJob(jobId: string): Promise<void> {
</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-name" :title="job.url">
<span class="name-with-icon">
<!-- Media type icon -->
<svg v-if="isAudioJob(job)" class="media-icon audio-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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>
<svg v-else class="media-icon video-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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>
<span class="name-text">{{ displayName(job) }}</span>
</span>
</td>
<td class="col-status">
<span class="status-badge" :class="'badge-' + job.status">
{{ job.status }}
@ -316,6 +333,25 @@ async function clearJob(jobId: string): Promise<void> {
white-space: nowrap;
}
.name-with-icon {
display: flex;
align-items: center;
gap: var(--space-sm);
overflow: hidden;
}
.media-icon {
flex-shrink: 0;
color: var(--color-text-muted);
opacity: 0.7;
}
.name-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.col-status { width: 100px; }
.col-progress { width: 180px; min-width: 120px; }
.col-speed { width: 100px; }

168
frontend/src/components/UrlInput.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ref, computed, watch } from 'vue'
import { api } from '@/api/client'
import { useDownloadsStore } from '@/stores/downloads'
import FormatPicker from './FormatPicker.vue'
@ -16,6 +16,19 @@ const showOptions = ref(false)
type MediaType = 'video' | 'audio'
const mediaType = ref<MediaType>('video')
const outputFormat = ref<string>('auto')
const audioFormats = ['auto', 'mp3', 'wav', 'm4a', 'flac', 'opus'] as const
const videoFormats = ['auto', 'mp4', 'webm'] as const
const availableFormats = computed(() =>
mediaType.value === 'audio' ? audioFormats : videoFormats
)
// Reset output format when switching media type
watch(mediaType, () => {
outputFormat.value = 'auto'
})
/** Whether formats have been fetched for the current URL. */
const formatsReady = computed(() => formats.value.length > 0)
@ -47,6 +60,8 @@ async function submitDownload(): Promise<void> {
url: trimmed,
format_id: selectedFormatId.value,
quality: mediaType.value === 'audio' && !selectedFormatId.value ? 'bestaudio' : null,
media_type: mediaType.value,
output_format: outputFormat.value === 'auto' ? null : outputFormat.value,
})
// Reset form on success
url.value = ''
@ -55,6 +70,7 @@ async function submitDownload(): Promise<void> {
selectedFormatId.value = null
extractError.value = null
mediaType.value = 'video'
outputFormat.value = 'auto'
} catch {
// Error already in store.submitError
}
@ -80,6 +96,11 @@ function toggleOptions(): void {
extractFormats()
}
}
function formatLabel(fmt: string): string {
if (fmt === 'auto') return 'Auto'
return fmt.toUpperCase()
}
</script>
<template>
@ -95,8 +116,18 @@ function toggleOptions(): void {
:disabled="isExtracting || store.isSubmitting"
/>
<!-- Action row: media toggle, download button, gear -->
<!-- Action row: gear, media toggle, download button -->
<div class="action-row">
<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 class="media-toggle">
<button
class="toggle-pill"
@ -125,16 +156,6 @@ function toggleOptions(): void {
>
{{ store.isSubmitting ? 'Submitting…' : 'Download' }}
</button>
<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">
@ -150,9 +171,26 @@ function toggleOptions(): void {
{{ store.submitError }}
</div>
<!-- Collapsible format picker -->
<!-- Collapsible options panel -->
<Transition name="options-slide">
<div v-if="showOptions" class="options-panel">
<!-- Output format selector -->
<div class="format-selector">
<label class="format-label">Output format</label>
<div class="format-chips">
<button
v-for="fmt in availableFormats"
:key="fmt"
class="format-chip"
:class="{ active: outputFormat === fmt }"
@click="outputFormat = fmt"
>
{{ formatLabel(fmt) }}
</button>
</div>
</div>
<!-- Advanced format picker from yt-dlp extract_info -->
<FormatPicker
v-if="formatsReady"
:formats="formats"
@ -179,13 +217,39 @@ function toggleOptions(): void {
font-size: var(--font-size-base);
}
/* Action row: toggle | download | gear */
/* Action row: gear | toggle | download */
.action-row {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.btn-options {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
flex-shrink: 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);
}
.media-toggle {
display: flex;
gap: 0;
@ -246,32 +310,6 @@ button:disabled {
cursor: not-allowed;
}
.btn-options {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
flex-shrink: 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;
@ -302,9 +340,55 @@ button:disabled {
padding: var(--space-sm);
}
/* Options panel transition */
/* Options panel */
.options-panel {
overflow: hidden;
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.format-selector {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-sm) 0;
}
.format-label {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
white-space: nowrap;
flex-shrink: 0;
}
.format-chips {
display: flex;
gap: var(--space-xs);
flex-wrap: wrap;
}
.format-chip {
padding: var(--space-xs) var(--space-md);
font-size: var(--font-size-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text-muted);
cursor: pointer;
transition: all 0.15s ease;
min-height: 30px;
}
.format-chip:hover {
color: var(--color-text);
border-color: var(--color-text-muted);
}
.format-chip.active {
background: color-mix(in srgb, var(--color-accent) 15%, transparent);
color: var(--color-accent);
border-color: var(--color-accent);
}
.options-slide-enter-active,
@ -342,7 +426,7 @@ button:disabled {
}
}
/* Mobile: stack URL field above action row */
/* Mobile */
@media (max-width: 767px) {
.btn-download {
padding: var(--space-sm) var(--space-md);