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 <[email protected]>
This commit is contained in:
Cursor Agent
co-authored by
mathieumoran1
mathieumoran1
parent
dfd8e9b4fd
commit
20d0a52f78
+118
-63
@@ -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/<movieId></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/<movieId></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>
|
||||
|
||||
Reference in New Issue
Block a user