From fe3b7e412b63f31bc5b5f279885081d5c51a102e Mon Sep 17 00:00:00 2001
From: Thomas Gander <thomas@silverhat.ca>
Date: Sat, 7 Mar 2026 11:56:26 -0700
Subject: [PATCH] Added delete buttons to home page

---
 .../Pages/configuration.js                    |  1 -
 Jellyfin.Plugin.MediaCleaner/Pages/home.html  |  2 +
 Jellyfin.Plugin.MediaCleaner/Pages/home.js    | 54 ++++++++++++++-----
 3 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/Jellyfin.Plugin.MediaCleaner/Pages/configuration.js b/Jellyfin.Plugin.MediaCleaner/Pages/configuration.js
index 062f975..9da382b 100644
--- a/Jellyfin.Plugin.MediaCleaner/Pages/configuration.js
+++ b/Jellyfin.Plugin.MediaCleaner/Pages/configuration.js
@@ -118,7 +118,6 @@ const processValidationElement = (validationElement, success) => {
     setTimeout(() => startFadeOut(validationElement, 50), 2000);
 }
 
-
 // Handlers
 document.querySelector('#RadarrTestConnectionButton')
     .addEventListener('click', testConnectionRadarr);
diff --git a/Jellyfin.Plugin.MediaCleaner/Pages/home.html b/Jellyfin.Plugin.MediaCleaner/Pages/home.html
index f2fea7c..b6e2523 100644
--- a/Jellyfin.Plugin.MediaCleaner/Pages/home.html
+++ b/Jellyfin.Plugin.MediaCleaner/Pages/home.html
@@ -18,6 +18,7 @@
                     </thead>
                     <tbody></tbody>
                 </table>
+                <button id="moviesDeleteButton" class="delete-button raised button-submit emby-button" style="visibility: hidden;">Delete</button>
                 <br>
 
                 <h3 id="seriesTitle"></h3>
@@ -31,6 +32,7 @@
                     </thead>
                     <tbody></tbody>
                 </table>
+                <button id="seriesDeleteButton" class="delete-button raised button-submit emby-button" style="visibility: hidden;">Delete</button>
             </div>
 		</div>
 	</div>
diff --git a/Jellyfin.Plugin.MediaCleaner/Pages/home.js b/Jellyfin.Plugin.MediaCleaner/Pages/home.js
index f95420a..5e37d97 100644
--- a/Jellyfin.Plugin.MediaCleaner/Pages/home.js
+++ b/Jellyfin.Plugin.MediaCleaner/Pages/home.js
@@ -65,7 +65,7 @@ const getMediaCleanerMoviesTitle = async () => {
 const selectedMovies = new Set();
 const selectedTvShows = new Set();
 
-const createCheckbox = (mediaInfo = {}, state = []) => {
+const createCheckbox = (mediaInfo = {}, table, deleteButton) => {
     const container = document.createElement('div');
     container.className = 'checkboxContainer';
     container.style.marginBottom = 0;
@@ -88,29 +88,48 @@ const createCheckbox = (mediaInfo = {}, state = []) => {
     container.appendChild(label);
 
     // Remove dependency on local state. Move to scanning for all checked checkboxes and create the array at that point.
+    // checkbox.addEventListener('change', (e) => {
+    //     const mediaInfo = checkbox.dataset.mediaInfo || '(no info)';
+    //     if (checkbox.checked) {
+    //         state.add(mediaInfo);
+    //     } else {
+    //         state.delete(mediaInfo);
+    //     }
+    //     // Update UI or state — use console.log for debugging
+    //     console.log('selected:', Array.from(state));
+    // });
+
     checkbox.addEventListener('change', (e) => {
-        const mediaInfo = checkbox.dataset.mediaInfo || '(no info)';
-        if (checkbox.checked) {
-            state.add(mediaInfo);
-        } else {
-            state.delete(mediaInfo);
+        if(isDeleteButtonVisible(table)){
+            console.log("Button should be visible: ", deleteButton);
+            deleteButton.style.visibility = 'visible';
+        }
+        else {
+            console.log("Button shouldn't be visible: ", deleteButton);
+            deleteButton.style.visibility = 'hidden';
         }
-        // Update UI or state — use console.log for debugging
-        console.log('selected:', Array.from(state));
     });
 
     return container;
 };
 
+const isDeleteButtonVisible = (table) => {
+    const checkboxes = table.getElementsByClassName('emby-checkbox');
+    const hasChecked = Array.from(checkboxes).some(checkbox => checkbox.checked);
+    return hasChecked;
+}
+
 const populateTables = async () => {
     var moviesInfo = await getMediaCleanerMovieInfo();
     var seriesInfo = await getMediaCleanerSeriesInfo();
 
     var seriesTableBody = seriesTable.getElementsByTagName('tbody')[0];
     seriesTableBody.replaceChildren();
+    var seriesDeleteButton = document.getElementById('seriesDeleteButton');
 
     var moviesTableBody = moviesTable.getElementsByTagName('tbody')[0];
     moviesTableBody.replaceChildren();
+    var moviesDeleteButton = document.getElementById('moviesDeleteButton');
 
     if (moviesInfo.length > 0){
         for(let i = 0; i < moviesInfo.length; i++){
@@ -119,7 +138,7 @@ const populateTables = async () => {
             var cell2 = row.insertCell(1);
             cell1.innerHTML = moviesInfo[i].Name;
             cell1.className = "table-text";
-            cell2.appendChild(createCheckbox(moviesInfo[i], selectedMovies));
+            cell2.appendChild(createCheckbox(moviesInfo[i], moviesTable, moviesDeleteButton));
             cell2.className = "table-checkbox"
         }
     }
@@ -142,7 +161,7 @@ const populateTables = async () => {
             cell1.className = "table-text";
             cell2.innerHTML = seriesInfo[i].Seasons.map(season => season.replace("Season ", "")).join(", ");
             cell2.className = "table-text";
-            cell3.appendChild(createCheckbox(seriesInfo[i], selectedTvShows));
+            cell3.appendChild(createCheckbox(seriesInfo[i], seriesTable, seriesDeleteButton));
             cell3.className = "table-checkbox"
         }
     }
@@ -157,8 +176,8 @@ const populateTables = async () => {
 };
 
 const addClickHandlersToLinks = () => {
-    const linkbtns = document.querySelectorAll("button.links")
-    linkbtns.forEach(btn => {
+    const linkBtns = document.querySelectorAll("button.links");
+    linkBtns.forEach(btn => {
         btn.addEventListener("click", () => {
             const target = btn.dataset.target;
             if (!target) return;
@@ -167,6 +186,17 @@ const addClickHandlersToLinks = () => {
     })
 }
 
+const addClickHandlersToDeleteButtons = () => {
+    const deleteBtns = document.querySelectorAll("delete-buttons");
+    deleteBtns.forEach(btn => {
+        btn.addEventListener("click", deleteFromRadarr)
+    })
+}
+
+const deleteFromRadarr = () => {
+    console.log("Delete from Radarr!")
+}
+
 const finishLoading = () => {
     const loadingElement = document.getElementById("loading");