Organized the differences between server and docker versions.

We are launching a docker version (server version) today so we want to just organize the repo
so its easier to navigate.

desktop/src/scripts/anime/animes.js

@@ -0,0 +1,194 @@
+let trendingAnimes = [];
+let currentHeroIndex = 0;
+let player;
+let heroInterval;
+
+document.addEventListener('DOMContentLoaded', () => {
+    SearchManager.init('#search-input', '#search-results', 'anime');
+    ContinueWatchingManager.load('my-status', 'watching', 'ANIME');
+    fetchContent();
+    setInterval(() => fetchContent(true), 60000);
+});
+
+document.addEventListener('click', (e) => {
+    if (!e.target.closest('.search-wrapper')) {
+        const searchResults = document.getElementById('search-results');
+        const searchInput = document.getElementById('search-input');
+        searchResults.classList.remove('active');
+        searchInput.style.borderRadius = '99px';
+    }
+});
+
+function scrollCarousel(id, direction) {
+    const container = document.getElementById(id);
+    if(container) {
+        const scrollAmount = container.clientWidth * 0.75;
+        container.scrollBy({ left: direction * scrollAmount, behavior: 'smooth' });
+    }
+}
+
+var tag = document.createElement('script');
+tag.src = "https://www.youtube.com/iframe_api";
+var firstScriptTag = document.getElementsByTagName('script')[0];
+firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+function onYouTubeIframeAPIReady() {
+    player = new YT.Player('player', {
+        height: '100%',
+        width: '100%',
+        playerVars: {
+            'autoplay': 1,
+            'controls': 0,
+            'mute': 1,
+            'loop': 1,
+            'showinfo': 0,
+            'modestbranding': 1
+        },
+        events: {
+            'onReady': (e) => {
+                e.target.mute();
+                if(trendingAnimes.length) updateHeroVideo(trendingAnimes[currentHeroIndex]);
+            }
+        }
+    });
+}
+
+async function fetchContent(isUpdate = false) {
+    try {
+        const trendingRes = await fetch('/api/trending');
+        const trendingData = await trendingRes.json();
+
+        if (trendingData.results && trendingData.results.length > 0) {
+            trendingAnimes = trendingData.results;
+            if (!isUpdate) {
+                updateHeroUI(trendingAnimes[0]);
+                startHeroCycle();
+            }
+            renderList('trending', trendingAnimes);
+        } else if (!isUpdate) {
+            setTimeout(() => fetchContent(false), 2000);
+        }
+
+        const topRes = await fetch('/api/top-airing');
+        const topData = await topRes.json();
+        if (topData.results && topData.results.length > 0) {
+            renderList('top-airing', topData.results);
+        }
+    } catch (e) {
+        console.error("Fetch Error:", e);
+        if(!isUpdate) setTimeout(() => fetchContent(false), 5000);
+    }
+}
+
+function startHeroCycle() {
+    if(heroInterval) clearInterval(heroInterval);
+    heroInterval = setInterval(() => {
+        if(trendingAnimes.length > 0) {
+            currentHeroIndex = (currentHeroIndex + 1) % trendingAnimes.length;
+            updateHeroUI(trendingAnimes[currentHeroIndex]);
+        }
+    }, 10000);
+}
+
+async function updateHeroUI(anime) {
+    if(!anime) return;
+
+    const title = anime.title.english || anime.title.romaji || "Unknown Title";
+    const score = anime.averageScore ? anime.averageScore + '% Match' : 'N/A';
+    const year = anime.seasonYear || '';
+    const type = anime.format || 'TV';
+    const desc = anime.description || 'No description available.';
+    const poster = anime.coverImage ? anime.coverImage.extraLarge : '';
+    const banner = anime.bannerImage || poster;
+
+    document.getElementById('hero-title').innerText = title;
+    document.getElementById('hero-desc').innerHTML = desc;
+    document.getElementById('hero-score').innerText = score;
+    document.getElementById('hero-year').innerText = year;
+    document.getElementById('hero-type').innerText = type;
+    document.getElementById('hero-poster').src = poster;
+
+    const watchBtn = document.getElementById('watch-btn');
+    if(watchBtn) watchBtn.onclick = () => window.location.href = `/anime/${anime.id}`;
+
+    const addToListBtn = document.querySelector('.hero-buttons .btn-blur');
+    if(addToListBtn) {
+        ListModalManager.currentData = anime;
+        const entryType = ListModalManager.getEntryType(anime);
+
+        await ListModalManager.checkIfInList(anime.id, 'anilist', entryType);
+        ListModalManager.updateButton();
+
+        addToListBtn.onclick = () => ListModalManager.open(anime, 'anilist');
+    }
+
+    const bgImg = document.getElementById('hero-bg-media');
+    if(bgImg && bgImg.src !== banner) bgImg.src = banner;
+
+    updateHeroVideo(anime);
+
+    document.getElementById('hero-loading-ui').style.display = 'none';
+    document.getElementById('hero-real-ui').style.display = 'block';
+}
+
+function updateHeroVideo(anime) {
+    if (!player || !player.loadVideoById) return;
+    const videoContainer = document.getElementById('player');
+    if (anime.trailer && anime.trailer.site === 'youtube' && anime.trailer.id) {
+        if(player.getVideoData && player.getVideoData().video_id !== anime.trailer.id) {
+            player.loadVideoById(anime.trailer.id);
+            player.mute();
+        }
+        videoContainer.style.opacity = "1";
+    } else {
+        videoContainer.style.opacity = "0";
+        player.stopVideo();
+    }
+}
+
+function renderList(id, list) {
+    const container = document.getElementById(id);
+    const firstId = list.length > 0 ? list[0].id : null;
+    const currentFirstId = container.firstElementChild?.dataset?.id;
+    if (currentFirstId && parseInt(currentFirstId) === firstId && container.children.length === list.length) {
+        return;
+    }
+
+    container.innerHTML = '';
+    list.forEach(anime => {
+        const title = anime.title.english || anime.title.romaji || "Unknown Title";
+        const cover = anime.coverImage ? anime.coverImage.large : '';
+        const ep = anime.nextAiringEpisode ? 'Ep ' + anime.nextAiringEpisode.episode : (anime.episodes ? anime.episodes + ' Eps' : 'TV');
+        const score = anime.averageScore || '--';
+
+        const el = document.createElement('div');
+        el.className = 'card';
+        el.dataset.id = anime.id;
+
+        el.onclick = () => window.location.href = `/anime/${anime.id}`;
+        el.innerHTML = `
+            <div class="card-img-wrap"><img src="${cover}" loading="lazy"></div>
+            <div class="card-content">
+                <h3>${title}</h3>
+                <p>${score}% • ${ep}</p>
+            </div>
+        `;
+        container.appendChild(el);
+    });
+}
+
+function saveToList() {
+    const animeId = ListModalManager.currentData ? ListModalManager.currentData.id : null;
+    if (!animeId) return;
+    ListModalManager.save(animeId, 'anilist');
+}
+
+function deleteFromList() {
+    const animeId = ListModalManager.currentData ? ListModalManager.currentData.id : null;
+    if (!animeId) return;
+    ListModalManager.delete(animeId, 'anilist');
+}
+
+function closeAddToListModal() {
+    ListModalManager.close();
+}