[33] Add ability to set per-season logos in the UI

CollinHeist · Oct 5, 2024 · a3a477f · a3a477f
1 parent 90cc431
commit a3a477f
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 14 deletions.
diff --git a/app/templates/js/series.js b/app/templates/js/series.js
@@ -1780,28 +1780,32 @@ function selectTmdbImage(episodeId, url) {
 }
 
 /**
- * Submit an API request to download the Series logo at the specified URL.
- * @param {string} url - URL of the logo file to download.
+ * Submit an API request to download the logo at the specified URL.
+ * @param {string} url URL of the logo file to download.
+ * @param {?number} seasonNumber Season number associated with this URL.
  */
-function downloadSeriesLogo(url) {
+function downloadLogo(url, seasonNumber=null) {
   // Create pseudo form for this URL
   const form = new FormData();
   form.set('url', url);
 
   // Submit API request to upload this URL
   $.ajax({
     type: 'PUT',
-    url: '/api/sources/series/{{series.id}}/logo/upload',
+    url: '/api/sources/series/{{series.id}}/logo/upload' + (seasonNumber === null ? '' : `?season_number=${seasonNumber}`),
     data: form,
     cache: false,
     contentType: false,
     processData: false,
     success: () => {
       showInfoToast('Downloaded Logo');
-      // Update logo source to force refresh
-      logo = document.getElementById('logo');
-      logo.src = `/source/{{series.path_safe_name}}/logo.png?${new Date().getTime()}`;
-      logo.style.display = 'block';
+      if (seasonNumber === null) {
+        logo = document.getElementById('logo');
+        logo.src = `/source/{{series.path_safe_name}}/logo.png?${new Date().getTime()}`;
+        logo.style.display = 'block';
+      } else {
+        document.querySelector(`[data-season="${seasonNumber}"] img`).src = `/source/{{ series.path_safe_name }}/logo_season${seasonNumber}.png?${new Date().getTime()}`;
+      }
     },
     error: response => showErrorToast({title: 'Error Downloading Logo', response}),
   });
@@ -1907,8 +1911,10 @@ function browseSourceImages(episodeId, cardElementId, episodeIds) {
 /**
  * Submit an API request to browse the available logos for this Series. If
  * successful, the relevant modal is shown.
+ * @param {?number} seasonNumber - Season number being browsed. If null, then it
+ * is assumed to be the series itself.
  */
-function browseLogos() {
+function browseLogos(seasonNumber) {
   $.ajax({
     type: 'GET',
     url: '/api/sources/series/{{series.id}}/logo/browse',
@@ -1922,7 +1928,7 @@ function browseLogos() {
         showErrorToast({title: 'TMDb has no logos'});
       } else {
         const imageElements = images.map(({url}) => {
-          return `<a class="ui image" onclick="downloadSeriesLogo('${url}')"><img src="${url}"/></a>`;
+          return `<a class="ui image" onclick="downloadLogo('${url}', ${seasonNumber})"><img src="${url}"/></a>`;
         });
         $('#browse-tmdb-logo-modal .content .images')[0].innerHTML = imageElements.join('');
         $('#browse-tmdb-modal .header span').text('Logos');
@@ -1936,8 +1942,10 @@ function browseLogos() {
 /**
  * Submit an API request to browse the available backdrops for this Series. If
  * successful, the relevant modal is shown.
+ * @param {?number} seasonNumber - Season number being browsed. If null, then it
+ * is assumed to be the series itself.
  */
-function browseBackdrops() {
+function browseBackdrops(seasonNumber) {
   $.ajax({
     type: 'GET',
     url: `/api/sources/series/{{series.id}}/backdrop/browse`,
@@ -1968,8 +1976,10 @@ function browseBackdrops() {
  * Get the uploaded logo file and upload it to this Series. If the logo is an
  * image, then the API request to upload the logo is submitted. If successful,
  * then the logo `img` element is updated.
+ * @param {?number} seasonNumber - Season number being uploaded. If null, then
+ * it is assumed to be the series itself.
  */
-function uploadLogo() {
+function uploadLogo(seasonNumber) {
   // Get uploaded file
   const file = $('#logo-upload')[0].files[0];
   if (!file) { return; }
@@ -2006,8 +2016,10 @@ function uploadLogo() {
  * Get the uploaded backdrop file and upload it to this Series. If the backdrop
  * is an image, then the API request to upload the file is submitted. If
  * successful, then the backdrop `img` element is updated.
+ * @param {?number} seasonNumber - Season number being uploaded. If null, then
+ * it is assumed to be the series itself.
  */
-function uploadBackdrop() {
+function uploadBackdrop(seasonNumber) {
   // Get uploaded file
   const file = $('#backdrop-upload')[0].files[0];
   if (!file) { return; }

diff --git a/app/templates/series.html b/app/templates/series.html
@@ -1183,6 +1183,47 @@ <h2 class="ui dividing header">Logo</h2>
             <div class="color palette" id="logo-palette"></div>
           </div>
 
+          {% if series.use_per_season_assets %}
+          <div class="ui large list">
+            {% for season_number in series.season_numbers %}
+            {% set exists, logo = series.get_logo_uri(season_number) %}
+            <div class="item">
+              <div class="content">
+                <div class="header">
+                  Season {{ season_number }}
+                  <span data-tooltip="Browse">
+                    <i data-action="browse" class="small blue border all icon" onclick="browseLogos({{ season_number }});"></i>
+                  </span>
+                  <span data-tooltip="Upload">
+                    <label for="logo-upload-season{{ season_number }}">
+                      <i data-action="upload" class="small green upload icon"></i>
+                    </label>
+                  </span>
+                  {% if exists %}
+                  <span data-tooltip="Analyze">
+                    <i data-action="analyze" class="small purple magic icon" onclick="analyzePalette(`[data-season='{{ season_number }}'] img`, `[data-season='{{ season_number }}'] .palette`);"></i></i>
+                  </span>
+                  {% else %}
+                  <i data-action="analyze" class="disabled small purple magic icon"></i>
+                  {% endif %}
+                </div>
+                <div class="description">
+                  <input type="file" id="logo-upload-season{{ season_number }}" class="ui invisible file input" onchange="uploadLogo(null);">
+                  <div class="image-analysis-group" data-season="{{ season_number }}">
+                    {% if exists %}
+                    <img class="ui rounded image" loading="lazy" src="{{ logo }}">
+                    {% else %}
+                    <img class="ui rounded image" loading="lazy">
+                    {% endif %}
+                    <div class="small color palette"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            {% endfor %}
+          </div>
+          {% endif %}
+
           <!-- Backdrop -->
           <h2 class="ui dividing header">Backdrop</h2>
           <div class="ui blue tertiary button" onclick="browseBackdrops();">

diff --git a/modules/ref/version_webui b/modules/ref/version_webui
@@ -1 +1 @@
-v2.0-alpha.12.1-webui32
+v2.0-alpha.12.1-webui33