mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Fix: Search for tab library
This commit is contained in:
parent
f57b3a6355
commit
69afc01d44
3 changed files with 71 additions and 24 deletions
62
src/apps/experimental/components/AppToolbar/SearchButton.tsx
Normal file
62
src/apps/experimental/components/AppToolbar/SearchButton.tsx
Normal file
|
@ -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<SearchButtonProps> = ({
|
||||||
|
isTabsAvailable,
|
||||||
|
isSearchPath
|
||||||
|
}) => {
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
|
|
||||||
|
const createSearchLink = isTabsAvailable ?
|
||||||
|
{
|
||||||
|
pathname: '/search.html',
|
||||||
|
search: `?${createSearchParams(getUrlParams(searchParams))}`
|
||||||
|
} :
|
||||||
|
'/search.html';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tooltip title={globalize.translate('Search')}>
|
||||||
|
<IconButton
|
||||||
|
size='large'
|
||||||
|
aria-label={globalize.translate('Search')}
|
||||||
|
color='inherit'
|
||||||
|
component={Link}
|
||||||
|
disabled={isSearchPath}
|
||||||
|
to={createSearchLink}
|
||||||
|
>
|
||||||
|
<SearchIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SearchButton;
|
|
@ -1,15 +1,10 @@
|
||||||
import SearchIcon from '@mui/icons-material/Search';
|
import React, { type FC } from 'react';
|
||||||
import IconButton from '@mui/material/IconButton';
|
import { useLocation } from 'react-router-dom';
|
||||||
import Tooltip from '@mui/material/Tooltip';
|
|
||||||
import React, { FC } from 'react';
|
|
||||||
import { Link, useLocation } from 'react-router-dom';
|
|
||||||
|
|
||||||
import AppToolbar from 'components/toolbar/AppToolbar';
|
import AppToolbar from 'components/toolbar/AppToolbar';
|
||||||
import globalize from 'scripts/globalize';
|
|
||||||
|
|
||||||
import AppTabs from '../tabs/AppTabs';
|
import AppTabs from '../tabs/AppTabs';
|
||||||
import RemotePlayButton from './RemotePlayButton';
|
import RemotePlayButton from './RemotePlayButton';
|
||||||
import SyncPlayButton from './SyncPlayButton';
|
import SyncPlayButton from './SyncPlayButton';
|
||||||
|
import SearchButton from './SearchButton';
|
||||||
import { isTabPath } from '../tabs/tabRoutes';
|
import { isTabPath } from '../tabs/tabRoutes';
|
||||||
|
|
||||||
interface AppToolbarProps {
|
interface AppToolbarProps {
|
||||||
|
@ -38,6 +33,7 @@ const ExperimentalAppToolbar: FC<AppToolbarProps> = ({
|
||||||
|
|
||||||
const isTabsAvailable = isTabPath(location.pathname);
|
const isTabsAvailable = isTabPath(location.pathname);
|
||||||
const isPublicPath = PUBLIC_PATHS.includes(location.pathname);
|
const isPublicPath = PUBLIC_PATHS.includes(location.pathname);
|
||||||
|
const isSearchPath = location.pathname === '/search.html';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppToolbar
|
<AppToolbar
|
||||||
|
@ -45,18 +41,7 @@ const ExperimentalAppToolbar: FC<AppToolbarProps> = ({
|
||||||
<>
|
<>
|
||||||
<SyncPlayButton />
|
<SyncPlayButton />
|
||||||
<RemotePlayButton />
|
<RemotePlayButton />
|
||||||
|
<SearchButton isTabsAvailable={isTabsAvailable} isSearchPath={isSearchPath} />
|
||||||
<Tooltip title={globalize.translate('Search')}>
|
|
||||||
<IconButton
|
|
||||||
size='large'
|
|
||||||
aria-label={globalize.translate('Search')}
|
|
||||||
color='inherit'
|
|
||||||
component={Link}
|
|
||||||
to='/search.html'
|
|
||||||
>
|
|
||||||
<SearchIcon />
|
|
||||||
</IconButton>
|
|
||||||
</Tooltip>
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
isDrawerAvailable={isDrawerAvailable}
|
isDrawerAvailable={isDrawerAvailable}
|
||||||
|
|
|
@ -637,7 +637,7 @@ class AppRouter {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.CollectionType == CollectionType.Livetv) {
|
if (item.CollectionType == CollectionType.Livetv) {
|
||||||
return '#/livetv.html';
|
return `#/livetv.html?collectionType=${item.CollectionType}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.Type === 'Genre') {
|
if (item.Type === 'Genre') {
|
||||||
|
@ -676,7 +676,7 @@ class AppRouter {
|
||||||
|
|
||||||
if (context !== 'folders' && !itemHelper.isLocalItem(item)) {
|
if (context !== 'folders' && !itemHelper.isLocalItem(item)) {
|
||||||
if (item.CollectionType == CollectionType.Movies) {
|
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') {
|
if (options && options.section === 'latest') {
|
||||||
url += '&tab=1';
|
url += '&tab=1';
|
||||||
|
@ -686,7 +686,7 @@ class AppRouter {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.CollectionType == CollectionType.Tvshows) {
|
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') {
|
if (options && options.section === 'latest') {
|
||||||
url += '&tab=1';
|
url += '&tab=1';
|
||||||
|
@ -696,7 +696,7 @@ class AppRouter {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.CollectionType == CollectionType.Music) {
|
if (item.CollectionType == CollectionType.Music) {
|
||||||
url = '#/music.html?topParentId=' + item.Id;
|
url = `#/music.html?topParentId=${item.Id}&collectionType=${item.CollectionType}`;
|
||||||
|
|
||||||
if (options?.section === 'latest') {
|
if (options?.section === 'latest') {
|
||||||
url += '&tab=1';
|
url += '&tab=1';
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue