milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #4205 from thornbill/fix-home-navigation

Browse source 
Fix issues navigating home screen tabs
This commit is contained in:
Bill Thornton 2022-12-15 11:43:59 -05:00 • committed by GitHub
commit a624fa8f15
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/controllers/favorites.js
View file

@ -294,10 +294,9 @@ class FavoritesTab {
} }
onPause() { onPause() {
const elems = this.sectionsContainer.querySelectorAll('.itemsContainer'); if (this.sectionsContainer) {
Array.from(this.sectionsContainer.querySelectorAll('.itemsContainer'))
for (const elem of elems) { .forEach(e => { e.pause(); });
elem.pause();
} }
} }

38
src/routes/home.tsx
View file

@ -1,4 +1,6 @@
import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef } from 'react'; import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef } from 'react';
import { useSearchParams } from 'react-router-dom';
import globalize from '../scripts/globalize'; import globalize from '../scripts/globalize';
import LibraryMenu from '../scripts/libraryMenu'; import LibraryMenu from '../scripts/libraryMenu';
import { clearBackdrop } from '../components/backdrop/backdrop'; import { clearBackdrop } from '../components/backdrop/backdrop';
@ -9,10 +11,6 @@ import '../elements/emby-button/emby-button';
import '../elements/emby-scroller/emby-scroller'; import '../elements/emby-scroller/emby-scroller';
import Page from '../components/Page'; import Page from '../components/Page';
type IProps = {
tab?: string;
}
type OnResumeOptions = { type OnResumeOptions = {
autoFocus?: boolean; autoFocus?: boolean;
refresh?: boolean refresh?: boolean
@ -27,15 +25,12 @@ type ControllerProps = {
destroy: () => void; destroy: () => void;
} }
const Home: FunctionComponent<IProps> = (props: IProps) => { const Home: FunctionComponent = () => {
const getDefaultTabIndex = () => { const [ searchParams ] = useSearchParams();
return 0; const initialTabIndex = parseInt(searchParams.get('tab') || '0', 10);
};
const tabController = useRef<ControllerProps | null>(); const tabController = useRef<ControllerProps | null>();
const currentTabIndex = useRef(parseInt(props.tab || getDefaultTabIndex().toString()));
const tabControllers = useMemo<ControllerProps[]>(() => [], []); const tabControllers = useMemo<ControllerProps[]>(() => [], []);
const initialTabIndex = useRef<number | null>(currentTabIndex.current);
const element = useRef<HTMLDivElement>(null); const element = useRef<HTMLDivElement>(null);
const setTitle = () => { const setTitle = () => {
@ -75,13 +70,13 @@ const Home: FunctionComponent<IProps> = (props: IProps) => {
if (!controller) { if (!controller) {
const tabContent = element.current?.querySelector(".tabContent[data-index='" + index + "']"); const tabContent = element.current?.querySelector(".tabContent[data-index='" + index + "']");
controller = new controllerFactory(tabContent, props); controller = new controllerFactory(tabContent, null);
tabControllers[index] = controller; tabControllers[index] = controller;
} }
return controller; return controller;
}); });
}, [props, tabControllers]); }, [ tabControllers ]);
const onViewDestroy = useCallback(() => { const onViewDestroy = useCallback(() => {
if (tabControllers) { if (tabControllers) {
@ -93,8 +88,7 @@ const Home: FunctionComponent<IProps> = (props: IProps) => {
} }
tabController.current = null; tabController.current = null;
initialTabIndex.current = null; }, [ tabControllers ]);
}, [tabControllers]);
const loadTab = useCallback((index: number, previousIndex: number | null) => { const loadTab = useCallback((index: number, previousIndex: number | null) => {
getTabController(index).then((controller) => { getTabController(index).then((controller) => {
@ -106,13 +100,12 @@ const Home: FunctionComponent<IProps> = (props: IProps) => {
}); });
controller.refreshed = true; controller.refreshed = true;
currentTabIndex.current = index;
tabController.current = controller; tabController.current = controller;
}); });
}, [getTabController]); }, [ getTabController ]);
const onTabChange = useCallback((e: { detail: { selectedTabIndex: string; previousIndex: number | null }; }) => { const onTabChange = useCallback((e: { detail: { selectedTabIndex: string; previousIndex: number | null }; }) => {
const newIndex = parseInt(e.detail.selectedTabIndex); const newIndex = parseInt(e.detail.selectedTabIndex, 10);
const previousIndex = e.detail.previousIndex; const previousIndex = e.detail.previousIndex;
const previousTabController = previousIndex == null ? null : tabControllers[previousIndex]; const previousTabController = previousIndex == null ? null : tabControllers[previousIndex];
@ -121,7 +114,7 @@ const Home: FunctionComponent<IProps> = (props: IProps) => {
} }
loadTab(newIndex, previousIndex); loadTab(newIndex, previousIndex);
}, [loadTab, tabControllers]); }, [ loadTab, tabControllers ]);
const onResume = useCallback(() => { const onResume = useCallback(() => {
setTitle(); setTitle();
@ -130,12 +123,12 @@ const Home: FunctionComponent<IProps> = (props: IProps) => {
const currentTabController = tabController.current; const currentTabController = tabController.current;
if (!currentTabController) { if (!currentTabController) {
mainTabsManager.selectedTabIndex(initialTabIndex.current); mainTabsManager.selectedTabIndex(initialTabIndex);
} else if (currentTabController && currentTabController.onResume) { } else if (currentTabController && currentTabController.onResume) {
currentTabController.onResume({}); currentTabController.onResume({});
} }
(document.querySelector('.skinHeader') as HTMLDivElement).classList.add('noHomeButtonHeader'); (document.querySelector('.skinHeader') as HTMLDivElement).classList.add('noHomeButtonHeader');
}, []); }, [ initialTabIndex ]);
const onPause = useCallback(() => { const onPause = useCallback(() => {
const currentTabController = tabController.current; const currentTabController = tabController.current;
@ -146,14 +139,13 @@ const Home: FunctionComponent<IProps> = (props: IProps) => {
}, []); }, []);
useEffect(() => { useEffect(() => {
mainTabsManager.setTabs(element.current, currentTabIndex.current, getTabs, getTabContainers, null, onTabChange, false); mainTabsManager.setTabs(element.current, initialTabIndex, getTabs, getTabContainers, null, onTabChange, false);
onResume(); onResume();
return () => { return () => {
onPause(); onPause();
onViewDestroy();
}; };
}, [onPause, onResume, onTabChange, onViewDestroy]); }, [ initialTabIndex, onPause, onResume, onTabChange, onViewDestroy ]);
return ( return (
<div ref={element}> <div ref={element}>