Merge pull request 'Media-Cleaner-Homepage-and-Api' (#7) from Media-Cleaner-Homepage-and-Api into main

Reviewed-on: #7

Directory.Build.props

@@ -1,5 +1,5 @@
 <Project>
   <PropertyGroup>
-    <AssemblyVersion>0.0.0.10</AssemblyVersion>
+    <AssemblyVersion>0.0.0.11</AssemblyVersion>
   </PropertyGroup>
 </Project>

Jellyfin.Plugin.MediaCleaner/Pages/home.css

@@ -0,0 +1,27 @@
+table {
+    border: 1px solid;
+    border-collapse: collapse;
+}
+
+td, th {
+    border: 1px solid;
+    padding: 0.5rem 0.75rem;
+    text-align: left;
+}
+
+.links {
+    background-color: #0f0f0f;
+    border: 1px solid;
+    padding: 0.8rem 1.8rem;
+    font-size: 1.2rem;
+    color: #ffffff;
+    text-decoration: none;
+    cursor: pointer;
+    line-height: inherit;
+    vertical-align: baseline;
+    transition: background-color 0.3s ease;
+}
+
+.links:hover {
+  background-color: #2a2a2a;
+}

Jellyfin.Plugin.MediaCleaner/Pages/home.html

@@ -1,32 +1,36 @@
-<div data-role="page" class="page type-interior pluginConfigurationPage withTabs"
+<div data-role="page" class="page type-interior pluginConfigurationPage"
-     data-controller="__plugin/media_cleaner_table.js">
+     data-controller="__plugin/home.js">
 	<div data-role="content">
 		<div class="content-primary">
-            <div>
+            <div id="loading">Loading...</div>
-                <a href="#configurationpage?name=Settings">Settings</a>
+            <div id="homepage" style="visibility: hidden;">
+                <button class="links" data-target="configurationpage?name=Settings">Settings</button>
+                <h2>Media Cleaner</h2>
+
+                <h3 id="moviesTitle"></h3>
+                <table id="moviesTable">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th class="actions-cell">Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+                <br>
+
+                <h3 id="seriesTitle"></h3>
+                <table id="seriesTable">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Seasons</th>
+                            <th class="actions-cell">Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
             </div>
-			<h2>Media Cleaner</h2>
-
-            <h3 id="moviesTitle"></h3>
-            <table id="moviesTable">
-                <thead>
-                    <tr>
-                        <th>Name</th>
-                    </tr>
-                </thead>
-            </table>
-            <br>
-            <br>
-
-            <h3 id="seriesTitle"></h3>
-            <table id="seriesTable">
-                <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Seasons</th>
-                    </tr>
-                </thead>
-            </table>
 		</div>
 	</div>
 </div>

Jellyfin.Plugin.MediaCleaner/Pages/home.js

@@ -0,0 +1,151 @@
+document.addEventListener('pageshow', async () => {
+    await fetchHomepageCSS();
+    await updateMediaCleanerState();
+
+    var moviesTitle = document.getElementById("moviesTitle");
+    var seriesTitle = document.getElementById("seriesTitle");
+
+    moviesTitle.innerHTML = await getMediaCleanerMoviesTitle();
+    seriesTitle.innerHTML = await getMediaCleanerSeriesTitle();
+
+    await populateTables();
+    addClickHandlersToLinks();
+    finishLoading();
+});
+
+const getMediaCleanerSeriesInfo = async () => {
+    const response = await fetch("/mediacleaner/state/getSeriesInfo");
+
+    if(!response.ok){
+        throw new Error(`Response status: ${response.status}`)
+    }
+
+    return response.json();
+};
+
+const getMediaCleanerMovieInfo = async () => {
+    const response = await fetch("/mediacleaner/state/getMovieInfo");
+
+    if(!response.ok){
+        throw new Error(`Response status: ${response.status}`)
+    }
+
+    return response.json();
+};
+
+const updateMediaCleanerState = async () => {
+    const response = await fetch("/mediacleaner/state/updateState");
+
+    if(!response.ok){
+        throw new Error(`Response status: ${response.status}`)
+    }
+
+    return response.json();
+};
+
+const getMediaCleanerSeriesTitle = async () => {
+    const response = await fetch("/mediacleaner/state/getSeriesTitle");
+
+    if(!response.ok){
+        throw new Error(`Response status: ${response.status}`);
+    }
+
+    return response.json();
+};
+
+const getMediaCleanerMoviesTitle = async () => {
+    const response = await fetch("/mediacleaner/state/getMoviesTitle");
+
+    if(!response.ok){
+        throw new Error(`Response status: ${response.status}`);
+    }
+
+    return response.json();
+};
+
+const populateTables = async () => {
+    var moviesInfo = await getMediaCleanerMovieInfo();
+    var seriesInfo = await getMediaCleanerSeriesInfo();
+
+    var seriesTableBody = seriesTable.getElementsByTagName('tbody')[0];
+    seriesTableBody.replaceChildren();
+
+    var moviesTableBody = moviesTable.getElementsByTagName('tbody')[0];
+    moviesTableBody.replaceChildren();
+
+    if (moviesInfo.length > 0){
+        for(let i = 0; i < moviesInfo.length; i++){
+            var row = moviesTableBody.insertRow(-1);
+            var cell1 = row.insertCell(0);
+            var cell2 = row.insertCell(1);
+            cell1.innerHTML = moviesInfo[i].Name;
+            // Will need to be enabled once radarr and sonarr integration is enabled.
+            // Maybe change this to an element to remove hard coding.
+            cell2.innerHTML = "<button type=\"button\" disabled>Delete</button>";
+        }
+    }
+    else{
+        var columnCount = moviesTable.tHead.rows[0].cells.length;
+        var row = moviesTableBody.insertRow(-1);
+        var cell1 = row.insertCell(0);
+        cell1.colSpan = columnCount;
+        cell1.innerHTML = "No stale movies found.";
+    }
+
+    if(seriesInfo.length > 0){
+        for(let i = 0; i < seriesInfo.length; i++){
+            var row = seriesTableBody.insertRow(-1);
+            var cell1 = row.insertCell(0);
+            var cell2 = row.insertCell(1);
+            var cell3 = row.insertCell(2);
+            cell1.innerHTML = seriesInfo[i].Name;
+            cell2.innerHTML = seriesInfo[i].Seasons.map(season => season.replace("Season ", "")).join(", ");
+            // Will need to be enabled once radarr and sonarr integration is enabled.
+            // Maybe change this to an element to remove hard coding.
+            cell3.innerHTML = "<button type=\"button\" disabled>Delete</button>";
+            cell3.className = "actions-cell";
+        }
+    }
+    else{
+        var columnCount = seriesTable.tHead.rows[0].cells.length;
+        var row = seriesTableBody.insertRow(-1);
+        var cell1 = row.insertCell(0);
+        cell1.colSpan = columnCount;
+        cell1.innerHTML = "No stale series found.";
+    }
+};
+
+const addClickHandlersToLinks = () => {
+    const linkbtns = document.querySelectorAll("button.links")
+    linkbtns.forEach(btn => {
+        btn.addEventListener("click", () => {
+            const target = btn.dataset.target;
+            if (!target) return;
+            window.location.hash = target;
+        })
+    })
+}
+
+const finishLoading = () => {
+    const loadingElement = document.getElementById("loading");
+
+    const homepage = document.getElementById("homepage");
+    loadingElement.style.visibility = "hidden";
+    homepage.style.visibility = "visible";
+
+    console.log("Loading element: ", loadingElement);
+    console.log("Homepage element: ", homepage);
+}
+
+const fetchHomepageCSS = async () => {
+    const response = await fetch('/web/configurationpage?name=home.css')
+
+    if(!response.ok){
+        throw new Error(`Response status: ${response.status}`);
+    }
+
+    const css = await response.text();
+    const styles = document.createElement('style');
+    styles.textContent = css;
+    document.head.appendChild(styles);
+}

Jellyfin.Plugin.MediaCleaner/Pages/media_cleaner_table.js

@@ -1,91 +0,0 @@
-document.addEventListener('pageshow', async () => {
-    var moviesTitle = document.getElementById("moviesTitle");
-    var seriesTitle = document.getElementById("seriesTitle");
-    var moviesTable = document.getElementById("moviesTable");
-    var seriesTable = document.getElementById("seriesTable");
-
-    const getMediaCleanerSeriesInfo = async () => {
-        const response = await fetch("/mediacleaner/state/getSeriesInfo");
-
-        if(!response.ok){
-            throw new Error(`Response status: ${response.status}`)
-        }
-
-        return response.json();
-    }
-
-    const getMediaCleanerMovieInfo = async () => {
-        const response = await fetch("/mediacleaner/state/getMovieInfo");
-
-        if(!response.ok){
-            throw new Error(`Response status: ${response.status}`)
-        }
-
-        return response.json();
-    }
-
-    const updateMediaCleanerState = async () => {
-        const response = await fetch("/mediacleaner/state/updateState");
-
-        if(!response.ok){
-            throw new Error(`Response status: ${response.status}`)
-        }
-
-        return response.json();
-    }
-
-    const getMediaCleanerSeriesTitle = async () => {
-        const response = await fetch("/mediacleaner/state/getSeriesTitle");
-
-        if(!response.ok){
-            throw new Error(`Response status: ${response.status}`);
-        }
-
-        return response.json();
-    }
-
-    const getMediaCleanerMoviesTitle = async () => {
-        const response = await fetch("/mediacleaner/state/getMoviesTitle");
-
-        if(!response.ok){
-            throw new Error(`Response status: ${response.status}`);
-        }
-
-        return response.json();
-    }
-
-    const populateMoviesTable = () => {
-        moviesTable.innerHTML = '';
-
-        for(let i = 0; i < moviesInfo.length; i++){
-            var row = moviesTable.insertRow(-1);
-            var cell1 = row.insertCell(0);
-            var cell2 = row.insertCell(1);
-            cell1.innerHTML = moviesInfo[i].Name;
-            cell2.innerHTML = "<button>Delete</button>";
-        }
-    }
-
-    const populateSeriesTable = () => {
-        seriesTable.innerHTML = '';
-
-        for(let i = 0; i < seriesInfo.length; i++){
-            var row = seriesTable.insertRow(-1);
-            var cell1 = row.insertCell(0);
-            var cell2 = row.insertCell(1);
-            var cell3 = row.insertCell(2);
-            cell1.innerHTML = seriesInfo[i].Name;
-            cell2.innerHTML = seriesInfo[i].Seasons.map(season => season.replace("Season ", "")).join(", ");
-            cell3.innerHTML = "<button>Delete</button>";
-        }
-    }
-
-    moviesTitle.innerHTML = await getMediaCleanerMoviesTitle();
-    seriesTitle.innerHTML = await getMediaCleanerSeriesTitle();
-
-    await updateMediaCleanerState();
-    var moviesInfo = await getMediaCleanerMovieInfo();
-    var seriesInfo = await getMediaCleanerSeriesInfo();
-    populateMoviesTable();
-    populateSeriesTable();
-});

Jellyfin.Plugin.MediaCleaner/Plugin.cs

@@ -57,8 +57,13 @@ public class Plugin : BasePlugin<PluginConfiguration>, IHasWebPages
             },
             new PluginPageInfo
             {
-                Name = "media_cleaner_table.js",
+                Name = "home.js",
-                EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Pages.media_cleaner_table.js", GetType().Namespace),
+                EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Pages.home.js", GetType().Namespace),
+            },
+            new PluginPageInfo
+            {
+                Name = "home.css",
+                EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Pages.home.css", GetType().Namespace),
             }
         ];
     }