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}

web/types/config-section.ts

@@ -81,7 +81,6 @@ export interface S3Field {
   endpoint: string;
   region: string;
   secret: string;
-  servingEndpoint?: string;
   forcePathStyle: boolean;
 }
 
@@ -145,6 +144,7 @@ export interface ConfigDetails {
   videoSettings: VideoSettingsFields;
   webServerPort: string;
   socketHostOverride: string;
+  videoServingEndpoint: string;
   yp: ConfigDirectoryFields;
   supportedCodecs: string[];
   videoCodec: string;

web/utils/config-constants.tsx

@@ -40,6 +40,7 @@ const API_CHAT_JOIN_MESSAGES_ENABLED = '/chat/joinmessagesenabled';
 const API_CHAT_ESTABLISHED_MODE = '/chat/establishedusermode';
 const API_DISABLE_SEARCH_INDEXING = '/disablesearchindexing';
 const API_SOCKET_HOST_OVERRIDE = '/sockethostoverride';
+const API_VIDEO_SERVING_ENDPOINT = '/videoservingendpoint';
 
 // Federation
 const API_FEDERATION_ENABLED = '/federation/enable';
@@ -180,6 +181,18 @@ export const TEXTFIELD_PROPS_SOCKET_HOST_OVERRIDE = {
   useTrim: true,
 };
 
+export const TEXTFIELD_PROPS_VIDEO_SERVING_ENDPOINT = {
+  apiPath: API_VIDEO_SERVING_ENDPOINT,
+  fieldName: 'videoServingEndpoint',
+  label: 'Serving Endpoint',
+  maxLength: 255,
+  placeholder: 'http://cdn.provider.endpoint.com',
+  tip: 'Optional URL that video content should be accessed from instead of the default.  Used with CDNs and specific storage providers. Generally not required.',
+  type: TEXTFIELD_TYPE_URL,
+  pattern: DEFAULT_TEXTFIELD_URL_PATTERN,
+  useTrim: true,
+};
+
 // MISC FIELDS
 export const FIELD_PROPS_TAGS = {
   apiPath: API_TAGS,
@@ -521,16 +534,6 @@ export const S3_TEXT_FIELDS_INFO = {
     placeholder: 'your secret key',
     tip: '',
   },
-  servingEndpoint: {
-    fieldName: 'servingEndpoint',
-    label: 'Serving Endpoint',
-    maxLength: 255,
-    placeholder: 'http://cdn.ss3.provider.endpoint.com',
-    tip: 'Optional URL that content should be accessed from instead of the default.  Used with CDNs and specific storage providers. Generally not required.',
-    type: TEXTFIELD_TYPE_URL,
-    pattern: DEFAULT_TEXTFIELD_URL_PATTERN,
-    useTrim: true,
-  },
   forcePathStyle: {
     fieldName: 'forcePathStyle',
     label: 'Force path-style',

web/utils/server-status-context.tsx

@@ -30,6 +30,7 @@ const initialServerConfigState: ConfigDetails = {
   rtmpServerPort: '',
   webServerPort: '',
   socketHostOverride: null,
+  videoServingEndpoint: '',
   s3: {
     accessKey: '',
     acl: '',
@@ -38,7 +39,6 @@ const initialServerConfigState: ConfigDetails = {
     endpoint: '',
     region: '',
     secret: '',
-    servingEndpoint: '',
     forcePathStyle: false,
   },
   yp: {