ITQ/movienight-backend
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Jellyfin UI review feedback in ui.js

Browse Source 
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>
This commit is contained in:
copilot-swe-agent[bot]
2026-05-22 06:53:38 +00:00
committed by GitHub
co-authored by devitq
parent 60756e376c
commit 5303b4e092
1 changed files with 51 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/jellyfin/Jellyfin.Plugin.MovieNight/Configuration/ui.js
+51 -30
View File
@@ -16,11 +16,13 @@
function createTextButton(text, className, onClick) { function createTextButton(text, className, onClick) {
const btn = document.createElement('button'); const btn = document.createElement('button');
btn.type = 'button'; btn.type = 'button';
btn.is = 'emby-button'; btn.setAttribute('is', 'emby-button');
btn.className = `emby-button raised ${className}`; btn.className = `emby-button raised ${className}`;
btn.style.margin = '0.5em'; btn.style.margin = '0.5em';
btn.style.padding = '0.4em 1em'; btn.style.padding = '0.4em 1em';
btn.innerHTML = `<span>${text}</span>`; const span = document.createElement('span');
span.textContent = text;
btn.appendChild(span);
btn.onclick = onClick; btn.onclick = onClick;
return btn; return btn;
} }
@@ -28,14 +30,18 @@
function createIconButton(icon, title, className, onClick) { function createIconButton(icon, title, className, onClick) {
const btn = document.createElement('button'); const btn = document.createElement('button');
btn.type = 'button'; btn.type = 'button';
btn.is = 'emby-button'; btn.setAttribute('is', 'emby-button');
btn.className = `button-flat detailButton emby-button ${className}`; btn.className = `button-flat detailButton emby-button ${className}`;
btn.title = title; btn.title = title;
btn.innerHTML = ` btn.setAttribute('aria-label', title);
<div class="detailButton-content"> const content = document.createElement('div');
<span class="material-icons detailButton-icon ${icon}" aria-hidden="true"></span> content.className = 'detailButton-content';
</div> 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; btn.onclick = onClick;
return btn; return btn;
} }
@@ -47,14 +53,14 @@
const itemId = getItemIdFromUrl(); const itemId = getItemIdFromUrl();
if (itemId) { if (itemId) {
// MovieNight Rating // MovieNight Rating
if (!document.querySelector('.btnMovieNightRate')) { if (!detailButtons.querySelector('.btnMovieNightRate')) {
const rateBtn = createIconButton('star_rate', 'Rate on MovieNight', 'btnMovieNightRate', (e) => { const rateBtn = createIconButton('star_rate', 'Rate on MovieNight', 'btnMovieNightRate', (e) => {
e.preventDefault(); e.stopPropagation(); showRatingDialog(itemId); e.preventDefault(); e.stopPropagation(); showRatingDialog(itemId);
}); });
insertInDetailRow(detailButtons, rateBtn); insertInDetailRow(detailButtons, rateBtn);
} }
// Mark Viewed in MovieNight // Mark Viewed in MovieNight
if (!document.querySelector('.btnMovieNightMarkViewed')) { if (!detailButtons.querySelector('.btnMovieNightMarkViewed')) {
const viewedBtn = createIconButton('visibility', 'Mark Viewed in MovieNight', 'btnMovieNightMarkViewed', (e) => { const viewedBtn = createIconButton('visibility', 'Mark Viewed in MovieNight', 'btnMovieNightMarkViewed', (e) => {
e.preventDefault(); e.stopPropagation(); submitViewed(itemId); e.preventDefault(); e.stopPropagation(); submitViewed(itemId);
}); });
@@ -65,13 +71,17 @@
// 2. Library Pages - Add text buttons to toolbar // 2. Library Pages - Add text buttons to toolbar
const toolBar = document.querySelector('.libraryPage:not(.itemDetailPage) .flex.align-items-center.justify-content-center.focuscontainer-x'); const toolBar = document.querySelector('.libraryPage:not(.itemDetailPage) .flex.align-items-center.justify-content-center.focuscontainer-x');
if (toolBar && !document.querySelector('.btnMovieNightRecommend')) { if (toolBar) {
toolBar.appendChild(createTextButton('Recommend Film', 'btnMovieNightRecommend', (e) => { if (!toolBar.querySelector('.btnMovieNightRecommend')) {
e.preventDefault(); showRecommendation(); toolBar.appendChild(createTextButton('Recommend Film', 'btnMovieNightRecommend', (e) => {
})); e.preventDefault(); showRecommendation();
toolBar.appendChild(createTextButton('Add Movie (STRM)', 'btnMovieNightAddMovie', (e) => { }));
e.preventDefault(); showAddMovieDialog(); }
})); if (!toolBar.querySelector('.btnMovieNightAddMovie')) {
toolBar.appendChild(createTextButton('Add Movie (STRM)', 'btnMovieNightAddMovie', (e) => {
e.preventDefault(); showAddMovieDialog();
}));
}
} }
// 3. Home Page - Prepend a MovieNight section // 3. Home Page - Prepend a MovieNight section
@@ -113,7 +123,7 @@
const overlay = document.createElement('div'); const overlay = document.createElement('div');
overlay.className = 'dialogBackdrop dialogBackdropOpened'; overlay.className = 'dialogBackdrop dialogBackdropOpened';
overlay.style.zIndex = '99998'; 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.position = 'fixed';
overlay.style.top = '0'; overlay.style.left = '0'; overlay.style.right = '0'; overlay.style.bottom = '0'; overlay.style.top = '0'; overlay.style.left = '0'; overlay.style.right = '0'; overlay.style.bottom = '0';
overlay.style.backdropFilter = 'blur(4px)'; overlay.style.backdropFilter = 'blur(4px)';
@@ -129,19 +139,25 @@
dialog.style.zIndex = '99999'; dialog.style.zIndex = '99999';
dialog.style.padding = '2em'; dialog.style.padding = '2em';
dialog.style.minWidth = '320px'; dialog.style.minWidth = '320px';
dialog.style.backgroundColor = '#1a1a1a'; dialog.style.backgroundColor = 'var(--theme-body-background)';
dialog.style.borderRadius = '1.5em'; dialog.style.borderRadius = '1em';
dialog.style.color = 'white'; dialog.style.color = 'var(--theme-body-color)';
dialog.style.boxShadow = '0 10px 25px rgba(0,0,0,0.5)'; 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 = ` dialog.innerHTML = `
<h2 style="margin-top:0; text-align:center; font-weight:400;">${title}</h2> <h2 class="dialogTitle">${title}</h2>
<div class="dialog-content" style="margin:1.5em 0;"></div> <div class="dialog-content"></div>
<div class="dialog-footer" style="display:flex; gap:1em;"> <div class="dialog-footer">
<button is="emby-button" class="emby-button button-flat btnCancel" style="flex:1; color: white;">Cancel</button> <button is="emby-button" class="emby-button button-flat btnCancel">Cancel</button>
</div> </div>
`; `;
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; return dialog;
} }
@@ -149,15 +165,19 @@
const overlay = createOverlay(); const overlay = createOverlay();
const dialog = createDialogBase('Rate on MovieNight'); const dialog = createDialogBase('Rate on MovieNight');
const content = dialog.querySelector('.dialog-content'); const content = dialog.querySelector('.dialog-content');
const grid = document.createElement('div');
content.innerHTML = `<div class="rating-grid" style="display:grid; grid-template-columns:repeat(5, 1fr); gap:0.6em;"></div>`; grid.className = 'rating-grid';
const grid = content.querySelector('.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); }; const cleanup = () => { if (overlay.parentNode) document.body.removeChild(overlay); };
for (let i = 1; i <= 10; i++) { for (let i = 1; i <= 10; i++) {
const btn = document.createElement('button'); 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.className = 'emby-button raised';
btn.innerText = i; btn.innerText = i;
btn.style.padding = '0.8em 0'; btn.style.padding = '0.8em 0';
@@ -205,6 +225,7 @@
}; };
dialog.querySelector('.btnCancel').onclick = cleanup; dialog.querySelector('.btnCancel').onclick = cleanup;
dialog.querySelector('.btnCancel').style.width = '100%';
overlay.onclick = (e) => { if (e.target === overlay) cleanup(); }; overlay.onclick = (e) => { if (e.target === overlay) cleanup(); };
overlay.appendChild(dialog); overlay.appendChild(dialog);
document.body.appendChild(overlay); document.body.appendChild(overlay);