quoije/oscars-pool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Support multiple subtitle tracks

Browse Source 
Adds multi-language subtitle storage, upload/removal, and player/admin UI support, plus fixes subtitle metadata updates during upload.
This commit is contained in:
Mathieu Moran
2026-01-25 02:01:08 -05:00
parent 891eb67e2d
commit 406a4f0bb3
6 changed files with 390 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/control.html
+10 -1
View File
@@ -1418,7 +1418,16 @@
<div class="col-12">
<label for="edit_subtitle_file" class="form-label">Sous-titres (SRT, optionnel)</label>
<input type="file" class="form-control" id="edit_subtitle_file" accept=".srt,.vtt,text/plain,text/vtt">
<div class="form-text">Fichier actuel: <span id="edit_subtitle_current">—</span></div>
<div class="form-text">Sous-titres existants:</div>
<div id="edit_subtitle_list" class="d-flex flex-column gap-2 mt-1"></div>
<div class="form-text">Ajoute un fichier par langue; répète l’upload pour plusieurs sous-titres.</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="edit_subtitle_remove">
<label class="form-check-label" for="edit_subtitle_remove">Supprimer tous les sous-titres</label>
</div>
<div class="form-text">Efface les fichiers VTT/SRT et réinitialise les champs de langue/label.</div>
</div>
<div class="col-12 col-lg-4">
<label for="edit_subtitle_lang" class="form-label">Langue (ex: fr, en)</label>
public/js/app_control.js
+99 -11
View File
@@ -114,10 +114,11 @@ window.onload = async function () {
const editVideoFileEl = document.getElementById('edit_video_file');
const editVideoFileLowEl = document.getElementById('edit_video_file_low');
const editSubtitleFileEl = document.getElementById('edit_subtitle_file');
const editSubtitleRemoveEl = document.getElementById('edit_subtitle_remove');
const editSubtitleLangEl = document.getElementById('edit_subtitle_lang');
const editSubtitleLabelEl = document.getElementById('edit_subtitle_label');
const editSubtitleDefaultEl = document.getElementById('edit_subtitle_default');
const editSubtitleCurrentEl = document.getElementById('edit_subtitle_current');
const editSubtitleListEl = document.getElementById('edit_subtitle_list');
const editEmbedSrcEl = document.getElementById('edit_embed_src');
const editRefreshOmdbEl = document.getElementById('edit_refresh_omdb');
const editTitleEl = document.getElementById('edit_title');
@@ -171,6 +172,20 @@ window.onload = async function () {
return s.slice(0, maxLen);
}
function getMovieSubtitles(movie) {
const subs = Array.isArray(movie?.subtitles) ? movie.subtitles.filter(Boolean) : [];
if (subs.length > 0) return subs;
const legacyFile = typeof movie?.subtitle_file === 'string' ? movie.subtitle_file.trim() : '';
if (!legacyFile) return [];
return [{
_id: 'legacy',
file: legacyFile,
lang: movie?.subtitle_lang || '',
label: movie?.subtitle_label || '',
default: !!movie?.subtitle_default,
}];
}
async function uploadMovieSubtitle({ movieId, file, lang, label, isDefault }) {
if (!movieId || !file) return null;
const formData = new FormData();
@@ -195,6 +210,22 @@ window.onload = async function () {
return data;
}
async function removeMovieSubtitle({ movieId, subtitleId }) {
if (!movieId || !subtitleId) return null;
const res = await fetch(`/api/movies/${encodeURIComponent(movieId)}/subtitles/${encodeURIComponent(subtitleId)}`, {
method: 'DELETE',
headers: {
'Authorization': `Bearer ${token}`,
},
});
const data = await res.json().catch(() => ({}));
if (!res.ok) {
const msg = data.message || data.error || `Erreur (${res.status})`;
throw new Error(msg);
}
return data;
}
function normalizePlayerUi(value) {
const v = value && typeof value === 'object' && !Array.isArray(value) ? value : {};
const showSource = v.showSource === undefined ? DEFAULT_PLAYER_UI.showSource : !!v.showSource;
@@ -2255,6 +2286,59 @@ window.onload = async function () {
selectAllBox.checked = allBoxes.length > 0 && checked === allBoxes.length;
}
function renderSubtitleList(movie) {
if (!editSubtitleListEl) return;
const subs = getMovieSubtitles(movie);
if (!subs.length) {
editSubtitleListEl.innerHTML = '<span class="text-muted">—</span>';
return;
}
editSubtitleListEl.innerHTML = subs.map((s) => {
const id = escapeHtml(String(s?._id || ''));
const lang = escapeHtml(String(s?.lang || ''));
const label = escapeHtml(String(s?.label || ''));
const file = escapeHtml(String(s?.file || ''));
const title = label || lang || file || 'Sous-titres';
const meta = [lang, label].filter(Boolean).join(' · ');
const isDefault = s?.default ? '<span class="badge bg-success ms-2">Par défaut</span>' : '';
return `
<div class="d-flex align-items-center justify-content-between gap-2">
<div class="small">
<span class="fw-semibold">${title}</span>
${meta ? `<span class="text-muted ms-2">${meta}</span>` : ''}
${isDefault}
</div>
<button type="button" class="btn btn-sm btn-outline-danger" data-remove-subtitle-id="${id}">
Supprimer
</button>
</div>
`;
}).join('');
editSubtitleListEl.querySelectorAll('[data-remove-subtitle-id]').forEach((btn) => {
btn.addEventListener('click', async () => {
const subtitleId = btn.getAttribute('data-remove-subtitle-id');
const movieId = String(editMovieIdEl?.value || '');
if (!movieId || !subtitleId) return;
if (!confirm('Supprimer ce sous-titre ?')) return;
try {
btn.disabled = true;
const updated = await removeMovieSubtitle({ movieId, subtitleId });
moviesById.set(updated._id, updated);
renderSubtitleList(updated);
showResponse('success', 'Sous-titre supprimé.');
await loadMoviesForManagement();
} catch (err) {
showResponse('danger', err.message || 'Erreur réseau');
} finally {
btn.disabled = false;
}
});
});
}
function openEditModal(movieId) {
if (!editMovieModal) return;
const movie = moviesById.get(movieId);
@@ -2273,10 +2357,8 @@ window.onload = async function () {
if (editSubtitleLangEl) editSubtitleLangEl.value = movie.subtitle_lang || '';
if (editSubtitleLabelEl) editSubtitleLabelEl.value = movie.subtitle_label || '';
if (editSubtitleDefaultEl) editSubtitleDefaultEl.checked = !!movie.subtitle_default;
if (editSubtitleCurrentEl) {
const current = movie.subtitle_file ? String(movie.subtitle_file) : '';
editSubtitleCurrentEl.textContent = current || '—';
}
renderSubtitleList(movie);
if (editSubtitleRemoveEl) editSubtitleRemoveEl.checked = false;
if (editSubtitleFileEl) editSubtitleFileEl.value = '';
if (editEmbedSrcEl) editEmbedSrcEl.value = movie.embed_src || '';
editRefreshOmdbEl.checked = false;
@@ -2311,7 +2393,8 @@ window.onload = async function () {
const subtitle_lang = normalizeSubtitleText(editSubtitleLangEl?.value, 24);
const subtitle_label = normalizeSubtitleText(editSubtitleLabelEl?.value, 80);
const subtitle_default = !!editSubtitleDefaultEl?.checked;
const subtitleFile = editSubtitleFileEl?.files?.[0] || null;
const subtitle_remove = !!editSubtitleRemoveEl?.checked;
const subtitleFile = subtitle_remove ? null : (editSubtitleFileEl?.files?.[0] || null);
const refreshOmdb = !!editRefreshOmdbEl.checked;
const cam = !!editCamFlagEl?.checked;
@@ -2349,13 +2432,17 @@ window.onload = async function () {
video_file,
video_file_low,
embed_src,
subtitle_lang,
subtitle_label,
subtitle_default,
subtitle_remove,
refreshOmdb,
cam
};
if (!subtitle_remove && !subtitleFile) {
body.subtitle_lang = subtitle_lang;
body.subtitle_label = subtitle_label;
body.subtitle_default = subtitle_default;
}
// Only send manual fields if we're not refreshing from OMDb
if (!refreshOmdb) {
body.title = title;
@@ -2390,13 +2477,14 @@ window.onload = async function () {
const updated = await res.json();
if (subtitleFile) {
try {
await uploadMovieSubtitle({
const uploaded = await uploadMovieSubtitle({
movieId,
file: subtitleFile,
lang: subtitle_lang,
label: subtitle_label,
isDefault: subtitle_default,
});
if (uploaded) moviesById.set(uploaded._id, uploaded);
} catch (err) {
showResponse('warning', `Film mis à jour, mais sous-titres non uploadés: ${err.message || 'Erreur'}`);
}
@@ -2442,7 +2530,7 @@ window.onload = async function () {
const hasLowFile = !!(m && m.video_file_low);
const hasEmbed = !!(m && m.embed_src);
const hasLegacy = !!(m && m.vod_link);
const hasSubtitle = !!(m && m.subtitle_file);
const hasSubtitle = Array.isArray(m?.subtitles) ? m.subtitles.length > 0 : !!(m && m.subtitle_file);
if (hasVideo) badges.push({ text: 'Video', cls: 'bg-primary' });
if (hasFile) badges.push({ text: 'Server file', cls: 'bg-dark' });
public/js/app_player.js
+27 -2
View File
@@ -804,9 +804,34 @@ function applySubtitleTrack({ videoEl, movie, token }) {
if (!videoEl) return;
clearVideoTracks(videoEl);
const movieId = String(movie?._id || '');
const subtitleFile = String(movie?.subtitle_file || '').trim();
if (!movieId || !subtitleFile) return;
if (!movieId) return;
const subtitles = Array.isArray(movie?.subtitles) ? movie.subtitles : [];
if (subtitles.length > 0) {
const hasDefault = subtitles.some((s) => s?.default);
subtitles.forEach((s, idx) => {
const lang = String(s?.lang || 'en').trim() || 'en';
const label = String(s?.label || 'Subtitles').trim() || 'Subtitles';
const isDefault = s?.default === undefined ? (!hasDefault && idx === 0) : !!s.default;
const subId = String(s?._id || '').trim();
const rawUrl = subId && subId !== 'legacy'
? `/api/subtitles/${encodeURIComponent(movieId)}/${encodeURIComponent(subId)}`
: `/api/subtitles/${encodeURIComponent(movieId)}`;
const src = addTokenToApiSubtitleUrl(rawUrl, token);
const track = document.createElement('track');
track.kind = 'subtitles';
track.label = label;
track.srclang = lang;
track.src = src;
track.default = isDefault;
videoEl.appendChild(track);
});
return;
}
const subtitleFile = String(movie?.subtitle_file || '').trim();
if (!subtitleFile) return;
const lang = String(movie?.subtitle_lang || 'en').trim() || 'en';
const label = String(movie?.subtitle_label || 'Subtitles').trim() || 'Subtitles';
const isDefault = movie?.subtitle_default === undefined ? true : !!movie.subtitle_default;