From 5303b4e0929bbdf4698ce546116938b71c3f84f9 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 22 May 2026 06:52:36 +0000 Subject: [PATCH] Fix Jellyfin UI review feedback in ui.js Agent-Logs-Url: https://github.com/devitq/movienight-backend/sessions/3b934336-ab14-45b4-9672-db95eefb363a Co-authored-by: devitq <118541411+devitq@users.noreply.github.com> --- .../Configuration/ui.js | 81 ++++++++++++------- 1 file changed, 51 insertions(+), 30 deletions(-) diff --git a/plugins/jellyfin/Jellyfin.Plugin.MovieNight/Configuration/ui.js b/plugins/jellyfin/Jellyfin.Plugin.MovieNight/Configuration/ui.js index 33e298f..4ff0ac1 100644 --- a/plugins/jellyfin/Jellyfin.Plugin.MovieNight/Configuration/ui.js +++ b/plugins/jellyfin/Jellyfin.Plugin.MovieNight/Configuration/ui.js @@ -16,11 +16,13 @@ function createTextButton(text, className, onClick) { const btn = document.createElement('button'); btn.type = 'button'; - btn.is = 'emby-button'; + btn.setAttribute('is', 'emby-button'); btn.className = `emby-button raised ${className}`; btn.style.margin = '0.5em'; btn.style.padding = '0.4em 1em'; - btn.innerHTML = `${text}`; + const span = document.createElement('span'); + span.textContent = text; + btn.appendChild(span); btn.onclick = onClick; return btn; } @@ -28,14 +30,18 @@ function createIconButton(icon, title, className, onClick) { const btn = document.createElement('button'); btn.type = 'button'; - btn.is = 'emby-button'; + btn.setAttribute('is', 'emby-button'); btn.className = `button-flat detailButton emby-button ${className}`; btn.title = title; - btn.innerHTML = ` -
- -
- `; + btn.setAttribute('aria-label', title); + const content = document.createElement('div'); + content.className = 'detailButton-content'; + const iconSpan = document.createElement('span'); + iconSpan.className = 'material-icons detailButton-icon'; + iconSpan.setAttribute('aria-hidden', 'true'); + iconSpan.textContent = icon; + content.appendChild(iconSpan); + btn.appendChild(content); btn.onclick = onClick; return btn; } @@ -47,14 +53,14 @@ const itemId = getItemIdFromUrl(); if (itemId) { // MovieNight Rating - if (!document.querySelector('.btnMovieNightRate')) { + if (!detailButtons.querySelector('.btnMovieNightRate')) { const rateBtn = createIconButton('star_rate', 'Rate on MovieNight', 'btnMovieNightRate', (e) => { e.preventDefault(); e.stopPropagation(); showRatingDialog(itemId); }); insertInDetailRow(detailButtons, rateBtn); } // Mark Viewed in MovieNight - if (!document.querySelector('.btnMovieNightMarkViewed')) { + if (!detailButtons.querySelector('.btnMovieNightMarkViewed')) { const viewedBtn = createIconButton('visibility', 'Mark Viewed in MovieNight', 'btnMovieNightMarkViewed', (e) => { e.preventDefault(); e.stopPropagation(); submitViewed(itemId); }); @@ -65,13 +71,17 @@ // 2. Library Pages - Add text buttons to toolbar const toolBar = document.querySelector('.libraryPage:not(.itemDetailPage) .flex.align-items-center.justify-content-center.focuscontainer-x'); - if (toolBar && !document.querySelector('.btnMovieNightRecommend')) { - toolBar.appendChild(createTextButton('Recommend Film', 'btnMovieNightRecommend', (e) => { - e.preventDefault(); showRecommendation(); - })); - toolBar.appendChild(createTextButton('Add Movie (STRM)', 'btnMovieNightAddMovie', (e) => { - e.preventDefault(); showAddMovieDialog(); - })); + if (toolBar) { + if (!toolBar.querySelector('.btnMovieNightRecommend')) { + toolBar.appendChild(createTextButton('Recommend Film', 'btnMovieNightRecommend', (e) => { + e.preventDefault(); showRecommendation(); + })); + } + if (!toolBar.querySelector('.btnMovieNightAddMovie')) { + toolBar.appendChild(createTextButton('Add Movie (STRM)', 'btnMovieNightAddMovie', (e) => { + e.preventDefault(); showAddMovieDialog(); + })); + } } // 3. Home Page - Prepend a MovieNight section @@ -113,7 +123,7 @@ const overlay = document.createElement('div'); overlay.className = 'dialogBackdrop dialogBackdropOpened'; overlay.style.zIndex = '99998'; - overlay.style.backgroundColor = 'rgba(0,0,0,0.6)'; + overlay.style.backgroundColor = 'var(--dialog-backdrop, rgba(0,0,0,0.6))'; overlay.style.position = 'fixed'; overlay.style.top = '0'; overlay.style.left = '0'; overlay.style.right = '0'; overlay.style.bottom = '0'; overlay.style.backdropFilter = 'blur(4px)'; @@ -129,19 +139,25 @@ dialog.style.zIndex = '99999'; dialog.style.padding = '2em'; dialog.style.minWidth = '320px'; - dialog.style.backgroundColor = '#1a1a1a'; - dialog.style.borderRadius = '1.5em'; - dialog.style.color = 'white'; + dialog.style.backgroundColor = 'var(--theme-body-background)'; + dialog.style.borderRadius = '1em'; + dialog.style.color = 'var(--theme-body-color)'; dialog.style.boxShadow = '0 10px 25px rgba(0,0,0,0.5)'; - dialog.style.border = '1px solid #333'; + dialog.style.border = '1px solid var(--theme-light-btn-border-color, transparent)'; dialog.innerHTML = ` -

${title}

-
-
- +

${title}

+
+
+
`; + const content = dialog.querySelector('.dialog-content'); + content.style.margin = '1.5em 0'; + const footer = dialog.querySelector('.dialog-footer'); + footer.style.display = 'flex'; + footer.style.gap = '1em'; + dialog.querySelector('.btnCancel').style.flex = '1'; return dialog; } @@ -149,15 +165,19 @@ const overlay = createOverlay(); const dialog = createDialogBase('Rate on MovieNight'); const content = dialog.querySelector('.dialog-content'); - - content.innerHTML = `
`; - const grid = content.querySelector('.rating-grid'); + const grid = document.createElement('div'); + grid.className = 'rating-grid'; + grid.style.display = 'grid'; + grid.style.gridTemplateColumns = 'repeat(5, 1fr)'; + grid.style.gap = '0.6em'; + content.appendChild(grid); const cleanup = () => { if (overlay.parentNode) document.body.removeChild(overlay); }; for (let i = 1; i <= 10; i++) { const btn = document.createElement('button'); - btn.type = 'button'; btn.is = 'emby-button'; + btn.type = 'button'; + btn.setAttribute('is', 'emby-button'); btn.className = 'emby-button raised'; btn.innerText = i; btn.style.padding = '0.8em 0'; @@ -205,6 +225,7 @@ }; dialog.querySelector('.btnCancel').onclick = cleanup; + dialog.querySelector('.btnCancel').style.width = '100%'; overlay.onclick = (e) => { if (e.target === overlay) cleanup(); }; overlay.appendChild(dialog); document.body.appendChild(overlay);