diff --git a/src/apps/dashboard/routes/users/parentalcontrol.tsx b/src/apps/dashboard/routes/users/parentalcontrol.tsx index 20e338b6034..73abd265c0c 100644 --- a/src/apps/dashboard/routes/users/parentalcontrol.tsx +++ b/src/apps/dashboard/routes/users/parentalcontrol.tsx @@ -65,6 +65,7 @@ const UserParentalControl = () => { const [ userName, setUserName ] = useState(''); const [ parentalRatings, setParentalRatings ] = useState([]); const [ unratedItems, setUnratedItems ] = useState([]); + const [ maxParentalRating, setMaxParentalRating ] = useState(); const [ accessSchedules, setAccessSchedules ] = useState([]); const [ allowedTags, setAllowedTags ] = useState([]); const [ blockedTags, setBlockedTags ] = useState([]); @@ -163,15 +164,13 @@ const UserParentalControl = () => { populateRatings(allParentalRatings); let ratingValue = ''; - if (user.Policy?.MaxParentalRating) { - allParentalRatings.forEach(rating => { - if (rating.Value && user.Policy?.MaxParentalRating && user.Policy.MaxParentalRating >= rating.Value) { - ratingValue = `${rating.Value}`; - } - }); - } + allParentalRatings.forEach(rating => { + if (rating.Value != null && user.Policy?.MaxParentalRating != null && user.Policy.MaxParentalRating >= rating.Value) { + ratingValue = `${rating.Value}`; + } + }); - (page.querySelector('#selectMaxParentalRating') as HTMLSelectElement).value = String(ratingValue); + setMaxParentalRating(ratingValue); if (user.Policy?.IsAdministrator) { (page.querySelector('.accessScheduleSection') as HTMLDivElement).classList.add('hide'); @@ -329,11 +328,24 @@ const UserParentalControl = () => { }; }, [setAllowedTags, setBlockedTags, loadData, userId]); + useEffect(() => { + const page = element.current; + + if (!page) { + console.error('[userparentalcontrol] Unexpected null page reference'); + return; + } + + (page.querySelector('#selectMaxParentalRating') as HTMLSelectElement).value = String(maxParentalRating); + }, [maxParentalRating, parentalRatings]); + const optionMaxParentalRating = () => { let content = ''; content += ''; for (const rating of parentalRatings) { - content += ``; + if (rating.Value != null) { + content += ``; + } } return content; }; diff --git a/src/components/dialogHelper/dialogHelper.js b/src/components/dialogHelper/dialogHelper.js index 29b4397b776..56f338ca601 100644 --- a/src/components/dialogHelper/dialogHelper.js +++ b/src/components/dialogHelper/dialogHelper.js @@ -43,7 +43,7 @@ function tryRemoveElement(elem) { } } -function DialogHashHandler(dlg, hash, resolve, dlgOptions) { +function DialogHashHandler(dlg, hash, resolve) { const self = this; self.originalUrl = window.location.href; const activeElement = document.activeElement; @@ -158,7 +158,7 @@ function DialogHashHandler(dlg, hash, resolve, dlgOptions) { dlg.classList.remove('hide'); - addBackdropOverlay(dlg, dlgOptions); + addBackdropOverlay(dlg); dlg.classList.add('opened'); dlg.dispatchEvent(new CustomEvent('open', { @@ -193,7 +193,7 @@ function DialogHashHandler(dlg, hash, resolve, dlgOptions) { } } -function addBackdropOverlay(dlg, dlgOptions = {}) { +function addBackdropOverlay(dlg) { const backdrop = document.createElement('div'); backdrop.classList.add('dialogBackdrop'); @@ -205,33 +205,35 @@ function addBackdropOverlay(dlg, dlgOptions = {}) { void backdrop.offsetWidth; backdrop.classList.add('dialogBackdropOpened'); - if (!dlgOptions.preventCloseOnClick) { - dom.addEventListener((dlg.dialogContainer || backdrop), 'click', e => { - if (e.target === dlg.dialogContainer) { - close(dlg); - } - }, { - passive: true - }); - } + let clickedElement; - if (!dlgOptions.preventCloseOnRightClick) { - dom.addEventListener((dlg.dialogContainer || backdrop), 'contextmenu', e => { - if (e.target === dlg.dialogContainer) { - // Close the application dialog menu - close(dlg); - // Prevent the default browser context menu from appearing - e.preventDefault(); - } - }); - } + dom.addEventListener((dlg.dialogContainer || backdrop), 'mousedown', e => { + clickedElement = e.target; + }); + + dom.addEventListener((dlg.dialogContainer || backdrop), 'click', e => { + if (e.target === dlg.dialogContainer && e.target == clickedElement) { + close(dlg); + } + }, { + passive: true + }); + + dom.addEventListener((dlg.dialogContainer || backdrop), 'contextmenu', e => { + if (e.target === dlg.dialogContainer) { + // Close the application dialog menu + close(dlg); + // Prevent the default browser context menu from appearing + e.preventDefault(); + } + }); } function isHistoryEnabled(dlg) { return dlg.getAttribute('data-history') === 'true'; } -export function open(dlg, dlgOptions) { +export function open(dlg) { if (globalOnOpenCallback) { globalOnOpenCallback(dlg); } @@ -248,7 +250,7 @@ export function open(dlg, dlgOptions) { document.body.appendChild(dialogContainer); return new Promise((resolve) => { - new DialogHashHandler(dlg, `dlg${new Date().getTime()}`, resolve, dlgOptions); + new DialogHashHandler(dlg, `dlg${new Date().getTime()}`, resolve); }); } diff --git a/src/components/metadataEditor/metadataEditor.js b/src/components/metadataEditor/metadataEditor.js index 1769ac52534..7cd3b907e28 100644 --- a/src/components/metadataEditor/metadataEditor.js +++ b/src/components/metadataEditor/metadataEditor.js @@ -1099,10 +1099,7 @@ function show(itemId, serverId, resolve) { centerFocus(dlg.querySelector('.formDialogContent'), false, true); } - dialogHelper.open(dlg, { - preventCloseOnClick : true, - preventCloseOnRightClick : true - }); + dialogHelper.open(dlg); dlg.addEventListener('close', function () { if (layoutManager.tv) { diff --git a/src/styles/videoosd.scss b/src/styles/videoosd.scss index 9732a11517f..73e2cebd593 100644 --- a/src/styles/videoosd.scss +++ b/src/styles/videoosd.scss @@ -172,14 +172,8 @@ margin-left: auto; } -@keyframes spin { - 100% { - transform: rotate(360deg); - } -} - .osdMediaStatus .animate { - animation: spin 4s linear infinite; + animation: spin-clockwise 4s linear infinite; } @media all and (max-width: 30em) { @@ -236,7 +230,7 @@ .primary-icon.spin { font-size: 76px !important; - animation: spin 2s linear infinite; + animation: spin-counterclockwise 2s linear infinite; } .secondary-icon { @@ -326,8 +320,14 @@ } } -@keyframes spin { +@keyframes spin-counterclockwise { 100% { transform: rotate(-360deg); } } + +@keyframes spin-clockwise { + 100% { + transform: rotate(360deg); + } +}