Merge branch 'master' into enable-airplay-audioplayer

2025-03-30 19:56:21 +00:00 · 2023-07-20 18:10:13 +03:00 · 2023-07-20 18:10:13 +03:00 · e0d4aa6c77
commit e0d4aa6c77
parent 7a2d5c71e0 be419c3b1f
227 changed files with 5818 additions and 2022 deletions
--- a/src/components/UserAvatar.tsx
+++ b/src/components/UserAvatar.tsx
@ -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;
--- a/src/components/appFooter/appFooter.js
+++ b/src/components/appFooter/appFooter.js
@ -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;
+    destroy() {
+        this.element = null;
    }
 }

-export default new appFooter();
+export default new AppFooter();
--- a/src/components/backdrop/backdrop.js
+++ b/src/components/backdrop/backdrop.js
@ -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);
                }
            };
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@ -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 + '"') : '';
--- a/src/components/cardbuilder/chaptercardbuilder.js
+++ b/src/components/cardbuilder/chaptercardbuilder.js
@ -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] || {};
--- a/src/components/channelMapper/channelMapper.js
+++ b/src/components/channelMapper/channelMapper.js
@ -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();
--- a/src/components/common/GenresItemsContainer.tsx
+++ b/src/components/common/GenresItemsContainer.tsx
@ -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;
--- a/src/components/common/RecommendationContainer.tsx
+++ b/src/components/common/RecommendationContainer.tsx
@ -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;
--- a/src/components/common/SectionContainer.tsx
+++ b/src/components/common/SectionContainer.tsx
@ -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;
--- a/src/components/common/ViewItemsContainer.tsx
+++ b/src/components/common/ViewItemsContainer.tsx
@ -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;
--- a/src/components/dashboard/users/UserPasswordForm.tsx
+++ b/src/components/dashboard/users/UserPasswordForm.tsx
@ -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>
    );
 };
--- a/src/components/guide/guide.js
+++ b/src/components/guide/guide.js
@ -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);
--- a/src/components/homesections/homesections.js
+++ b/src/components/homesections/homesections.js
@ -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');
--- a/src/components/htmlMediaHelper.js
+++ b/src/components/htmlMediaHelper.js
@ -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
    }

--- a/src/components/imageOptionsEditor/imageOptionsEditor.js
+++ b/src/components/imageOptionsEditor/imageOptionsEditor.js
@ -80,32 +80,28 @@ function saveValues(context, options) {
    });
 }

-function showEditor(itemType, options, availableOptions) {
-    const dlg = dialogHelper.createDialog({
-        size: 'small',
-        removeOnClose: true,
-        scrollY: false
-    });
-    dlg.classList.add('formDialog');
-    dlg.innerHTML = globalize.translateHtml(template);
-    dlg.addEventListener('close', function () {
-        saveValues(dlg, options);
-    });
-    loadValues(dlg, itemType, options, availableOptions);
-    dialogHelper.open(dlg).then(() => {
-        return;
-    }).catch(() => {
-        return;
-    });
-    dlg.querySelector('.btnCancel').addEventListener('click', function () {
-        dialogHelper.close(dlg);
-    });
-}
-
-export class editor {
-    constructor() {
-        this.show = showEditor;
+class ImageOptionsEditor {
+    show(itemType, options, availableOptions) {
+        const dlg = dialogHelper.createDialog({
+            size: 'small',
+            removeOnClose: true,
+            scrollY: false
+        });
+        dlg.classList.add('formDialog');
+        dlg.innerHTML = globalize.translateHtml(template);
+        dlg.addEventListener('close', function () {
+            saveValues(dlg, options);
+        });
+        loadValues(dlg, itemType, options, availableOptions);
+        dialogHelper.open(dlg).then(() => {
+            return;
+        }).catch(() => {
+            return;
+        });
+        dlg.querySelector('.btnCancel').addEventListener('click', function () {
+            dialogHelper.close(dlg);
+        });
    }
 }

-export default editor;
+export default ImageOptionsEditor;
--- a/src/components/imageOptionsEditor/imageOptionsEditor.template.html
+++ b/src/components/imageOptionsEditor/imageOptionsEditor.template.html
@ -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>
--- a/src/components/imageUploader/imageUploader.js
+++ b/src/components/imageUploader/imageUploader.js
@ -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;
--- a/src/components/images/imageLoader.js
+++ b/src/components/images/imageLoader.js
@ -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);
            }
--- a/src/components/indicators/indicators.js
+++ b/src/components/indicators/indicators.js
@ -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>';
--- a/src/components/itemContextMenu.js
+++ b/src/components/itemContextMenu.js
@ -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
--- a/src/components/itemHelper.js
+++ b/src/components/itemHelper.js
@ -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) {
--- a/src/components/itemMediaInfo/itemMediaInfo.js
+++ b/src/components/itemMediaInfo/itemMediaInfo.js
@ -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) {
--- a/src/components/itemidentifier/itemidentifier.js
+++ b/src/components/itemidentifier/itemidentifier.js
@ -79,7 +79,7 @@ function searchForIdentificationResults(page) {
        SearchInfo: lookupInfo
    };

-    if (currentItem && currentItem.Id) {
+    if (currentItem?.Id) {
        lookupInfo.ItemId = currentItem.Id;
    } else {
        lookupInfo.IncludeDisabledProviders = true;
--- a/src/components/itemsrefresher.js
+++ b/src/components/itemsrefresher.js
@ -134,7 +134,7 @@ class ItemsRefresher {
            }
        }

-        if (this.needsRefresh || (options && options.refresh)) {
+        if (this.needsRefresh || (options?.refresh)) {
            return this.refreshItems();
        }

--- a/src/components/libraryoptionseditor/libraryoptionseditor.js
+++ b/src/components/libraryoptionseditor/libraryoptionseditor.js
@ -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);

--- a/src/components/listview/listview.js
+++ b/src/components/listview/listview.js
@ -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}"`) : '';
--- a/src/components/mediaLibraryCreator/mediaLibraryCreator.js
+++ b/src/components/mediaLibraryCreator/mediaLibraryCreator.js
@ -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;
--- a/src/components/mediaLibraryEditor/mediaLibraryEditor.js
+++ b/src/components/mediaLibraryEditor/mediaLibraryEditor.js
@ -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;
--- a/src/components/metadataEditor/metadataEditor.js
+++ b/src/components/metadataEditor/metadataEditor.js
@ -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 || '';
--- a/src/components/multiSelect/multiSelect.js
+++ b/src/components/multiSelect/multiSelect.js
@ -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();
--- a/src/components/nowPlayingBar/nowPlayingBar.js
+++ b/src/components/nowPlayingBar/nowPlayingBar.js
@ -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);
    }
--- a/src/components/playback/mediasession.js
+++ b/src/components/playback/mediasession.js
@ -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);
--- a/src/components/playback/nowplayinghelper.js
+++ b/src/components/playback/nowplayinghelper.js
@ -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;
--- a/src/components/playback/playbackmanager.js
+++ b/src/components/playback/playbackmanager.js
@ -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);
        }
    }
--- a/src/components/playback/playbackorientation.js
+++ b/src/components/playback/playbackorientation.js
@ -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 {
--- a/src/components/playback/playersettingsmenu.js
+++ b/src/components/playback/playersettingsmenu.js
@ -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);
    }

--- a/src/components/playback/playmethodhelper.js
+++ b/src/components/playback/playmethodhelper.js
@ -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';
--- a/src/components/playerstats/playerstats.js
+++ b/src/components/playerstats/playerstats.js
@ -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/>')
--- a/src/components/playlisteditor/playlisteditor.js
+++ b/src/components/playlisteditor/playlisteditor.js
@ -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;
--- a/src/components/pluginManager.js
+++ b/src/components/pluginManager.js
@ -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,
--- a/src/components/recordingcreator/recordingcreator.js
+++ b/src/components/recordingcreator/recordingcreator.js
@ -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
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@ -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 '--:--';
            }

--- a/src/components/router/appRouter.js
+++ b/src/components/router/appRouter.js
@ -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) {
--- a/src/components/shortcuts.js
+++ b/src/components/shortcuts.js
@ -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

--- a/src/components/slideshow/slideshow.js
+++ b/src/components/slideshow/slideshow.js
@ -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) {
--- a/src/components/tabbedview/tabbedview.js
+++ b/src/components/tabbedview/tabbedview.js
@ -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();
        }
    }
--- a/src/components/themeMediaPlayer.js
+++ b/src/components/themeMediaPlayer.js
@ -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;
    }
--- a/src/components/tunerPicker.js
+++ b/src/components/tunerPicker.js
@ -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;
--- a/src/components/viewManager/ViewManagerPage.tsx
+++ b/src/components/viewManager/ViewManagerPage.tsx
@ -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}`)
--- a/src/components/viewManager/viewManager.js
+++ b/src/components/viewManager/viewManager.js
@ -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);