You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
5.2 KiB
142 lines
5.2 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Videos - Reddit Video Maker Bot</title>
|
|
<link rel="stylesheet" href="/static/css/app.css">
|
|
</head>
|
|
<body>
|
|
<nav class="sidebar">
|
|
<div class="logo">
|
|
<h2>Reddit Video Bot</h2>
|
|
</div>
|
|
<ul class="nav-links">
|
|
<li><a href="/">Dashboard</a></li>
|
|
<li><a href="/settings">Settings</a></li>
|
|
<li><a href="/backgrounds">Backgrounds</a></li>
|
|
<li><a href="/videos" class="active">Videos</a></li>
|
|
<li><a href="/progress">Progress</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<main class="content">
|
|
<header>
|
|
<h1>Generated Videos</h1>
|
|
<div class="header-actions">
|
|
<select id="filter-subreddit" class="filter-select">
|
|
<option value="">All Subreddits</option>
|
|
</select>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="videos-container">
|
|
<div class="loading">Loading videos...</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="/static/js/app.js"></script>
|
|
<script>
|
|
let allVideos = [];
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadVideos();
|
|
document.getElementById('filter-subreddit').addEventListener('change', filterVideos);
|
|
});
|
|
|
|
function loadVideos() {
|
|
fetch('/api/videos')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
allVideos = data.videos || [];
|
|
populateFilters();
|
|
renderVideos(allVideos);
|
|
})
|
|
.catch(err => {
|
|
document.getElementById('videos-container').innerHTML = '<div class="error">Error loading videos</div>';
|
|
});
|
|
}
|
|
|
|
function populateFilters() {
|
|
const subreddits = [...new Set(allVideos.map(v => v.subreddit))];
|
|
const select = document.getElementById('filter-subreddit');
|
|
subreddits.forEach(s => {
|
|
const opt = document.createElement('option');
|
|
opt.value = s;
|
|
opt.textContent = 'r/' + s;
|
|
select.appendChild(opt);
|
|
});
|
|
}
|
|
|
|
function filterVideos() {
|
|
const subreddit = document.getElementById('filter-subreddit').value;
|
|
const filtered = subreddit
|
|
? allVideos.filter(v => v.subreddit === subreddit)
|
|
: allVideos;
|
|
renderVideos(filtered);
|
|
}
|
|
|
|
function renderVideos(videos) {
|
|
const container = document.getElementById('videos-container');
|
|
|
|
if (videos.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="empty-state card">
|
|
<h3>No Videos Yet</h3>
|
|
<p>Generated videos will appear here.</p>
|
|
<a href="/" class="btn btn-primary">Go to Dashboard</a>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = `
|
|
<div class="videos-grid">
|
|
${videos.map(v => `
|
|
<div class="video-card card">
|
|
<div class="video-preview">
|
|
<video src="${v.path}" controls preload="metadata"></video>
|
|
</div>
|
|
<div class="video-info">
|
|
<span class="video-subreddit">r/${v.subreddit}</span>
|
|
<h4 class="video-name">${v.name}</h4>
|
|
<div class="video-meta">
|
|
<span class="video-size">${formatFileSize(v.size)}</span>
|
|
<span class="video-date">${formatDate(v.created)}</span>
|
|
</div>
|
|
</div>
|
|
<div class="video-actions">
|
|
<a href="${v.path}" download class="btn btn-primary btn-small">Download</a>
|
|
<button class="btn btn-secondary btn-small" onclick="copyLink('${v.path}')">Copy Link</button>
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function formatFileSize(bytes) {
|
|
if (bytes === 0) return '0 Bytes';
|
|
const k = 1024;
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
}
|
|
|
|
function formatDate(isoString) {
|
|
const date = new Date(isoString);
|
|
return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
|
|
}
|
|
|
|
function copyLink(path) {
|
|
const url = window.location.origin + path;
|
|
navigator.clipboard.writeText(url).then(() => {
|
|
showNotification('Link copied to clipboard!', 'success');
|
|
}).catch(() => {
|
|
showNotification('Failed to copy link', 'error');
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|