Merge branch 'develop' into fix/ImplementPasswordRules

web/utils/alert-message-context.tsx

@@ -1,5 +1,4 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState, FC, ReactElement } from 'react';
 
 export const AlertMessageContext = React.createContext({
   message: null,
@@ -7,7 +6,11 @@ export const AlertMessageContext = React.createContext({
   setMessage: (text?: string) => null,
 });
 
-const AlertMessageProvider = ({ children }) => {
+export type AlertMessageProviderProps = {
+  children: ReactElement;
+};
+
+const AlertMessageProvider: FC<AlertMessageProviderProps> = ({ children }) => {
   const [message, setMessage] = useState('');
 
   const providerValue = {
@@ -19,8 +22,4 @@ const AlertMessageProvider = ({ children }) => {
   );
 };
 
-AlertMessageProvider.propTypes = {
-  children: PropTypes.element.isRequired,
-};
-
 export default AlertMessageProvider;

web/utils/config-constants.tsx

@@ -428,28 +428,28 @@ export const VIDEO_BITRATE_SLIDER_MARKS = {
 // VIDEO VARIANT FORM - encoder preset
 // CPU
 export const ENCODER_PRESET_SLIDER_MARKS = {
-  1: {
+  0: {
     style: {
       marginLeft: '15px',
     },
-    label: <p>lowest</p>,
+    label: 'lowest',
   },
+  1: '',
   2: '',
   3: '',
-  4: '',
-  5: {
+  4: {
     style: {
       marginLeft: '-15px',
     },
-    label: <p>highest</p>,
+    label: 'highest',
   },
 };
 export const ENCODER_PRESET_TOOLTIPS = {
-  1: 'Lowest hardware usage - lowest quality video',
-  2: 'Low hardware usage - low quality video',
-  3: 'Medium hardware usage - average quality video',
-  4: 'High hardware usage - high quality video',
-  5: 'Highest hardware usage - higher quality video',
+  0: 'Lowest hardware usage - lowest quality video',
+  1: 'Low hardware usage - low quality video',
+  2: 'Medium hardware usage - average quality video',
+  3: 'High hardware usage - high quality video',
+  4: 'Highest hardware usage - higher quality video',
 };
 
 export const ENCODER_RECOMMENDATION_THRESHOLD = {

web/utils/server-status-context.tsx

@@ -1,7 +1,6 @@
 // TODO: add a notication after updating info that changes will take place either on a new stream or server restart. may be different for each field.
 
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState, useEffect, FC, ReactElement } from 'react';
 
 import { STATUS, fetchData, FETCH_INTERVAL, SERVER_CONFIG } from './apis';
 import { ConfigDetails, UpdateArgs } from '../types/config-section';
@@ -9,6 +8,7 @@ import { DEFAULT_VARIANT_STATE } from './config-constants';
 
 export const initialServerConfigState: ConfigDetails = {
   streamKeys: [],
+  streamKeyOverridden: false,
   adminPassword: '',
   instanceDetails: {
     customStyles: '',
@@ -101,7 +101,11 @@ export const ServerStatusContext = React.createContext({
   setFieldInConfigState: (args: UpdateArgs) => null,
 });
 
-const ServerStatusProvider = ({ children }) => {
+export type ServerStatusProviderProps = {
+  children: ReactElement;
+};
+
+const ServerStatusProvider: FC<ServerStatusProviderProps> = ({ children }) => {
   const [status, setStatus] = useState(initialServerStatusState);
   const [config, setConfig] = useState(initialServerConfigState);
 
@@ -164,8 +168,4 @@ const ServerStatusProvider = ({ children }) => {
   );
 };
 
-ServerStatusProvider.propTypes = {
-  children: PropTypes.element.isRequired,
-};
-
 export default ServerStatusProvider;