[mirotalksfu] - UI-UX improve
هذا الالتزام موجود في:
Miroslav Pejic
@@ -96,85 +96,167 @@ access to use this app.
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<button id="openNavButton" class="hidden">☰</button>
|
||||
<div id="control" class="sidenav hidden">
|
||||
<button id="closeNavButton" class="closebtn">×</button>
|
||||
<button id="shareButton" class="hidden"><i class="fas fa-share-alt"></i> Share</button>
|
||||
<div class="dropdown">
|
||||
<button id="settingsButton" class="hidden"><i class="fas fa-cogs"></i> Settings</button>
|
||||
<div id="settings" class="dropdown-content fadein">
|
||||
<div id="devicesList">
|
||||
<i class="fas fa-video"></i> Video
|
||||
<select id="videoSelect" class="form-select text-light bg-dark"></select>
|
||||
<br />
|
||||
<i class="fas fa-microphone"></i> Microphone
|
||||
<select id="microphoneSelect" class="form-select text-light bg-dark"></select>
|
||||
<br />
|
||||
<i class="fas fa-volume-up"></i> Speaker
|
||||
<select id="speakerSelect" class="form-select text-light bg-dark"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button id="recButton" class="hidden"><i class="fas fa-record-vinyl"></i> Recording</button>
|
||||
<div id="recording" class="dropdown-content fadein">
|
||||
<div id="recordingCommand" class="recording">
|
||||
<button id="startRecButton" class="hidden"><i class="fas fa-record-vinyl"></i> Start</button>
|
||||
<button id="stopRecButton" class="hidden"><i class="fas fa-stop-circle"></i> Stop</button>
|
||||
<button id="pauseRecButton" class="hidden"><i class="far fa-pause-circle"></i> Pause</button>
|
||||
<button id="resumeRecButton" class="hidden"><i class="far fa-play-circle"></i> Resume</button>
|
||||
<p id="recordingStatus">🔴 REC 0s</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button id="chatButton" class="hidden"><i class="fas fa-comments"></i> Chat</button>
|
||||
<button id="fullScreenButton" class="hidden"><i class="fas fa-expand-alt"></i> Full screen</button>
|
||||
<button id="swapCameraButton" class="hidden"><i class="fas fa-sync-alt"></i> Swap Cam</button>
|
||||
<button id="raiseHandButton" class="hidden"><i class="fas fa-hand-paper"></i> Raise hand</button>
|
||||
<button id="lowerHandButton" class="hidden"><i class="fas fa-hand-paper"></i> Lower hand</button>
|
||||
<button id="startAudioButton" class="hidden"><i class="fas fa-microphone-slash"></i> Start audio</button>
|
||||
<button id="stopAudioButton" class="hidden"><i class="fas fa-microphone"></i> Stop audio</button>
|
||||
<button id="startVideoButton" class="hidden"><i class="fas fa-video-slash"></i> Start video</button>
|
||||
<button id="stopVideoButton" class="hidden"><i class="fas fa-video"></i> Stop video</button>
|
||||
<button id="startScreenButton" class="hidden"><i class="fas fa-desktop"></i> Start screen</button>
|
||||
<button id="stopScreenButton" class="hidden"><i class="fas fa-stop-circle"></i> Stop screen</button>
|
||||
<button id="fileShareButton" class="hidden"><i class="fas fa-folder-open"></i> File Sharing</button>
|
||||
<div class="dropdown">
|
||||
<button id="youTubeShareButton" class="hidden"><i class="fab fa-youtube"></i> YouTube</button>
|
||||
<div id="youTubeSettings" class="dropdown-content fadein">
|
||||
<div id="youTubeOptions">
|
||||
<button id="youTubeCloseBtn"><i class="fas fa-times"></i> Close Video</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button id="whiteboardButton" class="hidden">
|
||||
<i class="fas fa-chalkboard-teacher"></i> Whiteboard
|
||||
</button>
|
||||
<div id="whiteboardSettings" class="dropdown-content fadein">
|
||||
<div id="whiteboardOptions">
|
||||
<i class="fas fa-pencil-alt"></i> Line width
|
||||
<input id="wbDrawingLineWidthEl" type="range" value="3" min="1" max="15" />
|
||||
<br />
|
||||
<i class="fas fa-palette"></i> Line color
|
||||
<br />
|
||||
<input id="wbDrawingColorEl" type="color" value="#FFFFFF" />
|
||||
<br />
|
||||
<i class="fas fa-palette"></i> Background color
|
||||
<br />
|
||||
<input id="wbBackgroundColorEl" type="color" value="#000000" />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button id="participantsButton" class="hidden"><i class="fas fa-users"></i> Participants</button>
|
||||
<button id="lockRoomButton" class="hidden"><i class="fas fa-lock-open"></i> Lock room</button>
|
||||
<button id="unlockRoomButton" class="hidden"><i class="fas fa-lock"></i> Unlock room</button>
|
||||
<button id="aboutButton" class="hidden"><i class="fas fa-question"></i> About</button>
|
||||
<button id="exitButton" class="hidden"><i class="fas fa-phone-slash"></i> Leave</button>
|
||||
<button id="sessionTime" class="far fa-clock"></button>
|
||||
<div id="control" class="fadein">
|
||||
<button id="shareButton" class="hidden"><i class="fas fa-share-alt"></i></button>
|
||||
<button id="startAudioButton" class="hidden"><i class="fas fa-microphone-slash"></i></button>
|
||||
<button id="stopAudioButton" class="hidden"><i class="fas fa-microphone"></i></button>
|
||||
<button id="swapCameraButton" class="hidden"><i class="fas fa-sync-alt"></i></button>
|
||||
<button id="startVideoButton" class="hidden"><i class="fas fa-video-slash"></i></button>
|
||||
<button id="stopVideoButton" class="hidden"><i class="fas fa-video"></i></button>
|
||||
<button id="chatButton" class="hidden"><i class="fas fa-comments"></i></button>
|
||||
<button id="startScreenButton" class="hidden"><i class="fas fa-desktop"></i></button>
|
||||
<button id="stopScreenButton" class="hidden"><i class="fas fa-stop-circle"></i></button>
|
||||
<button id="settingsButton" class="hidden"><i class="fas fa-cogs"></i></button>
|
||||
<button id="exitButton" class="hidden"><i class="fas fa-phone-slash"></i></button>
|
||||
</div>
|
||||
|
||||
<section id="mySettings" class="fadein center hidden">
|
||||
<header id="mySettingsHeader">
|
||||
<button id="mySettingsCloseBtn" class="fas fa-times"></button>
|
||||
</header>
|
||||
<main>
|
||||
<br />
|
||||
|
||||
<div class="tab">
|
||||
<button id="tabDevicesBtn" class="fas fa-cog tablinks"></button>
|
||||
<button id="tabRoomBtn" class="fas fa-home tablinks"></button>
|
||||
<button id="tabRecordingBtn" class="fas fa-record-vinyl tablinks"></button>
|
||||
<button id="tabWhiteboardBtn" class="fas fa-chalkboard-teacher tablinks"></button>
|
||||
<button id="tabYoutubeBtn" class="fab fa-youtube tablinks"></button>
|
||||
<button id="tabStylingBtn" class="fas fa-palette tablinks"></button>
|
||||
</div>
|
||||
|
||||
<div id="tabDevices" class="tabcontent">
|
||||
<br />
|
||||
<i class="fas fa-video"></i>
|
||||
<p>Video:</p>
|
||||
<select id="videoSelect" class="form-select text-light bg-dark"></select>
|
||||
<br />
|
||||
<i class="fas fa-microphone"></i>
|
||||
<p>Microphone:</p>
|
||||
<select id="microphoneSelect" class="form-select text-light bg-dark"></select>
|
||||
<br />
|
||||
<i class="fas fa-volume-up"></i>
|
||||
<p>Speaker:</p>
|
||||
<select id="speakerSelect" class="form-select text-light bg-dark"></select>
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div id="tabWhiteboard" class="tabcontent">
|
||||
<br />
|
||||
<button id="whiteboardButton">
|
||||
<i class="fas fa-chalkboard-teacher"></i>
|
||||
<p>Open whiteboard</p>
|
||||
</button>
|
||||
<br />
|
||||
<i class="fas fa-pencil-alt"></i>
|
||||
<p>Line width:</p>
|
||||
<input id="wbDrawingLineWidthEl" type="range" value="3" min="1" max="15" />
|
||||
<br />
|
||||
<i class="fas fa-palette"></i>
|
||||
<p>Line color:</p>
|
||||
<input id="wbDrawingColorEl" type="color" value="#FFFFFF" />
|
||||
<br />
|
||||
<i class="fas fa-palette"></i>
|
||||
<p>Background color:</p>
|
||||
<input id="wbBackgroundColorEl" type="color" value="#000000" />
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div id="tabRoom" class="tabcontent">
|
||||
<br />
|
||||
<button id="fullScreenButton" class="hidden">
|
||||
<i class="fas fa-expand-alt"></i>
|
||||
<p>Full screen mode</p>
|
||||
</button>
|
||||
<br />
|
||||
<button id="raiseHandButton" class="hidden">
|
||||
<i class="fas fa-hand-paper"></i>
|
||||
<p>Raise hand</p>
|
||||
</button>
|
||||
<button id="lowerHandButton" class="hidden">
|
||||
<i class="fas fa-hand-paper"></i>
|
||||
<p>Lower hand</p>
|
||||
</button>
|
||||
<br />
|
||||
<button id="fileShareButton" class="hidden">
|
||||
<i class="fas fa-folder-open"></i>
|
||||
<p>File sharing</p>
|
||||
</button>
|
||||
<br />
|
||||
<button id="participantsButton" class="hidden">
|
||||
<i class="fas fa-users"></i>
|
||||
<p>Participants</p>
|
||||
</button>
|
||||
<br />
|
||||
<button id="lockRoomButton" class="hidden">
|
||||
<i class="fas fa-lock-open"></i>
|
||||
<p>Lock room</p>
|
||||
</button>
|
||||
<button id="unlockRoomButton" class="hidden">
|
||||
<i class="fas fa-lock"></i>
|
||||
<p>Unlock room</p>
|
||||
</button>
|
||||
<br />
|
||||
<button id="aboutButton" class="hidden">
|
||||
<i class="fas fa-question"></i>
|
||||
<p>About</p>
|
||||
</button>
|
||||
<br />
|
||||
<button id="sessionTime"></button>
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div id="tabRecording" class="tabcontent">
|
||||
<br />
|
||||
<button id="startRecButton" class="hidden">
|
||||
<i class="fas fa-record-vinyl"></i>
|
||||
<p>Start recording</p>
|
||||
</button>
|
||||
<button id="stopRecButton" class="hidden">
|
||||
<i class="fas fa-stop-circle"></i>
|
||||
<p>Stop recording</p>
|
||||
</button>
|
||||
<button id="pauseRecButton" class="hidden">
|
||||
<i class="far fa-pause-circle"></i>
|
||||
<p>Pause recording</p>
|
||||
</button>
|
||||
<button id="resumeRecButton" class="hidden">
|
||||
<i class="far fa-play-circle"></i>
|
||||
<p>Resume recording</p>
|
||||
</button>
|
||||
<br />
|
||||
<p id="recordingStatus">🔴 REC 0s</p>
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div id="tabYoutube" class="tabcontent">
|
||||
<br />
|
||||
<button id="youTubeShareButton">
|
||||
<i class="fab fa-youtube"></i>
|
||||
<p>Share YouTube</p>
|
||||
</button>
|
||||
<br />
|
||||
<button id="youTubeCloseBtn" class="hidden">
|
||||
<i class="fas fa-times"></i>
|
||||
<p>Close YouTube</p>
|
||||
</button>
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div id="tabStyling" class="tabcontent">
|
||||
<br />
|
||||
<p>Buttons bar:</p>
|
||||
<br />
|
||||
<select id="BtnsBarPosition" class="form-select text-light bg-dark">
|
||||
<option value="vertical">Vertical</option>
|
||||
<option value="horizontal">Horizontal</option>
|
||||
</select>
|
||||
<br />
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
<div id="videoMediaContainer">
|
||||
<!-- <div class="Camera"></div> -->
|
||||
</div>
|
||||
|
||||
المرجع في مشكلة جديدة
حظر مستخدم