mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Fix home page loading with lazy

Browse source
This commit is contained in:
Bill Thornton 2024-07-16 17:05:32 -04:00
parent 175b2d6c85
commit 255d982687
5 changed files with 18 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/apps/experimental/routes/asyncRoutes/user.ts
View file

@ -1,12 +1,7 @@
import loadable from '@loadable/component';
import { AsyncRoute, AsyncRouteType } from '../../../../components/router/AsyncRoute';
export const ASYNC_USER_ROUTES: AsyncRoute[] = [
{
path: 'home.html',
// FIXME: The use of tab manager for the home screen breaks when using lazy route handling
Component: loadable(() => import('../home'))
},
{ path: 'home.html', page: 'home', type: AsyncRouteType.Experimental },
{ path: 'quickconnect', page: 'quickConnect' },
{ path: 'search.html', page: 'search' },
{ path: 'userprofile.html', page: 'user/userprofile' },

41
src/apps/experimental/routes/home.tsx
View file

@ -2,14 +2,13 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import { useSearchParams } from 'react-router-dom';
import globalize from '../../../scripts/globalize';
import LibraryMenu from '../../../scripts/libraryMenu';
import { clearBackdrop } from '../../../components/backdrop/backdrop';
import layoutManager from '../../../components/layoutManager';
import * as mainTabsManager from '../../../components/maintabsmanager';
import Page from '../../../components/Page';
import '../../../elements/emby-tabs/emby-tabs';
import '../../../elements/emby-button/emby-button';
import '../../../elements/emby-scroller/emby-scroller';
import Page from '../../../components/Page';
type OnResumeOptions = {
autoFocus?: boolean;
@ -29,12 +28,14 @@ const Home = () => {
const [ searchParams ] = useSearchParams();
const initialTabIndex = parseInt(searchParams.get('tab') ?? '0', 10);
const libraryMenu = useMemo(async () => ((await import('../../../scripts/libraryMenu')).default), []);
const mainTabsManager = useMemo(() => import('../../../components/maintabsmanager'), []);
const tabController = useRef<ControllerProps | null>();
const tabControllers = useMemo<ControllerProps[]>(() => [], []);
const element = useRef<HTMLDivElement>(null);
const setTitle = () => {
LibraryMenu.setTitle(null);
const setTitle = async () => {
(await libraryMenu).setTitle(null);
};
const getTabs = () => {
@ -78,18 +79,6 @@ const Home = () => {
});
}, [ tabControllers ]);
const onViewDestroy = useCallback(() => {
if (tabControllers) {
tabControllers.forEach(function (t) {
if (t.destroy) {
t.destroy();
}
});
}
tabController.current = null;
}, [ tabControllers ]);
const loadTab = useCallback((index: number, previousIndex: number | null) => {
getTabController(index).then((controller) => {
const refresh = !controller.refreshed;
@ -118,19 +107,23 @@ const Home = () => {
loadTab(newIndex, previousIndex);
}, [ loadTab, tabControllers ]);
const onResume = useCallback(() => {
setTitle();
const onSetTabs = useCallback(async () => {
(await mainTabsManager).setTabs(element.current, initialTabIndex, getTabs, getTabContainers, null, onTabChange, false);
}, [ initialTabIndex, mainTabsManager, onTabChange ]);
const onResume = useCallback(async () => {
void setTitle();
clearBackdrop();
const currentTabController = tabController.current;
if (!currentTabController) {
mainTabsManager.selectedTabIndex(initialTabIndex);
(await mainTabsManager).selectedTabIndex(initialTabIndex);
} else if (currentTabController?.onResume) {
currentTabController.onResume({});
}
(document.querySelector('.skinHeader') as HTMLDivElement).classList.add('noHomeButtonHeader');
}, [ initialTabIndex ]);
}, [ initialTabIndex, mainTabsManager ]);
const onPause = useCallback(() => {
const currentTabController = tabController.current;
@ -141,13 +134,13 @@ const Home = () => {
}, []);
useEffect(() => {
mainTabsManager.setTabs(element.current, initialTabIndex, getTabs, getTabContainers, null, onTabChange, false);
void onSetTabs();
onResume();
void onResume();
return () => {
onPause();
};
}, [ initialTabIndex, onPause, onResume, onTabChange, onViewDestroy ]);
}, [ onPause, onResume, onSetTabs ]);
return (
<div ref={element}>