[mirotalksfu] - add profile tab

public/css/Room.css

@@ -318,6 +318,12 @@ body {
     border-radius: 5px;
 }
 
+#myProfileAvatar {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding: 5px;
+}
+
 .form-check-input {
     cursor: pointer;
 }

public/js/Room.js

@@ -157,6 +157,7 @@ function initClient() {
         setTippy('tabRecordingBtn', 'Recording', 'top');
         setTippy('tabRoomBtn', 'Room', 'top');
         setTippy('tabVideoShareBtn', 'Video share', 'top');
+        setTippy('tabProfileBtn', 'Profile', 'top');
         setTippy('tabAspectBtn', 'Aspect', 'top');
         setTippy('tabStylingBtn', 'Styling', 'top');
         setTippy('tabLanguagesBtn', 'Languages', 'top');
@@ -815,6 +816,8 @@ function joinRoom(peer_name, room_id) {
     } else {
         console.log('05 ----> join Room ' + room_id);
         roomId.innerText = room_id;
+        userName.innerText = peer_name;
+        isUserPresenter.innerText = isPresenter;
         rc = new RoomClient(
             localAudio,
             remoteAudios,
@@ -838,6 +841,7 @@ function joinRoom(peer_name, room_id) {
 }
 
 function roomIsReady() {
+    myProfileAvatar.setAttribute('src', rc.genAvatarSvg(peer_name, 64));
     BUTTONS.main.exitButton && show(exitButton);
     BUTTONS.main.shareButton && show(shareButton);
     BUTTONS.main.hideMeButton && show(hideMeButton);
@@ -1031,6 +1035,9 @@ function handleButtons() {
     tabAspectBtn.onclick = (e) => {
         rc.openTab(e, 'tabAspect');
     };
+    tabProfileBtn.onclick = (e) => {
+        rc.openTab(e, 'tabProfile');
+    };
     tabStylingBtn.onclick = (e) => {
         rc.openTab(e, 'tabStyling');
     };

public/js/RoomClient.js

@@ -325,6 +325,7 @@ class RoomClient {
             let my_peer_info = peers.get(peer).peer_info;
             console.log('07.1 ----> My Peer info', my_peer_info);
             isPresenter = window.localStorage.isReconnected === 'true' ? isPresenter : my_peer_info.peer_presenter;
+            this.getId('isUserPresenter').innerText = isPresenter;
             window.localStorage.isReconnected = false;
             handleRules(isPresenter);
         }
@@ -3937,6 +3938,7 @@ class RoomClient {
                                     // Only the presenter can lock the room
                                     if (isPresenter || res.peerCounts == 1) {
                                         isPresenter = true;
+                                        this.getId('isUserPresenter').innerText = isPresenter;
                                         data.password = room_password;
                                         this.socket.emit('roomAction', data);
                                         this.roomStatus(action);

public/views/Room.html

@@ -161,6 +161,9 @@ access to use this app.
                     <button id="tabVideoShareBtn" class="fab fa-youtube tablinks">
                         <p class="tabButtonText">Media</p>
                     </button>
+                    <button id="tabProfileBtn" class="fas fa-user">
+                        <p class="tabButtonText">Profile</p>
+                    </button>
                     <button id="tabAspectBtn" class="fas fa-screwdriver-wrench tablinks">
                         <p class="tabButtonText">Aspect</p>
                     </button>
@@ -415,6 +418,32 @@ access to use this app.
                         <br />
                     </div>
 
+                    <div id="tabProfile" class="tabcontent">
+                        <div>
+                            <img id="myProfileAvatar" />
+                        </div>
+                        <table class="settingsTable">
+                            <tr>
+                                <td>
+                                    <div class="title">
+                                        <i class="fa-solid fa-user"></i>
+                                        <p>Username:</p>
+                                        <p id="userName">UserName</p>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <div class="title">
+                                        <i class="fa-solid fa-user-shield"></i>
+                                        <p>Presenter:</p>
+                                        <p id="isUserPresenter">true</p>
+                                    </div>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+
                     <div id="tabAspect" class="tabcontent">
                         <br />
                         <div class="title">