Add user movie ratings and refresh movie cards
Store per-user 5-star ratings with averages and surface them in the player. Refresh movie list layout to show ratings and details in a cleaner card layout.
This commit is contained in:
Mathieu Moran
+39
-18
@@ -403,6 +403,15 @@ window.addEventListener('DOMContentLoaded', async function () {
|
||||
const legacyUrl = cleanUrl(movie?.vod_link);
|
||||
const hasLegacy = !!legacyUrl;
|
||||
const movieId = movie && movie._id ? String(movie._id) : '';
|
||||
const userRatingAvg = Number(movie?.user_rating_avg);
|
||||
const userRatingCount = Number(movie?.user_rating_count) || 0;
|
||||
const userRating = Number(movie?.user_rating);
|
||||
const userRatingText =
|
||||
Number.isFinite(userRatingAvg) && userRatingAvg > 0
|
||||
? `${userRatingAvg.toFixed(1)}${userRatingCount ? ` (${userRatingCount})` : ''}`
|
||||
: '';
|
||||
const userRatingOwn =
|
||||
Number.isFinite(userRating) && userRating > 0 ? `${userRating}/5` : '';
|
||||
|
||||
// Navigation:
|
||||
// - Prefer in-app player when we have a non-legacy source
|
||||
@@ -470,26 +479,38 @@ window.addEventListener('DOMContentLoaded', async function () {
|
||||
: `${posterBlock}`
|
||||
}
|
||||
<div class="card-body d-flex flex-column">
|
||||
<div class="d-flex justify-content-between align-items-start gap-2">
|
||||
<h5 class="card-title mb-1 flex-grow-1">
|
||||
${
|
||||
isClickable
|
||||
? `<a href="${playerUrl}" target="_self" rel="noopener noreferrer" class="text-decoration-none text-dark">${movie.title}</a>`
|
||||
: `<span class="text-dark">${movie.title}</span>`
|
||||
}
|
||||
</h5>
|
||||
<div class="text-nowrap small text-muted">
|
||||
⭐ ${movie.rating}
|
||||
<a href="https://www.imdb.com/title/${movie.imdb_id}/" target="_blank" rel="noopener noreferrer" aria-label="Voir sur IMDb">
|
||||
<img src="/img/imdb.png" class="imdb-icon" alt="IMDb">
|
||||
</a>
|
||||
<div class="flex-grow-1">
|
||||
<div class="d-flex justify-content-between align-items-start gap-2">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="card-title mb-1">
|
||||
${
|
||||
isClickable
|
||||
? `<a href="${playerUrl}" target="_self" rel="noopener noreferrer" class="text-decoration-none text-dark">${movie.title}</a>`
|
||||
: `<span class="text-dark">${movie.title}</span>`
|
||||
}
|
||||
</h5>
|
||||
<div class="movie-rating-block mt-1">
|
||||
${userRatingText ? `<div class="movie-rating-sub">Note utilisateurs ${userRatingText}</div>` : ''}
|
||||
${userRatingOwn ? `<div class="movie-rating-sub">Votre note ${userRatingOwn}</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div class="movie-imdb-block">
|
||||
${movie.rating ? `<span>⭐ ${movie.rating}</span>` : ''}
|
||||
<a href="https://www.imdb.com/title/${movie.imdb_id}/" target="_blank" rel="noopener noreferrer" aria-label="Voir sur IMDb">
|
||||
<img src="/img/imdb.png" class="imdb-icon" alt="IMDb">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
${!isClickable ? '<div class="text-muted small mb-1">Aucune source</div>' : ''}
|
||||
<div class="movie-info-box">
|
||||
<div class="movie-info-category">${movie.category}</div>
|
||||
<p class="movie-info-desc">${movie.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
${!isClickable ? '<div class="text-muted small mb-1">Aucune source</div>' : ''}
|
||||
<div class="text-muted small fw-semibold fst-italic mb-2">${movie.category}</div>
|
||||
<p class="card-text small flex-grow-1 mb-2">${movie.description}</p>
|
||||
${isChecked ? `<div class="text-muted small"><span class="fw-semibold text-dark">Regardé le:</span> ${watchedDate}</div>` : ''}
|
||||
${progressHtml}
|
||||
<div class="mt-auto">
|
||||
${isChecked ? `<div class="text-muted small"><span class="fw-semibold text-dark">Regardé le:</span> ${watchedDate}</div>` : ''}
|
||||
${progressHtml}
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
moviesList.appendChild(movieDiv);
|
||||
|
||||
@@ -546,6 +546,105 @@ function setHeader(movie, { activeYear } = {}) {
|
||||
document.title = movie?.title ? `${titlePrefix} - ${movie.title}` : titlePrefix;
|
||||
}
|
||||
|
||||
function normalizeRatingValue(v) {
|
||||
const n = Number(v);
|
||||
if (!Number.isFinite(n)) return null;
|
||||
const rounded = Math.round(n);
|
||||
if (rounded < 1 || rounded > 5) return null;
|
||||
return rounded;
|
||||
}
|
||||
|
||||
function applyRatingState({ wrap, buttons, metaEl, averageRating, ratingsCount, userRating }) {
|
||||
if (!wrap || !buttons?.length || !metaEl) return;
|
||||
const avg = Number.isFinite(Number(averageRating)) ? Number(averageRating) : null;
|
||||
const count = Number.isFinite(Number(ratingsCount)) ? Number(ratingsCount) : 0;
|
||||
const user = Number.isFinite(Number(userRating)) ? Number(userRating) : null;
|
||||
|
||||
buttons.forEach((btn) => {
|
||||
const value = Number(btn.getAttribute('data-value'));
|
||||
const isActive = user && value <= user;
|
||||
btn.classList.toggle('is-active', !!isActive);
|
||||
btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');
|
||||
});
|
||||
|
||||
const parts = [];
|
||||
if (avg && count > 0) {
|
||||
parts.push(`Note utilisateurs: ${avg.toFixed(1)} (${count})`);
|
||||
} else {
|
||||
parts.push('Note utilisateurs: —');
|
||||
}
|
||||
metaEl.textContent = parts.join(' • ');
|
||||
}
|
||||
|
||||
async function saveUserRating(movieId, rating, token) {
|
||||
try {
|
||||
const res = await fetch(`/api/movies/${encodeURIComponent(movieId)}/ratings`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(token ? { 'Authorization': `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify({ rating }),
|
||||
});
|
||||
if (!res.ok) return null;
|
||||
return await res.json().catch(() => null);
|
||||
} catch (_) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function initUserRating({ movieId, token, initial } = {}) {
|
||||
const wrap = document.getElementById('user-rating');
|
||||
const metaEl = document.getElementById('user-rating-meta');
|
||||
if (!wrap || !metaEl) return;
|
||||
|
||||
const buttons = Array.from(wrap.querySelectorAll('.star-btn'));
|
||||
const starting = {
|
||||
averageRating: initial?.averageRating ?? null,
|
||||
ratingsCount: initial?.ratingsCount ?? 0,
|
||||
userRating: initial?.userRating ?? null,
|
||||
};
|
||||
|
||||
applyRatingState({ wrap, buttons, metaEl, ...starting });
|
||||
|
||||
if (!token) {
|
||||
metaEl.textContent = 'Connecte-toi pour noter.';
|
||||
buttons.forEach((btn) => btn.setAttribute('disabled', 'disabled'));
|
||||
return;
|
||||
}
|
||||
|
||||
let isSaving = false;
|
||||
buttons.forEach((btn) => {
|
||||
btn.addEventListener('click', async () => {
|
||||
if (isSaving) return;
|
||||
const value = normalizeRatingValue(btn.getAttribute('data-value'));
|
||||
if (!value) return;
|
||||
|
||||
isSaving = true;
|
||||
buttons.forEach((b) => b.setAttribute('disabled', 'disabled'));
|
||||
metaEl.textContent = 'Enregistrement…';
|
||||
|
||||
const result = await saveUserRating(movieId, value, token);
|
||||
if (result) {
|
||||
applyRatingState({
|
||||
wrap,
|
||||
buttons,
|
||||
metaEl,
|
||||
averageRating: result?.averageRating,
|
||||
ratingsCount: result?.ratingsCount,
|
||||
userRating: result?.userRating,
|
||||
});
|
||||
} else {
|
||||
applyRatingState({ wrap, buttons, metaEl, ...starting });
|
||||
metaEl.textContent = 'Impossible d’enregistrer la note.';
|
||||
}
|
||||
|
||||
buttons.forEach((b) => b.removeAttribute('disabled'));
|
||||
isSaving = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function normalizeVodLink(raw) {
|
||||
const v = String(raw || '').trim();
|
||||
if (!v) return null;
|
||||
@@ -1152,6 +1251,15 @@ window.onload = async function () {
|
||||
|
||||
const [activeYear, playerUi] = await Promise.all([activeYearPromise, playerUiPromise]);
|
||||
setHeader(movie, { activeYear });
|
||||
initUserRating({
|
||||
movieId: id,
|
||||
token,
|
||||
initial: {
|
||||
averageRating: movie?.user_rating_avg,
|
||||
ratingsCount: movie?.user_rating_count,
|
||||
userRating: movie?.user_rating,
|
||||
},
|
||||
});
|
||||
pageLoader.setProgress(58);
|
||||
|
||||
// Admin-only status block (Source + Progress) can be globally disabled via settings.
|
||||
|
||||
Reference in New Issue
Block a user