Replace viewitemcontainer api

package.json

@@ -68,6 +68,8 @@
     "worker-loader": "3.0.8"
   },
   "dependencies": {
+    "@emotion/react": "11.10.5",
+    "@emotion/styled": "11.10.5",
     "@fontsource/noto-sans": "4.5.11",
     "@fontsource/noto-sans-hk": "4.5.12",
     "@fontsource/noto-sans-jp": "4.5.12",
@@ -77,6 +79,10 @@
     "@jellyfin/libass-wasm": "4.1.1",
     "@jellyfin/sdk": "unstable",
     "@loadable/component": "5.15.3",
+    "@mui/icons-material": "5.11.0",
+    "@mui/material": "5.11.2",
+    "@tanstack/react-query": "4.20.4",
+    "@tanstack/react-query-devtools": "4.20.4",
     "blurhash": "2.0.5",
     "classlist.js": "https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz",
     "classnames": "2.3.2",
@@ -103,10 +109,12 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-router-dom": "6.9.0",
+    "react-uuid": "2.0.0",
     "resize-observer-polyfill": "1.5.1",
     "screenfull": "6.0.2",
     "sortablejs": "1.15.0",
     "swiper": "8.4.7",
+    "use-local-storage-state": "17.2.0",
     "webcomponents.js": "0.7.24",
     "whatwg-fetch": "3.6.2",
     "workbox-core": "6.5.4",

src/App.tsx

@@ -1,17 +1,27 @@
 import { History } from '@remix-run/router';
 import React from 'react';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import { HistoryRouter } from './components/HistoryRouter';
 import { ApiProvider } from './hooks/useApi';
 import AppRoutes from './routes/index';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ThemeConfigProvider } from './hooks/useThemeConfig';
+
+const queryClient = new QueryClient();
 
 const App = ({ history }: { history: History }) => {
     return (
-        <ApiProvider>
-            <HistoryRouter history={history}>
-                <AppRoutes />
-            </HistoryRouter>
-        </ApiProvider>
+        <QueryClientProvider client={queryClient}>
+            <ApiProvider>
+                <ThemeConfigProvider>
+                    <HistoryRouter history={history}>
+                        <AppRoutes/>
+                    </HistoryRouter>
+                </ThemeConfigProvider>
+            </ApiProvider>
+            <ReactQueryDevtools initialIsOpen={false} />
+        </QueryClientProvider>
     );
 };
 

src/apiclient.d.ts

@@ -78,7 +78,7 @@ declare module 'jellyfin-apiclient' {
         addVirtualFolder(name: string, type?: string, refreshLibrary?: boolean, libraryOptions?: any): Promise<void>;
         appName(): string;
         appVersion(): string;
-        authenticateUserByName(name: string, password: string): Promise<AuthenticationResult>;
+        authenticateUserByName(name: string | null, password: string | null): Promise<AuthenticationResult>;
         cancelLiveTvSeriesTimer(id: string): Promise<void>;
         cancelLiveTvTimer(id: string): Promise<void>;
         cancelSyncItems(itemIds: string[], targetId?: string): Promise<void>;
@@ -95,7 +95,7 @@ declare module 'jellyfin-apiclient' {
         deleteItem(itemId: string): Promise<void>;
         deleteLiveTvRecording(id: string): Promise<void>;
         deleteUserImage(userId: string, imageType: ImageType, imageIndex?: number): Promise<void>;
-        deleteUser(userId: string): Promise<void>;
+        deleteUser(userId: string | undefined): Promise<void>;
         detectBitrate(force: boolean): Promise<number>;
         deviceId(): string;
         deviceName(): string;
@@ -211,7 +211,7 @@ declare module 'jellyfin-apiclient' {
         get(url: string): Promise<any>;
         getUserImageUrl(userId: string, options?: any): string;
         getUsers(options?: any): Promise<UserDto[]>;
-        getUser(userId: string): Promise<UserDto>;
+        getUser(userId: string | undefined | null): Promise<UserDto>;
         getUserViews(options?: any, userId: string): Promise<BaseItemDtoQueryResult>;
         getVirtualFolders(): Promise<VirtualFolderInfo[]>;
         handleMessageReceived(msg: any): void;
@@ -255,9 +255,9 @@ declare module 'jellyfin-apiclient' {
         requestSyncPlaySetRepeatMode(options?: SetRepeatModeRequestDto): Promise<void>;
         requestSyncPlaySetShuffleMode(options?: SetShuffleModeRequestDto): Promise<void>;
         requestSyncPlayUnpause(): Promise<void>;
-        resetEasyPassword(userId: string): Promise<void>;
+        resetEasyPassword(userId: string | null | undefined): Promise<void>;
         resetLiveTvTuner(id: string): Promise<void>;
-        resetUserPassword(userId: string): Promise<void>;
+        resetUserPassword(userId: string | null | undefined): Promise<void>;
         restartServer(): Promise<void>;
         sendCommand(sessionId: string, command: any): Promise<void>;
         sendMessageCommand(sessionId: string, options: GeneralCommand): Promise<void>;
@@ -280,7 +280,7 @@ declare module 'jellyfin-apiclient' {
         uninstallPluginByVersion(id: string, version: string): Promise<void>;
         uninstallPlugin(id: string): Promise<void>;
         updateDisplayPreferences(id: string, obj: DisplayPreferencesDto, userId: string, app: string): Promise<void>;
-        updateEasyPassword(userId: string, newPassword: string): Promise<void>;
+        updateEasyPassword(userId: string | null | undefined, newPassword: string): Promise<void>;
         updateFavoriteStatus(userId: string, itemId: string, isFavorite: boolean): Promise<UserItemDataDto>;
         updateItemImageIndex(itemId: string, imageType: ImageType, imageIndex: number, newIndex: number): Promise<any>;
         updateItem(item: BaseItemDto): Promise<void>;
@@ -295,13 +295,14 @@ declare module 'jellyfin-apiclient' {
         updateServerInfo(server: any, serverUrl: string): void;
         updateUserConfiguration(userId: string, configuration: UserConfiguration): Promise<void>;
         updateUserItemRating(userId: string, itemId: string, likes: boolean): Promise<UserItemDataDto>;
-        updateUserPassword(userId: string, currentPassword: string, newPassword: string): Promise<void>;
+        updateUserPassword(userId: string | null | undefined, currentPassword: string, newPassword: string): Promise<void>;
         updateUserPolicy(userId: string, policy: UserPolicy): Promise<void>;
         updateUser(user: UserDto): Promise<void>;
         updateVirtualFolderOptions(id: string, libraryOptions?: any): Promise<void>;
         uploadItemImage(itemId: string, imageType: ImageType, file: File): Promise<void>;
         uploadItemSubtitle(itemId: string, language: string, isForced: boolean, file: File): Promise<void>;
         uploadUserImage(userId: string, imageType: ImageType, file: File): Promise<void>;
+        ajax(arg0: { type: string; url: string; }, arg1: boolean): Promise<any>;
     }
 
     class AppStore {

src/components/ConnectionRequired.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useEffect, useState } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import type { ConnectResponse } from 'jellyfin-apiclient';
 
@@ -8,6 +8,8 @@ import Loading from './loading/LoadingComponent';
 import ServerConnections from './ServerConnections';
 import globalize from '../scripts/globalize';
 import { ConnectionState } from '../utils/jellyfin-apiclient/ConnectionState';
+import { useThemeConfig } from '../hooks/useThemeConfig';
+import { getMUIThemeMode } from '../utils/items';
 
 enum BounceRoutes {
     Home = '/home.html',
@@ -26,12 +28,13 @@ type ConnectionRequiredProps = {
  * Additional parameters exist to verify a user or admin have authenticated.
  * If a condition fails, this component will navigate to the appropriate page.
  */
-const ConnectionRequired: FunctionComponent<ConnectionRequiredProps> = ({
+const ConnectionRequired: FC<ConnectionRequiredProps> = ({
     isAdminRequired = false,
     isUserRequired = true
 }) => {
     const navigate = useNavigate();
     const location = useLocation();
+    const { setMode } = useThemeConfig();
 
     const [ isLoading, setIsLoading ] = useState(true);
 
@@ -144,7 +147,12 @@ const ConnectionRequired: FunctionComponent<ConnectionRequiredProps> = ({
         };
 
         validateConnection();
-    }, [ isAdminRequired, isUserRequired, location.pathname, navigate ]);
+
+        //  Todo - remove when migration MUI complete
+        //  set MUI-ThemeMode - switches between dark and light themes based on user themes change
+        const currentMode = getMUIThemeMode(isAdminRequired);
+        setMode(currentMode);
+    }, [isAdminRequired, isUserRequired, location.pathname, navigate, setMode]);
 
     if (isLoading) {
         return <Loading />;

src/components/Page.tsx

@@ -1,5 +1,4 @@
-import React, { FunctionComponent, HTMLAttributes, useEffect, useRef } from 'react';
-
+import React, { FC, HTMLAttributes, useEffect, useRef } from 'react';
 import viewManager from './viewManager/viewManager';
 
 type PageProps = {
@@ -9,14 +8,15 @@ type PageProps = {
     isMenuButtonEnabled?: boolean,
     isNowPlayingBarEnabled?: boolean,
     isThemeMediaSupported?: boolean,
-    backDropType?: string
+    backDropType?: string,
+    topParentId?: string | null
 };
 
 /**
  * Page component that handles hiding active non-react views, triggering the required events for
  * navigation and appRouter state updates, and setting the correct classes and data attributes.
  */
-const Page: FunctionComponent<PageProps & HTMLAttributes<HTMLDivElement>> = ({
+const Page: FC<PageProps & HTMLAttributes<HTMLDivElement>> = ({
     children,
     id,
     className = '',
@@ -25,10 +25,10 @@ const Page: FunctionComponent<PageProps & HTMLAttributes<HTMLDivElement>> = ({
     isMenuButtonEnabled = false,
     isNowPlayingBarEnabled = true,
     isThemeMediaSupported = false,
-    backDropType
+    backDropType,
+    topParentId
 }) => {
     const element = useRef<HTMLDivElement>(null);
-
     useEffect(() => {
         // hide active non-react views
         viewManager.hideView();
@@ -54,7 +54,7 @@ const Page: FunctionComponent<PageProps & HTMLAttributes<HTMLDivElement>> = ({
         element.current?.dispatchEvent(new CustomEvent('viewshow', event));
         // pageshow - updates header/navigation in libraryMenu
         element.current?.dispatchEvent(new CustomEvent('pageshow', event));
-    }, [ element, isNowPlayingBarEnabled, isThemeMediaSupported ]);
+    }, [element, isNowPlayingBarEnabled, isThemeMediaSupported, topParentId]);
 
     return (
         <div
@@ -66,6 +66,7 @@ const Page: FunctionComponent<PageProps & HTMLAttributes<HTMLDivElement>> = ({
             data-backbutton={isBackButtonEnabled}
             data-menubutton={isMenuButtonEnabled}
             data-backdroptype={backDropType}
+            style={{ position: 'relative' }}
         >
             {children}
         </div>

src/components/ServerContentPage.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useEffect } from 'react';
+import React, { FC, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import ServerConnections from './ServerConnections';
@@ -13,7 +13,7 @@ interface ServerContentPageProps {
  * Page component that renders html content from a server request.
  * Uses the ViewManager to dynamically load and execute the page JS.
  */
-const ServerContentPage: FunctionComponent<ServerContentPageProps> = ({ view }) => {
+const ServerContentPage: FC<ServerContentPageProps> = ({ view }) => {
     const location = useLocation();
 
     useEffect(() => {

src/components/accessSchedule/accessSchedule.template.html

@@ -19,9 +19,9 @@ <h3 class="formDialogHeaderTitle">
                     <option value="Thursday">${Thursday}</option>
                     <option value="Friday">${Friday}</option>
                     <option value="Saturday">${Saturday}</option>
-                    <option value="Everyday">${OptionEveryday}</option>
-                    <option value="Weekday">${OptionWeekdays}</option>
-                    <option value="Weekend">${OptionWeekends}</option>
+                    <option value="Everyday">${Everyday}</option>
+                    <option value="Weekday">${Weekdays}</option>
+                    <option value="Weekend">${Weekends}</option>
                 </select>
             </div>
             <div class="selectContainer">

src/components/alphaPicker/AlphaPickerComponent.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useEffect, useRef, useState } from 'react';
+import React, { FC, useEffect, useRef, useState } from 'react';
 
 import AlphaPicker from './alphaPicker';
 
@@ -8,7 +8,7 @@ type AlphaPickerProps = {
 
 // React compatibility wrapper component for alphaPicker.js
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-const AlphaPickerComponent: FunctionComponent<AlphaPickerProps> = ({ onAlphaPicked = () => {} }: AlphaPickerProps) => {
+const AlphaPickerComponent: FC<AlphaPickerProps> = ({ onAlphaPicked = () => {} }) => {
     const [ alphaPicker, setAlphaPicker ] = useState<AlphaPicker>();
     const element = useRef<HTMLDivElement>(null);
 

src/components/appRouter.js

@@ -639,7 +639,7 @@ class AppRouter {
                 url = '#/movies.html?topParentId=' + item.Id;
 
                 if (options && options.section === 'latest') {
-                    url += '&tab=1';
+                    url += '&tab=suggestions';
                 }
 
                 return url;
@@ -649,7 +649,7 @@ class AppRouter {
                 url = '#/tv.html?topParentId=' + item.Id;
 
                 if (options && options.section === 'latest') {
-                    url += '&tab=1';
+                    url += '&tab=suggestions';
                 }
 
                 return url;
@@ -659,7 +659,7 @@ class AppRouter {
                 url = '#/music.html?topParentId=' + item.Id;
 
                 if (options?.section === 'latest') {
-                    url += '&tab=1';
+                    url += '&tab=suggestions';
                 }
 
                 return url;

src/components/autoFocuser.js

@@ -37,7 +37,7 @@ import layoutManager from './layoutManager';
 
     /**
      * Set focus on a suitable element, taking into account the previously selected.
-     * @param {HTMLElement} [container] - Element to limit scope.
+     * @param {HTMLElement | null} [container] - Element to limit scope.
      * @returns {HTMLElement} Focused element.
      */
     export function autoFocus(container) {

src/components/common/AlphaPickerContainer.tsx

@@ -1,21 +1,21 @@
 import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
 import AlphaPicker from '../alphaPicker/alphaPicker';
-import { ViewQuerySettings } from '../../types/interface';
+import { ViewUserSettings } from '../../types/interface';
 
 interface AlphaPickerContainerProps {
-    viewQuerySettings: ViewQuerySettings;
-    setViewQuerySettings: React.Dispatch<React.SetStateAction<ViewQuerySettings>>;
+    viewUserSettings: ViewUserSettings;
+    setViewUserSettings: React.Dispatch<React.SetStateAction<ViewUserSettings>>;
 }
 
-const AlphaPickerContainer: FC<AlphaPickerContainerProps> = ({ viewQuerySettings, setViewQuerySettings }) => {
+const AlphaPickerContainer: FC<AlphaPickerContainerProps> = ({ viewUserSettings, setViewUserSettings }) => {
     const [ alphaPicker, setAlphaPicker ] = useState<AlphaPicker>();
     const element = useRef<HTMLDivElement>(null);
 
-    alphaPicker?.updateControls(viewQuerySettings);
+    alphaPicker?.updateControls(viewUserSettings);
 
     const onAlphaPickerChange = useCallback((e) => {
         const newValue = (e as CustomEvent).detail.value;
-        let updatedValue: React.SetStateAction<ViewQuerySettings>;
+        let updatedValue: React.SetStateAction<ViewUserSettings>;
         if (newValue === '#') {
             updatedValue = {
                 NameLessThan: 'A',
@@ -27,12 +27,12 @@ const AlphaPickerContainer: FC<AlphaPickerContainerProps> = ({ viewQuerySettings
                 NameStartsWith: newValue
             };
         }
-        setViewQuerySettings((prevState) => ({
+        setViewUserSettings((prevState) => ({
             ...prevState,
             StartIndex: 0,
             ...updatedValue
         }));
-    }, [setViewQuerySettings]);
+    }, [setViewUserSettings]);
 
     useEffect(() => {
         const alphaPickerElement = element.current;