milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'master' into enable-airplay-audioplayer

Browse source
This commit is contained in:
stamatovg 2023-07-20 18:10:13 +03:00 • committed by GitHub
commit e0d4aa6c77
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
227 changed files with 5818 additions and 2022 deletions
Download patch file Download diff file Expand all files Collapse all files

23
.eslintrc.js
View file

@ -6,7 +6,6 @@ module.exports = {
plugins: [
'@typescript-eslint',
'react',
'promise',
'import',
'eslint-comments',
'sonarjs'
@ -20,7 +19,6 @@ module.exports = {
extends: [
'eslint:recommended',
'plugin:react/recommended',
// 'plugin:promise/recommended',
'plugin:import/errors',
'plugin:eslint-comments/recommended',
'plugin:compat/recommended',
@ -37,11 +35,18 @@ module.exports = {
'indent': ['error', 4, { 'SwitchCase': 1 }],
'jsx-quotes': ['error', 'prefer-single'],
'keyword-spacing': ['error'],
'no-throw-literal': ['error'],
'max-statements-per-line': ['error'],
'max-params': ['error', 7],
'new-cap': [
'error',
{
'capIsNewExceptions': ['jQuery.Deferred'],
'newIsCapExceptionPattern': '\\.default$'
}
],
'no-duplicate-imports': ['error'],
'no-empty-function': ['error'],
'no-extend-native': ['error'],
'no-floating-decimal': ['error'],
'no-multi-spaces': ['error'],
'no-multiple-empty-lines': ['error', { 'max': 1 }],
@ -54,6 +59,7 @@ module.exports = {
'no-sequences': ['error', { 'allowInParentheses': false }],
'no-shadow': ['off'],
'@typescript-eslint/no-shadow': ['error'],
'no-throw-literal': ['error'],
'no-trailing-spaces': ['error'],
'no-unused-expressions': ['off'],
'@typescript-eslint/no-unused-expressions': ['error', { 'allowShortCircuit': true, 'allowTernary': true, 'allowTaggedTemplates': true }],
@ -68,6 +74,7 @@ module.exports = {
'padded-blocks': ['error', 'never'],
'prefer-const': ['error', { 'destructuring': 'all' }],
'@typescript-eslint/prefer-for-of': ['error'],
'@typescript-eslint/prefer-optional-chain': ['error'],
'quotes': ['error', 'single', { 'avoidEscape': true, 'allowTemplateLiterals': false }],
'radix': ['error'],
'@typescript-eslint/semi': ['error'],
@ -206,10 +213,7 @@ module.exports = {
// JavaScript source files
{
files: [
'./src/**/*.js',
'./src/**/*.jsx',
'./src/**/*.ts',
'./src/**/*.tsx'
'./src/**/*.{js,jsx,ts,tsx}'
],
parserOptions: {
project: ['./tsconfig.json']
@ -253,15 +257,13 @@ module.exports = {
'Windows': 'readonly'
},
rules: {
'@typescript-eslint/no-floating-promises': ['warn'],
'@typescript-eslint/prefer-string-starts-ends-with': ['error']
}
},
// TypeScript source files
{
files: [
'./src/**/*.ts',
'./src/**/*.tsx'
'./src/**/*.{ts,tsx}'
],
extends: [
'eslint:recommended',
@ -274,6 +276,7 @@ module.exports = {
],
rules: {
'@typescript-eslint/no-floating-promises': ['error'],
'@typescript-eslint/no-unused-vars': ['error'],
'sonarjs/cognitive-complexity': ['error']
}

8
.github/workflows/codeql-analysis.yml vendored
View file

@ -19,13 +19,13 @@ jobs:
language: [ 'javascript' ]
steps:
- name: Checkout repository
uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
- name: Initialize CodeQL
uses: github/codeql-action/init@83f0fe6c4988d98a455712a27f0255212bba9bd4 # v2.3.6
uses: github/codeql-action/init@46ed16ded91731b2df79a2893d3aea8e9f03b5c4 # v2.20.3
with:
languages: ${{ matrix.language }}
queries: +security-extended
- name: Autobuild
uses: github/codeql-action/autobuild@83f0fe6c4988d98a455712a27f0255212bba9bd4 # v2.3.6
uses: github/codeql-action/autobuild@46ed16ded91731b2df79a2893d3aea8e9f03b5c4 # v2.20.3
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@83f0fe6c4988d98a455712a27f0255212bba9bd4 # v2.3.6
uses: github/codeql-action/analyze@46ed16ded91731b2df79a2893d3aea8e9f03b5c4 # v2.20.3

6
.github/workflows/commands.yml vendored
View file

@ -12,13 +12,13 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Notify as seen
uses: peter-evans/create-or-update-comment@ca08ebd5dc95aa0cd97021e9708fcd6b87138c9b # v3.0.1
uses: peter-evans/create-or-update-comment@c6c9a1a66007646a28c153e2a8580a5bad27bcfa # v3.0.2
with:
token: ${{ secrets.JF_BOT_TOKEN }}
comment-id: ${{ github.event.comment.id }}
reactions: '+1'
- name: Checkout the latest code
uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
with:
token: ${{ secrets.JF_BOT_TOKEN }}
fetch-depth: 0
@ -28,7 +28,7 @@ jobs:
GITHUB_TOKEN: ${{ secrets.JF_BOT_TOKEN }}
- name: Comment on failure
if: failure()
uses: peter-evans/create-or-update-comment@ca08ebd5dc95aa0cd97021e9708fcd6b87138c9b # v3.0.1
uses: peter-evans/create-or-update-comment@c6c9a1a66007646a28c153e2a8580a5bad27bcfa # v3.0.2
with:
token: ${{ secrets.JF_BOT_TOKEN }}
issue-number: ${{ github.event.issue.number }}

16
.github/workflows/lint.yml vendored
View file

@ -13,10 +13,10 @@ jobs:
steps:
- name: Check out Git repository
uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
- name: Setup node environment
uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
with:
node-version: 16
check-latest: true
@ -37,10 +37,10 @@ jobs:
steps:
- name: Check out Git repository
uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
- name: Setup node environment
uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
with:
node-version: 16
check-latest: true
@ -58,10 +58,10 @@ jobs:
steps:
- name: Check out Git repository
uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
- name: Setup node environment
uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
with:
node-version: 16
check-latest: true
@ -82,10 +82,10 @@ jobs:
steps:
- name: Check out Git repository
uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
- name: Setup node environment
uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
with:
node-version: 16
check-latest: true

4
.github/workflows/tsc.yml vendored
View file

@ -13,10 +13,10 @@ jobs:
steps:
- name: Check out Git repository
uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
- name: Setup node environment
uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
with:
node-version: 16
check-latest: true

1172
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

39
package.json
View file

@ -26,7 +26,7 @@
"confusing-browser-globals": "1.0.11",
"copy-webpack-plugin": "11.0.0",
"cross-env": "7.0.3",
"css-loader": "6.7.4",
"css-loader": "6.8.1",
"cssnano": "6.0.1",
"es-check": "7.1.1",
"eslint": "8.41.0",
@ -34,20 +34,19 @@
"eslint-plugin-eslint-comments": "3.2.0",
"eslint-plugin-import": "2.27.5",
"eslint-plugin-jsx-a11y": "6.7.1",
"eslint-plugin-promise": "6.1.1",
"eslint-plugin-react": "7.32.2",
"eslint-plugin-react-hooks": "4.6.0",
"eslint-plugin-sonarjs": "0.19.0",
"expose-loader": "4.1.0",
"html-loader": "4.2.0",
"html-webpack-plugin": "5.5.1",
"html-webpack-plugin": "5.5.3",
"mini-css-extract-plugin": "2.7.6",
"postcss": "8.4.24",
"postcss-loader": "7.3.1",
"postcss-loader": "7.3.3",
"postcss-preset-env": "8.4.1",
"postcss-scss": "4.0.6",
"sass": "1.62.1",
"sass-loader": "13.3.0",
"sass-loader": "13.3.2",
"source-map-loader": "4.0.1",
"style-loader": "3.3.3",
"stylelint": "15.6.2",
@ -55,28 +54,32 @@
"stylelint-no-browser-hacks": "1.2.1",
"stylelint-order": "6.0.3",
"stylelint-scss": "5.0.0",
"ts-loader": "9.4.3",
"ts-loader": "9.4.4",
"typescript": "5.0.4",
"webpack": "5.84.1",
"webpack-cli": "5.1.1",
"webpack-dev-server": "4.15.0",
"webpack": "5.88.1",
"webpack-cli": "5.1.4",
"webpack-dev-server": "4.15.1",
"webpack-merge": "5.9.0",
"workbox-webpack-plugin": "6.5.4",
"workbox-webpack-plugin": "6.6.0",
"worker-loader": "3.0.8"
},
"dependencies": {
"@emotion/react": "11.11.0",
"@emotion/styled": "11.11.0",
"@fontsource/noto-sans": "4.5.11",
"@fontsource/noto-sans-hk": "4.5.12",
"@fontsource/noto-sans-jp": "4.5.12",
"@fontsource/noto-sans-kr": "4.5.12",
"@fontsource/noto-sans-sc": "4.5.12",
"@fontsource/noto-sans-tc": "4.5.12",
"@fontsource/noto-sans": "5.0.4",
"@fontsource/noto-sans-hk": "5.0.4",
"@fontsource/noto-sans-jp": "5.0.4",
"@fontsource/noto-sans-kr": "5.0.4",
"@fontsource/noto-sans-sc": "5.0.4",
"@fontsource/noto-sans-tc": "5.0.4",
"@jellyfin/sdk": "unstable",
"@loadable/component": "5.15.3",
"@mui/icons-material": "5.11.16",
"@mui/material": "5.13.3",
"@mui/x-data-grid": "6.6.0",
"@react-hook/resize-observer": "1.2.6",
"@tanstack/react-query": "4.29.12",
"@tanstack/react-query-devtools": "4.29.12",
"blurhash": "2.0.5",
"classlist.js": "https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz",
"classnames": "2.3.2",
@ -111,8 +114,8 @@
"swiper": "9.3.2",
"webcomponents.js": "0.7.24",
"whatwg-fetch": "3.6.2",
"workbox-core": "6.5.4",
"workbox-precaching": "6.5.4"
"workbox-core": "6.6.0",
"workbox-precaching": "6.6.0"
},
"browserslist": [
"last 2 Firefox versions",

7
src/RootApp.tsx
View file

@ -1,6 +1,8 @@
import loadable from '@loadable/component';
import { History } from '@remix-run/router';
import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import StableApp from './apps/stable/App';
import { HistoryRouter } from './components/router/HistoryRouter';
@ -9,10 +11,13 @@ import { WebConfigProvider } from './hooks/useWebConfig';
const ExperimentalApp = loadable(() => import('./apps/experimental/App'));
const queryClient = new QueryClient();
const RootApp = ({ history }: { history: History }) => {
const layoutMode = localStorage.getItem('layout');
return (
<QueryClientProvider client={queryClient}>
<ApiProvider>
<WebConfigProvider>
<HistoryRouter history={history}>
@ -24,6 +29,8 @@ const RootApp = ({ history }: { history: History }) => {
</HistoryRouter>
</WebConfigProvider>
</ApiProvider>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
);
};

3
src/apps/experimental/App.tsx
View file

@ -36,6 +36,9 @@ const ExperimentalApp = () => {
{LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute)}
</Route>
{/* Redirects for old paths */}
<Route path='serveractivity.html' element={<Navigate replace to='/dashboard/activity' />} />
</Route>
</Routes>
);

19
src/apps/experimental/components/AppToolbar/UserMenuButton.tsx
View file

@ -1,6 +1,4 @@
import Avatar from '@mui/material/Avatar';
import IconButton from '@mui/material/IconButton';
import { useTheme } from '@mui/material/styles';
import Tooltip from '@mui/material/Tooltip';
import React, { useCallback, useState } from 'react';
@ -8,10 +6,10 @@ import { useApi } from 'hooks/useApi';
import globalize from 'scripts/globalize';
import AppUserMenu, { ID } from './menus/AppUserMenu';
import UserAvatar from 'components/UserAvatar';
const UserMenuButton = () => {
const theme = useTheme();
const { api, user } = useApi();
const { user } = useApi();
const [ userMenuAnchorEl, setUserMenuAnchorEl ] = useState<null | HTMLElement>(null);
const isUserMenuOpen = Boolean(userMenuAnchorEl);
@ -37,18 +35,7 @@ const UserMenuButton = () => {
color='inherit'
sx={{ padding: 0 }}
>
<Avatar
alt={user?.Name || undefined}
src={
api && user?.Id ?
`${api.basePath}/Users/${user.Id}/Images/Primary?tag=${user.PrimaryImageTag}` :
undefined
}
sx={{
bgcolor: theme.palette.primary.dark,
color: 'inherit'
}}
/>
<UserAvatar user={user} />
</IconButton>
</Tooltip>

27
src/apps/experimental/components/AppToolbar/index.tsx
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'
}}

33
src/apps/experimental/components/AppToolbar/menus/AppUserMenu.tsx
View file

@ -1,5 +1,8 @@
import { AppSettingsAlt, Close } from '@mui/icons-material';
import AccountCircle from '@mui/icons-material/AccountCircle';
import AppSettingsAlt from '@mui/icons-material/AppSettingsAlt';
import Close from '@mui/icons-material/Close';
import DashboardIcon from '@mui/icons-material/Dashboard';
import Edit from '@mui/icons-material/Edit';
import Logout from '@mui/icons-material/Logout';
import PhonelinkLock from '@mui/icons-material/PhonelinkLock';
import Settings from '@mui/icons-material/Settings';
@ -106,6 +109,34 @@ const AppUserMenu: FC<AppUserMenuProps> = ({
</MenuItem>
])}
{/* ADMIN LINKS */}
{user?.Policy?.IsAdministrator && ([
<Divider key='admin-links-divider' />,
<MenuItem
key='admin-dashboard-link'
component={Link}
to='/dashboard.html'
onClick={onMenuClose}
>
<ListItemIcon>
<DashboardIcon />
</ListItemIcon>
<ListItemText primary={globalize.translate('TabDashboard')} />
</MenuItem>,
<MenuItem
key='admin-metadata-link'
component={Link}
to='/edititemmetadata.html'
onClick={onMenuClose}
>
<ListItemIcon>
<Edit />
</ListItemIcon>
<ListItemText primary={globalize.translate('MetadataManager')} />
</MenuItem>
])}
<Divider />
<MenuItem
component={Link}

17
src/apps/experimental/components/GridActionsCellLink.tsx Normal file
View file

@ -0,0 +1,17 @@
import React, { type RefAttributes } from 'react';
import { Link } from 'react-router-dom';
import { GridActionsCellItem, type GridActionsCellItemProps } from '@mui/x-data-grid';
type GridActionsCellLinkProps = { to: string } & GridActionsCellItemProps & RefAttributes<HTMLButtonElement>;
/**
* Link component to use in mui's data-grid action column due to a current bug with passing props to custom link components.
* @see https://github.com/mui/mui-x/issues/4654
*/
const GridActionsCellLink = ({ to, ...props }: GridActionsCellLinkProps) => (
<Link to={to}>
<GridActionsCellItem {...props} />
</Link>
);
export default GridActionsCellLink;

34
src/apps/experimental/components/activityTable/LogLevelChip.tsx Normal file
View file

@ -0,0 +1,34 @@
import { LogLevel } from '@jellyfin/sdk/lib/generated-client/models/log-level';
import Chip from '@mui/material/Chip';
import React from 'react';
import globalize from 'scripts/globalize';
const LogLevelChip = ({ level }: { level: LogLevel }) => {
let color: 'info' | 'warning' | 'error' | undefined = undefined;
switch (level) {
case LogLevel.Information:
color = 'info';
break;
case LogLevel.Warning:
color = 'warning';
break;
case LogLevel.Error:
case LogLevel.Critical:
color = 'error';
break;
}
const levelText = globalize.translate(`LogLevel.${level}`);
return (
<Chip
size='small'
color={color}
label={levelText}
title={levelText}
/>
);
};
export default LogLevelChip;

64
src/apps/experimental/components/activityTable/OverviewCell.tsx Normal file
View file

@ -0,0 +1,64 @@
import type { ActivityLogEntry } from '@jellyfin/sdk/lib/generated-client/models/activity-log-entry';
import Info from '@mui/icons-material/Info';
import Box from '@mui/material/Box';
import ClickAwayListener from '@mui/material/ClickAwayListener';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import React, { FC, useCallback, useState } from 'react';
const OverviewCell: FC<ActivityLogEntry> = ({ Overview, ShortOverview }) => {
const displayValue = ShortOverview ?? Overview;
const [ open, setOpen ] = useState(false);
const onTooltipClose = useCallback(() => {
setOpen(false);
}, []);
const onTooltipOpen = useCallback(() => {
setOpen(true);
}, []);
if (!displayValue) return null;
return (
<Box
sx={{
display: 'flex',
width: '100%',
alignItems: 'center'
}}
>
<Box
sx={{
flexGrow: 1,
overflow: 'hidden',
textOverflow: 'ellipsis'
}}
component='div'
title={displayValue}
>
{displayValue}
</Box>
{ShortOverview && Overview && (
<ClickAwayListener onClickAway={onTooltipClose}>
<Tooltip
title={Overview}
placement='top'
arrow
onClose={onTooltipClose}
open={open}
disableFocusListener
disableHoverListener
disableTouchListener
>
<IconButton onClick={onTooltipOpen}>
<Info />
</IconButton>
</Tooltip>
</ClickAwayListener>
)}
</Box>
);
};
export default OverviewCell;

2
src/apps/experimental/components/drawers/dashboard/DevicesDrawerSection.tsx
View file

@ -40,7 +40,7 @@ const DevicesDrawerSection = () => {
</ListItemLink>
</ListItem>
<ListItem disablePadding>
<ListItemLink to='/serveractivity.html'>
<ListItemLink to='/dashboard/activity'>
<ListItemIcon>
<Analytics />
</ListItemIcon>

51
src/apps/experimental/components/library/GenresItemsContainer.tsx Normal file
View file

@ -0,0 +1,51 @@
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
import React, { FC } from 'react';
import { useGetGenres } from 'hooks/useFetchItems';
import globalize from 'scripts/globalize';
import Loading from 'components/loading/LoadingComponent';
import GenresSectionContainer from './GenresSectionContainer';
import { CollectionType } from 'types/collectionType';
interface GenresItemsContainerProps {
parentId?: string | null;
collectionType?: CollectionType;
itemType: BaseItemKind;
}
const GenresItemsContainer: FC<GenresItemsContainerProps> = ({
parentId,
collectionType,
itemType
}) => {
const { isLoading, data: genresResult } = useGetGenres(
itemType,
parentId
);
if (isLoading) {
return <Loading />;
}
return (
<>
{!genresResult?.Items?.length ? (
<div className='noItemsMessage centerMessage'>
<h1>{globalize.translate('MessageNothingHere')}</h1>
<p>{globalize.translate('MessageNoGenresAvailable')}</p>
</div>
) : (
genresResult?.Items?.map((genre) => (
<GenresSectionContainer
key={genre.Id}
collectionType={collectionType}
parentId={parentId}
itemType={itemType}
genre={genre}
/>
))
)}
</>
);
};
export default GenresItemsContainer;

79
src/apps/experimental/components/library/GenresSectionContainer.tsx Normal file
View file

@ -0,0 +1,79 @@
import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
import { ItemFields } from '@jellyfin/sdk/lib/generated-client/models/item-fields';
import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type';
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by';
import { SortOrder } from '@jellyfin/sdk/lib/generated-client/models/sort-order';
import escapeHTML from 'escape-html';
import React, { FC } from 'react';
import { useGetItems } from 'hooks/useFetchItems';
import Loading from 'components/loading/LoadingComponent';
import { appRouter } from 'components/router/appRouter';
import SectionContainer from './SectionContainer';
import { CollectionType } from 'types/collectionType';
interface GenresSectionContainerProps {
parentId?: string | null;
collectionType?: CollectionType;
itemType: BaseItemKind;
genre: BaseItemDto;
}
const GenresSectionContainer: FC<GenresSectionContainerProps> = ({
parentId,
collectionType,
itemType,
genre
}) => {
const getParametersOptions = () => {
return {
sortBy: [ItemSortBy.Random],
sortOrder: [SortOrder.Ascending],
includeItemTypes: [itemType],
recursive: true,
fields: [
ItemFields.PrimaryImageAspectRatio,
ItemFields.MediaSourceCount,
ItemFields.BasicSyncInfo
],
imageTypeLimit: 1,
enableImageTypes: [ImageType.Primary],
limit: 25,
genreIds: genre.Id ? [genre.Id] : undefined,
enableTotalRecordCount: false,
parentId: parentId ?? undefined
};
};
const { isLoading, data: itemsResult } = useGetItems(getParametersOptions());
const getRouteUrl = (item: BaseItemDto) => {
return appRouter.getRouteUrl(item, {
context: collectionType,
parentId: parentId
});
};
if (isLoading) {
return <Loading />;
}
return <SectionContainer
sectionTitle={escapeHTML(genre.Name)}
items={itemsResult?.Items || []}
url={getRouteUrl(genre)}
cardOptions={{
scalable: true,
overlayPlayButton: true,
showTitle: true,
centerText: true,
cardLayout: false,
shape: itemType === BaseItemKind.MusicAlbum ? 'overflowSquare' : 'overflowPortrait',
showParentTitle: itemType === BaseItemKind.MusicAlbum ? true : false,
showYear: itemType === BaseItemKind.MusicAlbum ? false : true
}}
/>;
};
export default GenresSectionContainer;

66
src/apps/experimental/components/library/RecommendationContainer.tsx Normal file
View file

@ -0,0 +1,66 @@
import { RecommendationDto, RecommendationType } from '@jellyfin/sdk/lib/generated-client';
import React, { FC } from 'react';
import globalize from 'scripts/globalize';
import escapeHTML from 'escape-html';
import SectionContainer from './SectionContainer';
interface RecommendationContainerProps {
recommendation?: RecommendationDto;
}
const RecommendationContainer: FC<RecommendationContainerProps> = ({
recommendation = {}
}) => {
let title = '';
switch (recommendation.RecommendationType) {
case RecommendationType.SimilarToRecentlyPlayed:
title = globalize.translate(
'RecommendationBecauseYouWatched',
recommendation.BaselineItemName
);
break;
case RecommendationType.SimilarToLikedItem:
title = globalize.translate(
'RecommendationBecauseYouLike',
recommendation.BaselineItemName
);
break;
case RecommendationType.HasDirectorFromRecentlyPlayed:
case RecommendationType.HasLikedDirector:
title = globalize.translate(
'RecommendationDirectedBy',
recommendation.BaselineItemName
);
break;
case RecommendationType.HasActorFromRecentlyPlayed:
case RecommendationType.HasLikedActor:
title = globalize.translate(
'RecommendationStarring',
recommendation.BaselineItemName
);
break;
}
return (
<SectionContainer
sectionTitle={escapeHTML(title)}
items={recommendation.Items || []}
cardOptions={{
shape: 'overflowPortrait',
showYear: true,
scalable: true,
overlayPlayButton: true,
showTitle: true,
centerText: true,
cardLayout: false
}}
/>
);
};
export default RecommendationContainer;

73
src/apps/experimental/components/library/SectionContainer.tsx Normal file
View file

@ -0,0 +1,73 @@
import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useEffect, useRef } from 'react';
import cardBuilder from 'components/cardbuilder/cardBuilder';
import ItemsContainerElement from 'elements/ItemsContainerElement';
import Scroller from 'elements/emby-scroller/Scroller';
import LinkButton from 'elements/emby-button/LinkButton';
import imageLoader from 'components/images/imageLoader';
import { CardOptions } from 'types/cardOptions';
interface SectionContainerProps {
url?: string;
sectionTitle: string;
items: BaseItemDto[];
cardOptions: CardOptions;
}
const SectionContainer: FC<SectionContainerProps> = ({
sectionTitle,
url,
items,
cardOptions
}) => {
const element = useRef<HTMLDivElement>(null);
useEffect(() => {
const itemsContainer = element.current?.querySelector('.itemsContainer');
cardBuilder.buildCards(items, {
itemsContainer: itemsContainer,
parentContainer: element.current,
...cardOptions
});
imageLoader.lazyChildren(itemsContainer);
}, [cardOptions, items]);
return (
<div ref={element} className='verticalSection hide'>
<div className='sectionTitleContainer sectionTitleContainer-cards padded-left'>
{url && items.length > 5 ? (
<LinkButton
className='more button-flat button-flat-mini sectionTitleTextButton btnMoreFromGenre'
href={url}
>
<h2 className='sectionTitle sectionTitle-cards'>
{sectionTitle}
</h2>
<span
className='material-icons chevron_right'
aria-hidden='true'
></span>
</LinkButton>
) : (
<h2 className='sectionTitle sectionTitle-cards'>
{sectionTitle}
</h2>
)}
</div>
<Scroller
className='padded-top-focusscale padded-bottom-focusscale'
isMouseWheelEnabled={false}
isCenterFocusEnabled={true}
>
<ItemsContainerElement className='itemsContainer scrollSlider focuscontainer-x' />
</Scroller>
</div>
);
};
export default SectionContainer;

206
src/apps/experimental/components/library/SuggestionsItemsContainer.tsx Normal file
View file

@ -0,0 +1,206 @@
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by';
import { SortOrder } from '@jellyfin/sdk/lib/generated-client/models/sort-order';
import React, { FC } from 'react';
import * as userSettings from 'scripts/settings/userSettings';
import SuggestionsSectionContainer from './SuggestionsSectionContainer';
import { Sections, SectionsView, SectionsViewType } from 'types/suggestionsSections';
const getSuggestionsSections = (): Sections[] => {
return [
{
name: 'HeaderContinueWatching',
viewType: SectionsViewType.ResumeItems,
type: 'Movie',
view: SectionsView.ContinueWatchingMovies,
parametersOptions: {
includeItemTypes: [BaseItemKind.Movie]
},
cardOptions: {
scalable: true,
overlayPlayButton: true,
showTitle: true,
centerText: true,
cardLayout: false,
preferThumb: true,
shape: 'overflowBackdrop',
showYear: true
}
},
{
name: 'HeaderLatestMovies',
viewType: SectionsViewType.LatestMedia,
type: 'Movie',
view: SectionsView.LatestMovies,
parametersOptions: {
includeItemTypes: [BaseItemKind.Movie]
},
cardOptions: {
scalable: true,
overlayPlayButton: true,
showTitle: true,
centerText: true,
cardLayout: false,
shape: 'overflowPortrait',
showYear: true
}
},
{
name: 'HeaderContinueWatching',
viewType: SectionsViewType.ResumeItems,
type: 'Episode',
view: SectionsView.ContinueWatchingEpisode,
parametersOptions: {
includeItemTypes: [BaseItemKind.Episode]
},
cardOptions: {
scalable: true,
overlayPlayButton: true,
showTitle: true,
centerText: true,
cardLayout: false,
shape: 'overflowBackdrop',
preferThumb: true,
inheritThumb:
!userSettings.useEpisodeImagesInNextUpAndResume(undefined),
showYear: true
}
},
{
name: 'HeaderLatestEpisodes',
viewType: SectionsViewType.LatestMedia,
type: 'Episode',
view: SectionsView.LatestEpisode,
parametersOptions: {
includeItemTypes: [BaseItemKind.Episode]
},
cardOptions: {
scalable: true,
overlayPlayButton: true,
showTitle: true,
centerText: true,
cardLayout: false,
shape: 'overflowBackdrop',
preferThumb: true,
showSeriesYear: true,
showParentTitle: true,
overlayText: false,
showUnplayedIndicator: false,
showChildCountIndicator: true,
lazy: true,
lines: 2
}
},
{
name: 'NextUp',
viewType: SectionsViewType.NextUp,
type: 'nextup',
view: SectionsView.NextUp,
cardOptions: {
scalable: true,
overlayPlayButton: true,
showTitle: true,
centerText: true,
cardLayout: false,
shape: 'overflowBackdrop',
preferThumb: true,
inheritThumb:
!userSettings.useEpisodeImagesInNextUpAndResume(undefined),
showParentTitle: true,
overlayText: false
}
},
{
name: 'HeaderLatestMusic',
viewType: SectionsViewType.LatestMedia,
type: 'Audio',
view: SectionsView.LatestMusic,
parametersOptions: {
includeItemTypes: [BaseItemKind.Audio]
},
cardOptions: {
showUnplayedIndicator: false,
shape: 'overflowSquare',
showTitle: true,
showParentTitle: true,
lazy: true,
centerText: true,
overlayPlayButton: true,
cardLayout: false,
coverImage: true
}
},
{
name: 'HeaderRecentlyPlayed',
type: 'Audio',
view: SectionsView.RecentlyPlayedMusic,
parametersOptions: {
sortBy: [ItemSortBy.DatePlayed],
sortOrder: [SortOrder.Descending],
includeItemTypes: [BaseItemKind.Audio]
},
cardOptions: {
showUnplayedIndicator: false,
shape: 'overflowSquare',
showTitle: true,
showParentTitle: true,
action: 'instantmix',
lazy: true,
centerText: true,
overlayMoreButton: true,
cardLayout: false,
coverImage: true
}
},
{
name: 'HeaderFrequentlyPlayed',
type: 'Audio',
view: SectionsView.FrequentlyPlayedMusic,
parametersOptions: {
sortBy: [ItemSortBy.PlayCount],
sortOrder: [SortOrder.Descending],
includeItemTypes: [BaseItemKind.Audio]
},
cardOptions: {
showUnplayedIndicator: false,
shape: 'overflowSquare',
showTitle: true,
showParentTitle: true,
action: 'instantmix',
lazy: true,
centerText: true,
overlayMoreButton: true,
cardLayout: false,
coverImage: true
}
}
];
};
interface SuggestionsItemsContainerProps {
parentId?: string | null;
sectionsView: SectionsView[];
}
const SuggestionsItemsContainer: FC<SuggestionsItemsContainerProps> = ({
parentId,
sectionsView
}) => {
const suggestionsSections = getSuggestionsSections();
return (
<>
{suggestionsSections
.filter((section) => sectionsView.includes(section.view))
.map((section) => (
<SuggestionsSectionContainer
key={section.view}
parentId={parentId}
section={section}
/>
))}
</>
);
};
export default SuggestionsItemsContainer;

49
src/apps/experimental/components/library/SuggestionsSectionContainer.tsx Normal file
View file

@ -0,0 +1,49 @@
import React, { FC } from 'react';
import { useGetItemsBySectionType } from 'hooks/useFetchItems';
import globalize from 'scripts/globalize';
import Loading from 'components/loading/LoadingComponent';
import { appRouter } from 'components/router/appRouter';
import SectionContainer from './SectionContainer';
import { Sections } from 'types/suggestionsSections';
interface SuggestionsSectionContainerProps {
parentId?: string | null;
section: Sections;
}
const SuggestionsSectionContainer: FC<SuggestionsSectionContainerProps> = ({
parentId,
section
}) => {
const getRouteUrl = () => {
return appRouter.getRouteUrl('list', {
serverId: window.ApiClient.serverId(),
itemTypes: section.type,
parentId: parentId
});
};
const { isLoading, data: items } = useGetItemsBySectionType(
section,
parentId
);
if (isLoading) {
return <Loading />;
}
return (
<SectionContainer
sectionTitle={globalize.translate(section.name)}
items={items || []}
url={getRouteUrl()}
cardOptions={{
...section.cardOptions
}}
/>
);
};
export default SuggestionsSectionContainer;

457
src/apps/experimental/components/library/filter/FilterButton.tsx Normal file
View file

@ -0,0 +1,457 @@
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
import React, { FC, useCallback } from 'react';
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
import Box from '@mui/material/Box';
import FilterListIcon from '@mui/icons-material/FilterList';
import Popover from '@mui/material/Popover';
import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
import MuiAccordionDetails from '@mui/material/AccordionDetails';
import MuiAccordionSummary, {
AccordionSummaryProps
} from '@mui/material/AccordionSummary';
import IconButton from '@mui/material/IconButton';
import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import { useGetQueryFiltersLegacy, useGetStudios } from 'hooks/useFetchItems';
import globalize from 'scripts/globalize';
import FiltersFeatures from './FiltersFeatures';
import FiltersGenres from './FiltersGenres';
import FiltersOfficialRatings from './FiltersOfficialRatings';
import FiltersEpisodesStatus from './FiltersEpisodesStatus';
import FiltersSeriesStatus from './FiltersSeriesStatus';
import FiltersStatus from './FiltersStatus';
import FiltersStudios from './FiltersStudios';
import FiltersTags from './FiltersTags';
import FiltersVideoTypes from './FiltersVideoTypes';
import FiltersYears from './FiltersYears';
import { LibraryViewSettings } from 'types/library';
import { LibraryTab } from 'types/libraryTab';
const Accordion = styled((props: AccordionProps) => (
<MuiAccordion
disableGutters
elevation={0}
TransitionProps={{ unmountOnExit: true }}
square
{...props}
/>
))(({ theme }) => ({
border: `1px solid ${theme.palette.divider}`,
'&:not(:last-child)': {
borderBottom: 0
},
'&:before': {
display: 'none'
}
}));
const AccordionSummary = styled((props: AccordionSummaryProps) => (
<MuiAccordionSummary
expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
{...props}
/>
))(({ theme }) => ({
backgroundColor:
theme.palette.mode === 'dark' ?
'rgba(255, 255, 255, .05)' :
'rgba(0, 0, 0, .03)',
'& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
transform: 'rotate(90deg)'
},
'& .MuiAccordionSummary-content': {
marginLeft: theme.spacing(1)
}
}));
const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
padding: theme.spacing(2),
borderTop: '1px solid rgba(0, 0, 0, .125)'
}));
interface FilterButtonProps {
parentId: string | null | undefined;
itemType: BaseItemKind;
viewType: LibraryTab;
libraryViewSettings: LibraryViewSettings;
setLibraryViewSettings: React.Dispatch<
React.SetStateAction<LibraryViewSettings>
>;
}
const FilterButton: FC<FilterButtonProps> = ({
parentId,
itemType,
viewType,
libraryViewSettings,
setLibraryViewSettings
}) => {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const [expanded, setExpanded] = React.useState<string | false>(false);
const open = Boolean(anchorEl);
const id = open ? 'filter-popover' : undefined;
const { data } = useGetQueryFiltersLegacy(parentId, itemType);
const { data: studios } = useGetStudios(parentId, itemType);
const handleChange =
(panel: string) =>
(event: React.SyntheticEvent, newExpanded: boolean) => {
setExpanded(newExpanded ? panel : false);
};
const handleClick = useCallback((event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
}, []);
const handleClose = useCallback(() => {
setAnchorEl(null);
}, []);
const isFiltersLegacyEnabled = () => {
return (
viewType === LibraryTab.Movies
|| viewType === LibraryTab.Series
|| viewType === LibraryTab.Albums
|| viewType === LibraryTab.AlbumArtists
|| viewType === LibraryTab.Artists
|| viewType === LibraryTab.Songs
|| viewType === LibraryTab.Episodes
);
};
const isFiltersStudiosEnabled = () => {
return (
viewType === LibraryTab.Movies
|| viewType === LibraryTab.Series
);
};
const isFiltersFeaturesEnabled = () => {
return (
viewType === LibraryTab.Movies
|| viewType === LibraryTab.Series
|| viewType === LibraryTab.Episodes
);
};
const isFiltersVideoTypesEnabled = () => {
return (
viewType === LibraryTab.Movies
|| viewType === LibraryTab.Episodes
);
};
const isFiltersSeriesStatusEnabled = () => {
return viewType === LibraryTab.Series;
};
const isFiltersEpisodesStatusEnabled = () => {
return viewType === LibraryTab.Episodes;
};
return (
<Box>
<IconButton
title={globalize.translate('Filter')}
sx={{ ml: 2 }}
aria-describedby={id}
className='paper-icon-button-light btnShuffle autoSize'
onClick={handleClick}
>
<FilterListIcon />
</IconButton>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center'
}}
PaperProps={{
style: {
maxHeight: '50%',
width: 250
}
}}
>
<Accordion
expanded={expanded === 'filtersStatus'}
onChange={handleChange('filtersStatus')}
>
<AccordionSummary
aria-controls='filtersStatus-content'
id='filtersStatus-header'
>
<Typography>
{globalize.translate('Filters')}
</Typography>
</AccordionSummary>
<AccordionDetails>
<FiltersStatus
viewType={viewType}
libraryViewSettings={libraryViewSettings}
setLibraryViewSettings={setLibraryViewSettings}
/>
</AccordionDetails>
</Accordion>
{isFiltersSeriesStatusEnabled() && (
<>
<Accordion
expanded={expanded === 'filtersSeriesStatus'}
onChange={handleChange('filtersSeriesStatus')}
>
<AccordionSummary
aria-controls='filtersSeriesStatus-content'
id='filtersSeriesStatus-header'
>
<Typography>
{globalize.translate('HeaderSeriesStatus')}
</Typography>
</AccordionSummary>
<AccordionDetails>
<FiltersSeriesStatus
libraryViewSettings={libraryViewSettings}
setLibraryViewSettings={
setLibraryViewSettings
}
/>
</AccordionDetails>
</Accordion>
</>
)}
{isFiltersEpisodesStatusEnabled() && (
<>
<Accordion
expanded={expanded === 'filtersEpisodesStatus'}
onChange={handleChange('filtersEpisodesStatus')}
>
<AccordionSummary
aria-controls='filtersEpisodesStatus-content'
id='filtersEpisodesStatus-header'
>
<Typography>
{globalize.translate('HeaderEpisodesStatus')}
</Typography>
</AccordionSummary>
<AccordionDetails>
<FiltersEpisodesStatus
libraryViewSettings={libraryViewSettings}
setLibraryViewSettings={
setLibraryViewSettings
}
/>
</AccordionDetails>
</Accordion>
</>
)}
{isFiltersFeaturesEnabled() && (
<>
<Accordion
expanded={expanded === 'filtersFeatures'}
onChange={handleChange('filtersFeatures')}
>
<AccordionSummary
aria-controls='filtersFeatures-content'
id='filtersFeatures-header'
>
<Typography>
{globalize.translate('Features')}
</Typography>
</AccordionSummary>
<AccordionDetails>
<FiltersFeatures
libraryViewSettings={libraryViewSettings}
setLibraryViewSettings={
setLibraryViewSettings
}
/>
</AccordionDetails>
</Accordion>
</>
)}
{isFiltersVideoTypesEnabled() && (
<>
<Accordion
expanded={expanded === 'filtersVideoTypes'}
onChange={handleChange('filtersVideoTypes')}
>
<AccordionSummary
aria-controls='filtersVideoTypes-content'
id='filtersVideoTypes-header'
>
<Typography>
{globalize.translate('HeaderVideoType')}
</Typography>
</AccordionSummary>
<AccordionDetails>
<FiltersVideoTypes
libraryViewSettings={libraryViewSettings}
setLibraryViewSettings={
setLibraryViewSettings
}
/>
</AccordionDetails>
</Accordion>
</>
)}
{isFiltersLegacyEnabled() && (
<>
{data?.Genres && data?.Genres?.length > 0 && (
<Accordion
expanded={expanded === 'filtersGenres'}
onChange={handleChange('filtersGenres')}
>
<AccordionSummary
aria-controls='filtersGenres-content'
id='filtersGenres-header'
>
<Typography>
{globalize.translate('Genres')}
</Typography>
</AccordionSummary>
<AccordionDetails>
<FiltersGenres
filters={data}
libraryViewSettings={
libraryViewSettings
}
setLibraryViewSettings={
setLibraryViewSettings
}
/>
</AccordionDetails>
</Accordion>
)}
{data?.OfficialRatings
&& data?.OfficialRatings?.length > 0 && (
<Accordion
expanded={
expanded === 'filtersOfficialRatings'
}
onChange={handleChange(
'filtersOfficialRatings'
)}
>
<AccordionSummary
aria-controls='filtersOfficialRatings-content'
id='filtersOfficialRatings-header'
>
<Typography>
{globalize.translate(
'HeaderParentalRatings'
)}
</Typography>
</AccordionSummary>
<AccordionDetails>
<FiltersOfficialRatings
filters={data}
libraryViewSettings={
libraryViewSettings
}
setLibraryViewSettings={
setLibraryViewSettings
}
/>
</AccordionDetails>
</Accordion>
)}
{data?.Tags && data?.Tags.length > 0 && (
<Accordion
expanded={expanded === 'filtersTags'}
onChange={handleChange('filtersTags')}
>
<AccordionSummary
aria-controls='filtersTags-content'
id='filtersTags-header'
>
<Typography>
{globalize.translate('Tags')}
</Typography>
</AccordionSummary>
<AccordionDetails>
<FiltersTags
filters={data}
libraryViewSettings={
libraryViewSettings
}
setLibraryViewSettings={
setLibraryViewSettings
}
/>
</AccordionDetails>
</Accordion>
)}
{data?.Years && data?.Years?.length > 0 && (
<Accordion
expanded={expanded === 'filtersYears'}
onChange={handleChange('filtersYears')}
>
<AccordionSummary
aria-controls='filtersYears-content'
id='filtersYears-header'
>
<Typography>
{globalize.translate('HeaderYears')}
</Typography>
</AccordionSummary>
<AccordionDetails>
<FiltersYears
filters={data}
libraryViewSettings={
libraryViewSettings
}
setLibraryViewSettings={
setLibraryViewSettings
}
/>
</AccordionDetails>
</Accordion>
)}
</>
)}
{isFiltersStudiosEnabled() && (
<>
<Accordion
expanded={expanded === 'filtersStudios'}
onChange={handleChange('filtersStudios')}
>
<AccordionSummary
aria-controls='filtersStudios-content'
id='filtersStudios-header'
>
<Typography>
{globalize.translate('Studios')}
</Typography>
</AccordionSummary>
<AccordionDetails>
<FiltersStudios
filters={studios}
libraryViewSettings={libraryViewSettings}
setLibraryViewSettings={
setLibraryViewSettings
}
/>
</AccordionDetails>
</Accordion>
</>
)}
</Popover>
</Box>
);
};
export default FilterButton;

75
src/apps/experimental/components/library/filter/FiltersEpisodesStatus.tsx Normal file
View file

@ -0,0 +1,75 @@
import React, { FC, useCallback } from 'react';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import globalize from 'scripts/globalize';
import { LibraryViewSettings } from 'types/library';
const episodesStatusOptions = [
{ label: 'OptionSpecialEpisode', value: 'ParentIndexNumber' },
{ label: 'OptionMissingEpisode', value: 'IsMissing' },
{ label: 'OptionUnairedEpisode', value: 'IsUnaired' }
];
interface FiltersEpisodesStatusProps {
libraryViewSettings: LibraryViewSettings;
setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
}
const FiltersEpisodesStatus: FC<FiltersEpisodesStatusProps> = ({
libraryViewSettings,
setLibraryViewSettings
}) => {
const onFiltersEpisodesStatusChange = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
event.preventDefault();
const value = String(event.target.value);
const existingValue = libraryViewSettings?.Filters?.EpisodesStatus;
if (existingValue?.includes(value)) {
const newValue = existingValue?.filter(
(prevState: string) => prevState !== value
);
setLibraryViewSettings((prevState) => ({
...prevState,
StartIndex: 0,
Filters: { ...prevState.Filters, EpisodesStatus: newValue }
}));
} else {
setLibraryViewSettings((prevState) => ({
...prevState,
StartIndex: 0,
Filters: {
...prevState.Filters,
EpisodesStatus: [...(existingValue ?? []), value]
}
}));
}
},
[setLibraryViewSettings, libraryViewSettings?.Filters?.EpisodesStatus]
);
return (
<FormGroup>
{episodesStatusOptions.map((filter) => (
<FormControlLabel
key={filter.value}
control={
<Checkbox
checked={
!!libraryViewSettings?.Filters?.EpisodesStatus?.includes(
String( filter.value)
)
}
onChange={onFiltersEpisodesStatusChange}
value={String(filter.value)}
/>
}
label={globalize.translate(filter.label)}
/>
))}
</FormGroup>
);
};
export default FiltersEpisodesStatus;

81
src/apps/experimental/components/library/filter/FiltersFeatures.tsx Normal file
View file

@ -0,0 +1,81 @@
import React, { FC, useCallback } from 'react';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import globalize from 'scripts/globalize';
import { LibraryViewSettings } from 'types/library';
const featuresOptions = [
{ label: 'Subtitles', value: 'HasSubtitles' },
{ label: 'Trailers', value: 'HasTrailer' },
{ label: 'Extras', value: 'HasSpecialFeature' },
{ label: 'ThemeSongs', value: 'HasThemeSong' },
{ label: 'ThemeVideos', value: 'HasThemeVideo' }
];
interface FiltersFeaturesProps {
libraryViewSettings: LibraryViewSettings;
setLibraryViewSettings: React.Dispatch<
React.SetStateAction<LibraryViewSettings>
>;
}
const FiltersFeatures: FC<FiltersFeaturesProps> = ({
libraryViewSettings,
setLibraryViewSettings
}) => {
const onFiltersFeaturesChange = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
event.preventDefault();
const value = String(event.target.value);
const existingValue =
libraryViewSettings?.Filters?.Features;
if (existingValue?.includes(value)) {
const newValue = existingValue?.filter(
(prevState: string) => prevState !== value
);
setLibraryViewSettings((prevState) => ({
...prevState,
StartIndex: 0,
Filters: { ...prevState.Filters, Features: newValue }
}));
} else {
setLibraryViewSettings((prevState) => ({
...prevState,
StartIndex: 0,
Filters: {
...prevState.Filters,
Features: [...(existingValue ?? []), value]
}
}));
}
},
[setLibraryViewSettings, libraryViewSettings?.Filters?.Features]
);
return (
<FormGroup>
{featuresOptions
.map((filter) => (
<FormControlLabel
key={filter.value}
control={
<Checkbox
checked={
!!libraryViewSettings?.Filters?.Features?.includes(
String(filter.value)
)
}
onChange={onFiltersFeaturesChange}
value={String(filter.value)}
/>
}
label={globalize.translate(filter.label)}
/>
))}
</FormGroup>
);
};
export default FiltersFeatures;

71
src/apps/experimental/components/library/filter/FiltersGenres.tsx Normal file
View file

@ -0,0 +1,71 @@
import type { QueryFiltersLegacy } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useCallback } from 'react';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { LibraryViewSettings } from 'types/library';
interface FiltersGenresProps {
filters?: QueryFiltersLegacy;
libraryViewSettings: LibraryViewSettings;
setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
}
const FiltersGenres: FC<FiltersGenresProps> = ({
filters,
libraryViewSettings,
setLibraryViewSettings
}) => {
const onFiltersGenresChange = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
event.preventDefault();
const value = String(event.target.value);
const existingValue = libraryViewSettings?.Filters?.Genres;
if (existingValue?.includes(value)) {
const newValue = existingValue?.filter(
(prevState: string) => prevState !== value
);
setLibraryViewSettings((prevState) => ({
...prevState,
StartIndex: 0,
Filters: { ...prevState.Filters, Genres: newValue }
}));
} else {
setLibraryViewSettings((prevState) => ({
...prevState,
StartIndex: 0,
Filters: {
...prevState.Filters,
Genres: [...(existingValue ?? []), value]
}
}));
}
},
[setLibraryViewSettings, libraryViewSettings?.Filters?.Genres]
);
return (
<FormGroup>
{filters?.Genres?.map((filter) => (
<FormControlLabel
key={filter}
control={
<Checkbox
checked={
!!libraryViewSettings?.Filters?.Genres?.includes(
String(filter)
)
}
onChange={onFiltersGenresChange}
value={String(filter)}
/>
}
label={filter}
/>
))}
</FormGroup>
);
};
export default FiltersGenres;

71
src/apps/experimental/components/library/filter/FiltersOfficialRatings.tsx Normal file
View file

@ -0,0 +1,71 @@
import type { QueryFiltersLegacy } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useCallback } from 'react';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { LibraryViewSettings } from 'types/library';
interface FiltersOfficialRatingsProps {
filters?: QueryFiltersLegacy;
libraryViewSettings: LibraryViewSettings;
setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
}
const FiltersOfficialRatings: FC<FiltersOfficialRatingsProps> = ({
filters,
libraryViewSettings,
setLibraryViewSettings
}) => {
const onFiltersOfficialRatingsChange = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
event.preventDefault();
const value = String(event.target.value);
const existingValue = libraryViewSettings?.Filters?.OfficialRatings;
if (existingValue?.includes(value)) {
const newValue = existingValue?.filter(
(prevState: string) => prevState !== value
);
setLibraryViewSettings((prevState) => ({
...prevState,
StartIndex: 0,
Filters: { ...prevState.Filters, OfficialRatings: newValue }
}));
} else {
setLibraryViewSettings((prevState) => ({
...prevState,
StartIndex: 0,
Filters: {
...prevState.Filters,
OfficialRatings: [...(existingValue ?? []), value]
}
}));
}
},
[setLibraryViewSettings, libraryViewSettings?.Filters?.OfficialRatings]
);
return (
<FormGroup>
{filters?.OfficialRatings?.map((filter) => (
<FormControlLabel
key={filter}
control={
<Checkbox
checked={
!!libraryViewSettings?.Filters?.OfficialRatings?.includes(
String(filter)
)
}
onChange={onFiltersOfficialRatingsChange}
value={String(filter)}
/>
}
label={filter}
/>
))}
</FormGroup>
);
};
export default FiltersOfficialRatings;

74
src/apps/experimental/components/library/filter/FiltersSeriesStatus.tsx Normal file
View file

@ -0,0 +1,74 @@
import React, { FC, useCallback } from 'react';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import globalize from 'scripts/globalize';
import { LibraryViewSettings } from 'types/library';
import { SeriesStatus } from '@jellyfin/sdk/lib/generated-client';
const statusFiltersOptions = [
{ label: 'Continuing', value: SeriesStatus.Continuing },
{ label: 'Ended', value: SeriesStatus.Ended },
{ label: 'Unreleased', value: SeriesStatus.Unreleased }
];
interface FiltersSeriesStatusProps {
libraryViewSettings: LibraryViewSettings;
setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
}
const FiltersSeriesStatus: FC<FiltersSeriesStatusProps> = ({
libraryViewSettings,
setLibraryViewSettings
}) => {
const onFiltersSeriesStatusChange = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
event.preventDefault();
const value = event.target.value as SeriesStatus;
const existingValue = libraryViewSettings?.Filters?.SeriesStatus;
if (existingValue?.includes(value)) {
const newValue = existingValue?.filter(
(prevState: SeriesStatus) => prevState !== value
);
setLibraryViewSettings((prevState) => ({
...prevState,
StartIndex: 0,
Filters: { ...prevState.Filters, SeriesStatus: newValue }
}));
} else {
setLibraryViewSettings((prevState) => ({
...prevState,
StartIndex: 0,
Filters: {
...prevState.Filters,
SeriesStatus: [...(existingValue ?? []), value]
}
}));
}
},
[setLibraryViewSettings, libraryViewSettings?.Filters?.SeriesStatus]
);
return (
<FormGroup>
{statusFiltersOptions.map((filter) => (
<FormControlLabel
key={filter.value}
control={
<Checkbox
checked={
!!libraryViewSettings?.Filters?.SeriesStatus?.includes( filter.value)
}
onChange={onFiltersSeriesStatusChange}
value={filter.value}
/>
}
label={globalize.translate(filter.label)}
/>
))}
</FormGroup>
);
};
export default FiltersSeriesStatus;

97
src/apps/experimental/components/library/filter/FiltersStatus.tsx Normal file
View file

@ -0,0 +1,97 @@
import React, { FC, useCallback } from 'react';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import globalize from 'scripts/globalize';
import { LibraryViewSettings } from 'types/library';
import { ItemFilter } from '@jellyfin/sdk/lib/generated-client';
import { LibraryTab } from 'types/libraryTab';
const statusFiltersOptions = [
{ label: 'Played', value: ItemFilter.IsPlayed },
{ label: 'Unplayed', value: ItemFilter.IsUnplayed },
{ label: 'Favorite', value: ItemFilter.IsFavorite },
{ label: 'ContinueWatching', value: ItemFilter.IsResumable }
];
interface FiltersStatusProps {
viewType: LibraryTab;
libraryViewSettings: LibraryViewSettings;
setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
}
const FiltersStatus: FC<FiltersStatusProps> = ({
viewType,
libraryViewSettings,
setLibraryViewSettings
}) => {
const onFiltersStatusChange = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
event.preventDefault();
const value = event.target.value as ItemFilter;
const existingValue = libraryViewSettings?.Filters?.Status;
if (existingValue?.includes(value)) {
const newValue = existingValue?.filter(
(prevState: ItemFilter) => prevState !== value
);
setLibraryViewSettings((prevState) => ({
...prevState,
StartIndex: 0,
Filters: { ...prevState.Filters, Status: newValue }
}));
} else {
setLibraryViewSettings((prevState) => ({
...prevState,
StartIndex: 0,
Filters: {
...prevState.Filters,
Status: [...(existingValue ?? []), value]
}
}));
}
},
[setLibraryViewSettings, libraryViewSettings?.Filters?.Status]
);
const getVisibleFiltersStatus = () => {
const visibleFiltersStatus: ItemFilter[] = [ItemFilter.IsFavorite];
if (
viewType !== LibraryTab.Albums
&& viewType !== LibraryTab.Artists
&& viewType !== LibraryTab.AlbumArtists
&& viewType !== LibraryTab.Songs
) {
visibleFiltersStatus.push(ItemFilter.IsUnplayed);
visibleFiltersStatus.push(ItemFilter.IsPlayed);
visibleFiltersStatus.push(ItemFilter.IsResumable);
}
return visibleFiltersStatus;
};
return (
<FormGroup>
{statusFiltersOptions
.filter((filter) => getVisibleFiltersStatus().includes(filter.value))
.map((filter) => (
<FormControlLabel
key={filter.value}
control={
<Checkbox
checked={
!!libraryViewSettings?.Filters?.Status?.includes(filter.value)
}
onChange={onFiltersStatusChange}
value={filter.value}
/>
}
label={globalize.translate(filter.label)}
/>
))}
</FormGroup>
);
};
export default FiltersStatus;

71
src/apps/experimental/components/library/filter/FiltersStudios.tsx Normal file
View file

@ -0,0 +1,71 @@
import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useCallback } from 'react';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { LibraryViewSettings } from 'types/library';
interface FiltersStudiosProps {
filters?: BaseItemDtoQueryResult;
libraryViewSettings: LibraryViewSettings;
setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
}
const FiltersStudios: FC<FiltersStudiosProps> = ({
filters,
libraryViewSettings,
setLibraryViewSettings
}) => {
const onFiltersStudiosChange = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
event.preventDefault();
const value = String(event.target.value);
const existingValue = libraryViewSettings?.Filters?.StudioIds;
if (existingValue?.includes(value)) {
const newValue = existingValue?.filter(
(prevState: string) => prevState !== value
);
setLibraryViewSettings((prevState) => ({
...prevState,
StartIndex: 0,
Filters: { ...prevState.Filters, StudioIds: newValue }
}));
} else {
setLibraryViewSettings((prevState) => ({
...prevState,
StartIndex: 0,
Filters: {
...prevState.Filters,
StudioIds: [...(existingValue ?? []), value]
}
}));
}
},
[setLibraryViewSettings, libraryViewSettings?.Filters?.StudioIds]
);
return (
<FormGroup>
{filters?.Items?.map((filter) => (
<FormControlLabel
key={filter.Id}
control={
<Checkbox
checked={
!!libraryViewSettings?.Filters?.StudioIds?.includes(
String(filter.Id)
)
}
onChange={onFiltersStudiosChange}
value={String(filter.Id)}
/>
}
label={filter.Name}
/>
))}
</FormGroup>
);
};
export default FiltersStudios;

71
src/apps/experimental/components/library/filter/FiltersTags.tsx Normal file
View file

@ -0,0 +1,71 @@
import type { QueryFiltersLegacy } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useCallback } from 'react';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { LibraryViewSettings } from 'types/library';
interface FiltersTagsProps {
filters?: QueryFiltersLegacy;
libraryViewSettings: LibraryViewSettings;
setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
}
const FiltersTags: FC<FiltersTagsProps> = ({
filters,
libraryViewSettings,
setLibraryViewSettings
}) => {
const onFiltersTagsChange = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
event.preventDefault();
const value = String(event.target.value);
const existingValue = libraryViewSettings?.Filters?.Tags;
if (existingValue?.includes(value)) {
const newValue = existingValue?.filter(
(prevState: string) => prevState !== value
);
setLibraryViewSettings((prevState) => ({
...prevState,
StartIndex: 0,
Filters: { ...prevState.Filters, Tags: newValue }
}));
} else {
setLibraryViewSettings((prevState) => ({
...prevState,
StartIndex: 0,
Filters: {
...prevState.Filters,
Tags: [...(existingValue ?? []), value]
}
}));
}
},
[setLibraryViewSettings, libraryViewSettings?.Filters?.Tags]
);
return (
<FormGroup>
{filters?.Tags?.map((filter) => (
<FormControlLabel
key={filter}
control={
<Checkbox
checked={
!!libraryViewSettings?.Filters?.Tags?.includes(
String(filter)
)
}
onChange={onFiltersTagsChange}
value={String(filter)}
/>
}
label={filter}
/>
))}
</FormGroup>
);
};
export default FiltersTags;

131
src/apps/experimental/components/library/filter/FiltersVideoTypes.tsx Normal file
View file

@ -0,0 +1,131 @@
import React, { FC, useCallback } from 'react';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { LibraryViewSettings } from 'types/library';
import { VideoType } from '@jellyfin/sdk/lib/generated-client';
import globalize from 'scripts/globalize';
const videoTypesOptions = [
{ label: 'DVD', value: VideoType.Dvd },
{ label: 'Blu-ray', value: VideoType.BluRay },
{ label: 'ISO', value: VideoType.Iso }
];
interface FiltersVideoTypesProps {
libraryViewSettings: LibraryViewSettings;
setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
}
const FiltersVideoTypes: FC<FiltersVideoTypesProps> = ({
libraryViewSettings,
setLibraryViewSettings
}) => {
const onFiltersVideoTypesChange = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
event.preventDefault();
const value = event.target.value as VideoType;
const existingValue = libraryViewSettings?.Filters?.VideoTypes;
if (existingValue?.includes(value)) {
const newValue = existingValue?.filter(
(prevState: VideoType) => prevState !== value
);
setLibraryViewSettings((prevState) => ({
...prevState,
StartIndex: 0,
Filters: { ...prevState.Filters, VideoTypes: newValue }
}));
} else {
setLibraryViewSettings((prevState) => ({
...prevState,
StartIndex: 0,
Filters: {
...prevState.Filters,
VideoTypes: [...(existingValue ?? []), value]
}
}));
}
},
[setLibraryViewSettings, libraryViewSettings?.Filters?.VideoTypes]
);
const handleChange = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
const name = event.target.name;
setLibraryViewSettings((prevState) => ({
...prevState,
[name]: event.target.checked
}));
},
[setLibraryViewSettings]
);
return (
<FormGroup>
<FormControlLabel
control={
<Checkbox
checked={libraryViewSettings.IsSD}
onChange={handleChange}
name='IsSD'
/>
}
label={globalize.translate('SD')}
/>
<FormControlLabel
control={
<Checkbox
checked={libraryViewSettings.IsHD}
onChange={handleChange}
name='IsHD'
/>
}
label={globalize.translate('HD')}
/>
<FormControlLabel
control={
<Checkbox
checked={
libraryViewSettings.Is4K
}
onChange={handleChange}
name='Is4K'
/>
}
label={globalize.translate('4K')}
/>
<FormControlLabel
control={
<Checkbox
checked={
libraryViewSettings.Is3D
}
onChange={handleChange}
name='Is3D'
/>
}
label={globalize.translate('3D')}
/>
{videoTypesOptions
.map((filter) => (
<FormControlLabel
key={filter.value}
control={
<Checkbox
checked={
!!libraryViewSettings?.Filters?.VideoTypes?.includes(filter.value)
}
onChange={onFiltersVideoTypesChange}
value={filter.value}
/>
}
label={filter.label}
/>
))}
</FormGroup>
);
};
export default FiltersVideoTypes;

71
src/apps/experimental/components/library/filter/FiltersYears.tsx Normal file
View file

@ -0,0 +1,71 @@
import type { QueryFiltersLegacy } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useCallback } from 'react';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { LibraryViewSettings } from 'types/library';
interface FiltersYearsProps {
filters?: QueryFiltersLegacy;
libraryViewSettings: LibraryViewSettings;
setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
}
const FiltersYears: FC<FiltersYearsProps> = ({
filters,
libraryViewSettings,
setLibraryViewSettings
}) => {
const onFiltersYearsChange = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
event.preventDefault();
const value = Number(event.target.value);
const existingValue = libraryViewSettings?.Filters?.Years;
if (existingValue?.includes(value)) {
const newValue = existingValue?.filter(
(prevState: number) => prevState !== value
);
setLibraryViewSettings((prevState) => ({
...prevState,
StartIndex: 0,
Filters: { ...prevState.Filters, Years: newValue }
}));
} else {
setLibraryViewSettings((prevState) => ({
...prevState,
StartIndex: 0,
Filters: {
...prevState.Filters,
Years: [...(existingValue ?? []), value]
}
}));
}
},
[setLibraryViewSettings, libraryViewSettings?.Filters?.Years]
);
return (
<FormGroup>
{filters?.Years?.map((filter) => (
<FormControlLabel
key={filter}
control={
<Checkbox
checked={
!!libraryViewSettings?.Filters?.Years?.includes(
Number(filter)
)
}
onChange={onFiltersYearsChange}
value={String(filter)}
/>
}
label={filter}
/>
))}
</FormGroup>
);
};
export default FiltersYears;

3
src/apps/experimental/routes/asyncRoutes/admin.ts
View file

@ -1,6 +1,7 @@
import { AsyncRoute } from '../../../../components/router/AsyncRoute';
import { AsyncRoute, AsyncRouteType } from 'components/router/AsyncRoute';
export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
{ path: 'dashboard/activity', page: 'dashboard/activity', type: AsyncRouteType.Experimental },
{ path: 'notificationsettings.html', page: 'dashboard/notifications' },
{ path: 'usernew.html', page: 'user/usernew' },
{ path: 'userprofiles.html', page: 'user/userprofiles' },

273
src/apps/experimental/routes/dashboard/activity.tsx Normal file
View file

@ -0,0 +1,273 @@
import React, { useCallback, useEffect, useState } from 'react';
import { getActivityLogApi } from '@jellyfin/sdk/lib/utils/api/activity-log-api';
import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
import type { ActivityLogEntry } from '@jellyfin/sdk/lib/generated-client/models/activity-log-entry';
import type { UserDto } from '@jellyfin/sdk/lib/generated-client/models/user-dto';
import PermMedia from '@mui/icons-material/PermMedia';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import Typography from '@mui/material/Typography';
import { DataGrid, type GridColDef } from '@mui/x-data-grid';
import { Link, useSearchParams } from 'react-router-dom';
import Page from 'components/Page';
import UserAvatar from 'components/UserAvatar';
import { useApi } from 'hooks/useApi';
import { parseISO8601Date, toLocaleDateString, toLocaleTimeString } from 'scripts/datetime';
import globalize from 'scripts/globalize';
import { toBoolean } from 'utils/string';
import LogLevelChip from '../../components/activityTable/LogLevelChip';
import OverviewCell from '../../components/activityTable/OverviewCell';
import GridActionsCellLink from '../../components/GridActionsCellLink';
const DEFAULT_PAGE_SIZE = 25;
const VIEW_PARAM = 'useractivity';
const enum ActivityView {
All,
User,
System
}
const getActivityView = (param: string | null) => {
if (param === null) return ActivityView.All;
if (toBoolean(param)) return ActivityView.User;
return ActivityView.System;
};
const getRowId = (row: ActivityLogEntry) => row.Id ?? -1;
const Activity = () => {
const { api } = useApi();
const [ searchParams, setSearchParams ] = useSearchParams();
const [ activityView, setActivityView ] = useState(
getActivityView(searchParams.get(VIEW_PARAM)));
const [ isLoading, setIsLoading ] = useState(true);
const [ paginationModel, setPaginationModel ] = useState({
page: 0,
pageSize: DEFAULT_PAGE_SIZE
});
const [ rowCount, setRowCount ] = useState(0);
const [ rows, setRows ] = useState<ActivityLogEntry[]>([]);
const [ users, setUsers ] = useState<Record<string, UserDto>>({});
const userColDef: GridColDef[] = activityView !== ActivityView.System ? [
{
field: 'User',
headerName: globalize.translate('LabelUser'),
width: 60,
valueGetter: ({ row }) => users[row.UserId]?.Name,
renderCell: ({ row }) => (
<IconButton
size='large'
color='inherit'
sx={{ padding: 0 }}
title={users[row.UserId]?.Name ?? undefined}
component={Link}
to={`/useredit.html?userId=${row.UserId}`}
>
<UserAvatar user={users[row.UserId]} />
</IconButton>
)
}
] : [];
const columns: GridColDef[] = [
{
field: 'Date',
headerName: globalize.translate('LabelDate'),
width: 90,
type: 'date',
valueGetter: ({ value }) => parseISO8601Date(value),
valueFormatter: ({ value }) => toLocaleDateString(value)
},
{
field: 'Time',
headerName: globalize.translate('LabelTime'),
width: 100,
type: 'dateTime',
valueGetter: ({ row }) => parseISO8601Date(row.Date),
valueFormatter: ({ value }) => toLocaleTimeString(value)
},
{
field: 'Severity',
headerName: globalize.translate('LabelLevel'),
width: 110,
renderCell: ({ value }) => (
value ? (
<LogLevelChip level={value} />
) : undefined
)
},
...userColDef,
{
field: 'Name',
headerName: globalize.translate('LabelName'),
width: 200
},
{
field: 'Overview',
headerName: globalize.translate('LabelOverview'),
width: 200,
valueGetter: ({ row }) => row.ShortOverview ?? row.Overview,
renderCell: ({ row }) => (
<OverviewCell {...row} />
)
},
{
field: 'Type',
headerName: globalize.translate('LabelType'),
width: 120
},
{
field: 'actions',
type: 'actions',
getActions: ({ row }) => {
const actions = [];
if (row.ItemId) {
actions.push(
<GridActionsCellLink
size='large'
icon={<PermMedia />}
label={globalize.translate('LabelMediaDetails')}
title={globalize.translate('LabelMediaDetails')}
to={`/details?id=${row.ItemId}`}
/>
);
}
return actions;
}
}
];
const onViewChange = useCallback((_e, newView: ActivityView | null) => {
if (newView !== null) {
setActivityView(newView);
}
}, []);
useEffect(() => {
if (api) {
const fetchUsers = async () => {
const { data } = await getUserApi(api).getUsers();
const usersById: Record<string, UserDto> = {};
data.forEach(user => {
if (user.Id) {
usersById[user.Id] = user;
}
});
setUsers(usersById);
};
fetchUsers()
.catch(err => {
console.error('[activity] failed to fetch users', err);
});
}
}, [ api ]);
useEffect(() => {
if (api) {
const fetchActivity = async () => {
const params: {
startIndex: number,
limit: number,
hasUserId?: boolean
} = {
startIndex: paginationModel.page * paginationModel.pageSize,
limit: paginationModel.pageSize
};
if (activityView !== ActivityView.All) {
params.hasUserId = activityView === ActivityView.User;
}
const { data } = await getActivityLogApi(api)
.getLogEntries(params);
setRowCount(data.TotalRecordCount ?? 0);
setRows(data.Items ?? []);
setIsLoading(false);
};
setIsLoading(true);
fetchActivity()
.catch(err => {
console.error('[activity] failed to fetch activity log entries', err);
});
}
}, [ activityView, api, paginationModel ]);
useEffect(() => {
const currentViewParam = getActivityView(searchParams.get(VIEW_PARAM));
if (currentViewParam !== activityView) {
if (activityView === ActivityView.All) {
searchParams.delete(VIEW_PARAM);
} else {
searchParams.set(VIEW_PARAM, `${activityView === ActivityView.User}`);
}
setSearchParams(searchParams);
}
}, [ activityView, searchParams, setSearchParams ]);
return (
<Page
id='serverActivityPage'
title={globalize.translate('HeaderActivity')}
className='mainAnimatedPage type-interior'
>
<div className='content-primary'>
<Box
sx={{
display: 'flex',
alignItems: 'baseline',
marginY: 2
}}
>
<Box sx={{ flexGrow: 1 }}>
<Typography variant='h2'>
{globalize.translate('HeaderActivity')}
</Typography>
</Box>
<ToggleButtonGroup
value={activityView}
onChange={onViewChange}
exclusive
>
<ToggleButton value={ActivityView.All}>
{globalize.translate('All')}
</ToggleButton>
<ToggleButton value={ActivityView.User}>
{globalize.translate('LabelUser')}
</ToggleButton>
<ToggleButton value={ActivityView.System}>
{globalize.translate('LabelSystem')}
</ToggleButton>
</ToggleButtonGroup>
</Box>
<DataGrid
columns={columns}
rows={rows}
pageSizeOptions={[ 10, 25, 50, 100 ]}
paginationMode='server'
paginationModel={paginationModel}
onPaginationModelChange={setPaginationModel}
rowCount={rowCount}
getRowId={getRowId}
loading={isLoading}
sx={{
minHeight: 500
}}
/>
</div>
</Page>
);
};
export default Activity;

4
src/apps/experimental/routes/home.tsx
View file

@ -65,12 +65,12 @@ const Home: FunctionComponent = () => {
depends = 'favorites';
}
return import(/* webpackChunkName: "[request]" */ `../../../controllers/${depends}`).then(({ default: controllerFactory }) => {
return import(/* webpackChunkName: "[request]" */ `../../../controllers/${depends}`).then(({ default: ControllerFactory }) => {
let controller = tabControllers[index];
if (!controller) {
const tabContent = element.current?.querySelector(".tabContent[data-index='" + index + "']");
controller = new controllerFactory(tabContent, null);
controller = new ControllerFactory(tabContent, null);
tabControllers[index] = controller;
}

6
src/apps/experimental/routes/legacyRoutes/admin.ts
View file

@ -163,12 +163,6 @@ export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
controller: 'dashboard/scheduledtasks/scheduledtasks',
view: 'dashboard/scheduledtasks/scheduledtasks.html'
}
}, {
path: 'serveractivity.html',
pageProps: {
controller: 'dashboard/serveractivity',
view: 'dashboard/serveractivity.html'
}
}, {
path: 'apikeys.html',
pageProps: {

8
src/apps/experimental/routes/movies/CollectionsView.tsx
View file

@ -1,9 +1,9 @@
import React, { FC, useCallback } from 'react';
import ViewItemsContainer from '../../../../components/common/ViewItemsContainer';
import { LibraryViewProps } from '../../../../types/interface';
import ViewItemsContainer from 'components/common/ViewItemsContainer';
import { LibraryViewProps } from 'types/library';
const CollectionsView: FC<LibraryViewProps> = ({ topParentId }) => {
const CollectionsView: FC<LibraryViewProps> = ({ parentId }) => {
const getBasekey = useCallback(() => {
return 'collections';
}, []);
@ -18,7 +18,7 @@ const CollectionsView: FC<LibraryViewProps> = ({ topParentId }) => {
return (
<ViewItemsContainer
topParentId={topParentId}
topParentId={parentId}
isBtnFilterEnabled={false}
isBtnNewCollectionEnabled={true}
isAlphaPickerEnabled={false}

8
src/apps/experimental/routes/movies/FavoritesView.tsx
View file

@ -1,9 +1,9 @@
import React, { FC, useCallback } from 'react';
import ViewItemsContainer from '../../../../components/common/ViewItemsContainer';
import { LibraryViewProps } from '../../../../types/interface';
import ViewItemsContainer from 'components/common/ViewItemsContainer';
import { LibraryViewProps } from 'types/library';
const FavoritesView: FC<LibraryViewProps> = ({ topParentId }) => {
const FavoritesView: FC<LibraryViewProps> = ({ parentId }) => {
const getBasekey = useCallback(() => {
return 'favorites';
}, []);
@ -18,7 +18,7 @@ const FavoritesView: FC<LibraryViewProps> = ({ topParentId }) => {
return (
<ViewItemsContainer
topParentId={topParentId}
topParentId={parentId}
getBasekey={getBasekey}
getItemTypes={getItemTypes}
getNoItemsMessage={getNoItemsMessage}

44
src/apps/experimental/routes/movies/GenresView.tsx
View file

@ -1,41 +1,15 @@
import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useCallback, useEffect, useState } from 'react';
import loading from '../../../../components/loading/loading';
import GenresItemsContainer from '../../../../components/common/GenresItemsContainer';
import { LibraryViewProps } from '../../../../types/interface';
const GenresView: FC<LibraryViewProps> = ({ topParentId }) => {
const [ itemsResult, setItemsResult ] = useState<BaseItemDtoQueryResult>({});
const reloadItems = useCallback(() => {
loading.show();
window.ApiClient.getGenres(
window.ApiClient.getCurrentUserId(),
{
SortBy: 'SortName',
SortOrder: 'Ascending',
IncludeItemTypes: 'Movie',
Recursive: true,
EnableTotalRecordCount: false,
ParentId: topParentId
}
).then((result) => {
setItemsResult(result);
loading.hide();
}).catch(err => {
console.error('[GenresView] failed to fetch genres', err);
});
}, [topParentId]);
useEffect(() => {
reloadItems();
}, [reloadItems]);
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
import React, { FC } from 'react';
import GenresItemsContainer from '../../components/library/GenresItemsContainer';
import { LibraryViewProps } from 'types/library';
import { CollectionType } from 'types/collectionType';
const GenresView: FC<LibraryViewProps> = ({ parentId }) => {
return (
<GenresItemsContainer
topParentId={topParentId}
itemsResult={itemsResult}
parentId={parentId}
collectionType={CollectionType.Movies}
itemType={BaseItemKind.Movie}
/>
);
};

8
src/apps/experimental/routes/movies/MoviesView.tsx
View file

@ -1,9 +1,9 @@
import React, { FC, useCallback } from 'react';
import ViewItemsContainer from '../../../../components/common/ViewItemsContainer';
import { LibraryViewProps } from '../../../../types/interface';
import ViewItemsContainer from 'components/common/ViewItemsContainer';
import { LibraryViewProps } from 'types/library';
const MoviesView: FC<LibraryViewProps> = ({ topParentId }) => {
const MoviesView: FC<LibraryViewProps> = ({ parentId }) => {
const getBasekey = useCallback(() => {
return 'movies';
}, []);
@ -18,7 +18,7 @@ const MoviesView: FC<LibraryViewProps> = ({ topParentId }) => {
return (
<ViewItemsContainer
topParentId={topParentId}
topParentId={parentId}
isBtnShuffleEnabled={true}
getBasekey={getBasekey}
getItemTypes={getItemTypes}

185
src/apps/experimental/routes/movies/SuggestionsView.tsx
View file

@ -1,160 +1,51 @@
import type { BaseItemDto, BaseItemDtoQueryResult, RecommendationDto } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
import React, { FC } from 'react';
import { useGetMovieRecommendations } from 'hooks/useFetchItems';
import globalize from 'scripts/globalize';
import Loading from 'components/loading/LoadingComponent';
import RecommendationContainer from '../../components/library/RecommendationContainer';
import SuggestionsItemsContainer from '../../components/library/SuggestionsItemsContainer';
import layoutManager from '../../../../components/layoutManager';
import loading from '../../../../components/loading/loading';
import dom from '../../../../scripts/dom';
import globalize from '../../../../scripts/globalize';
import RecommendationContainer from '../../../../components/common/RecommendationContainer';
import SectionContainer from '../../../../components/common/SectionContainer';
import { LibraryViewProps } from '../../../../types/interface';
import { LibraryViewProps } from 'types/library';
import { SectionsView } from 'types/suggestionsSections';
const SuggestionsView: FC<LibraryViewProps> = ({ topParentId }) => {
const [ latestItems, setLatestItems ] = useState<BaseItemDto[]>([]);
const [ resumeResult, setResumeResult ] = useState<BaseItemDtoQueryResult>({});
const [ recommendations, setRecommendations ] = useState<RecommendationDto[]>([]);
const element = useRef<HTMLDivElement>(null);
const SuggestionsView: FC<LibraryViewProps> = ({ parentId }) => {
const {
isLoading,
data: movieRecommendationsItems
} = useGetMovieRecommendations(parentId);
const enableScrollX = useCallback(() => {
return !layoutManager.desktop;
}, []);
const getPortraitShape = useCallback(() => {
return enableScrollX() ? 'overflowPortrait' : 'portrait';
}, [enableScrollX]);
const getThumbShape = useCallback(() => {
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
}, [enableScrollX]);
const autoFocus = useCallback((page) => {
import('../../../../components/autoFocuser').then(({ default: autoFocuser }) => {
autoFocuser.autoFocus(page);
}).catch(err => {
console.error('[SuggestionsView] failed to load data', err);
});
}, []);
const loadResume = useCallback((page, userId, parentId) => {
loading.show();
const screenWidth = dom.getWindowSize().innerWidth;
const options = {
SortBy: 'DatePlayed',
SortOrder: 'Descending',
IncludeItemTypes: 'Movie',
Filters: 'IsResumable',
Limit: screenWidth >= 1600 ? 5 : 3,
Recursive: true,
Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
CollapseBoxSetItems: false,
ParentId: parentId,
ImageTypeLimit: 1,
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
EnableTotalRecordCount: false
};
window.ApiClient.getItems(userId, options).then(result => {
setResumeResult(result);
loading.hide();
autoFocus(page);
}).catch(err => {
console.error('[SuggestionsView] failed to fetch items', err);
});
}, [autoFocus]);
const loadLatest = useCallback((page: HTMLDivElement, userId: string, parentId: string | null) => {
const options = {
IncludeItemTypes: 'Movie',
Limit: 18,
Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
ParentId: parentId,
ImageTypeLimit: 1,
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
EnableTotalRecordCount: false
};
window.ApiClient.getJSON(window.ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(items => {
setLatestItems(items);
autoFocus(page);
}).catch(err => {
console.error('[SuggestionsView] failed to fetch latest items', err);
});
}, [autoFocus]);
const loadSuggestions = useCallback((page, userId) => {
const screenWidth = dom.getWindowSize().innerWidth;
let itemLimit = 5;
if (screenWidth >= 1600) {
itemLimit = 8;
} else if (screenWidth >= 1200) {
itemLimit = 6;
if (isLoading) {
return <Loading />;
}
const url = window.ApiClient.getUrl('Movies/Recommendations', {
userId: userId,
categoryLimit: 6,
ItemLimit: itemLimit,
Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
ImageTypeLimit: 1,
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb'
});
window.ApiClient.getJSON(url).then(result => {
setRecommendations(result);
autoFocus(page);
}).catch(err => {
console.error('[SuggestionsView] failed to fetch recommendations', err);
});
}, [autoFocus]);
const loadSuggestionsTab = useCallback((view) => {
const parentId = topParentId;
const userId = window.ApiClient.getCurrentUserId();
loadResume(view, userId, parentId);
loadLatest(view, userId, parentId);
loadSuggestions(view, userId);
}, [loadLatest, loadResume, loadSuggestions, topParentId]);
useEffect(() => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
loadSuggestionsTab(page);
}, [loadSuggestionsTab]);
return (
<div ref={element}>
<SectionContainer
sectionTitle={globalize.translate('HeaderContinueWatching')}
enableScrollX={enableScrollX}
items={resumeResult.Items || []}
cardOptions={{
preferThumb: true,
shape: getThumbShape(),
showYear: true
}}
<>
<SuggestionsItemsContainer
parentId={parentId}
sectionsView={[SectionsView.ContinueWatchingMovies, SectionsView.LatestMovies]}
/>
<SectionContainer
sectionTitle={globalize.translate('HeaderLatestMovies')}
enableScrollX={enableScrollX}
items={latestItems}
cardOptions={{
shape: getPortraitShape(),
showYear: true
}}
/>
{!recommendations.length ? <div className='noItemsMessage centerMessage'>
{!movieRecommendationsItems?.length ? (
<div className='noItemsMessage centerMessage'>
<h1>{globalize.translate('MessageNothingHere')}</h1>
<p>{globalize.translate('MessageNoMovieSuggestionsAvailable')}</p>
</div> : recommendations.map(recommendation => {
return <RecommendationContainer key={recommendation.CategoryId} getPortraitShape={getPortraitShape} enableScrollX={enableScrollX} recommendation={recommendation} />;
})}
<p>
{globalize.translate(
'MessageNoMovieSuggestionsAvailable'
)}
</p>
</div>
) : (
movieRecommendationsItems.map((recommendation, index) => {
return (
<RecommendationContainer
// eslint-disable-next-line react/no-array-index-key
key={`${recommendation.CategoryId}-${index}`} // use a unique id return value may have duplicate id
recommendation={recommendation}
/>
);
})
)}
</>
);
};

8
src/apps/experimental/routes/movies/TrailersView.tsx
View file

@ -1,10 +1,10 @@
import React, { FC, useCallback } from 'react';
import ViewItemsContainer from '../../../../components/common/ViewItemsContainer';
import { LibraryViewProps } from '../../../../types/interface';
import ViewItemsContainer from 'components/common/ViewItemsContainer';
import { LibraryViewProps } from 'types/library';
const TrailersView: FC<LibraryViewProps> = ({ topParentId }) => {
const TrailersView: FC<LibraryViewProps> = ({ parentId }) => {
const getBasekey = useCallback(() => {
return 'trailers';
}, []);
@ -19,7 +19,7 @@ const TrailersView: FC<LibraryViewProps> = ({ topParentId }) => {
return (
<ViewItemsContainer
topParentId={topParentId}
topParentId={parentId}
getBasekey={getBasekey}
getItemTypes={getItemTypes}
getNoItemsMessage={getNoItemsMessage}

65
src/apps/experimental/routes/movies/index.tsx
View file

@ -1,29 +1,27 @@
import '../../../../elements/emby-scroller/emby-scroller';
import '../../../../elements/emby-itemscontainer/emby-itemscontainer';
import '../../../../elements/emby-tabs/emby-tabs';
import '../../../../elements/emby-button/emby-button';
import 'elements/emby-scroller/emby-scroller';
import 'elements/emby-itemscontainer/emby-itemscontainer';
import 'elements/emby-tabs/emby-tabs';
import 'elements/emby-button/emby-button';
import React, { FC, useEffect, useRef } from 'react';
import React, { FC } from 'react';
import { useLocation, useSearchParams } from 'react-router-dom';
import Page from 'components/Page';
import Page from '../../../../components/Page';
import globalize from '../../../../scripts/globalize';
import libraryMenu from '../../../../scripts/libraryMenu';
import { getDefaultTabIndex } from '../../components/tabs/tabRoutes';
import CollectionsView from './CollectionsView';
import FavoritesView from './FavoritesView';
import GenresView from './GenresView';
import MoviesView from './MoviesView';
import SuggestionsView from './SuggestionsView';
import TrailersView from './TrailersView';
import { getDefaultTabIndex } from '../../components/tabs/tabRoutes';
const Movies: FC = () => {
const location = useLocation();
const [ searchParams ] = useSearchParams();
const searchParamsParentId = searchParams.get('topParentId');
const searchParamsTab = searchParams.get('tab');
const currentTabIndex = searchParamsTab !== null ? parseInt(searchParamsTab, 10) :
getDefaultTabIndex(location.pathname, searchParams.get('topParentId'));
const element = useRef<HTMLDivElement>(null);
getDefaultTabIndex(location.pathname, searchParamsParentId);
const getTabComponent = (index: number) => {
if (index == null) {
@ -32,63 +30,33 @@ const Movies: FC = () => {
let component;
switch (index) {
case 0:
component = <MoviesView topParentId={searchParams.get('topParentId')} />;
break;
case 1:
component = <SuggestionsView topParentId={searchParams.get('topParentId')} />;
component = <SuggestionsView parentId={searchParamsParentId} />;
break;
case 2:
component = <TrailersView topParentId={searchParams.get('topParentId')} />;
component = <TrailersView parentId={searchParamsParentId} />;
break;
case 3:
component = <FavoritesView topParentId={searchParams.get('topParentId')} />;
component = <FavoritesView parentId={searchParamsParentId} />;
break;
case 4:
component = <CollectionsView topParentId={searchParams.get('topParentId')} />;
component = <CollectionsView parentId={searchParamsParentId} />;
break;
case 5:
component = <GenresView topParentId={searchParams.get('topParentId')} />;
component = <GenresView parentId={searchParamsParentId} />;
break;
default:
component = <MoviesView parentId={searchParamsParentId} />;
}
return component;
};
useEffect(() => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
if (!page.getAttribute('data-title')) {
const parentId = searchParams.get('topParentId');
if (parentId) {
window.ApiClient.getItem(window.ApiClient.getCurrentUserId(), parentId).then((item) => {
page.setAttribute('data-title', item.Name as string);
libraryMenu.setTitle(item.Name);
}).catch(err => {
console.error('[movies] failed to fetch library', err);
page.setAttribute('data-title', globalize.translate('Movies'));
libraryMenu.setTitle(globalize.translate('Movies'));
});
} else {
page.setAttribute('data-title', globalize.translate('Movies'));
libraryMenu.setTitle(globalize.translate('Movies'));
}
}
}, [ searchParams ]);
return (
<div ref={element}>
<Page
id='moviesPage'
className='mainAnimatedPage libraryPage backdropPage collectionEditorPage pageWithAbsoluteTabs withTabs'
@ -97,7 +65,6 @@ const Movies: FC = () => {
{getTabComponent(currentTabIndex)}
</Page>
</div>
);
};

9
src/apps/experimental/theme.ts
View file

@ -21,6 +21,15 @@ const theme = createTheme({
fontFamily: '"Noto Sans", sans-serif',
button: {
textTransform: 'none'
},
h1: {
fontSize: '1.8rem'
},
h2: {
fontSize: '1.5rem'
},
h3: {
fontSize: '1.17rem'
}
},
components: {

3
src/apps/stable/App.tsx
View file

@ -51,6 +51,9 @@ const StableApp = () => (
{/* Suppress warnings for unhandled routes */}
<Route path='*' element={null} />
{/* Redirects for old paths */}
<Route path='/serveractivity.html' element={<Navigate replace to='/dashboard/activity' />} />
</Route>
</Routes>
);

2
src/apps/stable/routes/legacyRoutes/admin.ts
View file

@ -164,7 +164,7 @@ export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
view: 'dashboard/scheduledtasks/scheduledtasks.html'
}
}, {
path: 'serveractivity.html',
path: 'dashboard/activity',
pageProps: {
controller: 'dashboard/serveractivity',
view: 'dashboard/serveractivity.html'

2
src/apps/stable/routes/user/userprofiles.tsx
View file

@ -48,7 +48,7 @@ const UserProfiles: FunctionComponent = () => {
const showUserMenu = (elem: HTMLElement) => {
const card = dom.parentWithClass(elem, 'card');
const userId = card.getAttribute('data-userid');
const userId = card?.getAttribute('data-userid');
if (!userId) {
console.error('Unexpected null user id');

32
src/components/UserAvatar.tsx Normal file
View file

@ -0,0 +1,32 @@
import React, { FC } from 'react';
import type { UserDto } from '@jellyfin/sdk/lib/generated-client/models/user-dto';
import Avatar from '@mui/material/Avatar';
import { useTheme } from '@mui/material/styles';
import { useApi } from 'hooks/useApi';
interface UserAvatarProps {
user?: UserDto
}
const UserAvatar: FC<UserAvatarProps> = ({ user }) => {
const { api } = useApi();
const theme = useTheme();
return user ? (
<Avatar
alt={user.Name ?? undefined}
src={
api && user.Id && user.PrimaryImageTag ?
`${api.basePath}/Users/${user.Id}/Images/Primary?tag=${user.PrimaryImageTag}` :
undefined
}
sx={{
bgcolor: theme.palette.primary.dark,
color: 'inherit'
}}
/>
) : null;
};
export default UserAvatar;

22
src/components/appFooter/appFooter.js
View file

@ -9,28 +9,26 @@ function render() {
return elem;
}
class appFooter {
class AppFooter {
constructor() {
const self = this;
this.element = render();
self.element = render();
self.add = function (elem) {
self.element.appendChild(elem);
this.add = function (elem) {
this.element.appendChild(elem);
};
self.insert = function (elem) {
this.insert = function (elem) {
if (typeof elem === 'string') {
self.element.insertAdjacentHTML('afterbegin', elem);
this.element.insertAdjacentHTML('afterbegin', elem);
} else {
self.element.insertBefore(elem, self.element.firstChild);
this.element.insertBefore(elem, this.element.firstChild);
}
};
}
destroy() {
const self = this;
self.element = null;
this.element = null;
}
}
export default new appFooter();
export default new AppFooter();

4
src/components/backdrop/backdrop.js
View file

@ -37,7 +37,7 @@ class Backdrop {
parent.appendChild(backdropImage);
if (!enableAnimation()) {
if (existingBackdropImage && existingBackdropImage.parentNode) {
if (existingBackdropImage?.parentNode) {
existingBackdropImage.parentNode.removeChild(existingBackdropImage);
}
internalBackdrop(true);
@ -51,7 +51,7 @@ class Backdrop {
if (backdropImage === self.currentAnimatingElement) {
self.currentAnimatingElement = null;
}
if (existingBackdropImage && existingBackdropImage.parentNode) {
if (existingBackdropImage?.parentNode) {
existingBackdropImage.parentNode.removeChild(existingBackdropImage);
}
};

12
src/components/cardbuilder/cardBuilder.js
View file

@ -546,7 +546,7 @@ function getCardImageUrl(item, apiClient, options, shape) {
imgType = 'Backdrop';
imgTag = item.ParentBackdropImageTags[0];
itemId = item.ParentBackdropItemId;
} else if (item.ImageTags && item.ImageTags.Primary && (item.Type !== 'Episode' || item.ChildCount !== 0)) {
} else if (item.ImageTags?.Primary && (item.Type !== 'Episode' || item.ChildCount !== 0)) {
imgType = 'Primary';
imgTag = item.ImageTags.Primary;
height = width && primaryImageAspectRatio ? Math.round(width / primaryImageAspectRatio) : null;
@ -591,10 +591,10 @@ function getCardImageUrl(item, apiClient, options, shape) {
} else if (item.Type === 'Season' && item.ImageTags && item.ImageTags.Thumb) {
imgType = 'Thumb';
imgTag = item.ImageTags.Thumb;
} else if (item.BackdropImageTags && item.BackdropImageTags.length) {
} else if (item.BackdropImageTags?.length) {
imgType = 'Backdrop';
imgTag = item.BackdropImageTags[0];
} else if (item.ImageTags && item.ImageTags.Thumb) {
} else if (item.ImageTags?.Thumb) {
imgType = 'Thumb';
imgTag = item.ImageTags.Thumb;
} else if (item.SeriesThumbImageTag && options.inheritThumb !== false) {
@ -605,7 +605,7 @@ function getCardImageUrl(item, apiClient, options, shape) {
imgType = 'Thumb';
imgTag = item.ParentThumbImageTag;
itemId = item.ParentThumbItemId;
} else if (item.ParentBackdropImageTags && item.ParentBackdropImageTags.length && options.inheritThumb !== false) {
} else if (item.ParentBackdropImageTags?.length && options.inheritThumb !== false) {
imgType = 'Backdrop';
imgTag = item.ParentBackdropImageTags[0];
itemId = item.ParentBackdropItemId;
@ -634,7 +634,7 @@ function getCardImageUrl(item, apiClient, options, shape) {
return {
imgUrl: imgUrl,
blurhash: (blurHashes[imgType] || {})[imgTag],
blurhash: blurHashes[imgType]?.[imgTag],
forceName: forceName,
coverImage: coverImage
};
@ -1422,7 +1422,7 @@ function buildCard(index, item, apiClient, options) {
className += ' card-withuserdata';
}
const positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
const positionTicksData = item.UserData?.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
const collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : '';
const playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : '';
const mediaTypeData = item.MediaType ? (' data-mediatype="' + item.MediaType + '"') : '';

2
src/components/cardbuilder/chaptercardbuilder.js
View file

@ -26,7 +26,7 @@ function buildChapterCardsHtml(item, chapters, options) {
}
}
const mediaStreams = ((item.MediaSources || [])[0] || {}).MediaStreams || [];
const mediaStreams = (item.MediaSources || [])[0]?.MediaStreams || [];
const videoStream = mediaStreams.filter(({ Type }) => {
return Type === 'Video';
})[0] || {};

2
src/components/channelMapper/channelMapper.js
View file

@ -12,7 +12,7 @@ import 'material-design-icons-iconfont';
import '../formdialog.scss';
import ServerConnections from '../ServerConnections';
export default class channelMapper {
export default class ChannelMapper {
constructor(options) {
function mapChannel(button, channelId, providerChannelId) {
loading.show();

128
src/components/common/GenresItemsContainer.tsx
View file

@ -1,128 +0,0 @@
import '../../elements/emby-button/emby-button';
import '../../elements/emby-itemscontainer/emby-itemscontainer';
import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
import escapeHTML from 'escape-html';
import React, { FC, useCallback, useEffect, useRef } from 'react';
import { appRouter } from '../router/appRouter';
import cardBuilder from '../cardbuilder/cardBuilder';
import layoutManager from '../layoutManager';
import lazyLoader from '../lazyLoader/lazyLoaderIntersectionObserver';
import globalize from '../../scripts/globalize';
import ItemsScrollerContainerElement from '../../elements/ItemsScrollerContainerElement';
import ItemsContainerElement from '../../elements/ItemsContainerElement';
const createLinkElement = ({ className, title, href }: { className?: string, title?: string | null, href?: string }) => ({
__html: `<a
is="emby-linkbutton"
class="${className}"
href="${href}"
>
<h2 class='sectionTitle sectionTitle-cards'>
${title}
</h2>
<span class='material-icons chevron_right' aria-hidden='true'></span>
</a>`
});
interface GenresItemsContainerProps {
topParentId?: string | null;
itemsResult: BaseItemDtoQueryResult;
}
const GenresItemsContainer: FC<GenresItemsContainerProps> = ({
topParentId,
itemsResult = {}
}) => {
const element = useRef<HTMLDivElement>(null);
const enableScrollX = useCallback(() => {
return !layoutManager.desktop;
}, []);
const getPortraitShape = useCallback(() => {
return enableScrollX() ? 'overflowPortrait' : 'portrait';
}, [enableScrollX]);
const fillItemsContainer = useCallback((entry) => {
const elem = entry.target;
const id = elem.getAttribute('data-id');
const query = {
SortBy: 'Random',
SortOrder: 'Ascending',
IncludeItemTypes: 'Movie',
Recursive: true,
Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
ImageTypeLimit: 1,
EnableImageTypes: 'Primary',
Limit: 12,
GenreIds: id,
EnableTotalRecordCount: false,
ParentId: topParentId
};
window.ApiClient.getItems(window.ApiClient.getCurrentUserId(), query).then((result) => {
cardBuilder.buildCards(result.Items || [], {
itemsContainer: elem,
shape: getPortraitShape(),
scalable: true,
overlayMoreButton: true,
allowBottomPadding: true,
showTitle: true,
centerText: true,
showYear: true
});
}).catch(err => {
console.error('[GenresItemsContainer] failed to fetch items', err);
});
}, [getPortraitShape, topParentId]);
useEffect(() => {
const elem = element.current;
lazyLoader.lazyChildren(elem, fillItemsContainer);
}, [itemsResult.Items, fillItemsContainer]);
const items = itemsResult.Items || [];
return (
<div ref={element}>
{
!items.length ? (
<div className='noItemsMessage centerMessage'>
<h1>{globalize.translate('MessageNothingHere')}</h1>
<p>{globalize.translate('MessageNoGenresAvailable')}</p>
</div>
) : items.map(item => (
<div key={item.Id} className='verticalSection'>
<div
className='sectionTitleContainer sectionTitleContainer-cards padded-left'
dangerouslySetInnerHTML={createLinkElement({
className: 'more button-flat button-flat-mini sectionTitleTextButton btnMoreFromGenre',
title: escapeHTML(item.Name),
href: appRouter.getRouteUrl(item, {
context: 'movies',
parentId: topParentId
})
})}
/>
{enableScrollX() ?
<ItemsScrollerContainerElement
scrollerclassName='padded-top-focusscale padded-bottom-focusscale'
dataMousewheel='false'
dataCenterfocus='true'
className='itemsContainer scrollSlider focuscontainer-x lazy'
dataId={item.Id}
/> : <ItemsContainerElement
className='itemsContainer vertical-wrap lazy padded-left padded-right'
dataId={item.Id}
/>
}
</div>
))
}
</div>
);
};
export default GenresItemsContainer;

48
src/components/common/RecommendationContainer.tsx
View file

@ -1,48 +0,0 @@
import type { RecommendationDto } from '@jellyfin/sdk/lib/generated-client';
import React, { FC } from 'react';
import globalize from '../../scripts/globalize';
import escapeHTML from 'escape-html';
import SectionContainer from './SectionContainer';
interface RecommendationContainerProps {
getPortraitShape: () => string;
enableScrollX: () => boolean;
recommendation?: RecommendationDto;
}
const RecommendationContainer: FC<RecommendationContainerProps> = ({ getPortraitShape, enableScrollX, recommendation = {} }) => {
let title = '';
switch (recommendation.RecommendationType) {
case 'SimilarToRecentlyPlayed':
title = globalize.translate('RecommendationBecauseYouWatched', recommendation.BaselineItemName);
break;
case 'SimilarToLikedItem':
title = globalize.translate('RecommendationBecauseYouLike', recommendation.BaselineItemName);
break;
case 'HasDirectorFromRecentlyPlayed':
case 'HasLikedDirector':
title = globalize.translate('RecommendationDirectedBy', recommendation.BaselineItemName);
break;
case 'HasActorFromRecentlyPlayed':
case 'HasLikedActor':
title = globalize.translate('RecommendationStarring', recommendation.BaselineItemName);
break;
}
return <SectionContainer
sectionTitle={escapeHTML(title)}
enableScrollX={enableScrollX}
items={recommendation.Items || []}
cardOptions={{
shape: getPortraitShape(),
showYear: true
}}
/>;
};
export default RecommendationContainer;

62
src/components/common/SectionContainer.tsx
View file

@ -1,62 +0,0 @@
import '../../elements/emby-itemscontainer/emby-itemscontainer';
import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useEffect, useRef } from 'react';
import cardBuilder from '../cardbuilder/cardBuilder';
import ItemsContainerElement from '../../elements/ItemsContainerElement';
import ItemsScrollerContainerElement from '../../elements/ItemsScrollerContainerElement';
import { CardOptions } from '../../types/interface';
interface SectionContainerProps {
sectionTitle: string;
enableScrollX: () => boolean;
items?: BaseItemDto[];
cardOptions?: CardOptions;
}
const SectionContainer: FC<SectionContainerProps> = ({
sectionTitle,
enableScrollX,
items = [],
cardOptions = {}
}) => {
const element = useRef<HTMLDivElement>(null);
useEffect(() => {
cardBuilder.buildCards(items, {
itemsContainer: element.current?.querySelector('.itemsContainer'),
parentContainer: element.current?.querySelector('.verticalSection'),
scalable: true,
overlayPlayButton: true,
showTitle: true,
centerText: true,
cardLayout: false,
...cardOptions
});
}, [cardOptions, enableScrollX, items]);
return (
<div ref={element}>
<div className='verticalSection hide'>
<div className='sectionTitleContainer sectionTitleContainer-cards'>
<h2 className='sectionTitle sectionTitle-cards padded-left'>
{sectionTitle}
</h2>
</div>
{enableScrollX() ? <ItemsScrollerContainerElement
scrollerclassName='padded-top-focusscale padded-bottom-focusscale'
dataMousewheel='false'
dataCenterfocus='true'
className='itemsContainer scrollSlider focuscontainer-x'
/> : <ItemsContainerElement
className='itemsContainer focuscontainer-x padded-left padded-right vertical-wrap'
/>}
</div>
</div>
);
};
export default SectionContainer;

4
src/components/common/ViewItemsContainer.tsx
View file

@ -12,12 +12,14 @@ import Shuffle from './Shuffle';
import Sort from './Sort';
import NewCollection from './NewCollection';
import globalize from '../../scripts/globalize';
import { CardOptions, ViewQuerySettings } from '../../types/interface';
import ServerConnections from '../ServerConnections';
import { useLocalStorage } from '../../hooks/useLocalStorage';
import listview from '../listview/listview';
import cardBuilder from '../cardbuilder/cardBuilder';
import { ViewQuerySettings } from '../../types/interface';
import { CardOptions } from '../../types/cardOptions';
interface ViewItemsContainerProps {
topParentId: string | null;
isBtnShuffleEnabled?: boolean;

140
src/components/dashboard/users/UserPasswordForm.tsx
View file

@ -6,7 +6,6 @@ import confirm from '../../confirm/confirm';
import loading from '../../loading/loading';
import toast from '../../toast/toast';
import ButtonElement from '../../../elements/ButtonElement';
import CheckBoxElement from '../../../elements/CheckBoxElement';
import InputElement from '../../../elements/InputElement';
type IProps = {
@ -33,12 +32,9 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
LibraryMenu.setTitle(user.Name);
let showLocalAccessSection = false;
if (user.HasConfiguredPassword) {
(page.querySelector('#btnResetPassword') as HTMLDivElement).classList.remove('hide');
(page.querySelector('#fldCurrentPassword') as HTMLDivElement).classList.remove('hide');
showLocalAccessSection = true;
} else {
(page.querySelector('#btnResetPassword') as HTMLDivElement).classList.add('hide');
(page.querySelector('#fldCurrentPassword') as HTMLDivElement).classList.add('hide');
@ -46,23 +42,6 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
const canChangePassword = loggedInUser?.Policy?.IsAdministrator || user.Policy.EnableUserPreferenceAccess;
(page.querySelector('.passwordSection') as HTMLDivElement).classList.toggle('hide', !canChangePassword);
(page.querySelector('.localAccessSection') as HTMLDivElement).classList.toggle('hide', !(showLocalAccessSection && canChangePassword));
const txtEasyPassword = page.querySelector('#txtEasyPassword') as HTMLInputElement;
txtEasyPassword.value = '';
if (user.HasConfiguredEasyPassword) {
txtEasyPassword.placeholder = '******';
(page.querySelector('#btnResetEasyPassword') as HTMLDivElement).classList.remove('hide');
} else {
txtEasyPassword.removeAttribute('placeholder');
txtEasyPassword.placeholder = '';
(page.querySelector('#btnResetEasyPassword') as HTMLDivElement).classList.add('hide');
}
const chkEnableLocalEasyPassword = page.querySelector('.chkEnableLocalEasyPassword') as HTMLInputElement;
chkEnableLocalEasyPassword.checked = user.Configuration.EnableLocalPassword || false;
import('../../autoFocuser').then(({ default: autoFocuser }) => {
autoFocuser.autoFocus(page);
@ -125,75 +104,6 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
});
};
const onLocalAccessSubmit = (e: Event) => {
loading.show();
saveEasyPassword();
e.preventDefault();
return false;
};
const saveEasyPassword = () => {
const easyPassword = (page.querySelector('#txtEasyPassword') as HTMLInputElement).value;
if (easyPassword) {
window.ApiClient.updateEasyPassword(userId, easyPassword).then(function () {
onEasyPasswordSaved();
}).catch(err => {
console.error('[UserPasswordForm] failed to update easy password', err);
});
} else {
onEasyPasswordSaved();
}
};
const onEasyPasswordSaved = () => {
window.ApiClient.getUser(userId).then(function (user) {
if (!user.Configuration) {
throw new Error('Unexpected null user.Configuration');
}
if (!user.Id) {
throw new Error('Unexpected null user.Id');
}
user.Configuration.EnableLocalPassword = (page.querySelector('.chkEnableLocalEasyPassword') as HTMLInputElement).checked;
window.ApiClient.updateUserConfiguration(user.Id, user.Configuration).then(function () {
loading.hide();
toast(globalize.translate('SettingsSaved'));
loadUser().catch(err => {
console.error('[UserPasswordForm] failed to load user', err);
});
}).catch(err => {
console.error('[UserPasswordForm] failed to update user configuration', err);
});
}).catch(err => {
console.error('[UserPasswordForm] failed to fetch user', err);
});
};
const resetEasyPassword = () => {
const msg = globalize.translate('PinCodeResetConfirmation');
confirm(msg, globalize.translate('HeaderPinCodeReset')).then(function () {
loading.show();
window.ApiClient.resetEasyPassword(userId).then(function () {
loading.hide();
Dashboard.alert({
message: globalize.translate('PinCodeResetComplete'),
title: globalize.translate('HeaderPinCodeReset')
});
loadUser().catch(err => {
console.error('[UserPasswordForm] failed to load user', err);
});
}).catch(err => {
console.error('[UserPasswordForm] failed to reset easy password', err);
});
}).catch(() => {
// confirm dialog was closed
});
};
const resetPassword = () => {
const msg = globalize.translate('PasswordResetConfirmation');
confirm(msg, globalize.translate('ResetPassword')).then(function () {
@ -216,9 +126,6 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
};
(page.querySelector('.updatePasswordForm') as HTMLFormElement).addEventListener('submit', onSubmit);
(page.querySelector('.localAccessForm') as HTMLFormElement).addEventListener('submit', onLocalAccessSubmit);
(page.querySelector('#btnResetEasyPassword') as HTMLButtonElement).addEventListener('click', resetEasyPassword);
(page.querySelector('#btnResetPassword') as HTMLButtonElement).addEventListener('click', resetPassword);
}, [loadUser, userId]);
@ -269,53 +176,6 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
</div>
</div>
</form>
<br />
<form
className='localAccessForm localAccessSection'
style={{ margin: '0 auto' }}
>
<div className='detailSection'>
<div className='detailSectionHeader'>
{globalize.translate('HeaderEasyPinCode')}
</div>
<br />
<div>
{globalize.translate('EasyPasswordHelp')}
</div>
<br />
<div className='inputContainer'>
<InputElement
type='number'
id='txtEasyPassword'
label='LabelEasyPinCode'
options={'autoComplete="off" pattern="[0-9]*" step="1" maxlength="5"'}
/>
</div>
<br />
<div className='checkboxContainer checkboxContainer-withDescription'>
<CheckBoxElement
className='chkEnableLocalEasyPassword'
title='LabelInNetworkSignInWithEasyPassword'
/>
<div className='fieldDescription checkboxFieldDescription'>
{globalize.translate('LabelInNetworkSignInWithEasyPasswordHelp')}
</div>
</div>
<div>
<ButtonElement
type='submit'
className='raised button-submit block'
title='Save'
/>
<ButtonElement
type='button'
id='btnResetEasyPassword'
className='raised button-cancel block hide'
title='ButtonResetEasyPassword'
/>
</div>
</div>
</form>
</div>
);
};

4
src/components/guide/guide.js
View file

@ -675,12 +675,12 @@ function Guide(options) {
});
const activeElement = document.activeElement;
const itemId = activeElement && activeElement.getAttribute ? activeElement.getAttribute('data-id') : null;
const itemId = activeElement?.getAttribute ? activeElement.getAttribute('data-id') : null;
let channelRowId = null;
if (activeElement) {
channelRowId = dom.parentWithClass(activeElement, 'channelPrograms');
channelRowId = channelRowId && channelRowId.getAttribute ? channelRowId.getAttribute('data-channelid') : null;
channelRowId = channelRowId?.getAttribute ? channelRowId.getAttribute('data-channelid') : null;
}
renderChannelHeaders(context, channels, apiClient);

2
src/components/homesections/homesections.js
View file

@ -76,7 +76,7 @@ export function loadSections(elem, apiClient, user, userSettings) {
});
} else {
let noLibDescription;
if (user['Policy'] && user['Policy']['IsAdministrator']) {
if (user.Policy?.IsAdministrator) {
noLibDescription = globalize.translate('NoCreatedLibraries', '<br><a id="button-createLibrary" class="button-link">', '</a>');
} else {
noLibDescription = globalize.translate('AskAdminToCreateLibrary');

2
src/components/htmlMediaHelper.js
View file

@ -68,7 +68,7 @@ export function handleHlsJsMediaError(instance, reject) {
let now = Date.now();
if (window.performance && window.performance.now) {
if (window.performance?.now) {
now = performance.now(); // eslint-disable-line compat/compat
}

10
src/components/imageOptionsEditor/imageOptionsEditor.js
View file

@ -80,7 +80,8 @@ function saveValues(context, options) {
});
}
function showEditor(itemType, options, availableOptions) {
class ImageOptionsEditor {
show(itemType, options, availableOptions) {
const dlg = dialogHelper.createDialog({
size: 'small',
removeOnClose: true,
@ -101,11 +102,6 @@ function showEditor(itemType, options, availableOptions) {
dialogHelper.close(dlg);
});
}
export class editor {
constructor() {
this.show = showEditor;
}
}
export default editor;
export default ImageOptionsEditor;

4
src/components/imageOptionsEditor/imageOptionsEditor.template.html
View file

@ -1,5 +1,7 @@
<div class="formDialogHeader">
<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}">
<span class="material-icons arrow_back" aria-hidden="true"></span>
</button>
<h3 class="formDialogHeaderTitle">
${HeaderImageOptions}
</h3>

2
src/components/imageUploader/imageUploader.js
View file

@ -41,7 +41,7 @@ function onFileReaderError(evt) {
function setFiles(page, files) {
const file = files[0];
if (!file || !file.type.match('image.*')) {
if (!file?.type.match('image.*')) {
page.querySelector('#imageOutput').innerHTML = '';
page.querySelector('#fldUpload').classList.add('hide');
currentFile = null;

2
src/components/images/imageLoader.js
View file

@ -9,7 +9,7 @@ worker.addEventListener(
'message',
({ data: { pixels, hsh, width, height } }) => {
const elems = targetDic[hsh];
if (elems && elems.length) {
if (elems?.length) {
for (const elem of elems) {
drawBlurhash(elem, pixels, width, height);
}

8
src/components/indicators/indicators.js
View file

@ -12,7 +12,7 @@ export function enableProgressIndicator(item) {
export function getProgressHtml(pct, options) {
let containerClass = 'itemProgressBar';
if (options && options.containerClass) {
if (options?.containerClass) {
containerClass += ' ' + options.containerClass;
}
@ -21,7 +21,7 @@ export function getProgressHtml(pct, options) {
function getAutoTimeProgressHtml(pct, options, isRecording, start, end) {
let containerClass = 'itemProgressBar';
if (options && options.containerClass) {
if (options?.containerClass) {
containerClass += ' ' + options.containerClass;
}
@ -36,7 +36,7 @@ function getAutoTimeProgressHtml(pct, options, isRecording, start, end) {
export function getProgressBarHtml(item, options) {
let pct;
if (enableProgressIndicator(item) && item.Type !== 'Recording') {
const userData = options && options.userData ? options.userData : item.UserData;
const userData = options?.userData ? options.userData : item.UserData;
if (userData) {
pct = userData.PlayedPercentage;
@ -90,7 +90,7 @@ export function getPlayedIndicatorHtml(item) {
}
export function getChildCountIndicatorHtml(item, options) {
const minCount = options && options.minCount ? options.minCount : 0;
const minCount = options?.minCount ? options.minCount : 0;
if (item.ChildCount && item.ChildCount > minCount) {
return '<div class="countIndicator indicator">' + datetime.toLocaleString(item.ChildCount) + '</div>';

8
src/components/itemContextMenu.js
View file

@ -345,8 +345,8 @@ function executeCommand(item, id, options) {
});
break;
case 'addtoplaylist':
import('./playlisteditor/playlisteditor').then(({ default: playlistEditor }) => {
new playlistEditor({
import('./playlisteditor/playlisteditor').then(({ default: PlaylistEditor }) => {
new PlaylistEditor({
items: [itemId],
serverId: serverId
}).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
@ -630,8 +630,8 @@ function deleteItem(apiClient, item) {
}
function refresh(apiClient, item) {
import('./refreshdialog/refreshdialog').then(({ default: refreshDialog }) => {
new refreshDialog({
import('./refreshdialog/refreshdialog').then(({ default: RefreshDialog }) => {
new RefreshDialog({
itemIds: [item.Id],
serverId: apiClient.serverInfo().Id,
mode: item.Type === 'CollectionFolder' ? 'scan' : null

2
src/components/itemHelper.js
View file

@ -117,7 +117,7 @@ export function canEdit(user, item) {
}
export function isLocalItem(item) {
return item && item.Id && typeof item.Id === 'string' && item.Id.indexOf('local') === 0;
return item?.Id && typeof item.Id === 'string' && item.Id.indexOf('local') === 0;
}
export function canIdentify (user, item) {

2
src/components/itemMediaInfo/itemMediaInfo.js
View file

@ -61,7 +61,7 @@ function getMediaSourceHtml(user, item, version) {
if (version.Container) {
html += `${createAttribute(globalize.translate('MediaInfoContainer'), version.Container)}<br/>`;
}
if (version.Formats && version.Formats.length) {
if (version.Formats?.length) {
html += `${createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(','))}<br/>`;
}
if (version.Path && user && user.Policy.IsAdministrator) {

2
src/components/itemidentifier/itemidentifier.js
View file

@ -79,7 +79,7 @@ function searchForIdentificationResults(page) {
SearchInfo: lookupInfo
};
if (currentItem && currentItem.Id) {
if (currentItem?.Id) {
lookupInfo.ItemId = currentItem.Id;
} else {
lookupInfo.IncludeDisabledProviders = true;

2
src/components/itemsrefresher.js
View file

@ -134,7 +134,7 @@ class ItemsRefresher {
}
}
if (this.needsRefresh || (options && options.refresh)) {
if (this.needsRefresh || (options?.refresh)) {
return this.refreshItems();
}

2
src/components/libraryoptionseditor/libraryoptionseditor.js
View file

@ -495,7 +495,7 @@ function setImageFetchersIntoOptions(parent, options) {
}
function setImageOptionsIntoOptions(options) {
const originalTypeOptions = (currentLibraryOptions || {}).TypeOptions || [];
const originalTypeOptions = currentLibraryOptions?.TypeOptions || [];
for (const originalTypeOption of originalTypeOptions) {
let typeOptions = getTypeOptions(options, originalTypeOption.Type);

4
src/components/listview/listview.js
View file

@ -86,7 +86,7 @@ function getImageUrl(item, size) {
type: 'Primary'
};
if (item.ImageTags && item.ImageTags.Primary) {
if (item.ImageTags?.Primary) {
options.tag = item.ImageTags.Primary;
itemId = item.Id;
} else if (item.AlbumId && item.AlbumPrimaryImageTag) {
@ -235,7 +235,7 @@ export function getListViewHtml(options) {
const playlistItemId = item.PlaylistItemId ? (` data-playlistitemid="${item.PlaylistItemId}"`) : '';
const positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (` data-positionticks="${item.UserData.PlaybackPositionTicks}"`) : '';
const positionTicksData = item.UserData?.PlaybackPositionTicks ? (` data-positionticks="${item.UserData.PlaybackPositionTicks}"`) : '';
const collectionIdData = options.collectionId ? (` data-collectionid="${options.collectionId}"`) : '';
const playlistIdData = options.playlistId ? (` data-playlistid="${options.playlistId}"`) : '';
const mediaTypeData = item.MediaType ? (` data-mediatype="${item.MediaType}"`) : '';

4
src/components/mediaLibraryCreator/mediaLibraryCreator.js
View file

@ -188,7 +188,7 @@ function initLibraryOptions(dlg) {
});
}
export class showEditor {
export class MediaLibraryCreator {
constructor(options) {
return new Promise((resolve) => {
currentOptions = options;
@ -224,4 +224,4 @@ let currentOptions;
let hasChanges = false;
let isCreating = false;
export default showEditor;
export default MediaLibraryCreator;

8
src/components/mediaLibraryEditor/mediaLibraryEditor.js
View file

@ -93,7 +93,7 @@ function onListItemClick(e) {
if (listItem) {
const index = parseInt(listItem.getAttribute('data-index'), 10);
const pathInfos = (currentOptions.library.LibraryOptions || {}).PathInfos || [];
const pathInfos = currentOptions.library.LibraryOptions?.PathInfos || [];
const pathInfo = index == null ? {} : pathInfos[index] || {};
const originalPath = pathInfo.Path || (index == null ? null : currentOptions.library.Locations[index]);
const btnRemovePath = dom.parentWithClass(e.target, 'btnRemovePath');
@ -139,7 +139,7 @@ function refreshLibraryFromServer(page) {
}
function renderLibrary(page, options) {
let pathInfos = (options.library.LibraryOptions || {}).PathInfos || [];
let pathInfos = options.library.LibraryOptions?.PathInfos || [];
if (!pathInfos.length) {
pathInfos = options.library.Locations.map(p => {
@ -197,7 +197,7 @@ function onDialogClosed() {
currentDeferred.resolveWith(null, [hasChanges]);
}
export class showEditor {
export class MediaLibraryEditor {
constructor(options) {
const deferred = jQuery.Deferred();
currentOptions = options;
@ -231,4 +231,4 @@ let currentOptions;
let hasChanges = false;
let isCreating = false;
export default showEditor;
export default MediaLibraryEditor;

4
src/components/metadataEditor/metadataEditor.js
View file

@ -759,7 +759,7 @@ function fillItemInfo(context, item, parentalRatingOptions) {
context.querySelector('#txtName').value = item.Name || '';
context.querySelector('#txtOriginalName').value = item.OriginalTitle || '';
context.querySelector('#txtOverview').value = item.Overview || '';
context.querySelector('#txtTagline').value = (item.Taglines && item.Taglines.length ? item.Taglines[0] : '');
context.querySelector('#txtTagline').value = (item.Taglines?.length ? item.Taglines[0] : '');
context.querySelector('#txtSortName').value = item.ForcedSortName || '';
context.querySelector('#txtCommunityRating').value = item.CommunityRating || '';
@ -826,7 +826,7 @@ function fillItemInfo(context, item, parentalRatingOptions) {
context.querySelector('#txtAirTime').value = item.AirTime || '';
const placeofBirth = item.ProductionLocations && item.ProductionLocations.length ? item.ProductionLocations[0] : '';
const placeofBirth = item.ProductionLocations?.length ? item.ProductionLocations[0] : '';
context.querySelector('#txtPlaceOfBirth').value = placeofBirth;
context.querySelector('#txtOriginalAspectRatio').value = item.AspectRatio || '';

8
src/components/multiSelect/multiSelect.js
View file

@ -6,7 +6,7 @@ import dom from '../../scripts/dom';
import './multiSelect.scss';
import ServerConnections from '../ServerConnections';
import alert from '../alert';
import playlistEditor from '../playlisteditor/playlisteditor';
import PlaylistEditor from '../playlisteditor/playlisteditor';
import confirm from '../confirm/confirm';
import itemHelper from '../itemHelper';
import datetime from '../../scripts/datetime';
@ -269,7 +269,7 @@ function showMenuForSelectedItems(e) {
dispatchNeedsRefresh();
break;
case 'playlist':
new playlistEditor({
new PlaylistEditor({
items: items,
serverId: serverId
});
@ -299,8 +299,8 @@ function showMenuForSelectedItems(e) {
dispatchNeedsRefresh();
break;
case 'refresh':
import('../refreshdialog/refreshdialog').then(({ default: refreshDialog }) => {
new refreshDialog({
import('../refreshdialog/refreshdialog').then(({ default: RefreshDialog }) => {
new RefreshDialog({
itemIds: items,
serverId: serverId
}).show();

4
src/components/nowPlayingBar/nowPlayingBar.js
View file

@ -243,7 +243,7 @@ function bindEvents(elem) {
positionSlider.getBubbleText = function (value) {
const state = lastPlayerState;
if (!state || !state.NowPlayingItem || !currentRuntimeTicks) {
if (!state?.NowPlayingItem || !currentRuntimeTicks) {
return '--:--';
}
@ -489,7 +489,7 @@ function imageUrl(item, options) {
options = options || {};
options.type = options.type || 'Primary';
if (item.ImageTags && item.ImageTags[options.type]) {
if (item.ImageTags?.[options.type]) {
options.tag = item.ImageTags[options.type];
return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
}

2
src/components/playback/mediasession.js
View file

@ -35,7 +35,7 @@ function seriesImageUrl(item, options = {}) {
function imageUrl(item, options = {}) {
options.type = options.type || 'Primary';
if (item.ImageTags && item.ImageTags[options.type]) {
if (item.ImageTags?.[options.type]) {
options.tag = item.ImageTags[options.type];
return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.Id, options);

4
src/components/playback/nowplayinghelper.js
View file

@ -23,7 +23,7 @@ export function getNowPlayingNames(nowPlayingItem, includeNonNameInfo) {
let bottomText = '';
if (nowPlayingItem.ArtistItems && nowPlayingItem.ArtistItems.length) {
if (nowPlayingItem.ArtistItems?.length) {
bottomItem = {
Id: nowPlayingItem.ArtistItems[0].Id,
Name: nowPlayingItem.ArtistItems[0].Name,
@ -34,7 +34,7 @@ export function getNowPlayingNames(nowPlayingItem, includeNonNameInfo) {
bottomText = nowPlayingItem.ArtistItems.map(function (a) {
return a.Name;
}).join(', ');
} else if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) {
} else if (nowPlayingItem.Artists?.length) {
bottomText = nowPlayingItem.Artists.join(', ');
} else if (nowPlayingItem.SeriesName || nowPlayingItem.Album) {
bottomText = topText;

54
src/components/playback/playbackmanager.js
View file

@ -163,12 +163,12 @@ function backdropImageUrl(apiClient, item, options) {
options.quality = 100;
}
if (item.BackdropImageTags && item.BackdropImageTags.length) {
if (item.BackdropImageTags?.length) {
options.tag = item.BackdropImageTags[0];
return apiClient.getScaledImageUrl(item.Id, options);
}
if (item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
if (item.ParentBackdropImageTags?.length) {
options.tag = item.ParentBackdropImageTags[0];
return apiClient.getScaledImageUrl(item.ParentBackdropItemId, options);
}
@ -773,7 +773,7 @@ class PlaybackManager {
self.setActivePlayer = function (player, targetInfo) {
if (player === 'localplayer' || player.name === 'localplayer') {
if (self._currentPlayer && self._currentPlayer.isLocalPlayer) {
if (self._currentPlayer?.isLocalPlayer) {
return;
}
setCurrentPlayerInternal(null, null);
@ -795,7 +795,7 @@ class PlaybackManager {
self.trySetActivePlayer = function (player, targetInfo) {
if (player === 'localplayer' || player.name === 'localplayer') {
if (self._currentPlayer && self._currentPlayer.isLocalPlayer) {
if (self._currentPlayer?.isLocalPlayer) {
return;
}
return;
@ -967,7 +967,7 @@ class PlaybackManager {
return player.isPlaying();
}
return player != null && player.currentSrc() != null;
return player?.currentSrc() != null;
};
self.isPlayingMediaType = function (mediaType, player) {
@ -989,7 +989,7 @@ class PlaybackManager {
self.isPlayingLocally = function (mediaTypes, player) {
player = player || self._currentPlayer;
if (!player || !player.isLocalPlayer) {
if (!player?.isLocalPlayer) {
return false;
}
@ -1068,7 +1068,7 @@ class PlaybackManager {
self.setAspectRatio = function (val, player) {
player = player || self._currentPlayer;
if (player && player.setAspectRatio) {
if (player?.setAspectRatio) {
player.setAspectRatio(val);
}
};
@ -1076,7 +1076,7 @@ class PlaybackManager {
self.getSupportedAspectRatios = function (player) {
player = player || self._currentPlayer;
if (player && player.getSupportedAspectRatios) {
if (player?.getSupportedAspectRatios) {
return player.getSupportedAspectRatios();
}
@ -1086,7 +1086,7 @@ class PlaybackManager {
self.getAspectRatio = function (player) {
player = player || self._currentPlayer;
if (player && player.getAspectRatio) {
if (player?.getAspectRatio) {
return player.getAspectRatio();
}
};
@ -1131,7 +1131,7 @@ class PlaybackManager {
self.getSupportedPlaybackRates = function (player) {
player = player || self._currentPlayer;
if (player && player.getSupportedPlaybackRates) {
if (player?.getSupportedPlaybackRates) {
return player.getSupportedPlaybackRates();
}
return [];
@ -1351,7 +1351,7 @@ class PlaybackManager {
self.getMaxStreamingBitrate = function (player) {
player = player || self._currentPlayer;
if (player && player.getMaxStreamingBitrate) {
if (player?.getMaxStreamingBitrate) {
return player.getMaxStreamingBitrate();
}
@ -1370,7 +1370,7 @@ class PlaybackManager {
self.enableAutomaticBitrateDetection = function (player) {
player = player || self._currentPlayer;
if (player && player.enableAutomaticBitrateDetection) {
if (player?.enableAutomaticBitrateDetection) {
return player.enableAutomaticBitrateDetection();
}
@ -1386,7 +1386,7 @@ class PlaybackManager {
self.setMaxStreamingBitrate = function (options, player) {
player = player || self._currentPlayer;
if (player && player.setMaxStreamingBitrate) {
if (player?.setMaxStreamingBitrate) {
return player.setMaxStreamingBitrate(options);
}
@ -1443,7 +1443,7 @@ class PlaybackManager {
document.webkitCancelFullscreen();
} else {
const elem = document.querySelector('video');
if (elem && elem.webkitEnterFullscreen) {
if (elem?.webkitEnterFullscreen) {
elem.webkitEnterFullscreen();
}
}
@ -2078,7 +2078,7 @@ class PlaybackManager {
const mediaSource = self.currentMediaSource(player);
if (mediaSource && mediaSource.RunTimeTicks) {
if (mediaSource?.RunTimeTicks) {
return mediaSource.RunTimeTicks;
}
@ -2614,7 +2614,7 @@ class PlaybackManager {
if (mediaSource.MediaStreams && player.useFullSubtitleUrls) {
mediaSource.MediaStreams.forEach(stream => {
if (stream.DeliveryUrl && stream.DeliveryUrl.startsWith('/')) {
if (stream.DeliveryUrl?.startsWith('/')) {
stream.DeliveryUrl = apiClient.getUrl(stream.DeliveryUrl);
}
});
@ -3444,7 +3444,7 @@ class PlaybackManager {
const streamInfo = getPlayerData(player).streamInfo;
if (streamInfo && streamInfo.started && !streamInfo.ended) {
if (streamInfo?.started && !streamInfo.ended) {
reportPlayback(self, state, player, reportPlaylist, serverId, 'reportPlaybackProgress', progressEventName);
}
@ -3515,7 +3515,7 @@ class PlaybackManager {
const nextItem = this._playQueueManager.getNextItemInfo();
if (!nextItem || !nextItem.item) {
if (!nextItem?.item) {
return Promise.reject();
}
@ -3656,7 +3656,7 @@ class PlaybackManager {
async playTrailers(item) {
const player = this._currentPlayer;
if (player && player.playTrailers) {
if (player?.playTrailers) {
return player.playTrailers(item);
}
@ -3668,7 +3668,7 @@ class PlaybackManager {
items = await apiClient.getLocalTrailers(apiClient.getCurrentUserId(), item.Id);
}
if (!items || !items.length) {
if (!items?.length) {
items = (item.RemoteTrailers || []).map((t) => {
return {
Name: t.Name || (item.Name + ' Trailer'),
@ -3750,7 +3750,7 @@ class PlaybackManager {
}
setPlaybackRate(value, player = this._currentPlayer) {
if (player && player.setPlaybackRate) {
if (player?.setPlaybackRate) {
player.setPlaybackRate(value);
// Save the new playback rate in the browser session, to restore when playing a new video.
@ -3759,7 +3759,7 @@ class PlaybackManager {
}
getPlaybackRate(player = this._currentPlayer) {
if (player && player.getPlaybackRate) {
if (player?.getPlaybackRate) {
return player.getPlaybackRate();
}
@ -3767,7 +3767,7 @@ class PlaybackManager {
}
instantMix(item, player = this._currentPlayer) {
if (player && player.instantMix) {
if (player?.instantMix) {
return player.instantMix(item);
}
@ -3788,7 +3788,7 @@ class PlaybackManager {
}
shuffle(shuffleItem, player = this._currentPlayer) {
if (player && player.shuffle) {
if (player?.shuffle) {
return player.shuffle(shuffleItem);
}
@ -3805,7 +3805,7 @@ class PlaybackManager {
const mediaSource = this.currentMediaSource(player);
const mediaStreams = (mediaSource || {}).MediaStreams || [];
const mediaStreams = mediaSource?.MediaStreams || [];
return mediaStreams.filter(function (s) {
return s.Type === 'Audio';
}).sort(itemHelper.sortTracks);
@ -3821,7 +3821,7 @@ class PlaybackManager {
const mediaSource = this.currentMediaSource(player);
const mediaStreams = (mediaSource || {}).MediaStreams || [];
const mediaStreams = mediaSource?.MediaStreams || [];
return mediaStreams.filter(function (s) {
return s.Type === 'Subtitle';
}).sort(itemHelper.sortTracks);
@ -3960,7 +3960,7 @@ class PlaybackManager {
}
displayContent(options, player = this._currentPlayer) {
if (player && player.displayContent) {
if (player?.displayContent) {
player.displayContent(options);
}
}

5
src/components/playback/playbackorientation.js
View file

@ -1,4 +1,3 @@
import { playbackManager } from './playbackmanager';
import layoutManager from '../layoutManager';
import Events from '../../utils/events.ts';
@ -19,7 +18,7 @@ Events.on(playbackManager, 'playbackstart', function (e, player) {
if (isLocalVideo && layoutManager.mobile) {
/* eslint-disable-next-line compat/compat */
const lockOrientation = window.screen.lockOrientation || window.screen.mozLockOrientation || window.screen.msLockOrientation || (window.screen.orientation && window.screen.orientation.lock);
const lockOrientation = window.screen.lockOrientation || window.screen.mozLockOrientation || window.screen.msLockOrientation || (window.screen.orientation?.lock);
if (lockOrientation) {
try {
@ -40,7 +39,7 @@ Events.on(playbackManager, 'playbackstart', function (e, player) {
Events.on(playbackManager, 'playbackstop', function (e, playbackStopInfo) {
if (orientationLocked && !playbackStopInfo.nextMediaType) {
/* eslint-disable-next-line compat/compat */
const unlockOrientation = window.screen.unlockOrientation || window.screen.mozUnlockOrientation || window.screen.msUnlockOrientation || (window.screen.orientation && window.screen.orientation.unlock);
const unlockOrientation = window.screen.unlockOrientation || window.screen.mozUnlockOrientation || window.screen.msUnlockOrientation || (window.screen.orientation?.unlock);
if (unlockOrientation) {
try {

2
src/components/playback/playersettingsmenu.js
View file

@ -248,7 +248,7 @@ export function show(options) {
const player = options.player;
const currentItem = playbackManager.currentItem(player);
if (!currentItem || !currentItem.ServerId) {
if (!currentItem?.ServerId) {
return showWithUser(options, player, null);
}

4
src/components/playback/playmethodhelper.js
View file

@ -3,9 +3,9 @@ export function getDisplayPlayMethod(session) {
return null;
}
if (session.TranscodingInfo && session.TranscodingInfo.IsVideoDirect && session.TranscodingInfo.IsAudioDirect) {
if (session.TranscodingInfo?.IsVideoDirect && session.TranscodingInfo.IsAudioDirect) {
return 'Remux';
} else if (session.TranscodingInfo && session.TranscodingInfo.IsVideoDirect) {
} else if (session.TranscodingInfo?.IsVideoDirect) {
return 'DirectStream';
} else if (session.PlayState.PlayMethod === 'Transcode') {
return 'Transcode';

2
src/components/playerstats/playerstats.js
View file

@ -166,7 +166,7 @@ function getTranscodingStats(session, player, displayPlayMethod) {
value: session.TranscodingInfo.Framerate + ' fps'
});
}
if (session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length) {
if (session.TranscodingInfo.TranscodeReasons?.length) {
sessionStats.push({
label: globalize.translate('LabelReasonForTranscoding'),
value: session.TranscodingInfo.TranscodeReasons.map(translateReason).join('<br/>')

4
src/components/playlisteditor/playlisteditor.js
View file

@ -221,7 +221,7 @@ function centerFocus(elem, horiz, on) {
});
}
export class showEditor {
export class PlaylistEditor {
constructor(options) {
const items = options.items || {};
currentServerId = options.serverId;
@ -280,4 +280,4 @@ export class showEditor {
}
}
export default showEditor;
export default PlaylistEditor;

6
src/components/pluginManager.js
View file

@ -72,13 +72,13 @@ class PluginManager {
throw new TypeError('Plugin definitions in window have to be an (async) function returning the plugin class');
}
const pluginClass = await pluginDefinition();
if (typeof pluginClass !== 'function') {
const PluginClass = await pluginDefinition();
if (typeof PluginClass !== 'function') {
throw new TypeError(`Plugin definition doesn't return a class for '${pluginSpec}'`);
}
// init plugin and pass basic dependencies
plugin = new pluginClass({
plugin = new PluginClass({
events: Events,
loading,
appSettings,

6
src/components/recordingcreator/recordingcreator.js
View file

@ -6,7 +6,7 @@ import loading from '../loading/loading';
import scrollHelper from '../../scripts/scrollHelper';
import datetime from '../../scripts/datetime';
import imageLoader from '../images/imageLoader';
import recordingFields from './recordingfields';
import RecordingFields from './recordingfields';
import Events from '../../utils/events.ts';
import '../../elements/emby-button/emby-button';
import '../../elements/emby-button/paper-icon-button-light';
@ -170,7 +170,7 @@ function showEditor(itemId, serverId) {
Events.off(currentRecordingFields, 'recordingchanged', onRecordingChanged);
executeCloseAction(closeAction, itemId, serverId);
if (currentRecordingFields && currentRecordingFields.hasChanged()) {
if (currentRecordingFields?.hasChanged()) {
resolve();
} else {
reject();
@ -185,7 +185,7 @@ function showEditor(itemId, serverId) {
reload(dlg, itemId, serverId);
currentRecordingFields = new recordingFields({
currentRecordingFields = new RecordingFields({
parent: dlg.querySelector('.recordingFields'),
programId: itemId,
serverId: serverId

8
src/components/remotecontrol/remotecontrol.js
View file

@ -119,7 +119,7 @@ function imageUrl(item, options) {
options = options || {};
options.type = options.type || 'Primary';
if (item.ImageTags && item.ImageTags[options.type]) {
if (item.ImageTags?.[options.type]) {
options.tag = item.ImageTags[options.type];
return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
}
@ -691,10 +691,10 @@ export default function () {
}
function savePlaylist() {
import('../playlisteditor/playlisteditor').then(({ default: playlistEditor }) => {
import('../playlisteditor/playlisteditor').then(({ default: PlaylistEditor }) => {
getSaveablePlaylistItems().then(function (items) {
const serverId = items.length ? items[0].ServerId : ApiClient.serverId();
new playlistEditor({
new PlaylistEditor({
items: items.map(function (i) {
return i.Id;
}),
@ -800,7 +800,7 @@ export default function () {
positionSlider.getBubbleText = function (value) {
const state = lastPlayerState;
if (!state || !state.NowPlayingItem || !currentRuntimeTicks) {
if (!state?.NowPlayingItem || !currentRuntimeTicks) {
return '--:--';
}

9
src/components/router/appRouter.js
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;
}
@ -320,7 +321,7 @@ class AppRouter {
path: ctx.path
};
}).catch((result) => {
if (!result || !result.cancelled) {
if (!result?.cancelled) {
onNewViewNeeded();
}
});
@ -402,7 +403,7 @@ class AppRouter {
const isCurrentRouteStartup = this.currentRouteInfo ? this.currentRouteInfo.route.startup : true;
const shouldExitApp = ctx.isBack && route.isDefaultRoute && isCurrentRouteStartup;
if (!shouldExitApp && (!apiClient || !apiClient.isLoggedIn()) && !route.anonymous) {
if (!shouldExitApp && (!apiClient?.isLoggedIn()) && !route.anonymous) {
console.debug('[appRouter] route does not allow anonymous access: redirecting to login');
this.#beginConnectionWizard();
return;
@ -416,7 +417,7 @@ class AppRouter {
return;
}
if (apiClient && apiClient.isLoggedIn()) {
if (apiClient?.isLoggedIn()) {
console.debug('[appRouter] user is authenticated');
if (route.roles) {

6
src/components/shortcuts.js
View file

@ -33,7 +33,7 @@ function playAllFromHere(card, serverId, queue) {
}
const itemsContainer = dom.parentWithClass(card, 'itemsContainer');
if (itemsContainer && itemsContainer.fetchData) {
if (itemsContainer?.fetchData) {
const queryOptions = queue ? { StartIndex: startIndex } : {};
return itemsContainer.fetchData(queryOptions).then(result => {
@ -270,8 +270,8 @@ function executeAction(card, target, action) {
}
function addToPlaylist(item) {
import('./playlisteditor/playlisteditor').then(({ default: playlistEditor }) => {
new playlistEditor().show({
import('./playlisteditor/playlisteditor').then(({ default: PlaylistEditor }) => {
new PlaylistEditor().show({
items: [item.Id],
serverId: item.ServerId

6
src/components/slideshow/slideshow.js
View file

@ -41,7 +41,7 @@ function getImageUrl(item, options, apiClient) {
return apiClient.getScaledImageUrl(item, options);
}
if (item.ImageTags && item.ImageTags[options.type]) {
if (item.ImageTags?.[options.type]) {
options.tag = item.ImageTags[options.type];
return apiClient.getScaledImageUrl(item.Id, options);
}
@ -70,7 +70,7 @@ function getBackdropImageUrl(item, options, apiClient) {
options.quality = 100;
}
if (item.BackdropImageTags && item.BackdropImageTags.length) {
if (item.BackdropImageTags?.length) {
options.tag = item.BackdropImageTags[0];
return apiClient.getScaledImageUrl(item.Id, options);
}
@ -87,7 +87,7 @@ function getImgUrl(item, user) {
const apiClient = ServerConnections.getApiClient(item.ServerId);
const imageOptions = {};
if (item.BackdropImageTags && item.BackdropImageTags.length) {
if (item.BackdropImageTags?.length) {
return getBackdropImageUrl(item, imageOptions, apiClient);
} else {
if (item.MediaType === 'Photo' && user && user.Policy.EnableContentDownloading) {

6
src/components/tabbedview/tabbedview.js
View file

@ -65,7 +65,7 @@ class TabbedView {
const previousIndex = e.detail.previousIndex;
const previousTabController = previousIndex == null ? null : self.tabControllers[previousIndex];
if (previousTabController && previousTabController.onPause) {
if (previousTabController?.onPause) {
previousTabController.onPause();
}
@ -93,7 +93,7 @@ class TabbedView {
if (!currentTabController) {
mainTabsManager.selectedTabIndex(this.initialTabIndex);
} else if (currentTabController && currentTabController.onResume) {
} else if (currentTabController?.onResume) {
currentTabController.onResume({});
}
}
@ -101,7 +101,7 @@ class TabbedView {
onPause() {
const currentTabController = this.currentTabController;
if (currentTabController && currentTabController.onPause) {
if (currentTabController?.onPause) {
currentTabController.onPause();
}
}

2
src/components/themeMediaPlayer.js
View file

@ -86,7 +86,7 @@ document.addEventListener('viewshow', function (e) {
const state = e.detail.state || {};
const item = state.item;
if (item && item.ServerId) {
if (item?.ServerId) {
loadThemeMedia(item);
return;
}

4
src/components/tunerPicker.js
View file

@ -120,7 +120,7 @@ function discoverDevices(view) {
});
}
function tunerPicker() {
function TunerPicker() {
this.show = function () {
const dialogOptions = {
removeOnClose: true,
@ -182,4 +182,4 @@ function tunerPicker() {
let currentDevices = [];
export default tunerPicker;
export default TunerPicker;

2
src/components/viewManager/ViewManagerPage.tsx
View file

@ -47,7 +47,7 @@ const ViewManagerPage: FunctionComponent<ViewManagerPageProps> = ({
viewManager.tryRestoreView(viewOptions)
.catch(async (result?: RestoreViewFailResponse) => {
if (!result || !result.cancelled) {
if (!result?.cancelled) {
const [ controllerFactory, viewHtml ] = await Promise.all([
import(/* webpackChunkName: "[request]" */ `../../controllers/${controller}`),
import(/* webpackChunkName: "[request]" */ `../../controllers/${view}`)

1
src/components/viewManager/viewManager.js
View file

@ -21,6 +21,7 @@ viewContainer.setOnBeforeChange(function (newView, isRestored, options) {
newView.initComplete = true;
if (typeof options.controllerFactory === 'function') {
// eslint-disable-next-line new-cap
new options.controllerFactory(newView, eventDetail.detail.params);
} else if (options.controllerFactory && typeof options.controllerFactory.default === 'function') {
new options.controllerFactory.default(newView, eventDetail.detail.params);

4
src/controllers/dashboard/dashboard.html
View file

@ -44,7 +44,7 @@
<div class="dashboardColumn dashboardColumn-2-40 dashboardColumn-3-27">
<div class="dashboardSection">
<a is="emby-linkbutton" href="#/serveractivity.html?useractivity=true" class="button-flat sectionTitleTextButton">
<a is="emby-linkbutton" href="#/dashboard/activity?useractivity=true" class="button-flat sectionTitleTextButton">
<h3>${HeaderActivity}</h3>
<span class="material-icons chevron_right" aria-hidden="true"></span>
</a>
@ -61,7 +61,7 @@
</div>
<div class="dashboardSection serverActivitySection hide activityContainer">
<a is="emby-linkbutton" href="#/serveractivity.html?useractivity=false" class="button-flat sectionTitleTextButton">
<a is="emby-linkbutton" href="#/dashboard/activity?useractivity=false" class="button-flat sectionTitleTextButton">
<h3>${Alerts}</h3>
<span class="material-icons chevron_right" aria-hidden="true"></span>
</a>

28
src/controllers/dashboard/dashboard.js
View file

@ -47,7 +47,7 @@ function showPlaybackInfo(btn, session) {
text.push(globalize.translate('MediaIsBeingConverted'));
text.push(DashboardPage.getSessionNowPlayingStreamInfo(session));
if (session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length) {
if (session.TranscodingInfo?.TranscodeReasons?.length) {
text.push('<br/>');
text.push(globalize.translate('LabelReasonForTranscoding'));
session.TranscodingInfo.TranscodeReasons.forEach(function (transcodeReason) {
@ -90,7 +90,7 @@ function showOptionsMenu(btn, session) {
});
}
if (session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length) {
if (session.TranscodingInfo?.TranscodeReasons?.length) {
menuItems.push({
name: globalize.translate('ViewPlaybackInfo'),
id: 'transcodinginfo'
@ -402,7 +402,7 @@ window.DashboardPage = {
} else if (displayPlayMethod === 'DirectStream') {
html += globalize.translate('DirectStreaming');
} else if (displayPlayMethod === 'Transcode') {
if (session.TranscodingInfo && session.TranscodingInfo.Framerate) {
if (session.TranscodingInfo?.Framerate) {
html += `${globalize.translate('Framerate')}: ${session.TranscodingInfo.Framerate}fps`;
}
@ -481,7 +481,7 @@ window.DashboardPage = {
let topText = escapeHtml(itemHelper.getDisplayName(nowPlayingItem));
let bottomText = '';
if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) {
if (nowPlayingItem.Artists?.length) {
bottomText = topText;
topText = escapeHtml(nowPlayingItem.Artists[0]);
} else {
@ -493,7 +493,7 @@ window.DashboardPage = {
}
}
if (nowPlayingItem.ImageTags && nowPlayingItem.ImageTags.Logo) {
if (nowPlayingItem.ImageTags?.Logo) {
imgUrl = ApiClient.getScaledImageUrl(nowPlayingItem.Id, {
tag: nowPlayingItem.ImageTags.Logo,
maxHeight: 24,
@ -571,7 +571,7 @@ window.DashboardPage = {
const btnSessionPlayPauseIcon = btnSessionPlayPause.querySelector('.material-icons');
btnSessionPlayPauseIcon.classList.remove('play_arrow', 'pause');
btnSessionPlayPauseIcon.classList.add(session.PlayState && session.PlayState.IsPaused ? 'play_arrow' : 'pause');
btnSessionPlayPauseIcon.classList.add(session.PlayState?.IsPaused ? 'play_arrow' : 'pause');
row.querySelector('.sessionNowPlayingTime').innerText = DashboardPage.getSessionNowPlayingTime(session);
row.querySelector('.sessionUserName').innerHTML = DashboardPage.getUsersHtml(session);
@ -620,7 +620,7 @@ window.DashboardPage = {
getNowPlayingImageUrl: function (item) {
/* Screen width is multiplied by 0.2, as the there is currently no way to get the width of
elements that aren't created yet. */
if (item && item.BackdropImageTags && item.BackdropImageTags.length) {
if (item?.BackdropImageTags?.length) {
return ApiClient.getScaledImageUrl(item.Id, {
maxWidth: Math.round(dom.getScreenWidth() * 0.20),
type: 'Backdrop',
@ -628,7 +628,7 @@ window.DashboardPage = {
});
}
if (item && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
if (item?.ParentBackdropImageTags?.length) {
return ApiClient.getScaledImageUrl(item.ParentBackdropItemId, {
maxWidth: Math.round(dom.getScreenWidth() * 0.20),
type: 'Backdrop',
@ -636,7 +636,7 @@ window.DashboardPage = {
});
}
if (item && item.BackdropImageTag) {
if (item?.BackdropImageTag) {
return ApiClient.getScaledImageUrl(item.BackdropItemId, {
maxWidth: Math.round(dom.getScreenWidth() * 0.20),
type: 'Backdrop',
@ -644,7 +644,7 @@ window.DashboardPage = {
});
}
const imageTags = (item || {}).ImageTags || {};
const imageTags = item?.ImageTags || {};
if (item && imageTags.Thumb) {
return ApiClient.getScaledImageUrl(item.Id, {
@ -654,7 +654,7 @@ window.DashboardPage = {
});
}
if (item && item.ParentThumbImageTag) {
if (item?.ParentThumbImageTag) {
return ApiClient.getScaledImageUrl(item.ParentThumbItemId, {
maxWidth: Math.round(dom.getScreenWidth() * 0.20),
type: 'Thumb',
@ -662,7 +662,7 @@ window.DashboardPage = {
});
}
if (item && item.ThumbImageTag) {
if (item?.ThumbImageTag) {
return ApiClient.getScaledImageUrl(item.ThumbItemId, {
maxWidth: Math.round(dom.getScreenWidth() * 0.20),
type: 'Thumb',
@ -678,7 +678,7 @@ window.DashboardPage = {
});
}
if (item && item.PrimaryImageTag) {
if (item?.PrimaryImageTag) {
return ApiClient.getScaledImageUrl(item.PrimaryImageItemId, {
maxWidth: Math.round(dom.getScreenWidth() * 0.20),
type: 'Primary',
@ -686,7 +686,7 @@ window.DashboardPage = {
});
}
if (item && item.AlbumPrimaryImageTag) {
if (item?.AlbumPrimaryImageTag) {
return ApiClient.getScaledImageUrl(item.AlbumId, {
maxWidth: Math.round(dom.getScreenWidth() * 0.20),
type: 'Primary',

Some files were not shown because too many files have changed in this diff Show more