first commit
This commit is contained in:
Simon
106
frontend/app.js
Normal file
106
frontend/app.js
Normal file
@@ -0,0 +1,106 @@
|
||||
let currentPage = 1;
|
||||
const perPage = 12;
|
||||
|
||||
localStorage.clear();
|
||||
|
||||
function InitializeLocalStorage() {
|
||||
if (!localStorage.getItem('config')) {
|
||||
localStorage.setItem('config', JSON.stringify({ servers: [{ "https://getfigleaf.com": {} }] }));
|
||||
InitializeServerStatus();
|
||||
}
|
||||
}
|
||||
|
||||
function InitializeServerStatus() {
|
||||
const config = JSON.parse(localStorage.getItem('config'));
|
||||
config.servers.forEach(serverObj => {
|
||||
const server = Object.keys(serverObj)[0];
|
||||
fetch(`/api/status`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ server: server }),
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(status => {
|
||||
serverObj[server] = status;
|
||||
localStorage.setItem('config', JSON.stringify(config));
|
||||
})
|
||||
.catch(err => {
|
||||
serverObj[server] = { online: false };
|
||||
localStorage.setItem('config', JSON.stringify(config));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function loadVideos() {
|
||||
const config = JSON.parse(localStorage.getItem('config'));
|
||||
const response = await fetch('/api/videos', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
channel: config.channel,
|
||||
sort: "latest",
|
||||
query: "",
|
||||
page: currentPage,
|
||||
perPage: perPage
|
||||
})
|
||||
});
|
||||
const videos = await response.json();
|
||||
renderVideos(videos);
|
||||
currentPage++;
|
||||
}
|
||||
|
||||
function renderVideos(videos) {
|
||||
const grid = document.getElementById('video-grid');
|
||||
videos.forEach(v => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'video-card';
|
||||
card.innerHTML = `
|
||||
<img src="${v.thumb}" alt="${v.title}">
|
||||
<h4>${v.title}</h4>
|
||||
<p>${v.channel} • ${v.duration}s</p>
|
||||
`;
|
||||
card.onclick = () => openPlayer(v.url);
|
||||
grid.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
function openPlayer(videoUrl) {
|
||||
const modal = document.getElementById('video-modal');
|
||||
const player = document.getElementById('player');
|
||||
// Using GET for the video tag src as it's the standard for streaming
|
||||
player.src = `/api/stream?url=${encodeURIComponent(videoUrl)}`;
|
||||
modal.style.display = 'block';
|
||||
}
|
||||
|
||||
function closePlayer() {
|
||||
const modal = document.getElementById('video-modal');
|
||||
const player = document.getElementById('player');
|
||||
player.pause();
|
||||
player.src = "";
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
|
||||
// UI Helpers
|
||||
function toggleDrawer(id) {
|
||||
document.querySelectorAll('.drawer').forEach(d => d.classList.remove('open'));
|
||||
document.getElementById(`drawer-${id}`).classList.add('open');
|
||||
document.getElementById('overlay').style.display = 'block';
|
||||
}
|
||||
|
||||
function closeDrawers() {
|
||||
document.querySelectorAll('.drawer').forEach(d => d.classList.remove('open'));
|
||||
document.getElementById('overlay').style.display = 'none';
|
||||
}
|
||||
|
||||
// Infinite Scroll Observer
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting) loadVideos();
|
||||
}, { threshold: 1.0 });
|
||||
|
||||
observer.observe(document.getElementById('sentinel'));
|
||||
|
||||
// Init
|
||||
InitializeLocalStorage();
|
||||
loadVideos();
|
||||
37
frontend/index.html
Normal file
37
frontend/index.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Hottub</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="top-bar">
|
||||
<div class="logo">Hottub</div>
|
||||
<div class="actions">
|
||||
<button onclick="toggleDrawer('settings')">Settings</button>
|
||||
<button onclick="toggleDrawer('menu')" class="menu-btn">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="search-container">
|
||||
<input type="text" id="search-input" placeholder="Search videos..." oninput="handleSearch(this.value)">
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="video-grid" class="grid-container"></main>
|
||||
<div id="sentinel"></div> <div id="drawer-menu" class="drawer"><h3>Menu</h3></div>
|
||||
<div id="drawer-settings" class="drawer"><h3>Settings</h3></div>
|
||||
<div id="overlay" onclick="closeDrawers()"></div>
|
||||
|
||||
<div id="video-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="closePlayer()">×</span>
|
||||
<video id="player" controls autoplay></video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
30
frontend/style.css
Normal file
30
frontend/style.css
Normal file
@@ -0,0 +1,30 @@
|
||||
:root { --bg: #0f0f0f; --text: #fff; --accent: #3d3d3d; }
|
||||
body { margin: 0; background: var(--bg); color: var(--text); font-family: sans-serif; overflow-x: hidden; }
|
||||
|
||||
.top-bar {
|
||||
height: 60px; display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 0 20px; background: #202020; position: sticky; top: 0; z-index: 100;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px; padding: 20px;
|
||||
}
|
||||
|
||||
.video-card { cursor: pointer; transition: transform 0.2s; }
|
||||
.video-card img { width: 100%; border-radius: 12px; }
|
||||
|
||||
.drawer {
|
||||
position: fixed; top: 0; right: -300px; width: 300px; height: 100%;
|
||||
background: #1e1e1e; z-index: 1000; transition: 0.3s; padding: 20px;
|
||||
}
|
||||
.drawer.open { right: 0; }
|
||||
|
||||
#overlay {
|
||||
position: fixed; inset: 0; background: rgba(0,0,0,0.7);
|
||||
display: none; z-index: 999;
|
||||
}
|
||||
|
||||
.modal { display: none; position: fixed; inset: 0; background: #000; z-index: 2000; }
|
||||
.modal-content { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
|
||||
video { width: 80%; max-height: 80vh; }
|
||||
Reference in New Issue
Block a user