diff --git a/frontend/app.js b/frontend/app.js
deleted file mode 100644
index 39084f9..0000000
--- a/frontend/app.js
+++ /dev/null
@@ -1,1123 +0,0 @@
-// 1. Global State and Constants (Declare these first!)
-let currentPage = 1;
-const perPage = 12;
-const renderedVideoIds = new Set();
-let hasNextPage = true;
-let isLoading = false;
-let hlsPlayer = null;
-let currentLoadController = null;
-let errorToastTimer = null;
-let playerMode = 'modal';
-let playerHome = null;
-let onFullscreenChange = null;
-let onWebkitEndFullscreen = null;
-const FAVORITES_KEY = 'favorites';
-const FAVORITES_VISIBILITY_KEY = 'favoritesVisible';
-
-// 2. Observer Definition (Must be defined before initApp uses it)
-const observer = new IntersectionObserver((entries) => {
- if (entries[0].isIntersecting) loadVideos();
-}, {
- threshold: 1.0
-});
-
-// 3. Logic Functions
-async function InitializeLocalStorage() {
- if (!localStorage.getItem('config')) {
- localStorage.setItem('config', JSON.stringify({
- servers: [
- { "https://getfigleaf.com": {} },
- { "https://hottubapp.io": {} },
- { "https://hottub.spacemoehre.de": {} }
- ]
- }));
- }
- if (!localStorage.getItem('theme')) {
- localStorage.setItem('theme', 'dark');
- }
- if (!localStorage.getItem(FAVORITES_KEY)) {
- localStorage.setItem(FAVORITES_KEY, JSON.stringify([]));
- }
- if (!localStorage.getItem(FAVORITES_VISIBILITY_KEY)) {
- localStorage.setItem(FAVORITES_VISIBILITY_KEY, 'true');
- }
- // We always run this to make sure session is fresh
- await InitializeServerStatus();
-}
-
-async function InitializeServerStatus() {
- const config = JSON.parse(localStorage.getItem('config'));
- if (!config || !config.servers) return;
-
- const statusPromises = config.servers.map(async (serverObj) => {
- const server = Object.keys(serverObj)[0];
- try {
- const response = await fetch(`/api/status`, {
- method: "POST",
- body: JSON.stringify({
- server: server
- }),
- headers: {
- "Content-Type": "application/json"
- },
- });
- const status = await response.json();
- serverObj[server] = status;
- } catch (err) {
- serverObj[server] = {
- online: false,
- channels: []
- };
- }
- });
-
- await Promise.all(statusPromises);
- localStorage.setItem('config', JSON.stringify(config));
-
- const existingSession = getSession();
- const serverKeys = config.servers.map((serverObj) => Object.keys(serverObj)[0]);
- const selectedServerKey = existingSession && serverKeys.includes(existingSession.server)
- ? existingSession.server
- : serverKeys[0];
- const serverData = config.servers.find((serverObj) => Object.keys(serverObj)[0] === selectedServerKey)[selectedServerKey];
-
- if (serverData.channels && serverData.channels.length > 0) {
- const prefs = getPreferences();
- const serverPrefs = prefs[selectedServerKey] || {};
- const preferredChannelId = serverPrefs.channelId;
- const channel = serverData.channels.find((ch) => ch.id === preferredChannelId) || serverData.channels[0];
- const savedOptions = serverPrefs.optionsByChannel ? serverPrefs.optionsByChannel[channel.id] : null;
- const options = savedOptions ? hydrateOptions(channel, savedOptions) : buildDefaultOptions(channel);
-
- const sessionData = {
- server: selectedServerKey,
- channel: channel,
- options: options,
- };
-
- setSession(sessionData);
- savePreference(sessionData);
- }
-}
-
-async function loadVideos() {
- const session = JSON.parse(localStorage.getItem('session'));
- if (!session) return;
- if (isLoading || !hasNextPage) return;
-
- const searchInput = document.getElementById('search-input');
- const query = searchInput ? searchInput.value : "";
-
- // Build the request body
- let body = {
- channel: session.channel.id,
- query: query || "",
- page: currentPage,
- perPage: perPage,
- server: session.server
- };
-
- // Correct way to loop through the options object
- Object.entries(session.options).forEach(([key, value]) => {
- if (Array.isArray(value)) {
- body[key] = value.map((entry) => entry.id).join(", ");
- } else if (value && value.id) {
- body[key] = value.id;
- }
- });
-
- try {
- isLoading = true;
- updateLoadMoreState();
- currentLoadController = new AbortController();
- const response = await fetch('/api/videos', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify(body),
- signal: currentLoadController.signal
- });
- const videos = await response.json();
- renderVideos(videos);
- hasNextPage = videos && videos.pageInfo ? videos.pageInfo.hasNextPage !== false : true;
- currentPage++;
- ensureViewportFilled();
- } catch (err) {
- if (err.name !== 'AbortError') {
- console.error("Failed to load videos:", err);
- }
- } finally {
- isLoading = false;
- currentLoadController = null;
- updateLoadMoreState();
- }
-}
-
-function renderVideos(videos) {
- const grid = document.getElementById('video-grid');
- if (!grid) return;
-
- const items = videos && Array.isArray(videos.items) ? videos.items : [];
- const favoritesSet = getFavoritesSet();
- items.forEach(v => {
- if (renderedVideoIds.has(v.id)) return;
-
- const card = document.createElement('div');
- card.className = 'video-card';
- const durationText = formatDuration(v.duration);
- const favoriteKey = getFavoriteKey(v);
- card.innerHTML = `
-
- 
- ${v.title}
- ${v.channel}
- ${durationText ? `${durationText}
` : ''}
- `;
- const favoriteBtn = card.querySelector('.favorite-btn');
- if (favoriteBtn && favoriteKey) {
- setFavoriteButtonState(favoriteBtn, favoritesSet.has(favoriteKey));
- favoriteBtn.onclick = (event) => {
- event.stopPropagation();
- toggleFavorite(v);
- };
- }
- card.onclick = () => openPlayer(v.url);
- grid.appendChild(card);
- renderedVideoIds.add(v.id);
- });
-
- ensureViewportFilled();
-}
-
-function formatDuration(seconds) {
- if (!seconds || seconds <= 0) return '';
- const totalSeconds = Math.floor(seconds);
- const hours = Math.floor(totalSeconds / 3600);
- const minutes = Math.floor((totalSeconds % 3600) / 60);
- if (hours > 0) {
- return `${hours}h ${String(minutes).padStart(2, '0')}m`;
- }
- return `${minutes}m`;
-}
-
-function isMobilePlayback() {
- if (navigator.userAgentData && typeof navigator.userAgentData.mobile === 'boolean') {
- return navigator.userAgentData.mobile;
- }
- const ua = navigator.userAgent || '';
- if (/iPhone|iPad|iPod|Android/i.test(ua)) return true;
- return window.matchMedia('(pointer: coarse)').matches && window.matchMedia('(max-width: 900px)').matches;
-}
-
-function isTvPlayback() {
- const ua = navigator.userAgent || '';
- return /SMART-TV|SmartTV|Smart TV|Internet\.TV|HbbTV|NetCast|Web0S|webOS|Tizen|AppleTV|Apple TV|GoogleTV|Android TV|AFTB|AFTS|AFTM|AFTT|AFTQ|AFTK|AFTN|AFTMM|AFTKR|Roku|DTV|BRAVIA|VIZIO|SHIELD|PhilipsTV|Hisense|VIDAA|TOSHIBA/i.test(ua);
-}
-
-function getMobileVideoHost() {
- let host = document.getElementById('mobile-video-host');
- if (!host) {
- host = document.createElement('div');
- host.id = 'mobile-video-host';
- document.body.appendChild(host);
- }
- return host;
-}
-
-function getFavorites() {
- try {
- const raw = localStorage.getItem(FAVORITES_KEY);
- const parsed = raw ? JSON.parse(raw) : [];
- return Array.isArray(parsed) ? parsed : [];
- } catch (err) {
- return [];
- }
-}
-
-function setFavorites(items) {
- localStorage.setItem(FAVORITES_KEY, JSON.stringify(items));
-}
-
-function getFavoriteKey(video) {
- if (!video) return null;
- return video.key || video.id || video.url || null;
-}
-
-function normalizeFavorite(video) {
- const key = getFavoriteKey(video);
- if (!key) return null;
- return {
- key,
- id: video.id || null,
- url: video.url || '',
- title: video.title || '',
- thumb: video.thumb || '',
- channel: video.channel || '',
- duration: video.duration || 0
- };
-}
-
-function getFavoritesSet() {
- return new Set(getFavorites().map((item) => item.key));
-}
-
-function setFavoriteButtonState(button, isFavorite) {
- button.classList.toggle('is-favorite', isFavorite);
- button.textContent = isFavorite ? '♥' : '♡';
- button.setAttribute('aria-pressed', isFavorite ? 'true' : 'false');
- button.setAttribute('aria-label', isFavorite ? 'Remove from favorites' : 'Add to favorites');
-}
-
-function syncFavoriteButtons() {
- const favoritesSet = getFavoritesSet();
- document.querySelectorAll('.favorite-btn[data-fav-key]').forEach((button) => {
- const key = button.dataset.favKey;
- if (!key) return;
- setFavoriteButtonState(button, favoritesSet.has(key));
- });
-}
-
-function toggleFavorite(video) {
- const key = getFavoriteKey(video);
- if (!key) return;
- const favorites = getFavorites();
- const existingIndex = favorites.findIndex((item) => item.key === key);
- if (existingIndex >= 0) {
- favorites.splice(existingIndex, 1);
- } else {
- const entry = normalizeFavorite(video);
- if (entry) favorites.unshift(entry);
- }
- setFavorites(favorites);
- renderFavoritesBar();
- syncFavoriteButtons();
-}
-
-function isFavoritesVisible() {
- return localStorage.getItem(FAVORITES_VISIBILITY_KEY) !== 'false';
-}
-
-function setFavoritesVisible(isVisible) {
- localStorage.setItem(FAVORITES_VISIBILITY_KEY, isVisible ? 'true' : 'false');
-}
-
-function renderFavoritesBar() {
- const bar = document.getElementById('favorites-bar');
- const list = document.getElementById('favorites-list');
- const empty = document.getElementById('favorites-empty');
- if (!bar || !list) return;
-
- const favorites = getFavorites();
- const visible = isFavoritesVisible();
- bar.style.display = visible ? 'block' : 'none';
-
- list.innerHTML = "";
- favorites.forEach((item) => {
- const card = document.createElement('div');
- card.className = 'favorite-card';
- card.dataset.favKey = item.key;
- card.innerHTML = `
-
- 
-
-
${item.title}
-
${item.channel}
-