Add some info and directions to storage screen

web/pages/components/config/constants.tsx

@@ -211,22 +211,22 @@ export const S3_TEXT_FIELDS_INFO = {
     fieldName: 'acl',
     label: 'ACL',
     maxLength: 255,
-    placeholder: 'acl thing',
-    tip: '',
+    placeholder: '',
+    tip: 'Optional specific access control value to add to your content.  Generally not required.',
   },
   bucket: {
     fieldName: 'bucket',
     label: 'Bucket',
     maxLength: 255,
     placeholder: 'bucket 123',
-    tip: '',
+    tip: 'Create a new bucket for each Owncast instance you may be running.',
   },
   endpoint: {
     fieldName: 'endpoint',
     label: 'Endpoint',
     maxLength: 255,
-    placeholder: 'endpoint 123',
-    tip: 'This field has a some info',
+    placeholder: 'https://your.s3.provider.endpoint.com',
+    tip: 'The full URL endpoint your storage provider gave you.',
   },
   region: {
     fieldName: 'region',
@@ -239,14 +239,14 @@ export const S3_TEXT_FIELDS_INFO = {
     fieldName: 'secret',
     label: 'Secret key',
     maxLength: 255,
-    placeholder: 'secret key 123',
+    placeholder: 'your secret key',
     tip: '',
   },
   servingEndpoint: {
     fieldName: 'servingEndpoint',
     label: 'Serving Endpoint',
     maxLength: 255,
-    placeholder: 'servingEndpoint 123',
-    tip: '',
+    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.'
   },
 };

web/pages/components/config/edit-storage.tsx

@@ -18,6 +18,7 @@ import {
 } from '../../../utils/input-statuses';
 import TextField from './form-textfield';
 import FormStatusIndicator from './form-status-indicator';
+import {isValidUrl} from '../../../utils/urls';
 
 const { Panel } = Collapse;
 
@@ -27,7 +28,7 @@ function checkSaveable(formValues: any, currentValues: any) {
   const { endpoint, accessKey, secret, bucket, region, enabled, servingEndpoint, acl } = formValues;
   // if fields are filled out and different from what's in store, then return true
   if (enabled) {
-    if (!!endpoint && !!accessKey && !!secret && !!bucket && !!region) {
+    if (!!endpoint && isValidUrl(endpoint) && !!accessKey && !!secret && !!bucket && !!region) {
       if (
         endpoint !== currentValues.endpoint ||
         accessKey !== currentValues.accessKey ||
@@ -188,7 +189,7 @@ export default function EditStorage() {
         </div>
 
         <Collapse className="advanced-section">
-          <Panel header="Advanced Settings" key="1">
+          <Panel header="Optional Settings" key="1">
             <div className="field-container">
               <TextField
                 {...S3_TEXT_FIELDS_INFO.acl}

web/pages/config-storage.tsx

@@ -8,6 +8,12 @@ export default function ConfigStorageInfo() {
   return (
     <>
       <Title level={2}>Storage</Title>
+      <p>
+        Owncast supports optionally using external storage providers to distribute your video.  Learn more about this by visiting our <a href="https://owncast.online/docs/storage/">Storage Documentation</a>.
+      </p>
+      <p>
+        Configuring this incorrectly will likely cause your video to be unplayable.  Double check the documentation for your storage provider on how to configure the bucket you created for Owncast.
+      </p>
       <EditStorage />
     </>
   );