style(ui): conditional media server name to add emby to settings

Conditionaly media server name to replace every reference of jellyfin with emby in settings tab when
environmental variable set

src/components/Settings/SettingsJellyfin.tsx

@@ -14,28 +14,28 @@ import LoadingSpinner from '../Common/LoadingSpinner';
 import LibraryItem from './LibraryItem';
 
 const messages = defineMessages({
-  jellyfinsettings: 'Jellyfin Settings',
+  jellyfinsettings: '{mediaServerName} Settings',
   jellyfinsettingsDescription:
-    'Configure the settings for your Jellyfin server. Jellyfin scans your Jellyfin libraries to see what content is available.',
+    'Configure the settings for your {mediaServerName} server. {mediaServerName} scans your {mediaServerName} libraries to see what content is available.',
   timeout: 'Timeout',
   save: 'Save Changes',
   saving: 'Saving…',
-  jellyfinlibraries: 'Jellyfin Libraries',
+  jellyfinlibraries: '{mediaServerName} Libraries',
   jellyfinlibrariesDescription:
-    'The libraries Jellyfin scans for titles. Click the button below if no libraries are listed.',
+    'The libraries {mediaServerName} scans for titles. Click the button below if no libraries are listed.',
   jellyfinSettingsFailure:
-    'Something went wrong while saving Jellyfin settings.',
-  jellyfinSettingsSuccess: 'Jellyfin settings saved successfully!',
-  jellyfinSettings: 'Jellyfin Settings',
+    'Something went wrong while saving {mediaServerName} settings.',
+  jellyfinSettingsSuccess: '{mediaServerName} settings saved successfully!',
+  jellyfinSettings: '{mediaServerName} Settings',
   jellyfinSettingsDescription:
-    'Optionally configure an external player endpoint for your jellyfin server that is different to the internal URL used during setup',
+    'Optionally configure an external player endpoint for your {mediaServerName} server that is different to the internal URL used during setup',
   externalUrl: 'External URL',
   validationUrl: 'You must provide a valid URL',
   syncing: 'Syncing',
   syncJellyfin: 'Sync Libraries',
   manualscanJellyfin: 'Manual Library Scan',
   manualscanDescriptionJellyfin:
-    "Normally, this will only be run once every 24 hours. Jellyfin will check your Jellyfin server's recently added more aggressively. If this is your first time configuring Jellyfin, a one-time full manual library scan is recommended!",
+    "Normally, this will only be run once every 24 hours. {mediaServerName} will check your {mediaServerName} server's recently added more aggressively. If this is your first time configuring {mediaServerName}, a one-time full manual library scan is recommended!",
   notrunning: 'Not Running',
   currentlibrary: 'Current Library: {name}',
   librariesRemaining: 'Libraries Remaining: {count}',
@@ -161,10 +161,22 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
     <>
       <div className="mb-6">
         <h3 className="heading">
-          <FormattedMessage {...messages.jellyfinlibraries} />
+          {process.env.JELLYFIN_TYPE == 'emby'
+            ? intl.formatMessage(messages.jellyfinlibraries, {
+                mediaServerName: 'Emby',
+              })
+            : intl.formatMessage(messages.jellyfinlibraries, {
+                mediaServerName: 'Jellyfin',
+              })}
         </h3>
         <p className="description">
-          <FormattedMessage {...messages.jellyfinlibrariesDescription} />
+          {process.env.JELLYFIN_TYPE == 'emby'
+            ? intl.formatMessage(messages.jellyfinlibrariesDescription, {
+                mediaServerName: 'Emby',
+              })
+            : intl.formatMessage(messages.jellyfinlibrariesDescription, {
+                mediaServerName: 'Jellyfin',
+              })}
         </p>
       </div>
       <div className="section">
@@ -201,7 +213,13 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
           <FormattedMessage {...messages.manualscanJellyfin} />
         </h3>
         <p className="description">
-          <FormattedMessage {...messages.manualscanDescriptionJellyfin} />
+          {process.env.JELLYFIN_TYPE == 'emby'
+            ? intl.formatMessage(messages.manualscanDescriptionJellyfin, {
+                mediaServerName: 'Emby',
+              })
+            : intl.formatMessage(messages.manualscanDescriptionJellyfin, {
+                mediaServerName: 'Jellyfin',
+              })}
         </p>
       </div>
       <div className="section">
@@ -305,10 +323,22 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
         <>
           <div className="mt-10 mb-6">
             <h3 className="heading">
-              {intl.formatMessage(messages.jellyfinSettings)}
+              {process.env.JELLYFIN_TYPE == 'emby'
+                ? intl.formatMessage(messages.jellyfinSettings, {
+                    mediaServerName: 'Emby',
+                  })
+                : intl.formatMessage(messages.jellyfinSettings, {
+                    mediaServerName: 'Jellyfin',
+                  })}
             </h3>
             <p className="description">
-              {intl.formatMessage(messages.jellyfinSettingsDescription)}
+              {process.env.JELLYFIN_TYPE == 'emby'
+                ? intl.formatMessage(messages.jellyfinSettingsDescription, {
+                    mediaServerName: 'Emby',
+                  })
+                : intl.formatMessage(messages.jellyfinSettingsDescription, {
+                    mediaServerName: 'Jellyfin',
+                  })}
             </p>
           </div>
           <Formik
@@ -322,15 +352,27 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
                   externalHostname: values.jellyfinExternalUrl,
                 } as JellyfinSettings);
 
-                addToast(intl.formatMessage(messages.jellyfinSettingsSuccess), {
-                  autoDismiss: true,
-                  appearance: 'success',
-                });
+                addToast(
+                  intl.formatMessage(messages.jellyfinSettingsSuccess, {
+                    mediaServerName:
+                      process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
+                  }),
+                  {
+                    autoDismiss: true,
+                    appearance: 'success',
+                  }
+                );
               } catch (e) {
-                addToast(intl.formatMessage(messages.jellyfinSettingsFailure), {
-                  autoDismiss: true,
-                  appearance: 'error',
-                });
+                addToast(
+                  intl.formatMessage(messages.jellyfinSettingsFailure, {
+                    mediaServerName:
+                      process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
+                  }),
+                  {
+                    autoDismiss: true,
+                    appearance: 'error',
+                  }
+                );
               } finally {
                 revalidate();
               }

src/components/Settings/SettingsLayout.tsx

@@ -8,7 +8,7 @@ const messages = defineMessages({
   menuGeneralSettings: 'General',
   menuUsers: 'Users',
   menuPlexSettings: 'Plex',
-  menuJellyfinSettings: 'Jellyfin',
+  menuJellyfinSettings: '{mediaServerName}',
   menuServices: 'Services',
   menuNotifications: 'Notifications',
   menuLogs: 'Logs',
@@ -18,7 +18,6 @@ const messages = defineMessages({
 
 const SettingsLayout: React.FC = ({ children }) => {
   const intl = useIntl();
-
   const settingsRoutes: SettingsRoute[] = [
     {
       text: intl.formatMessage(messages.menuGeneralSettings),
@@ -36,7 +35,7 @@ const SettingsLayout: React.FC = ({ children }) => {
       regex: /^\/settings\/plex/,
     },
     {
-      text: intl.formatMessage(messages.menuJellyfinSettings),
+      text: getAvalaibleMediaServerName(),
       route: '/settings/jellyfin',
       regex: /^\/settings\/jellyfin/,
     },
@@ -76,6 +75,17 @@ const SettingsLayout: React.FC = ({ children }) => {
       <div className="mt-10 text-white">{children}</div>
     </>
   );
+  function getAvalaibleMediaServerName() {
+    if (process.env.JELLYFIN_TYPE === 'emby') {
+      return intl.formatMessage(messages.menuJellyfinSettings, {
+        mediaServerName: 'Emby',
+      });
+    }
+
+    return intl.formatMessage(messages.menuJellyfinSettings, {
+      mediaServerName: 'Jellyfin',
+    });
+  }
 };
 
 export default SettingsLayout;

src/components/Settings/SettingsUsers/index.tsx

@@ -131,16 +131,20 @@ const SettingsUsers: React.FC = () => {
                   <label htmlFor="newPlexLogin" className="checkbox-label">
                     {intl.formatMessage(messages.newPlexLogin, {
                       mediaServerName:
-                        settings.currentSettings.mediaServerType ===
-                        MediaServerType.PLEX
+                        process.env.JELLYFIN_TYPE == 'emby'
+                          ? 'Emby'
+                          : settings.currentSettings.mediaServerType ===
+                            MediaServerType.PLEX
                           ? 'Plex'
                           : 'Jellyfin',
                     })}
                     <span className="label-tip">
                       {intl.formatMessage(messages.newPlexLoginTip, {
                         mediaServerName:
-                          settings.currentSettings.mediaServerType ===
-                          MediaServerType.PLEX
+                          process.env.JELLYFIN_TYPE == 'emby'
+                            ? 'Emby'
+                            : settings.currentSettings.mediaServerType ===
+                              MediaServerType.PLEX
                             ? 'Plex'
                             : 'Jellyfin',
                       })}