Merge branch 'main' of https://github.com/miroslavpejic85/mirotalksfu into main

public/css/Room.css

@@ -679,14 +679,16 @@ progress {
     border: none;
     width: 20px;
     height: 15px;
+    margin-top: 10px;
     margin-left: 10px;
     margin-right: 15px;
-    border-radius: 50px;
+    border-radius: 20px;
     border: solid 0.5px #afadad38;
 }
 .whiteboardColorPicker:hover {
     transform: var(--btns-hover-scale);
     transition: all 0.3s ease-in-out;
+    cursor: pointer;
 }
 .whiteboardColorPicker::-webkit-color-swatch {
     border: none;

public/js/Room.js

@@ -781,7 +781,7 @@ function handleSelects() {
     BtnsAspectRatio.onchange = () => {
         setAspectRatio(BtnsAspectRatio.value);
     };
-    BtnsAspectRatio.selectedIndex = 0; // default
+    BtnsAspectRatio.selectedIndex = DetectRTC.isMobileDevice ? 1 : 0;
     setAspectRatio(BtnsAspectRatio.selectedIndex);
 
     BtnsBarPosition.onchange = () => {

public/js/RoomClient.js

@@ -756,7 +756,8 @@ class RoomClient {
         this.isMobileDevice || type === mediaType.screen ? (elem.className = '') : (elem.className = 'mirror');
         p = document.createElement('p');
         p.id = this.peer_id + '__name';
-        p.innerHTML = '👤 ' + this.peer_name + ' (me)';
+        p.className = 'fas fa-user';
+        p.innerHTML = ' ' + this.peer_name + ' (me)';
         i = document.createElement('i');
         i.id = this.peer_id + '__hand';
         i.className = 'fas fa-hand-paper pulsate';
@@ -954,7 +955,8 @@ class RoomClient {
                 elem.poster = image.poster;
                 p = document.createElement('p');
                 p.id = peer_info.peer_id + '__name';
-                p.innerHTML = '👤 ' + peer_name;
+                p.className = 'fas fa-user';
+                p.innerHTML = ' ' + peer_name;
                 i = document.createElement('i');
                 i.id = peer_info.peer_id + '__hand';
                 i.className = 'fas fa-hand-paper pulsate';
@@ -1022,7 +1024,8 @@ class RoomClient {
         i.id = peer_id + '__img';
         p = document.createElement('p');
         p.id = peer_id + '__name';
-        p.innerHTML = '👤 ' + peer_name + (remotePeer ? '' : ' (me) ');
+        p.className = 'fas fa-user';
+        p.innerHTML = ' ' + peer_name + (remotePeer ? '' : ' (me) ');
         b = document.createElement('button');
         b.id = peer_id + '__audio';
         b.className = peer_audio ? html.audioOn : html.audioOff;
@@ -1358,6 +1361,7 @@ class RoomClient {
                 ? document.exitFullscreen()
                 : el.requestFullscreen();
         }
+        this.isVideoOnFullScreen = document.fullscreenEnabled;
     }
 
     handleFS(id) {

public/view/Room.html

@@ -285,10 +285,10 @@ access to use this app.
             <header id="whiteboardHeader" class="whiteboard-header">
                 <div id="whiteboardTitle" class="whiteboard-header-title"></div>
                 <div class="whiteboard-header-options">
+                    bg
+                    <input id="wbBackgroundColorEl" class="whiteboardColorPicker" type="color" value="#000000" />
                     pencil
                     <input id="wbDrawingColorEl" class="whiteboardColorPicker" type="color" value="#FFFFFF" />
-                    background
-                    <input id="wbBackgroundColorEl" class="whiteboardColorPicker" type="color" value="#000000" />
                     <button id="whiteboardPencilBtn" class="fas fa-pencil-alt"></button>
                     <button id="whiteboardObjectBtn" class="fas fa-mouse-pointer"></button>
                     <button id="whiteboardUndoBtn" class="fas fa-undo"></button>