Skip to content

Commit

Permalink
Merge pull request #7 from Nel-Q/revert-6-feature/ui-refactor
Browse files Browse the repository at this point in the history 
Revert "Feature/UI refactor"
  • Loading branch information
@Nel-Q
Nel-Q authored Mar 5, 2024
2 parents d084fac + 8c87049 commit e2981f8
Show file tree
Hide file tree
Showing 8 changed files with 261 additions and 522 deletions.
4 changes: 4 additions & 0 deletions src/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
.App {
text-align: center;
}

.App-logo {
height: 40vmin;
pointer-events: none;
Expand Down
127 changes: 65 additions & 62 deletions src/components/BottomBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,67 +133,16 @@ switch (cameraSelected) {
}

return (

<div className="row w-100 position-absolute bottom-0 p-0 m-0 footerRow">
<div className="col-12 d-flex flex-row align-items-center text-dark p-0 m-0" style={{ backgroundColor: 'var(--secondary)' }}>
<button type="button"
className="col h-100 border-0 border-end border-dark text-center font-size-2 font-size-3-xl" onClick={handleShowPowerModal}>
<i className="d-block bi bi-power mb-1 mb-xl-3 font-size-4 font-size-5-xl"></i>
<span className="d-block">System Off</span>
</button>
<button type="button"
className="col h-100 border-0 border-end border-dark text-center font-size-2 font-size-3-xl" onClick={handleShowVolumeModal}>
<i className="d-block bi bi-volume-up-fill mb-1 mb-xl-3 font-size-4 font-size-5-xl"></i>
<span className="d-block">Presentation Volume</span>
</button>
<button type="button"
className="col h-100 border-0 border-end border-dark text-center font-size-2 font-size-3-xl" onClick={handleShowMicModal}>
<i className="d-block bi bi-mic-fill mb-1 mb-xl-3 font-size-4 font-size-5-xl"></i>
<span className="d-block">Microphones</span>
</button>
<button type="button"
className="col h-100 border-0 border-end border-dark text-center font-size-2 font-size-3-xl" onClick={handleShowCamModal}>
<i className="d-block bi bi-camera-video-fill mb-1 mb-xl-3 font-size-4 font-size-5-xl"></i>
<span className="d-block">Camera Controls</span>
</button>
{/* Audio Statuses */}
<div className="col h-100 border-end border-dark pt-1 pt-xl-4 px-1">
<div className="d-flex justify-content-between mb-xl-1">
<div className="col-9 font-size-0 font-size-1-xl m-0 p-0">Presentation Audio</div>
<div className="col-1 font-size-1-xl">
<div
className={`border-0 rounded-circle mx-auto mb-0 mb-xl-1 ${isPresentationMuted ? 'bg-warning' : 'bg-success'}`} style={{ width: '13px', height: '13px' }}>
</div>
<div className={`font-size-0 font-size-1-xl ${isPresentationMuted ? '' : ''}`}>{isPresentationMuted ? "Muted" : 'On'}</div>
</div>
</div>
<div className="d-flex justify-content-between mb-xl-1">
<div class="col-6 font-size-0 font-size-1-xl p-0 m-0">
Microphones
</div>
<div className="col-1 font-size-1-xl">
<div
className={`border-0 rounded-circle mx-auto mb-0 mb-xl-1 ${isMicMuted ? 'bg-warning' : 'bg-success'}`} style={{ width: '13px', height: '13px' }}>
</div>
<div className={`font-size-0 font-size-1-xl ${isMicMuted ? '' : ''}`}>{isMicMuted ? "Muted" : 'On'}</div>
</div>
</div>
<div className="d-flex justify-content-between mb-xl-1">
<div className="col-6 font-size-0 font-size-1-xl p-0 m-0">
Ceiling Mics
</div>
<div className="col-1 font-size-1-xl">
<div
className={`border-0 rounded-circle mx-auto mb-0 mb-xl-1 ${isCeilingMicMuted ? 'bg-warning' : 'bg-success'}`} style={{ width: '13px', height: '13px' }}>
</div>
<div className={`font-size-0 font-size-1-xl ${isPresentationMuted ? '' : ''}`}>{isCeilingMicMuted ? "Muted" : 'On'}</div>
</div>
</div>
<div className="BottomBar bg-secondary d-flex flex-row justify-content-center w-100 ">
<div className="col border border-1 border-top-0 border-bottom-0 border-dark py-1 "
onClick={handleShowPowerModal}>
<h5 className='h7'>System Off</h5>
<img
src={PowerLogo}
alt='Power icon'
size={32}
className='icon'/>
</div>
{/* /Audio Statuses */}
</div>
{/* /Row */}

<div className=''>
<CModal show={showPowerModal} onHide={handleClosePowerModal} title='System Off?'>
<div className='col-10 align-items-center ml-5 mt -5 pl-5 pt-5'>
Expand All @@ -207,9 +156,17 @@ switch (cameraSelected) {
</Button>
</div>
</div>

</CModal>
</div>

<div className={`col border border-1 border-top-0 border-bottom-0 border-dark ${showVolumeModal ? 'bg-primary' : ''}`}
onClick={handleShowVolumeModal}>
<h5 className='h7 '>Presentation Volume</h5>
<img
src={VolumeLogo}
alt='Volume fill icon'
className='img-fluid'/>
</div>
<CModal show={showVolumeModal} onHide={handleCloseVolumeModal} title='Presentation Volume'>
<div className='col-10 align-items-center mx-auto pl-5 pt-4 mt-4'>
<VolumeControl initialVolume={presentationVolume} plusJoin='22' minusJoin='21' isMuted={isPresentationMuted}/>
Expand All @@ -231,6 +188,14 @@ switch (cameraSelected) {

</CModal>

<div className={`col border border-1 border-top-0 border-bottom-0 border-dark ${showMicModal ? 'bg-primary' : ''}`}
onClick={handleShowMicModal}>
<h5 className='h7 '>Microphones</h5>
<img
src={MicLogo}
alt='Microphone icon'
className='img-fluid'/>
</div>
<CModal show={showMicModal} onHide={handleCloseMicModal} title='Microphones'>
<div className='col-10 align-items-center ml-5 mt-2 pl-5 '>
<h5 className='col-3 mb-3'>Microphones</h5>
Expand Down Expand Up @@ -263,6 +228,14 @@ switch (cameraSelected) {

</CModal>

<div className={`col border border-1 border-top-0 border-bottom-0 border-dark ${showCamModal ? 'bg-primary' : ''}`}
onClick={handleShowCamModal}>
<h5 className='h7'>Camera Controls</h5>
<img
src={CameraLogo}
alt='Camera icon'
className='img-fluid'/>
</div>
<CModal show={showCamModal} onHide={handleCloseCamModal} title="Camera Controls">
<h5>Select Camera:</h5>
<div className='col-10 d-flex flex-row justify-content-between mx-auto py-4'>
Expand Down Expand Up @@ -335,7 +308,37 @@ switch (cameraSelected) {
</div>
</div>
)}
</CModal>
</CModal>
<div className="col border border-1 border-top-0 border-bottom-0 border-right-0 border-dark">
<div className=' d-flex flex-row justify-content-between'>
<h5 className='h8 mb-0 ml-0'>Presentation Audio</h5>
<div className={`d-flex flex-column pt-1 ${isPresentationMuted ? 'pl-1' : ''}`}>
<div className={`rounded-circle ${isPresentationMuted ? 'bg-warning ml-4' : 'bg-success ml-2'}`}
style={{width:'10px', height: '10px'}}></div>
<h6 className={`h9 ${isPresentationMuted ? '' : 'pl-1'}`}>{isPresentationMuted ? "Muted" : 'On'}</h6>
</div>
</div>
<div className='d-flex flex-row justify-content-between'>
<h5 className='h8 mb-0 ml-0'>Microphones</h5>
<div className={`d-flex flex-column pt-1 ${isMicMuted ? 'pl-0' : ''}`}>
<div className={`rounded-circle ${isMicMuted ? 'bg-warning ml-4' : 'bg-success ml-2'}`}
style={{width:'10px', height: '10px'}}></div>
<h6 className={`h9 ${isMicMuted? '' : 'pl-1'}`}>{isMicMuted ? "Muted" : 'On'}</h6>
</div>
</div>
<div className='d-flex flex-row justify-content-between '>
<h5 className='h8 mb-0 ml-0'>Ceiling Mics</h5>
<div className={`d-flex flex-column pt-1 ${isCeilingMicMuted ? 'pl-3' : ''}`}>
<div className={`rounded-circle ${isCeilingMicMuted ? 'bg-warning ml-4 ' : 'bg-success ml-2'}`}
style={{width:'10px', height: '10px'}}></div>
<h6 className={`h9 ${isCeilingMicMuted ? '' : 'pl-1'}`}>{isCeilingMicMuted ? "Muted" : 'On'}</h6>
</div>
</div>

</div>



</div>
);
};
Expand Down
102 changes: 45 additions & 57 deletions src/components/DisplayArea.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,25 +155,24 @@ function DisplayArea({sourceSelected, displayJoin, side, showAnnotationJoin, sho
}
switch(sourceSelected) {
case 'PC':
message = <p>Please use the keyboard and mouse to start.</p>;
message = <h5 className='h6'>Please use the keyboard and mouse to start.</h5>;
break;
case 'Laptop':
message = <p>Connect your device to start presenting.</p>;
message = <h5 className='h6'>Connect your device to start presenting.</h5>;
break;
case 'Wireless':
message = <span>
<p>Enter the address below into your browser and follow the instructions
message = <div>
<h5 className='h6'>Enter the address below into your browser and follow the instructions
to present wirelessly.
</p>
</h5>
<p className='text-info'>{(ipAdd == "") ? "123.210.123.210" : ipAdd}</p>
</span>
;
</div>;
break;
case 'ConfCall':
message = <span>
<p>Select the button below to dial your number.</p>
message = <div>
<h5 className='h6'>Select the button below to dial your number.</h5>
<Button className="btn btn-info rounded-pill">Conference Call</Button>
</span>;
</div>;
break;
case 'DocCam':
message = <div className='d-flex flex-column'>
Expand Down Expand Up @@ -257,7 +256,7 @@ function DisplayArea({sourceSelected, displayJoin, side, showAnnotationJoin, sho
break;
case 'BluRay':
message = <div>
<p className='h6'>Your Blu-Ray content is being displayed.</p>
<h5 className='h6'>Your Blu-Ray content is being displayed.</h5>
<Button className=' btn-info rounded-pill' onClick={handleShowBluRayModal}>
<h6>Blu-Ray Controls</h6></Button>
<CModal show={bluRayClicked} onHide={handleCloseBluRayModal} title="BluRay Controls">
Expand Down Expand Up @@ -374,64 +373,52 @@ function DisplayArea({sourceSelected, displayJoin, side, showAnnotationJoin, sho
</div>;
break;
default:
message = <p>Select a source to the {side} to present.</p>
message = <h5 className='h6'>Select a source to the {side} to present.</h5>
}
return(
<div>
<div className="row m-0">
<div className='d-flex align-items-end flex-column'>
<div className='col-12 m-0 p-0'>
{(sourceSelected == '') ?
<div className='col bg-dark text-white text-center font-size-3 font-size-4-xl pt-3 pt-xl-4 sourceStatus'>
<p>Display {displayNum} is off</p>
<div className='bg-dark text-white p-4'>
<h5 className='h6'>Display {displayNum} is off</h5>
</div> :
<div className={`col text-center font-size-3 font-size-4-xl p-2 p-xl-3 sourceStatus ${(isMuted ? 'bg-warning' : 'bg-success')}`}>
<p>{isMuted ? `Display ${displayNum} is muted.` : `Display ${displayNum} is on.`}</p>
<div className={isMuted ? 'bg-warning p-4' : 'bg-success p-4'}>
<h5 className={isMuted ? 'h6' : 'h6'}>{isMuted ? `Display ${displayNum} is muted` : `Display ${displayNum} is on`}</h5>
</div>}
</div>

<div className="row p-0 m-0">
<div className="col text-center font-size-3 font-size-4-xl py-3 contentArea">

<div className='col-12 pt-5 inputMessageArea'>
{message}
</div>
</div>

{/* Button Row */}
<div className="row align-items-center m-0 font-size-2 font-size-3-xl contentAreaButtonRow">
{isMuted ?
<div className="col-6 p-0 text-center">
<button type="button"
className="d-flex align-items-center border-0 rounded-circle text-center text-white mx-auto mb-2 circleIcon"
style={{ backgroundColor: 'var(--cyan)' }} data-bs-toggle="button" onClick={() => toggleMute(displayJoin)}>
<i
className="d-inline-block bi bi-camera-video-off font-size-4 font-size-5-xl mx-auto"></i>
</button>
<div className="font-size-2 font-size-3-xl">Unmute Display</div>
</div> :
<div className="col-6 p-0 text-center">
<button type="button"
className="d-flex align-items-center border-0 rounded-circle text-center text-dark mx-auto mb-2 circleIcon"
style={{ backgroundColor: '#D5D5D5' }} data-bs-toggle="button" onClick={() => toggleMute(displayJoin)}>
<i className="d-inline-block bi bi-camera-video-fill font-size-4 font-size-5-xl mx-auto"></i>
</button>
<div className="font-size-2 font-size-3-xl">Mute Display</div>

{/* icon row */}
<div className='d-flex col-12 justify-content-around pb-3'>
{isMuted ?
<div className='col-6 p-0' onClick={() => toggleMute(displayJoin)}>
<div className='rounded-circle bg-info pb-3 text-white mx-auto displayAreaRoundIcon' >

<i class="bi bi-camera-video-off"></i>
</div>
<h5 className='h7 mb-0'>Unmute Display</h5>
</div> :
<div className='col-6 p-0' onClick={() => toggleMute(displayJoin)}>
<div className='rounded-circle pb-3 mx-auto displayAreaRoundIcon'>
<i className="bi bi-camera-video"></i>
</div>
<h5 className='h7 mb-0'>Mute Display</h5>
</div>}
<div className='col-6 p-0'>

<div className='col-6 p-0' onClick={handleShowDisplayModal}>
{isClicked ?
<button type="button"
className="d-flex align-items-center border-0 rounded-circle text-center text-dark mx-auto mb-2 circleIcon"
style={{ backgroundColor: 'var(--cyan)'}} onClick={handleShowDisplayModal}>
<i class="d-inline-block bi bi-gear-fill font-size-4 font-size-5-xl mx-auto"></i>
</button> :
<button type="button"
className="d-flex align-items-center border-0 rounded-circle text-center text-dark mx-auto mb-2 circleIcon"
style={{ backgroundColor: '#D5D5D5'}} onClick={handleShowDisplayModal}>
<i class="d-inline-block bi bi-gear-fill font-size-4 font-size-5-xl mx-auto"></i>
</button>}
<div className='font-size-2 font-size-3-xl'>Display Settings</div>
<div className='rounded-circle bg-info pb-3 mx-auto displayAreaRoundIcon'>
<i class="bi bi-gear-fill"></i>
</div> :
<div className='rounded-circle pb-3 mx-auto displayAreaRoundIcon'>
<i class="bi bi-gear-fill"></i>
</div>}
<h5 className='h7 mb-0'>Display Settings</h5>
</div>
</div>

{/* Display Serttings Modal */}
<div>
<CModal show={isClicked} onHide={handleCloseDisplayModal} title="Display Settings">
<div className='d-flex flex-column justify-content-center'>
<h5 className='pb-2'>Display {displayNum}</h5>
Expand Down Expand Up @@ -514,6 +501,7 @@ function DisplayArea({sourceSelected, displayJoin, side, showAnnotationJoin, sho
</div>
</CModal>
</div>

</div>
)
}
Expand Down
Loading

0 comments on commit e2981f8

Please sign in to comment.