Merge pull request #280 from Azure-Samples/vriosrada/4240940/add-ovc-reason

#4240940: Adding ovc change reason

Author: vriosrada-msft

Project/src/MakeCall/CallCard.js

@@ -493,7 +493,7 @@ export default class CallCard extends React.Component {
             const ovcFeature = this.call.feature(Features.OptimalVideoCount);
             const ovcChangedHandler = () => {
                 if (this.state.ovc !== ovcFeature.optimalVideoCount) {
-                    this.setState({ ovc: ovcFeature.optimalVideoCount });
+                    this.setState({ ovc: ovcFeature.optimalVideoCount, lastOvcChangeReason: ovcFeature.lastOvcChangeReason });
                     this.updateListOfParticipantsToRender('optimalVideoCountChanged');
                 }
             }

Project/src/MakeCall/CurrentCallInformation.js

@@ -5,6 +5,7 @@ import { AzureLogger } from '@azure/logger';
 const CurrentCallInformation = ({ sentResolution, call }) => {
     const [ovcFeature, setOvcFeature] = useState();
     const [optimalVideoCount, setOptimalVideoCount] = useState(1);
+    const [lastOvcChangeReason, setLastOvcChangeReason] = useState('Unknown');
 
     useEffect(() => {
         try {
@@ -24,6 +25,9 @@ const CurrentCallInformation = ({ sentResolution, call }) => {
 
     const optimalVideoCountChanged = () => {
         setOptimalVideoCount(ovcFeature.optimalVideoCount);
+        if (ovcFeature.lastOvcChangeReason) {
+            setLastOvcChangeReason(ovcFeature.lastOvcChangeReason);
+        }
     };
 
     return (
@@ -34,7 +38,12 @@ const CurrentCallInformation = ({ sentResolution, call }) => {
                 sentResolution && <div>Sent Resolution: {sentResolution}</div>
             }
             {
-                ovcFeature && <div>Optimal Video Count: {optimalVideoCount}</div>
+                ovcFeature && (
+                    <>
+                        <div>Optimal Video Count: {optimalVideoCount}</div>
+                        <div>Last OVC Change Reason: {lastOvcChangeReason}</div>
+                    </>
+                )
             }           
         </div>
     );