Skip to content

Chwhilar/transcription indicator #231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 10, 2024
Merged

Chwhilar/transcription indicator #231

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ff93e77
transcription indicator
chriswhilar Jun 10, 2024
04fba03
Merge branch 'main' into chwhilar/transcription-indicator
chriswhilar Jun 10, 2024
44b73b1
recordign adn transcription
chriswhilar Jun 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 17 additions & 15 deletions Project/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -75,6 +75,7 @@ h3,
h4,
h5,
h6 {
color: #ffffff;
margin-top: 0;
margin-bottom: .5rem;
font-weight: unset;
Expand Down Expand Up @@ -259,30 +260,31 @@ 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 {
font-size: 14px;
}

.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;
}
Expand Down Expand Up @@ -313,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 #adadad;
color: #000000;
background-color: #e1e1e1;
border: 1px solid #e1e1e1;
outline: none;
margin-right: 1em;
margin-bottom: 1em;
Expand All @@ -340,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 #adadad;
color: #000000;
background-color: #e1e1e1;
border: 1px solid #e1e1e1;
outline: none;
margin-right: 1em;
margin-bottom: 1em;
Expand Down
26 changes: 23 additions & 3 deletions Project/src/MakeCall/CallCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down Expand Up @@ -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();
Expand All @@ -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);
}
Expand Down Expand Up @@ -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);
}
}

Expand Down Expand Up @@ -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())})
}
Expand Down Expand Up @@ -1101,14 +1117,19 @@ 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>
{
this.state.callState !== 'Connected' &&
<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>
{
Expand Down Expand Up @@ -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">
{
Expand Down
42 changes: 3 additions & 39 deletions Project/src/MakeCall/Login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ export default class Login extends React.Component {
},
customTurn: {
useCustomTurn: false,
isLoading: false,
turn: null
},
isTeamsUser: false,
Expand Down Expand Up @@ -295,55 +294,23 @@ 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
}
});
}
}

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,
Expand All @@ -358,8 +325,7 @@ export default class Login extends React.Component {
this.setState({
...this.state,
customTurn: {
...this.state.customTurn,
isLoading: true
...this.state.customTurn
}
});

Expand All @@ -368,7 +334,6 @@ export default class Login extends React.Component {
...this.state,
customTurn: {
...this.state.customTurn,
isLoading: false,
turn: res
}
});
Expand All @@ -379,7 +344,6 @@ export default class Login extends React.Component {
customTurn: {
...this.state.customTurn,
useCustomTurn: false,
isLoading: false,
turn: null
}
});
Expand Down
2 changes: 1 addition & 1 deletion Project/src/MakeCall/MakeCall.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
1 change: 0 additions & 1 deletion Project/src/MakeCall/NetworkConfiguration/TurnConfiguration.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
18 changes: 0 additions & 18 deletions Project/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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;
Expand Down
Loading