Add admin field for setting offline message. Closes #1901

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

@@ -12,6 +12,7 @@ import {
   TEXTFIELD_PROPS_INSTANCE_URL,
   TEXTFIELD_PROPS_SERVER_NAME,
   TEXTFIELD_PROPS_SERVER_SUMMARY,
+  TEXTFIELD_PROPS_SERVER_OFFLINE_MESSAGE,
   API_YP_SWITCH,
   FIELD_PROPS_YP,
   FIELD_PROPS_NSFW,
@@ -102,6 +103,15 @@ export default function EditInstanceDetails() {
         onChange={handleFieldChange}
       />
 
+      <TextFieldWithSubmit
+        fieldName="offlineMessage"
+        {...TEXTFIELD_PROPS_SERVER_OFFLINE_MESSAGE}
+        type={TEXTFIELD_TYPE_TEXTAREA}
+        value={formDataValues.offlineMessage}
+        initialValue={instanceDetails.offlineMessage}
+        onChange={handleFieldChange}
+      />
+
       {/* Logo section */}
       <EditLogo />
 

web/components/ui/Content/Content.tsx

@@ -119,8 +119,7 @@ export default function ContentComponent() {
             <OfflineBanner
               name={name}
               text={
-                offlineMessage ||
-                'Stream is offline text goes here. Will create a new form to set it in the Admin.'
+                offlineMessage || 'Please follow and ask to get notified when the stream is live.'
               }
             />
           )}

web/types/config-section.ts

@@ -36,6 +36,7 @@ export interface ConfigInstanceDetailsFields {
   socialHandles: SocialHandle[];
   streamTitle: string;
   summary: string;
+  offlineMessage: string;
   tags: string[];
   title: string;
   welcomeMessage: string;

web/utils/config-constants.tsx

@@ -19,6 +19,7 @@ export const API_RTMP_PORT = '/rtmpserverport';
 export const API_S3_INFO = '/s3';
 export const API_SERVER_SUMMARY = '/serversummary';
 export const API_SERVER_WELCOME_MESSAGE = '/welcomemessage';
+export const API_SERVER_OFFLINE_MESSAGE = '/offlinemessage';
 export const API_SERVER_NAME = '/name';
 export const API_SOCIAL_HANDLES = '/socialhandles';
 export const API_STREAM_KEY = '/key';
@@ -88,6 +89,14 @@ export const TEXTFIELD_PROPS_SERVER_SUMMARY = {
   label: 'About',
   tip: 'A brief blurb about you, your server, or what your stream is about.',
 };
+export const TEXTFIELD_PROPS_SERVER_OFFLINE_MESSAGE = {
+  apiPath: API_SERVER_OFFLINE_MESSAGE,
+  configPath: 'instanceDetails',
+  maxLength: 2500,
+  placeholder: 'An optional message you can leave people when your stream is not live.',
+  label: 'Offline Message',
+  tip: 'An optional message you can leave people when your stream is not live.',
+};
 export const TEXTFIELD_PROPS_SERVER_WELCOME_MESSAGE = {
   apiPath: API_SERVER_WELCOME_MESSAGE,
   configPath: 'instanceDetails',

web/utils/server-status-context.tsx

@@ -21,6 +21,7 @@ export const initialServerConfigState: ConfigDetails = {
     tags: [],
     title: '',
     welcomeMessage: '',
+    offlineMessage: '',
   },
   ffmpegPath: '',
   rtmpServerPort: '',