106 lines
3.2 KiB
JavaScript
106 lines
3.2 KiB
JavaScript
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(); |