Support multiple subtitle tracks

Adds multi-language subtitle storage, upload/removal, and player/admin UI support, plus fixes subtitle metadata updates during upload.

public/js/app_control.js

@@ -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' });