wander/ta-organizerr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Implement video transcoding, add dashboard UI, and cleanup repository

Browse source
This commit is contained in:
wander 2026-01-01 00:39:28 -05:00
parent 94f077944b
commit 2f8ec83cd8
7 changed files with 1060 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

305
templates/dashboard.html Normal file
View file

@ -0,0 +1,305 @@
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TA Organizerr Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<style>
.log-box {
height: 300px;
overflow-y: scroll;
font-family: monospace;
font-size: 0.9em;
background-color: #1e1e1e;
color: #00ff00;
border: 1px solid #444;
padding: 10px;
}
.status-dot {
height: 10px;
width: 10px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
.status-green {
background-color: #28a745;
}
.status-yellow {
background-color: #ffc107;
}
.status-red {
background-color: #dc3545;
}
</style>
</head>
<body>
<div class="container-fluid p-4">
<header class="d-flex justify-content-between align-items-center mb-4">
<h1><i class="bi bi-folder2-open"></i> TA Organizerr</h1>
<div>
<a href="/transcode" class="btn btn-outline-primary me-2">
<i class="bi bi-film"></i> Transcode
</a>
<span class="badge bg-secondary" id="connection-status">Connecting...</span>
</div>
</header>
<!-- Stats Row -->
<div class="row mb-4">
<div class="col-md-3">
<div class="card text-bg-primary mb-3">
<div class="card-header">Total Videos</div>
<div class="card-body">
<h2 class="card-title" id="stat-total">0</h2>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-bg-success mb-3">
<div class="card-header">Linked & Verified</div>
<div class="card-body">
<h2 class="card-title" id="stat-linked">0</h2>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-bg-warning mb-3">
<div class="card-header">New / Fixed</div>
<div class="card-body">
<h2 class="card-title" id="stat-new">0</h2>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-bg-danger mb-3">
<div class="card-header">Missing / Error</div>
<div class="card-body">
<h2 class="card-title" id="stat-error">0</h2>
</div>
</div>
</div>
</div>
<!-- Controls & Logs -->
<div class="row mb-4">
<div class="col-md-4">
<div class="card h-100">
<div class="card-header">Control Panel</div>
<div class="card-body d-grid gap-2">
<button class="btn btn-primary btn-lg" onclick="triggerScan()">
<i class="bi bi-arrow-repeat"></i> SCAN NOW
</button>
<button class="btn btn-danger" onclick="triggerCleanup()">
<i class="bi bi-trash"></i> CLEAN OLD FOLDERS (+00:00)
</button>
<button class="btn btn-warning" onclick="checkOrphans()">
<i class="bi bi-search"></i> CHECK ORPHANED LINKS
</button>
<hr>
<small class="text-muted">Next scheduled scan in: <span id="next-scan">--</span> min</small>
<div id="orphan-results" class="mt-2"></div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card h-100">
<div class="card-header d-flex justify-content-between">
<span>Live Logs</span>
<button class="btn btn-sm btn-outline-secondary" onclick="clearLogs()">Clear</button>
</div>
<div class="card-body p-0">
<div class="log-box" id="log-container">
<div>Waiting for logs...</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<span>Video Matrix</span>
<div class="d-flex gap-2">
<select class="form-select form-select-sm" id="status-filter" style="width: 150px;">
<option value="">All Status</option>
<option value="linked">Linked</option>
<option value="missing">Missing</option>
</select>
<select class="form-select form-select-sm" id="channel-filter" style="width: 200px;">
<option value="">All Channels</option>
</select>
<input type="text" class="form-control form-control-sm" id="search-input"
placeholder="Search videos..." style="width: 200px;">
</div>
</div>
<div class="card-body p-0 table-responsive" style="max-height: 500px;">
<table class="table table-striped table-hover mb-0">
<thead class="table-dark sticky-top">
<tr>
<th>Status</th>
<th>Published</th>
<th>Channel</th>
<th>Title</th>
<th>Video ID</th>
<th>Symlink Path</th>
</tr>
</thead>
<tbody id="video-table-body">
<!-- Rows injected by JS -->
</tbody>
</table>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Poll for status every 2 seconds
setInterval(fetchStatus, 2000);
// Poll for logs every 1 second
setInterval(fetchLogs, 1000);
let lastLogIndex = 0;
async function fetchStatus() {
try {
const res = await fetch('/api/status');
const data = await res.json();
document.getElementById('connection-status').textContent = 'Connected';
document.getElementById('connection-status').className = 'badge bg-success';
// Update stats
document.getElementById('stat-total').textContent = data.total_videos;
document.getElementById('stat-linked').textContent = data.verified_links;
document.getElementById('stat-error').textContent = data.missing_count || 0;
// Update table if changed (simple check, can be optimized)
updateTable(data.videos);
} catch (e) {
document.getElementById('connection-status').textContent = 'Disconnected';
document.getElementById('connection-status').className = 'badge bg-danger';
}
}
async function fetchLogs() {
try {
const res = await fetch('/api/logs?start=' + lastLogIndex);
const data = await res.json();
if (data.logs && data.logs.length > 0) {
const logBox = document.getElementById('log-container');
data.logs.forEach(line => {
const div = document.createElement('div');
div.textContent = line;
logBox.appendChild(div);
});
logBox.scrollTop = logBox.scrollHeight;
lastLogIndex = data.next_index;
}
} catch (e) { console.error(e); }
}
async function triggerScan() {
if (!confirm("Start a full library scan? This may take a moment.")) return;
await fetch('/api/scan', { method: 'POST' });
alert("Scan started! Watch the logs.");
}
async function triggerCleanup() {
if (!confirm("Are you sure you want to delete all folders containing '+00:00'?\n\nSafety check: Real files will NOT be deleted.")) return;
await fetch('/api/cleanup', { method: 'POST' });
alert("Cleanup started! Watch the logs.");
}
async function checkOrphans() {
const resultsDiv = document.getElementById('orphan-results');
resultsDiv.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Checking...';
const res = await fetch('/api/check-orphans', { method: 'POST' });
const data = await res.json();
if (data.count === 0) {
resultsDiv.innerHTML = '<div class="alert alert-success p-2 mb-0 mt-2">✅ No orphaned links found!</div>';
} else {
resultsDiv.innerHTML = `<div class="alert alert-warning p-2 mb-0 mt-2">⚠️ Found ${data.count} orphaned links. Check logs for details.</div>`;
}
setTimeout(() => { resultsDiv.innerHTML = ''; }, 10000);
}
function clearLogs() {
document.getElementById('log-container').innerHTML = '';
}
function updateTable(videos) {
const tbody = document.getElementById('video-table-body');
const search = document.getElementById('search-input').value.toLowerCase();
const channelFilter = document.getElementById('channel-filter').value;
const statusFilter = document.getElementById('status-filter').value;
// Build unique channel list for dropdown
const channels = [...new Set(videos.map(v => v.channel))].sort();
const channelDropdown = document.getElementById('channel-filter');
const currentValue = channelDropdown.value;
// Only update dropdown if channel list changed
if (channelDropdown.options.length !== channels.length + 1) {
channelDropdown.innerHTML = '<option value="">All Channels</option>';
channels.forEach(ch => {
const opt = document.createElement('option');
opt.value = ch;
opt.textContent = ch;
channelDropdown.appendChild(opt);
});
channelDropdown.value = currentValue;
}
// Clear and rebuild table
tbody.innerHTML = '';
videos.forEach(v => {
// Apply filters
if (search && !v.title.toLowerCase().includes(search) && !v.video_id.includes(search)) return;
if (channelFilter && v.channel !== channelFilter) return;
if (statusFilter && v.status !== statusFilter) return;
const tr = document.createElement('tr');
let statusColor = v.status === 'linked' ? 'status-green' : 'status-red';
tr.innerHTML = `
<td><span class="status-dot ${statusColor}"></span></td>
<td>${v.published}</td>
<td>${v.channel}</td>
<td>${v.title}</td>
<td><code>${v.video_id}</code></td>
<td class="text-truncate" style="max-width: 300px;">${v.symlink || '-'}</td>
`;
tbody.appendChild(tr);
});
}
document.getElementById('search-input').addEventListener('input', () => {
fetchStatus();
});
document.getElementById('channel-filter').addEventListener('change', () => {
fetchStatus();
});
document.getElementById('status-filter').addEventListener('change', () => {
fetchStatus();
});
</script>
</body>
</html>

213
templates/transcoding.html Normal file
View file

@ -0,0 +1,213 @@
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transcode Manager - TA Organizerr</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<style>
.codec-badge {
font-family: monospace;
font-size: 0.8em;
}
.codec-ok {
background-color: #28a745;
}
.codec-warn {
background-color: #ffc107;
color: #000;
}
.codec-bad {
background-color: #dc3545;
}
</style>
</head>
<body>
<div class="container-fluid p-4">
<header class="d-flex justify-content-between align-items-center mb-4">
<h1><i class="bi bi-film"></i> Transcode Manager</h1>
<a href="/" class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Back to Dashboard</a>
</header>
<div class="alert alert-info d-flex justify-content-between align-items-center">
<div>
<strong>ℹ️ Info:</strong> This page shows videos with broken/missing source files. Click "Find Missing
Videos" to scan for orphaned symlinks, then transcode them to restore compatibility.
</div>
<button class="btn btn-primary" onclick="findMissing()">
<i class="bi bi-search"></i> Find Missing Videos
</button>
</div>
<div class="card mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h5>Transcode Queue</h5>
<div id="pagination-info" class="text-muted"></div>
</div>
<div class="card-body">
<table class="table table-striped">
<thead>
<tr>
<th style="width: 15%;">Channel</th>
<th style="width: 10%;">Published</th>
<th style="width: 30%;">Title</th>
<th style="width: 30%;">Symlink Path</th>
<th style="width: 15%;">Actions</th>
</tr>
</thead>
<tbody id="transcode-table">
<tr>
<td colspan="5" class="text-center">
<div class="spinner-border" role="status"></div> Loading...
</td>
</tr>
</tbody>
</table>
<nav>
<ul class="pagination justify-content-center" id="pagination">
</ul>
</nav>
</div>
</div>
<div class="card">
<div class="card-header">Transcoding Log</div>
<div class="card-body">
<div id="transcode-log"
style="height: 300px; overflow-y: scroll; font-family: monospace; font-size: 0.9em; background-color: #1e1e1e; color: #00ff00; padding: 10px;">
<div>Waiting for transcode jobs...</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
let transcodeLogIndex = 0;
let currentPage = 1;
async function findMissing() {
const tbody = document.getElementById('transcode-table');
tbody.innerHTML = '<tr><td colspan="7" class="text-center"><div class="spinner-border" role="status"></div> Scanning for orphaned symlinks...</td></tr>';
try {
const res = await fetch('/api/check-orphans', { method: 'POST' });
const data = await res.json();
alert(`Found ${data.count} videos with broken/missing source files.`);
currentPage = 1;
loadVideos();
} catch (e) {
alert("Scan failed: " + e);
loadVideos();
}
}
async function loadVideos(page = 1) {
try {
const res = await fetch(`/api/transcode/videos?page=${page}&per_page=100`);
const data = await res.json();
const tbody = document.getElementById('transcode-table');
tbody.innerHTML = '';
if (data.videos.length === 0) {
tbody.innerHTML = '<tr><td colspan="5" class="text-center">No missing videos found. Click "Find Missing Videos" to scan.</td></tr>';
return;
}
data.videos.forEach(v => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${v.channel}</td>
<td>${v.published}</td>
<td class="text-truncate" style="max-width: 200px;" title="${v.title}">${v.title}</td>
<td class="text-truncate" style="max-width: 250px;" title="${v.symlink}"><small>${v.symlink}</small></td>
<td>
<button class="btn btn-sm btn-primary" onclick="transcode('${v.symlink}')">
<i class="bi bi-play"></i> Transcode
</button>
</td>
`;
tbody.appendChild(tr);
});
// Update pagination info
document.getElementById('pagination-info').textContent =
`Showing ${data.videos.length} of ${data.total} videos (Page ${data.page}/${data.pages})`;
// Render pagination
const pagination = document.getElementById('pagination');
pagination.innerHTML = '';
if (data.pages > 1) {
// Previous button
const prevLi = document.createElement('li');
prevLi.className = `page-item ${data.page === 1 ? 'disabled' : ''}`;
prevLi.innerHTML = `<a class="page-link" href="#" onclick="loadVideos(${data.page - 1}); return false;">Previous</a>`;
pagination.appendChild(prevLi);
// Page numbers (show max 5 pages around current)
const startPage = Math.max(1, data.page - 2);
const endPage = Math.min(data.pages, data.page + 2);
for (let i = startPage; i <= endPage; i++) {
const li = document.createElement('li');
li.className = `page-item ${i === data.page ? 'active' : ''}`;
li.innerHTML = `<a class="page-link" href="#" onclick="loadVideos(${i}); return false;">${i}</a>`;
pagination.appendChild(li);
}
// Next button
const nextLi = document.createElement('li');
nextLi.className = `page-item ${data.page === data.pages ? 'disabled' : ''}`;
nextLi.innerHTML = `<a class="page-link" href="#" onclick="loadVideos(${data.page + 1}); return false;">Next</a>`;
pagination.appendChild(nextLi);
}
} catch (e) {
console.error(e);
}
}
async function transcode(filepath) {
if (!confirm("Start transcoding this video? This may take a while.")) return;
const res = await fetch('/api/transcode/start', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ filepath })
});
const data = await res.json();
alert(data.message || "Transcode started! Check the log below.");
}
async function fetchLogs() {
try {
const res = await fetch('/api/transcode/logs?start=' + transcodeLogIndex);
const data = await res.json();
if (data.logs && data.logs.length > 0) {
const logBox = document.getElementById('transcode-log');
data.logs.forEach(line => {
const div = document.createElement('div');
div.textContent = line;
logBox.appendChild(div);
});
logBox.scrollTop = logBox.scrollHeight;
transcodeLogIndex = data.next_index;
}
} catch (e) { console.error(e); }
}
loadVideos();
setInterval(fetchLogs, 1000);
</script>
</body>
</html>