Premier import de mon site Mon Cinéma
This commit is contained in:
+265
@@ -0,0 +1,265 @@
|
||||
const STORAGE_KEY = 'mon-cinema-films';
|
||||
let films = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
|
||||
let currentPubTab = 'critique';
|
||||
let activeRatingFilter = 0; // 0 = tous
|
||||
|
||||
function switchPubTab(tabName) {
|
||||
currentPubTab = tabName;
|
||||
activeRatingFilter = 0;
|
||||
document.querySelectorAll('.rating-filter-btn').forEach(btn => {
|
||||
btn.classList.remove('active');
|
||||
btn.querySelectorAll('.rf-star').forEach(s => s.classList.remove('filled'));
|
||||
});
|
||||
|
||||
const tabCritiques = document.getElementById('tab-pub-critiques');
|
||||
const tabVideotheque = document.getElementById('tab-pub-videotheque');
|
||||
|
||||
if (tabCritiques && tabVideotheque) {
|
||||
if (tabName === 'critique') {
|
||||
tabCritiques.classList.add('active');
|
||||
tabVideotheque.classList.remove('active');
|
||||
} else {
|
||||
tabVideotheque.classList.add('active');
|
||||
tabCritiques.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
renderPublicGrid();
|
||||
}
|
||||
|
||||
function filterByRating(stars) {
|
||||
activeRatingFilter = (activeRatingFilter === stars) ? 0 : stars;
|
||||
|
||||
// Update button states
|
||||
document.querySelectorAll('.rating-filter-btn').forEach(btn => {
|
||||
const n = parseInt(btn.dataset.stars);
|
||||
btn.classList.toggle('active', n === activeRatingFilter);
|
||||
// Highlight filled stars up to active filter
|
||||
btn.querySelectorAll('.rf-star').forEach((s, i) => {
|
||||
s.classList.toggle('filled', activeRatingFilter > 0 && i < activeRatingFilter);
|
||||
});
|
||||
});
|
||||
|
||||
renderPublicGrid();
|
||||
}
|
||||
|
||||
function renderPublicGrid() {
|
||||
const grid = document.getElementById('grid');
|
||||
const emptyState = document.getElementById('empty-state');
|
||||
const countLabel = document.getElementById('count-label');
|
||||
|
||||
if (!grid) return;
|
||||
|
||||
// Show rating filter only on critique tab
|
||||
const filterBar = document.getElementById('rating-filter-bar');
|
||||
if (filterBar) filterBar.style.display = currentPubTab === 'critique' ? 'flex' : 'none';
|
||||
|
||||
const filtered = films.filter(f => {
|
||||
const fType = f.type || 'critique';
|
||||
if (fType !== currentPubTab) return false;
|
||||
if (currentPubTab === 'critique' && activeRatingFilter > 0) {
|
||||
return (f.rating || f.note || 1) === activeRatingFilter;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
if (countLabel) {
|
||||
if (currentPubTab === 'critique') {
|
||||
const suffix = activeRatingFilter > 0 ? ` · filtrées ${activeRatingFilter}★` : '';
|
||||
countLabel.textContent = filtered.length + (filtered.length > 1 ? ' critiques' : ' critique') + suffix;
|
||||
} else {
|
||||
countLabel.textContent = filtered.length + (filtered.length > 1 ? ' films physiques' : ' film physique');
|
||||
}
|
||||
}
|
||||
|
||||
if (filtered.length === 0) {
|
||||
grid.innerHTML = '';
|
||||
if (emptyState) {
|
||||
emptyState.style.display = 'block';
|
||||
emptyState.querySelector('p').textContent = currentPubTab === 'critique'
|
||||
? "Aucune critique pour l'instant."
|
||||
: "Aucun film dans la vidéothèque pour l'instant.";
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (emptyState) emptyState.style.display = 'none';
|
||||
|
||||
grid.innerHTML = filtered.map(f => {
|
||||
const posterUrl = f.poster || f.image || f.affiche || '';
|
||||
const movieTitle = f.title || f.titre || 'Sans titre';
|
||||
const movieYear = f.year || f.annee || f.publish_date || '—';
|
||||
const movieDirector = f.director || f.creators || f.realisateur || '—';
|
||||
|
||||
const posterHtml = posterUrl
|
||||
? `<img src="${posterUrl}" alt="Affiche ${movieTitle}" class="card-poster">`
|
||||
: `<div class="card-poster-placeholder">
|
||||
<i class="ti ti-movie"></i>
|
||||
<span>${movieTitle}</span>
|
||||
</div>`;
|
||||
|
||||
let footerInfoHtml = '';
|
||||
if (currentPubTab === 'critique') {
|
||||
const rating = f.rating || f.note || 1;
|
||||
footerInfoHtml = `<div class="card-stars">${"★".repeat(rating)}<span class="stars-muted">${"☆".repeat(5 - rating)}</span></div>`;
|
||||
} else {
|
||||
const format = (f.format || f.support || 'DVD').toUpperCase().replace('_4K', ' 4K');
|
||||
const length = f.length || f.duree || '';
|
||||
footerInfoHtml = `
|
||||
<div class="card-video-footer">
|
||||
<span class="badge-format">${format}</span>
|
||||
${length ? `<span class="video-length"><i class="ti ti-clock"></i> ${length} min</span>` : ''}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="card" onclick="openDetail(${f.id})">
|
||||
<div class="card-poster-wrap">
|
||||
${posterHtml}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">${movieTitle}</h3>
|
||||
<div class="card-meta">${movieYear.toString().substring(0,4)} · ${movieDirector}</div>
|
||||
${footerInfoHtml}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function openDetail(id) {
|
||||
const f = films.find(x => x.id === id);
|
||||
if (!f) return;
|
||||
|
||||
const detailOverlay = document.getElementById('detail-overlay');
|
||||
const modalLayout = document.getElementById('detail-modal-layout');
|
||||
const dPoster = document.getElementById('d-poster');
|
||||
const dPosterWrap = document.getElementById('d-poster-wrap');
|
||||
const dTitle = document.getElementById('d-title');
|
||||
const dMeta = document.getElementById('d-meta');
|
||||
const dStars = document.getElementById('d-stars');
|
||||
const dReview = document.getElementById('d-review');
|
||||
|
||||
const movieTitle = f.title || f.titre || 'Sans titre';
|
||||
const movieYear = f.year || f.annee || f.publish_date || '—';
|
||||
const movieDirector = f.director || f.creators || f.realisateur || '—';
|
||||
const posterUrl = f.poster || f.image || f.affiche || '';
|
||||
|
||||
if (dTitle) dTitle.textContent = movieTitle;
|
||||
if (dMeta) dMeta.textContent = [movieYear.toString().substring(0,4), movieDirector].filter(Boolean).join(' · ');
|
||||
|
||||
const fType = f.type || 'critique';
|
||||
|
||||
// Gestion de l'affichage de la colonne image
|
||||
if (posterUrl) {
|
||||
if (dPoster) { dPoster.src = posterUrl; dPoster.style.display = 'block'; }
|
||||
if (dPosterWrap) {
|
||||
dPosterWrap.style.display = 'block';
|
||||
dPosterWrap.classList.remove('poster-critique', 'poster-video');
|
||||
dPosterWrap.classList.add(fType === 'critique' ? 'poster-critique' : 'poster-video');
|
||||
}
|
||||
if (modalLayout) modalLayout.classList.remove('no-poster');
|
||||
} else {
|
||||
if (dPoster) dPoster.style.display = 'none';
|
||||
if (dPosterWrap) dPosterWrap.style.display = 'none';
|
||||
if (modalLayout) modalLayout.classList.add('no-poster');
|
||||
}
|
||||
|
||||
// Préparation du badge de visionnage/streaming (commun aux deux types de fiches)
|
||||
const streamingInfo = f.streaming || "Disponible au cinéma ou support physique";
|
||||
const isPlatform = streamingInfo !== "Disponible au cinéma ou support physique";
|
||||
const streamIcon = isPlatform ? "ti-device-tv" : "ti-movie";
|
||||
|
||||
const streamingBadgeHtml = `
|
||||
<div style="margin-bottom: 1.2rem; display: inline-flex; align-items: center; gap: 0.5rem; background: ${isPlatform ? 'rgba(201, 168, 76, 0.1)' : 'rgba(255,255,255,0.03)'}; border: 1px solid ${isPlatform ? 'var(--gold)' : 'var(--border)'}; padding: 0.4rem 0.8rem; border-radius: 6px; font-size: 0.85rem; color: ${isPlatform ? 'var(--gold)' : '#c0c0cc'}; font-weight: 500;">
|
||||
<i class="ti ${streamIcon}" style="font-size: 1.1rem;"></i>
|
||||
<span>${streamingInfo}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
if (fType === 'critique') {
|
||||
// ----------------------------------------
|
||||
// POP-UP MODE : CRITIQUE JOURNAL
|
||||
// ----------------------------------------
|
||||
if (dStars) {
|
||||
dStars.style.display = 'block';
|
||||
const rating = f.rating || f.note || 1;
|
||||
dStars.innerHTML = "★".repeat(rating) + `<span class="stars-muted">${"☆".repeat(5 - rating)}</span>`;
|
||||
}
|
||||
|
||||
if (dReview) {
|
||||
const reviewText = f.review || f.critique || "Aucune critique rédigée pour ce film.";
|
||||
|
||||
dReview.innerHTML = `
|
||||
${streamingBadgeHtml}
|
||||
|
||||
<div class="pub-review-card">
|
||||
<div class="pub-review-quote-icon"><i class="ti ti-quote"></i></div>
|
||||
<p class="pub-review-text">${reviewText}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
} else {
|
||||
// ----------------------------------------
|
||||
// POP-UP MODE : VIDEOTHEQUE PREMIUM
|
||||
// ----------------------------------------
|
||||
if (dStars) dStars.style.display = 'none';
|
||||
|
||||
const format = (f.format || f.support || 'DVD').toUpperCase().replace('_4K', ' 4K');
|
||||
const publisher = f.publisher || f.editeur || '';
|
||||
const length = f.length || f.duree || '';
|
||||
const discs = f.number_of_discs || f.disques || f.nb_disques || '';
|
||||
const ratio = f.aspect_ratio || f.format_image || '';
|
||||
const ean = f.ean_isbn13 || f.ean || '';
|
||||
const description = f.description || f.synopsis || "Aucun synopsis disponible dans le catalogue.";
|
||||
|
||||
if (dReview) {
|
||||
dReview.innerHTML = `
|
||||
${streamingBadgeHtml}
|
||||
|
||||
<div class="pub-tech-badges">
|
||||
<span class="tech-pill format-gold"><i class="ti ti-disc"></i> ${format}</span>
|
||||
${length ? `<span class="tech-pill"><i class="ti ti-clock"></i> ${length} Min</span>` : ''}
|
||||
${discs ? `<span class="tech-pill"><i class="ti ti-layers-intersect"></i> ${discs} ${discs > 1 ? 'Disques' : 'Disque'}</span>` : ''}
|
||||
</div>
|
||||
|
||||
<div class="pub-tech-grid">
|
||||
${publisher ? `
|
||||
<div class="tech-meta-item">
|
||||
<span class="tech-meta-label">Éditeur / Studio</span>
|
||||
<span class="tech-meta-value">${publisher}</span>
|
||||
</div>` : ''}
|
||||
|
||||
${ratio ? `
|
||||
<div class="tech-meta-item">
|
||||
<span class="tech-meta-label">Format d'image</span>
|
||||
<span class="tech-meta-value" style="font-family: monospace;">${ratio}</span>
|
||||
</div>` : ''}
|
||||
|
||||
${ean ? `
|
||||
<div class="tech-meta-item" style="grid-column: span 2;">
|
||||
<span class="tech-meta-label">Code-barres (EAN)</span>
|
||||
<span class="tech-meta-value" style="font-family: monospace; color: var(--muted);">${ean}</span>
|
||||
</div>` : ''}
|
||||
</div>
|
||||
|
||||
<div class="pub-synopsis-box">
|
||||
<h4>Synopsis</h4>
|
||||
<p>${description}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
if (detailOverlay) detailOverlay.classList.add('open');
|
||||
}
|
||||
function closeDetail() {
|
||||
const detailOverlay = document.getElementById('detail-overlay');
|
||||
if (detailOverlay) {
|
||||
detailOverlay.classList.remove('open');
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
renderPublicGrid();
|
||||
});
|
||||
Reference in New Issue
Block a user