diff --git a/Jellyfin.Plugin.MediaCleaner/Pages/home.html b/Jellyfin.Plugin.MediaCleaner/Pages/home.html
index 3b7d39c..1bd9e08 100644
--- a/Jellyfin.Plugin.MediaCleaner/Pages/home.html
+++ b/Jellyfin.Plugin.MediaCleaner/Pages/home.html
@@ -1,34 +1,36 @@
-
-
-
Settings
+
Loading...
+
+
+
Media Cleaner
+
+
+
+
+
+ | Name |
+ Actions |
+
+
+
+
+
+
+
+
+
+
+ | Name |
+ Seasons |
+ Actions |
+
+
+
+
-
Media Cleaner
-
-
-
-
-
-
-
-
-
-
- | Name |
- Seasons |
-
-
-
-
diff --git a/Jellyfin.Plugin.MediaCleaner/Pages/media_cleaner_table.js b/Jellyfin.Plugin.MediaCleaner/Pages/media_cleaner_table.js
index 0e689c3..5e1e94c 100644
--- a/Jellyfin.Plugin.MediaCleaner/Pages/media_cleaner_table.js
+++ b/Jellyfin.Plugin.MediaCleaner/Pages/media_cleaner_table.js
@@ -12,7 +12,7 @@ document.addEventListener('pageshow', async () => {
}
return response.json();
- }
+ };
const getMediaCleanerMovieInfo = async () => {
const response = await fetch("/mediacleaner/state/getMovieInfo");
@@ -22,7 +22,7 @@ document.addEventListener('pageshow', async () => {
}
return response.json();
- }
+ };
const updateMediaCleanerState = async () => {
const response = await fetch("/mediacleaner/state/updateState");
@@ -32,7 +32,7 @@ document.addEventListener('pageshow', async () => {
}
return response.json();
- }
+ };
const getMediaCleanerSeriesTitle = async () => {
const response = await fetch("/mediacleaner/state/getSeriesTitle");
@@ -42,7 +42,7 @@ document.addEventListener('pageshow', async () => {
}
return response.json();
- }
+ };
const getMediaCleanerMoviesTitle = async () => {
const response = await fetch("/mediacleaner/state/getMoviesTitle");
@@ -52,14 +52,17 @@ document.addEventListener('pageshow', async () => {
}
return response.json();
- }
+ };
const populateTables = () => {
var seriesTableBody = seriesTable.getElementsByTagName('tbody')[0];
seriesTableBody.replaceChildren();
+ seriesTableBody.style.border = "1px solid";
+ seriesTableBody.style.borderCollapse = "collapse";
var moviesTableBody = moviesTable.getElementsByTagName('tbody')[0];
moviesTableBody.replaceChildren();
+ moviesTableBody.style.border = "1px solid";
for(let i = 0; i < moviesInfo.length; i++){
var row = moviesTableBody.insertRow(-1);
@@ -77,7 +80,66 @@ document.addEventListener('pageshow', async () => {
cell1.innerHTML = seriesInfo[i].Name;
cell2.innerHTML = seriesInfo[i].Seasons.map(season => season.replace("Season ", "")).join(", ");
cell3.innerHTML = "
";
+ cell3.className = "actions-cell";
}
+ };
+
+ const styleTables = () => {
+ const tables = document.querySelectorAll("table");
+ const cells = document.querySelectorAll("th, td");
+
+ tables.forEach(table => {
+ table.style.border = "1px solid";
+ table.style.borderCollapse = "collapse";
+ })
+
+ cells.forEach(cell => {
+ cell.style.border = "1px solid";
+ cell.style.padding = "0.5rem 0.75rem";
+ cell.style.textAlign = "left"
+ });
+ };
+
+ const styleLinks = () => {
+ const linkbtns = document.querySelectorAll("button.links")
+ linkbtns.forEach(btn => {
+ btn.style.background = "#0f0f0f";
+ btn.style.border = '1px solid';
+ btn.style.padding = '1rem 2rem';
+ btn.style.fontSize = "1.2rem"
+ btn.style.color = "white";
+ btn.style.textDecoration = 'none';
+ btn.style.cursor = 'pointer';
+ btn.style.lineHeight = 'inherit';
+ btn.style.verticalAlign = 'baseline';
+ btn.style.transition = 'background 0.3s ease';
+
+ const hoverBg = '#2a2a2a';
+ const normalBg = btn.style.background;
+
+ btn.addEventListener("click", () => {
+ const target = btn.dataset.target;
+ if (!target) return;
+ window.location.hash = target;
+ })
+
+ btn.addEventListener('mouseenter', () => {
+ btn.style.background = hoverBg;
+ });
+
+ btn.addEventListener('mouseleave', () => {
+ btn.style.background = normalBg;
+ });
+ })
+ }
+
+ const showElements = () => {
+ const loadingElement = document.querySelector("#loading");
+ const elements = document.querySelectorAll("div #page");
+ elements.forEach(element => {
+ element.style.visibility = "visible";
+ })
+ loadingElement.style.visibility = "hidden";
}
moviesTitle.innerHTML = await getMediaCleanerMoviesTitle();
@@ -87,4 +149,7 @@ document.addEventListener('pageshow', async () => {
var moviesInfo = await getMediaCleanerMovieInfo();
var seriesInfo = await getMediaCleanerSeriesInfo();
populateTables();
+ styleTables();
+ styleLinks();
+ showElements();
});