Initial commit: XDL Twitter/X video downloader
This commit is contained in:
mini
174
frontend/src/views/Admin.vue
Normal file
174
frontend/src/views/Admin.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user