Skip to content

Commit 8d31220

Browse files
fraisaifraisai
committed
edited inline styling
1 parent 1327fa1 commit 8d31220

File tree

2 files changed

+185
-43
lines changed

2 files changed

+185
-43
lines changed

‎dist/src/components/VideoCall.js

Lines changed: 141 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -347,19 +347,19 @@ const VideoCall = ({ URL, mediaOptions }) => {
347347
isEnded ? (_b = peerRef.current) === null || _b === void 0 ? void 0 : _b.close() : (_c = ws.current) === null || _c === void 0 ? void 0 : _c.send(JSON.stringify(LeavePayload));
348348
remoteVideo.current.srcObject = null;
349349
}
350-
const buttonStyling = {
351-
backgroundColor: '#C2FBD7',
352-
borderRadius: '50px',
353-
borderWidth: '0',
354-
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 8px',
355-
color: '#008000',
356-
cursor: 'pointer',
357-
display: 'inline-block',
358-
fontFamily: 'Arial, Helvetica, sans-serif',
359-
fontSize: '1em',
360-
height: '50px',
361-
padding: '0 25px',
362-
};
350+
// const buttonStyling = {
351+
// backgroundColor: '#C2FBD7',
352+
// borderRadius: '50px',
353+
// borderWidth: '0',
354+
// boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 8px',
355+
// color: '#008000',
356+
// cursor: 'pointer',
357+
// display: 'inline-block',
358+
// fontFamily: 'Arial, Helvetica, sans-serif',
359+
// fontSize: '1em',
360+
// height: '50px',
361+
// padding: '0 25px',
362+
// };
363363
/* 'conditionally rendering' if WebSocket has a value otherwise on page re-rendering events
364364
multiple WebSocket connections will be made and error
365365
every user when one closes their browser
@@ -368,26 +368,140 @@ const VideoCall = ({ URL, mediaOptions }) => {
368368
ws.current ?
369369
react_1.default.createElement(Socket_1.default, { ws: ws.current, getUsers: getUsers, handleReceiveCall: handleReceiveCall, handleAnswer: handleAnswer, handleNewIceCandidate: handleNewIceCandidate, endCall: endCall }) :
370370
'',
371-
react_1.default.createElement("div", { className: '', style: { display: 'flex', justifyContent: 'space-around', flexDirection: 'column', padding: '10px', marginTop: '10%' } },
371+
react_1.default.createElement("div", { className: '', style: {
372+
display: 'flex',
373+
flexDirection: 'column',
374+
justifyContent: 'space-around',
375+
marginTop: '10%',
376+
padding: '10px',
377+
} },
372378
username === '' ?
373379
react_1.default.createElement(react_1.default.Fragment, null,
374-
react_1.default.createElement("div", { className: 'input-div', style: { display: 'flex', flexDirection: 'column', top: '2%', left: '2%', margin: '0 auto', height: '100px', width: '100px', justifyContent: 'center', alignItems: 'center' } },
375-
react_1.default.createElement("input", { className: '', type: 'text', placeholder: 'username', id: "username-field", onChange: (e) => userField = e.target.value, style: { paddingBottom: '40px', width: '200px' } }),
376-
react_1.default.createElement("button", { className: '', "data-testid": 'submit-username-btn', onClick: () => handleUsername(), style: buttonStyling }, "Submit Username")))
380+
react_1.default.createElement("div", { className: 'input-div', style: {
381+
alignItems: 'center',
382+
display: 'flex',
383+
flexDirection: 'column',
384+
height: '100px',
385+
justifyContent: 'center',
386+
left: '2%',
387+
margin: '0 auto',
388+
top: '2%',
389+
width: '100px'
390+
} },
391+
react_1.default.createElement("input", { className: '', type: 'text', placeholder: 'username', id: "username-field", onChange: (e) => userField = e.target.value, style: {
392+
paddingBottom: '40px',
393+
width: '200px'
394+
} }),
395+
react_1.default.createElement("button", { className: '', "data-testid": 'submit-username-btn', onClick: () => handleUsername(),
396+
// style={ buttonStyling }
397+
style: {
398+
backgroundColor: '#C2FBD7',
399+
borderRadius: '50px',
400+
borderWidth: '0',
401+
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 8px',
402+
color: '#008000',
403+
cursor: 'pointer',
404+
display: 'inline-block',
405+
fontFamily: 'Arial, Helvetica, sans-serif',
406+
fontSize: '1em',
407+
height: '50px',
408+
padding: '0 25px',
409+
} }, "Submit Username")))
377410
:
378-
react_1.default.createElement("div", { className: 'users-list', style: { fontFamily: 'Arial, Helvetica, sans-serif', fontSize: '16px' } },
411+
react_1.default.createElement("div", { className: 'users-list', style: {
412+
fontFamily: 'Arial, Helvetica, sans-serif',
413+
fontSize: '16px'
414+
} },
379415
"Users connected: ",
380416
users),
381-
react_1.default.createElement("div", { id: "main-video-container", className: '', style: { display: 'flex', flexDirection: 'row', gap: '100px', justifyContent: 'center', alignItems: 'center' } },
382-
react_1.default.createElement("div", { id: "local-video-container", className: '', style: { display: 'flex', flexDirection: 'column', alignContent: 'center', justifyContent: 'center' } },
417+
react_1.default.createElement("div", { id: "main-video-container", className: '', style: {
418+
alignItems: 'center',
419+
display: 'flex',
420+
flexDirection: 'row',
421+
gap: '100px',
422+
justifyContent: 'center'
423+
} },
424+
react_1.default.createElement("div", { id: "local-video-container", className: '', style: {
425+
alignContent: 'center',
426+
display: 'flex',
427+
flexDirection: 'column',
428+
justifyContent: 'center'
429+
} },
383430
react_1.default.createElement(VideoComponent_1.default, { video: localVideo, mediaOptions: mediaOptions }),
384-
react_1.default.createElement("div", { id: "local-button-container", className: '', style: { display: 'flex', flexDirection: 'row', gap: '10px', justifyContent: 'center', marginTop: '10px' } },
385-
react_1.default.createElement("button", { className: 'share-btn', "data-testid": 'share-screen-btn', onClick: () => shareScreen(), style: buttonStyling }, "Share Screen"),
386-
react_1.default.createElement("button", { className: 'end-btn', "data-testid": 'end-call-btn', onClick: () => endCall(false), style: Object.assign(Object.assign({}, buttonStyling), { backgroundColor: '#ff6961', color: '#28282B' }) }, "End Call"))),
387-
react_1.default.createElement("div", { id: "remote-video-container", className: '', style: { display: 'flex', flexDirection: 'column', alignContent: 'center', justifyContent: 'center' } },
431+
react_1.default.createElement("div", { id: "local-button-container", className: '', style: {
432+
display: 'flex',
433+
flexDirection: 'row',
434+
gap: '10px',
435+
justifyContent: 'center',
436+
marginTop: '10px'
437+
} },
438+
react_1.default.createElement("button", { className: 'share-btn', "data-testid": 'share-screen-btn', onClick: () => shareScreen(),
439+
// style={buttonStyling}
440+
style: {
441+
backgroundColor: '#C2FBD7',
442+
borderRadius: '50px',
443+
borderWidth: '0',
444+
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 8px',
445+
color: '#008000',
446+
cursor: 'pointer',
447+
display: 'inline-block',
448+
fontFamily: 'Arial, Helvetica, sans-serif',
449+
fontSize: '1em',
450+
height: '50px',
451+
padding: '0 25px',
452+
} }, "Share Screen"),
453+
react_1.default.createElement("button", { className: 'end-btn', "data-testid": 'end-call-btn', onClick: () => endCall(false),
454+
// style={{
455+
// ...buttonStyling,
456+
// backgroundColor:'#ff6961',
457+
// color:'#28282B'
458+
// }}
459+
style: {
460+
// backgroundColor: '#C2FBD7',
461+
backgroundColor: '#ff6961',
462+
borderRadius: '50px',
463+
borderWidth: '0',
464+
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 8px',
465+
// color: '#008000',
466+
color: '#28282B',
467+
cursor: 'pointer',
468+
display: 'inline-block',
469+
fontFamily: 'Arial, Helvetica, sans-serif',
470+
fontSize: '1em',
471+
height: '50px',
472+
padding: '0 25px',
473+
} }, "End Call"))),
474+
react_1.default.createElement("div", { id: "remote-video-container", className: '', style: {
475+
alignContent: 'center',
476+
display: 'flex',
477+
flexDirection: 'column',
478+
justifyContent: 'center'
479+
} },
388480
react_1.default.createElement(VideoComponent_1.default, { video: remoteVideo, mediaOptions: mediaOptions }),
389-
react_1.default.createElement("div", { id: "remote-button-container", className: '', style: { display: 'flex', flexDirection: 'row', gap: '10px', justifyContent: 'center', marginTop: '10px' } },
390-
react_1.default.createElement("button", { className: '', "data-testid": 'call-btn', onClick: handleOffer, style: buttonStyling }, "Call"),
391-
react_1.default.createElement("input", { className: '', type: 'text', id: 'receiverName', style: { marginLeft: '2%' } })))))));
481+
react_1.default.createElement("div", { id: "remote-button-container", className: '', style: {
482+
display: 'flex',
483+
flexDirection: 'row',
484+
gap: '10px',
485+
justifyContent: 'center',
486+
marginTop: '10px'
487+
} },
488+
react_1.default.createElement("button", { className: '', "data-testid": 'call-btn', onClick: handleOffer,
489+
// style={buttonStyling}
490+
style: {
491+
backgroundColor: '#C2FBD7',
492+
borderRadius: '50px',
493+
borderWidth: '0',
494+
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 8px',
495+
color: '#008000',
496+
cursor: 'pointer',
497+
display: 'inline-block',
498+
fontFamily: 'Arial, Helvetica, sans-serif',
499+
fontSize: '1em',
500+
height: '50px',
501+
padding: '0 25px',
502+
} }, "Call"),
503+
react_1.default.createElement("input", { className: '', type: 'text', id: 'receiverName', style: {
504+
marginLeft: '2%'
505+
} })))))));
392506
};
393507
exports.default = VideoCall;

‎lib/src/components/VideoCall.tsx

Lines changed: 44 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -367,19 +367,19 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
367367
remoteVideo.current.srcObject = null;
368368
}
369369

370-
const buttonStyling = {
371-
backgroundColor: '#C2FBD7',
372-
borderRadius: '50px',
373-
borderWidth: '0',
374-
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 8px',
375-
color: '#008000',
376-
cursor: 'pointer',
377-
display: 'inline-block',
378-
fontFamily: 'Arial, Helvetica, sans-serif',
379-
fontSize: '1em',
380-
height: '50px',
381-
padding: '0 25px',
382-
};
370+
// const buttonStyling = {
371+
// backgroundColor: '#C2FBD7',
372+
// borderRadius: '50px',
373+
// borderWidth: '0',
374+
// boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 8px',
375+
// color: '#008000',
376+
// cursor: 'pointer',
377+
// display: 'inline-block',
378+
// fontFamily: 'Arial, Helvetica, sans-serif',
379+
// fontSize: '1em',
380+
// height: '50px',
381+
// padding: '0 25px',
382+
// };
383383

384384
/* 'conditionally rendering' if WebSocket has a value otherwise on page re-rendering events
385385
multiple WebSocket connections will be made and error
@@ -544,10 +544,25 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
544544
className='end-btn'
545545
data-testid='end-call-btn'
546546
onClick={() => endCall(false)}
547+
// style={{
548+
// ...buttonStyling,
549+
// backgroundColor:'#ff6961',
550+
// color:'#28282B'
551+
// }}
547552
style={{
548-
...buttonStyling,
553+
// backgroundColor: '#C2FBD7',
549554
backgroundColor:'#ff6961',
550-
color:'#28282B'
555+
borderRadius: '50px',
556+
borderWidth: '0',
557+
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 8px',
558+
// color: '#008000',
559+
color:'#28282B',
560+
cursor: 'pointer',
561+
display: 'inline-block',
562+
fontFamily: 'Arial, Helvetica, sans-serif',
563+
fontSize: '1em',
564+
height: '50px',
565+
padding: '0 25px',
551566
}}
552567
>
553568
End Call
@@ -587,7 +602,20 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
587602
className=''
588603
data-testid='call-btn'
589604
onClick={handleOffer}
590-
style={buttonStyling}
605+
// style={buttonStyling}
606+
style={{
607+
backgroundColor: '#C2FBD7',
608+
borderRadius: '50px',
609+
borderWidth: '0',
610+
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 8px',
611+
color: '#008000',
612+
cursor: 'pointer',
613+
display: 'inline-block',
614+
fontFamily: 'Arial, Helvetica, sans-serif',
615+
fontSize: '1em',
616+
height: '50px',
617+
padding: '0 25px',
618+
}}
591619
>
592620
Call
593621
</button>

0 commit comments

Comments
 (0)