Skip to content

Commit 52cb87a

Browse files
fraisaifraisai
committed
updated jsdoc for handleReceiveCall
1 parent 4d93c23 commit 52cb87a

File tree

2 files changed

+45
-46
lines changed

2 files changed

+45
-46
lines changed

‎dist/src/components/VideoCall.js

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -181,17 +181,15 @@ const VideoCall = ({ URL, mediaOptions }) => {
181181
}
182182
});
183183
/**
184-
* @function callUser
185-
* @desc Constructs a new RTCPeerConnection object that also adds the local client's media tracks to this object.
186-
* @param {string} userID
184+
* @function callUser - Constructs a new RTCPeerConnection object that also adds the local client's media tracks to this object.
185+
* @param {string} userID
187186
*/
188187
const callUser = (userID) => {
189188
peerRef.current = createPeer(userID);
190189
localStream.current.getTracks().forEach((track) => senders.current.push(peerRef.current.addTrack(track, localStream.current)));
191190
};
192191
/**
193-
* @function createPeer
194-
* @desc Creates a new RTCPeerConnection object, which represents a WebRTC connection between the local device and a remote peer and adds event listeners to it
192+
* @function createPeer - Creates a new RTCPeerConnection object, which represents a WebRTC connection between the local device and a remote peer and adds event listeners to it
195193
* @param {string} userID
196194
* @returns {RTCPeerConnection} RTCPeerConnection object
197195
* @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionstatechange_event and other events
@@ -304,23 +302,23 @@ const VideoCall = ({ URL, mediaOptions }) => {
304302
ACTION_TYPE: ANSWER,
305303
receiver: data.sender,
306304
sender: username,
307-
payload: (_a = peerRef.current) === null || _a === void 0 ? void 0 : _a.localDescription
305+
payload: (_a = peerRef.current) === null || _a === void 0 ? void 0 : _a.localDescription // localDescription is an RTCSessionDescription describing the session for the local end of the connection
308306
};
309307
ws.current.send(JSON.stringify(answerPayload));
310308
});
311309
}
312310
/**
313-
* @desc The local client's remote description is set as the incoming Answer SDP to define who we are trying to connect to on the other end of the connection.
314-
* @param {object} data SDP answer
311+
* @function handleAnswer - The local client's remote description is set as the incoming Answer SDP to define who we are trying to connect to on the other end of the connection.
312+
* @param {object} data SDP answer
315313
*/
316314
function handleAnswer(data) {
317315
var _a;
318316
const remoteDesc = new RTCSessionDescription(data.payload);
319317
(_a = peerRef.current) === null || _a === void 0 ? void 0 : _a.setRemoteDescription(remoteDesc).catch((e) => console.log(e));
320318
}
321319
/**
322-
* @desc As the local client's ICE Candidates are being generated, they are being sent to the remote client to complete the connection
323-
* @param {RTCPeerConnectionIceEvent} e
320+
* @function handleIceCandidateEvent As the local client's ICE Candidates are being generated, they are being sent to the remote client to complete the connection
321+
* @param {RTCPeerConnectionIceEvent} e
324322
*/
325323
function handleIceCandidateEvent(e) {
326324
if (e.candidate) { // Contains the RTCIceCandidate containing the candidate associated with the event,
@@ -333,23 +331,23 @@ const VideoCall = ({ URL, mediaOptions }) => {
333331
}
334332
}
335333
/**
336-
* @desc ICE Candidates being sent from each end of the connection are added to a list of potential connection methods until both ends have a way of connecting to eachother
337-
* @param {Object} data containing a property payload with an incoming ICE Candidate
334+
* @function handleNewIceCandidate ICE Candidates being sent from each end of the connection are added to a list of potential connection methods until both ends have a way of connecting to eachother
335+
* @param {Object} data containing a property payload with an incoming ICE Candidate
338336
*/
339337
function handleNewIceCandidate(data) {
340338
var _a;
341339
const candidate = new RTCIceCandidate(data.payload);
342340
(_a = peerRef.current) === null || _a === void 0 ? void 0 : _a.addIceCandidate(candidate).catch((e) => console.log(e));
343341
}
344342
/**
345-
* @desc Once the connection is made, the RTCRtpReceiver interface is exposed and this function is then able to extract the MediaStreamTrack from the sender's RTCPeerConnection.
346-
* @param {RTCTrackEvent} e An Event Object, also contains the stream
343+
* @function handleTrackEvent - Once the connection is made, the RTCRtpReceiver interface is exposed and this function is then able to extract the MediaStreamTrack from the sender's RTCPeerConnection.
344+
* @param {RTCTrackEvent} e An Event Object, also contains the stream
347345
*/
348346
function handleTrackEvent(e) {
349347
remoteVideo.current.srcObject = e.streams[0];
350348
}
351349
/**
352-
* @desc Enables screen sharing using MediaSession.getDisplayMedia()
350+
* @function shareScreen - Enables screen sharing using MediaSession.getDisplayMedia()
353351
*/
354352
function shareScreen() {
355353
//TODOS: On a new connection the local and streamed screen bugs producing: Rtconnect.jsx:273 Uncaught (in promise) DOMException: The peer connection is closed.
@@ -367,8 +365,8 @@ const VideoCall = ({ URL, mediaOptions }) => {
367365
});
368366
}
369367
/**
370-
* @desc if any client chooses to end their call then the person who ends the call first closes their connection and resets the remote video component while also sending a message to the remote peer to also go through the same process.
371-
* @param {boolean} isEnded
368+
* @function endCall - if any client chooses to end their call then the person who ends the call first closes their connection and resets the remote video component while also sending a message to the remote peer to also go through the same process.
369+
* @param {boolean} isEnded
372370
*/
373371
function endCall(isEnded) {
374372
var _a, _b, _c;
@@ -401,7 +399,7 @@ const VideoCall = ({ URL, mediaOptions }) => {
401399
ws.current ?
402400
react_1.default.createElement(Socket_1.default, { ws: ws.current, getUsers: getUsers, handleReceiveCall: handleReceiveCall, handleAnswer: handleAnswer, handleNewIceCandidate: handleNewIceCandidate, endCall: endCall }) :
403401
'',
404-
react_1.default.createElement("div", { className: '', style: {
402+
react_1.default.createElement("div", { className: 'div1', style: {
405403
display: 'flex',
406404
flexDirection: 'column',
407405
justifyContent: 'space-around',
@@ -421,11 +419,11 @@ const VideoCall = ({ URL, mediaOptions }) => {
421419
top: '2%',
422420
width: '100px'
423421
} },
424-
react_1.default.createElement("input", { className: '', type: 'text', placeholder: 'username', id: "username-field", onChange: (e) => userField = e.target.value, style: {
422+
react_1.default.createElement("input", { className: 'input-username', type: 'text', placeholder: 'username', id: "username-field", onChange: (e) => userField = e.target.value, style: {
425423
paddingBottom: '40px',
426424
width: '200px'
427425
} }),
428-
react_1.default.createElement("button", { className: '', "data-testid": 'submit-username-btn', onClick: () => handleUsername(),
426+
react_1.default.createElement("button", { className: 'submit-username-btn', "data-testid": 'submit-username-btn', onClick: () => handleUsername(),
429427
// style={ buttonStyling }
430428
style: {
431429
backgroundColor: '#C2FBD7',
@@ -445,7 +443,7 @@ const VideoCall = ({ URL, mediaOptions }) => {
445443
fontFamily: 'Arial, Helvetica, sans-serif',
446444
fontSize: '16px'
447445
} },
448-
"Users connected: ",
446+
"Connected Users: ",
449447
users),
450448
react_1.default.createElement("div", { id: "main-video-container", className: '', style: {
451449
alignItems: 'center',
@@ -518,7 +516,7 @@ const VideoCall = ({ URL, mediaOptions }) => {
518516
justifyContent: 'center',
519517
marginTop: '10px'
520518
} },
521-
react_1.default.createElement("button", { className: '', "data-testid": 'call-btn', onClick: handleOffer,
519+
react_1.default.createElement("button", { className: 'call-btn', "data-testid": 'call-btn', onClick: handleOffer,
522520
// style={buttonStyling}
523521
style: {
524522
backgroundColor: '#C2FBD7',
@@ -533,7 +531,7 @@ const VideoCall = ({ URL, mediaOptions }) => {
533531
height: '50px',
534532
padding: '0 25px',
535533
} }, "Call"),
536-
react_1.default.createElement("input", { className: '', type: 'text', id: 'receiverName', style: {
534+
react_1.default.createElement("input", { className: 'input-receiver-name', type: 'text', id: 'receiverName', style: {
537535
marginLeft: '2%'
538536
} })))))));
539537
};

‎lib/src/components/VideoCall.tsx

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -190,18 +190,16 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
190190
};
191191

192192
/**
193-
* @function callUser
194-
* @desc Constructs a new RTCPeerConnection object that also adds the local client's media tracks to this object.
195-
* @param {string} userID
193+
* @function callUser - Constructs a new RTCPeerConnection object that also adds the local client's media tracks to this object.
194+
* @param {string} userID
196195
*/
197196
const callUser = (userID: string): void => {
198197
peerRef.current = createPeer(userID);
199198
localStream.current.getTracks().forEach((track) => senders.current.push(peerRef.current.addTrack(track, localStream.current)));
200199
};
201200

202201
/**
203-
* @function createPeer
204-
* @desc Creates a new RTCPeerConnection object, which represents a WebRTC connection between the local device and a remote peer and adds event listeners to it
202+
* @function createPeer - Creates a new RTCPeerConnection object, which represents a WebRTC connection between the local device and a remote peer and adds event listeners to it
205203
* @param {string} userID
206204
* @returns {RTCPeerConnection} RTCPeerConnection object
207205
* @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionstatechange_event and other events
@@ -325,18 +323,19 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
325323
}
326324

327325
/**
328-
* @desc The local client's remote description is set as the incoming Answer SDP to define who we are trying to connect to on the other end of the connection.
329-
* @param {object} data SDP answer
326+
* @function handleAnswer - The local client's remote description is set as the incoming Answer SDP to define who we are trying to connect to on the other end of the connection.
327+
* @param {object} data SDP answer
330328
*/
331329
function handleAnswer(data: { payload: RTCSessionDescriptionInit } ): void {
332330
const remoteDesc = new RTCSessionDescription(data.payload);
333331
peerRef.current
334332
?.setRemoteDescription(remoteDesc)
335333
.catch((e) => console.log(e));
336334
}
335+
337336
/**
338-
* @desc As the local client's ICE Candidates are being generated, they are being sent to the remote client to complete the connection
339-
* @param {RTCPeerConnectionIceEvent} e
337+
* @function handleIceCandidateEvent As the local client's ICE Candidates are being generated, they are being sent to the remote client to complete the connection
338+
* @param {RTCPeerConnectionIceEvent} e
340339
*/
341340
function handleIceCandidateEvent(e: RTCPeerConnectionIceEvent) {
342341
if (e.candidate) { // Contains the RTCIceCandidate containing the candidate associated with the event,
@@ -350,8 +349,8 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
350349
}
351350

352351
/**
353-
* @desc ICE Candidates being sent from each end of the connection are added to a list of potential connection methods until both ends have a way of connecting to eachother
354-
* @param {Object} data containing a property payload with an incoming ICE Candidate
352+
* @function handleNewIceCandidate ICE Candidates being sent from each end of the connection are added to a list of potential connection methods until both ends have a way of connecting to eachother
353+
* @param {Object} data containing a property payload with an incoming ICE Candidate
355354
*/
356355
function handleNewIceCandidate(data: { payload: RTCIceCandidateInit }): void {
357356
const candidate = new RTCIceCandidate(data.payload);
@@ -361,14 +360,15 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
361360
}
362361

363362
/**
364-
* @desc Once the connection is made, the RTCRtpReceiver interface is exposed and this function is then able to extract the MediaStreamTrack from the sender's RTCPeerConnection.
365-
* @param {RTCTrackEvent} e An Event Object, also contains the stream
363+
* @function handleTrackEvent - Once the connection is made, the RTCRtpReceiver interface is exposed and this function is then able to extract the MediaStreamTrack from the sender's RTCPeerConnection.
364+
* @param {RTCTrackEvent} e An Event Object, also contains the stream
366365
*/
367366
function handleTrackEvent(e: RTCTrackEvent) : void{
368367
remoteVideo.current.srcObject = e.streams[0];
369368
}
369+
370370
/**
371-
* @desc Enables screen sharing using MediaSession.getDisplayMedia()
371+
* @function shareScreen - Enables screen sharing using MediaSession.getDisplayMedia()
372372
*/
373373
function shareScreen(): void {
374374
//TODOS: On a new connection the local and streamed screen bugs producing: Rtconnect.jsx:273 Uncaught (in promise) DOMException: The peer connection is closed.
@@ -388,9 +388,10 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
388388
};
389389
});
390390
}
391+
391392
/**
392-
* @desc if any client chooses to end their call then the person who ends the call first closes their connection and resets the remote video component while also sending a message to the remote peer to also go through the same process.
393-
* @param {boolean} isEnded
393+
* @function endCall - if any client chooses to end their call then the person who ends the call first closes their connection and resets the remote video component while also sending a message to the remote peer to also go through the same process.
394+
* @param {boolean} isEnded
394395
*/
395396
function endCall(isEnded: boolean): void {
396397
const LeavePayload: payloadObj = {
@@ -437,14 +438,14 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
437438
}
438439

439440
<div
440-
className=''
441+
className='div1'
441442
style={{
442443
display: 'flex',
443444
flexDirection:'column',
444445
justifyContent: 'space-around',
445446
marginTop: '10%',
446447
padding:'10px',
447-
} }
448+
}}
448449
>
449450

450451
{
@@ -465,7 +466,7 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
465466
}}
466467
>
467468
<input
468-
className=''
469+
className='input-username'
469470
type='text'
470471
placeholder='username'
471472
id="username-field"
@@ -477,7 +478,7 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
477478
></input>
478479

479480
<button
480-
className=''
481+
className='submit-username-btn'
481482
data-testid='submit-username-btn'
482483
onClick={() => handleUsername()}
483484
// style={ buttonStyling }
@@ -509,7 +510,7 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
509510
fontSize: '16px'
510511
}}
511512
>
512-
Users connected: {users}
513+
Connected Users: {users}
513514
</div>
514515
}
515516

@@ -634,7 +635,7 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
634635
>
635636

636637
<button
637-
className=''
638+
className='call-btn'
638639
data-testid='call-btn'
639640
onClick={handleOffer}
640641
// style={buttonStyling}
@@ -656,7 +657,7 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
656657
</button>
657658

658659
<input
659-
className=''
660+
className='input-receiver-name'
660661
type='text'
661662
id='receiverName'
662663
style={{

0 commit comments

Comments
 (0)