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
-
-
- -

- - - - - - - - -
NameSeasons
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(); });