Skip to content

Commit 7d6bee6

Browse files
LoupesDEVLoupesDEV
committed
⏪️ added back collections
1 parent a737027 commit 7d6bee6

5 files changed

Lines changed: 109 additions & 21 deletions

File tree

‎data/collections.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -261,5 +261,13 @@
261261
"Top Gun : Maverick"
262262
],
263263
"series": []
264+
},
265+
"Avatar": {
266+
"name": "Avatar",
267+
"films": [
268+
"Avatar",
269+
"Avatar : La Voie de l'eau"
270+
],
271+
"series": []
264272
}
265273
}

‎index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@
5555
id="nav-films">Films</button>
5656
<button onclick="router('series')" class="hover:text-white transition-colors"
5757
id="nav-series">Séries</button>
58+
<button onclick="router('collections')" class="hover:text-white transition-colors"
59+
id="nav-collections">Collections</button>
5860
</div>
5961
</div>
6062

@@ -107,6 +109,8 @@ <h4 class="font-bold text-sm text-gray-200">Notifications</h4>
107109
class="text-2xl font-bold text-gray-300 hover:text-white hover:pl-4 transition-all">Films</button>
108110
<button onclick="router('series')"
109111
class="text-2xl font-bold text-gray-300 hover:text-white hover:pl-4 transition-all">Séries</button>
112+
<button onclick="router('collections')"
113+
class="text-2xl font-bold text-gray-300 hover:text-white hover:pl-4 transition-all">Collections</button>
110114
</div>
111115
</nav>
112116

@@ -233,6 +237,8 @@ <h2 class="text-2xl font-bold mb-6 flex items-center gap-3">
233237
</section>
234238
</div>
235239

240+
<div id="collectionsContent" class="container mx-auto px-6 mt-12 space-y-20 hidden animate-fade-in-up"></div>
241+
236242
<div id="genericGridContainer" class="container mx-auto px-6 mt-8 hidden animate-fade-in-up">
237243
<h2 id="sectionTitle" class="text-2xl font-bold mb-8 flex items-center gap-3">
238244
<span class="w-1 h-8 bg-red-600 rounded-full shadow-[0_0_15px_#dc2626]"></span>

‎js/dataLoader.js‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,28 @@ export async function fetchAllData() {
22
try {
33
await new Promise(r => setTimeout(r, 800));
44

5-
const [filmsRes, seriesRes] = await Promise.all([
5+
const [filmsRes, seriesRes, collectionsRes] = await Promise.all([
66
fetch('data/films.json'),
7-
fetch('data/series.json')
7+
fetch('data/series.json'),
8+
fetch('data/collections.json')
89
]);
910

10-
if (!filmsRes.ok || !seriesRes.ok) throw new Error("Erreur de chargement des fichiers JSON");
11+
if (!filmsRes.ok || !seriesRes.ok) throw new Error("Erreur de chargement des fichiers JSON (Films/Séries)");
1112

1213
const films = await filmsRes.json();
1314
const series = await seriesRes.json();
1415

15-
return { films, series };
16+
let collections = {};
17+
if (collectionsRes.ok) {
18+
collections = await collectionsRes.json();
19+
} else {
20+
console.warn("Fichier collections.json non trouvé ou vide.");
21+
}
22+
23+
return { films, series, collections };
1624
} catch (error) {
1725
console.error("Erreur Data Loader:", error);
18-
return { films: {}, series: {} };
26+
return { films: {}, series: {}, collections: {} };
1927
}
2028
}
2129

‎js/display.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,64 @@ export function renderHorizontalRow(containerId, items) {
251251
});
252252
}
253253

254+
export function renderCollections(collectionsData, appData) {
255+
const container = document.getElementById('collectionsContent');
256+
container.innerHTML = '';
257+
258+
if (Object.keys(collectionsData).length === 0) {
259+
container.innerHTML = '<div class="text-center text-gray-500 py-10">Aucune collection disponible.</div>';
260+
return;
261+
}
262+
263+
const sortedCollections = Object.entries(collectionsData).sort(([, a], [, b]) => {
264+
return a.name.localeCompare(b.name);
265+
});
266+
267+
for (const [key, collection] of sortedCollections) {
268+
const items = [];
269+
270+
if (collection.films && Array.isArray(collection.films)) {
271+
collection.films.forEach(title => {
272+
const foundFilm = Object.values(appData.films).find(f => f.title === title);
273+
if (foundFilm) items.push(foundFilm);
274+
});
275+
}
276+
277+
if (collection.series && Array.isArray(collection.series)) {
278+
collection.series.forEach(title => {
279+
const foundSerie = Object.values(appData.series).find(s => s.title === title);
280+
if (foundSerie) items.push(foundSerie);
281+
});
282+
}
283+
284+
if (items.length > 0) {
285+
items.sort((a, b) => a.year - b.year);
286+
287+
const section = document.createElement('section');
288+
section.className = "animate-fade-in-up";
289+
290+
const titleHTML = `
291+
<h2 class="text-2xl font-bold mb-6 flex items-center gap-3">
292+
<span class="w-1.5 h-8 bg-red-600 rounded-full shadow-[0_0_15px_#dc2626]"></span>
293+
<span class="tracking-tight">${collection.name}</span>
294+
</h2>
295+
`;
296+
section.innerHTML = titleHTML;
297+
298+
const rowDiv = document.createElement('div');
299+
rowDiv.className = "flex gap-6 overflow-x-auto pb-8 hide-scrollbar scroll-smooth snap-x pl-1";
300+
301+
items.forEach(item => {
302+
const card = createMediaCard(item, "min-w-[200px] md:min-w-[280px] aspect-[2/3] snap-start");
303+
rowDiv.appendChild(card);
304+
});
305+
306+
section.appendChild(rowDiv);
307+
container.appendChild(section);
308+
}
309+
}
310+
}
311+
254312
export function renderNotifs(list) {
255313
const container = document.getElementById('notifList');
256314
const badge = document.getElementById('notifBadge');

‎js/main.js‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { fetchAllData, fetchNotifs } from './dataLoader.js';
2-
import { setupHero, renderHorizontalRow, renderGrid, renderNotifs, openDetails, closeDetails, playCurrentMedia } from './display.js';
3-
import { playVideo, closeVideo, toggleNotifs, toggleMobileMenu, toggleMobileSearch, showLoader, hideLoader, hardenPlayerControls, initPlayerPersistence } from './utils.js';
2+
import { setupHero, renderHorizontalRow, renderGrid, renderNotifs, openDetails, closeDetails, playCurrentMedia, renderCollections } from './display.js';
3+
import { playVideo, closeVideo, toggleNotifs, toggleMobileMenu, toggleMobileSearch, showLoader, hideLoader } from './utils.js';
44

5-
let appData = { films: {}, series: {} };
5+
let appData = { films: {}, series: {}, collections: {} };
66
let currentView = 'home';
77

88
window.router = router;
@@ -17,9 +17,6 @@ window.toggleMobileMenu = toggleMobileMenu;
1717
document.addEventListener('DOMContentLoaded', async () => {
1818
showLoader();
1919

20-
hardenPlayerControls();
21-
initPlayerPersistence();
22-
2320
document.getElementById('mobileMenuBtn').addEventListener('click', toggleMobileMenu);
2421
document.getElementById('mobileSearchBtn').addEventListener('click', toggleMobileSearch);
2522

@@ -45,26 +42,32 @@ function router(view) {
4542
const hero = document.getElementById('heroSection');
4643
const filters = document.getElementById('filterSection');
4744
const homeContent = document.getElementById('homePageContent');
45+
const collectionsContent = document.getElementById('collectionsContent');
4846
const genericGrid = document.getElementById('genericGridContainer');
4947
const title = document.getElementById('titleText');
5048
const navHome = document.getElementById('nav-home');
5149
const navSeries = document.getElementById('nav-series');
5250
const navFilms = document.getElementById('nav-films');
51+
const navCollections = document.getElementById('nav-collections');
52+
53+
[navHome, navSeries, navFilms, navCollections].forEach(el => {
54+
if (el) el.classList.remove('text-white', 'text-red-500');
55+
});
5356

54-
[navHome, navSeries, navFilms].forEach(el => el.classList.remove('text-white', 'text-red-500'));
5557
window.scrollTo({ top: 0, behavior: 'smooth' });
5658

5759
hero.classList.add('hidden');
5860
filters.classList.add('hidden');
5961
homeContent.classList.add('hidden');
62+
collectionsContent.classList.add('hidden');
6063
genericGrid.classList.add('hidden');
6164
document.getElementById('contentGrid').innerHTML = '';
6265

6366
const allFilms = Object.values(appData.films);
6467
const allSeries = Object.values(appData.series);
6568

6669
if (view === 'home') {
67-
navHome.classList.add('text-white');
70+
if (navHome) navHome.classList.add('text-white');
6871
hero.classList.remove('hidden');
6972
homeContent.classList.remove('hidden');
7073

@@ -75,23 +78,29 @@ function router(view) {
7578
renderHorizontalRow('homeSeriesRow', latestSeries);
7679
}
7780
else if (view === 'series') {
78-
navSeries.classList.add('text-white');
81+
if (navSeries) navSeries.classList.add('text-white');
7982
filters.classList.remove('hidden');
8083
genericGrid.classList.remove('hidden');
8184
title.innerText = "Toutes les Séries TV";
8285
populateFilters();
8386
applyFilters();
8487
}
8588
else if (view === 'films') {
86-
navFilms.classList.add('text-white');
89+
if (navFilms) navFilms.classList.add('text-white');
8790
filters.classList.remove('hidden');
8891
genericGrid.classList.remove('hidden');
8992
title.innerText = "Tous les Films";
9093
populateFilters();
9194
applyFilters();
9295
}
96+
else if (view === 'collections') {
97+
if (navCollections) navCollections.classList.add('text-white');
98+
collectionsContent.classList.remove('hidden');
99+
renderCollections(appData.collections, appData);
100+
}
93101
}
94102

103+
95104
function initHero() {
96105
const all = [...Object.values(appData.films), ...Object.values(appData.series)];
97106
if (all.length === 0) return;
@@ -182,11 +191,14 @@ function handleSearch(e) {
182191
const hero = document.getElementById('heroSection');
183192
const filters = document.getElementById('filterSection');
184193
const homeContent = document.getElementById('homePageContent');
194+
const collectionsContent = document.getElementById('collectionsContent');
185195
const genericGrid = document.getElementById('genericGridContainer');
186196

187197
if (!q) {
188198
if (currentView === 'home') {
189199
hero.classList.remove('hidden'); homeContent.classList.remove('hidden'); genericGrid.classList.add('hidden');
200+
} else if (currentView === 'collections') {
201+
collectionsContent.classList.remove('hidden'); genericGrid.classList.add('hidden');
190202
} else {
191203
filters.classList.remove('hidden'); applyFilters();
192204
}
@@ -196,17 +208,13 @@ function handleSearch(e) {
196208
hero.classList.add('hidden');
197209
filters.classList.add('hidden');
198210
homeContent.classList.add('hidden');
211+
collectionsContent.classList.add('hidden');
199212
genericGrid.classList.remove('hidden');
200213

201214
const all = [...Object.values(appData.films), ...Object.values(appData.series)];
202215
const res = all.filter(i => i.title.toLowerCase().includes(q));
203216

204-
const sectionTitleEl = document.getElementById('sectionTitle');
205-
sectionTitleEl.textContent = `Résultats pour "${q}" `;
206-
const countSpan = document.createElement('span');
207-
countSpan.className = 'text-gray-500 text-sm ml-2';
208-
countSpan.textContent = `(${res.length})`;
209-
sectionTitleEl.appendChild(countSpan);
217+
document.getElementById('sectionTitle').innerHTML = `Résultats pour "${q}" <span class="text-gray-500 text-sm ml-2">(${res.length})</span>`;
210218
renderGrid(res);
211219
}
212220

0 commit comments

Comments
 (0)