media-rip/frontend/src/api/client.ts
xpltd 0d9e6b18ac M002/S04: URL preview, playlist support, admin improvements, UX polish
URL preview & playlist support:
- POST /url-info endpoint extracts metadata (title, type, entry count)
- Preview box shows playlist contents before downloading (up to 10 items)
- Auto-detect audio-only sources (SoundCloud, etc) and switch to Audio mode
- Video toggle grayed out for audio-only sources
- Enable playlist downloading (noplaylist=False)

Admin panel improvements:
- Expandable session rows show per-session job list with filename, size,
  status, timestamp, and source URL link
- GET /admin/sessions/{id}/jobs endpoint for session job details
- Logout now redirects to home page instead of staying on login form
- Logo in header is clickable → navigates to home

UX polish:
- Tooltips on output format chips (explains Auto vs specific formats)
- Format tooltips change based on video/audio mode
2026-03-19 02:32:14 -05:00

90 lines
2.3 KiB
TypeScript

/**
* Fetch-based API client for the media.rip() backend.
*
* All routes are relative — the Vite dev proxy handles /api → backend.
* In production, the SPA is served by the same FastAPI process, so
* relative paths work without configuration.
*/
import type { Job, JobCreate, FormatInfo, PublicConfig, HealthStatus, UrlInfo } from './types'
class ApiError extends Error {
constructor(
public status: number,
public statusText: string,
public body: string,
) {
super(`API error ${status}: ${statusText}`)
this.name = 'ApiError'
}
}
async function request<T>(url: string, options?: RequestInit): Promise<T> {
const res = await fetch(url, {
...options,
headers: {
'Content-Type': 'application/json',
...options?.headers,
},
})
if (!res.ok) {
const body = await res.text()
throw new ApiError(res.status, res.statusText, body)
}
// 204 No Content
if (res.status === 204) {
return undefined as T
}
return res.json()
}
export const api = {
/** Fetch all downloads for the current session. */
async getDownloads(): Promise<Job[]> {
return request<Job[]>('/api/downloads')
},
/** Submit a new download. */
async createDownload(payload: JobCreate): Promise<Job> {
return request<Job>('/api/downloads', {
method: 'POST',
body: JSON.stringify(payload),
})
},
/** Cancel / remove a download. */
async deleteDownload(id: string): Promise<void> {
return request<void>(`/api/downloads/${id}`, {
method: 'DELETE',
})
},
/** Extract available formats for a URL. */
async getFormats(url: string): Promise<FormatInfo[]> {
const encoded = encodeURIComponent(url)
return request<FormatInfo[]>(`/api/formats?url=${encoded}`)
},
/** Load public (non-sensitive) configuration. */
async getPublicConfig(): Promise<PublicConfig> {
return request<PublicConfig>('/api/config/public')
},
/** Health check. */
async getHealth(): Promise<HealthStatus> {
return request<HealthStatus>('/api/health')
},
/** Get URL metadata (title, playlist detection, audio-only detection). */
async getUrlInfo(url: string): Promise<UrlInfo> {
return request<UrlInfo>('/api/url-info', {
method: 'POST',
body: JSON.stringify({ url }),
})
},
}
export { ApiError }