From 0a30cd356d217a39546c016cc8bfa6ff6ad75e3e Mon Sep 17 00:00:00 2001
From: Jesse Boswell <jeaboswell@users.noreply.github.com>
Date: Mon, 5 Jun 2023 23:05:54 -0500
Subject: [PATCH] feat(settings): add internal url to jellyfin settings form

re #194
---
 src/components/Settings/SettingsJellyfin.tsx | 30 +++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/Settings/SettingsJellyfin.tsx b/src/components/Settings/SettingsJellyfin.tsx
index f4834582c..d843510f7 100644
--- a/src/components/Settings/SettingsJellyfin.tsx
+++ b/src/components/Settings/SettingsJellyfin.tsx
@@ -30,8 +30,9 @@ const messages = defineMessages({
   jellyfinSettingsSuccess: '{mediaServerName} settings saved successfully!',
   jellyfinSettings: '{mediaServerName} Settings',
   jellyfinSettingsDescription:
-    'Optionally configure an external player endpoint for your {mediaServerName} server that is different to the internal URL used during setup',
+    'Optionally configure the internal and external endpoints for your {mediaServerName} server. In most cases, the external URL is different to the internal URL.',
   externalUrl: 'External URL',
+  internalUrl: 'Internal URL',
   validationUrl: 'You must provide a valid URL',
   syncing: 'Syncing',
   syncJellyfin: 'Sync Libraries',
@@ -89,6 +90,10 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
       /^(?:(?:(?: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.validationUrl)
     ),
+    jellyfinInternalUrl: 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.validationUrl)
+    ),
   });
 
   const activeLibraries =
@@ -346,12 +351,14 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
           </div>
           <Formik
             initialValues={{
+              jellyfinInternalUrl: data?.hostname || '',
               jellyfinExternalUrl: data?.externalHostname || '',
             }}
             validationSchema={JellyfinSettingsSchema}
             onSubmit={async (values) => {
               try {
                 await axios.post('/api/v1/settings/jellyfin', {
+                  hostname: values.jellyfinInternalUrl,
                   externalHostname: values.jellyfinExternalUrl,
                 } as JellyfinSettings);
 
@@ -388,6 +395,27 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
             {({ errors, touched, handleSubmit, isSubmitting, isValid }) => {
               return (
                 <form className="section" onSubmit={handleSubmit}>
+                  <div className="form-row">
+                    <label htmlFor="jellyfinInternalUrl" className="text-label">
+                      {intl.formatMessage(messages.internalUrl)}
+                    </label>
+                    <div className="form-input-area">
+                      <div className="form-input-field">
+                        <Field
+                          type="text"
+                          inputMode="url"
+                          id="jellyfinInternalUrl"
+                          name="jellyfinInternalUrl"
+                        />
+                      </div>
+                      {errors.jellyfinInternalUrl &&
+                        touched.jellyfinInternalUrl && (
+                          <div className="error">
+                            {errors.jellyfinInternalUrl}
+                          </div>
+                        )}
+                    </div>
+                  </div>
                   <div className="form-row">
                     <label htmlFor="jellyfinExternalUrl" className="text-label">
                       {intl.formatMessage(messages.externalUrl)}