Merge pull request #7017 from thornbill/plugin-unity
Add unified plugin page
This commit is contained in:
Bill Thornton
@@ -21,7 +21,6 @@ export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
|
||||
{ path: 'playback/trickplay', type: AppType.Dashboard },
|
||||
{ path: 'plugins', type: AppType.Dashboard },
|
||||
{ path: 'plugins/:pluginId', page: 'plugins/plugin', type: AppType.Dashboard },
|
||||
{ path: 'plugins/catalog', type: AppType.Dashboard },
|
||||
{ path: 'plugins/repositories', type: AppType.Dashboard },
|
||||
{ path: 'tasks', type: AppType.Dashboard },
|
||||
{ path: 'tasks/:id', page: 'tasks/task', type: AppType.Dashboard },
|
||||
|
||||
@@ -1,96 +0,0 @@
|
||||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
import Page from 'components/Page';
|
||||
import globalize from 'lib/globalize';
|
||||
import Box from '@mui/material/Box';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { usePackages } from 'apps/dashboard/features/plugins/api/usePackages';
|
||||
import Loading from 'components/loading/LoadingComponent';
|
||||
import getPackageCategories from 'apps/dashboard/features/plugins/utils/getPackageCategories';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import getPackagesByCategory from 'apps/dashboard/features/plugins/utils/getPackagesByCategory';
|
||||
import PackageCard from 'apps/dashboard/features/plugins/components/PackageCard';
|
||||
import Grid from '@mui/material/Grid2';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Settings from '@mui/icons-material/Settings';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { CATEGORY_LABELS } from 'apps/dashboard/features/plugins/constants/categoryLabels';
|
||||
|
||||
export const Component = () => {
|
||||
const { data: packages, isPending: isPackagesPending } = usePackages();
|
||||
const [ searchQuery, setSearchQuery ] = useState('');
|
||||
|
||||
const filteredPackages = useMemo(() => {
|
||||
return packages?.filter(i => i.name?.toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase()));
|
||||
}, [ packages, searchQuery ]);
|
||||
|
||||
const packageCategories = getPackageCategories(filteredPackages);
|
||||
|
||||
const updateSearchQuery = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearchQuery(e.target.value);
|
||||
}, []);
|
||||
|
||||
const getCategoryLabel = (category: string) => {
|
||||
const categoryKey = category.replace(/\s/g, '');
|
||||
|
||||
if (CATEGORY_LABELS[categoryKey]) {
|
||||
return globalize.translate(CATEGORY_LABELS[categoryKey]);
|
||||
}
|
||||
|
||||
console.warn('[AvailablePlugins] unmapped category label', category);
|
||||
return category;
|
||||
};
|
||||
|
||||
if (isPackagesPending) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Page
|
||||
id='pluginCatalogPage'
|
||||
className='mainAnimatedPage type-interior'
|
||||
title={globalize.translate('TabCatalog')}
|
||||
>
|
||||
<Box className='content-primary'>
|
||||
<Stack spacing={3}>
|
||||
<Stack direction='row' gap={1}>
|
||||
<Typography variant='h1'>{globalize.translate('TabCatalog')}</Typography>
|
||||
<IconButton
|
||||
component={Link}
|
||||
to='/dashboard/plugins/repositories'
|
||||
sx={{
|
||||
backgroundColor: 'background.paper'
|
||||
}}
|
||||
>
|
||||
<Settings />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
|
||||
<TextField
|
||||
label={globalize.translate('Search')}
|
||||
value={searchQuery}
|
||||
onChange={updateSearchQuery}
|
||||
/>
|
||||
|
||||
{packageCategories.map(category => (
|
||||
<Stack key={category} spacing={2}>
|
||||
<Typography variant='h2'>{getCategoryLabel(category)}</Typography>
|
||||
|
||||
<Grid container spacing={2} columns={{ xs: 1, sm: 4, md: 9, lg: 8, xl: 10 }}>
|
||||
{getPackagesByCategory(filteredPackages, category).map(pkg => (
|
||||
<Grid key={pkg.guid} size={{ xs: 1, sm: 2, md: 3, lg: 2 }}>
|
||||
<PackageCard
|
||||
pkg={pkg}
|
||||
/>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
Component.displayName = 'PluginsCatalogPage';
|
||||
@@ -1,44 +1,93 @@
|
||||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Page from 'components/Page';
|
||||
import globalize from 'lib/globalize';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import { usePlugins } from 'apps/dashboard/features/plugins/api/usePlugins';
|
||||
import Loading from 'components/loading/LoadingComponent';
|
||||
import Alert from '@mui/material/Alert';
|
||||
import Grid from '@mui/material/Grid2';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import SearchInput from 'apps/dashboard/components/SearchInput';
|
||||
import { usePluginDetails } from 'apps/dashboard/features/plugins/api/usePluginDetails';
|
||||
import NoPluginResults from 'apps/dashboard/features/plugins/components/NoPluginResults';
|
||||
import PluginCard from 'apps/dashboard/features/plugins/components/PluginCard';
|
||||
import { useConfigurationPages } from 'apps/dashboard/features/plugins/api/useConfigurationPages';
|
||||
import { findBestConfigurationPage } from 'apps/dashboard/features/plugins/api/configurationPage';
|
||||
import { CATEGORY_LABELS } from 'apps/dashboard/features/plugins/constants/categoryLabels';
|
||||
import { PluginCategory } from 'apps/dashboard/features/plugins/constants/pluginCategory';
|
||||
import { PluginStatusOption } from 'apps/dashboard/features/plugins/constants/pluginStatusOption';
|
||||
import Loading from 'components/loading/LoadingComponent';
|
||||
import Page from 'components/Page';
|
||||
import useSearchParam from 'hooks/useSearchParam';
|
||||
import globalize from 'lib/globalize';
|
||||
|
||||
/**
|
||||
* The list of primary/main categories.
|
||||
* Any category not in this list will be added to the "other" category.
|
||||
*/
|
||||
const MAIN_CATEGORIES = [
|
||||
PluginCategory.Administration.toLowerCase(),
|
||||
PluginCategory.General.toLowerCase(),
|
||||
PluginCategory.Anime.toLowerCase(),
|
||||
PluginCategory.Books.toLowerCase(),
|
||||
PluginCategory.LiveTV.toLowerCase(),
|
||||
PluginCategory.MoviesAndShows.toLowerCase(),
|
||||
PluginCategory.Music.toLowerCase(),
|
||||
PluginCategory.Subtitles.toLowerCase()
|
||||
];
|
||||
|
||||
const CATEGORY_PARAM = 'category';
|
||||
const QUERY_PARAM = 'query';
|
||||
const STATUS_PARAM = 'status';
|
||||
|
||||
export const Component = () => {
|
||||
const {
|
||||
data: plugins,
|
||||
isPending,
|
||||
isError
|
||||
} = usePlugins();
|
||||
const {
|
||||
data: configurationPages,
|
||||
isError: isConfigurationPagesError,
|
||||
isPending: isConfigurationPagesPending
|
||||
} = useConfigurationPages();
|
||||
const [ searchQuery, setSearchQuery ] = useState('');
|
||||
data: pluginDetails,
|
||||
isError,
|
||||
isPending
|
||||
} = usePluginDetails();
|
||||
const [ category, setCategory ] = useSearchParam(CATEGORY_PARAM);
|
||||
const [ searchQuery, setSearchQuery ] = useSearchParam(QUERY_PARAM);
|
||||
const [ status, setStatus ] = useSearchParam(STATUS_PARAM, PluginStatusOption.Installed);
|
||||
|
||||
const onSearchChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
|
||||
setSearchQuery(event.target.value);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const onViewAll = useCallback(() => {
|
||||
if (category) setCategory('');
|
||||
else setStatus(PluginStatusOption.All);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [ category ]);
|
||||
|
||||
const filteredPlugins = useMemo(() => {
|
||||
if (plugins) {
|
||||
return plugins.filter(i => i.Name?.toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase()));
|
||||
if (pluginDetails) {
|
||||
let filtered = pluginDetails;
|
||||
|
||||
if (status === PluginStatusOption.Installed) {
|
||||
filtered = filtered.filter(p => p.status);
|
||||
} else if (status === PluginStatusOption.Available) {
|
||||
filtered = filtered.filter(p => !p.status);
|
||||
}
|
||||
|
||||
if (category) {
|
||||
if (category === PluginCategory.Other.toLowerCase()) {
|
||||
filtered = filtered.filter(p => (
|
||||
p.category && !MAIN_CATEGORIES.includes(p.category.toLowerCase())
|
||||
));
|
||||
} else {
|
||||
filtered = filtered.filter(p => p.category?.toLowerCase() === category);
|
||||
}
|
||||
}
|
||||
return filtered
|
||||
.filter(i => i.name?.toLowerCase().includes(searchQuery.toLowerCase()));
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}, [ plugins, searchQuery ]);
|
||||
}, [ category, pluginDetails, searchQuery, status ]);
|
||||
|
||||
if (isPending || isConfigurationPagesPending) {
|
||||
if (isPending) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
@@ -49,31 +98,161 @@ export const Component = () => {
|
||||
className='type-interior mainAnimatedPage'
|
||||
>
|
||||
<Box className='content-primary'>
|
||||
{isError || isConfigurationPagesError ? (
|
||||
<Alert severity='error'>{globalize.translate('PluginsLoadError')}</Alert>
|
||||
{isError ? (
|
||||
<Alert
|
||||
severity='error'
|
||||
sx={{ marginBottom: 2 }}
|
||||
>
|
||||
{globalize.translate('PluginsLoadError')}
|
||||
</Alert>
|
||||
) : (
|
||||
<Stack spacing={3}>
|
||||
<Typography variant='h1'>
|
||||
{globalize.translate('TabMyPlugins')}
|
||||
</Typography>
|
||||
<Stack spacing={2}>
|
||||
<Stack
|
||||
direction='row'
|
||||
sx={{
|
||||
flexWrap: {
|
||||
xs: 'wrap',
|
||||
sm: 'nowrap'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant='h1'
|
||||
component='span'
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
verticalAlign: 'middle'
|
||||
}}
|
||||
>
|
||||
{globalize.translate('TabPlugins')}
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
label={globalize.translate('Search')}
|
||||
value={searchQuery}
|
||||
onChange={onSearchChange}
|
||||
/>
|
||||
<Button
|
||||
component={Link}
|
||||
to='/dashboard/plugins/repositories'
|
||||
variant='outlined'
|
||||
sx={{
|
||||
marginLeft: 2
|
||||
}}
|
||||
>
|
||||
{globalize.translate('ManageRepositories')}
|
||||
</Button>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'end',
|
||||
marginTop: {
|
||||
xs: 2,
|
||||
sm: 0
|
||||
},
|
||||
marginLeft: {
|
||||
xs: 0,
|
||||
sm: 2
|
||||
},
|
||||
width: {
|
||||
xs: '100%',
|
||||
sm: 'auto'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SearchInput
|
||||
label={globalize.translate('Search')}
|
||||
value={searchQuery}
|
||||
onChange={onSearchChange}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<Box>
|
||||
<Grid container spacing={2} columns={{ xs: 1, sm: 4, md: 9, lg: 8, xl: 10 }}>
|
||||
{filteredPlugins.map(plugin => (
|
||||
<Grid key={plugin.Id} size={{ xs: 1, sm: 2, md: 3, lg: 2 }}>
|
||||
<PluginCard
|
||||
plugin={plugin}
|
||||
configurationPage={findBestConfigurationPage(configurationPages, plugin.Id || '')}
|
||||
/>
|
||||
</Grid>
|
||||
<Stack
|
||||
direction='row'
|
||||
spacing={1}
|
||||
sx={{
|
||||
marginLeft: '-1rem',
|
||||
marginRight: '-1rem',
|
||||
paddingLeft: '1rem',
|
||||
paddingRight: '1rem',
|
||||
paddingBottom: {
|
||||
xs: 1,
|
||||
md: 0.5
|
||||
},
|
||||
overflowX: 'auto'
|
||||
}}
|
||||
>
|
||||
<Chip
|
||||
color={status === PluginStatusOption.All ? 'primary' : undefined}
|
||||
// eslint-disable-next-line react/jsx-no-bind
|
||||
onClick={() => setStatus(PluginStatusOption.All)}
|
||||
label={globalize.translate('All')}
|
||||
/>
|
||||
|
||||
<Chip
|
||||
color={status === PluginStatusOption.Available ? 'primary' : undefined}
|
||||
// eslint-disable-next-line react/jsx-no-bind
|
||||
onClick={() => setStatus(PluginStatusOption.Available)}
|
||||
label={globalize.translate('LabelAvailable')}
|
||||
/>
|
||||
|
||||
<Chip
|
||||
color={status === PluginStatusOption.Installed ? 'primary' : undefined}
|
||||
// eslint-disable-next-line react/jsx-no-bind
|
||||
onClick={() => setStatus(PluginStatusOption.Installed)}
|
||||
label={globalize.translate('LabelInstalled')}
|
||||
/>
|
||||
|
||||
<Divider orientation='vertical' flexItem />
|
||||
|
||||
<Chip
|
||||
color={!category ? 'primary' : undefined}
|
||||
// eslint-disable-next-line react/jsx-no-bind
|
||||
onClick={() => setCategory('')}
|
||||
label={globalize.translate('All')}
|
||||
/>
|
||||
|
||||
{Object.values(PluginCategory).map(c => (
|
||||
<Chip
|
||||
key={c}
|
||||
color={category === c.toLowerCase() ? 'primary' : undefined}
|
||||
// eslint-disable-next-line react/jsx-no-bind
|
||||
onClick={() => setCategory(c.toLowerCase())}
|
||||
label={globalize.translate(CATEGORY_LABELS[c as PluginCategory])}
|
||||
/>
|
||||
))}
|
||||
</Grid>
|
||||
</Stack>
|
||||
<Divider />
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
{filteredPlugins.length > 0 ? (
|
||||
// NOTE: Legacy Grid is required due to lack of gap support in JMP on some OSs
|
||||
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
||||
<Grid container spacing={2}>
|
||||
{filteredPlugins.map(plugin => (
|
||||
// NOTE: Legacy Grid is required due to lack of gap support in JMP on some OSs
|
||||
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
||||
<Grid
|
||||
key={plugin.id}
|
||||
item
|
||||
xs={12}
|
||||
sm={6}
|
||||
md={4}
|
||||
lg={3}
|
||||
xl={2}
|
||||
>
|
||||
<PluginCard
|
||||
plugin={plugin}
|
||||
/>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
) : (
|
||||
<NoPluginResults
|
||||
isFiltered={!!category || status !== PluginStatusOption.All}
|
||||
onViewAll={onViewAll}
|
||||
query={searchQuery}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
@@ -115,7 +115,7 @@ const PluginPage: FC = () => {
|
||||
isEnabled: (isEnabledOverride && pluginInfo?.Status === PluginStatus.Restart)
|
||||
?? pluginInfo?.Status !== PluginStatus.Disabled,
|
||||
name: pluginName || pluginInfo?.Name || packageInfo?.name,
|
||||
owner: packageInfo?.owner,
|
||||
owner: pluginInfo?.CanUninstall === false ? 'jellyfin' : packageInfo?.owner,
|
||||
status: pluginInfo?.Status,
|
||||
configurationPage: findBestConfigurationPage(configurationPages || [], pluginId),
|
||||
version,
|
||||
@@ -168,7 +168,8 @@ const PluginPage: FC = () => {
|
||||
alerts.push({ messageKey: 'PluginLoadConfigError' });
|
||||
}
|
||||
|
||||
if (isPackageInfoError) {
|
||||
// Don't show package load error for built-in plugins
|
||||
if (!isPluginsLoading && pluginDetails?.canUninstall && isPackageInfoError) {
|
||||
alerts.push({
|
||||
severity: 'warning',
|
||||
messageKey: 'PluginLoadRepoError'
|
||||
@@ -188,6 +189,8 @@ const PluginPage: FC = () => {
|
||||
isConfigurationPagesError,
|
||||
isPackageInfoError,
|
||||
isPluginsError,
|
||||
isPluginsLoading,
|
||||
pluginDetails?.canUninstall,
|
||||
uninstallPlugin.isError
|
||||
]);
|
||||
|
||||
@@ -310,7 +313,11 @@ const PluginPage: FC = () => {
|
||||
<Container className='content-primary'>
|
||||
|
||||
{alertMessages.map(({ severity = 'error', messageKey }) => (
|
||||
<Alert key={messageKey} severity={severity}>
|
||||
<Alert
|
||||
key={messageKey}
|
||||
severity={severity}
|
||||
sx={{ marginBottom: 2 }}
|
||||
>
|
||||
{globalize.translate(messageKey)}
|
||||
</Alert>
|
||||
))}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { RouteObject } from 'react-router-dom';
|
||||
import { Navigate, RouteObject } from 'react-router-dom';
|
||||
|
||||
import ConnectionRequired from 'components/ConnectionRequired';
|
||||
import { ASYNC_ADMIN_ROUTES } from './_asyncRoutes';
|
||||
@@ -26,7 +26,11 @@ export const DASHBOARD_APP_ROUTES: RouteObject[] = [
|
||||
path: DASHBOARD_APP_PATHS.Dashboard,
|
||||
children: [
|
||||
...ASYNC_ADMIN_ROUTES.map(toAsyncPageRoute),
|
||||
...LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)
|
||||
...LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute),
|
||||
{
|
||||
path: 'plugins/catalog',
|
||||
element: <Navigate replace to='/dashboard/plugins' />
|
||||
}
|
||||
],
|
||||
errorElement: <ErrorBoundary pageClasses={[ 'type-interior' ]} />
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user