Add constants for app features

src/apps/experimental/features/preferences/components/DisplayPreferences.tsx

@@ -11,6 +11,7 @@ import Typography from '@mui/material/Typography';
 import React, { Fragment } from 'react';
 
 import { appHost } from 'components/apphost';
+import { AppFeature } from 'constants/appFeature';
 import { useApi } from 'hooks/useApi';
 import { useThemes } from 'hooks/useThemes';
 import globalize from 'lib/globalize';
@@ -32,7 +33,7 @@ export function DisplayPreferences({ onChange, values }: Readonly<DisplayPrefere
         <Stack spacing={3}>
             <Typography variant='h2'>{globalize.translate('Display')}</Typography>
 
-            { appHost.supports('displaymode') && (
+            { appHost.supports(AppFeature.DisplayMode) && (
                 <FormControl fullWidth>
                     <InputLabel id='display-settings-layout-label'>{globalize.translate('LabelDisplayMode')}</InputLabel>
                     <Select
@@ -124,7 +125,7 @@ export function DisplayPreferences({ onChange, values }: Readonly<DisplayPrefere
                 </FormControl>
             ) }
 
-            { screensavers.length > 0 && appHost.supports('screensaver') && (
+            { screensavers.length > 0 && appHost.supports(AppFeature.Screensaver) && (
                 <Fragment>
                     <FormControl fullWidth>
                         <InputLabel id='display-settings-screensaver-label'>{globalize.translate('LabelScreensaver')}</InputLabel>

src/apps/experimental/features/preferences/components/LocalizationPreferences.tsx

@@ -10,8 +10,9 @@ import React from 'react';
 
 import { DATE_LOCALE_OPTIONS, LANGUAGE_OPTIONS } from 'apps/experimental/features/preferences/constants/locales';
 import { appHost } from 'components/apphost';
-import datetime from 'scripts/datetime';
+import { AppFeature } from 'constants/appFeature';
 import globalize from 'lib/globalize';
+import datetime from 'scripts/datetime';
 
 import type { DisplaySettingsValues } from '../types/displaySettingsValues';
 
@@ -21,14 +22,14 @@ interface LocalizationPreferencesProps {
 }
 
 export function LocalizationPreferences({ onChange, values }: Readonly<LocalizationPreferencesProps>) {
-    if (!appHost.supports('displaylanguage') && !datetime.supportsLocalization()) {
+    if (!appHost.supports(AppFeature.DisplayLanguage) && !datetime.supportsLocalization()) {
         return null;
     }
     return (
         <Stack spacing={3}>
             <Typography variant='h2'>{globalize.translate('Localization')}</Typography>
 
-            { appHost.supports('displaylanguage') && (
+            { appHost.supports(AppFeature.DisplayLanguage) && (
                 <FormControl fullWidth>
                     <InputLabel id='display-settings-language-label'>{globalize.translate('LabelDisplayLanguage')}</InputLabel>
                     <Select
@@ -46,7 +47,7 @@ export function LocalizationPreferences({ onChange, values }: Readonly<Localizat
                     </Select>
                     <FormHelperText component={Stack} id='display-settings-language-description'>
                         <span>{globalize.translate('LabelDisplayLanguageHelp')}</span>
-                        { appHost.supports('externallinks') && (
+                        { appHost.supports(AppFeature.ExternalLinks) && (
                             <Link
                                 href='https://github.com/jellyfin/jellyfin'
                                 rel='noopener noreferrer'

src/apps/experimental/features/preferences/hooks/useDisplaySettings.ts

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from 'react';
 
 import { appHost } from 'components/apphost';
 import layoutManager from 'components/layoutManager';
+import { AppFeature } from 'constants/appFeature';
 import { useApi } from 'hooks/useApi';
 import themeManager from 'scripts/themeManager';
 import { currentSettings, UserSettings } from 'scripts/settings/userSettings';
@@ -120,7 +121,7 @@ async function saveDisplaySettings({
 }: SaveDisplaySettingsParams) {
     const user = await api.getUser(userId);
 
-    if (appHost.supports('displaylanguage')) {
+    if (appHost.supports(AppFeature.DisplayLanguage)) {
         userSettings.language(normalizeValue(newDisplaySettings.language));
     }
     userSettings.customCss(normalizeValue(newDisplaySettings.customCss));

src/apps/stable/routes/user/settings/index.tsx

@@ -6,6 +6,7 @@ import { appHost } from 'components/apphost';
 import layoutManager from 'components/layoutManager';
 import Loading from 'components/loading/LoadingComponent';
 import Page from 'components/Page';
+import { AppFeature } from 'constants/appFeature';
 import LinkButton from 'elements/emby-button/LinkButton';
 import { useApi } from 'hooks/useApi';
 import { useQuickConnectEnabled } from 'hooks/useQuickConnect';
@@ -185,7 +186,7 @@ const UserSettingsPage: FC = () => {
                             </div>
                         </LinkButton>
 
-                        {appHost.supports('clientsettings') && (
+                        {appHost.supports(AppFeature.ClientSettings) && (
                             <LinkButton
                                 onClick={shell.openClientSettings}
                                 className='clientSettings listItem-border'
@@ -290,7 +291,7 @@ const UserSettingsPage: FC = () => {
                                 {globalize.translate('HeaderUser')}
                             </h2>
 
-                            {appHost.supports('multiserver') && (
+                            {appHost.supports(AppFeature.MultiServer) && (
                                 <LinkButton
                                     onClick={Dashboard.selectServer}
                                     className='selectServer listItem-border'
@@ -330,7 +331,7 @@ const UserSettingsPage: FC = () => {
                                 </div>
                             </LinkButton>
 
-                            {appHost.supports('exitmenu') && (
+                            {appHost.supports(AppFeature.ExitMenu) && (
                                 <LinkButton
                                     onClick={appHost.exit}
                                     className='exitApp listItem-border'

src/apps/stable/routes/user/userprofile.tsx

@@ -12,6 +12,7 @@ import UserPasswordForm from '../../../../components/dashboard/users/UserPasswor
 import loading from '../../../../components/loading/loading';
 import toast from '../../../../components/toast/toast';
 import Page from '../../../../components/Page';
+import { AppFeature } from 'constants/appFeature';
 
 const UserProfile: FunctionComponent = () => {
     const [ searchParams ] = useSearchParams();
@@ -61,7 +62,7 @@ const UserProfile: FunctionComponent = () => {
                 if (user.PrimaryImageTag) {
                     (page.querySelector('#btnAddImage') as HTMLButtonElement).classList.add('hide');
                     (page.querySelector('#btnDeleteImage') as HTMLButtonElement).classList.remove('hide');
-                } else if (appHost.supports('fileinput') && (loggedInUser?.Policy?.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
+                } else if (appHost.supports(AppFeature.FileInput) && (loggedInUser?.Policy?.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
                     (page.querySelector('#btnDeleteImage') as HTMLButtonElement).classList.add('hide');
                     (page.querySelector('#btnAddImage') as HTMLButtonElement).classList.remove('hide');
                 }