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() {
const elems = this.sectionsContainer.querySelectorAll('.itemsContainer');
for (const elem of elems) {
elem.pause();
if (this.sectionsContainer) {
Array.from(this.sectionsContainer.querySelectorAll('.itemsContainer'))
.forEach(e => { e.pause(); });
}
}

32
src/routes/home.tsx
View file

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