From 5c99b124aa8129d834dc4567600c6229db69789f Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Thu, 4 Feb 2021 12:41:35 -0800
Subject: [PATCH] Continue to add doc links, update copy, and tweak alert
 messages

---
 web/pages/components/config/constants.tsx     |  6 ++---
 .../components/config/edit-server-details.tsx | 12 ++++++++++
 web/pages/components/config/video-latency.tsx | 12 ++++++----
 .../config/video-variants-table.tsx           | 10 ++++----
 web/pages/config-page-content.tsx             |  6 ++---
 web/pages/config-public-details.tsx           |  6 +++--
 web/pages/config-server-details.tsx           |  6 +++--
 web/pages/config-video.tsx                    |  6 ++---
 web/pages/help.tsx                            | 23 ++++++-------------
 9 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/web/pages/components/config/constants.tsx b/web/pages/components/config/constants.tsx
index 143d9e821..8354e5ad5 100644
--- a/web/pages/components/config/constants.tsx
+++ b/web/pages/components/config/constants.tsx
@@ -106,8 +106,8 @@ export const TEXTFIELD_PROPS_WEB_PORT = {
   configPath: '',
   maxLength: 6,
   placeholder: '8080',
-  label: 'Owncast Server port',
-  tip: 'What port are you serving Owncast from? Default is :8080',
+  label: 'Owncast port',
+  tip: 'What port is your Owncast web server listening? Default is 8080',
   required: true,
 };
 export const TEXTFIELD_PROPS_RTMP_PORT = {
@@ -116,7 +116,7 @@ export const TEXTFIELD_PROPS_RTMP_PORT = {
   maxLength: 6,
   placeholder: '1935',
   label: 'RTMP port',
-  tip: 'What port are you receiving RTMP?',
+  tip: 'What port should accept inbound broadcasts? Default is 1935',
   required: true,
 };
 export const TEXTFIELD_PROPS_INSTANCE_URL = {
diff --git a/web/pages/components/config/edit-server-details.tsx b/web/pages/components/config/edit-server-details.tsx
index f09f0d51d..77551557f 100644
--- a/web/pages/components/config/edit-server-details.tsx
+++ b/web/pages/components/config/edit-server-details.tsx
@@ -54,6 +54,16 @@ export default function EditInstanceDetails() {
     setMessage('Updating server settings requires a restart of your Owncast server.');
   };
 
+  const showStreamKeyChangeMessage = () => {
+    setMessage('Changing your stream key will log you out of the admin and block you from streaming until you change the key in your broadcasting software.');
+  };
+
+  const showFfmpegChangeMessage = () => {
+    if (serverStatusData.online) {
+      setMessage('The updated ffmpeg path will be used when starting your next live stream.');
+    }
+  };
+
   function generateStreamKey() {
     let key = '';
     for (let i = 0; i < 3; i += 1) {
@@ -81,6 +91,7 @@ export default function EditInstanceDetails() {
             initialValue={streamKey}
             type={TEXTFIELD_TYPE_PASSWORD}
             onChange={handleFieldChange}
+            onSubmit={showStreamKeyChangeMessage}
           />
           <div className="streamkey-actions">
             <Tooltip title="Generate a stream key">
@@ -102,6 +113,7 @@ export default function EditInstanceDetails() {
         value={formDataValues.ffmpegPath}
         initialValue={ffmpegPath}
         onChange={handleFieldChange}
+        onSubmit={showFfmpegChangeMessage}
       />
       <TextFieldWithSubmit
         fieldName="webServerPort"
diff --git a/web/pages/components/config/video-latency.tsx b/web/pages/components/config/video-latency.tsx
index 82870d643..ba746bc54 100644
--- a/web/pages/components/config/video-latency.tsx
+++ b/web/pages/components/config/video-latency.tsx
@@ -1,6 +1,7 @@
 import React, { useContext, useState, useEffect } from 'react';
 import { Typography, Slider } from 'antd';
 import { ServerStatusContext } from '../../../utils/server-status-context';
+import { AlertMessageContext } from '../../../utils/alert-message-context';
 import { API_VIDEO_SEGMENTS, RESET_TIMEOUT, postConfigUpdateToAPI } from './constants';
 import {
   createInputStatus,
@@ -47,6 +48,7 @@ export default function VideoLatency() {
   const [selectedOption, setSelectedOption] = useState(null);
 
   const serverStatusData = useContext(ServerStatusContext);
+  const { setMessage } = useContext(AlertMessageContext);
   const { serverConfig, setFieldInConfigState } = serverStatusData || {};
   const { videoSettings } = serverConfig || {};
 
@@ -80,11 +82,14 @@ export default function VideoLatency() {
           value: postValue,
           path: 'videoSettings',
         });
-        setSubmitStatus(createInputStatus(STATUS_SUCCESS, 'Variants updated.'));
+        setSubmitStatus(createInputStatus(STATUS_SUCCESS, 'Latency buffer level updated.'));
 
         // setSubmitStatus('success');
         // setSubmitStatusMessage('Variants updated.');
         resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
+        if (serverStatusData.online) {
+          setMessage('Your latency buffer setting will take effect the next time you begin a live stream.')
+        }
       },
       onError: (message: string) => {
         setSubmitStatus(createInputStatus(STATUS_ERROR, message));
@@ -104,11 +109,8 @@ export default function VideoLatency() {
     <div className="config-video-segements-conatiner">
       <Title level={3}>Latency Buffer</Title>
       <p>
-        There are trade-offs when cosidering video latency and reliability. Blah blah .. better
-        wording here needed.
+        While it's natural to want to keep your latency as low as possible, you may experience reduced error tolerance and stability in some environments the lower you go.
       </p>
-      <br />
-      <br />
       <div className="segment-slider-container">
         <Slider
           tipFormatter={value => <SegmentToolTip value={SLIDER_COMMENTS[value]} />}
diff --git a/web/pages/components/config/video-variants-table.tsx b/web/pages/components/config/video-variants-table.tsx
index e6bb72a39..39b337afa 100644
--- a/web/pages/components/config/video-variants-table.tsx
+++ b/web/pages/components/config/video-variants-table.tsx
@@ -83,9 +83,11 @@ export default function CurrentVariantsTable() {
         setSubmitStatusMessage('Variants updated.');
         resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
 
-        setMessage(
-          'Updating your video configuration will take effect the next time you begin a new stream.',
-        );
+        if (serverStatusData.online) {
+          setMessage(
+            'Updating your video configuration will take effect the next time you begin a new stream.',
+          );
+        }
       },
       onError: (message: string) => {
         setSubmitStatus('error');
@@ -187,7 +189,7 @@ export default function CurrentVariantsTable() {
 
   return (
     <>
-      <Title level={3}>Current Variants</Title>
+      <Title level={3}>Stream output</Title>
 
       {statusMessage}
 
diff --git a/web/pages/config-page-content.tsx b/web/pages/config-page-content.tsx
index e2beca697..4bd1b4fd8 100644
--- a/web/pages/config-page-content.tsx
+++ b/web/pages/config-page-content.tsx
@@ -84,11 +84,10 @@ export default function PageContentEditor() {
 
   return (
     <div className="config-page-content-form">
-      <Title level={2}>Edit custom content</Title>
+      <Title level={2}>Page Content</Title>
 
       <p>
-        Add some content about your site with the Markdown editor below. This content shows up at
-        the bottom half of your Owncast page.
+        Edit the content of your page by using simple <a href="https://www.markdownguide.org/basic-syntax/">Markdown syntax</a>.
       </p>
 
       <MdEditor
@@ -101,6 +100,7 @@ export default function PageContentEditor() {
           markdownClass: 'markdown-editor-pane',
         }}
       />
+      
       <div className="page-content-actions">
         {hasChanged ? (
           <Button type="primary" onClick={handleSave}>
diff --git a/web/pages/config-public-details.tsx b/web/pages/config-public-details.tsx
index 1d54665ff..bfc5352ff 100644
--- a/web/pages/config-public-details.tsx
+++ b/web/pages/config-public-details.tsx
@@ -11,8 +11,10 @@ const { Title } = Typography;
 export default function PublicFacingDetails() {
   return (
     <>
-      <Title level={2}>Edit your public facing instance details</Title>
-
+      <Title level={2}>General Settings</Title>
+      <p>
+        The following are displayed on your site to describe your stream and its content.  <a href="https://owncast.online/docs/website/">Learn more.</a>
+      </p>
       <div className="edit-public-details-container">
         <EditInstanceDetails />
         <EditInstanceTags />
diff --git a/web/pages/config-server-details.tsx b/web/pages/config-server-details.tsx
index 72c7d92c8..3d04afff7 100644
--- a/web/pages/config-server-details.tsx
+++ b/web/pages/config-server-details.tsx
@@ -7,8 +7,10 @@ const { Title } = Typography;
 export default function ConfigServerDetails() {
   return (
     <div className="config-server-details-form">
-      <Title level={2}>Edit your Server&apos;s details</Title>
-
+      <Title level={2}>Server Settings</Title>
+      <p>
+        You should change your stream key from the default and keep it safe.  For most people it's likely the other settings will not need to be changed.
+      </p>
       <div className="config-server-details-container">
         <EditServerDetails />
       </div>
diff --git a/web/pages/config-video.tsx b/web/pages/config-video.tsx
index 5876e009c..a654e3e8d 100644
--- a/web/pages/config-video.tsx
+++ b/web/pages/config-video.tsx
@@ -11,14 +11,14 @@ export default function ConfigVideoSettings() {
     <div className="config-video-variants">
       <Title level={2}>Video configuration</Title>
       <p>
-        Learn more about configuring Owncast{' '}
-        <a href="https://owncast.online/docs/configuration">by visiting the documentation.</a>
+        Before changing your video configuration <a href="https://owncast.online/docs/encoding">visit the video documentation</a>{' '}
+        to learn how it impacts your stream performance.
       </p>
 
     <p>
       <VideoVariantsTable />
     </p>
-
+    <br/><hr/><br/>
     <p>
       <VideoLatency />
     </p>
diff --git a/web/pages/help.tsx b/web/pages/help.tsx
index 18d9083d0..0affc08ed 100644
--- a/web/pages/help.tsx
+++ b/web/pages/help.tsx
@@ -89,7 +89,7 @@ export default function Help(props: Props) {
       title: 'I want to offload my video to an external storage provider',
       content: (
         <div>
-          <a href="https://owncast.online/docs/s3/" target="_blank" rel="noopener noreferrer">
+          <a href="https://owncast.online/docs/storage/" target="_blank" rel="noopener noreferrer">
             <LinkOutlined /> Learn more
           </a>
         </div>
@@ -131,22 +131,13 @@ export default function Help(props: Props) {
     },
     {
       icon: <ApiTwoTone style={{ fontSize: '24px' }} />,
-      title: 'I want to use the API',
+      title: 'I want to build add-ons for my Owncast server',
       content: (
         <div>
-          You can view the API documentation for either the
-          <a href="https://owncast.online/api/latest" target="_blank" rel="noopener noreferrer">
-            &nbsp;latest&nbsp;
+          You can build your own bots, overlays, tools and add-ons with our
+          <a href="https://owncast.online/thirdparty" target="_blank" rel="noopener noreferrer">
+            &nbsp;developer APIs.&nbsp;
           </a>
-          or
-          <a
-            href="https://owncast.online/api/development"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            &nbsp;development&nbsp;
-          </a>
-          release.
         </div>
       ),
     },
@@ -166,7 +157,7 @@ export default function Help(props: Props) {
             icon={<LinkOutlined />}
             type="primary"
           >
-            Read Troubleshoting
+            Fix your problems
           </Button>
         </Col>
         <Col xs={24} lg={12} style={{ textAlign: 'center' }}>
@@ -175,7 +166,7 @@ export default function Help(props: Props) {
           <Button
             target="_blank"
             rel="noopener noreferrer"
-            href="https://owncast.online/"
+            href="https://owncast.online/docs"
             icon={<LinkOutlined />}
             type="primary"
           >