diff --git a/src/apps/dashboard/AppLayout.tsx b/src/apps/dashboard/AppLayout.tsx index 44b8ad2ca..26db00d0e 100644 --- a/src/apps/dashboard/AppLayout.tsx +++ b/src/apps/dashboard/AppLayout.tsx @@ -9,6 +9,7 @@ import { Outlet, useLocation } from 'react-router-dom'; import AppBody from 'components/AppBody'; import AppToolbar from 'components/toolbar/AppToolbar'; +import ServerButton from 'components/toolbar/ServerButton'; import ElevationScroll from 'components/ElevationScroll'; import { DRAWER_WIDTH } from 'components/ResponsiveDrawer'; import ThemeCss from 'components/ThemeCss'; @@ -22,8 +23,6 @@ import { DASHBOARD_APP_PATHS } from './routes/routes'; import './AppOverrides.scss'; -const DRAWERLESS_PATHS = [ DASHBOARD_APP_PATHS.MetadataManager ]; - export const Component: FC = () => { const [ isDrawerActive, setIsDrawerActive ] = useState(false); const location = useLocation(); @@ -31,8 +30,8 @@ export const Component: FC = () => { const { dateFnsLocale } = useLocale(); const isMediumScreen = useMediaQuery((t: Theme) => t.breakpoints.up('md')); - const isDrawerAvailable = Boolean(user) - && !DRAWERLESS_PATHS.some(path => location.pathname.startsWith(`/${path}`)); + const isMetadataManager = location.pathname.startsWith(`/${DASHBOARD_APP_PATHS.MetadataManager}`); + const isDrawerAvailable = Boolean(user) && !isMetadataManager; const isDrawerOpen = isDrawerActive && isDrawerAvailable; const onToggleDrawer = useCallback(() => { @@ -74,6 +73,10 @@ export const Component: FC = () => { } > + {isMetadataManager && ( + + )} + diff --git a/src/apps/experimental/AppLayout.tsx b/src/apps/experimental/AppLayout.tsx index 641211530..8d5e04ed8 100644 --- a/src/apps/experimental/AppLayout.tsx +++ b/src/apps/experimental/AppLayout.tsx @@ -8,7 +8,6 @@ import { Outlet, useLocation } from 'react-router-dom'; import AppBody from 'components/AppBody'; import CustomCss from 'components/CustomCss'; import ElevationScroll from 'components/ElevationScroll'; -import { DRAWER_WIDTH } from 'components/ResponsiveDrawer'; import ThemeCss from 'components/ThemeCss'; import { useApi } from 'hooks/useApi'; @@ -23,7 +22,7 @@ export const Component = () => { const location = useLocation(); const isMediumScreen = useMediaQuery((t: Theme) => t.breakpoints.up('md')); - const isDrawerAvailable = isDrawerPath(location.pathname) && Boolean(user); + const isDrawerAvailable = isDrawerPath(location.pathname) && Boolean(user) && !isMediumScreen; const isDrawerOpen = isDrawerActive && isDrawerAvailable; const onToggleDrawer = useCallback(() => { @@ -38,14 +37,8 @@ export const Component = () => { { return params; }; -interface SearchButtonProps { - isTabsAvailable: boolean; -} - -const SearchButton: FC = ({ isTabsAvailable }) => { +const SearchButton: FC = () => { const location = useLocation(); const [searchParams] = useSearchParams(); const isSearchPath = location.pathname === '/search'; - const createSearchLink = isTabsAvailable ? + const search = createSearchParams(getUrlParams(searchParams)); + const createSearchLink = { pathname: '/search', - search: `?${createSearchParams(getUrlParams(searchParams))}` - } : - '/search'; + search: search ? `?${search}` : undefined + }; return ( diff --git a/src/apps/experimental/components/AppToolbar/index.tsx b/src/apps/experimental/components/AppToolbar/index.tsx index df46cc123..308b96826 100644 --- a/src/apps/experimental/components/AppToolbar/index.tsx +++ b/src/apps/experimental/components/AppToolbar/index.tsx @@ -1,11 +1,14 @@ +import Stack from '@mui/material/Stack'; import React, { type FC } from 'react'; import { useLocation } from 'react-router-dom'; + import AppToolbar from 'components/toolbar/AppToolbar'; -import AppTabs from '../tabs/AppTabs'; +import ServerButton from 'components/toolbar/ServerButton'; + import RemotePlayButton from './RemotePlayButton'; import SyncPlayButton from './SyncPlayButton'; import SearchButton from './SearchButton'; -import { isTabPath } from '../tabs/tabRoutes'; +import UserViewNav from './userViews/UserViewNav'; interface AppToolbarProps { isDrawerAvailable: boolean @@ -31,7 +34,6 @@ const ExperimentalAppToolbar: FC = ({ // The video osd does not show the standard toolbar if (location.pathname === '/video') return null; - const isTabsAvailable = isTabPath(location.pathname); const isPublicPath = PUBLIC_PATHS.includes(location.pathname); return ( @@ -40,7 +42,7 @@ const ExperimentalAppToolbar: FC = ({ <> - + )} isDrawerAvailable={isDrawerAvailable} @@ -48,7 +50,18 @@ const ExperimentalAppToolbar: FC = ({ onDrawerButtonClick={onDrawerButtonClick} isUserMenuAvailable={!isPublicPath} > - {isTabsAvailable && ()} + {!isDrawerAvailable && ( + + + + {!isPublicPath && ( + + )} + + )} ); }; diff --git a/src/apps/experimental/components/AppToolbar/userViews/UserViewNav.tsx b/src/apps/experimental/components/AppToolbar/userViews/UserViewNav.tsx new file mode 100644 index 000000000..dbc3274ca --- /dev/null +++ b/src/apps/experimental/components/AppToolbar/userViews/UserViewNav.tsx @@ -0,0 +1,150 @@ +import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto'; +import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type'; +import ArrowDropDown from '@mui/icons-material/ArrowDropDown'; +import Favorite from '@mui/icons-material/Favorite'; +import Button from '@mui/material/Button/Button'; +import { Theme } from '@mui/material/styles'; +import useMediaQuery from '@mui/material/useMediaQuery'; +import React, { useCallback, useMemo, useState } from 'react'; +import { Link, useLocation, useSearchParams } from 'react-router-dom'; + +import LibraryIcon from 'apps/experimental/components/LibraryIcon'; +import { MetaView } from 'apps/experimental/constants/metaView'; +import { isLibraryPath } from 'apps/experimental/features/libraries/utils/path'; +import { appRouter } from 'components/router/appRouter'; +import { useApi } from 'hooks/useApi'; +import useCurrentTab from 'hooks/useCurrentTab'; +import { useUserViews } from 'hooks/useUserViews'; +import globalize from 'lib/globalize'; + +import UserViewsMenu from './UserViewsMenu'; + +const MAX_USER_VIEWS_MD = 3; +const MAX_USER_VIEWS_LG = 5; +const MAX_USER_VIEWS_XL = 8; + +const OVERFLOW_MENU_ID = 'user-view-overflow-menu'; + +const HOME_PATH = '/home'; +const LIST_PATH = '/list'; + +const getCurrentUserView = ( + userViews: BaseItemDto[] | undefined, + pathname: string, + libraryId: string | null, + collectionType: string | null, + tab: number +) => { + const isUserViewPath = isLibraryPath(pathname) || [HOME_PATH, LIST_PATH].includes(pathname); + if (!isUserViewPath) return undefined; + + if (collectionType === CollectionType.Livetv) { + return userViews?.find(({ CollectionType: type }) => type === CollectionType.Livetv); + } + + if (pathname === HOME_PATH && tab === 1) { + return MetaView.Favorites; + } + + // eslint-disable-next-line sonarjs/different-types-comparison + return userViews?.find(({ Id: id }) => id === libraryId); +}; + +const UserViewNav = () => { + const location = useLocation(); + const [ searchParams ] = useSearchParams(); + const libraryId = searchParams.get('topParentId') || searchParams.get('parentId'); + const collectionType = searchParams.get('collectionType'); + const { activeTab } = useCurrentTab(); + + const isExtraLargeScreen = useMediaQuery((t: Theme) => t.breakpoints.up('xl')); + const isLargeScreen = useMediaQuery((t: Theme) => t.breakpoints.up('lg')); + const maxViews = useMemo(() => { + if (isExtraLargeScreen) return MAX_USER_VIEWS_XL; + if (isLargeScreen) return MAX_USER_VIEWS_LG; + return MAX_USER_VIEWS_MD; + }, [ isExtraLargeScreen, isLargeScreen ]); + + const { user } = useApi(); + const { + data: userViews, + isPending + } = useUserViews(user?.Id); + + const primaryViews = useMemo(() => ( + userViews?.Items?.slice(0, maxViews) + ), [ maxViews, userViews ]); + + const overflowViews = useMemo(() => ( + userViews?.Items?.slice(maxViews) + ), [ maxViews, userViews ]); + + const [ overflowAnchorEl, setOverflowAnchorEl ] = useState(null); + const isOverflowMenuOpen = Boolean(overflowAnchorEl); + + const onOverflowButtonClick = useCallback((event: React.MouseEvent) => { + setOverflowAnchorEl(event.currentTarget); + }, []); + + const onOverflowMenuClose = useCallback(() => { + setOverflowAnchorEl(null); + }, []); + + const currentUserView = useMemo(() => ( + getCurrentUserView(userViews?.Items, location.pathname, libraryId, collectionType, activeTab) + ), [ activeTab, collectionType, libraryId, location.pathname, userViews ]); + + if (isPending) return null; + + return ( + <> + + + {primaryViews?.map(view => ( + + ))} + {overflowViews && overflowViews.length > 0 && ( + <> + + + + + )} + + ); +}; + +export default UserViewNav; diff --git a/src/apps/experimental/components/AppToolbar/userViews/UserViewsMenu.tsx b/src/apps/experimental/components/AppToolbar/userViews/UserViewsMenu.tsx new file mode 100644 index 000000000..e95617e74 --- /dev/null +++ b/src/apps/experimental/components/AppToolbar/userViews/UserViewsMenu.tsx @@ -0,0 +1,51 @@ +import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client'; +import ListItemIcon from '@mui/material/ListItemIcon/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText/ListItemText'; +import Menu, { type MenuProps } from '@mui/material/Menu/Menu'; +import MenuItem from '@mui/material/MenuItem/MenuItem'; +import React, { FC } from 'react'; +import { Link } from 'react-router-dom'; + +import LibraryIcon from 'apps/experimental/components/LibraryIcon'; +import { appRouter } from 'components/router/appRouter'; + +interface UserViewsMenuProps extends MenuProps { + userViews: BaseItemDto[] + selectedId?: string + includeGlobalViews?: boolean + onMenuClose: () => void +} + +const UserViewsMenu: FC = ({ + userViews, + selectedId, + onMenuClose, + ...props +}) => { + return ( + + {userViews.map(view => ( + + + + + + {view.Name} + + + ))} + + ); +}; + +export default UserViewsMenu; diff --git a/src/apps/experimental/components/LibraryIcon.tsx b/src/apps/experimental/components/LibraryIcon.tsx index 846e3f887..6afc72b5f 100644 --- a/src/apps/experimental/components/LibraryIcon.tsx +++ b/src/apps/experimental/components/LibraryIcon.tsx @@ -1,5 +1,6 @@ import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client'; import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type'; +import Favorite from '@mui/icons-material/Favorite'; import Movie from '@mui/icons-material/Movie'; import MusicNote from '@mui/icons-material/MusicNote'; import Photo from '@mui/icons-material/Photo'; @@ -14,6 +15,8 @@ import VideoLibrary from '@mui/icons-material/VideoLibrary'; import Folder from '@mui/icons-material/Folder'; import React, { FC } from 'react'; +import { MetaView } from '../constants/metaView'; + interface LibraryIconProps { item: BaseItemDto } @@ -21,6 +24,10 @@ interface LibraryIconProps { const LibraryIcon: FC = ({ item }) => { + if (item.Id === MetaView.Favorites.Id) { + return ; + } + switch (item.CollectionType) { case CollectionType.Movies: return ; diff --git a/src/apps/experimental/components/drawers/MainDrawerContent.tsx b/src/apps/experimental/components/drawers/MainDrawerContent.tsx index e15b83361..b13569441 100644 --- a/src/apps/experimental/components/drawers/MainDrawerContent.tsx +++ b/src/apps/experimental/components/drawers/MainDrawerContent.tsx @@ -1,5 +1,3 @@ -import Dashboard from '@mui/icons-material/Dashboard'; -import Edit from '@mui/icons-material/Edit'; import Favorite from '@mui/icons-material/Favorite'; import Home from '@mui/icons-material/Home'; import Divider from '@mui/material/Divider'; @@ -111,38 +109,6 @@ const MainDrawerContent = () => { )} - - {/* ADMIN LINKS */} - {user?.Policy?.IsAdministrator && ( - <> - - - {globalize.translate('HeaderAdmin')} - - } - > - - - - - - - - - - - - - - - - - - - )} ); }; diff --git a/src/apps/experimental/components/library/ItemsView.tsx b/src/apps/experimental/components/library/ItemsView.tsx index dbe1753fd..db6303324 100644 --- a/src/apps/experimental/components/library/ItemsView.tsx +++ b/src/apps/experimental/components/library/ItemsView.tsx @@ -14,6 +14,15 @@ import { CardShape } from 'utils/card'; import Loading from 'components/loading/LoadingComponent'; import { playbackManager } from 'components/playback/playbackmanager'; import ItemsContainer from 'elements/emby-itemscontainer/ItemsContainer'; +import NoItemsMessage from 'components/common/NoItemsMessage'; +import Lists from 'components/listview/List/Lists'; +import Cards from 'components/cardbuilder/Card/Cards'; +import { LibraryTab } from 'types/libraryTab'; +import { type LibraryViewSettings, type ParentId, ViewMode } from 'types/library'; +import type { CardOptions } from 'types/cardOptions'; +import type { ListOptions } from 'types/listOptions'; +import { useItem } from 'hooks/useItem'; + import AlphabetPicker from './AlphabetPicker'; import FilterButton from './filter/FilterButton'; import NewCollectionButton from './NewCollectionButton'; @@ -23,14 +32,7 @@ import QueueButton from './QueueButton'; import ShuffleButton from './ShuffleButton'; import SortButton from './SortButton'; import GridListViewButton from './GridListViewButton'; -import NoItemsMessage from 'components/common/NoItemsMessage'; -import Lists from 'components/listview/List/Lists'; -import Cards from 'components/cardbuilder/Card/Cards'; -import { LibraryTab } from 'types/libraryTab'; -import { type LibraryViewSettings, type ParentId, ViewMode } from 'types/library'; -import type { CardOptions } from 'types/cardOptions'; -import type { ListOptions } from 'types/listOptions'; -import { useItem } from 'hooks/useItem'; +import LibraryViewMenu from './LibraryViewMenu'; interface ItemsViewProps { viewType: LibraryTab; @@ -225,17 +227,21 @@ const ItemsView: FC = ({ 'vertical-list' : 'vertical-wrap' ); + return ( - - {isPaginationEnabled && ( - + + + {isBtnPlayAllEnabled && ( = ({ libraryViewSettings={libraryViewSettings} /> )} + {isBtnShuffleEnabled && totalRecordCount > 1 && ( + + )} {isBtnQueueEnabled && item && playbackManager.canQueue(item) && ( @@ -255,15 +270,6 @@ const ItemsView: FC = ({ hasFilters={hasFilters} /> )} - {isBtnShuffleEnabled && totalRecordCount > 1 && ( - - )} {isBtnSortEnabled && ( = ({ setLibraryViewSettings={setLibraryViewSettings} /> )} + + {isPaginationEnabled && ( + + + + )} {isAlphabetPickerEnabled && hasSortName && ( @@ -312,7 +336,16 @@ const ItemsView: FC = ({ )} {isPaginationEnabled && ( - + { + const location = useLocation(); + const [ searchParams, setSearchParams ] = useSearchParams(); + const { activeTab } = useCurrentTab(); + + const [ menuAnchorEl, setMenuAnchorEl ] = useState(null); + const isMenuOpen = Boolean(menuAnchorEl); + + const onMenuButtonClick = useCallback((event: React.MouseEvent) => { + setMenuAnchorEl(event.currentTarget); + }, []); + + const onMenuClose = useCallback(() => { + setMenuAnchorEl(null); + }, []); + + const currentRoute = LibraryRoutes.find(({ path }) => path === location.pathname); + const currentTab = currentRoute?.views.find(({ index }) => index === activeTab); + + if (!currentTab) return null; + + return ( + <> + + + + {currentRoute?.views.map(tab => ( + { + searchParams.set('tab', `${tab.index}`); + setSearchParams(searchParams); + onMenuClose(); + }} + selected={tab.index === currentTab.index} + > + {globalize.translate(tab.label)} + + ))} + + + ); +}; + +export default LibraryViewMenu; diff --git a/src/apps/experimental/components/library/PageTabContent.tsx b/src/apps/experimental/components/library/PageTabContent.tsx index 6cd99c557..10a0d2296 100644 --- a/src/apps/experimental/components/library/PageTabContent.tsx +++ b/src/apps/experimental/components/library/PageTabContent.tsx @@ -1,3 +1,4 @@ +import Box from '@mui/material/Box/Box'; import React, { type FC } from 'react'; import SuggestionsSectionView from './SuggestionsSectionView'; import UpcomingView from './UpcomingView'; @@ -8,6 +9,7 @@ import ProgramsSectionView from './ProgramsSectionView'; import { LibraryTab } from 'types/libraryTab'; import type { ParentId } from 'types/library'; import type { LibraryTabContent } from 'types/libraryTabContent'; +import LibraryViewMenu from './LibraryViewMenu'; interface PageTabContentProps { parentId: ParentId; @@ -17,46 +19,86 @@ interface PageTabContentProps { const PageTabContent: FC = ({ parentId, currentTab }) => { if (currentTab.viewType === LibraryTab.Suggestions) { return ( - + <> + + + + + + ); } if (currentTab.viewType === LibraryTab.Programs || currentTab.viewType === LibraryTab.Recordings || currentTab.viewType === LibraryTab.Schedule) { return ( - + <> + + + + + + ); } if (currentTab.viewType === LibraryTab.Upcoming) { - return ; + return ( + <> + + + + + + + ); } if (currentTab.viewType === LibraryTab.Genres) { return ( - + <> + + + + + + ); } if (currentTab.viewType === LibraryTab.Guide) { - return ; + return ( + <> + + + + + + + ); } return ( diff --git a/src/apps/experimental/components/library/Pagination.tsx b/src/apps/experimental/components/library/Pagination.tsx index ea3cd1cfe..477a98231 100644 --- a/src/apps/experimental/components/library/Pagination.tsx +++ b/src/apps/experimental/components/library/Pagination.tsx @@ -47,10 +47,15 @@ const Pagination: FC = ({ }, [limit, setLibraryViewSettings, startIndex]); return ( - + {globalize.translate( diff --git a/src/apps/experimental/components/library/PlayAllButton.tsx b/src/apps/experimental/components/library/PlayAllButton.tsx index 9c87d0056..b2c3da418 100644 --- a/src/apps/experimental/components/library/PlayAllButton.tsx +++ b/src/apps/experimental/components/library/PlayAllButton.tsx @@ -51,6 +51,12 @@ const PlayAllButton: FC = ({ item, items, viewType, hasFilte title={globalize.translate('HeaderPlayAll')} className='paper-icon-button-light btnPlay autoSize' onClick={play} + sx={{ + order: { + xs: 1, + sm: 'unset' + } + }} > diff --git a/src/apps/experimental/components/library/QueueButton.tsx b/src/apps/experimental/components/library/QueueButton.tsx index 31abe4d7b..305594dd1 100644 --- a/src/apps/experimental/components/library/QueueButton.tsx +++ b/src/apps/experimental/components/library/QueueButton.tsx @@ -34,6 +34,12 @@ const QueueButton: FC = ({ item, items, hasFilters }) => { title={globalize.translate('AddToPlayQueue')} className='paper-icon-button-light btnQueue autoSize' onClick={queue} + sx={{ + order: { + xs: 3, + sm: 'unset' + } + }} > diff --git a/src/apps/experimental/components/library/ShuffleButton.tsx b/src/apps/experimental/components/library/ShuffleButton.tsx index d20c401e5..9c11ef00e 100644 --- a/src/apps/experimental/components/library/ShuffleButton.tsx +++ b/src/apps/experimental/components/library/ShuffleButton.tsx @@ -42,6 +42,12 @@ const ShuffleButton: FC = ({ item, items, viewType, hasFilte title={globalize.translate('Shuffle')} className='paper-icon-button-light btnShuffle autoSize' onClick={shuffle} + sx={{ + order: { + xs: 2, + sm: 'unset' + } + }} > diff --git a/src/apps/experimental/components/tabs/AppTabs.tsx b/src/apps/experimental/components/tabs/AppTabs.tsx deleted file mode 100644 index d5f772d31..000000000 --- a/src/apps/experimental/components/tabs/AppTabs.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { Theme } from '@mui/material/styles'; -import Tab from '@mui/material/Tab'; -import Tabs from '@mui/material/Tabs'; -import useMediaQuery from '@mui/material/useMediaQuery'; -import { debounce } from 'lodash-es'; -import React, { FC, useCallback, useEffect } from 'react'; -import { Route, Routes } from 'react-router-dom'; - -import TabRoutes from './tabRoutes'; -import useCurrentTab from 'hooks/useCurrentTab'; -import globalize from 'lib/globalize'; - -interface AppTabsParams { - isDrawerOpen: boolean -} - -const handleResize = debounce(() => window.dispatchEvent(new Event('resize')), 100); - -const AppTabs: FC = ({ - isDrawerOpen -}) => { - const isBigScreen = useMediaQuery((theme: Theme) => theme.breakpoints.up('sm')); - const { searchParams, setSearchParams, activeTab } = useCurrentTab(); - - // HACK: Force resizing to workaround upstream bug with tab resizing - // https://github.com/mui/material-ui/issues/24011 - useEffect(() => { - handleResize(); - }, [ isDrawerOpen ]); - - const onTabClick = useCallback((event: React.MouseEvent) => { - event.preventDefault(); - - const tabIndex = event.currentTarget.dataset.tabIndex; - - if (tabIndex) { - searchParams.set('tab', tabIndex); - setSearchParams(searchParams); - } - }, [ searchParams, setSearchParams ]); - - return ( - - { - TabRoutes.map(route => ( - - { - route.tabs.map(({ index, label }) => ( - - )) - } - - } - /> - )) - } - - ); -}; - -export default AppTabs; diff --git a/src/apps/experimental/constants/metaView.ts b/src/apps/experimental/constants/metaView.ts new file mode 100644 index 000000000..8bc6fdc10 --- /dev/null +++ b/src/apps/experimental/constants/metaView.ts @@ -0,0 +1,11 @@ +import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto'; + +/** + * Views in the web app that we treat as UserViews. + */ +export const MetaView: Record = { + Favorites: { + Id: 'favorites', + Name: 'Favorites' + } +}; diff --git a/src/apps/experimental/components/tabs/tabRoutes.ts b/src/apps/experimental/features/libraries/constants/libraryRoutes.ts similarity index 57% rename from src/apps/experimental/components/tabs/tabRoutes.ts rename to src/apps/experimental/features/libraries/constants/libraryRoutes.ts index 1fb388f60..bd854d546 100644 --- a/src/apps/experimental/components/tabs/tabRoutes.ts +++ b/src/apps/experimental/features/libraries/constants/libraryRoutes.ts @@ -1,211 +1,177 @@ -import * as userSettings from 'scripts/settings/userSettings'; import { LibraryTab } from 'types/libraryTab'; -interface TabDefinition { - index: number - label: string - value: LibraryTab - isDefault?: boolean -} +import { LibraryRoute } from '../types/LibraryRoute'; -interface TabRoute { - path: string, - tabs: TabDefinition[] -} - -/** - * Utility function to check if a path has tabs. - */ -export const isTabPath = (path: string) => ( - TabRoutes.some(route => route.path === path) -); - -/** - * Utility function to get the default tab index for a specified URL path and library. - */ -export const getDefaultTabIndex = (path: string, libraryId?: string | null) => { - if (!libraryId) return 0; - - const tabs = TabRoutes.find(route => route.path === path)?.tabs ?? []; - const defaultTab = userSettings.get('landing-' + libraryId, false); - - return tabs.find(tab => tab.value === defaultTab)?.index - ?? tabs.find(tab => tab.isDefault)?.index - ?? 0; -}; - -const TabRoutes: TabRoute[] = [ +export const LibraryRoutes: LibraryRoute[] = [ { path: '/livetv', - tabs: [ + views: [ { index: 0, label: 'Programs', - value: LibraryTab.Programs, + view: LibraryTab.Programs, isDefault: true }, { index: 1, label: 'Guide', - value: LibraryTab.Guide + view: LibraryTab.Guide }, { index: 2, label: 'Channels', - value: LibraryTab.Channels + view: LibraryTab.Channels }, { index: 3, label: 'Recordings', - value: LibraryTab.Recordings + view: LibraryTab.Recordings }, { index: 4, label: 'Schedule', - value: LibraryTab.Schedule + view: LibraryTab.Schedule }, { index: 5, label: 'Series', - value: LibraryTab.SeriesTimers + view: LibraryTab.SeriesTimers } ] }, { path: '/movies', - tabs: [ + views: [ { index: 0, label: 'Movies', - value: LibraryTab.Movies, + view: LibraryTab.Movies, isDefault: true }, { index: 1, label: 'Suggestions', - value: LibraryTab.Suggestions + view: LibraryTab.Suggestions }, { index: 2, label: 'Trailers', - value: LibraryTab.Trailers + view: LibraryTab.Trailers }, { index: 3, label: 'Favorites', - value: LibraryTab.Favorites + view: LibraryTab.Favorites }, { index: 4, label: 'Collections', - value: LibraryTab.Collections + view: LibraryTab.Collections }, { index: 5, label: 'Genres', - value: LibraryTab.Genres + view: LibraryTab.Genres } ] }, { path: '/music', - tabs: [ + views: [ { index: 0, label: 'Albums', - value: LibraryTab.Albums, + view: LibraryTab.Albums, isDefault: true }, { index: 1, label: 'Suggestions', - value: LibraryTab.Suggestions + view: LibraryTab.Suggestions }, { index: 2, label: 'HeaderAlbumArtists', - value: LibraryTab.AlbumArtists + view: LibraryTab.AlbumArtists }, { index: 3, label: 'Artists', - value: LibraryTab.Artists + view: LibraryTab.Artists }, { index: 4, label: 'Playlists', - value: LibraryTab.Playlists + view: LibraryTab.Playlists }, { index: 5, label: 'Songs', - value: LibraryTab.Songs + view: LibraryTab.Songs }, { index: 6, label: 'Genres', - value: LibraryTab.Genres + view: LibraryTab.Genres } ] }, { path: '/tv', - tabs: [ + views: [ { index: 0, label: 'Shows', - value: LibraryTab.Series, + view: LibraryTab.Series, isDefault: true }, { index: 1, label: 'Suggestions', - value: LibraryTab.Suggestions + view: LibraryTab.Suggestions }, { index: 2, label: 'TabUpcoming', - value: LibraryTab.Upcoming + view: LibraryTab.Upcoming }, { index: 3, label: 'Genres', - value: LibraryTab.Genres + view: LibraryTab.Genres }, { index: 4, label: 'TabNetworks', - value: LibraryTab.Networks + view: LibraryTab.Networks }, { index: 5, label: 'Episodes', - value: LibraryTab.Episodes + view: LibraryTab.Episodes } ] }, { path: '/homevideos', - tabs: [ + views: [ { index: 0, label: 'Photos', - value: LibraryTab.Photos, + view: LibraryTab.Photos, isDefault: true }, { index: 1, label: 'HeaderPhotoAlbums', - value: LibraryTab.PhotoAlbums, + view: LibraryTab.PhotoAlbums, isDefault: true }, { index: 2, label: 'HeaderVideos', - value: LibraryTab.Videos + view: LibraryTab.Videos } ] } ]; - -export default TabRoutes; diff --git a/src/apps/experimental/features/libraries/types/LibraryRoute.ts b/src/apps/experimental/features/libraries/types/LibraryRoute.ts new file mode 100644 index 000000000..f05cfdb5f --- /dev/null +++ b/src/apps/experimental/features/libraries/types/LibraryRoute.ts @@ -0,0 +1,13 @@ +import { LibraryTab } from 'types/libraryTab'; + +interface LibraryViewDefinition { + index: number + label: string + view: LibraryTab + isDefault?: boolean +} + +export interface LibraryRoute { + path: string, + views: LibraryViewDefinition[] +} diff --git a/src/apps/experimental/features/libraries/utils/path.ts b/src/apps/experimental/features/libraries/utils/path.ts new file mode 100644 index 000000000..a187b2901 --- /dev/null +++ b/src/apps/experimental/features/libraries/utils/path.ts @@ -0,0 +1,24 @@ +import * as userSettings from 'scripts/settings/userSettings'; + +import { LibraryRoutes } from '../constants/libraryRoutes'; + +/** + * Utility function to check if a path is a library path. + */ +export const isLibraryPath = (path: string) => ( + LibraryRoutes.some(route => route.path === path) +); + +/** + * Utility function to get the default view index for a specified URL path and library. + */ +export const getDefaultViewIndex = (path: string, libraryId?: string | null) => { + if (!libraryId) return 0; + + const views = LibraryRoutes.find(route => route.path === path)?.views ?? []; + const defaultView = userSettings.get('landing-' + libraryId, false); + + return views.find(view => view.view === defaultView)?.index + ?? views.find(view => view.isDefault)?.index + ?? 0; +}; diff --git a/src/apps/experimental/routes/video/index.tsx b/src/apps/experimental/routes/video/index.tsx index b3ded898a..f9322352d 100644 --- a/src/apps/experimental/routes/video/index.tsx +++ b/src/apps/experimental/routes/video/index.tsx @@ -46,7 +46,6 @@ const VideoPage: FC = () => { diff --git a/src/apps/stable/features/search/components/SearchResults.tsx b/src/apps/stable/features/search/components/SearchResults.tsx index 47ce8f030..3782d43a9 100644 --- a/src/apps/stable/features/search/components/SearchResults.tsx +++ b/src/apps/stable/features/search/components/SearchResults.tsx @@ -34,7 +34,7 @@ const SearchResults: FC = ({
{globalize.translate('RetryWithGlobalSearch')}
)} diff --git a/src/components/toolbar/AppToolbar.tsx b/src/components/toolbar/AppToolbar.tsx index 4c34aaf3c..8e46f0769 100644 --- a/src/components/toolbar/AppToolbar.tsx +++ b/src/components/toolbar/AppToolbar.tsx @@ -16,8 +16,8 @@ interface AppToolbarProps { buttons?: ReactNode isDrawerAvailable: boolean isDrawerOpen: boolean - onDrawerButtonClick?: (event: React.MouseEvent) => void, - isFullscreen?: boolean, + onDrawerButtonClick?: (event: React.MouseEvent) => void + isBackButtonAvailable?: boolean isUserMenuAvailable?: boolean } @@ -34,31 +34,21 @@ const AppToolbar: FC> = ({ isDrawerAvailable, isDrawerOpen, onDrawerButtonClick = () => { /* no-op */ }, - isFullscreen = false, + isBackButtonAvailable = false, isUserMenuAvailable = true }) => { const { user } = useApi(); const isUserLoggedIn = Boolean(user); - const isBackButtonAvailable = appRouter.canGoBack(); - - // Only use the left safe area padding when the drawer is not pinned or in a fullscreen view - const useSafeAreaLeft = isDrawerAvailable || isFullscreen; - return ( { + const { + data: systemInfo, + isPending + } = useSystemInfo(); + + return ( + + ); +}; + +export default ServerButton; diff --git a/src/hooks/useCurrentTab.ts b/src/hooks/useCurrentTab.ts index 11c2569fc..f8b3202a5 100644 --- a/src/hooks/useCurrentTab.ts +++ b/src/hooks/useCurrentTab.ts @@ -1,6 +1,7 @@ -import { getDefaultTabIndex } from 'apps/experimental/components/tabs/tabRoutes'; import { useLocation, useSearchParams } from 'react-router-dom'; +import { getDefaultViewIndex } from 'apps/experimental/features/libraries/utils/path'; + const useCurrentTab = () => { const location = useLocation(); const [searchParams, setSearchParams] = useSearchParams(); @@ -12,7 +13,7 @@ const useCurrentTab = () => { const activeTab: number = searchParamsTab !== null ? parseInt(searchParamsTab, 10) : - getDefaultTabIndex(location.pathname, libraryId); + getDefaultViewIndex(location.pathname, libraryId); return { searchParams,