Add constants for app features

src/components/ConnectionErrorPage.tsx

@@ -2,6 +2,7 @@ import React, { FC, useEffect, useState } from 'react';
 
 import { appHost } from 'components/apphost';
 import Page from 'components/Page';
+import { AppFeature } from 'constants/appFeature';
 import LinkButton from 'elements/emby-button/LinkButton';
 import globalize from 'lib/globalize';
 import { ConnectionState } from 'lib/jellyfin-apiclient';
@@ -50,7 +51,7 @@ const ConnectionErrorPage: FC<ConnectionErrorPageProps> = ({
                 {message && (
                     <p>{message}</p>
                 )}
-                {appHost.supports('multiserver') && (
+                {appHost.supports(AppFeature.MultiServer) && (
                     <LinkButton
                         className='raised'
                         href='/selectserver'

src/components/apphost.js

@@ -5,6 +5,7 @@ import * as htmlMediaHelper from '../components/htmlMediaHelper';
 import * as webSettings from '../scripts/settings/webSettings';
 import globalize from '../lib/globalize';
 import profileBuilder from '../scripts/browserDeviceProfile';
+import { AppFeature } from 'constants/appFeature';
 
 const appName = 'Jellyfin Web';
 
@@ -169,14 +170,6 @@ function getDeviceName() {
     return deviceName;
 }
 
-function supportsVoiceInput() {
-    if (!browser.tv) {
-        return window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.oSpeechRecognition || window.msSpeechRecognition;
-    }
-
-    return false;
-}
-
 function supportsFullscreen() {
     if (browser.tv) {
         return false;
@@ -235,77 +228,65 @@ const supportedFeatures = function () {
     const features = [];
 
     if (navigator.share) {
-        features.push('sharing');
+        features.push(AppFeature.Sharing);
     }
 
     if (!browser.edgeUwp && !browser.tv && !browser.xboxOne && !browser.ps4) {
-        features.push('filedownload');
+        features.push(AppFeature.FileDownload);
     }
 
     if (browser.operaTv || browser.tizen || browser.orsay || browser.web0s) {
-        features.push('exit');
-    } else {
-        features.push('plugins');
+        features.push(AppFeature.Exit);
     }
 
     if (!browser.operaTv && !browser.tizen && !browser.orsay && !browser.web0s && !browser.ps4) {
-        features.push('externallinks');
-        features.push('externalpremium');
-    }
-
-    if (!browser.operaTv) {
-        features.push('externallinkdisplay');
-    }
-
-    if (supportsVoiceInput()) {
-        features.push('voiceinput');
+        features.push(AppFeature.ExternalLinks);
     }
 
     if (supportsHtmlMediaAutoplay()) {
-        features.push('htmlaudioautoplay');
-        features.push('htmlvideoautoplay');
+        features.push(AppFeature.HtmlAudioAutoplay);
+        features.push(AppFeature.HtmlVideoAutoplay);
     }
 
     if (supportsFullscreen()) {
-        features.push('fullscreenchange');
+        features.push(AppFeature.Fullscreen);
     }
 
     if (browser.tv || browser.xboxOne || browser.ps4 || browser.mobile || browser.ipad) {
-        features.push('physicalvolumecontrol');
+        features.push(AppFeature.PhysicalVolumeControl);
     }
 
     if (!browser.tv && !browser.xboxOne && !browser.ps4) {
-        features.push('remotecontrol');
+        features.push(AppFeature.RemoteControl);
     }
 
     if (!browser.operaTv && !browser.tizen && !browser.orsay && !browser.web0s && !browser.edgeUwp) {
-        features.push('remotevideo');
+        features.push(AppFeature.RemoteVideo);
     }
 
-    features.push('displaylanguage');
-    features.push('otherapppromotions');
-    features.push('displaymode');
-    features.push('targetblank');
-    features.push('screensaver');
+    features.push(AppFeature.DisplayLanguage);
+    features.push(AppFeature.DisplayMode);
+    features.push(AppFeature.TargetBlank);
+    features.push(AppFeature.Screensaver);
 
     webSettings.getMultiServer().then(enabled => {
-        if (enabled) features.push('multiserver');
+        if (enabled) features.push(AppFeature.MultiServer);
     });
 
     if (!browser.orsay && (browser.firefox || browser.ps4 || browser.edge || supportsCue())) {
-        features.push('subtitleappearancesettings');
+        features.push(AppFeature.SubtitleAppearance);
     }
 
     if (!browser.orsay) {
-        features.push('subtitleburnsettings');
+        features.push(AppFeature.SubtitleBurnIn);
     }
 
     if (!browser.tv && !browser.ps4 && !browser.xboxOne) {
-        features.push('fileinput');
+        features.push(AppFeature.FileInput);
     }
 
     if (browser.chrome || browser.edgeChromium) {
-        features.push('chromecast');
+        features.push(AppFeature.Chromecast);
     }
 
     return features;

src/components/displaySettings/displaySettings.js

@@ -1,4 +1,6 @@
 import escapeHtml from 'escape-html';
+
+import { AppFeature } from 'constants/appFeature';
 import browser from '../../scripts/browser';
 import layoutManager from '../layoutManager';
 import { pluginManager } from '../pluginManager';
@@ -68,19 +70,19 @@ function showOrHideMissingEpisodesField(context) {
 }
 
 function loadForm(context, user, userSettings) {
-    if (appHost.supports('displaylanguage')) {
+    if (appHost.supports(AppFeature.DisplayLanguage)) {
         context.querySelector('.languageSection').classList.remove('hide');
     } else {
         context.querySelector('.languageSection').classList.add('hide');
     }
 
-    if (appHost.supports('displaymode')) {
+    if (appHost.supports(AppFeature.DisplayMode)) {
         context.querySelector('.fldDisplayMode').classList.remove('hide');
     } else {
         context.querySelector('.fldDisplayMode').classList.add('hide');
     }
 
-    if (appHost.supports('externallinks')) {
+    if (appHost.supports(AppFeature.ExternalLinks)) {
         context.querySelector('.learnHowToContributeContainer').classList.remove('hide');
     } else {
         context.querySelector('.learnHowToContributeContainer').classList.add('hide');
@@ -88,7 +90,7 @@ function loadForm(context, user, userSettings) {
 
     context.querySelector('.selectDashboardThemeContainer').classList.toggle('hide', !user.Policy.IsAdministrator);
 
-    if (appHost.supports('screensaver')) {
+    if (appHost.supports(AppFeature.Screensaver)) {
         context.querySelector('.selectScreensaverContainer').classList.remove('hide');
         context.querySelector('.txtBackdropScreensaverIntervalContainer').classList.remove('hide');
         context.querySelector('.txtScreensaverTimeContainer').classList.remove('hide');
@@ -143,7 +145,7 @@ function loadForm(context, user, userSettings) {
 function saveUser(context, user, userSettingsInstance, apiClient) {
     user.Configuration.DisplayMissingEpisodes = context.querySelector('.chkDisplayMissingEpisodes').checked;
 
-    if (appHost.supports('displaylanguage')) {
+    if (appHost.supports(AppFeature.DisplayLanguage)) {
         userSettingsInstance.language(context.querySelector('#selectLanguage').value);
     }
 

src/components/imageDownloader/imageDownloader.js

@@ -1,3 +1,4 @@
+import { AppFeature } from 'constants/appFeature';
 import dom from '../../scripts/dom';
 import loading from '../loading/loading';
 import { appHost } from '../apphost';
@@ -205,7 +206,7 @@ function getRemoteImageHtml(image, imageType) {
     html += '<div class="cardPadder-' + shape + '"></div>';
     html += '<div class="cardContent">';
 
-    if (layoutManager.tv || !appHost.supports('externallinks')) {
+    if (layoutManager.tv || !appHost.supports(AppFeature.ExternalLinks)) {
         html += '<div class="cardImageContainer lazy" data-src="' + image.Url + '" style="background-position:center center;background-size:contain;"></div>';
     } else {
         html += '<a is="emby-linkbutton" target="_blank" href="' + image.Url + '" class="button-link cardImageContainer lazy" data-src="' + image.Url + '" style="background-position:center center;background-size:contain"></a>';

src/components/imageeditor/imageeditor.js

@@ -1,3 +1,4 @@
+import { AppFeature } from 'constants/appFeature';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import loading from '../loading/loading';
 import dom from '../../scripts/dom';
@@ -339,7 +340,7 @@ function showActionSheet(context, imageCard) {
 
 function initEditor(context, options) {
     const uploadButtons = context.querySelectorAll('.btnOpenUploadMenu');
-    const isFileInputSupported = appHost.supports('fileinput');
+    const isFileInputSupported = appHost.supports(AppFeature.FileInput);
     for (let i = 0, length = uploadButtons.length; i < length; i++) {
         if (isFileInputSupported) {
             uploadButtons[i].classList.remove('hide');

src/components/itemContextMenu.js

@@ -11,6 +11,7 @@ import { playbackManager } from './playback/playbackmanager';
 import toast from './toast/toast';
 import * as userSettings from '../scripts/settings/userSettings';
 import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
+import { AppFeature } from 'constants/appFeature';
 
 function getDeleteLabel(type) {
     switch (type) {
@@ -169,7 +170,7 @@ export async function getCommands(options) {
         });
     }
 
-    if (appHost.supports('filedownload')) {
+    if (appHost.supports(AppFeature.FileDownload)) {
         // CanDownload should probably be updated to return true for these items?
         if (user.Policy.EnableContentDownloading && (item.Type === 'Season' || item.Type == 'Series')) {
             commands.push({

src/components/itemHelper.js

@@ -6,6 +6,7 @@ import { MediaType } from '@jellyfin/sdk/lib/generated-client/models/media-type'
 import { getPlaylistsApi } from '@jellyfin/sdk/lib/utils/api/playlists-api';
 
 import { appHost } from './apphost';
+import { AppFeature } from 'constants/appFeature';
 import globalize from 'lib/globalize';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
 import { toApi } from 'utils/jellyfin-apiclient/compat';
@@ -238,7 +239,7 @@ export function canShare (item, user) {
     if (isLocalItem(item)) {
         return false;
     }
-    return user.Policy.EnablePublicSharing && appHost.supports('sharing');
+    return user.Policy.EnablePublicSharing && appHost.supports(AppFeature.Sharing);
 }
 
 export function enableDateAddedDisplay (item) {

src/components/multiSelect/multiSelect.js

@@ -1,3 +1,4 @@
+import { AppFeature } from 'constants/appFeature';
 import browser from '../../scripts/browser';
 import { appHost } from '../apphost';
 import loading from '../loading/loading';
@@ -198,7 +199,7 @@ function showMenuForSelectedItems(e) {
                 });
             }
 
-            if (user.Policy.EnableContentDownloading && appHost.supports('filedownload')) {
+            if (user.Policy.EnableContentDownloading && appHost.supports(AppFeature.FileDownload)) {
                 // Disabled because there is no callback for this item
             }
 

src/components/nowPlayingBar/nowPlayingBar.js

@@ -1,6 +1,7 @@
 import { getImageUrl } from 'apps/stable/features/playback/utils/image';
 import { getItemTextLines } from 'apps/stable/features/playback/utils/itemText';
 import { appRouter, isLyricsPage } from 'components/router/appRouter';
+import { AppFeature } from 'constants/appFeature';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
 
 import datetime from '../../scripts/datetime';
@@ -244,7 +245,7 @@ function bindEvents(elem) {
 
     toggleRepeatButtonIcon = toggleRepeatButton.querySelector('.material-icons');
 
-    volumeSliderContainer.classList.toggle('hide', appHost.supports('physicalvolumecontrol'));
+    volumeSliderContainer.classList.toggle('hide', appHost.supports(AppFeature.PhysicalVolumeControl));
 
     volumeSlider.addEventListener('input', (e) => {
         if (currentPlayer) {
@@ -441,7 +442,7 @@ function updatePlayerVolumeState(isMuted, volumeLevel) {
         showVolumeSlider = false;
     }
 
-    if (currentPlayer.isLocalPlayer && appHost.supports('physicalvolumecontrol')) {
+    if (currentPlayer.isLocalPlayer && appHost.supports(AppFeature.PhysicalVolumeControl)) {
         showMuteButton = false;
         showVolumeSlider = false;
     }

src/components/playback/playbackmanager.js

@@ -24,6 +24,7 @@ import { getItemBackdropImageUrl } from '../../utils/jellyfin-apiclient/backdrop
 import { PlayerEvent } from 'apps/stable/features/playback/constants/playerEvent';
 import { bindMediaSegmentManager } from 'apps/stable/features/playback/utils/mediaSegmentManager';
 import { bindMediaSessionSubscriber } from 'apps/stable/features/playback/utils/mediaSessionSubscriber';
+import { AppFeature } from 'constants/appFeature';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
 import { MediaError } from 'types/mediaError';
 import { getMediaError } from 'utils/mediaError';
@@ -41,7 +42,7 @@ function enableLocalPlaylistManagement(player) {
 }
 
 function supportsPhysicalVolumeControl(player) {
-    return player.isLocalPlayer && appHost.supports('physicalvolumecontrol');
+    return player.isLocalPlayer && appHost.supports(AppFeature.PhysicalVolumeControl);
 }
 
 function bindToFullscreenChange(player) {
@@ -317,7 +318,7 @@ function getAudioStreamUrl(item, transcodingProfile, directPlayContainers, apiCl
         PlaySessionId: startingPlaySession,
         StartTimeTicks: startPosition || 0,
         EnableRedirection: true,
-        EnableRemoteMedia: appHost.supports('remoteaudio'),
+        EnableRemoteMedia: appHost.supports(AppFeature.RemoteAudio),
         EnableAudioVbrEncoding: transcodingProfile.EnableAudioVbrEncoding
     });
 }
@@ -598,7 +599,7 @@ function supportsDirectPlay(apiClient, item, mediaSource) {
     const isFolderRip = mediaSource.VideoType === 'BluRay' || mediaSource.VideoType === 'Dvd' || mediaSource.VideoType === 'HdDvd';
 
     if (mediaSource.SupportsDirectPlay || isFolderRip) {
-        if (mediaSource.IsRemote && !appHost.supports('remotevideo')) {
+        if (mediaSource.IsRemote && !appHost.supports(AppFeature.RemoteVideo)) {
             return Promise.resolve(false);
         }
 
@@ -3689,7 +3690,7 @@ export class PlaybackManager {
             return streamInfo ? streamInfo.playbackStartTimeTicks : null;
         };
 
-        if (appHost.supports('remotecontrol')) {
+        if (appHost.supports(AppFeature.RemoteControl)) {
             import('../../scripts/serverNotifications').then(({ default: serverNotifications }) => {
                 Events.on(serverNotifications, 'ServerShuttingDown', self.setDefaultPlayerActive.bind(self));
                 Events.on(serverNotifications, 'ServerRestarting', self.setDefaultPlayerActive.bind(self));
@@ -4060,7 +4061,7 @@ export class PlaybackManager {
                 'PlayTrailers'
             ];
 
-            if (appHost.supports('fullscreenchange')) {
+            if (appHost.supports(AppFeature.Fullscreen)) {
                 list.push('ToggleFullscreen');
             }
 

src/components/playback/playerSelectionMenu.js

@@ -1,3 +1,4 @@
+import { AppFeature } from 'constants/appFeature';
 import Events from '../../utils/events.ts';
 import browser from '../../scripts/browser';
 import loading from '../loading/loading';
@@ -96,7 +97,7 @@ export function show(button) {
 
             // Unfortunately we can't allow the url to change or chromecast will throw a security error
             // Might be able to solve this in the future by moving the dialogs to hashbangs
-            if (!(!browser.chrome && !browser.edgeChromium || appHost.supports('castmenuhashchange'))) {
+            if (!(!browser.chrome && !browser.edgeChromium || appHost.supports(AppFeature.CastMenuHashChange))) {
                 menuOptions.enableHistory = false;
             }
 

src/components/playbackSettings/playbackSettings.js

@@ -3,6 +3,7 @@ import escapeHTML from 'escape-html';
 
 import { MediaSegmentAction } from 'apps/stable/features/playback/constants/mediaSegmentAction';
 import { getId, getMediaSegmentAction } from 'apps/stable/features/playback/utils/mediaSegmentSettings';
+import { AppFeature } from 'constants/appFeature';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
 
 import appSettings from '../../scripts/settings/appSettings';
@@ -147,7 +148,7 @@ function showHideQualityFields(context, user, apiClient) {
         context.querySelector('.videoQualitySection').classList.add('hide');
     }
 
-    if (appHost.supports('multiserver')) {
+    if (appHost.supports(AppFeature.MultiServer)) {
         context.querySelector('.fldVideoInNetworkQuality').classList.remove('hide');
         context.querySelector('.fldVideoInternetQuality').classList.remove('hide');
 
@@ -204,7 +205,7 @@ function loadForm(context, user, userSettings, systemInfo, apiClient) {
         context.querySelector('.chkEpisodeAutoPlay').checked = user.Configuration.EnableNextEpisodeAutoPlay || false;
     });
 
-    if (appHost.supports('externalplayerintent') && userId === loggedInUserId) {
+    if (appHost.supports(AppFeature.ExternalPlayerIntent) && userId === loggedInUserId) {
         context.querySelector('.fldExternalPlayer').classList.remove('hide');
     } else {
         context.querySelector('.fldExternalPlayer').classList.add('hide');
@@ -213,7 +214,7 @@ function loadForm(context, user, userSettings, systemInfo, apiClient) {
     if (userId === loggedInUserId && (user.Policy.EnableVideoPlaybackTranscoding || user.Policy.EnableAudioPlaybackTranscoding)) {
         context.querySelector('.qualitySections').classList.remove('hide');
 
-        if (appHost.supports('chromecast') && user.Policy.EnableVideoPlaybackTranscoding) {
+        if (appHost.supports(AppFeature.Chromecast) && user.Policy.EnableVideoPlaybackTranscoding) {
             context.querySelector('.fldChromecastQuality').classList.remove('hide');
         } else {
             context.querySelector('.fldChromecastQuality').classList.add('hide');

src/components/remotecontrol/remotecontrol.js

@@ -2,6 +2,7 @@ import escapeHtml from 'escape-html';
 
 import { getImageUrl } from 'apps/stable/features/playback/utils/image';
 import { getItemTextLines } from 'apps/stable/features/playback/utils/itemText';
+import { AppFeature } from 'constants/appFeature';
 
 import datetime from '../../scripts/datetime';
 import { clearBackdrop, setBackdrops } from '../backdrop/backdrop';
@@ -371,7 +372,7 @@ export default function () {
             showVolumeSlider = false;
         }
 
-        if (currentPlayer.isLocalPlayer && appHost.supports('physicalvolumecontrol')) {
+        if (currentPlayer.isLocalPlayer && appHost.supports(AppFeature.PhysicalVolumeControl)) {
             showMuteButton = false;
             showVolumeSlider = false;
         }

src/components/slideshow/slideshow.js

@@ -2,6 +2,7 @@
  * Image viewer component
  * @module components/slideshow/slideshow
  */
+import { AppFeature } from 'constants/appFeature';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
 import inputManager from '../../scripts/inputManager';
@@ -172,10 +173,10 @@ export default function (options) {
             if (actionButtonsOnTop) {
                 html += getIcon('play_arrow', 'btnSlideshowPause slideshowButton', true);
 
-                if (appHost.supports('filedownload') && slideshowOptions.user?.Policy.EnableContentDownloading) {
+                if (appHost.supports(AppFeature.FileDownload) && slideshowOptions.user?.Policy.EnableContentDownloading) {
                     html += getIcon('file_download', 'btnDownload slideshowButton', true);
                 }
-                if (appHost.supports('sharing')) {
+                if (appHost.supports(AppFeature.Sharing)) {
                     html += getIcon('share', 'btnShare slideshowButton', true);
                 }
                 if (screenfull.isEnabled) {
@@ -190,10 +191,10 @@ export default function (options) {
                 html += '<div class="slideshowBottomBar hide">';
 
                 html += getIcon('play_arrow', 'btnSlideshowPause slideshowButton', true, true);
-                if (appHost.supports('filedownload') && slideshowOptions?.user.Policy.EnableContentDownloading) {
+                if (appHost.supports(AppFeature.FileDownload) && slideshowOptions?.user.Policy.EnableContentDownloading) {
                     html += getIcon('file_download', 'btnDownload slideshowButton', true);
                 }
-                if (appHost.supports('sharing')) {
+                if (appHost.supports(AppFeature.Sharing)) {
                     html += getIcon('share', 'btnShare slideshowButton', true);
                 }
                 if (screenfull.isEnabled) {

src/components/subtitleeditor/subtitleeditor.js

@@ -1,4 +1,6 @@
 import escapeHtml from 'escape-html';
+
+import { AppFeature } from 'constants/appFeature';
 import { appHost } from '../apphost';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import layoutManager from '../layoutManager';
@@ -440,7 +442,7 @@ function showEditorInternal(itemId, serverId) {
         }
 
         // Don't allow redirection to other websites from the TV layout
-        if (layoutManager.tv || !appHost.supports('externallinks')) {
+        if (layoutManager.tv || !appHost.supports(AppFeature.ExternalLinks)) {
             dlg.querySelector('.btnHelp').remove();
         }
 

src/components/subtitlesettings/subtitlesettings.js

@@ -1,3 +1,4 @@
+import { AppFeature } from 'constants/appFeature';
 import globalize from '../../lib/globalize';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
 import { appHost } from '../apphost';
@@ -40,7 +41,7 @@ function getSubtitleAppearanceObject(context) {
 
 function loadForm(context, user, userSettings, appearanceSettings, apiClient) {
     apiClient.getCultures().then(function (allCultures) {
-        if (appHost.supports('subtitleburnsettings') && user.Policy.EnableVideoPlaybackTranscoding) {
+        if (appHost.supports(AppFeature.SubtitleBurnIn) && user.Policy.EnableVideoPlaybackTranscoding) {
             context.querySelector('.fldBurnIn').classList.remove('hide');
         }
 
@@ -208,7 +209,7 @@ function embed(options, self) {
         options.element.querySelector('.btnSave').classList.remove('hide');
     }
 
-    if (appHost.supports('subtitleappearancesettings')) {
+    if (appHost.supports(AppFeature.SubtitleAppearance)) {
         options.element.querySelector('.subtitleAppearanceSection').classList.remove('hide');
 
         self._fullPreview = options.element.querySelector('.subtitleappearance-fullpreview');

src/components/toolbar/AppUserMenu.tsx

@@ -16,6 +16,7 @@ import React, { FC, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 
 import { appHost } from 'components/apphost';
+import { AppFeature } from 'constants/appFeature';
 import { useApi } from 'hooks/useApi';
 import { useQuickConnectEnabled } from 'hooks/useQuickConnect';
 import globalize from 'lib/globalize';
@@ -97,7 +98,7 @@ const AppUserMenu: FC<AppUserMenuProps> = ({
                 </ListItemText>
             </MenuItem>
 
-            {appHost.supports('clientsettings') && ([
+            {appHost.supports(AppFeature.ClientSettings) && ([
                 <Divider key='client-settings-divider' />,
                 <MenuItem
                     key='client-settings-button'
@@ -156,7 +157,7 @@ const AppUserMenu: FC<AppUserMenuProps> = ({
                 </MenuItem>
             )}
 
-            {appHost.supports('multiserver') && (
+            {appHost.supports(AppFeature.MultiServer) && (
                 <MenuItem
                     onClick={onSelectServerClick}
                 >
@@ -180,7 +181,7 @@ const AppUserMenu: FC<AppUserMenuProps> = ({
                 </ListItemText>
             </MenuItem>
 
-            {appHost.supports('exitmenu') && ([
+            {appHost.supports(AppFeature.ExitMenu) && ([
                 <Divider key='exit-menu-divider' />,
                 <MenuItem
                     key='exit-menu-button'