From ff93e7753632a02a2ed5c7062dfec58da72d30e0 Mon Sep 17 00:00:00 2001
From: Christopher Whilar <chwhilar@microsoft.com>
Date: Mon, 10 Jun 2024 08:22:55 -0400
Subject: [PATCH 1/2] transcription indicator

---
 Project/src/App.css                           | 24 ++++++-----
 Project/src/MakeCall/Login.js                 | 42 ++-----------------
 Project/src/MakeCall/MakeCall.js              |  2 +-
 .../NetworkConfiguration/TurnConfiguration.js |  1 -
 Project/webpack.config.js                     | 18 --------
 5 files changed, 17 insertions(+), 70 deletions(-)

diff --git a/Project/src/App.css b/Project/src/App.css
index a71958a9..0e852c9a 100644
--- a/Project/src/App.css
+++ b/Project/src/App.css
@@ -49,8 +49,8 @@ body {
     sans-serif !important;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #161514;
-  color: #edebe9 !important;
+  background-color: #0D1114;
+  color: #c5c5c5 !important;
   font-weight: 500;
 }
 
@@ -75,6 +75,7 @@ h3,
 h4,
 h5,
 h6 {
+  color: #ffffff;
   margin-top: 0;
   margin-bottom: .5rem;
   font-weight: unset;
@@ -259,17 +260,18 @@ ul {
 }
 
 .ms-TextField-fieldGroup {
-  height:23px;
-  border-bottom: 1px solid #605e5c !important;
   border: 0px;
   box-sizing: unset;
+  background-color: #0D1114;
 }
 
 .ms-TextField-field {
-  font-size: 14px;
-  background-color: #161514;
+  border: 1px solid #3b3b3b !important;
+  background-color: #0D1114;
   color: #edebe9;
-  height: 23px;
+  border-radius: 20px;
+  height: 35px;
+  padding-left: 1em;
 }
 
 .ms-TextField-field::placeholder {
@@ -277,12 +279,12 @@ ul {
 }
 
 .ms-TextField-field:hover {
-  background-color: #161514;
+  background-color: #0D1114;
   color: #edebe9;
 }
 
 .ms-TextField-wrapper>label {
-  color: #edebe9;
+  color: #c5c5c5;
   font-weight: 400;
   font-size: 12px;
 }
@@ -315,7 +317,7 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox-
   height: 40px;
   color: #edebe9;
   background-color: #201f1e;
-  border: 1px solid #adadad;
+  border: 1px solid #3b3b3b;
   outline: none;
   margin-right: 1em;
   margin-bottom: 1em;
@@ -342,7 +344,7 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox-
   height: 40px;
   color: #edebe9;
   background-color: #201f1e;
-  border: 1px solid #adadad;
+  border: 1px solid #3b3b3b;
   outline: none;
   margin-right: 1em;
   margin-bottom: 1em;
diff --git a/Project/src/MakeCall/Login.js b/Project/src/MakeCall/Login.js
index 90ce2915..9d3bda36 100644
--- a/Project/src/MakeCall/Login.js
+++ b/Project/src/MakeCall/Login.js
@@ -46,7 +46,6 @@ export default class Login extends React.Component {
             },
             customTurn: {
                 useCustomTurn: false,
-                isLoading: false,
                 turn: null
             },
             isTeamsUser: false,
@@ -295,40 +294,15 @@ export default class Login extends React.Component {
                 ...this.state,
                 customTurn: {
                     ...this.state.customTurn,
-                    useCustomTurn: true,
-                    isLoading: true
+                    useCustomTurn: true
                 }
             });
-    
-            this.getOrCreateCustomTurnConfiguration().then(res => {
-                this.setState({
-                    ...this.state,
-                    customTurn: {
-                        ...this.state.customTurn,
-                        useCustomTurn: !!res ?? false,
-                        isLoading: false,
-                        turn: res
-                    }
-                });
-            }).catch(error => {
-                console.error(`Not able to fetch custom TURN: ${error}`);
-                this.setState({
-                    ...this.state,
-                    customTurn: {
-                        ...this.state.customTurn,
-                        useCustomTurn: false,
-                        isLoading: false,
-                        turn: null
-                    }
-                });
-            });
         } else {
             this.setState({
                 ...this.state,
                 customTurn: {
                     ...this.state.customTurn,
                     useCustomTurn: false,
-                    isLoading: false,
                     turn: null
                 }
             });
@@ -336,14 +310,7 @@ export default class Login extends React.Component {
     }
 
     getOrCreateCustomTurnConfiguration = async () => {
-        if (!this.currentCustomTurnConfig || Date.now() > new Date(this.currentCustomTurnConfig.expiresOn).getTime()) {
-            // Credentials expired. Try to get new ones.
-            const response = await fetch(`${window.location.protocol}//${window.location.host}/customRelayConfig`);
-            const relayConfig = (await response.json()).relayConfig;
-            this.currentCustomTurnConfig = relayConfig;
-        }
-
-        const iceServers = this.currentCustomTurnConfig.iceServers.map(iceServer => {
+        const iceServers = this.state.customTurn.turn.iceServers.map(iceServer => {
             return {
                 urls: [...iceServer.urls],
                 username: iceServer.username,
@@ -358,8 +325,7 @@ export default class Login extends React.Component {
         this.setState({
             ...this.state,
             customTurn: {
-                ...this.state.customTurn,
-                isLoading: true
+                ...this.state.customTurn
             }
         });
 
@@ -368,7 +334,6 @@ export default class Login extends React.Component {
                 ...this.state,
                 customTurn: {
                     ...this.state.customTurn,
-                    isLoading: false,
                     turn: res
                 }
             });
@@ -379,7 +344,6 @@ export default class Login extends React.Component {
                 customTurn: {
                     ...this.state.customTurn,
                     useCustomTurn: false,
-                    isLoading: false,
                     turn: null
                 }
             });
diff --git a/Project/src/MakeCall/MakeCall.js b/Project/src/MakeCall/MakeCall.js
index ec2505ea..f192e99c 100644
--- a/Project/src/MakeCall/MakeCall.js
+++ b/Project/src/MakeCall/MakeCall.js
@@ -129,7 +129,7 @@ export default class MakeCall extends React.Component {
                 setLogLevel('verbose');
 
                 const proxyConfiguration = userDetails.proxy.useProxy ? { url: userDetails.proxy.url } : undefined;
-                const turnConfiguration = userDetails.customTurn.useCustomTurn && !userDetails.customTurn.isLoading ? userDetails.customTurn.turn : undefined;
+                const turnConfiguration = userDetails.customTurn.useCustomTurn ? userDetails.customTurn.turn : undefined;
                 this.callClient = new CallClient({
                     diagnostics: {
                         appName: 'azure-communication-services',
diff --git a/Project/src/MakeCall/NetworkConfiguration/TurnConfiguration.js b/Project/src/MakeCall/NetworkConfiguration/TurnConfiguration.js
index 367bc957..d6d704cc 100644
--- a/Project/src/MakeCall/NetworkConfiguration/TurnConfiguration.js
+++ b/Project/src/MakeCall/NetworkConfiguration/TurnConfiguration.js
@@ -27,7 +27,6 @@ export const TurnConfiguration = (props) => {
             Turn configuration
             <Checkbox 
                 className='mt-2'
-                disabled={props.customTurn.isLoading}
                 label='Use custom TURN'
                 checked={props.customTurn.useCustomTurn}
                 onChange={props.handleCustomTurnChecked}
diff --git a/Project/webpack.config.js b/Project/webpack.config.js
index 2fdda127..15ca5c18 100644
--- a/Project/webpack.config.js
+++ b/Project/webpack.config.js
@@ -4,7 +4,6 @@ const config = require("./serverConfig.json");
 const clientConfig = require("./clientConfig.json");
 const axios = require("axios");
 const bodyParser = require('body-parser');
-const CommunicationRelayClient = require('@azure/communication-network-traversal').CommunicationRelayClient;
 const msal = require('@azure/msal-node');
 
 const {authConfig, authScopes} = require('./oAuthConfig');
@@ -197,23 +196,6 @@ module.exports = {
                     res.sendStatus(500);
                 }
             });
-            devServer.app.get('/customRelayConfig', async (req, res) => {
-                console.log('Requesting custom TURN server configuration');
-                try {
-                    const relayClient = new CommunicationRelayClient(config.connectionString);
-                    const relayConfig = await relayClient.getRelayConfiguration();
-                    if (relayConfig) {
-                        res.status(200).json({
-                            relayConfig
-                        });
-                    } else {
-                        throw 'No relay config returned from service';
-                    }
-                } catch (e) {
-                    console.log(`Error creating custom TURN configuration: ${e}`);
-                    res.sendStatus(500);
-                }
-            });
             devServer.app.post('/teamsPopupLogin', async (req, res) => {
                 try {
                     const aadToken = req.body.aadToken;

From 44b73b1d667f15faded8007eb29d43de17484cc0 Mon Sep 17 00:00:00 2001
From: Christopher Whilar <chwhilar@microsoft.com>
Date: Mon, 10 Jun 2024 09:23:48 -0400
Subject: [PATCH 2/2] recordign adn transcription

---
 Project/src/App.css              | 12 ++++++------
 Project/src/MakeCall/CallCard.js | 26 +++++++++++++++++++++++---
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/Project/src/App.css b/Project/src/App.css
index 3a5c21f2..d13e61b4 100644
--- a/Project/src/App.css
+++ b/Project/src/App.css
@@ -315,9 +315,9 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox-
 .primary-button {
   font-size: 14px;
   height: 40px;
-  color: #edebe9;
-  background-color: #201f1e;
-  border: 1px solid #3b3b3b;
+  color: #000000;
+  background-color: #e1e1e1;
+  border: 1px solid #e1e1e1;
   outline: none;
   margin-right: 1em;
   margin-bottom: 1em;
@@ -342,9 +342,9 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox-
 .secondary-button {
   font-size: 14px;
   height: 40px;
-  color: #edebe9;
-  background-color: #201f1e;
-  border: 1px solid #3b3b3b;
+  color: #000000;
+  background-color: #e1e1e1;
+  border: 1px solid #e1e1e1;
   outline: none;
   margin-right: 1em;
   margin-bottom: 1em;
diff --git a/Project/src/MakeCall/CallCard.js b/Project/src/MakeCall/CallCard.js
index 2d699213..f302064f 100644
--- a/Project/src/MakeCall/CallCard.js
+++ b/Project/src/MakeCall/CallCard.js
@@ -41,6 +41,8 @@ export default class CallCard extends React.Component {
         this.capabilitiesFeature = this.call.feature(Features.Capabilities);
         this.capabilities = this.capabilitiesFeature.capabilities;
         this.dominantSpeakersFeature = this.call.feature(Features.DominantSpeakers);
+        this.recordingFeature = this.call.feature(Features.Recording);
+        this.transcriptionFeature = this.call.feature(Features.Transcription);
         if (Features.Reaction) {
             this.meetingReaction = this.call.feature(Features.Reaction);
         }
@@ -95,7 +97,9 @@ export default class CallCard extends React.Component {
             showDataChannel: false,
             showAddParticipantPanel: false,
             reactionRows:[],
-            pptLiveActive: false
+            pptLiveActive: false,
+            isRecordingActive: false,
+            isTranscriptionActive: false
         };
         this.selectedRemoteParticipants = new Set();
         this.dataChannelRef = React.createRef();
@@ -122,6 +126,8 @@ export default class CallCard extends React.Component {
         this.call.feature(Features.Spotlight).off('spotlightChanged', this.spotlightStateChangedHandler);
         this.call.feature(Features.RaiseHand).off('raisedHandEvent', this.raiseHandChangedHandler);
         this.call.feature(Features.RaiseHand).off('loweredHandEvent', this.raiseHandChangedHandler);
+        this.recordingFeature.off('isRecordingActiveChanged', this.isRecordingActiveChangedHandler);
+        this.transcriptionFeature.off('isTranscriptionActiveChanged', this.isTranscriptionActiveChangedHandler);
         if (Features.Reaction) {
             this.call.feature(Features.Reaction).off('reaction', this.reactionChangeHandler);
         }
@@ -442,6 +448,8 @@ export default class CallCard extends React.Component {
             this.dominantSpeakersFeature.on('dominantSeapkersChanged', this.dominantSpeakersChanged);
             this.meetingReaction?.on('reaction', this.reactionChangeHandler);
             this.pptLiveFeature?.on('isActiveChanged', this.pptLiveChangedHandler);
+            this.recordingFeature.on('isRecordingActiveChanged', this.isRecordingActiveChangedHandler);
+            this.transcriptionFeature.on('isTranscriptionActiveChanged', this.isTranscriptionActiveChangedHandler);
         }
     }
 
@@ -503,6 +511,14 @@ export default class CallCard extends React.Component {
             this.identifier, this.spotlightFeature.getSpotlightedParticipants())})
     }
 
+    isRecordingActiveChangedHandler = (event) => {
+        this.setState({ isRecordingActive: this.recordingFeature.isRecordingActive })
+    }
+
+    isTranscriptionActiveChangedHandler = (event) => {
+        this.setState({ isTranscriptionActive: this.transcriptionFeature.isTranscriptionActive })
+    }
+
     raiseHandChangedHandler = (event) => {
         this.setState({isHandRaised: utils.isParticipantHandRaised(this.identifier, this.raiseHandFeature.getRaisedHands())})
     }
@@ -1101,7 +1117,7 @@ export default class CallCard extends React.Component {
                         </MessageBar>
                     }
                 </div>
-                <div className="ms-Grid-row">
+                <div className="ms-Grid-row mb-3">
                     <div className="ms-Grid-col ms-lg6">
                         <div>
                             {
@@ -1109,6 +1125,11 @@ export default class CallCard extends React.Component {
                                 <div className="inline-block ringing-loader mr-2"></div>
                             }
                             <h2 className="inline-block">{this.state.callState !== 'Connected' ? `${this.state.callState}...` : `Connected`}</h2>
+                            {
+                                this.state.isRecordingActive && this.state.isTranscriptionActive ? <div>Recording and transcription are active</div> :
+                                this.state.isRecordingActive ? <div>Recording is active</div> :
+                                this.state.isTranscriptionActive ? <div>Transcription is active</div> : null
+                            }
                         </div>
                     </div>
                     {
@@ -1160,7 +1181,6 @@ export default class CallCard extends React.Component {
                             
                         </div>
                     }
-                    
                     <div className={this.state.isShowParticipants ? "ms-Grid-col ms-lg8" : undefined}>
                         <div className="video-grid-row">
                             {