📝 added jsdoc documentation

Author: LoupesDEV

js/dataLoader.js

@@ -1,3 +1,7 @@
+/**
+ * Fetches all necessary data files: films, series, and collections.
+ * @returns {Object} An object containing films, series, and collections data.
+ */
 export async function fetchAllData() {
     try {
         await new Promise(r => setTimeout(r, 800));
@@ -27,6 +31,10 @@ export async function fetchAllData() {
     }
 }
 
+/**
+ * Fetches notifications data.
+ * @returns {Array} An array of notifications.
+ */
 export async function fetchNotifs() {
     try {
         const res = await fetch('data/notifs.json');

js/display.js

@@ -3,6 +3,10 @@ import { playVideo } from './utils.js';
 let activeDetailItem = null;
 let activeVideoSrc = "";
 
+/**
+ * Sets up the hero section with the given media item.
+ * @param {Object} item - The media item to display in the hero section.
+ */
 export function setupHero(item) {
     if (!item) return;
 
@@ -44,6 +48,10 @@ export function setupHero(item) {
     }
 }
 
+/**
+ * Opens the details overlay for a given media item.
+ * @param {Object} item - The media item to display details for.
+ */
 export function openDetails(item) {
     activeDetailItem = item;
     const overlay = document.getElementById('detailsOverlay');
@@ -114,11 +122,17 @@ export function openDetails(item) {
     document.body.style.overflow = 'hidden';
 }
 
+/**
+ * Closes the details overlay.
+ */
 export function closeDetails() {
     document.getElementById('detailsOverlay').classList.add('hidden');
     document.body.style.overflow = '';
 }
 
+/**
+ * Plays the currently selected media in the details overlay.
+ */
 export function playCurrentMedia() {
     if (activeVideoSrc) {
         playVideo(activeVideoSrc);
@@ -127,6 +141,11 @@ export function playCurrentMedia() {
     }
 }
 
+/**
+ * Renders the list of episodes for a given season.
+ * @param {Array} episodes - The list of episodes to render.
+ * @param {number|string} seasonNum - The season number.
+ */
 function renderEpisodes(episodes, seasonNum) {
     const list = document.getElementById('episodesList');
     list.innerHTML = '';
@@ -215,6 +234,12 @@ function renderEpisodes(episodes, seasonNum) {
     });
 }
 
+/**
+ * Creates a media card element for a given media item.
+ * @param {Object} item - The media item to create a card for.
+ * @param {string} [extraClasses=""] - Additional CSS classes to apply to the card.
+ * @returns {HTMLElement} The created media card element.
+ */
 export function createMediaCard(item, extraClasses = "") {
     const card = document.createElement('div');
     card.className = `media-card group relative rounded-xl overflow-hidden cursor-pointer bg-[#1a1a1a] shadow-lg transition-all duration-300 ${extraClasses}`;
@@ -235,12 +260,21 @@ export function createMediaCard(item, extraClasses = "") {
     return card;
 }
 
+/**
+ * Renders a grid of media items.
+ * @param {Array} items - The list of media items to render.
+ */
 export function renderGrid(items) {
     const grid = document.getElementById('contentGrid');
     grid.innerHTML = '';
     items.forEach(item => grid.appendChild(createMediaCard(item, "aspect-[2/3]")));
 }
 
+/**
+ * Renders a horizontal row of media items.
+ * @param {string} containerId - The ID of the container element.
+ * @param {Array} items - The list of media items to render.
+ */
 export function renderHorizontalRow(containerId, items) {
     const container = document.getElementById(containerId);
     container.innerHTML = '';
@@ -251,6 +285,11 @@ export function renderHorizontalRow(containerId, items) {
     });
 }
 
+/**
+ * Renders collections of media items.
+ * @param {Object} collectionsData - The collections data.
+ * @param {Object} appData - The application data containing films and series.
+ */
 export function renderCollections(collectionsData, appData) {
     const container = document.getElementById('collectionsContent');
     container.innerHTML = '';
@@ -309,6 +348,10 @@ export function renderCollections(collectionsData, appData) {
     }
 }
 
+/**
+ * Renders the list of notifications.
+ * @param {Array} list - The list of notifications to render.
+ */
 export function renderNotifs(list) {
     const container = document.getElementById('notifList');
     const badge = document.getElementById('notifBadge');

js/errorHandler.js

@@ -18,6 +18,11 @@ if (errorCodeEl) {
     errorCodeEl.textContent = (paramCode || "404").toString();
 }
 
+/**
+ * Handles an error by storing the message and redirecting to the error page.
+ * @param {string} message - The error message to display.
+ * @param {number|string} [code=404] - The error code to display.
+ */
 function handleErrorAndRedirect(message, code = 404) {
   localStorage.setItem("streamit_error", message);
   const safeCode = (typeof code === "number" || typeof code === "string") ? code : 404;
@@ -39,6 +44,9 @@ document.addEventListener("keydown", (e) => {
   }
 });
 
+/**
+ * Detects if developer tools are open and redirects if so.
+ */
 (function detectDevTools() {
   const start = Date.now();
   debugger;

js/main.js

@@ -33,12 +33,23 @@ document.addEventListener('DOMContentLoaded', async () => {
     hideLoader();
 });
 
+/**
+ * Sets navigation link colors to default (removes highlight).
+ * @param {HTMLElement} navHome - Navigation link elements
+ * @param {HTMLElement} navSeries - Navigation link elements
+ * @param {HTMLElement} navFilms - Navigation link elements
+ * @param {HTMLElement} navCollections - Navigation link elements
+ */
 function textWhite(navHome, navSeries, navFilms, navCollections) {
     [navHome, navSeries, navFilms, navCollections].forEach(el => {
         if (el) el.classList.remove('text-white', 'text-red-500');
     });
 }
 
+/**
+ * Routes to the specified view and updates the UI accordingly.
+ * @param {string} view - The view to route to ('home', 'series', 'films', 'collections').
+ */
 function router(view) {
     currentView = view;
 
@@ -106,7 +117,9 @@ function router(view) {
     }
 }
 
-
+/**
+ * Initializes the hero section with a featured item or the latest item.
+ */
 function initHero() {
     const all = [...Object.values(appData.films), ...Object.values(appData.series)];
     if (all.length === 0) return;
@@ -121,6 +134,9 @@ function initHero() {
     }
 }
 
+/**
+ * Populates filter dropdowns based on available data.
+ */
 function populateFilters() {
     const source = currentView === 'films' ? Object.values(appData.films) : Object.values(appData.series);
     const genres = new Set();
@@ -147,6 +163,9 @@ function populateFilters() {
     Array.from(directors).sort().forEach(d => directorSel.add(new Option(d, d)));
 }
 
+/**
+ * Applies selected filters and sorting to the displayed items.
+ */
 function applyFilters() {
     const genre = document.getElementById('filterGenre').value;
     const year = document.getElementById('filterYear').value;
@@ -179,6 +198,9 @@ function applyFilters() {
     renderGrid(filtered);
 }
 
+/**
+ * Resets all filters to default values and reapplies them.
+ */
 function resetFilters() {
     document.getElementById('filterGenre').value = "";
     document.getElementById('filterYear').value = "";
@@ -188,6 +210,10 @@ function resetFilters() {
     applyFilters();
 }
 
+/**
+ * Handles search input and updates the displayed content accordingly.
+ * @param {Event} e - The input event.
+ */
 function handleSearch(e) {
     const q = e.target.value.toLowerCase();
 
@@ -224,7 +250,6 @@ function handleSearch(e) {
     const navSeries = document.getElementById('nav-series');
     const navFilms = document.getElementById('nav-films');
     const navCollections = document.getElementById('nav-collections');
-    
     textWhite(navHome, navSeries, navFilms, navCollections);
 
     const titleEl = document.getElementById('titleText');
@@ -240,6 +265,9 @@ function handleSearch(e) {
     renderGrid(res);
 }
 
+/**
+ * Clears search input fields.
+ */
 function clearSearch() {
     document.getElementById('searchInput').value = '';
     document.getElementById('mobileSearchInput').value = '';

js/utils.js

@@ -1,10 +1,20 @@
 const PROGRESS_PREFIX = 'streamit:progress:';
 let currentVideoSrc = '';
 
+/**
+ * Generates a unique key for storing video progress in localStorage.
+ * @param {string} src - The video source URL.
+ * @returns {string} The generated storage key.
+ */
 function progressKey(src) {
     return `${PROGRESS_PREFIX}${src}`;
 }
 
+/**
+ * Restores video playback progress from localStorage.
+ * @param {HTMLVideoElement} player - The video player element.
+ * @param {string} src - The video source URL.
+ */
 function restoreProgress(player, src) {
     const saved = parseFloat(localStorage.getItem(progressKey(src)) || '');
     if (Number.isNaN(saved)) return;
@@ -19,6 +29,10 @@ function restoreProgress(player, src) {
     else player.addEventListener('loadedmetadata', applyTime);
 }
 
+/**
+ * Persists video playback progress to localStorage.
+ * @param {HTMLVideoElement} player - The video player element.
+ */
 function persistProgress(player) {
     if (!currentVideoSrc) return;
     const key = progressKey(currentVideoSrc);
@@ -29,6 +43,10 @@ function persistProgress(player) {
     else localStorage.setItem(key, String(t));
 }
 
+/**
+ * Plays a video in the overlay player.
+ * @param {string} src - The video source URL.
+ */
 export function playVideo(src) {
     const overlay = document.getElementById('videoOverlay');
     const player = document.getElementById('mainPlayer');
@@ -48,6 +66,9 @@ export function playVideo(src) {
     }, 50);
 }
 
+/**
+ * Closes the video overlay and stops playback.
+ */
 export function closeVideo() {
     const overlay = document.getElementById('videoOverlay');
     const player = document.getElementById('mainPlayer');
@@ -57,11 +78,17 @@ export function closeVideo() {
     overlay.classList.add('hidden');
 }
 
+/**
+ * Toggles the notifications dropdown visibility.
+ */
 export function toggleNotifs() {
     const dropdown = document.getElementById('notifDropdown');
     dropdown.classList.toggle('active');
 }
 
+/**
+ * Toggles the mobile menu visibility.
+ */
 export function toggleMobileMenu() {
     const menu = document.getElementById('mobileMenuPanel');
     const search = document.getElementById('mobileSearchPanel');
@@ -73,6 +100,9 @@ export function toggleMobileMenu() {
     menu.classList.toggle('active');
 }
 
+/**
+ * Toggles the mobile search panel visibility.
+ */
 export function toggleMobileSearch() {
     const search = document.getElementById('mobileSearchPanel');
     const menu = document.getElementById('mobileMenuPanel');
@@ -88,17 +118,26 @@ export function toggleMobileSearch() {
     }
 }
 
+/**
+ * Shows the loading spinner.
+ */
 export function showLoader() {
     document.getElementById('loader').classList.remove('hidden');
     document.getElementById('loader').style.opacity = '1';
 }
 
+/**
+ * Hides the loading spinner with a fade-out effect.
+ */
 export function hideLoader() {
     const loader = document.getElementById('loader');
     loader.style.opacity = '0';
     setTimeout(() => loader.classList.add('hidden'), 700);
 }
 
+/**
+ * Enhances video player controls to prevent downloading and remote playback.
+ */
 export function hardenPlayerControls() {
     const player = document.getElementById('mainPlayer');
     if (!player) return;
@@ -109,6 +148,9 @@ export function hardenPlayerControls() {
     player.addEventListener('contextmenu', (e) => e.preventDefault());
 }
 
+/**
+ * Initializes video player progress persistence.
+ */
 export function initPlayerPersistence() {
     const player = document.getElementById('mainPlayer');
     if (!player) return;