Support using the custom video serving endpoint even if you don't use object storage (#2924)

* feat(video): refactor video serving endpoint

It can now be used without an object storage provider. Closes #2785

* fix: remove debug log

web/components/admin/EditInstanceDetails2.tsx

@@ -10,6 +10,7 @@ import {
   TEXTFIELD_PROPS_SOCKET_HOST_OVERRIDE,
   TEXTFIELD_PROPS_ADMIN_PASSWORD,
   TEXTFIELD_PROPS_WEB_PORT,
+  TEXTFIELD_PROPS_VIDEO_SERVING_ENDPOINT,
 } from '../../utils/config-constants';
 import { UpdateArgs } from '../../types/config-section';
 import { ResetYP } from './ResetYP';
@@ -24,8 +25,15 @@ export default function EditInstanceDetails() {
 
   const { serverConfig } = serverStatusData || {};
 
-  const { adminPassword, ffmpegPath, rtmpServerPort, webServerPort, yp, socketHostOverride } =
-    serverConfig;
+  const {
+    adminPassword,
+    ffmpegPath,
+    rtmpServerPort,
+    webServerPort,
+    yp,
+    socketHostOverride,
+    videoServingEndpoint,
+  } = serverConfig;
 
   useEffect(() => {
     setFormDataValues({
@@ -34,6 +42,7 @@ export default function EditInstanceDetails() {
       rtmpServerPort,
       webServerPort,
       socketHostOverride,
+      videoServingEndpoint,
     });
   }, [serverConfig]);
 
@@ -119,6 +128,15 @@ export default function EditInstanceDetails() {
             type={TEXTFIELD_TYPE_URL}
             onChange={handleFieldChange}
           />
+
+          <TextFieldWithSubmit
+            fieldName="videoServingEndpoint"
+            {...TEXTFIELD_PROPS_VIDEO_SERVING_ENDPOINT}
+            value={formDataValues.videoServingEndpoint}
+            initialValue={videoServingEndpoint || ''}
+            type={TEXTFIELD_TYPE_URL}
+            onChange={handleFieldChange}
+          />
           {yp.enabled && <ResetYP />}
         </Panel>
       </Collapse>

web/components/admin/config/server/EditStorage.tsx

@@ -28,17 +28,7 @@ const { Panel } = Collapse;
 // we could probably add more detailed checks here
 // `currentValues` is what's currently in the global store and in the db
 function checkSaveable(formValues: any, currentValues: any) {
-  const {
-    endpoint,
-    accessKey,
-    secret,
-    bucket,
-    region,
-    enabled,
-    servingEndpoint,
-    acl,
-    forcePathStyle,
-  } = formValues;
+  const { endpoint, accessKey, secret, bucket, region, enabled, acl, forcePathStyle } = formValues;
   // if fields are filled out and different from what's in store, then return true
   if (enabled) {
     if (!!endpoint && isValidUrl(endpoint) && !!accessKey && !!secret && !!bucket && !!region) {
@@ -49,8 +39,6 @@ function checkSaveable(formValues: any, currentValues: any) {
         secret !== currentValues.secret ||
         bucket !== currentValues.bucket ||
         region !== currentValues.region ||
-        (!currentValues.servingEndpoint && servingEndpoint !== '') ||
-        (!!currentValues.servingEndpoint && servingEndpoint !== currentValues.servingEndpoint) ||
         (!currentValues.acl && acl !== '') ||
         (!!currentValues.acl && acl !== currentValues.acl) ||
         forcePathStyle !== currentValues.forcePathStyle
@@ -84,7 +72,6 @@ export default function EditStorage() {
     endpoint = '',
     region = '',
     secret = '',
-    servingEndpoint = '',
     forcePathStyle = false,
   } = s3;
 
@@ -97,7 +84,6 @@ export default function EditStorage() {
       endpoint,
       region,
       secret,
-      servingEndpoint,
       forcePathStyle,
     });
     setShouldDisplayForm(enabled);
@@ -232,13 +218,7 @@ export default function EditStorage() {
                 onChange={handleFieldChange}
               />
             </div>
-            <div className="field-container">
-              <TextField
-                {...S3_TEXT_FIELDS_INFO.servingEndpoint}
-                value={formDataValues.servingEndpoint}
-                onChange={handleFieldChange}
-              />
-            </div>
+
             <div className="enable-switch">
               <ToggleSwitch
                 {...S3_TEXT_FIELDS_INFO.forcePathStyle}