diff --git a/src/apps/dashboard/routes/users/access.tsx b/src/apps/dashboard/routes/users/access.tsx index 25489d2d65..e55c94412a 100644 --- a/src/apps/dashboard/routes/users/access.tsx +++ b/src/apps/dashboard/routes/users/access.tsx @@ -1,9 +1,8 @@ import type { BaseItemDto, DeviceInfoDto, UserDto } from '@jellyfin/sdk/lib/generated-client'; -import React, { useCallback, useEffect, useState, useRef } from 'react'; +import React, { useCallback, useEffect, useState, useRef, useMemo } from 'react'; import { useSearchParams } from 'react-router-dom'; import loading from '../../../../components/loading/loading'; -import libraryMenu from '../../../../scripts/libraryMenu'; import globalize from '../../../../lib/globalize'; import toast from '../../../../components/toast/toast'; import SectionTabs from '../../../../components/dashboard/users/SectionTabs'; @@ -28,6 +27,7 @@ const UserLibraryAccess = () => { const [channelsItems, setChannelsItems] = useState([]); const [mediaFoldersItems, setMediaFoldersItems] = useState([]); const [devicesItems, setDevicesItems] = useState([]); + const libraryMenu = useMemo(async () => ((await import('../../../../scripts/libraryMenu')).default), []); const element = useRef(null); @@ -133,7 +133,7 @@ const UserLibraryAccess = () => { const loadUser = useCallback((user: UserDto, mediaFolders: BaseItemDto[], channels: BaseItemDto[], devices: DeviceInfoDto[]) => { setUserName(user.Name || ''); - libraryMenu.setTitle(user.Name); + void libraryMenu.then(menu => menu.setTitle(user.Name)); loadChannels(user, channels); loadMediaFolders(user, mediaFolders); loadDevices(user, devices); diff --git a/src/apps/dashboard/routes/users/parentalcontrol.tsx b/src/apps/dashboard/routes/users/parentalcontrol.tsx index 754129cec7..867cc2d043 100644 --- a/src/apps/dashboard/routes/users/parentalcontrol.tsx +++ b/src/apps/dashboard/routes/users/parentalcontrol.tsx @@ -2,11 +2,10 @@ import type { AccessSchedule, ParentalRating, UserDto } from '@jellyfin/sdk/lib/ import { UnratedItem } from '@jellyfin/sdk/lib/generated-client/models/unrated-item'; import { DynamicDayOfWeek } from '@jellyfin/sdk/lib/generated-client/models/dynamic-day-of-week'; import escapeHTML from 'escape-html'; -import React, { useCallback, useEffect, useState, useRef } from 'react'; +import React, { useCallback, useEffect, useState, useRef, useMemo } from 'react'; import { useSearchParams } from 'react-router-dom'; import globalize from '../../../../lib/globalize'; -import LibraryMenu from '../../../../scripts/libraryMenu'; import AccessScheduleList from '../../../../components/dashboard/users/AccessScheduleList'; import TagList from '../../../../components/dashboard/users/TagList'; import ButtonElement from '../../../../elements/ButtonElement'; @@ -69,6 +68,7 @@ const UserParentalControl = () => { const [ accessSchedules, setAccessSchedules ] = useState([]); const [ allowedTags, setAllowedTags ] = useState([]); const [ blockedTags, setBlockedTags ] = useState([]); + const libraryMenu = useMemo(async () => ((await import('../../../../scripts/libraryMenu')).default), []); const element = useRef(null); @@ -219,7 +219,7 @@ const UserParentalControl = () => { } setUserName(user.Name || ''); - LibraryMenu.setTitle(user.Name); + void libraryMenu.then(menu => menu.setTitle(user.Name)); loadUnratedItems(user); loadAllowedTags(user.Policy?.AllowedTags || []); diff --git a/src/apps/dashboard/routes/users/profile.tsx b/src/apps/dashboard/routes/users/profile.tsx index d441fc857e..d85cd847ff 100644 --- a/src/apps/dashboard/routes/users/profile.tsx +++ b/src/apps/dashboard/routes/users/profile.tsx @@ -5,7 +5,6 @@ import { useSearchParams } from 'react-router-dom'; import Dashboard from '../../../../utils/dashboard'; import globalize from '../../../../lib/globalize'; -import LibraryMenu from '../../../../scripts/libraryMenu'; import ButtonElement from '../../../../elements/ButtonElement'; import CheckBoxElement from '../../../../elements/CheckBoxElement'; import InputElement from '../../../../elements/InputElement'; diff --git a/src/apps/stable/routes/user/userprofile.tsx b/src/apps/stable/routes/user/userprofile.tsx index ccd05d6ad6..edd0748db4 100644 --- a/src/apps/stable/routes/user/userprofile.tsx +++ b/src/apps/stable/routes/user/userprofile.tsx @@ -1,6 +1,6 @@ import type { UserDto } from '@jellyfin/sdk/lib/generated-client'; import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type'; -import React, { FunctionComponent, useEffect, useState, useRef, useCallback } from 'react'; +import React, { FunctionComponent, useEffect, useState, useRef, useCallback, useMemo } from 'react'; import { useSearchParams } from 'react-router-dom'; import Dashboard from '../../../../utils/dashboard'; @@ -18,6 +18,7 @@ const UserProfile: FunctionComponent = () => { const [ searchParams ] = useSearchParams(); const userId = searchParams.get('userId'); const [ userName, setUserName ] = useState(''); + const libraryMenu = useMemo(async () => ((await import('../../../../scripts/libraryMenu')).default), []); const element = useRef(null); @@ -41,7 +42,7 @@ const UserProfile: FunctionComponent = () => { } setUserName(user.Name); - LibraryMenu.setTitle(user.Name); + void libraryMenu.then(menu => menu.setTitle(user.Name)); let imageUrl = 'assets/img/avatar.png'; if (user.PrimaryImageTag) { diff --git a/src/components/dashboard/users/UserPasswordForm.tsx b/src/components/dashboard/users/UserPasswordForm.tsx index 2ad67180a8..dd3eec0c57 100644 --- a/src/components/dashboard/users/UserPasswordForm.tsx +++ b/src/components/dashboard/users/UserPasswordForm.tsx @@ -1,8 +1,7 @@ -import React, { FunctionComponent, useCallback, useEffect, useRef } from 'react'; +import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef } from 'react'; import type { UserDto } from '@jellyfin/sdk/lib/generated-client'; import Dashboard from '../../../utils/dashboard'; import globalize from '../../../lib/globalize'; -import LibraryMenu from '../../../scripts/libraryMenu'; import confirm from '../../confirm/confirm'; import loading from '../../loading/loading'; import toast from '../../toast/toast'; @@ -16,6 +15,7 @@ type IProps = { const UserPasswordForm: FunctionComponent = ({ userId }: IProps) => { const element = useRef(null); const user = useRef(); + const libraryMenu = useMemo(async () => ((await import('../../../scripts/libraryMenu')).default), []); const loadUser = useCallback(async () => { const page = element.current; @@ -37,7 +37,7 @@ const UserPasswordForm: FunctionComponent = ({ userId }: IProps) => { throw new Error('Unexpected null user policy or configuration'); } - LibraryMenu.setTitle(user.current.Name); + (await libraryMenu).setTitle(user.current.Name); if (user.current.HasConfiguredPassword) { if (!user.current.Policy?.IsAdministrator) {