From e8c24fd2d415f58bfc1b8efc23fffba7a47d1fa7 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Wed, 3 Feb 2021 23:24:12 -0800
Subject: [PATCH] Add alert message for global notifications

---
 web/pages/_app.tsx                            | 10 ++++---
 .../components/config/edit-server-details.tsx | 10 +++++++
 web/pages/components/config/edit-storage.tsx  | 15 ++++-------
 .../config/video-variants-table.tsx           |  5 ++++
 web/pages/components/main-layout.tsx          | 20 +++++++++++++-
 web/utils/alert-message-context.tsx           | 27 +++++++++++++++++++
 6 files changed, 73 insertions(+), 14 deletions(-)
 create mode 100644 web/utils/alert-message-context.tsx

diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
index 448ebecdd..208b832ff 100644
--- a/web/pages/_app.tsx
+++ b/web/pages/_app.tsx
@@ -10,14 +10,18 @@ import '../styles/config-formfields.scss';
 
 import { AppProps } from 'next/app';
 import ServerStatusProvider from '../utils/server-status-context';
+import AlertMessageProvider from '../utils/alert-message-context';
+
 import MainLayout from './components/main-layout';
 
 function App({ Component, pageProps }: AppProps) {
   return (
     <ServerStatusProvider>
-      <MainLayout>
-        <Component {...pageProps} />
-      </MainLayout>
+      <AlertMessageProvider>
+        <MainLayout>
+          <Component {...pageProps} />
+        </MainLayout>
+      </AlertMessageProvider>
     </ServerStatusProvider>
   );
 }
diff --git a/web/pages/components/config/edit-server-details.tsx b/web/pages/components/config/edit-server-details.tsx
index 679922121..82389086f 100644
--- a/web/pages/components/config/edit-server-details.tsx
+++ b/web/pages/components/config/edit-server-details.tsx
@@ -6,6 +6,8 @@ import { TEXTFIELD_TYPE_NUMBER, TEXTFIELD_TYPE_PASSWORD } from './form-textfield
 import TextFieldWithSubmit from './form-textfield-with-submit';
 
 import { ServerStatusContext } from '../../../utils/server-status-context';
+import { AlertMessageContext } from '../../../utils/alert-message-context';
+
 import {
   TEXTFIELD_PROPS_FFMPEG,
   TEXTFIELD_PROPS_RTMP_PORT,
@@ -18,6 +20,8 @@ import { UpdateArgs } from '../../../types/config-section';
 export default function EditInstanceDetails() {
   const [formDataValues, setFormDataValues] = useState(null);
   const serverStatusData = useContext(ServerStatusContext);
+  const { setMessage } = useContext(AlertMessageContext);
+
   const { serverConfig } = serverStatusData || {};
 
   const { streamKey, ffmpegPath, rtmpServerPort, webServerPort } = serverConfig;
@@ -46,6 +50,10 @@ export default function EditInstanceDetails() {
     });
   };
 
+  const showConfigurationRestartMessage = () => {
+    setMessage('Updating server settings requires a restart of your Owncast server.')
+  }
+
   function generateStreamKey() {
     let key = '';
     for (let i = 0; i < 3; i += 1) {
@@ -102,6 +110,7 @@ export default function EditInstanceDetails() {
         initialValue={webServerPort}
         type={TEXTFIELD_TYPE_NUMBER}
         onChange={handleFieldChange}
+        onSubmit={showConfigurationRestartMessage}
       />
       <TextFieldWithSubmit
         fieldName="rtmpServerPort"
@@ -110,6 +119,7 @@ export default function EditInstanceDetails() {
         initialValue={rtmpServerPort}
         type={TEXTFIELD_TYPE_NUMBER}
         onChange={handleFieldChange}
+        onSubmit={showConfigurationRestartMessage}
       />
     </div>
   );
diff --git a/web/pages/components/config/edit-storage.tsx b/web/pages/components/config/edit-storage.tsx
index b6df52749..2a12a6846 100644
--- a/web/pages/components/config/edit-storage.tsx
+++ b/web/pages/components/config/edit-storage.tsx
@@ -3,6 +3,8 @@ import classNames from 'classnames';
 import React, { useContext, useState, useEffect } from 'react';
 import { UpdateArgs } from '../../../types/config-section';
 import { ServerStatusContext } from '../../../utils/server-status-context';
+import { AlertMessageContext } from '../../../utils/alert-message-context';
+
 import {
   postConfigUpdateToAPI,
   API_S3_INFO,
@@ -56,6 +58,8 @@ export default function EditStorage() {
   const serverStatusData = useContext(ServerStatusContext);
   const { serverConfig, setFieldInConfigState } = serverStatusData || {};
 
+  const {message, setMessage} = useContext(AlertMessageContext);
+
   const { s3 } = serverConfig;
   const {
     accessKey = '',
@@ -114,6 +118,7 @@ export default function EditStorage() {
         setSubmitStatus(createInputStatus(STATUS_SUCCESS, 'Updated.'));
         resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
         setSaved(true);
+        setMessage('Changing your storage configuration will take place the next time you start a new stream.');
       },
       onError: (message: string) => {
         setSubmitStatus(createInputStatus(STATUS_ERROR, message));
@@ -139,14 +144,6 @@ export default function EditStorage() {
     enabled: shouldDisplayForm,
   });
 
-  const saveWarning = saved ? (<Alert
-    showIcon
-    message="Storage changes"
-    description="Your storage settings will take effect on your next stream.  If you're currently streaming you'll continue to use the storage configuration previously set."
-    type="warning"
-  />
-  ) : null;
-
   const isSaveable = checkSaveable(formDataValues, s3);
 
   return (
@@ -219,8 +216,6 @@ export default function EditStorage() {
         </Collapse>
       </div>
 
-      {saveWarning}
-
       <div className="button-container">
         <Button type="primary" onClick={handleSave} disabled={!isSaveable}>
           Save
diff --git a/web/pages/components/config/video-variants-table.tsx b/web/pages/components/config/video-variants-table.tsx
index 1ef5bdb55..83420fb05 100644
--- a/web/pages/components/config/video-variants-table.tsx
+++ b/web/pages/components/config/video-variants-table.tsx
@@ -6,7 +6,9 @@ import { Typography, Table, Modal, Button } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { DeleteOutlined } from '@ant-design/icons';
 import { ServerStatusContext } from '../../../utils/server-status-context';
+import { AlertMessageContext } from '../../../utils/alert-message-context';
 import { UpdateArgs, VideoVariant } from '../../../types/config-section';
+
 import VideoVariantForm from './video-variant-form';
 import {
   API_VIDEO_VARIANTS,
@@ -22,6 +24,7 @@ export default function CurrentVariantsTable() {
   const [displayModal, setDisplayModal] = useState(false);
   const [modalProcessing, setModalProcessing] = useState(false);
   const [editId, setEditId] = useState(0);
+  const {setMessage} = useContext(AlertMessageContext);
 
   // current data inside modal
   const [modalDataState, setModalDataState] = useState(DEFAULT_VARIANT_STATE);
@@ -72,6 +75,8 @@ export default function CurrentVariantsTable() {
         setSubmitStatus('success');
         setSubmitStatusMessage('Variants updated.');
         resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
+
+        setMessage('Updating your video configuration will take effect the next time you begin a new stream.');
       },
       onError: (message: string) => {
         setSubmitStatus('error');
diff --git a/web/pages/components/main-layout.tsx b/web/pages/components/main-layout.tsx
index db561d4f0..d8e948c7e 100644
--- a/web/pages/components/main-layout.tsx
+++ b/web/pages/components/main-layout.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link';
 import Head from 'next/head'
 import { differenceInSeconds } from "date-fns";
 import { useRouter } from 'next/router';
-import { Layout, Menu, Popover } from 'antd';
+import { Layout, Menu, Popover, Alert } from 'antd';
 
 import {
   SettingOutlined,
@@ -24,6 +24,8 @@ import { parseSecondsToDurationString } from '../../utils/format'
 
 import OwncastLogo from './logo';
 import { ServerStatusContext } from '../../utils/server-status-context';
+import { AlertMessageContext } from '../../utils/alert-message-context';
+
 import TextFieldWithSubmit from './config/form-textfield-with-submit';
 import { TEXTFIELD_PROPS_STREAM_TITLE } from './config/constants';
 
@@ -40,6 +42,8 @@ export default function MainLayout(props) {
 
   const [currentStreamTitle, setCurrentStreamTitle] = useState(streamTitle);
 
+  const alertMessage = useContext(AlertMessageContext);
+  
   const router = useRouter();
   const { route } = router || {};
 
@@ -104,6 +108,17 @@ export default function MainLayout(props) {
   const upgradeMenuItemStyle = upgradeVersion ? 'block' : 'none';
   const upgradeVersionString = upgradeVersion || '';
 
+  const clearAlertMessage = () => {
+    alertMessage.setMessage(null);
+  }
+
+  const headerAlertMessage = alertMessage.message ? ( <Alert
+    message={alertMessage.message}
+    afterClose={clearAlertMessage}
+    banner
+    closable
+  />): null;
+  
   return (
     <Layout className={appClass}>
       <Head>
@@ -229,6 +244,9 @@ export default function MainLayout(props) {
 </div>
           {statusIndicatorWithThumb}
         </Header>
+
+        {headerAlertMessage}
+        
         <Content className={adminStyles.contentMain}>{children}</Content>
 
         <Footer style={{ textAlign: "center" }}>
diff --git a/web/utils/alert-message-context.tsx b/web/utils/alert-message-context.tsx
new file mode 100644
index 000000000..1d1a13194
--- /dev/null
+++ b/web/utils/alert-message-context.tsx
@@ -0,0 +1,27 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+export const AlertMessageContext = React.createContext({
+    message: null,
+    setMessage: (text?: string) => {
+        return text;
+    }
+});
+
+const AlertMessageProvider = ({ children }) => {
+    const [message, setMessage] = useState('');
+    
+    const providerValue = {
+        message,
+        setMessage
+    }
+    return (
+        <AlertMessageContext.Provider value={providerValue}>{children}</AlertMessageContext.Provider>
+    )
+}
+
+AlertMessageProvider.propTypes = {
+    children: PropTypes.element.isRequired
+};
+
+export default AlertMessageProvider;
\ No newline at end of file