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

Merge pull request #4705 from thornbill/add-back-button-x

This commit is contained in:
Bill Thornton 2023-07-07 10:09:21 -04:00 committed by GitHub
commit 01d22a985b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 2 deletions

View file

@ -1,3 +1,4 @@
import ArrowBack from '@mui/icons-material/ArrowBack';
import MenuIcon from '@mui/icons-material/Menu';
import SearchIcon from '@mui/icons-material/Search';
import Box from '@mui/material/Box';
@ -9,6 +10,7 @@ import React, { FC } from 'react';
import { Link, useLocation } from 'react-router-dom';
import appIcon from 'assets/img/icon-transparent.png';
import { appRouter } from 'components/router/appRouter';
import { useApi } from 'hooks/useApi';
import globalize from 'scripts/globalize';
@ -23,6 +25,13 @@ interface AppToolbarProps {
onDrawerButtonClick: (event: React.MouseEvent<HTMLElement>) => void
}
const onBackButtonClick = () => {
appRouter.back()
.catch(err => {
console.error('[AppToolbar] error calling appRouter.back', err);
});
};
const AppToolbar: FC<AppToolbarProps> = ({
isDrawerOpen,
onDrawerButtonClick
@ -32,6 +41,7 @@ const AppToolbar: FC<AppToolbarProps> = ({
const location = useLocation();
const isDrawerAvailable = isDrawerPath(location.pathname);
const isBackButtonAvailable = appRouter.canGoBack();
return (
<Toolbar
@ -50,7 +60,6 @@ const AppToolbar: FC<AppToolbarProps> = ({
edge='start'
color='inherit'
aria-label={globalize.translate(isDrawerOpen ? 'MenuClose' : 'MenuOpen')}
sx={{ mr: 2 }}
onClick={onDrawerButtonClick}
>
<MenuIcon />
@ -58,12 +67,28 @@ const AppToolbar: FC<AppToolbarProps> = ({
</Tooltip>
)}
{isBackButtonAvailable && (
<Tooltip title={globalize.translate('ButtonBack')}>
<IconButton
size='large'
// Set the edge if the drawer button is not shown
edge={!(isUserLoggedIn && isDrawerAvailable) ? 'start' : undefined}
color='inherit'
aria-label={globalize.translate('ButtonBack')}
onClick={onBackButtonClick}
>
<ArrowBack />
</IconButton>
</Tooltip>
)}
<Box
component={Link}
to='/'
color='inherit'
aria-label={globalize.translate('Home')}
sx={{
ml: 2,
display: 'inline-flex',
textDecoration: 'none'
}}

View file

@ -167,12 +167,13 @@ class AppRouter {
canGoBack() {
const { path, route } = this.currentRouteInfo;
const pathOnly = path?.split('?')[0] ?? '';
if (!route) {
return false;
}
if (!document.querySelector('.dialogContainer') && (START_PAGE_TYPES.includes(route.type) || START_PAGE_PATHS.includes(path))) {
if (!document.querySelector('.dialogContainer') && (START_PAGE_TYPES.includes(route.type) || START_PAGE_PATHS.includes(pathOnly))) {
return false;
}