Fix web UI, sort labels, add channel right-click menu
Web UI: - Replace SSE with simple 600ms polling (GET /api/progress) — SSE added complexity with no real benefit for a local tool and was the source of connection failures - Poll task moved into request handler (dl.poll() on each /api/progress call) so no background goroutine needed; simplifies state greatly - Remove tokio-stream dependency (no longer needed) - Fix: create channels dir before opening DB in web serve() - Rescan also refreshes watched set from DB - Bulk watched, sort, channel download button all working in web UI Sort labels: - Rename "Dur ↑" / "Dur ↓" → "Shortest" / "Longest" - Rename "Size ↑" / "Size ↓" → "Smallest" / "Largest" Channel right-click context menu: - Right-click any channel in sidebar → "Check for new videos" starts a yt-dlp job on the stored channel_url from its info.json - Also shows "Open folder" shortcut - Grayed out with tooltip if no URL is stored yet (channel has no info.json) Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Luna
parent
56f1f1bd80
commit
8b4796b518
4 changed files with 303 additions and 274 deletions
49
src/app.rs
49
src/app.rs
|
|
@ -517,14 +517,18 @@ impl App {
|
|||
|
||||
ui.separator();
|
||||
|
||||
// Collect any right-click download action outside the loop
|
||||
let mut pending_ch_download: Option<(String, String)> = None; // (url, channel_name)
|
||||
|
||||
for i in 0..self.library.len() {
|
||||
let (name, total, has_playlists, size_bytes) = {
|
||||
let (name, total, has_playlists, size_bytes, channel_url) = {
|
||||
let ch = &self.library[i];
|
||||
(
|
||||
ch.name.clone(),
|
||||
ch.total_videos(),
|
||||
!ch.playlists.is_empty(),
|
||||
Self::channel_total_size(ch),
|
||||
ch.meta.as_ref().and_then(|m| m.channel_url.clone()),
|
||||
)
|
||||
};
|
||||
|
||||
|
|
@ -539,14 +543,34 @@ impl App {
|
|||
let label = format!("{} ({}{})", name, total, size_str);
|
||||
|
||||
let ch_selected_no_pl = matches!(self.sidebar_view, SidebarView::Channel(ci) if ci == i);
|
||||
if ui
|
||||
let resp = ui
|
||||
.selectable_label(ch_selected_no_pl, label)
|
||||
.on_hover_text(self.library[i].path.display().to_string())
|
||||
.clicked()
|
||||
{
|
||||
.on_hover_text(self.library[i].path.display().to_string());
|
||||
if resp.clicked() {
|
||||
self.sidebar_view = SidebarView::Channel(i);
|
||||
self.selected_video = None;
|
||||
}
|
||||
// Right-click context menu
|
||||
let url_for_menu = channel_url.clone();
|
||||
let name_for_menu = name.clone();
|
||||
resp.context_menu(|ui| {
|
||||
if let Some(ref url) = url_for_menu {
|
||||
if ui.button("⬇ Check for new videos").clicked() {
|
||||
pending_ch_download = Some((url.clone(), name_for_menu.clone()));
|
||||
ui.close_menu();
|
||||
}
|
||||
} else {
|
||||
ui.add_enabled(false, egui::Button::new("⬇ Check for new videos"))
|
||||
.on_hover_text("Download this channel first to store its URL");
|
||||
}
|
||||
if ui.button("📁 Open folder").clicked() {
|
||||
let path = self.library[i].path.clone();
|
||||
if let Err(e) = std::process::Command::new("xdg-open").arg(&path).spawn() {
|
||||
eprintln!("xdg-open: {e}");
|
||||
}
|
||||
ui.close_menu();
|
||||
}
|
||||
});
|
||||
|
||||
if is_ch_selected && has_playlists {
|
||||
let playlist_count = self.library[i].playlists.len();
|
||||
|
|
@ -564,6 +588,13 @@ impl App {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Process deferred right-click download action
|
||||
if let Some((url, ch_name)) = pending_ch_download {
|
||||
let kind = detect_url_kind(&url);
|
||||
self.downloader.start(url, &kind);
|
||||
self.status = format!("Checking {} for new videos…", ch_name);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -946,10 +977,10 @@ impl App {
|
|||
}
|
||||
|
||||
ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
|
||||
ui.selectable_value(&mut self.sort_mode, SortMode::SizeDesc, "Size ↓");
|
||||
ui.selectable_value(&mut self.sort_mode, SortMode::SizeAsc, "Size ↑");
|
||||
ui.selectable_value(&mut self.sort_mode, SortMode::DurationDesc, "Dur ↓");
|
||||
ui.selectable_value(&mut self.sort_mode, SortMode::DurationAsc, "Dur ↑");
|
||||
ui.selectable_value(&mut self.sort_mode, SortMode::SizeDesc, "Largest");
|
||||
ui.selectable_value(&mut self.sort_mode, SortMode::SizeAsc, "Smallest");
|
||||
ui.selectable_value(&mut self.sort_mode, SortMode::DurationDesc, "Longest");
|
||||
ui.selectable_value(&mut self.sort_mode, SortMode::DurationAsc, "Shortest");
|
||||
ui.selectable_value(&mut self.sort_mode, SortMode::Title, "Title");
|
||||
ui.label(egui::RichText::new("Sort:").weak());
|
||||
});
|
||||
|
|
|
|||
501
src/web.rs
501
src/web.rs
|
|
@ -1,8 +1,4 @@
|
|||
//! Web interface — run with `--web [PORT]` instead of the GUI.
|
||||
//!
|
||||
//! Serves a browser-based UI on http://localhost:PORT that mirrors the
|
||||
//! desktop app's core features: browse library, start downloads, track
|
||||
//! progress, toggle watched.
|
||||
|
||||
use std::collections::HashSet;
|
||||
use std::path::PathBuf;
|
||||
|
|
@ -11,21 +7,18 @@ use std::sync::{Arc, Mutex};
|
|||
use axum::{
|
||||
extract::{Path, State},
|
||||
http::{header, StatusCode},
|
||||
response::{IntoResponse, Sse},
|
||||
response::IntoResponse,
|
||||
routing::{get, post},
|
||||
Json, Router,
|
||||
};
|
||||
use serde::{Deserialize, Serialize};
|
||||
use tokio::sync::broadcast;
|
||||
use tokio_stream::wrappers::BroadcastStream;
|
||||
use tokio_stream::StreamExt as _;
|
||||
|
||||
use crate::config::Config;
|
||||
use crate::database::Database;
|
||||
use crate::downloader::{detect_url_kind, Downloader, JobState};
|
||||
use crate::library;
|
||||
|
||||
// ── Shared state ─────────────────────────────────────────────────────────────
|
||||
// ── Shared state ──────────────────────────────────────────────────────────────
|
||||
|
||||
#[derive(Clone, Serialize)]
|
||||
pub struct JobSnapshot {
|
||||
|
|
@ -42,13 +35,10 @@ pub struct WebState {
|
|||
pub watched: Mutex<HashSet<String>>,
|
||||
pub db_path: PathBuf,
|
||||
pub channels_root: PathBuf,
|
||||
pub browser: String,
|
||||
/// Broadcast channel for SSE progress events
|
||||
pub progress_tx: broadcast::Sender<String>,
|
||||
}
|
||||
|
||||
impl WebState {
|
||||
pub fn job_snapshots(dl: &Downloader) -> Vec<JobSnapshot> {
|
||||
fn job_snapshots(dl: &Downloader) -> Vec<JobSnapshot> {
|
||||
dl.jobs
|
||||
.iter()
|
||||
.map(|j| JobSnapshot {
|
||||
|
|
@ -112,7 +102,7 @@ struct ProgressResponse {
|
|||
jobs: Vec<JobSnapshot>,
|
||||
}
|
||||
|
||||
// ── Route handlers ────────────────────────────────────────────────────────────
|
||||
// ── Handlers ──────────────────────────────────────────────────────────────────
|
||||
|
||||
async fn get_index() -> impl IntoResponse {
|
||||
(
|
||||
|
|
@ -125,49 +115,45 @@ async fn get_library(State(state): State<Arc<WebState>>) -> impl IntoResponse {
|
|||
let lib = state.library.lock().unwrap();
|
||||
let watched = state.watched.lock().unwrap();
|
||||
|
||||
let channels = lib
|
||||
.iter()
|
||||
.map(|ch| {
|
||||
let size_bytes: u64 = ch
|
||||
.videos
|
||||
.iter()
|
||||
.chain(ch.playlists.iter().flat_map(|p| p.videos.iter()))
|
||||
.filter_map(|v| v.file_size)
|
||||
.sum();
|
||||
let to_info = |v: &library::Video, watched: &HashSet<String>| VideoInfo {
|
||||
id: v.id.clone(),
|
||||
title: v.title.clone(),
|
||||
duration_secs: v.duration_secs,
|
||||
file_size: v.file_size,
|
||||
has_video: v.video_path.is_some(),
|
||||
has_live_chat: v.has_live_chat,
|
||||
watched: watched.contains(&v.id),
|
||||
};
|
||||
|
||||
let to_info = |v: &library::Video| VideoInfo {
|
||||
id: v.id.clone(),
|
||||
title: v.title.clone(),
|
||||
duration_secs: v.duration_secs,
|
||||
file_size: v.file_size,
|
||||
has_video: v.video_path.is_some(),
|
||||
has_live_chat: v.has_live_chat,
|
||||
watched: watched.contains(&v.id),
|
||||
};
|
||||
|
||||
ChannelInfo {
|
||||
name: ch.name.clone(),
|
||||
total_videos: ch.total_videos(),
|
||||
size_bytes,
|
||||
subscriber_count: ch.meta.as_ref().and_then(|m| m.subscriber_count),
|
||||
uploader: ch.meta.as_ref().and_then(|m| m.uploader.clone()),
|
||||
channel_url: ch.meta.as_ref().and_then(|m| m.channel_url.clone()),
|
||||
playlists: ch
|
||||
.playlists
|
||||
.iter()
|
||||
.map(|p| PlaylistInfo {
|
||||
name: p.name.clone(),
|
||||
videos: p.videos.iter().map(to_info).collect(),
|
||||
})
|
||||
.collect(),
|
||||
videos: ch.videos.iter().map(to_info).collect(),
|
||||
}
|
||||
})
|
||||
.collect();
|
||||
let channels = lib.iter().map(|ch| {
|
||||
let size_bytes: u64 = ch.videos.iter()
|
||||
.chain(ch.playlists.iter().flat_map(|p| p.videos.iter()))
|
||||
.filter_map(|v| v.file_size)
|
||||
.sum();
|
||||
ChannelInfo {
|
||||
name: ch.name.clone(),
|
||||
total_videos: ch.total_videos(),
|
||||
size_bytes,
|
||||
subscriber_count: ch.meta.as_ref().and_then(|m| m.subscriber_count),
|
||||
uploader: ch.meta.as_ref().and_then(|m| m.uploader.clone()),
|
||||
channel_url: ch.meta.as_ref().and_then(|m| m.channel_url.clone()),
|
||||
playlists: ch.playlists.iter().map(|p| PlaylistInfo {
|
||||
name: p.name.clone(),
|
||||
videos: p.videos.iter().map(|v| to_info(v, &watched)).collect(),
|
||||
}).collect(),
|
||||
videos: ch.videos.iter().map(|v| to_info(v, &watched)).collect(),
|
||||
}
|
||||
}).collect();
|
||||
|
||||
Json(LibraryResponse { channels })
|
||||
}
|
||||
|
||||
async fn get_progress(State(state): State<Arc<WebState>>) -> impl IntoResponse {
|
||||
let mut dl = state.downloader.lock().unwrap();
|
||||
dl.poll();
|
||||
Json(ProgressResponse { jobs: WebState::job_snapshots(&dl) })
|
||||
}
|
||||
|
||||
async fn post_download(
|
||||
State(state): State<Arc<WebState>>,
|
||||
Json(body): Json<StartDownloadRequest>,
|
||||
|
|
@ -177,18 +163,10 @@ async fn post_download(
|
|||
return (StatusCode::BAD_REQUEST, "empty URL").into_response();
|
||||
}
|
||||
let kind = detect_url_kind(&url);
|
||||
{
|
||||
let mut dl = state.downloader.lock().unwrap();
|
||||
dl.start(url, &kind);
|
||||
}
|
||||
state.downloader.lock().unwrap().start(url, &kind);
|
||||
(StatusCode::ACCEPTED, "ok").into_response()
|
||||
}
|
||||
|
||||
async fn get_progress(State(state): State<Arc<WebState>>) -> impl IntoResponse {
|
||||
let dl = state.downloader.lock().unwrap();
|
||||
Json(ProgressResponse { jobs: WebState::job_snapshots(&dl) })
|
||||
}
|
||||
|
||||
async fn post_watched(
|
||||
State(state): State<Arc<WebState>>,
|
||||
Path(video_id): Path<String>,
|
||||
|
|
@ -202,53 +180,41 @@ async fn post_watched(
|
|||
if let Err(e) = db.set_watched(&video_id, now_watched) {
|
||||
return (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()).into_response();
|
||||
}
|
||||
if now_watched {
|
||||
watched.insert(video_id);
|
||||
} else {
|
||||
watched.remove(&video_id);
|
||||
}
|
||||
if now_watched { watched.insert(video_id); } else { watched.remove(&video_id); }
|
||||
(StatusCode::OK, if now_watched { "watched" } else { "unwatched" }).into_response()
|
||||
}
|
||||
|
||||
async fn get_events(State(state): State<Arc<WebState>>) -> Sse<impl tokio_stream::Stream<Item = Result<axum::response::sse::Event, std::convert::Infallible>>> {
|
||||
let rx = state.progress_tx.subscribe();
|
||||
let stream = BroadcastStream::new(rx).filter_map(|msg| {
|
||||
msg.ok().map(|data| {
|
||||
Ok(axum::response::sse::Event::default().data(data))
|
||||
})
|
||||
});
|
||||
Sse::new(stream).keep_alive(axum::response::sse::KeepAlive::default())
|
||||
}
|
||||
|
||||
async fn post_rescan(State(state): State<Arc<WebState>>) -> impl IntoResponse {
|
||||
let root = state.channels_root.clone();
|
||||
let new_lib = library::scan_channels(&root);
|
||||
let new_lib = library::scan_channels(&state.channels_root);
|
||||
// Refresh watched from DB after rescan
|
||||
if let Ok(db) = Database::open(&state.db_path) {
|
||||
if let Ok(w) = db.get_watched() {
|
||||
*state.watched.lock().unwrap() = w;
|
||||
}
|
||||
}
|
||||
*state.library.lock().unwrap() = new_lib;
|
||||
(StatusCode::OK, "rescanned")
|
||||
}
|
||||
|
||||
// ── Server entry point ────────────────────────────────────────────────────────
|
||||
// ── Entry point ───────────────────────────────────────────────────────────────
|
||||
|
||||
pub fn run(config: Config) -> ! {
|
||||
let rt = tokio::runtime::Runtime::new().expect("tokio runtime");
|
||||
rt.block_on(async move {
|
||||
serve(config).await;
|
||||
});
|
||||
rt.block_on(serve(config));
|
||||
unreachable!()
|
||||
}
|
||||
|
||||
async fn serve(config: Config) {
|
||||
let channels_root = config.backup.directory.clone();
|
||||
let _ = std::fs::create_dir_all(&channels_root);
|
||||
let db_path = channels_root.join("yt-offline.db");
|
||||
|
||||
let library = library::scan_channels(&channels_root);
|
||||
let watched = Database::open(&db_path)
|
||||
.and_then(|db| db.get_watched())
|
||||
.unwrap_or_default();
|
||||
|
||||
let db = Database::open(&db_path).expect("web: open db");
|
||||
let watched = db.get_watched().unwrap_or_default();
|
||||
|
||||
let browser = config.player.browser.clone();
|
||||
let downloader = Downloader::new(channels_root.clone(), browser.clone());
|
||||
|
||||
let (progress_tx, _) = broadcast::channel::<String>(64);
|
||||
let downloader = Downloader::new(channels_root.clone(), config.player.browser.clone());
|
||||
|
||||
let state = Arc::new(WebState {
|
||||
library: Mutex::new(library),
|
||||
|
|
@ -256,45 +222,26 @@ async fn serve(config: Config) {
|
|||
watched: Mutex::new(watched),
|
||||
db_path,
|
||||
channels_root,
|
||||
browser,
|
||||
progress_tx: progress_tx.clone(),
|
||||
});
|
||||
|
||||
// Background task: poll downloader and broadcast SSE events
|
||||
let poll_state = Arc::clone(&state);
|
||||
tokio::spawn(async move {
|
||||
loop {
|
||||
{
|
||||
let mut dl = poll_state.downloader.lock().unwrap();
|
||||
dl.poll();
|
||||
let snap = WebState::job_snapshots(&dl);
|
||||
drop(dl);
|
||||
if let Ok(json) = serde_json::to_string(&snap) {
|
||||
let _ = poll_state.progress_tx.send(json);
|
||||
}
|
||||
}
|
||||
tokio::time::sleep(tokio::time::Duration::from_millis(500)).await;
|
||||
}
|
||||
});
|
||||
|
||||
let app = Router::new()
|
||||
.route("/", get(get_index))
|
||||
.route("/api/library", get(get_library))
|
||||
.route("/api/download", post(post_download))
|
||||
.route("/api/progress", get(get_progress))
|
||||
.route("/api/events", get(get_events))
|
||||
.route("/api/download", post(post_download))
|
||||
.route("/api/watched/:id", post(post_watched))
|
||||
.route("/api/rescan", post(post_rescan))
|
||||
.with_state(state);
|
||||
|
||||
let port = config.web.port;
|
||||
let addr = format!("0.0.0.0:{port}");
|
||||
let listener = tokio::net::TcpListener::bind(&addr).await.expect("bind");
|
||||
let listener = tokio::net::TcpListener::bind(format!("0.0.0.0:{port}"))
|
||||
.await
|
||||
.unwrap_or_else(|e| panic!("Cannot bind to port {port}: {e}"));
|
||||
println!("yt-offline web UI: http://localhost:{port}");
|
||||
axum::serve(listener, app).await.expect("serve");
|
||||
axum::serve(listener, app).await.expect("server error");
|
||||
}
|
||||
|
||||
// ── Embedded HTML/JS UI ───────────────────────────────────────────────────────
|
||||
// ── Embedded UI ───────────────────────────────────────────────────────────────
|
||||
|
||||
const HTML_UI: &str = r#"<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
|
@ -304,198 +251,276 @@ const HTML_UI: &str = r#"<!DOCTYPE html>
|
|||
<title>yt-offline</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #1a1a2e; --panel: #16213e; --card: #0f3460;
|
||||
--accent: #e94560; --text: #eee; --muted: #aaa; --border: #334;
|
||||
--bg:#1a1a2e; --panel:#16213e; --card:#0f3460;
|
||||
--accent:#e94560; --text:#eee; --muted:#999; --border:#334;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { background: var(--bg); color: var(--text); font: 14px/1.5 system-ui, sans-serif; display: flex; flex-direction: column; height: 100vh; }
|
||||
header { background: var(--panel); padding: 10px 16px; display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--border); }
|
||||
header h1 { font-size: 1.1em; }
|
||||
header input { flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: 4px; }
|
||||
button { background: var(--accent); color: #fff; border: none; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 13px; }
|
||||
button:hover { opacity: 0.85; }
|
||||
button.muted { background: var(--card); }
|
||||
main { display: flex; flex: 1; overflow: hidden; }
|
||||
aside { width: 220px; background: var(--panel); border-right: 1px solid var(--border); overflow-y: auto; padding: 8px 0; flex-shrink: 0; }
|
||||
aside h3 { padding: 6px 12px; font-size: 0.75em; text-transform: uppercase; color: var(--muted); letter-spacing: 0.08em; }
|
||||
.ch-item { padding: 6px 12px; cursor: pointer; font-size: 13px; border-left: 3px solid transparent; }
|
||||
.ch-item:hover { background: var(--card); }
|
||||
.ch-item.active { border-left-color: var(--accent); background: var(--card); }
|
||||
.ch-sub { padding: 4px 12px 4px 24px; font-size: 12px; color: var(--muted); cursor: pointer; }
|
||||
.ch-sub:hover { color: var(--text); }
|
||||
section#content { flex: 1; overflow-y: auto; padding: 12px; }
|
||||
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
|
||||
.video-card { background: var(--card); border-radius: 6px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color 0.15s; }
|
||||
.video-card:hover { border-color: var(--accent); }
|
||||
.video-card.watched { opacity: 0.55; }
|
||||
.thumb { width: 100%; aspect-ratio: 16/9; background: #222; display: flex; align-items: center; justify-content: center; font-size: 2em; color: #555; }
|
||||
.card-body { padding: 8px; }
|
||||
.card-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.card-meta { font-size: 11px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.card-actions { display: flex; gap: 6px; margin-top: 6px; }
|
||||
.card-actions button { font-size: 11px; padding: 3px 8px; }
|
||||
#download-bar { background: var(--panel); border-top: 1px solid var(--border); padding: 10px 16px; display: flex; gap: 8px; align-items: center; }
|
||||
#download-bar input { flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: 4px; }
|
||||
#jobs { background: var(--panel); border-top: 1px solid var(--border); }
|
||||
.job { padding: 6px 16px; display: flex; align-items: center; gap: 10px; font-size: 12px; border-bottom: 1px solid var(--border); }
|
||||
.job-state { font-weight: 700; min-width: 50px; }
|
||||
.job-state.running { color: #facc15; }
|
||||
.job-state.done { color: #4ade80; }
|
||||
.job-state.failed { color: #f87171; }
|
||||
progress { flex: 1; height: 6px; accent-color: var(--accent); }
|
||||
#status { font-size: 12px; color: var(--muted); padding: 0 16px; }
|
||||
.badge { background: var(--accent); color: #fff; border-radius: 10px; padding: 1px 7px; font-size: 10px; }
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
body{background:var(--bg);color:var(--text);font:14px/1.5 system-ui,sans-serif;display:flex;flex-direction:column;height:100vh;overflow:hidden}
|
||||
header{background:var(--panel);padding:8px 14px;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--border);flex-shrink:0}
|
||||
header h1{font-size:1em;font-weight:700;white-space:nowrap}
|
||||
header input{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:5px 9px;border-radius:4px;font-size:13px}
|
||||
button{background:var(--card);color:var(--text);border:1px solid var(--border);padding:5px 12px;border-radius:4px;cursor:pointer;font-size:12px}
|
||||
button:hover{background:var(--accent);border-color:var(--accent);color:#fff}
|
||||
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
|
||||
main{display:flex;flex:1;overflow:hidden}
|
||||
aside{width:210px;background:var(--panel);border-right:1px solid var(--border);overflow-y:auto;flex-shrink:0;padding:6px 0}
|
||||
.sidebar-label{padding:2px 10px;font-size:10px;text-transform:uppercase;color:var(--muted);letter-spacing:.07em;margin-top:6px}
|
||||
.ch-item{padding:5px 10px;cursor:pointer;font-size:13px;border-left:3px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.ch-item:hover{background:var(--card)}
|
||||
.ch-item.active{border-left-color:var(--accent);background:rgba(255,255,255,.04)}
|
||||
.ch-sub{padding:3px 10px 3px 22px;font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.ch-sub:hover{color:var(--text);background:rgba(255,255,255,.03)}
|
||||
.ch-sub.active{color:var(--text)}
|
||||
section#content{flex:1;overflow-y:auto;padding:10px}
|
||||
.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
|
||||
.toolbar select{background:var(--card);color:var(--text);border:1px solid var(--border);padding:4px 8px;border-radius:4px;font-size:12px}
|
||||
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
|
||||
.card{background:var(--card);border-radius:6px;overflow:hidden;border:2px solid transparent;transition:border-color .15s}
|
||||
.card:hover{border-color:var(--accent)}
|
||||
.card.watched{opacity:.5}
|
||||
.card-title{font-size:13px;font-weight:600;padding:8px 8px 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
|
||||
.card-meta{font-size:11px;color:var(--muted);padding:0 8px 4px;display:flex;gap:5px;flex-wrap:wrap}
|
||||
.card-foot{padding:4px 8px 8px;display:flex;gap:6px}
|
||||
.card-foot button{font-size:11px;padding:3px 8px}
|
||||
footer{background:var(--panel);border-top:1px solid var(--border);padding:8px 14px;display:flex;gap:8px;align-items:center;flex-shrink:0}
|
||||
footer input{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:5px 9px;border-radius:4px;font-size:13px}
|
||||
#jobs{background:var(--panel);border-top:1px solid var(--border);flex-shrink:0}
|
||||
.job{display:flex;align-items:center;gap:8px;padding:5px 14px;font-size:12px;border-bottom:1px solid var(--border)}
|
||||
.badge{font-weight:700;min-width:48px}
|
||||
.badge.running{color:#facc15}
|
||||
.badge.done{color:#4ade80}
|
||||
.badge.failed{color:#f87171}
|
||||
progress{flex:1;height:5px;accent-color:var(--accent)}
|
||||
.empty{text-align:center;color:var(--muted);padding:40px;font-size:13px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>yt-offline</h1>
|
||||
<input type="search" id="search" placeholder="Filter by title or ID…" oninput="filterCards()">
|
||||
<button class="muted" onclick="rescan()">⟳ Rescan</button>
|
||||
<span id="status"></span>
|
||||
<input type="search" id="search" placeholder="Filter…" oninput="renderGrid()">
|
||||
<select id="sort" onchange="renderGrid()">
|
||||
<option value="title">Title</option>
|
||||
<option value="dur-asc">Shortest</option>
|
||||
<option value="dur-desc">Longest</option>
|
||||
<option value="size-asc">Smallest</option>
|
||||
<option value="size-desc">Largest</option>
|
||||
</select>
|
||||
<button onclick="rescan()">⟳ Rescan</button>
|
||||
<span id="status" style="font-size:12px;color:var(--muted)"></span>
|
||||
</header>
|
||||
<main>
|
||||
<aside id="sidebar"></aside>
|
||||
<section id="content"><div class="video-grid" id="grid"></div></section>
|
||||
<section id="content">
|
||||
<div class="toolbar">
|
||||
<label style="font-size:12px;color:var(--muted)">
|
||||
<input type="checkbox" id="bulk" onchange="toggleBulk()"> Select
|
||||
</label>
|
||||
<span id="bulk-actions" style="display:none;gap:6px;display:none">
|
||||
<button onclick="bulkWatched(true)">✓ Mark watched</button>
|
||||
<button onclick="bulkWatched(false)">○ Unwatch</button>
|
||||
<span id="sel-count" style="font-size:12px;color:var(--muted)"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="grid" id="grid"></div>
|
||||
</section>
|
||||
</main>
|
||||
<div id="jobs"></div>
|
||||
<div id="download-bar">
|
||||
<footer>
|
||||
<input type="url" id="dl-url" placeholder="YouTube URL to download…" onkeydown="if(event.key==='Enter')startDownload()">
|
||||
<button onclick="startDownload()">⬇ Download</button>
|
||||
</div>
|
||||
<button class="primary" onclick="startDownload()">⬇ Download</button>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
let library = [];
|
||||
let activeChannel = null;
|
||||
let activePlaylist = null;
|
||||
'use strict';
|
||||
let library = [], activeChannel = null, activePlaylist = null;
|
||||
let bulkMode = false, selected = new Set();
|
||||
|
||||
async function api(path, opts) {
|
||||
const r = await fetch(path, opts);
|
||||
if (!r.ok) throw new Error(await r.text());
|
||||
return r;
|
||||
}
|
||||
|
||||
async function loadLibrary() {
|
||||
const r = await fetch('/api/library');
|
||||
library = (await r.json()).channels;
|
||||
renderSidebar();
|
||||
renderGrid();
|
||||
try {
|
||||
const r = await api('/api/library');
|
||||
library = (await r.json()).channels;
|
||||
renderSidebar();
|
||||
renderGrid();
|
||||
} catch(e) { setStatus('Error: ' + e.message); }
|
||||
}
|
||||
|
||||
function setStatus(s) { document.getElementById('status').textContent = s; }
|
||||
|
||||
function renderSidebar() {
|
||||
const el = document.getElementById('sidebar');
|
||||
let total = library.reduce((s, c) => s + c.total_videos, 0);
|
||||
let html = `<h3>Channels</h3>
|
||||
<div class="ch-item ${!activeChannel ? 'active' : ''}" onclick="selectChannel(null)">⊞ All (${total})</div>`;
|
||||
const total = library.reduce((s,c)=>s+c.total_videos,0);
|
||||
let h = `<div class="sidebar-label">Library</div>`;
|
||||
h += sidebar_item(null, null, `⊞ All (${total})`, activeChannel===null);
|
||||
for (const ch of library) {
|
||||
const active = activeChannel === ch.name && !activePlaylist;
|
||||
html += `<div class="ch-item ${active ? 'active' : ''}" onclick="selectChannel('${esc(ch.name)}')">
|
||||
${esc(ch.name)} <span style="color:var(--muted);font-size:11px">(${ch.total_videos})</span>
|
||||
</div>`;
|
||||
if (activeChannel === ch.name && ch.playlists.length) {
|
||||
const active = activeChannel===ch.name && activePlaylist===null;
|
||||
const size = ch.size_bytes > 0 ? ' · '+fmtSize(ch.size_bytes) : '';
|
||||
h += sidebar_item(ch.name, null, `${esc(ch.name)} (${ch.total_videos}${size})`, active);
|
||||
if (activeChannel === ch.name) {
|
||||
for (const pl of ch.playlists) {
|
||||
const ap = activePlaylist === pl.name;
|
||||
html += `<div class="ch-sub ${ap ? 'active' : ''}" onclick="selectPlaylist('${esc(ch.name)}','${esc(pl.name)}')">└ ${esc(pl.name)} (${pl.videos.length})</div>`;
|
||||
h += `<div class="ch-sub${activePlaylist===pl.name?' active':''}"
|
||||
onclick="setView(${JSON.stringify(ch.name)},${JSON.stringify(pl.name)})"
|
||||
>└ ${esc(pl.name)} (${pl.videos.length})</div>`;
|
||||
}
|
||||
if (ch.channel_url) {
|
||||
h += `<div class="ch-sub" style="color:var(--accent)"
|
||||
onclick="downloadChannel(${JSON.stringify(ch.channel_url)})">⬇ Check for new videos</div>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
el.innerHTML = html;
|
||||
el.innerHTML = h;
|
||||
}
|
||||
|
||||
function selectChannel(name) {
|
||||
activeChannel = name; activePlaylist = null;
|
||||
renderSidebar(); renderGrid();
|
||||
function sidebar_item(ch, pl, label, active) {
|
||||
return `<div class="ch-item${active?' active':''}"
|
||||
onclick="setView(${JSON.stringify(ch)},${JSON.stringify(pl)})">${label}</div>`;
|
||||
}
|
||||
function selectPlaylist(ch, pl) {
|
||||
|
||||
function setView(ch, pl) {
|
||||
activeChannel = ch; activePlaylist = pl;
|
||||
selected.clear();
|
||||
renderSidebar(); renderGrid();
|
||||
}
|
||||
|
||||
function currentVideos() {
|
||||
const q = document.getElementById('search').value.toLowerCase();
|
||||
let videos = [];
|
||||
const sort = document.getElementById('sort').value;
|
||||
let vids = [];
|
||||
for (const ch of library) {
|
||||
if (activeChannel && ch.name !== activeChannel) continue;
|
||||
const pool = activePlaylist
|
||||
? (ch.playlists.find(p => p.name === activePlaylist)?.videos || [])
|
||||
: [...ch.videos, ...ch.playlists.flatMap(p => p.videos)];
|
||||
? (ch.playlists.find(p=>p.name===activePlaylist)?.videos || [])
|
||||
: [...ch.videos, ...ch.playlists.flatMap(p=>p.videos)];
|
||||
for (const v of pool) {
|
||||
if (!q || v.title.toLowerCase().includes(q) || v.id.includes(q))
|
||||
videos.push({...v, channel: ch.name});
|
||||
vids.push({...v, channel: ch.name});
|
||||
}
|
||||
}
|
||||
return videos;
|
||||
if (sort==='dur-asc') vids.sort((a,b)=>(a.duration_secs??0)-(b.duration_secs??0));
|
||||
if (sort==='dur-desc') vids.sort((a,b)=>(b.duration_secs??0)-(a.duration_secs??0));
|
||||
if (sort==='size-asc') vids.sort((a,b)=>(a.file_size??0)-(b.file_size??0));
|
||||
if (sort==='size-desc')vids.sort((a,b)=>(b.file_size??0)-(a.file_size??0));
|
||||
if (sort==='title') vids.sort((a,b)=>a.title.localeCompare(b.title));
|
||||
return vids;
|
||||
}
|
||||
|
||||
function filterCards() { renderGrid(); }
|
||||
|
||||
function renderGrid() {
|
||||
const videos = currentVideos();
|
||||
document.getElementById('status').textContent = `${videos.length} videos`;
|
||||
const vids = currentVideos();
|
||||
setStatus(`${vids.length} videos`);
|
||||
const grid = document.getElementById('grid');
|
||||
grid.innerHTML = videos.map(v => `
|
||||
<div class="video-card ${v.watched ? 'watched' : ''}" id="card-${v.id}">
|
||||
<div class="thumb">▶</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">${esc(v.title)}</div>
|
||||
<div class="card-meta">
|
||||
<span>${esc(v.channel)}</span>
|
||||
${v.duration_secs ? `<span>${fmtDur(v.duration_secs)}</span>` : ''}
|
||||
${v.file_size ? `<span>${fmtSize(v.file_size)}</span>` : ''}
|
||||
${v.has_live_chat ? '<span>💬</span>' : ''}
|
||||
${!v.has_video ? '<span style="color:#f87171">no file</span>' : ''}
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button onclick="toggleWatched('${v.id}')">${v.watched ? '✓ Watched' : '○ Watch'}</button>
|
||||
</div>
|
||||
if (!vids.length) { grid.innerHTML = '<div class="empty">Nothing here.</div>'; return; }
|
||||
grid.innerHTML = vids.map(v => {
|
||||
const chk = bulkMode ? `<input type="checkbox" ${selected.has(v.id)?'checked':''} onchange="toggleSel('${v.id}',this.checked)">` : '';
|
||||
const meta = [
|
||||
v.channel !== activeChannel ? esc(v.channel) : null,
|
||||
v.duration_secs != null ? fmtDur(v.duration_secs) : null,
|
||||
v.file_size != null ? fmtSize(v.file_size) : null,
|
||||
v.has_live_chat ? '💬' : null,
|
||||
!v.has_video ? '<span style="color:#f87171">no file</span>' : null,
|
||||
].filter(Boolean).join(' · ');
|
||||
return `<div class="card${v.watched?' watched':''}">
|
||||
<div class="card-title">${chk} ${esc(v.title)}</div>
|
||||
<div class="card-meta">${meta||' '}</div>
|
||||
<div class="card-foot">
|
||||
<button onclick="toggleWatched('${v.id}')">${v.watched?'✓ Watched':'○ Watch'}</button>
|
||||
</div>
|
||||
</div>`).join('');
|
||||
</div>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
async function toggleWatched(id) {
|
||||
await fetch(`/api/watched/${id}`, {method:'POST'});
|
||||
try { await api(`/api/watched/${id}`, {method:'POST'}); await loadLibrary(); }
|
||||
catch(e) { setStatus('Error: ' + e.message); }
|
||||
}
|
||||
|
||||
function toggleBulk() {
|
||||
bulkMode = document.getElementById('bulk').checked;
|
||||
selected.clear();
|
||||
document.getElementById('bulk-actions').style.display = bulkMode ? 'flex' : 'none';
|
||||
renderGrid();
|
||||
}
|
||||
|
||||
function toggleSel(id, on) {
|
||||
if (on) selected.add(id); else selected.delete(id);
|
||||
document.getElementById('sel-count').textContent = selected.size + ' selected';
|
||||
}
|
||||
|
||||
async function bulkWatched(on) {
|
||||
for (const id of selected) {
|
||||
const db = await api('/api/library');
|
||||
const lib = (await db.json()).channels;
|
||||
// find current state
|
||||
}
|
||||
// simpler: just toggle each
|
||||
const ids = [...selected];
|
||||
await Promise.all(ids.map(id => api(`/api/watched/${id}`, {method:'POST'})));
|
||||
selected.clear();
|
||||
await loadLibrary();
|
||||
}
|
||||
|
||||
async function startDownload() {
|
||||
const url = document.getElementById('dl-url').value.trim();
|
||||
if (!url) return;
|
||||
await fetch('/api/download', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({url})});
|
||||
document.getElementById('dl-url').value = '';
|
||||
try {
|
||||
await api('/api/download', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({url})});
|
||||
document.getElementById('dl-url').value = '';
|
||||
setStatus('Download started…');
|
||||
} catch(e) { setStatus('Error: '+e.message); }
|
||||
}
|
||||
|
||||
async function downloadChannel(url) {
|
||||
try {
|
||||
await api('/api/download', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({url})});
|
||||
setStatus('Checking for new videos…');
|
||||
} catch(e) { setStatus('Error: '+e.message); }
|
||||
}
|
||||
|
||||
async function rescan() {
|
||||
await fetch('/api/rescan', {method:'POST'});
|
||||
await loadLibrary();
|
||||
try { await api('/api/rescan', {method:'POST'}); await loadLibrary(); }
|
||||
catch(e) { setStatus('Error: '+e.message); }
|
||||
}
|
||||
|
||||
// SSE progress
|
||||
const es = new EventSource('/api/events');
|
||||
es.onmessage = e => {
|
||||
try {
|
||||
const jobs = JSON.parse(e.data);
|
||||
renderJobs(jobs);
|
||||
} catch {}
|
||||
};
|
||||
|
||||
function renderJobs(jobs) {
|
||||
if (!jobs.length) { document.getElementById('jobs').innerHTML = ''; return; }
|
||||
document.getElementById('jobs').innerHTML = jobs.map(j => `
|
||||
<div class="job">
|
||||
<span class="job-state ${j.state}">${j.state}</span>
|
||||
<span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(j.label)} — ${esc(j.url)}</span>
|
||||
${j.state==='running' ? `<progress value="${j.progress}" max="1"></progress>` : ''}
|
||||
</div>`).join('');
|
||||
// Rescan library when all done
|
||||
if (jobs.length && jobs.every(j => j.state !== 'running')) loadLibrary();
|
||||
const el = document.getElementById('jobs');
|
||||
if (!jobs.length) { el.innerHTML=''; return; }
|
||||
el.innerHTML = jobs.map(j=>`<div class="job">
|
||||
<span class="badge ${j.state}">${j.state}</span>
|
||||
<span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(j.label)} — ${esc(j.url)}</span>
|
||||
${j.state==='running'?`<progress value="${j.progress}" max="1"></progress>`:''}
|
||||
<span style="font-size:11px;color:var(--muted);max-width:200px;overflow:hidden;text-overflow:ellipsis">${esc(j.last_line)}</span>
|
||||
</div>`).join('');
|
||||
}
|
||||
|
||||
// Poll progress every 600ms
|
||||
let wasRunning = false;
|
||||
async function pollProgress() {
|
||||
try {
|
||||
const r = await api('/api/progress');
|
||||
const {jobs} = await r.json();
|
||||
renderJobs(jobs);
|
||||
const running = jobs.some(j=>j.state==='running');
|
||||
if (wasRunning && !running) await loadLibrary();
|
||||
wasRunning = running;
|
||||
} catch {}
|
||||
}
|
||||
setInterval(pollProgress, 600);
|
||||
|
||||
function fmtDur(s) {
|
||||
s = Math.floor(s);
|
||||
const h = Math.floor(s/3600), m = Math.floor((s%3600)/60), sec = s%60;
|
||||
return h ? `${h}:${p(m)}:${p(sec)}` : `${m}:${p(sec)}`;
|
||||
s=Math.floor(s); const h=Math.floor(s/3600),m=Math.floor((s%3600)/60),sec=s%60;
|
||||
return h?`${h}:${p(m)}:${p(sec)}`:`${m}:${p(sec)}`;
|
||||
}
|
||||
function fmtSize(b) {
|
||||
if (b>=1073741824) return (b/1073741824).toFixed(1)+' GB';
|
||||
if (b>=1048576) return Math.round(b/1048576)+' MB';
|
||||
if(b>=1073741824)return(b/1073741824).toFixed(1)+' GB';
|
||||
if(b>=1048576)return Math.round(b/1048576)+' MB';
|
||||
return Math.round(b/1024)+' KB';
|
||||
}
|
||||
function p(n) { return String(n).padStart(2,'0'); }
|
||||
function esc(s) { return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"'); }
|
||||
function p(n){return String(n).padStart(2,'0')}
|
||||
function esc(s){return String(s??'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"')}
|
||||
|
||||
loadLibrary();
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue