Add support for setting a socket override. https://github.com/owncast/owncast/issues/1378 (#431)

web/components/config/edit-server-details.tsx

@@ -1,8 +1,12 @@
 import React, { useState, useContext, useEffect } from 'react';
-import { Button, Tooltip, Collapse } from 'antd';
+import { Button, Tooltip, Collapse, Typography } from 'antd';
 import { CopyOutlined, RedoOutlined } from '@ant-design/icons';
 
-import { TEXTFIELD_TYPE_NUMBER, TEXTFIELD_TYPE_PASSWORD } from './form-textfield';
+import {
+  TEXTFIELD_TYPE_NUMBER,
+  TEXTFIELD_TYPE_PASSWORD,
+  TEXTFIELD_TYPE_URL,
+} from './form-textfield';
 import TextFieldWithSubmit from './form-textfield-with-submit';
 
 import { ServerStatusContext } from '../../utils/server-status-context';
@@ -11,6 +15,7 @@ import { AlertMessageContext } from '../../utils/alert-message-context';
 import {
   TEXTFIELD_PROPS_FFMPEG,
   TEXTFIELD_PROPS_RTMP_PORT,
+  TEXTFIELD_PROPS_SOCKET_HOST_OVERRIDE,
   TEXTFIELD_PROPS_STREAM_KEY,
   TEXTFIELD_PROPS_WEB_PORT,
 } from '../../utils/config-constants';
@@ -27,7 +32,8 @@ export default function EditInstanceDetails() {
 
   const { serverConfig } = serverStatusData || {};
 
-  const { streamKey, ffmpegPath, rtmpServerPort, webServerPort, yp } = serverConfig;
+  const { streamKey, ffmpegPath, rtmpServerPort, webServerPort, yp, socketHostOverride } =
+    serverConfig;
 
   const [copyIsVisible, setCopyVisible] = useState(false);
 
@@ -39,6 +45,7 @@ export default function EditInstanceDetails() {
       ffmpegPath,
       rtmpServerPort,
       webServerPort,
+      socketHostOverride,
     });
   }, [serverConfig]);
 
@@ -138,13 +145,23 @@ export default function EditInstanceDetails() {
         onChange={handleFieldChange}
         onSubmit={showConfigurationRestartMessage}
       />
-      {yp.enabled && (
-        <Collapse className="advanced-settings">
-          <Panel header="Advanced Settings" key="1">
-            <ResetYP />
-          </Panel>
-        </Collapse>
-      )}
+      <Collapse className="advanced-settings">
+        <Panel header="Advanced Settings" key="1">
+          <Typography.Paragraph>
+            If you have a CDN in front of your entire Owncast instance, specify your origin server
+            here for the websocket to connect to. Most people will never need to set this.
+          </Typography.Paragraph>
+          <TextFieldWithSubmit
+            fieldName="socketHostOverride"
+            {...TEXTFIELD_PROPS_SOCKET_HOST_OVERRIDE}
+            value={formDataValues.socketHostOverride}
+            initialValue={socketHostOverride || ''}
+            type={TEXTFIELD_TYPE_URL}
+            onChange={handleFieldChange}
+          />
+          {yp.enabled && <ResetYP />}
+        </Panel>
+      </Collapse>
     </div>
   );
 }

web/types/config-section.ts

@@ -107,6 +107,7 @@ export interface ConfigDetails {
   streamKey: string;
   videoSettings: VideoSettingsFields;
   webServerPort: string;
+  socketHostOverride: string;
   yp: ConfigDirectoryFields;
   supportedCodecs: string[];
   videoCodec: string;

web/utils/config-constants.tsx

@@ -35,6 +35,7 @@ export const API_CHAT_FORBIDDEN_USERNAMES = '/chat/forbiddenusernames';
 export const API_CHAT_SUGGESTED_USERNAMES = '/chat/suggestedusernames';
 export const API_EXTERNAL_ACTIONS = '/externalactions';
 export const API_VIDEO_CODEC = '/video/codec';
+export const API_SOCKET_HOST_OVERRIDE = '/sockethostoverride';
 
 // Federation
 export const API_FEDERATION_ENABLED = '/federation/enable';
@@ -148,6 +149,19 @@ export const TEXTFIELD_PROPS_INSTANCE_URL = {
   pattern: DEFAULT_TEXTFIELD_URL_PATTERN,
   useTrim: true,
 };
+
+export const TEXTFIELD_PROPS_SOCKET_HOST_OVERRIDE = {
+  apiPath: API_SOCKET_HOST_OVERRIDE,
+  configPath: '',
+  maxLength: 255,
+  placeholder: 'https://owncast.mysite.com',
+  label: 'Websocket host override',
+  tip: 'The direct URL of your Owncast server.',
+  type: TEXTFIELD_TYPE_URL,
+  pattern: DEFAULT_TEXTFIELD_URL_PATTERN,
+  useTrim: true,
+};
+
 // MISC FIELDS
 export const FIELD_PROPS_TAGS = {
   apiPath: API_TAGS,

web/utils/server-status-context.tsx

@@ -25,6 +25,7 @@ export const initialServerConfigState: ConfigDetails = {
   ffmpegPath: '',
   rtmpServerPort: '',
   webServerPort: '',
+  socketHostOverride: null,
   s3: {
     accessKey: '',
     acl: '',