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

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

next.config.js

@@ -2,6 +2,10 @@ module.exports = {
   env: {
     commitTag: process.env.COMMIT_TAG || 'local',
   },
+  publicRuntimeConfig: {
+    // Will be available on both server and client
+    JELLYFIN_TYPE: process.env.JELLYFIN_TYPE,
+  },
   images: {
     domains: ['image.tmdb.org'],
   },

src/components/IssueDetails/index.tsx

@@ -35,6 +35,7 @@ import IssueComment from './IssueComment';
 import IssueDescription from './IssueDescription';
 import { MediaServerType } from '../../../server/constants/server';
 import useSettings from '../../hooks/useSettings';
+import getConfig from 'next/config';
 
 const messages = defineMessages({
   openedby: '#{issueId} opened {relativeTime} by {username}',
@@ -99,6 +100,7 @@ const IssueDetails: React.FC = () => {
     (opt) => opt.issueType === issueData?.issueType
   );
   const settings = useSettings();
+  const { publicRuntimeConfig } = getConfig();
 
   if (!data && !error) {
     return <LoadingSpinner />;
@@ -366,7 +368,7 @@ const IssueDetails: React.FC = () => {
                 >
                   <PlayIcon />
                   <span>
-                    {process.env.JELLYFIN_TYPE == 'emby'
+                    {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
                       ? intl.formatMessage(messages.playonplex, {
                           mediaServerName: 'Emby',
                         })
@@ -412,7 +414,7 @@ const IssueDetails: React.FC = () => {
                 >
                   <PlayIcon />
                   <span>
-                    {process.env.JELLYFIN_TYPE == 'emby'
+                    {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
                       ? intl.formatMessage(messages.play4konplex, {
                           mediaServerName: 'Emby',
                         })
@@ -628,7 +630,7 @@ const IssueDetails: React.FC = () => {
               >
                 <PlayIcon />
                 <span>
-                  {process.env.JELLYFIN_TYPE == 'emby'
+                  {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
                     ? intl.formatMessage(messages.playonplex, {
                         mediaServerName: 'Emby',
                       })
@@ -674,7 +676,7 @@ const IssueDetails: React.FC = () => {
               >
                 <PlayIcon />
                 <span>
-                  {process.env.JELLYFIN_TYPE == 'emby'
+                  {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
                     ? intl.formatMessage(messages.play4konplex, {
                         mediaServerName: 'Emby',
                       })

src/components/Login/JellyfinLogin.tsx

@@ -6,6 +6,7 @@ import { useToasts } from 'react-toast-notifications';
 import * as Yup from 'yup';
 import useSettings from '../../hooks/useSettings';
 import Button from '../Common/Button';
+import getConfig from 'next/config';
 
 const messages = defineMessages({
   username: 'Username',
@@ -39,21 +40,19 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
   const toasts = useToasts();
   const intl = useIntl();
   const settings = useSettings();
+  const { publicRuntimeConfig } = getConfig();
 
   if (initial) {
     const LoginSchema = Yup.object().shape({
       host: Yup.string()
         .matches(
           /^(?:(?:(?:https?):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/,
-          intl.formatMessage(messages.validationhostformat, {
+          intl.formatMessage(messages.validationhostformat)
-            mediaServerName:
-              process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
-          })
         )
         .required(
           intl.formatMessage(messages.validationhostrequired, {
             mediaServerName:
-              process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
+              publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
           })
         ),
       email: Yup.string()
@@ -104,7 +103,9 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
               <label htmlFor="host" className="text-label">
                 {intl.formatMessage(messages.host, {
                   mediaServerName:
-                    process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
+                    publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+                      ? 'Emby'
+                      : 'Jellyfin',
                 })}
               </label>
               <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
@@ -115,7 +116,7 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
                     type="text"
                     placeholder={intl.formatMessage(messages.host, {
                       mediaServerName:
-                        process.env.JELLYFIN_TYPE == 'emby'
+                        publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
                           ? 'Emby'
                           : 'Jellyfin',
                     })}

src/components/MovieDetails/index.tsx

@@ -48,6 +48,7 @@ import PersonCard from '../PersonCard';
 import RequestButton from '../RequestButton';
 import Slider from '../Slider';
 import StatusBadge from '../StatusBadge';
+import getConfig from 'next/config';
 
 const messages = defineMessages({
   originaltitle: 'Original Title',
@@ -95,6 +96,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
   const minStudios = 3;
   const [showMoreStudios, setShowMoreStudios] = useState(false);
   const [showIssueModal, setShowIssueModal] = useState(false);
+  const { publicRuntimeConfig } = getConfig();
 
   const {
     data,
@@ -223,7 +225,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
       ?.flatrate ?? [];
 
   function getAvalaibleMediaServerName() {
-    if (process.env.JELLYFIN_TYPE === 'emby') {
+    if (publicRuntimeConfig.JELLYFIN_TYPE === 'emby') {
       return intl.formatMessage(messages.play, { mediaServerName: 'Emby' });
     }
 
@@ -235,7 +237,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
   }
 
   function getAvalaible4kMediaServerName() {
-    if (process.env.JELLYFIN_TYPE === 'emby') {
+    if (publicRuntimeConfig.JELLYFIN_TYPE === 'emby') {
       return intl.formatMessage(messages.play4k, { mediaServerName: 'Emby' });
     }
 

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

src/components/Setup/SetupLogin.tsx

@@ -6,6 +6,7 @@ import axios from 'axios';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import Accordion from '../Common/Accordion';
 import { MediaServerType } from '../../../server/constants/server';
+import getConfig from 'next/config';
 
 const messages = defineMessages({
   welcome: 'Welcome to Overseerr',
@@ -25,6 +26,7 @@ const SetupLogin: React.FC<LoginWithMediaServerProps> = ({ onComplete }) => {
   );
   const { user, revalidate } = useUser();
   const intl = useIntl();
+  const { publicRuntimeConfig } = getConfig();
   // Effect that is triggered when the `authToken` comes back from the Plex OAuth
   // We take the token and attempt to login. If we get a success message, we will
   // ask swr to revalidate the user which _shouid_ come back with a valid user.
@@ -91,7 +93,7 @@ const SetupLogin: React.FC<LoginWithMediaServerProps> = ({ onComplete }) => {
                 }`}
                 onClick={() => handleClick(1)}
               >
-                {process.env.JELLYFIN_TYPE == 'emby'
+                {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
                   ? intl.formatMessage(messages.signinWithJellyfin, {
                       mediaServerName: 'Emby',
                     })

src/components/TvDetails/index.tsx

@@ -44,6 +44,7 @@ import RequestButton from '../RequestButton';
 import RequestModal from '../RequestModal';
 import Slider from '../Slider';
 import StatusBadge from '../StatusBadge';
+import getConfig from 'next/config';
 
 const messages = defineMessages({
   firstAirDate: 'First Air Date',
@@ -85,6 +86,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
     router.query.manage == '1' ? true : false
   );
   const [showIssueModal, setShowIssueModal] = useState(false);
+  const { publicRuntimeConfig } = getConfig();
 
   const {
     data,
@@ -223,7 +225,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
       ?.flatrate ?? [];
 
   function getAvalaibleMediaServerName() {
-    if (process.env.JELLYFIN_TYPE === 'emby') {
+    if (publicRuntimeConfig.JELLYFIN_TYPE === 'emby') {
       return intl.formatMessage(messages.play, { mediaServerName: 'Emby' });
     }
 
@@ -235,7 +237,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
   }
 
   function getAvalaible4kMediaServerName() {
-    if (process.env.JELLYFIN_TYPE === 'emby') {
+    if (publicRuntimeConfig.JELLYFIN_TYPE === 'emby') {
       return intl.formatMessage(messages.play4k, { mediaServerName: 'Emby' });
     }
 

src/components/UserList/JellyfinImportModal.tsx

@@ -8,6 +8,7 @@ import useSettings from '../../hooks/useSettings';
 import globalMessages from '../../i18n/globalMessages';
 import Alert from '../Common/Alert';
 import Modal from '../Common/Modal';
+import getConfig from 'next/config';
 
 interface JellyfinImportProps {
   onCancel?: () => void;
@@ -32,6 +33,7 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
 }) => {
   const intl = useIntl();
   const settings = useSettings();
+  const { publicRuntimeConfig } = getConfig();
   const { addToast } = useToasts();
   const [isImporting, setImporting] = useState(false);
   const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
@@ -67,7 +69,7 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
             return <strong>{msg}</strong>;
           },
           mediaServerName:
-            process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
+            publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
         }),
         {
           autoDismiss: true,
@@ -82,7 +84,7 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
       addToast(
         intl.formatMessage(messages.importfromJellyfinerror, {
           mediaServerName:
-            process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
+            publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
         }),
         {
           autoDismiss: true,
@@ -120,7 +122,7 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
       loading={!data && !error}
       title={intl.formatMessage(messages.importfromJellyfin, {
         mediaServerName:
-          process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
+          publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
       })}
       iconSvg={<InboxInIcon />}
       onOk={() => {
@@ -138,7 +140,9 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
             <Alert
               title={intl.formatMessage(messages.newJellyfinsigninenabled, {
                 mediaServerName:
-                  process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
+                  publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+                    ? 'Emby'
+                    : 'Jellyfin',
                 strong: function strong(msg) {
                   return (
                     <strong className="font-semibold text-white">{msg}</strong>
@@ -255,7 +259,7 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
         <Alert
           title={intl.formatMessage(messages.noJellyfinuserstoimport, {
             mediaServerName:
-              process.env.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
+              publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
           })}
           type="info"
         />

src/components/UserList/index.tsx

@@ -36,6 +36,7 @@ import Transition from '../Transition';
 import BulkEditModal from './BulkEditModal';
 import JellyfinImportModal from './JellyfinImportModal';
 import PlexImportModal from './PlexImportModal';
+import getConfig from 'next/config';
 
 const messages = defineMessages({
   users: 'Users',
@@ -87,6 +88,7 @@ const UserList: React.FC = () => {
   const intl = useIntl();
   const router = useRouter();
   const settings = useSettings();
+  const { publicRuntimeConfig } = getConfig();
   const { addToast } = useToasts();
   const { user: currentUser, hasPermission: currentHasPermission } = useUser();
   const [currentSort, setCurrentSort] = useState<Sort>('displayname');
@@ -503,7 +505,7 @@ const UserList: React.FC = () => {
             >
               <InboxInIcon />
               <span>
-                {process.env.JELLYFIN_TYPE == 'emby'
+                {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
                   ? intl.formatMessage(messages.importfromplex, {
                       mediaServerName: 'Emby',
                     })
@@ -645,7 +647,7 @@ const UserList: React.FC = () => {
                   <Badge badgeType="default">
                     {intl.formatMessage(messages.localuser)}
                   </Badge>
-                ) : process.env.JELLYFIN_TYPE == 'emby' ? (
+                ) : publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? (
                   <Badge badgeType="success">
                     {intl.formatMessage(messages.mediaServerUser, {
                       mediaServerName: 'Emby',