diff --git a/plugins/jellyfin/Jellyfin.Plugin.MovieNight/Configuration/ui.js b/plugins/jellyfin/Jellyfin.Plugin.MovieNight/Configuration/ui.js index 4ff0ac1..33e298f 100644 --- a/plugins/jellyfin/Jellyfin.Plugin.MovieNight/Configuration/ui.js +++ b/plugins/jellyfin/Jellyfin.Plugin.MovieNight/Configuration/ui.js @@ -16,13 +16,11 @@ function createTextButton(text, className, onClick) { const btn = document.createElement('button'); btn.type = 'button'; - btn.setAttribute('is', 'emby-button'); + btn.is = 'emby-button'; btn.className = `emby-button raised ${className}`; btn.style.margin = '0.5em'; btn.style.padding = '0.4em 1em'; - const span = document.createElement('span'); - span.textContent = text; - btn.appendChild(span); + btn.innerHTML = `${text}`; btn.onclick = onClick; return btn; } @@ -30,18 +28,14 @@ function createIconButton(icon, title, className, onClick) { const btn = document.createElement('button'); btn.type = 'button'; - btn.setAttribute('is', 'emby-button'); + btn.is = 'emby-button'; btn.className = `button-flat detailButton emby-button ${className}`; btn.title = title; - 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.innerHTML = ` +
+ +
+ `; btn.onclick = onClick; return btn; } @@ -53,14 +47,14 @@ const itemId = getItemIdFromUrl(); if (itemId) { // MovieNight Rating - if (!detailButtons.querySelector('.btnMovieNightRate')) { + if (!document.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 (!detailButtons.querySelector('.btnMovieNightMarkViewed')) { + if (!document.querySelector('.btnMovieNightMarkViewed')) { const viewedBtn = createIconButton('visibility', 'Mark Viewed in MovieNight', 'btnMovieNightMarkViewed', (e) => { e.preventDefault(); e.stopPropagation(); submitViewed(itemId); }); @@ -71,17 +65,13 @@ // 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) { - 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(); - })); - } + 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(); + })); } // 3. Home Page - Prepend a MovieNight section @@ -123,7 +113,7 @@ const overlay = document.createElement('div'); overlay.className = 'dialogBackdrop dialogBackdropOpened'; overlay.style.zIndex = '99998'; - overlay.style.backgroundColor = 'var(--dialog-backdrop, rgba(0,0,0,0.6))'; + overlay.style.backgroundColor = '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)'; @@ -139,25 +129,19 @@ dialog.style.zIndex = '99999'; dialog.style.padding = '2em'; dialog.style.minWidth = '320px'; - dialog.style.backgroundColor = 'var(--theme-body-background)'; - dialog.style.borderRadius = '1em'; - dialog.style.color = 'var(--theme-body-color)'; + dialog.style.backgroundColor = '#1a1a1a'; + dialog.style.borderRadius = '1.5em'; + dialog.style.color = 'white'; dialog.style.boxShadow = '0 10px 25px rgba(0,0,0,0.5)'; - dialog.style.border = '1px solid var(--theme-light-btn-border-color, transparent)'; + dialog.style.border = '1px solid #333'; dialog.innerHTML = ` -

${title}

-
-