Merge branch 'release-10.10.z' into fix-mediasourceid

Author: Kevinjil

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "jellyfin-web",
-  "version": "10.10.3",
+  "version": "10.10.5",
   "description": "Web interface for Jellyfin",
   "repository": "https://github.com/jellyfin/jellyfin-web",
   "license": "GPL-2.0-or-later",

package.json

@@ -6,7 +6,7 @@ import ListItemButton from '@mui/material/ListItemButton/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import ListSubheader from '@mui/material/ListSubheader';
-import React, { useCallback, useState } from 'react';
+import React, { type MouseEvent, useCallback, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import ListItemLink from 'components/ListItemLink';
@@ -32,11 +32,15 @@ const ServerDrawerSection = () => {
     const [ isLibrarySectionOpen, setIsLibrarySectionOpen ] = useState(LIBRARY_PATHS.includes(location.pathname));
     const [ isPlaybackSectionOpen, setIsPlaybackSectionOpen ] = useState(PLAYBACK_PATHS.includes(location.pathname));
 
-    const onLibrarySectionClick = useCallback(() => {
+    const onLibrarySectionClick = useCallback((e: MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
         setIsLibrarySectionOpen(isOpen => !isOpen);
     }, []);
 
-    const onPlaybackSectionClick = useCallback(() => {
+    const onPlaybackSectionClick = useCallback((e: MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
         setIsPlaybackSectionOpen(isOpen => !isOpen);
     }, []);
 

src/apps/dashboard/components/drawer/sections/ServerDrawerSection.tsx

@@ -65,6 +65,7 @@ const UserParentalControl = () => {
     const [ userName, setUserName ] = useState('');
     const [ parentalRatings, setParentalRatings ] = useState<ParentalRating[]>([]);
     const [ unratedItems, setUnratedItems ] = useState<UnratedNamedItem[]>([]);
+    const [ maxParentalRating, setMaxParentalRating ] = useState<string>();
     const [ accessSchedules, setAccessSchedules ] = useState<AccessSchedule[]>([]);
     const [ allowedTags, setAllowedTags ] = useState<string[]>([]);
     const [ blockedTags, setBlockedTags ] = useState<string[]>([]);
@@ -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 += '<option value=\'\'></option>';
         for (const rating of parentalRatings) {
-            content += `<option value='${rating.Value}'>${escapeHTML(rating.Name)}</option>`;
+            if (rating.Value != null) {
+                content += `<option value='${rating.Value}'>${escapeHTML(rating.Name)}</option>`;
+            }
         }
         return content;
     };

src/apps/dashboard/routes/users/parentalcontrol.tsx

@@ -5,6 +5,8 @@ import globalize from '../../../lib/globalize';
 import { clearBackdrop } from '../../../components/backdrop/backdrop';
 import layoutManager from '../../../components/layoutManager';
 import Page from '../../../components/Page';
+import { EventType } from 'types/eventType';
+import Events from 'utils/events';
 
 import '../../../elements/emby-tabs/emby-tabs';
 import '../../../elements/emby-button/emby-button';
@@ -32,6 +34,8 @@ const Home = () => {
     const mainTabsManager = useMemo(() => import('../../../components/maintabsmanager'), []);
     const tabController = useRef<ControllerProps | null>();
     const tabControllers = useMemo<ControllerProps[]>(() => [], []);
+
+    const documentRef = useRef<Document>(document);
     const element = useRef<HTMLDivElement>(null);
 
     const setTitle = async () => {
@@ -122,25 +126,40 @@ const Home = () => {
         } else if (currentTabController?.onResume) {
             currentTabController.onResume({});
         }
-        (document.querySelector('.skinHeader') as HTMLDivElement).classList.add('noHomeButtonHeader');
+        (documentRef.current.querySelector('.skinHeader') as HTMLDivElement).classList.add('noHomeButtonHeader');
     }, [ initialTabIndex, mainTabsManager ]);
 
     const onPause = useCallback(() => {
         const currentTabController = tabController.current;
         if (currentTabController?.onPause) {
             currentTabController.onPause();
         }
-        (document.querySelector('.skinHeader') as HTMLDivElement).classList.remove('noHomeButtonHeader');
+        (documentRef.current.querySelector('.skinHeader') as HTMLDivElement).classList.remove('noHomeButtonHeader');
     }, []);
 
-    useEffect(() => {
+    const renderHome = useCallback(() => {
         void onSetTabs();
-
         void onResume();
+    }, [ onResume, onSetTabs ]);
+
+    useEffect(() => {
+        if (documentRef.current?.querySelector('.headerTabs')) {
+            renderHome();
+        }
+
         return () => {
             onPause();
         };
-    }, [ onPause, onResume, onSetTabs ]);
+    }, [onPause, renderHome]);
+
+    useEffect(() => {
+        const doc = documentRef.current;
+        if (doc) Events.on(doc, EventType.HEADER_RENDERED, renderHome);
+
+        return () => {
+            if (doc) Events.off(doc, EventType.HEADER_RENDERED, renderHome);
+        };
+    }, [ renderHome ]);
 
     return (
         <div ref={element}>

src/apps/experimental/routes/home.tsx

@@ -150,21 +150,25 @@ const ConnectionRequired: FunctionComponent<ConnectionRequiredProps> = ({
     useEffect(() => {
         // Check connection status on initial page load
         const apiClient = ServerConnections.currentApiClient();
-        const firstConnection = ServerConnections.firstConnection;
-        console.debug('[ConnectionRequired] connection state', firstConnection?.State);
-        ServerConnections.firstConnection = null;
-
-        if (firstConnection && firstConnection.State !== ConnectionState.SignedIn && !apiClient?.isLoggedIn()) {
-            handleIncompleteWizard(firstConnection)
-                .catch(err => {
-                    console.error('[ConnectionRequired] could not start wizard', err);
-                });
-        } else {
-            validateUserAccess()
-                .catch(err => {
-                    console.error('[ConnectionRequired] could not validate user access', err);
-                });
-        }
+        const connection = Promise.resolve(ServerConnections.firstConnection ? null : ServerConnections.connect());
+        connection.then(firstConnection => {
+            console.debug('[ConnectionRequired] connection state', firstConnection?.State);
+            ServerConnections.firstConnection = true;
+
+            if (firstConnection && firstConnection.State !== ConnectionState.SignedIn && !apiClient?.isLoggedIn()) {
+                handleIncompleteWizard(firstConnection)
+                    .catch(err => {
+                        console.error('[ConnectionRequired] could not start wizard', err);
+                    });
+            } else {
+                validateUserAccess()
+                    .catch(err => {
+                        console.error('[ConnectionRequired] could not validate user access', err);
+                    });
+            }
+        }).catch(err => {
+            console.error('[ConnectionRequired] failed to connect', err);
+        });
     }, [handleIncompleteWizard, validateUserAccess]);
 
     if (isLoading) {

src/components/ConnectionRequired.tsx

@@ -7,7 +7,7 @@ export default async function (text, title) {
     // Modals seem to be blocked on Web OS and Tizen 2.x
     const canUseNativeAlert = !!(
         !browser.web0s
-        && !(browser.tizenVersion && browser.tizenVersion < 3)
+        && !(browser.tizenVersion && (browser.tizenVersion < 3 || browser.tizenVersion >= 8))
         && browser.tv
         && window.alert
     );

src/components/alert.js

@@ -1,3 +1,5 @@
+@import '../../styles/mixins';
+
 .alphaPicker {
     text-align: center;
     display: flex;
@@ -11,8 +13,8 @@
 
 .alphaPicker-fixed {
     position: fixed;
-    bottom: 5.5em;
-    bottom: max(env(safe-area-inset-bottom), 5.5em);
+
+    @include conditional-max(bottom, 5.5em, env(safe-area-inset-bottom));
 }
 
 .alphaPickerRow {
@@ -45,8 +47,7 @@
 
 @media all and (max-height: 50em) {
     .alphaPicker-fixed {
-        bottom: 5em;
-        bottom: max(env(safe-area-inset-bottom), 5em);
+        @include conditional-max(bottom, 5em, env(safe-area-inset-bottom));
     }
 
     .alphaPickerButton-vertical {
@@ -105,32 +106,27 @@
 }
 
 .alphaPicker-fixed.alphaPicker-tv {
-    bottom: 1%;
-    bottom: max(env(safe-area-inset-bottom), 1%);
+    @include conditional-max(bottom, 1%, env(safe-area-inset-bottom));
 }
 
 .alphaPicker-fixed-right {
     [dir="ltr"] & {
-        right: 0.4em;
-        right: max(env(safe-area-inset-right), 0.4em);
+        @include conditional-max(right, 0.4em, env(safe-area-inset-right));
     }
 
     [dir="rtl"] & {
-        left: 0.4em;
-        left: max(env(safe-area-inset-left), 0.4em);
+        @include conditional-max(left, 0.4em, env(safe-area-inset-left));
     }
 }
 
 @media all and (min-width: 62.5em) {
     .alphaPicker-fixed-right {
         [dir="ltr"] & {
-            right: 1em;
-            right: max(env(safe-area-inset-right), 1em);
+            @include conditional-max(right, 1em, env(safe-area-inset-right));
         }
 
         [dir="rtl"] & {
-            left: 1em;
-            left: max(env(safe-area-inset-left), 1em);
+            @include conditional-max(left, 1em, env(safe-area-inset-left));
         }
     }
 }

src/components/alphaPicker/style.scss

@@ -7,7 +7,7 @@ function useNativeConfirm() {
     // webOS seems to block modals
     // Tizen 2.x seems to block modals
     return !browser.web0s
-        && !(browser.tizenVersion && browser.tizenVersion < 3)
+        && !(browser.tizenVersion && (browser.tizenVersion < 3 || browser.tizenVersion >= 8))
         && browser.tv
         && window.confirm;
 }

src/components/confirm/confirm.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);
     });
 }