fix(ui): fix ui elements not reflecting the env variable

Fix emby ui elements not reflecting the emby env variable set during runtime

src/components/Settings/SettingsJellyfin.tsx

@@ -12,6 +12,7 @@ import Badge from '../Common/Badge';
 import Button from '../Common/Button';
 import LoadingSpinner from '../Common/LoadingSpinner';
 import LibraryItem from './LibraryItem';
+import getConfig from 'next/config';
 
 const messages = defineMessages({
   jellyfinsettings: '{mediaServerName} Settings',
@@ -80,6 +81,7 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
   );
   const intl = useIntl();
   const { addToast } = useToasts();
+  const { publicRuntimeConfig } = getConfig();
 
   const JellyfinSettingsSchema = Yup.object().shape({
     jellyfinExternalUrl: Yup.string().matches(
@@ -161,7 +163,7 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
     <>
       <div className="mb-6">
         <h3 className="heading">
-          {process.env.JELLYFIN_TYPE == 'emby'
+          {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
             ? intl.formatMessage(messages.jellyfinlibraries, {
                 mediaServerName: 'Emby',
               })
@@ -170,7 +172,7 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
               })}
         </h3>
         <p className="description">
-          {process.env.JELLYFIN_TYPE == 'emby'
+          {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
             ? intl.formatMessage(messages.jellyfinlibrariesDescription, {
                 mediaServerName: 'Emby',
               })
@@ -213,7 +215,7 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
           <FormattedMessage {...messages.manualscanJellyfin} />
         </h3>
         <p className="description">
-          {process.env.JELLYFIN_TYPE == 'emby'
+          {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
             ? intl.formatMessage(messages.manualscanDescriptionJellyfin, {
                 mediaServerName: 'Emby',
               })
@@ -323,7 +325,7 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
         <>
           <div className="mt-10 mb-6">
             <h3 className="heading">
-              {process.env.JELLYFIN_TYPE == 'emby'
+              {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
                 ? intl.formatMessage(messages.jellyfinSettings, {
                     mediaServerName: 'Emby',
                   })
@@ -332,7 +334,7 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
                   })}
             </h3>
             <p className="description">
-              {process.env.JELLYFIN_TYPE == 'emby'
+              {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
                 ? intl.formatMessage(messages.jellyfinSettingsDescription, {
                     mediaServerName: 'Emby',
                   })
@@ -355,7 +357,9 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
                 addToast(
                   intl.formatMessage(messages.jellyfinSettingsSuccess, {
                     mediaServerName:
-                      process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
+                      publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+                        ? 'Emby'
+                        : 'Jellyfin',
                   }),
                   {
                     autoDismiss: true,
@@ -366,7 +370,9 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
                 addToast(
                   intl.formatMessage(messages.jellyfinSettingsFailure, {
                     mediaServerName:
-                      process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
+                      publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+                        ? 'Emby'
+                        : 'Jellyfin',
                   }),
                   {
                     autoDismiss: true,

src/components/Settings/SettingsLayout.tsx

@@ -3,6 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import globalMessages from '../../i18n/globalMessages';
 import PageTitle from '../Common/PageTitle';
 import SettingsTabs, { SettingsRoute } from '../Common/SettingsTabs';
+import getConfig from 'next/config';
 
 const messages = defineMessages({
   menuGeneralSettings: 'General',
@@ -18,6 +19,7 @@ const messages = defineMessages({
 
 const SettingsLayout: React.FC = ({ children }) => {
   const intl = useIntl();
+  const { publicRuntimeConfig } = getConfig();
   const settingsRoutes: SettingsRoute[] = [
     {
       text: intl.formatMessage(messages.menuGeneralSettings),
@@ -76,7 +78,7 @@ const SettingsLayout: React.FC = ({ children }) => {
     </>
   );
   function getAvalaibleMediaServerName() {
-    if (process.env.JELLYFIN_TYPE === 'emby') {
+    if (publicRuntimeConfig.JELLYFIN_TYPE === 'emby') {
       return intl.formatMessage(messages.menuJellyfinSettings, {
         mediaServerName: 'Emby',
       });

src/components/Settings/SettingsUsers/index.tsx

@@ -14,6 +14,7 @@ import LoadingSpinner from '../../Common/LoadingSpinner';
 import PageTitle from '../../Common/PageTitle';
 import PermissionEdit from '../../PermissionEdit';
 import QuotaSelector from '../../QuotaSelector';
+import getConfig from 'next/config';
 
 const messages = defineMessages({
   users: 'Users',
@@ -42,6 +43,7 @@ const SettingsUsers: React.FC = () => {
     mutate: revalidate,
   } = useSWR<MainSettings>('/api/v1/settings/main');
   const settings = useSettings();
+  const { publicRuntimeConfig } = getConfig();
 
   if (!data && !error) {
     return <LoadingSpinner />;
@@ -131,7 +133,7 @@ const SettingsUsers: React.FC = () => {
                   <label htmlFor="newPlexLogin" className="checkbox-label">
                     {intl.formatMessage(messages.newPlexLogin, {
                       mediaServerName:
-                        process.env.JELLYFIN_TYPE == 'emby'
+                        publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
                           ? 'Emby'
                           : settings.currentSettings.mediaServerType ===
                             MediaServerType.PLEX
@@ -141,7 +143,7 @@ const SettingsUsers: React.FC = () => {
                     <span className="label-tip">
                       {intl.formatMessage(messages.newPlexLoginTip, {
                         mediaServerName:
-                          process.env.JELLYFIN_TYPE == 'emby'
+                          publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
                             ? 'Emby'
                             : settings.currentSettings.mediaServerType ===
                               MediaServerType.PLEX