refacto: handling of smallest screen size as a whiteboard info

* Also started a bit of config handling cleaning

src/index.html

@@ -254,6 +254,7 @@
         <div id="whiteboardInfoContainer">
             <p><b>Whiteboard information:</b></p>
             <p># connected users: <i id="connectedUsersCount">0</i></p>
+            <p>Smallest screen resolution: <i id="smallestScreenResolution">Unknown.</i></p>
             <p># msg. sent to server: <i id="messageSentCount">0</i></p>
             <p># msg. received from server: <i id="messageReceivedCount">0</i></p>
         </div>

src/js/main.js

@@ -51,6 +51,7 @@ function main() {
 
         signaling_socket.on("whiteboardInfoUpdate", (info) => {
             InfoService.updateInfoFromServer(info);
+            whiteboard.updateSmallestScreenResolution();
         });
 
         signaling_socket.on("drawToWhiteboard", function (content) {
@@ -69,10 +70,6 @@ function main() {
             }
         });
 
-        signaling_socket.on("updateSmallestScreenResolution", function (widthHeight) {
-            whiteboard.updateSmallestScreenResolution(widthHeight["w"], widthHeight["h"]);
-        });
-
         signaling_socket.emit("joinWhiteboard", {
             wid: whiteboardId,
             at: accessToken,

src/js/services/InfoService.js

@@ -20,6 +20,13 @@ class InfoService {
      */
     _nbConnectedUsers = 0;
 
+    /**
+     *
+     * @type {{w: number, h: number}}
+     * @private
+     */
+    _smallestScreenResolution = undefined;
+
     /**
      * @type {number}
      * @private
@@ -41,9 +48,20 @@ class InfoService {
 
     /**
      * @param {number} nbConnectedUsers
+     * @param {{w: number, h: number}} smallestScreenResolution
      */
-    updateInfoFromServer({ nbConnectedUsers }) {
+    updateInfoFromServer({ nbConnectedUsers, smallestScreenResolution = undefined }) {
         this._nbConnectedUsers = nbConnectedUsers;
+        if (smallestScreenResolution) {
+            this._smallestScreenResolution = smallestScreenResolution;
+        }
+    }
+
+    /**
+     * @returns {(undefined|{w: number, h: number})}
+     */
+    get smallestScreenResolution() {
+        return this._smallestScreenResolution;
     }
 
     incrementNbMessagesReceived() {
@@ -58,6 +76,8 @@ class InfoService {
         $("#messageReceivedCount")[0].innerText = String(this._nbMessagesReceived);
         $("#messageSentCount")[0].innerText = String(this._nbMessagesSent);
         $("#connectedUsersCount")[0].innerText = String(this._nbConnectedUsers);
+        const { _smallestScreenResolution: ssr } = this;
+        $("#smallestScreenResolution")[0].innerText = ssr ? `(${ssr.w}, ${ssr.h})` : "Unknown";
     }
 
     displayInfo() {

src/js/whiteboard.js

@@ -6,6 +6,7 @@ import {
     POINTER_EVENT_THRESHOLD_MIN_TIME_DELTA,
 } from "./const";
 import ReadOnlyService from "./services/ReadOnlyService";
+import InfoService from "./services/InfoService";
 
 const RAD_TO_DEG = 180.0 / Math.PI;
 const DEG_TO_RAD = Math.PI / 180.0;
@@ -363,7 +364,7 @@ const whiteboard = {
                     ```<div class="dragMe" style="position:absolute; left: ${left}px; top: ${top}px; width: ${width}px; border: 2px dotted gray; overflow: hidden; height: ${height}px;" cursor:move;">
                     <canvas style="cursor:move; position:absolute; top:0px; left:0px;" width="${width}" height="${height}"/>
                     <div style="position:absolute; right:5px; top:3px;">
-                    <button draw="1" style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="addToCanvasBtn btn btn-default">Drop</button> 
+                    <button draw="1" style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="addToCanvasBtn btn btn-default">Drop</button>
                     <button style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="xCanvasBtn btn btn-default">x</button>
                     </div>
                     </div>```
@@ -1061,21 +1062,25 @@ const whiteboard = {
             _this.setTextboxFontColor(_this.latestActiveTextBoxId, color);
         }
     },
-    updateSmallestScreenResolution(width, height) {
-        this.backgroundGrid.empty();
-        if (width < $(window).width() || height < $(window).height()) {
-            this.backgroundGrid.append(
-                '<div style="position:absolute; left:0px; top:0px; border-right:3px dotted black; border-bottom:3px dotted black; width:' +
-                    width +
-                    "px; height:" +
-                    height +
-                    'px;"></div>'
-            );
-            this.backgroundGrid.append(
-                '<div style="position:absolute; left:' +
-                    (width + 5) +
-                    'px; top:0px;">smallest screen participating</div>'
-            );
+    updateSmallestScreenResolution() {
+        const { smallestScreenResolution } = InfoService;
+        if (smallestScreenResolution) {
+            const { w: width, h: height } = smallestScreenResolution;
+            this.backgroundGrid.empty();
+            if (width < $(window).width() || height < $(window).height()) {
+                this.backgroundGrid.append(
+                    '<div style="position:absolute; left:0px; top:0px; border-right:3px dotted black; border-bottom:3px dotted black; width:' +
+                        width +
+                        "px; height:" +
+                        height +
+                        'px;"></div>'
+                );
+                this.backgroundGrid.append(
+                    '<div style="position:absolute; left:' +
+                        (width + 5) +
+                        'px; top:0px;">smallest screen participating</div>'
+                );
+            }
         }
     },
     handleEventsAndData: function (content, isNewData, doneCallback) {