jimmy/t-youtube
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: Add T YouTube text-based reader web app

Browse Source 
- FastAPI backend running on port 8000
- Svelte 5 runes frontend dashboard supporting Read/Skip state toggles
- YouTube subscription feed scraper using yt-dlp & Netscape cookies.txt
- Transcript downloader and Claude 3.5 Haiku summarizer via bytecatcode proxy
- Multi-stage Dockerfile and docker-compose.yml configuration

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Gan, Jimmy
2026-06-03 11:00:34 +08:00
commit dbd3dc0237
17 changed files with 967 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.svelte
+7
View File
@@ -0,0 +1,7 @@
<script>
import YoutubeDashboard from './routes/YoutubeDashboard.svelte';
</script>
<main class="min-h-screen bg-gray-950 text-gray-100 font-sans">
<YoutubeDashboard />
</main>
frontend/src/app.css
+3
View File
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
frontend/src/main.js
+9
View File
@@ -0,0 +1,9 @@
import { mount } from 'svelte';
import './app.css';
import App from './App.svelte';
const app = mount(App, {
target: document.getElementById('app'),
});
export default app;
frontend/src/routes/YoutubeDashboard.svelte
+380
View File
@@ -0,0 +1,380 @@
<script>
import { onMount } from 'svelte';
// Svelte 5 Runes for Reactive State
let videos = $state([]);
let selectedVideo = $state(null);
let activeTab = $state('pending'); // pending, read, skipped
let isLoading = $state(false);
let isSyncing = $state(false);
let syncMessage = $state('');
// Fetch videos from backend api
async function loadVideos() {
isLoading = true;
try {
const res = await fetch(`/api/videos?status=${activeTab}&limit=50`);
if (res.ok) {
videos = await res.json();
if (videos.length > 0) {
// Keep current video selected if still in the list, otherwise select first
const currentId = selectedVideo?.video_id;
const found = videos.find(v => v.video_id === currentId);
selectedVideo = found || videos[0];
} else {
selectedVideo = null;
}
}
} catch (err) {
console.error("Error loading videos:", err);
} finally {
isLoading = false;
}
}
// Trigger subscription sync in background
async function syncSubscriptions() {
isSyncing = true;
syncMessage = 'Syncing subscriptions & generating summaries...';
try {
const res = await fetch('/api/videos/fetch', { method: 'POST' });
if (res.ok) {
syncMessage = 'Sync started in background. Refreshing in 6 seconds...';
setTimeout(() => {
loadVideos();
isSyncing = false;
syncMessage = '';
}, 6000);
}
} catch (err) {
console.error("Error syncing:", err);
isSyncing = false;
syncMessage = '';
}
}
// Update status (pending -> read/skipped etc)
async function updateStatus(videoId, newStatus) {
try {
const res = await fetch(`/api/videos/${videoId}/status`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ status: newStatus })
});
if (res.ok) {
// Remove from current list
videos = videos.filter(v => v.video_id !== videoId);
if (selectedVideo && selectedVideo.video_id === videoId) {
selectedVideo = videos.length > 0 ? videos[0] : null;
}
}
} catch (err) {
console.error("Error updating status:", err);
}
}
// Trigger summary generation for a single video manually
async function generateSummary(videoId) {
if (selectedVideo && selectedVideo.video_id === videoId) {
selectedVideo.summary = "Generating summary now, please wait...";
}
try {
const res = await fetch(`/api/videos/${videoId}/summarize`, { method: 'POST' });
if (res.ok) {
setTimeout(() => {
loadVideos();
}, 3000);
}
} catch (err) {
console.error("Error summarizing:", err);
}
}
// Watch for tab change
$effect(() => {
if (activeTab) {
loadVideos();
}
});
onMount(() => {
loadVideos();
});
function formatDuration(seconds) {
if (!seconds) return '';
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
const s = seconds % 60;
if (h > 0) {
return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
}
return `${m}:${s.toString().padStart(2, '0')}`;
}
function formatMarkdown(text) {
if (!text) return '<p class="text-gray-400">Loading summary...</p>';
// Parse bold text **example**
let html = text.replace(/\*\*(.*?)\*\*/g, '<strong class="font-bold text-red-400">$1</strong>');
// Parse bullet points
html = html.replace(/^\s*[-*]\s+(.*)$/gm, '<li class="ml-5 list-disc mb-1 text-gray-200">$1</li>');
// Handle line breaks
html = html.split('\n').map(line => {
if (line.trim().startsWith('<li')) return line;
if (line.trim() === '') return '<div class="h-2"></div>';
return `<p class="mb-2 leading-relaxed">${line}</p>`;
}).join('');
return html;
}
</script>
<div class="flex flex-col h-screen bg-gray-950 text-gray-100">
<!-- Top Navigation Header -->
<header class="flex items-center justify-between px-6 py-4 bg-gray-900 border-b border-gray-800">
<div class="flex items-center space-x-3">
<span class="text-2xl font-black tracking-wider text-red-500">T YouTube</span>
<span class="text-xs px-2 py-0.5 rounded bg-gray-800 text-gray-400 uppercase tracking-widest font-semibold border border-gray-700">text feed</span>
</div>
<div class="flex items-center space-x-4">
{#if syncMessage}
<span class="text-xs text-red-400 animate-pulse">{syncMessage}</span>
{/if}
<button
onclick={syncSubscriptions}
disabled={isSyncing}
class="flex items-center space-x-2 px-4 py-2 bg-red-600 hover:bg-red-700 disabled:bg-gray-800 disabled:text-gray-600 text-white text-sm font-semibold rounded-lg shadow-lg hover:shadow-red-900/30 transition duration-150"
>
{#if isSyncing}
<svg class="animate-spin h-4 w-4 text-gray-600" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span>Syncing...</span>
{:else}
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 1121.213 6H16" />
</svg>
<span>Sync Subscriptions</span>
{/if}
</button>
</div>
</header>
<!-- Main Grid Dashboard layout -->
<div class="flex flex-1 overflow-hidden">
<!-- Left Navigation Sidebar & Video List -->
<aside class="w-80 md:w-96 flex flex-col border-r border-gray-900 bg-gray-900/40">
<!-- Tabs Selector -->
<div class="flex p-2 bg-gray-900 border-b border-gray-900">
<button
onclick={() => activeTab = 'pending'}
class="flex-1 py-2 text-center text-xs font-bold rounded-md tracking-wider uppercase transition duration-150 {activeTab === 'pending' ? 'bg-red-600/10 text-red-400 border border-red-500/20' : 'text-gray-400 hover:text-gray-200'}"
>
Pending
</button>
<button
onclick={() => activeTab = 'read'}
class="flex-1 py-2 text-center text-xs font-bold rounded-md tracking-wider uppercase transition duration-150 {activeTab === 'read' ? 'bg-green-600/10 text-green-400 border border-green-500/20' : 'text-gray-400 hover:text-gray-200'}"
>
Read
</button>
<button
onclick={() => activeTab = 'skipped'}
class="flex-1 py-2 text-center text-xs font-bold rounded-md tracking-wider uppercase transition duration-150 {activeTab === 'skipped' ? 'bg-gray-800 text-gray-300 border border-gray-700/50' : 'text-gray-400 hover:text-gray-200'}"
>
Skipped
</button>
</div>
<!-- Scrollable Video Cards List -->
<div class="flex-1 overflow-y-auto divide-y divide-gray-900/50">
{#if isLoading && videos.length === 0}
<div class="flex flex-col items-center justify-center h-48 space-y-2">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-red-500"></div>
<span class="text-sm text-gray-500">Loading videos...</span>
</div>
{:else if videos.length === 0}
<div class="flex flex-col items-center justify-center h-64 text-gray-500 space-y-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" />
</svg>
<span class="text-sm">No videos found.</span>
</div>
{:else}
{#each videos as video (video.video_id)}
<button
onclick={() => selectedVideo = video}
class="w-full text-left p-3.5 hover:bg-gray-900/60 focus:outline-none transition duration-150 flex items-start space-x-3.5 {selectedVideo?.video_id === video.video_id ? 'bg-gray-900 border-l-4 border-red-500 pl-2.5' : 'border-l-4 border-transparent'}"
>
<!-- Thumbnail/Duration badge -->
<div class="relative w-24 h-14 bg-gray-800 rounded overflow-hidden flex-shrink-0">
<img src={video.thumbnail_url} alt="" class="object-cover w-full h-full" />
{#if video.duration}
<span class="absolute bottom-0.5 right-0.5 bg-black/85 text-[10px] font-bold px-1 rounded text-white tracking-wider">
{formatDuration(video.duration)}
</span>
{/if}
</div>
<!-- Video metadata summary -->
<div class="flex-1 min-w-0">
<span class="block text-[11px] font-semibold text-red-500/80 truncate mb-0.5">{video.channel_name}</span>
<h3 class="text-sm font-bold text-gray-100 line-clamp-2 leading-snug">{video.title}</h3>
<span class="block text-[10px] text-gray-500 mt-1">{video.publish_date || 'Date unknown'}</span>
</div>
</button>
{/each}
{/if}
</div>
</aside>
<!-- Right Detailed Digest Panel -->
<main class="flex-1 flex flex-col bg-gray-950/80 overflow-y-auto">
{#if selectedVideo}
<div class="p-6 md:p-8 max-w-4xl w-full mx-auto space-y-6">
<!-- Video Details Header -->
<div class="border-b border-gray-900 pb-5 space-y-3">
<span class="text-xs px-2.5 py-1 font-bold bg-gray-900 text-red-400 rounded-full border border-gray-800">
{selectedVideo.channel_name}
</span>
<h1 class="text-2xl md:text-3xl font-extrabold text-gray-100 tracking-tight leading-tight">
{selectedVideo.title}
</h1>
<div class="flex items-center space-x-4 text-xs text-gray-500">
<span>Published: <strong>{selectedVideo.publish_date || 'Unknown'}</strong></span>
{#if selectedVideo.duration}
<span>•</span>
<span>Length: <strong>{formatDuration(selectedVideo.duration)}</strong></span>
{/if}
</div>
</div>
<!-- Video Actions buttons block -->
<div class="flex flex-wrap gap-3">
{#if activeTab === 'pending'}
<button
onclick={() => updateStatus(selectedVideo.video_id, 'read')}
class="px-5 py-2.5 bg-green-600 hover:bg-green-700 text-white text-sm font-bold rounded-lg shadow-lg shadow-green-950/30 transition duration-150"
>
Mark as Read
</button>
<button
onclick={() => updateStatus(selectedVideo.video_id, 'skipped')}
class="px-5 py-2.5 bg-gray-800 hover:bg-gray-700 text-gray-200 text-sm font-bold rounded-lg border border-gray-700 transition duration-150"
>
Skip Video
</button>
{:else if activeTab === 'read'}
<button
onclick={() => updateStatus(selectedVideo.video_id, 'pending')}
class="px-5 py-2.5 bg-gray-800 hover:bg-gray-700 text-gray-200 text-sm font-bold rounded-lg border border-gray-700 transition duration-150"
>
Revert to Pending
</button>
<button
onclick={() => updateStatus(selectedVideo.video_id, 'skipped')}
class="px-5 py-2.5 bg-gray-800 hover:bg-gray-700 text-gray-200 text-sm font-bold rounded-lg border border-gray-700 transition duration-150"
>
Move to Skipped
</button>
{:else if activeTab === 'skipped'}
<button
onclick={() => updateStatus(selectedVideo.video_id, 'pending')}
class="px-5 py-2.5 bg-gray-800 hover:bg-gray-700 text-gray-200 text-sm font-bold rounded-lg border border-gray-700 transition duration-150"
>
Revert to Pending
</button>
<button
onclick={() => updateStatus(selectedVideo.video_id, 'read')}
class="px-5 py-2.5 bg-green-600 hover:bg-green-700 text-white text-sm font-bold rounded-lg transition duration-150"
>
Move to Read
</button>
{/if}
<a
href={selectedVideo.url}
target="_blank"
rel="noopener noreferrer"
class="px-5 py-2.5 bg-red-600 hover:bg-red-700 text-white text-sm font-bold rounded-lg flex items-center space-x-2 transition duration-150"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
</svg>
<span>Watch on YouTube</span>
</a>
</div>
<!-- Video Visual Block -->
<div class="relative w-full aspect-video rounded-xl overflow-hidden bg-gray-900 border border-gray-800 shadow-2xl">
<img src={selectedVideo.thumbnail_url} alt="" class="object-cover w-full h-full opacity-40 blur-sm" />
<div class="absolute inset-0 flex flex-col items-center justify-center p-4">
<div class="relative w-36 h-20 rounded shadow-md overflow-hidden mb-3 border border-gray-700">
<img src={selectedVideo.thumbnail_url} alt="" class="object-cover w-full h-full" />
</div>
<a
href={selectedVideo.url}
target="_blank"
rel="noopener noreferrer"
class="px-4 py-2 bg-red-600/90 hover:bg-red-600 text-white text-xs font-extrabold uppercase tracking-wider rounded border border-red-500 shadow transition duration-150"
>
Play original video
</a>
</div>
</div>
<!-- Digest Content Block -->
<div class="bg-gray-900/60 rounded-xl border border-gray-800/80 p-6 md:p-8 space-y-6">
<div class="flex items-center justify-between border-b border-gray-800 pb-3">
<h2 class="text-lg font-black tracking-wide text-gray-200 uppercase">Video Digest Highlight</h2>
{#if !selectedVideo.summary || selectedVideo.summary.includes("Error") || selectedVideo.summary.includes("Could not")}
<button
onclick={() => generateSummary(selectedVideo.video_id)}
class="text-xs px-2.5 py-1 bg-gray-800 hover:bg-gray-700 text-gray-300 font-semibold rounded border border-gray-700 transition"
>
Generate Summary
</button>
{/if}
</div>
<div class="prose prose-invert max-w-none text-gray-300 text-base leading-relaxed">
{@html formatMarkdown(selectedVideo.summary)}
</div>
</div>
<!-- Full Transcript Accordion -->
{#if selectedVideo.transcript && selectedVideo.transcript !== "No transcript available"}
<details class="group bg-gray-900/20 border border-gray-900 rounded-lg overflow-hidden transition">
<summary class="flex justify-between items-center p-4 font-bold text-sm text-gray-400 hover:text-gray-200 hover:bg-gray-900/30 cursor-pointer select-none">
<span>View Full Video Transcript</span>
<span class="transition group-open:rotate-180">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</summary>
<div class="p-5 border-t border-gray-900 bg-gray-950/40 text-sm text-gray-400 leading-relaxed max-h-96 overflow-y-auto font-mono whitespace-pre-line">
{selectedVideo.transcript}
</div>
</details>
{/if}
</div>
{:else}
<div class="flex-1 flex flex-col items-center justify-center text-gray-500 p-8 space-y-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
<h2 class="text-lg font-bold text-gray-400">No Video Selected</h2>
<p class="text-sm text-gray-600 max-w-xs text-center">Click a video from the sidebar list to read its digest highlights.</p>
</div>
{/if}
</main>
</div>
</div>