Initial commit: XDL Twitter/X video downloader

2026-02-18 17:15:12 +08:00
commit 7fdd181728
32 changed files with 1230 additions and 0 deletions
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="app">
+    <nav class="navbar">
+      <router-link to="/" class="logo">📥 XDL</router-link>
+      <div class="nav-links">
+        <router-link to="/">Home</router-link>
+        <router-link v-if="auth.isLoggedIn" to="/admin">Admin</router-link>
+        <a v-if="auth.isLoggedIn" href="#" @click.prevent="auth.logout()">Logout</a>
+        <router-link v-else to="/login">Login</router-link>
+      </div>
+    </nav>
+    <main class="container">
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { useAuthStore } from './stores/auth.js'
+const auth = useAuthStore()
+</script>
+
+<style>
+.app { min-height: 100vh; }
+.navbar {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 1rem 2rem; background: #1a1a2e; border-bottom: 1px solid #333;
+}
+.logo { font-size: 1.5rem; font-weight: bold; color: #1da1f2; text-decoration: none; }
+.nav-links { display: flex; gap: 1.5rem; }
+.nav-links a { color: #aaa; text-decoration: none; transition: color 0.2s; }
+.nav-links a:hover, .nav-links a.router-link-active { color: #1da1f2; }
+.container { max-width: 800px; margin: 0 auto; padding: 2rem 1rem; }
+</style>
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import router from './router/index.js'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(createPinia())
+app.use(router)
+app.mount('#app')
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -0,0 +1,22 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+import Login from '../views/Login.vue'
+import Admin from '../views/Admin.vue'
+
+const routes = [
+  { path: '/', component: Home },
+  { path: '/login', component: Login },
+  { path: '/admin', component: Admin, meta: { requiresAuth: true } },
+]
+
+const router = createRouter({ history: createWebHistory(), routes })
+
+router.beforeEach((to, from, next) => {
+  if (to.meta.requiresAuth && !localStorage.getItem('token')) {
+    next('/login')
+  } else {
+    next()
+  }
+})
+
+export default router
--- a/frontend/src/stores/auth.js
+++ b/frontend/src/stores/auth.js
@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import axios from 'axios'
+
+export const useAuthStore = defineStore('auth', () => {
+  const token = ref(localStorage.getItem('token') || '')
+  const isLoggedIn = computed(() => !!token.value)
+
+  async function login(username, password) {
+    const res = await axios.post('/api/auth/login', { username, password })
+    token.value = res.data.access_token
+    localStorage.setItem('token', token.value)
+  }
+
+  function logout() {
+    token.value = ''
+    localStorage.removeItem('token')
+  }
+
+  function getHeaders() {
+    return token.value ? { Authorization: `Bearer ${token.value}` } : {}
+  }
+
+  return { token, isLoggedIn, login, logout, getHeaders }
+})
--- a/frontend/src/views/Admin.vue
+++ b/frontend/src/views/Admin.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="admin">
+    <div class="header">
+      <h2>Video Library</h2>
+      <div v-if="stats" class="stats">
+        📊 {{ stats.total_videos }} videos · {{ stats.total_size_human }}
+      </div>
+    </div>
+
+    <div class="search-bar">
+      <input v-model="search" placeholder="Search videos..." @input="debouncedFetch" />
+      <select v-model="filterStatus" @change="fetchVideos">
+        <option value="">All Status</option>
+        <option value="done">Done</option>
+        <option value="downloading">Downloading</option>
+        <option value="error">Error</option>
+        <option value="pending">Pending</option>
+      </select>
+    </div>
+
+    <div class="video-list">
+      <div v-for="v in videos" :key="v.id" class="video-card">
+        <div class="video-main">
+          <img v-if="v.thumbnail" :src="v.thumbnail" class="thumb" />
+          <div class="info">
+            <h4>{{ v.title || 'Untitled' }}</h4>
+            <div class="meta">
+              <span :class="'status-' + v.status">{{ v.status }}</span>
+              <span>{{ v.quality }}</span>
+              <span>{{ humanSize(v.file_size) }}</span>
+              <span>{{ new Date(v.created_at).toLocaleString() }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="actions">
+          <button v-if="v.status === 'done'" @click="playVideo(v)" class="btn-play">▶ Play</button>
+          <a v-if="v.status === 'done'" :href="'/api/file/' + v.id" class="btn-dl"
+             :download="v.filename" @click.prevent="downloadAuth(v)">💾</a>
+          <button @click="deleteVideo(v)" class="btn-del">🗑</button>
+        </div>
+      </div>
+      <div v-if="!videos.length" class="empty">No videos found</div>
+    </div>
+
+    <div v-if="totalPages > 1" class="pagination">
+      <button :disabled="page <= 1" @click="page--; fetchVideos()">Prev</button>
+      <span>{{ page }} / {{ totalPages }}</span>
+      <button :disabled="page >= totalPages" @click="page++; fetchVideos()">Next</button>
+    </div>
+
+    <!-- Video Player Modal -->
+    <div v-if="playing" class="modal" @click.self="playing = null">
+      <div class="player-wrap">
+        <video :src="playUrl" controls autoplay class="player"></video>
+        <button @click="playing = null" class="close-btn">✕</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import axios from 'axios'
+import { useAuthStore } from '../stores/auth.js'
+
+const auth = useAuthStore()
+const videos = ref([])
+const stats = ref(null)
+const search = ref('')
+const filterStatus = ref('')
+const page = ref(1)
+const total = ref(0)
+const pageSize = 20
+const playing = ref(null)
+const playUrl = ref('')
+
+const totalPages = computed(() => Math.ceil(total.value / pageSize) || 1)
+
+function humanSize(bytes) {
+  if (!bytes) return '0 B'
+  for (const u of ['B', 'KB', 'MB', 'GB']) {
+    if (bytes < 1024) return `${bytes.toFixed(1)} ${u}`
+    bytes /= 1024
+  }
+  return `${bytes.toFixed(1)} TB`
+}
+
+let debounceTimer
+function debouncedFetch() {
+  clearTimeout(debounceTimer)
+  debounceTimer = setTimeout(() => { page.value = 1; fetchVideos() }, 300)
+}
+
+async function fetchVideos() {
+  try {
+    const res = await axios.get('/api/admin/videos', {
+      params: { page: page.value, page_size: pageSize, search: search.value, status: filterStatus.value },
+      headers: auth.getHeaders()
+    })
+    videos.value = res.data.videos
+    total.value = res.data.total
+  } catch (e) {
+    if (e.response?.status === 401) { auth.logout(); location.href = '/login' }
+  }
+}
+
+async function fetchStats() {
+  try {
+    const res = await axios.get('/api/admin/stats', { headers: auth.getHeaders() })
+    stats.value = res.data
+  } catch {}
+}
+
+function playVideo(v) {
+  playing.value = v
+  playUrl.value = `/api/stream/${v.id}?token=${auth.token}`
+}
+
+async function downloadAuth(v) {
+  const res = await axios.get(`/api/file/${v.id}`, { headers: auth.getHeaders(), responseType: 'blob' })
+  const url = URL.createObjectURL(res.data)
+  const a = document.createElement('a'); a.href = url; a.download = v.filename; a.click()
+  URL.revokeObjectURL(url)
+}
+
+async function deleteVideo(v) {
+  if (!confirm(`Delete "${v.title}"?`)) return
+  try {
+    await axios.delete(`/api/admin/videos/${v.id}`, { headers: auth.getHeaders() })
+    fetchVideos(); fetchStats()
+  } catch (e) {
+    alert('Delete failed')
+  }
+}
+
+onMounted(() => { fetchVideos(); fetchStats() })
+</script>
+
+<style scoped>
+.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
+.stats { color: #888; }
+.search-bar { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
+.search-bar input { flex: 1; padding: 0.6rem 1rem; border: 1px solid #444; border-radius: 8px; background: #1a1a2e; color: #fff; }
+.search-bar select { padding: 0.6rem; border: 1px solid #444; border-radius: 8px; background: #1a1a2e; color: #fff; }
+.video-card {
+  display: flex; justify-content: space-between; align-items: center;
+  background: #1a1a2e; border-radius: 10px; padding: 1rem; margin-bottom: 0.8rem;
+  gap: 1rem;
+}
+.video-main { display: flex; gap: 1rem; flex: 1; min-width: 0; }
+.thumb { width: 80px; height: 45px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
+.info { min-width: 0; }
+.info h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.3rem; }
+.meta { display: flex; gap: 0.8rem; font-size: 0.85rem; color: #888; flex-wrap: wrap; }
+.status-done { color: #27ae60; }
+.status-downloading { color: #f39c12; }
+.status-error { color: #e74c3c; }
+.status-pending { color: #888; }
+.actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
+.actions button, .actions a {
+  padding: 0.4rem 0.6rem; border: 1px solid #444; border-radius: 6px;
+  background: transparent; color: #fff; cursor: pointer; text-decoration: none; font-size: 0.9rem;
+}
+.actions button:hover, .actions a:hover { border-color: #1da1f2; }
+.btn-del:hover { border-color: #e74c3c !important; }
+.empty { text-align: center; color: #666; padding: 3rem; }
+.pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.5rem; }
+.pagination button { padding: 0.5rem 1rem; border: 1px solid #444; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; }
+.pagination button:disabled { opacity: 0.3; cursor: not-allowed; }
+.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; z-index: 999; }
+.player-wrap { position: relative; max-width: 90vw; max-height: 90vh; }
+.player { max-width: 90vw; max-height: 85vh; border-radius: 8px; }
+.close-btn { position: absolute; top: -40px; right: 0; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }
+</style>
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="home">
+    <h1>Twitter/X Video Downloader</h1>
+    <p class="subtitle">Paste a Twitter/X video link to download</p>
+
+    <div class="input-group">
+      <input v-model="url" placeholder="https://x.com/user/status/123..." @keyup.enter="parseUrl" :disabled="loading" />
+      <button @click="parseUrl" :disabled="loading || !url.trim()">
+        {{ loading ? '⏳ Parsing...' : '🔍 Parse' }}
+      </button>
+    </div>
+
+    <div v-if="error" class="error">{{ error }}</div>
+
+    <div v-if="videoInfo" class="video-info">
+      <img v-if="videoInfo.thumbnail" :src="videoInfo.thumbnail" class="thumbnail" />
+      <h3>{{ videoInfo.title }}</h3>
+      <p class="duration">Duration: {{ formatDuration(videoInfo.duration) }}</p>
+
+      <div class="formats">
+        <h4>Select Quality:</h4>
+        <div v-for="fmt in videoInfo.formats" :key="fmt.format_id" class="format-item"
+             :class="{ selected: selectedFormat === fmt.format_id }" @click="selectedFormat = fmt.format_id">
+          <span class="quality">{{ fmt.quality }}</span>
+          <span class="ext">{{ fmt.ext }}</span>
+          <span v-if="fmt.filesize" class="size">~{{ humanSize(fmt.filesize) }}</span>
+        </div>
+      </div>
+
+      <button class="download-btn" @click="startDownload" :disabled="downloading">
+        {{ downloading ? '⏳ Downloading...' : '📥 Download' }}
+      </button>
+    </div>
+
+    <div v-if="taskId" class="task-status">
+      <div class="progress-bar">
+        <div class="progress-fill" :style="{ width: progress + '%' }"></div>
+      </div>
+      <p>{{ statusText }}</p>
+      <a v-if="downloadReady" :href="downloadUrl" class="download-link" download>💾 Save to device</a>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import axios from 'axios'
+
+const url = ref('')
+const loading = ref(false)
+const error = ref('')
+const videoInfo = ref(null)
+const selectedFormat = ref('best')
+const downloading = ref(false)
+const taskId = ref('')
+const progress = ref(0)
+const statusText = ref('')
+const downloadReady = ref(false)
+const downloadUrl = ref('')
+
+function formatDuration(s) {
+  if (!s) return 'N/A'
+  const m = Math.floor(s / 60), sec = s % 60
+  return `${m}:${String(sec).padStart(2, '0')}`
+}
+
+function humanSize(bytes) {
+  for (const u of ['B', 'KB', 'MB', 'GB']) {
+    if (bytes < 1024) return `${bytes.toFixed(1)} ${u}`
+    bytes /= 1024
+  }
+  return `${bytes.toFixed(1)} TB`
+}
+
+async function parseUrl() {
+  if (!url.value.trim()) return
+  loading.value = true; error.value = ''; videoInfo.value = null; taskId.value = ''
+  downloadReady.value = false
+  try {
+    const res = await axios.post('/api/parse', { url: url.value })
+    videoInfo.value = res.data
+    selectedFormat.value = 'best'
+  } catch (e) {
+    error.value = e.response?.data?.detail || 'Failed to parse URL'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function startDownload() {
+  downloading.value = true; error.value = ''
+  try {
+    const res = await axios.post('/api/download', {
+      url: url.value, format_id: selectedFormat.value, quality: selectedFormat.value
+    })
+    taskId.value = res.data.task_id
+    statusText.value = 'Starting download...'
+    pollStatus()
+  } catch (e) {
+    error.value = e.response?.data?.detail || 'Failed to start download'
+    downloading.value = false
+  }
+}
+
+async function pollStatus() {
+  if (!taskId.value) return
+  try {
+    const res = await axios.get(`/api/download/${taskId.value}`)
+    const d = res.data
+    progress.value = d.progress
+    if (d.status === 'done') {
+      statusText.value = `✅ Done: ${d.title}`
+      downloading.value = false
+      downloadReady.value = true
+      downloadUrl.value = `/api/file/task/${taskId.value}`
+    } else if (d.status === 'error') {
+      statusText.value = `❌ Error: ${d.error_message}`
+      downloading.value = false
+    } else {
+      statusText.value = `⏳ ${d.status}... ${d.progress}%`
+      setTimeout(pollStatus, 2000)
+    }
+  } catch {
+    setTimeout(pollStatus, 3000)
+  }
+}
+</script>
+
+<style scoped>
+.home { text-align: center; }
+h1 { font-size: 2rem; margin-bottom: 0.5rem; }
+.subtitle { color: #888; margin-bottom: 2rem; }
+.input-group { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
+.input-group input {
+  flex: 1; padding: 0.8rem 1rem; border: 1px solid #444; border-radius: 8px;
+  background: #1a1a2e; color: #fff; font-size: 1rem;
+}
+.input-group button, .download-btn {
+  padding: 0.8rem 1.5rem; border: none; border-radius: 8px; cursor: pointer;
+  background: #1da1f2; color: #fff; font-size: 1rem; font-weight: 600;
+  transition: background 0.2s;
+}
+.input-group button:hover, .download-btn:hover { background: #1991db; }
+.input-group button:disabled, .download-btn:disabled { background: #555; cursor: not-allowed; }
+.error { color: #ff6b6b; margin: 1rem 0; padding: 0.8rem; background: #2a1515; border-radius: 8px; }
+.video-info { text-align: left; background: #1a1a2e; border-radius: 12px; padding: 1.5rem; margin-top: 1.5rem; }
+.thumbnail { width: 100%; max-height: 300px; object-fit: cover; border-radius: 8px; margin-bottom: 1rem; }
+.video-info h3 { margin-bottom: 0.5rem; }
+.duration { color: #888; margin-bottom: 1rem; }
+.formats { margin: 1rem 0; }
+.formats h4 { margin-bottom: 0.5rem; }
+.format-item {
+  display: flex; gap: 1rem; align-items: center; padding: 0.6rem 1rem;
+  border: 1px solid #333; border-radius: 8px; margin-bottom: 0.4rem; cursor: pointer;
+  transition: all 0.2s;
+}
+.format-item:hover { border-color: #1da1f2; }
+.format-item.selected { border-color: #1da1f2; background: rgba(29, 161, 242, 0.1); }
+.quality { font-weight: 600; min-width: 60px; }
+.ext { color: #888; }
+.size { color: #888; margin-left: auto; }
+.download-btn { width: 100%; margin-top: 1rem; padding: 1rem; font-size: 1.1rem; }
+.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; }
+.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;
+}
+</style>
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="login">
+    <h2>Admin Login</h2>
+    <form @submit.prevent="handleLogin">
+      <input v-model="username" placeholder="Username" required />
+      <input v-model="password" type="password" placeholder="Password" required />
+      <div v-if="error" class="error">{{ error }}</div>
+      <button type="submit" :disabled="loading">{{ loading ? 'Logging in...' : 'Login' }}</button>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/auth.js'
+
+const auth = useAuthStore()
+const router = useRouter()
+const username = ref('')
+const password = ref('')
+const error = ref('')
+const loading = ref(false)
+
+async function handleLogin() {
+  loading.value = true; error.value = ''
+  try {
+    await auth.login(username.value, password.value)
+    router.push('/admin')
+  } catch (e) {
+    error.value = e.response?.data?.detail || 'Login failed'
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.login { max-width: 360px; margin: 4rem auto; text-align: center; }
+h2 { margin-bottom: 1.5rem; }
+form { display: flex; flex-direction: column; gap: 1rem; }
+input {
+  padding: 0.8rem 1rem; border: 1px solid #444; border-radius: 8px;
+  background: #1a1a2e; color: #fff; font-size: 1rem;
+}
+button {
+  padding: 0.8rem; border: none; border-radius: 8px; cursor: pointer;
+  background: #1da1f2; color: #fff; font-size: 1rem; font-weight: 600;
+}
+button:disabled { background: #555; }
+.error { color: #ff6b6b; padding: 0.5rem; background: #2a1515; border-radius: 8px; }
+</style>