refactor: use ServerType enum for media server display names

server/constants/server.ts

@@ -8,4 +8,5 @@ export enum MediaServerType {
 export enum ServerType {
   JELLYFIN = 'Jellyfin',
   EMBY = 'Emby',
+  PLEX = 'Plex',
 }

src/components/IssueDetails/index.tsx

@@ -24,7 +24,7 @@ import {
 import { ArrowPathIcon } from '@heroicons/react/24/solid';
 import { IssueStatus } from '@server/constants/issue';
 import { MediaType } from '@server/constants/media';
-import { MediaServerType } from '@server/constants/server';
+import { MediaServerType, ServerType } from '@server/constants/server';
 import type Issue from '@server/entity/Issue';
 import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
@@ -385,15 +385,15 @@ const IssueDetails = () => {
                     {settings.currentSettings.mediaServerType ===
                     MediaServerType.EMBY
                       ? intl.formatMessage(messages.playonplex, {
-                          mediaServerName: 'Emby',
+                          mediaServerName: ServerType.EMBY,
                         })
                       : settings.currentSettings.mediaServerType ===
                           MediaServerType.PLEX
                         ? intl.formatMessage(messages.playonplex, {
-                            mediaServerName: 'Plex',
+                            mediaServerName: ServerType.PLEX,
                           })
                         : intl.formatMessage(messages.playonplex, {
-                            mediaServerName: 'Jellyfin',
+                            mediaServerName: ServerType.JELLYFIN,
                           })}
                   </span>
                 </Button>
@@ -433,15 +433,15 @@ const IssueDetails = () => {
                     {settings.currentSettings.mediaServerType ===
                     MediaServerType.EMBY
                       ? intl.formatMessage(messages.play4konplex, {
-                          mediaServerName: 'Emby',
+                          mediaServerName: ServerType.EMBY,
                         })
                       : settings.currentSettings.mediaServerType ===
                           MediaServerType.PLEX
                         ? intl.formatMessage(messages.play4konplex, {
-                            mediaServerName: 'Plex',
+                            mediaServerName: ServerType.PLEX,
                           })
                         : intl.formatMessage(messages.play4konplex, {
-                            mediaServerName: 'Jellyfin',
+                            mediaServerName: ServerType.JELLYFIN,
                           })}
                   </span>
                 </Button>
@@ -651,15 +651,15 @@ const IssueDetails = () => {
                   {settings.currentSettings.mediaServerType ===
                   MediaServerType.EMBY
                     ? intl.formatMessage(messages.playonplex, {
-                        mediaServerName: 'Emby',
+                        mediaServerName: ServerType.EMBY,
                       })
                     : settings.currentSettings.mediaServerType ===
                         MediaServerType.PLEX
                       ? intl.formatMessage(messages.playonplex, {
-                          mediaServerName: 'Plex',
+                          mediaServerName: ServerType.PLEX,
                         })
                       : intl.formatMessage(messages.playonplex, {
-                          mediaServerName: 'Jellyfin',
+                          mediaServerName: ServerType.JELLYFIN,
                         })}
                 </span>
               </Button>
@@ -698,15 +698,15 @@ const IssueDetails = () => {
                   {settings.currentSettings.mediaServerType ===
                   MediaServerType.EMBY
                     ? intl.formatMessage(messages.play4konplex, {
-                        mediaServerName: 'Emby',
+                        mediaServerName: ServerType.EMBY,
                       })
                     : settings.currentSettings.mediaServerType ===
                         MediaServerType.PLEX
                       ? intl.formatMessage(messages.play4konplex, {
-                          mediaServerName: 'Plex',
+                          mediaServerName: ServerType.PLEX,
                         })
                       : intl.formatMessage(messages.play4konplex, {
-                          mediaServerName: 'Jellyfin',
+                          mediaServerName: ServerType.JELLYFIN,
                         })}
                 </span>
               </Button>

src/components/Login/LocalLogin.tsx

@@ -5,7 +5,7 @@ import useSettings from '@app/hooks/useSettings';
 import defineMessages from '@app/utils/defineMessages';
 import { ArrowLeftOnRectangleIcon } from '@heroicons/react/24/outline';
 import { ExclamationTriangleIcon } from '@heroicons/react/24/solid';
-import { MediaServerType } from '@server/constants/server';
+import { MediaServerType, ServerType } from '@server/constants/server';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import Link from 'next/link';
@@ -133,8 +133,8 @@ const LocalLogin = ({ revalidate }: LocalLoginProps) => {
                         mediaServerName:
                           settings.currentSettings.mediaServerType ===
                           MediaServerType.JELLYFIN
-                            ? 'Jellyfin'
-                            : 'Emby',
+                            ? ServerType.JELLYFIN
+                            : ServerType.EMBY,
                       })}
                     </div>
                   )}

src/components/Login/index.tsx

@@ -13,7 +13,7 @@ import { useUser } from '@app/hooks/useUser';
 import defineMessages from '@app/utils/defineMessages';
 import { Transition } from '@headlessui/react';
 import { XCircleIcon } from '@heroicons/react/24/solid';
-import { MediaServerType } from '@server/constants/server';
+import { MediaServerType, ServerType } from '@server/constants/server';
 import axios from 'axios';
 import { useRouter } from 'next/dist/client/router';
 import Image from 'next/image';
@@ -83,11 +83,11 @@ const Login = () => {
 
   const mediaServerName =
     settings.currentSettings.mediaServerType === MediaServerType.PLEX
-      ? 'Plex'
+      ? ServerType.PLEX
       : settings.currentSettings.mediaServerType === MediaServerType.JELLYFIN
-        ? 'Jellyfin'
+        ? ServerType.JELLYFIN
         : settings.currentSettings.mediaServerType === MediaServerType.EMBY
-          ? 'Emby'
+          ? ServerType.EMBY
           : undefined;
 
   const MediaServerLogo =

src/components/ManageSlideOver/index.tsx

@@ -24,7 +24,7 @@ import {
   MediaStatus,
   MediaType,
 } from '@server/constants/media';
-import { MediaServerType } from '@server/constants/server';
+import { MediaServerType, ServerType } from '@server/constants/server';
 import type { MediaWatchDataResponse } from '@server/interfaces/api/mediaInterfaces';
 import type { DownloadingItem } from '@server/lib/downloadtracker';
 import type { RadarrSettings, SonarrSettings } from '@server/lib/settings';
@@ -733,11 +733,11 @@ const ManageSlideOver = ({
                       mediaServerName:
                         settings.currentSettings.mediaServerType ===
                         MediaServerType.EMBY
-                          ? 'Emby'
+                          ? ServerType.EMBY
                           : settings.currentSettings.mediaServerType ===
                               MediaServerType.PLEX
-                            ? 'Plex'
-                            : 'Jellyfin',
+                            ? ServerType.PLEX
+                            : ServerType.JELLYFIN,
                     })}
                   </div>
                 </div>

src/components/MovieDetails/index.tsx

@@ -51,7 +51,7 @@ import {
 import { type RatingResponse } from '@server/api/ratings';
 import { IssueStatus } from '@server/constants/issue';
 import { MediaStatus, MediaType } from '@server/constants/media';
-import { MediaServerType } from '@server/constants/server';
+import { MediaServerType, ServerType } from '@server/constants/server';
 import type { MovieDetails as MovieDetailsType } from '@server/models/Movie';
 import axios from 'axios';
 import { countries } from 'country-flag-icons';
@@ -305,26 +305,38 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
 
   function getAvailableMediaServerName() {
     if (settings.currentSettings.mediaServerType === MediaServerType.EMBY) {
-      return intl.formatMessage(messages.play, { mediaServerName: 'Emby' });
+      return intl.formatMessage(messages.play, {
+        mediaServerName: ServerType.EMBY,
+      });
     }
 
     if (settings.currentSettings.mediaServerType === MediaServerType.PLEX) {
-      return intl.formatMessage(messages.play, { mediaServerName: 'Plex' });
+      return intl.formatMessage(messages.play, {
+        mediaServerName: ServerType.PLEX,
+      });
     }
 
-    return intl.formatMessage(messages.play, { mediaServerName: 'Jellyfin' });
+    return intl.formatMessage(messages.play, {
+      mediaServerName: ServerType.JELLYFIN,
+    });
   }
 
   function getAvailable4kMediaServerName() {
     if (settings.currentSettings.mediaServerType === MediaServerType.EMBY) {
-      return intl.formatMessage(messages.play, { mediaServerName: 'Emby' });
+      return intl.formatMessage(messages.play, {
+        mediaServerName: ServerType.EMBY,
+      });
     }
 
     if (settings.currentSettings.mediaServerType === MediaServerType.PLEX) {
-      return intl.formatMessage(messages.play4k, { mediaServerName: 'Plex' });
+      return intl.formatMessage(messages.play4k, {
+        mediaServerName: ServerType.PLEX,
+      });
     }
 
-    return intl.formatMessage(messages.play4k, { mediaServerName: 'Jellyfin' });
+    return intl.formatMessage(messages.play4k, {
+      mediaServerName: ServerType.JELLYFIN,
+    });
   }
 
   const onClickWatchlistBtn = async (): Promise<void> => {

src/components/PermissionEdit/index.tsx

@@ -4,7 +4,7 @@ import useSettings from '@app/hooks/useSettings';
 import type { User } from '@app/hooks/useUser';
 import { Permission } from '@app/hooks/useUser';
 import defineMessages from '@app/utils/defineMessages';
-import { MediaServerType } from '@server/constants/server';
+import { MediaServerType, ServerType } from '@server/constants/server';
 import { useIntl } from 'react-intl';
 
 export const messages = defineMessages('components.PermissionEdit', {
@@ -145,20 +145,20 @@ export const PermissionEdit = ({
           name: intl.formatMessage(messages.viewwatchlists, {
             mediaServerName:
               settings.currentSettings.mediaServerType === MediaServerType.PLEX
-                ? 'Plex'
+                ? ServerType.PLEX
                 : settings.currentSettings.mediaServerType ===
                     MediaServerType.JELLYFIN
-                  ? 'Jellyfin'
-                  : 'Emby',
+                  ? ServerType.JELLYFIN
+                  : ServerType.EMBY,
           }),
           description: intl.formatMessage(messages.viewwatchlistsDescription, {
             mediaServerName:
               settings.currentSettings.mediaServerType === MediaServerType.PLEX
-                ? 'Plex'
+                ? ServerType.PLEX
                 : settings.currentSettings.mediaServerType ===
                     MediaServerType.JELLYFIN
-                  ? 'Jellyfin'
-                  : 'Emby',
+                  ? ServerType.JELLYFIN
+                  : ServerType.EMBY,
           }),
           permission: Permission.WATCHLIST_VIEW,
         },

src/components/Settings/SettingsJellyfin.tsx

@@ -10,7 +10,7 @@ import defineMessages from '@app/utils/defineMessages';
 import { isValidURL } from '@app/utils/urlValidationHelper';
 import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
 import { ApiErrorCode } from '@server/constants/error';
-import { MediaServerType } from '@server/constants/server';
+import { MediaServerType, ServerType } from '@server/constants/server';
 import type { JellyfinSettings } from '@server/lib/settings';
 import axios from 'axios';
 import { Field, Formik } from 'formik';
@@ -182,8 +182,8 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
           intl.formatMessage(messages.jellyfinSyncFailedConnectionError, {
             mediaServerName:
               settings.currentSettings.mediaServerType === MediaServerType.EMBY
-                ? 'Emby'
-                : 'Jellyfin',
+                ? ServerType.EMBY
+                : ServerType.JELLYFIN,
           }),
           {
             autoDismiss: true,
@@ -247,9 +247,9 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
   const mediaServerFormatValues = {
     mediaServerName:
       settings.currentSettings.mediaServerType === MediaServerType.JELLYFIN
-        ? 'Jellyfin'
+        ? ServerType.JELLYFIN
         : settings.currentSettings.mediaServerType === MediaServerType.EMBY
-          ? 'Emby'
+          ? ServerType.EMBY
           : undefined,
   };
 

src/components/Settings/SettingsLayout.tsx

@@ -4,7 +4,7 @@ import SettingsTabs from '@app/components/Common/SettingsTabs';
 import useSettings from '@app/hooks/useSettings';
 import globalMessages from '@app/i18n/globalMessages';
 import defineMessages from '@app/utils/defineMessages';
-import { MediaServerType } from '@server/constants/server';
+import { MediaServerType, ServerType } from '@server/constants/server';
 import { useIntl } from 'react-intl';
 
 const messages = defineMessages('components.Settings', {
@@ -100,9 +100,9 @@ const SettingsLayout = ({ children }: SettingsLayoutProps) => {
     return intl.formatMessage(messages.menuJellyfinSettings, {
       mediaServerName:
         settings.currentSettings.mediaServerType === MediaServerType.JELLYFIN
-          ? 'Jellyfin'
+          ? ServerType.JELLYFIN
           : settings.currentSettings.mediaServerType === MediaServerType.EMBY
-            ? 'Emby'
+            ? ServerType.EMBY
             : undefined,
     });
   }

src/components/Settings/SettingsPlex.tsx

@@ -16,6 +16,7 @@ import {
   MagnifyingGlassIcon,
   XMarkIcon,
 } from '@heroicons/react/24/solid';
+import { ServerType } from '@server/constants/server';
 import type { PlexDevice } from '@server/interfaces/api/plexInterfaces';
 import type { PlexSettings, TautulliSettings } from '@server/lib/settings';
 import axios from 'axios';
@@ -254,7 +255,7 @@ const SettingsPlex = ({ isSetupSettings }: SettingsPlexProps) => {
       addToast(
         e?.response?.data?.message === 'CONNECTION_ERROR'
           ? intl.formatMessage(messages.invalidurlerror, {
-              mediaServerName: 'Plex',
+              mediaServerName: ServerType.PLEX,
             })
           : intl.formatMessage(messages.toastPlexSyncFailure),
         {

src/components/Settings/SettingsUsers/index.tsx

@@ -10,7 +10,7 @@ import useToasts from '@app/hooks/useToasts';
 import globalMessages from '@app/i18n/globalMessages';
 import defineMessages from '@app/utils/defineMessages';
 import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
-import { MediaServerType } from '@server/constants/server';
+import { MediaServerType, ServerType } from '@server/constants/server';
 import type { MainSettings } from '@server/lib/settings';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
@@ -82,11 +82,11 @@ const SettingsUsers = () => {
   const mediaServerFormatValues = {
     mediaServerName:
       settings.currentSettings.mediaServerType === MediaServerType.JELLYFIN
-        ? 'Jellyfin'
+        ? ServerType.JELLYFIN
         : settings.currentSettings.mediaServerType === MediaServerType.EMBY
-          ? 'Emby'
+          ? ServerType.EMBY
           : settings.currentSettings.mediaServerType === MediaServerType.PLEX
-            ? 'Plex'
+            ? ServerType.PLEX
             : undefined,
   };
 

src/components/StatusBadge/index.tsx

@@ -7,7 +7,7 @@ import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import defineMessages from '@app/utils/defineMessages';
 import { MediaStatus } from '@server/constants/media';
-import { MediaServerType } from '@server/constants/server';
+import { MediaServerType, ServerType } from '@server/constants/server';
 import type { DownloadingItem } from '@server/lib/downloadtracker';
 import { useIntl } from 'react-intl';
 
@@ -87,10 +87,10 @@ const StatusBadge = ({
     mediaLinkDescription = intl.formatMessage(messages.playonplex, {
       mediaServerName:
         settings.currentSettings.mediaServerType === MediaServerType.EMBY
-          ? 'Emby'
+          ? ServerType.EMBY
           : settings.currentSettings.mediaServerType === MediaServerType.PLEX
-            ? 'Plex'
-            : 'Jellyfin',
+            ? ServerType.PLEX
+            : ServerType.JELLYFIN,
     });
   } else if (hasPermission(Permission.MANAGE_REQUESTS)) {
     if (mediaType && tmdbId) {