'; // Hide all sections including the new Anime one [ "tvSection", "animeSection", "recentSection", "unreleasedSection", "nextWeekSection", "thisMonthSection" ].forEach((id) => { const el = document.getElementById(id); if (el) el.style.display = "none"; }); document .querySelectorAll(".sidebar-icon") .forEach((el) => el.classList.remove("active")); const discover_url = `${ app_config.base_url }/discover/movie?api_key=${getApiKey()}&language=${ app_config.language }&sort_by=popularity.desc&with_genres=${genre_id}${DATE_FILTER}${QUALITY_FILTERS}${REGION_FILTERS}`; let promises = []; for (let i = 1; i <= 3; i++) promises.push(fetchContent(`${discover_url}&page=${i}`, "movie")); const results = await Promise.all(promises); const movies = shuffleArray(results.flat()); if (movies.length > 0) { document.getElementById("moviesRow").innerHTML = movies .map((m) => createCard(m)) .join(""); all_movies = movies; attachTiltEffect(); } else { document.getElementById("moviesRow").innerHTML = ''; } } // --- UI LOGIC --- // Helper to inject Anime HTML structure if it's missing function injectAnimeSection() { const tvSection = document.getElementById("tvSection"); // Only add if it doesn't exist and we found a place to put it if (tvSection && !document.getElementById("animeSection")) { const animeHtml = ` `; tvSection.insertAdjacentHTML("afterend", animeHtml); } } function resetHome() { document.getElementById("trendingTitle").textContent = "TOP 10 TRENDING MOVIES"; // Show all sections [ "tvSection", "animeSection", "recentSection", "unreleasedSection", "nextWeekSection", "thisMonthSection" ].forEach((id) => { const el = document.getElementById(id); if (el) el.style.display = "block"; }); document .querySelectorAll(".sidebar-icon") .forEach((el) => el.classList.remove("active")); document .querySelector('.sidebar-icon[data-tooltip="Home"]') .classList.add("active"); const top10 = all_movies.slice(0, 10); document.getElementById("moviesRow").innerHTML = top10.map((m, index) => createCard(m, index + 1)).join("") + all_movies .slice(10) .map((m) => createCard(m)) .join(""); document.getElementById("recentRow").innerHTML = recent_movies .map((m) => createCard(m)) .join(""); document.getElementById( "unreleasedRow" ).innerHTML = unreleased_movies.map((m) => createCard(m)).join(""); document.getElementById("nextWeekRow").innerHTML = next_week_content .map((m) => createCard(m)) .join(""); document.getElementById( "thisMonthRow" ).innerHTML = this_month_content.map((m) => createCard(m)).join(""); document.getElementById("tvRow").innerHTML = all_tv .map((m) => createCard(m)) .join(""); // Populate Anime const animeRow = document.getElementById("animeRow"); if (animeRow) { animeRow.innerHTML = all_anime.map((m) => createCard(m)).join(""); } attachTiltEffect(); } function initHero(hero_movie) { if (!hero_movie) return; const container = document.getElementById("heroSection"); const bg = container.querySelector(".hero-bg"); const globalAmbient = document.getElementById("globalAmbient"); globalAmbient.style.backgroundImage = `url('${hero_movie.image}')`; bg.style.opacity = 0; setTimeout(() => { bg.style.backgroundImage = `url('${hero_movie.image}')`; bg.style.opacity = 1; container.querySelector(".hero-content").innerHTML = ` #1 Trending

${hero_movie.description}

`; typeWriter(container.querySelector("h1"), hero_movie.title); }, 300); } function createCard(item, rank = null) { const rank_html = rank ? `` : ""; return ` `; } async function initApp() { await fetchGenreMap(); // Create the Anime UI section injectAnimeSection(); const [ movies, tv, anime, recent, unreleased, next_week, this_month ] = await Promise.all([ getMovies(10), getTV(5), getAnime(3), // Fetch Anime getRecentMovies(), getUnreleasedMovies(), getNextWeekContent(), getThisMonthContent() ]); all_movies = shuffleArray(movies); all_tv = shuffleArray(tv); all_anime = shuffleArray(anime); recent_movies = shuffleArray(recent); unreleased_movies = shuffleArray(unreleased); next_week_content = shuffleArray(next_week); this_month_content = shuffleArray(this_month); if (all_movies.length > 0) { let hero_index = Math.floor(Math.random() * all_movies.length); initHero(all_movies[hero_index]); setInterval(() => { hero_index = (hero_index + 1) % all_movies.length; initHero(all_movies[hero_index]); }, 15000); resetHome(); } const preloader = document.getElementById("preloader"); preloader.style.opacity = "0"; preloader.style.visibility = "hidden"; } function openDetails(id) { let item = all_movies.find((i) => i.id == id) || all_tv.find((i) => i.id == id) || all_anime.find((i) => i.id == id) || // Check Anime list recent_movies.find((i) => i.id == id) || unreleased_movies.find((i) => i.id == id) || next_week_content.find((i) => i.id == id) || this_month_content.find((i) => i.id == id); if (!item) return; document.getElementById("detailImg").src = item.poster; document.getElementById("detailTitle").textContent = item.title; document.getElementById("detailYear").textContent = item.year; document.getElementById("detailGenre").textContent = item.genre; document.getElementById("detailDesc").textContent = item.description; document.getElementById("detailRating").textContent = (item.rating * 10).toFixed(0) + "% Match"; document.getElementById("detailPlayBtn").onclick = () => { closeDetails(); setTimeout(() => playVideo(item.id, item.type, item.title, item.mp4), 300); }; const modal = document.getElementById("detailsModal"); modal.classList.add("active"); modal.querySelector(".details-container").classList.add("active"); } function closeDetails() { const modal = document.getElementById("detailsModal"); const container = modal.querySelector(".details-container"); container.classList.remove("active"); setTimeout(() => modal.classList.remove("active"), 300); } // 2. VIDEO PLAYER LOGIC (With Autoplay Fix) async function playVideo(id, type, title, fallbackUrl) { const modal = document.getElementById("videoModal"); const ytFrame = document.getElementById("youtubeFrame"); const video = document.getElementById("mainVideo"); const controls = document.getElementById("videoControls"); document.getElementById("playerTitle").textContent = "NOW PLAYING: " + title; showToast("Loading", "Searching for trailer..."); modal.classList.add("active"); const ytKey = await fetchTrailerKey(id, type); if (ytKey) { showToast("Success", "Trailer found. Playing from YouTube."); video.style.display = "none"; controls.classList.add("hidden"); ytFrame.classList.add("active"); // Force Autoplay permissions ytFrame.setAttribute( "allow", "autoplay; encrypted-media; gyroscope; picture-in-picture" ); // Add Autoplay parameters ytFrame.src = `https://www.youtube.com/embed/${ytKey}?autoplay=1&mute=0&rel=0&showinfo=0&modestbranding=1`; } else { showToast("Notice", "No trailer found. Playing demo reel."); ytFrame.classList.remove("active"); ytFrame.src = ""; video.style.display = "block"; controls.classList.remove("hidden"); video.src = fallbackUrl; video .play() .then(() => updatePlayIcon(true)) .catch(() => updatePlayIcon(false)); update_interval = setInterval(updateProgressDisplay, 500); } } function closePlayer() { const video = document.getElementById("mainVideo"); const ytFrame = document.getElementById("youtubeFrame"); video.pause(); video.src = ""; ytFrame.src = ""; ytFrame.classList.remove("active"); document.getElementById("videoModal").classList.remove("active"); updatePlayIcon(false); clearInterval(update_interval); } function scrollRow(row_id, direction) { const container = document.getElementById(row_id); const amount = container.clientWidth * 0.7; container.scrollBy({ left: direction === "left" ? -amount : amount, behavior: "smooth" }); } function showToast(title, message) { const container = document.getElementById("toastContainer"); const toast = document.createElement("div"); toast.className = "toast"; toast.innerHTML = ``; container.appendChild(toast); setTimeout(() => { toast.classList.add("hiding"); toast.addEventListener("animationend", () => toast.remove()); }, 5000); } function openInfoModal(section_id) { const source = document.getElementById(`content_${section_id}`); const body = document.getElementById("infoBody"); const modal = document.getElementById("infoModal"); const container = modal.querySelector(".details-container"); if (source) { body.style.opacity = 0; body.style.transform = "translateY(10px)"; setTimeout(() => { body.innerHTML = source.innerHTML; body.style.transition = "opacity 0.3s ease, transform 0.3s ease"; body.style.opacity = 1; body.style.transform = "translateY(0)"; }, 100); modal.classList.add("active"); container.classList.add("active"); } } function closeInfoModal() { const modal = document.getElementById("infoModal"); const container = modal.querySelector(".details-container"); container.classList.remove("active"); setTimeout(() => modal.classList.remove("active"), 300); } function scrollToSection(id) { if (document.getElementById("tvSection").style.display === "none") { resetHome(); setTimeout(() => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: "smooth" }); }, 100); } else { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: "smooth" }); } } function shareTwitter() { const shareUrl = "https://codepen.io/Julibe/full/raLjMLZ/"; const viaUser = "Julibe"; const messages = [ "EXT. DIGITAL THEATER - NIGHT. Movieverse premieres. The screen glows. 🎬", "INT. SCREENING ROOM. Every click a scene. Every scroll a story. 🍿", "POV: You’re inside a living cinematic universe. ✨", "THE DIRECTOR (O.S.): 'Cut! This experience deserves a standing ovation.' 📽️", "FADE IN: Lights dim, motion rises, magic unfolds. 🌌", "SLOW ZOOM: Each poster a portal, every interaction a scene." ]; const hashtagsList = [ "cinema", "blockbuster", "movieverse", "premiere", "film", "hollywood", "movienight", "screening", "cinematic", "storytelling", "epic", "trailer", "director", "lightscameraaction", "filmlover" ]; const text = messages[Math.floor(Math.random() * messages.length)]; let selectedTags = hashtagsList .sort(() => 0.5 - Math.random()) .slice(0, 4) .map((tag) => tag.replace(/\s+/g, "")); const urlLength = 23; const viaLength = 6 + viaUser.length; const maxChars = 280; while (selectedTags.length > 0) { const tagsLength = selectedTags.reduce((acc, tag) => acc + tag.length + 2, 0); const totalLength = text.length + urlLength + viaLength + tagsLength; if (totalLength <= maxChars) break; selectedTags.pop(); } const hashtags = selectedTags.join(","); const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent( text )}&url=${encodeURIComponent(shareUrl)}&hashtags=${encodeURIComponent( hashtags )}&via=${encodeURIComponent(viaUser)}`; window.open(twitterUrl, "_blank"); } function togglePlay() { const video = document.getElementById("mainVideo"); if (video.style.display === "none") return; if (video.paused) { video.play(); updatePlayIcon(true); } else { video.pause(); updatePlayIcon(false); } } function updatePlayIcon(is_playing) { document.getElementById("playIcon").className = is_playing ? "fas fa-pause" : "fas fa-play"; document .getElementById("centerPlayBtn") .classList.toggle("visible", !is_playing); } function updateProgressDisplay() { const video = document.getElementById("mainVideo"); if (video.duration) { const pct = (video.currentTime / video.duration) * 100; document.getElementById("progressBar").style.width = `${pct}%`; const cur_mins = Math.floor(video.currentTime / 60); const cur_secs = Math.floor(video.currentTime % 60); const dur_mins = Math.floor(video.duration / 60); const dur_secs = Math.floor(video.duration % 60); document.getElementById( "timeDisplay" ).textContent = `${cur_mins}:${cur_secs .toString() .padStart(2, "0")} / ${dur_mins}:${dur_secs.toString().padStart(2, "0")}`; } } function seek(e) { const video = document.getElementById("mainVideo"); if (video.style.display === "none") return; const rect = e.currentTarget.getBoundingClientRect(); const pct = (e.clientX - rect.left) / rect.width; if (video.duration) { video.currentTime = pct * video.duration; updateProgressDisplay(); } } function toggleMute() { const video = document.getElementById("mainVideo"); video.muted = !video.muted; document.getElementById("muteIcon").className = video.muted ? "fas fa-volume-mute" : "fas fa-volume-up"; } function toggleFullscreen() { const container = document.getElementById("videoContainer"); if (!document.fullscreenElement) container.requestFullscreen(); else document.exitFullscreen(); } function attachTiltEffect() { document.querySelectorAll(".card").forEach((card) => { card.addEventListener("mousemove", (e) => { const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const rotateX = ((y - rect.height / 2) / (rect.height / 2)) * -15; const rotateY = ((x - rect.width / 2) / (rect.width / 2)) * 15; card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.05)`; }); card.addEventListener( "mouseleave", () => (card.style.transform = "perspective(1000px) rotateX(0) rotateY(0) scale(1)") ); }); } document.addEventListener("DOMContentLoaded", () => { const dot = document.querySelector(".cursor-dot"); const outline = document.querySelector(".cursor-outline"); window.addEventListener("mousemove", (e) => { dot.style.left = `${e.clientX}px`; dot.style.top = `${e.clientY}px`; outline.animate( { left: `${e.clientX}px`, top: `${e.clientY}px` }, { duration: 500, fill: "forwards" } ); }); new MutationObserver(() => { document .querySelectorAll("a, button, .card, .sidebar-icon, .close-btn") .forEach((el) => { el.onmouseenter = () => document.body.classList.add("hovering"); el.onmouseleave = () => document.body.classList.remove("hovering"); }); }).observe(document.body, { childList: true, subtree: true }); }); window.onload = () => { initApp(); window.onscroll = () => { document .getElementById("navbar") .classList.toggle("scrolled", window.scrollY > 50); const btn = document.getElementById("scrollTopBtn"); if (window.scrollY > 500) btn.classList.add("visible"); else btn.classList.remove("visible"); }; }; console.log('%c PEN ✅ END ', 'background: #00ff00; color: #000; font-weight: bold; padding: 2px 10px;');