From 20d0a52f785ff26747077aee51575487c0cb67c4 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 22 Dec 2025 07:40:03 +0000
Subject: [PATCH] Refactor: Organize movie edit form into tabs

Separate movie info and video player settings into distinct tabs for better organization and user experience.

Co-authored-by: mathieumoran1 <mathieumoran1@gmail.com>
---
 public/control.html | 181 +++++++++++++++++++++++++++++---------------
 1 file changed, 118 insertions(+), 63 deletions(-)

diff --git a/public/control.html b/public/control.html
index 681c9f0..b38825a 100644
--- a/public/control.html
+++ b/public/control.html
@@ -688,80 +688,135 @@
           </div>
         </div>
 
-        <div class="row g-3">
-          <div class="col-md-6">
-            <label for="edit_imdb_id" class="form-label">IMDB ID (ex: tt1234567)</label>
-            <input type="text" class="form-control" id="edit_imdb_id" placeholder="tt..." required>
-          </div>
-          <div class="col-md-6">
-            <label for="edit_year" class="form-label">Oscar year</label>
-            <input type="number" class="form-control" id="edit_year" placeholder="2026" min="1900" max="3000">
-          </div>
+        <ul class="nav nav-tabs" id="editMovieTabs" role="tablist">
+          <li class="nav-item" role="presentation">
+            <button
+              class="nav-link active"
+              id="edit-movie-tab-info"
+              data-bs-toggle="tab"
+              data-bs-target="#edit-movie-pane-info"
+              type="button"
+              role="tab"
+              aria-controls="edit-movie-pane-info"
+              aria-selected="true"
+            >
+              Info
+            </button>
+          </li>
+          <li class="nav-item" role="presentation">
+            <button
+              class="nav-link"
+              id="edit-movie-tab-video"
+              data-bs-toggle="tab"
+              data-bs-target="#edit-movie-pane-video"
+              type="button"
+              role="tab"
+              aria-controls="edit-movie-pane-video"
+              aria-selected="false"
+            >
+              Player / Vidéo
+            </button>
+          </li>
+        </ul>
 
-          <div class="col-md-6">
-            <label for="edit_category" class="form-label">Catégorie</label>
-            <input type="text" class="form-control" id="edit_category" placeholder="Best Picture, etc." required>
-          </div>
-          <div class="col-md-6">
-            <label class="form-label">Lecteur (source)</label>
-            <div class="row g-2">
-              <div class="col-12">
-                <label for="edit_player_mode" class="form-label">Mode</label>
-                <select id="edit_player_mode" class="form-select">
-                  <option value="auto">Auto</option>
-                  <option value="video">Video</option>
-                  <option value="embed">Embed</option>
-                </select>
-                <div class="form-text">Auto = video_src → embed_src → vod_link.</div>
+        <div class="tab-content pt-3" id="editMovieTabsContent">
+          <!-- Info tab -->
+          <div
+            class="tab-pane fade show active"
+            id="edit-movie-pane-info"
+            role="tabpanel"
+            aria-labelledby="edit-movie-tab-info"
+            tabindex="0"
+          >
+            <div class="row g-3">
+              <div class="col-md-6">
+                <label for="edit_imdb_id" class="form-label">IMDB ID (ex: tt1234567)</label>
+                <input type="text" class="form-control" id="edit_imdb_id" placeholder="tt..." required>
               </div>
-              <div class="col-12">
-                <label for="edit_video_src" class="form-label">Video URL (mp4/webm/m3u8)</label>
-                <input type="text" class="form-control" id="edit_video_src" placeholder="https://.../movie.mp4 or .../playlist.m3u8">
-                <div class="form-text">If you use a server file (below) and leave this empty, it will auto-use <code>/api/video/&lt;movieId&gt;</code>.</div>
+              <div class="col-md-6">
+                <label for="edit_year" class="form-label">Oscar year</label>
+                <input type="number" class="form-control" id="edit_year" placeholder="2026" min="1900" max="3000">
               </div>
-              <div class="col-12">
-                <label for="edit_video_file" class="form-label">Server video file (optional)</label>
-                <input type="text" class="form-control font-monospace" id="edit_video_file" placeholder="my_movie.mp4 or 2026/my_movie.mp4">
-                <div class="form-text">Relative path under <code>VIDEO_FILES_DIR</code> (default: <code>public/video</code>).</div>
+
+              <div class="col-md-6">
+                <label for="edit_category" class="form-label">Catégorie</label>
+                <input type="text" class="form-control" id="edit_category" placeholder="Best Picture, etc." required>
               </div>
-              <div class="col-12">
-                <label for="edit_embed_src" class="form-label">Embed URL or iframe code</label>
-                <textarea class="form-control font-monospace" id="edit_embed_src" rows="3" placeholder="https://... OR <iframe ...>"></textarea>
+
+              <div class="col-md-6">
+                <label for="edit_rating" class="form-label">Rating (imdbRating)</label>
+                <input type="text" class="form-control" id="edit_rating" placeholder="7.9">
               </div>
+
               <div class="col-12">
-                <label for="edit_vod_link" class="form-label">Legacy VOD link (optional)</label>
-                <input type="text" class="form-control" id="edit_vod_link" placeholder="https://...">
+                <div class="form-check">
+                  <input class="form-check-input" type="checkbox" id="edit_refresh_omdb">
+                  <label class="form-check-label" for="edit_refresh_omdb">
+                    Recharger depuis OMDb (écrase titre / plot / rating / poster)
+                  </label>
+                </div>
+                <div class="form-text">Si coché, le serveur refait un appel OMDb via l’IMDB ID au moment de l’enregistrement.</div>
+              </div>
+
+              <div class="col-12">
+                <label for="edit_title" class="form-label">Titre</label>
+                <input type="text" class="form-control" id="edit_title" placeholder="Title">
+              </div>
+
+              <div class="col-12">
+                <label for="edit_poster" class="form-label">Poster URL</label>
+                <input type="url" class="form-control" id="edit_poster" placeholder="https://...">
+              </div>
+
+              <div class="col-12">
+                <label for="edit_description" class="form-label">Description (Plot)</label>
+                <textarea class="form-control" id="edit_description" rows="4" placeholder="Plot..."></textarea>
               </div>
             </div>
           </div>
 
-          <div class="col-12">
-            <div class="form-check">
-              <input class="form-check-input" type="checkbox" id="edit_refresh_omdb">
-              <label class="form-check-label" for="edit_refresh_omdb">
-                Recharger depuis OMDb (écrase titre / plot / rating / poster)
-              </label>
+          <!-- Video tab -->
+          <div
+            class="tab-pane fade"
+            id="edit-movie-pane-video"
+            role="tabpanel"
+            aria-labelledby="edit-movie-tab-video"
+            tabindex="0"
+          >
+            <div class="row g-3">
+              <div class="col-12">
+                <label class="form-label">Lecteur (source)</label>
+                <div class="row g-2">
+                  <div class="col-12 col-lg-4">
+                    <label for="edit_player_mode" class="form-label">Mode</label>
+                    <select id="edit_player_mode" class="form-select">
+                      <option value="auto">Auto</option>
+                      <option value="video">Video</option>
+                      <option value="embed">Embed</option>
+                    </select>
+                    <div class="form-text">Auto = video_src → embed_src → vod_link.</div>
+                  </div>
+                  <div class="col-12 col-lg-8">
+                    <label for="edit_video_src" class="form-label">Video URL (mp4/webm/m3u8)</label>
+                    <input type="text" class="form-control" id="edit_video_src" placeholder="https://.../movie.mp4 or .../playlist.m3u8">
+                    <div class="form-text">If you use a server file (below) and leave this empty, it will auto-use <code>/api/video/&lt;movieId&gt;</code>.</div>
+                  </div>
+                  <div class="col-12">
+                    <label for="edit_video_file" class="form-label">Server video file (optional)</label>
+                    <input type="text" class="form-control font-monospace" id="edit_video_file" placeholder="my_movie.mp4 or 2026/my_movie.mp4">
+                    <div class="form-text">Relative path under <code>VIDEO_FILES_DIR</code> (default: <code>public/video</code>).</div>
+                  </div>
+                  <div class="col-12">
+                    <label for="edit_embed_src" class="form-label">Embed URL or iframe code</label>
+                    <textarea class="form-control font-monospace" id="edit_embed_src" rows="3" placeholder="https://... OR <iframe ...>"></textarea>
+                  </div>
+                  <div class="col-12">
+                    <label for="edit_vod_link" class="form-label">Legacy VOD link (optional)</label>
+                    <input type="text" class="form-control" id="edit_vod_link" placeholder="https://...">
+                  </div>
+                </div>
+              </div>
             </div>
-            <div class="form-text">Si coché, le serveur refait un appel OMDb via l’IMDB ID au moment de l’enregistrement.</div>
-          </div>
-
-          <div class="col-md-6">
-            <label for="edit_title" class="form-label">Titre</label>
-            <input type="text" class="form-control" id="edit_title" placeholder="Title">
-          </div>
-          <div class="col-md-6">
-            <label for="edit_rating" class="form-label">Rating (imdbRating)</label>
-            <input type="text" class="form-control" id="edit_rating" placeholder="7.9">
-          </div>
-
-          <div class="col-12">
-            <label for="edit_poster" class="form-label">Poster URL</label>
-            <input type="url" class="form-control" id="edit_poster" placeholder="https://...">
-          </div>
-
-          <div class="col-12">
-            <label for="edit_description" class="form-label">Description (Plot)</label>
-            <textarea class="form-control" id="edit_description" rows="4" placeholder="Plot..."></textarea>
           </div>
         </div>
       </div>