✨ added new collection handling and rendering logic

Author: LoupesDEV

js/display.js

@@ -432,9 +432,10 @@ 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.
+ * @param {boolean} [showStatusBadges=true] - Whether to display watch/resume badges.
  * @returns {HTMLElement} The created media card element.
  */
-export function createMediaCard(item, extraClasses = "") {
+export function createMediaCard(item, extraClasses = "", showStatusBadges = true) {
     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}`;
 
@@ -472,7 +473,9 @@ export function createMediaCard(item, extraClasses = "") {
     // Generate status badges HTML (watched/resume)
     const watchedBadge = watched ? '<span class="watched-pill"><i class="fas fa-eye text-xs"></i> Vu</span>' : '';
     const resumeBadge = !watched && hasResume ? '<span class="resume-pill">Reprendre</span>' : '';
-    const badgeStack = watchedBadge || resumeBadge ? `<div class="status-badges">${watchedBadge}${resumeBadge}</div>` : '';
+    const badgeStack = showStatusBadges && (watchedBadge || resumeBadge)
+        ? `<div class="status-badges">${watchedBadge}${resumeBadge}</div>`
+        : '';
 
     // Build media card HTML structure
     card.innerHTML = `
@@ -493,11 +496,14 @@ export function createMediaCard(item, extraClasses = "") {
 /**
  * Renders a grid of media items.
  * @param {Array} items - The list of media items to render.
+ * @param {Object} [options={}] - Optional rendering options.
+ * @param {boolean} [options.showStatusBadges=true] - Whether to display watch/resume badges.
  */
-export function renderGrid(items) {
+export function renderGrid(items, options = {}) {
     const grid = document.getElementById('contentGrid');
     grid.innerHTML = '';
-    items.forEach(item => grid.appendChild(createMediaCard(item, "aspect-[2/3]")));
+    const { showStatusBadges = true } = options;
+    items.forEach(item => grid.appendChild(createMediaCard(item, "aspect-[2/3]", showStatusBadges)));
 }
 
 /**
@@ -535,6 +541,18 @@ export function renderCollections(collectionsData, appData) {
         return a.name.localeCompare(b.name);
     });
 
+    const slugifyCollection = (text) => String(text || '')
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/(^-|-$)/g, '');
+
+    const grid = document.createElement('div');
+    grid.className = "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6 gap-y-10";
+
+    let hasRenderableCollection = false;
+
     for (const [key, collection] of sortedCollections) {
         const items = [];
 
@@ -558,29 +576,44 @@ export function renderCollections(collectionsData, appData) {
         if (items.length > 0) {
             items.sort((a, b) => a.year - b.year);
 
-            const section = document.createElement('section');
-            section.className = "animate-fade-in-up";
+            const firstFilmTitle = Array.isArray(collection.films) && collection.films.length > 0
+                ? collection.films[0]
+                : null;
+            const firstFilmItem = firstFilmTitle
+                ? Object.values(appData.films).find(f => f.title === firstFilmTitle)
+                : null;
 
-            const titleHTML = `
-                <h2 class="text-2xl font-bold mb-6 flex items-center gap-3">
-                    <span class="w-1.5 h-8 bg-red-600 rounded-full shadow-[0_0_15px_#dc2626]"></span>
-                    <span class="tracking-tight">${collection.name}</span>
-                </h2>
-            `;
-            section.innerHTML = titleHTML;
+            const previewItem = firstFilmItem || items[0];
+            const collectionSlug = slugifyCollection(collection.name || key);
 
-            const rowDiv = document.createElement('div');
-            rowDiv.className = "scroll-row flex gap-6 overflow-x-auto pb-8 hide-scrollbar scroll-smooth snap-x pl-1";
+            hasRenderableCollection = true;
 
-            items.forEach(item => {
-                const card = createMediaCard(item, "min-w-[200px] md:min-w-[280px] aspect-[2/3] snap-start");
-                rowDiv.appendChild(card);
-            });
+            const previewWrapper = document.createElement('div');
+            previewWrapper.className = "space-y-3 animate-fade-in-up";
+
+            const previewCard = createMediaCard(previewItem, "w-[200px] md:w-[280px] aspect-[2/3]", false);
 
-            section.appendChild(rowDiv);
-            container.appendChild(section);
+            previewCard.onclick = () => {
+                if (typeof window !== 'undefined' && typeof window.router === 'function') {
+                    window.router('collections', { detail: { type: 'collections', slug: collectionSlug }, pushState: true });
+                }
+            };
+
+            const collectionTitle = document.createElement('h3');
+            collectionTitle.className = "font-bold text-white text-base md:text-lg tracking-tight line-clamp-1";
+            collectionTitle.textContent = collection.name;
+
+            previewWrapper.appendChild(collectionTitle);
+            previewWrapper.appendChild(previewCard);
+            grid.appendChild(previewWrapper);
         }
     }
+
+    if (hasRenderableCollection) {
+        container.appendChild(grid);
+    } else {
+        container.innerHTML = '<div class="text-center text-gray-500 py-10">Aucune collection disponible.</div>';
+    }
 }
 
 /**

js/main.js

@@ -186,6 +186,50 @@ function findActorBySlug(slug) {
     return actors.find(actor => slugify(actor.name) === slug) || null;
 }
 
+/**
+ * Finds a collection by slug.
+ * @param {string} slug - Collection slug.
+ * @returns {Object|null} Collection object or null.
+ */
+function findCollectionBySlug(slug) {
+    if (!slug) return null;
+    const entries = Object.entries(appData.collections || {});
+    for (const [key, collection] of entries) {
+        const keySlug = slugify(key);
+        const nameSlug = slugify(collection?.name || '');
+        if (slug === keySlug || slug === nameSlug) {
+            return collection;
+        }
+    }
+    return null;
+}
+
+/**
+ * Builds media items array for a collection.
+ * @param {Object} collection - Collection object.
+ * @returns {Array} Ordered media items.
+ */
+function getCollectionItems(collection) {
+    const items = [];
+    if (!collection) return items;
+
+    if (Array.isArray(collection.films)) {
+        collection.films.forEach(title => {
+            const foundFilm = Object.values(appData.films).find(f => f.title === title);
+            if (foundFilm) items.push(foundFilm);
+        });
+    }
+
+    if (Array.isArray(collection.series)) {
+        collection.series.forEach(title => {
+            const foundSerie = Object.values(appData.series).find(s => s.title === title);
+            if (foundSerie) items.push(foundSerie);
+        });
+    }
+
+    return items;
+}
+
 /**
  * Updates the URL path for the current view and optional detail.
  * @param {string} view - Base view.
@@ -300,6 +344,10 @@ function router(view, options = {}) {
     const navFilms = document.getElementById('nav-films');
     const navCollections = document.getElementById('nav-collections');
     const navActors = document.getElementById('nav-actors');
+    const sectionTitle = document.getElementById('sectionTitle');
+
+    const existingBackBtn = document.getElementById('collectionBackBtn');
+    if (existingBackBtn) existingBackBtn.remove();
 
     // Reset all navigation link styles
     textWhite(navHome, navSeries, navFilms, navCollections, navActors);
@@ -355,12 +403,31 @@ function router(view, options = {}) {
         applyFilters();
     }
     else if (safeView === 'collections') {
-        // Show collections view
+        // Show collections list or a selected collection detail view
         if (navCollections) navCollections.classList.add('text-white');
-        collectionsContent.classList.remove('hidden');
-        renderCollections(appData.collections, appData);
+        const selectedCollection = detail && detail.type === 'collections'
+            ? (detail.collection || findCollectionBySlug(detail.slug))
+            : null;
+
+        if (selectedCollection) {
+            genericGrid.classList.remove('hidden');
+            title.innerText = selectedCollection.name || 'Collection';
+
+            if (sectionTitle) {
+                const backBtn = document.createElement('button');
+                backBtn.id = 'collectionBackBtn';
+                backBtn.className = 'ml-auto text-sm font-bold text-gray-300 hover:text-white transition-colors flex items-center gap-2';
+                backBtn.innerHTML = '<i class="fas fa-arrow-left text-xs"></i><span>Retour aux collections</span>';
+                backBtn.onclick = () => router('collections');
+                sectionTitle.appendChild(backBtn);
+            }
 
-        enableHorizontalWheelScroll();
+            renderGrid(getCollectionItems(selectedCollection), { showStatusBadges: false });
+        } else {
+            collectionsContent.classList.remove('hidden');
+            renderCollections(appData.collections, appData);
+            enableHorizontalWheelScroll();
+        }
     }
     else if (safeView === 'actors') {
         // Show actors view
@@ -525,7 +592,12 @@ function handleSearch(e) {
         if (currentView === 'home') {
             hero.classList.remove('hidden'); homeContent.classList.remove('hidden'); genericGrid.classList.add('hidden');
         } else if (currentView === 'collections') {
-            collectionsContent.classList.remove('hidden'); genericGrid.classList.add('hidden');
+            const { detail } = parseLocationRoute();
+            if (detail && detail.type === 'collections') {
+                router('collections', { pushState: false, detail });
+            } else {
+                collectionsContent.classList.remove('hidden'); genericGrid.classList.add('hidden');
+            }
         } else if (currentView === 'actors') {
             actorsContent.classList.remove('hidden'); genericGrid.classList.add('hidden');
             renderActorsList(appData.actors, appData.films, appData.series);