refacto: handling of smallest screen size as a whiteboard info
* Also started a bit of config handling cleaning
This commit is contained in:
Florent Chehab
parent
685caffd43
commit
4476ce3284
@ -1,4 +1,8 @@
|
||||
const config = require("./config");
|
||||
|
||||
class WhiteboardServerSideInfo {
|
||||
static defaultScreenResolution = { w: 1000, h: 1000 };
|
||||
|
||||
constructor() {
|
||||
/**
|
||||
* @type {number}
|
||||
@ -6,6 +10,12 @@ class WhiteboardServerSideInfo {
|
||||
*/
|
||||
this._nbConnectedUsers = 0;
|
||||
|
||||
/**
|
||||
* @type {Map<int, {w: number, h: number}>}
|
||||
* @private
|
||||
*/
|
||||
this._screenResolutionByClients = new Map();
|
||||
|
||||
/**
|
||||
* Variable to tell if these info have been sent or not
|
||||
*
|
||||
@ -29,8 +39,37 @@ class WhiteboardServerSideInfo {
|
||||
return this._nbConnectedUsers > 0;
|
||||
}
|
||||
|
||||
asObject() {
|
||||
return { nbConnectedUsers: this._nbConnectedUsers };
|
||||
/**
|
||||
* Store information about the client's screen resolution
|
||||
*
|
||||
* @param {number} clientId
|
||||
* @param {number} w client's width
|
||||
* @param {number} h client's hight
|
||||
*/
|
||||
setScreenResolutionForClient(clientId, { w, h }) {
|
||||
this._screenResolutionByClients.set(clientId, { w, h });
|
||||
this._hasNonSentUpdates = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete the stored information about the client's screen resoltion
|
||||
* @param clientId
|
||||
*/
|
||||
deleteScreenResolutionOfClient(clientId) {
|
||||
this._screenResolutionByClients.delete(clientId);
|
||||
this._hasNonSentUpdates = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the smallest client's screen size on a whiteboard
|
||||
* @return {{w: number, h: number}}
|
||||
*/
|
||||
getSmallestScreenResolution() {
|
||||
const { _screenResolutionByClients: resolutions } = this;
|
||||
return {
|
||||
w: Math.min(...Array.from(resolutions.values()).map((res) => res.w)),
|
||||
h: Math.min(...Array.from(resolutions.values()).map((res) => res.h)),
|
||||
};
|
||||
}
|
||||
|
||||
infoWasSent() {
|
||||
@ -40,6 +79,18 @@ class WhiteboardServerSideInfo {
|
||||
shouldSendInfo() {
|
||||
return this._hasNonSentUpdates;
|
||||
}
|
||||
|
||||
asObject() {
|
||||
const out = {
|
||||
nbConnectedUsers: this._nbConnectedUsers,
|
||||
};
|
||||
|
||||
if (!config.disableSmallestScreen) {
|
||||
out.smallestScreenResolution = this.getSmallestScreenResolution();
|
||||
}
|
||||
|
||||
return out;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = WhiteboardServerSideInfo;
|
||||
|
||||
@ -1,5 +1,45 @@
|
||||
const { getArgs } = require("./utils");
|
||||
|
||||
const config = {
|
||||
accessToken: "",
|
||||
disableSmallestScreen: false,
|
||||
webdav: false,
|
||||
|
||||
whiteboardInfoBroadcastFreq: 1, // once per second
|
||||
};
|
||||
|
||||
/**
|
||||
* Update the config based on the CLI args
|
||||
* @param {object} startArgs
|
||||
*/
|
||||
function updateConfigFromStartArgs(startArgs) {
|
||||
if (startArgs["accesstoken"]) {
|
||||
config.accessToken = startArgs["accesstoken"];
|
||||
}
|
||||
if (startArgs["disablesmallestscreen"]) {
|
||||
config.disableSmallestScreen = true;
|
||||
}
|
||||
if (startArgs["webdav"]) {
|
||||
config.webdav = true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the config based on the env variables
|
||||
*/
|
||||
function updateConfigFromEnv() {
|
||||
if (process.env.accesstoken) {
|
||||
config.accessToken = process.env.accesstoken;
|
||||
}
|
||||
if (process.env.disablesmallestscreen) {
|
||||
config.disablesmallestscreen = true;
|
||||
}
|
||||
if (process.env.webdav) {
|
||||
config.webdav = true;
|
||||
}
|
||||
}
|
||||
|
||||
updateConfigFromEnv();
|
||||
updateConfigFromStartArgs(getArgs());
|
||||
|
||||
module.exports = config;
|
||||
|
||||
@ -1,13 +1,10 @@
|
||||
const path = require("path");
|
||||
|
||||
const { getArgs } = require("./utils");
|
||||
const config = require("./config");
|
||||
const WhiteboardServerSideInfo = require("./WhiteboardServerSideInfo");
|
||||
|
||||
function startBackendServer(port) {
|
||||
var accessToken = ""; //Can be set here or as start parameter (node server.js --accesstoken=MYTOKEN)
|
||||
var disableSmallestScreen = false; //Can be set to true if you dont want to show (node server.js --disablesmallestscreen=true)
|
||||
var webdav = false; //Can be set to true if you want to allow webdav save (node server.js --webdav=true)
|
||||
console.info("Starting backend server with config", config);
|
||||
|
||||
var fs = require("fs-extra");
|
||||
var express = require("express");
|
||||
@ -29,36 +26,8 @@ function startBackendServer(port) {
|
||||
server.listen(port);
|
||||
var io = require("socket.io")(server, { path: "/ws-api" });
|
||||
console.log("Webserver & socketserver running on port:" + port);
|
||||
if (process.env.accesstoken) {
|
||||
accessToken = process.env.accesstoken;
|
||||
}
|
||||
if (process.env.disablesmallestscreen) {
|
||||
disablesmallestscreen = true;
|
||||
}
|
||||
if (process.env.webdav) {
|
||||
webdav = true;
|
||||
}
|
||||
|
||||
var startArgs = getArgs();
|
||||
if (startArgs["accesstoken"]) {
|
||||
accessToken = startArgs["accesstoken"];
|
||||
}
|
||||
if (startArgs["disablesmallestscreen"]) {
|
||||
disableSmallestScreen = true;
|
||||
}
|
||||
if (startArgs["webdav"]) {
|
||||
webdav = true;
|
||||
}
|
||||
|
||||
if (accessToken !== "") {
|
||||
console.log("AccessToken set to: " + accessToken);
|
||||
}
|
||||
if (disableSmallestScreen) {
|
||||
console.log("Disabled showing smallest screen resolution!");
|
||||
}
|
||||
if (webdav) {
|
||||
console.log("Webdav save is enabled!");
|
||||
}
|
||||
const { accessToken, webdav } = config;
|
||||
|
||||
app.get("/api/loadwhiteboard", function (req, res) {
|
||||
var wid = req["query"]["wid"];
|
||||
@ -207,8 +176,6 @@ function startBackendServer(port) {
|
||||
}
|
||||
}
|
||||
|
||||
var smallestScreenResolutions = {};
|
||||
|
||||
/**
|
||||
* @type {Map<string, WhiteboardServerSideInfo>}
|
||||
*/
|
||||
@ -229,20 +196,15 @@ function startBackendServer(port) {
|
||||
io.on("connection", function (socket) {
|
||||
var whiteboardId = null;
|
||||
socket.on("disconnect", function () {
|
||||
if (
|
||||
smallestScreenResolutions &&
|
||||
smallestScreenResolutions[whiteboardId] &&
|
||||
socket &&
|
||||
socket.id
|
||||
) {
|
||||
delete smallestScreenResolutions[whiteboardId][socket.id];
|
||||
const whiteboardServerSideInfo = infoByWhiteboard.get(whiteboardId);
|
||||
|
||||
if (socket && socket.id) {
|
||||
whiteboardServerSideInfo.deleteScreenResolutionOfClient(socket.id);
|
||||
}
|
||||
|
||||
const whiteboardServerSideInfo = infoByWhiteboard.get(whiteboardId);
|
||||
whiteboardServerSideInfo.decrementNbConnectedUsers();
|
||||
if (whiteboardServerSideInfo.hasConnectedUser()) {
|
||||
socket.compress(false).broadcast.emit("refreshUserBadges", null); //Removes old user Badges
|
||||
sendSmallestScreenResolution();
|
||||
} else {
|
||||
infoByWhiteboard.delete(whiteboardId);
|
||||
}
|
||||
@ -269,14 +231,10 @@ function startBackendServer(port) {
|
||||
|
||||
const whiteboardServerSideInfo = infoByWhiteboard.get(whiteboardId);
|
||||
whiteboardServerSideInfo.incrementNbConnectedUsers();
|
||||
|
||||
smallestScreenResolutions[whiteboardId] = smallestScreenResolutions[whiteboardId]
|
||||
? smallestScreenResolutions[whiteboardId]
|
||||
: {};
|
||||
smallestScreenResolutions[whiteboardId][socket.id] = content[
|
||||
"windowWidthHeight"
|
||||
] || { w: 10000, h: 10000 };
|
||||
sendSmallestScreenResolution();
|
||||
whiteboardServerSideInfo.setScreenResolutionForClient(
|
||||
socket.id,
|
||||
content["windowWidthHeight"] || WhiteboardServerSideInfo.defaultScreenResolution
|
||||
);
|
||||
} else {
|
||||
socket.emit("wrongAccessToken", true);
|
||||
}
|
||||
@ -284,38 +242,14 @@ function startBackendServer(port) {
|
||||
|
||||
socket.on("updateScreenResolution", function (content) {
|
||||
content = escapeAllContentStrings(content);
|
||||
if (
|
||||
smallestScreenResolutions[whiteboardId] &&
|
||||
(accessToken === "" || accessToken == content["at"])
|
||||
) {
|
||||
smallestScreenResolutions[whiteboardId][socket.id] = content[
|
||||
"windowWidthHeight"
|
||||
] || { w: 10000, h: 10000 };
|
||||
sendSmallestScreenResolution();
|
||||
if (accessToken === "" || accessToken == content["at"]) {
|
||||
const whiteboardServerSideInfo = infoByWhiteboard.get(whiteboardId);
|
||||
whiteboardServerSideInfo.setScreenResolutionForClient(
|
||||
socket.id,
|
||||
content["windowWidthHeight"] || WhiteboardServerSideInfo.defaultScreenResolution
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
function sendSmallestScreenResolution() {
|
||||
if (disableSmallestScreen) {
|
||||
return;
|
||||
}
|
||||
var smallestWidth = 10000;
|
||||
var smallestHeight = 10000;
|
||||
for (var i in smallestScreenResolutions[whiteboardId]) {
|
||||
smallestWidth =
|
||||
smallestWidth > smallestScreenResolutions[whiteboardId][i]["w"]
|
||||
? smallestScreenResolutions[whiteboardId][i]["w"]
|
||||
: smallestWidth;
|
||||
smallestHeight =
|
||||
smallestHeight > smallestScreenResolutions[whiteboardId][i]["h"]
|
||||
? smallestScreenResolutions[whiteboardId][i]["h"]
|
||||
: smallestHeight;
|
||||
}
|
||||
io.to(whiteboardId).emit("updateSmallestScreenResolution", {
|
||||
w: smallestWidth,
|
||||
h: smallestHeight,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//Prevent cross site scripting (xss)
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user