diff --git a/src/apps/experimental/components/AppToolbar/SearchButton.tsx b/src/apps/experimental/components/AppToolbar/SearchButton.tsx new file mode 100644 index 0000000000..2b9732d890 --- /dev/null +++ b/src/apps/experimental/components/AppToolbar/SearchButton.tsx @@ -0,0 +1,62 @@ +import React, { type FC } from 'react'; +import { + Link, + URLSearchParamsInit, + createSearchParams, + useSearchParams +} from 'react-router-dom'; +import SearchIcon from '@mui/icons-material/Search'; +import IconButton from '@mui/material/IconButton'; +import Tooltip from '@mui/material/Tooltip'; +import globalize from 'scripts/globalize'; + +const getUrlParams = (searchParams: URLSearchParams) => { + const parentId = searchParams.get('parentId') || searchParams.get('topParentId'); + const collectionType = searchParams.get('collectionType'); + const params: URLSearchParamsInit = {}; + + if (parentId) { + params.parentId = parentId; + } + + if (collectionType) { + params.collectionType = collectionType; + } + return params; +}; + +interface SearchButtonProps { + isTabsAvailable: boolean; + isSearchPath: boolean; +} + +const SearchButton: FC = ({ + isTabsAvailable, + isSearchPath +}) => { + const [searchParams] = useSearchParams(); + + const createSearchLink = isTabsAvailable ? + { + pathname: '/search.html', + search: `?${createSearchParams(getUrlParams(searchParams))}` + } : + '/search.html'; + + return ( + + + + + + ); +}; + +export default SearchButton; diff --git a/src/apps/experimental/components/AppToolbar/index.tsx b/src/apps/experimental/components/AppToolbar/index.tsx index e8626fd397..e8f3386c5d 100644 --- a/src/apps/experimental/components/AppToolbar/index.tsx +++ b/src/apps/experimental/components/AppToolbar/index.tsx @@ -1,15 +1,10 @@ -import SearchIcon from '@mui/icons-material/Search'; -import IconButton from '@mui/material/IconButton'; -import Tooltip from '@mui/material/Tooltip'; -import React, { FC } from 'react'; -import { Link, useLocation } from 'react-router-dom'; - +import React, { type FC } from 'react'; +import { useLocation } from 'react-router-dom'; import AppToolbar from 'components/toolbar/AppToolbar'; -import globalize from 'scripts/globalize'; - import AppTabs from '../tabs/AppTabs'; import RemotePlayButton from './RemotePlayButton'; import SyncPlayButton from './SyncPlayButton'; +import SearchButton from './SearchButton'; import { isTabPath } from '../tabs/tabRoutes'; interface AppToolbarProps { @@ -38,6 +33,7 @@ const ExperimentalAppToolbar: FC = ({ const isTabsAvailable = isTabPath(location.pathname); const isPublicPath = PUBLIC_PATHS.includes(location.pathname); + const isSearchPath = location.pathname === '/search.html'; return ( = ({ <> - - - - - - + )} isDrawerAvailable={isDrawerAvailable} diff --git a/src/components/router/appRouter.js b/src/components/router/appRouter.js index 3b07a5571c..7192212e4f 100644 --- a/src/components/router/appRouter.js +++ b/src/components/router/appRouter.js @@ -637,7 +637,7 @@ class AppRouter { } if (item.CollectionType == CollectionType.Livetv) { - return '#/livetv.html'; + return `#/livetv.html?collectionType=${item.CollectionType}`; } if (item.Type === 'Genre') { @@ -676,7 +676,7 @@ class AppRouter { if (context !== 'folders' && !itemHelper.isLocalItem(item)) { if (item.CollectionType == CollectionType.Movies) { - url = '#/movies.html?topParentId=' + item.Id; + url = `#/movies.html?topParentId=${item.Id}&collectionType=${item.CollectionType}`; if (options && options.section === 'latest') { url += '&tab=1'; @@ -686,7 +686,7 @@ class AppRouter { } if (item.CollectionType == CollectionType.Tvshows) { - url = '#/tv.html?topParentId=' + item.Id; + url = `#/tv.html?topParentId=${item.Id}&collectionType=${item.CollectionType}`; if (options && options.section === 'latest') { url += '&tab=1'; @@ -696,7 +696,7 @@ class AppRouter { } if (item.CollectionType == CollectionType.Music) { - url = '#/music.html?topParentId=' + item.Id; + url = `#/music.html?topParentId=${item.Id}&collectionType=${item.CollectionType}`; if (options?.section === 'latest') { url += '&tab=1';