openvidu recording layout fixes ratio when screen-sharing stream created

openvidu-server/src/angular/frontend/src/app/components/layouts/layout-best-fit/layout-best-fit.component.ts

@@ -21,6 +21,21 @@ export class LayoutBestFitComponent implements OnInit, OnDestroy {
 
   layout: any;
   resizeTimeout;
+  numberOfScreenStreams = 0;
+
+  layoutOptions = {
+    maxRatio: 3 / 2,      // The narrowest ratio that will be used (default 2x3)
+    minRatio: 9 / 16,     // The widest ratio that will be used (default 16x9)
+    fixedRatio: false,    /* If this is true then the aspect ratio of the video is maintained
+      and minRatio and maxRatio are ignored (default false) */
+    bigClass: 'OV_big',   // The class to add to elements that should be sized bigger
+    bigPercentage: 0.8,   // The maximum percentage of space the big ones should take up
+    bigFixedRatio: false, // fixedRatio for the big ones
+    bigMaxRatio: 3 / 2,   // The narrowest ratio to use for the big elements (default 2x3)
+    bigMinRatio: 9 / 16,  // The widest ratio to use for the big elements (default 16x9)
+    bigFirst: true,       // Whether to place the big one in the top left (true) or bottom right
+    animate: true         // Whether you want to animate the transitions
+  };
 
   constructor(private route: ActivatedRoute, private appRef: ApplicationRef) {
     this.route.params.subscribe(params => {
@@ -51,18 +66,28 @@ export class LayoutBestFitComponent implements OnInit, OnDestroy {
     this.session = OV.initSession();
 
     this.session.on('streamCreated', (event: StreamEvent) => {
+      let changeFixedRatio = false;
+      if (event.stream.typeOfVideo === 'SCREEN') {
+        this.numberOfScreenStreams++;
+        changeFixedRatio = true;
+      }
       const subscriber: Subscriber = this.session.subscribe(event.stream, undefined);
       subscriber.on('streamPlaying', (e: StreamManagerEvent) => {
         const video: HTMLVideoElement = subscriber.videos[0].video;
         video.parentElement.parentElement.classList.remove('custom-class');
-        this.openviduLayout.updateLayout();
+        this.updateLayout(changeFixedRatio);
       });
       this.addSubscriber(subscriber);
     });
 
     this.session.on('streamDestroyed', (event: StreamEvent) => {
+      let changeFixedRatio = false;
+      if (event.stream.typeOfVideo === 'SCREEN') {
+        this.numberOfScreenStreams--;
+        changeFixedRatio = true;
+      }
       this.deleteSubscriber(<Subscriber>event.stream.streamManager);
-      this.openviduLayout.updateLayout();
+      this.updateLayout(changeFixedRatio);
     });
 
     const token = 'wss://' + location.hostname + ':4443?sessionId=' + this.sessionId + '&secret=' + this.secret + '&recorder=true';
@@ -72,19 +97,7 @@ export class LayoutBestFitComponent implements OnInit, OnDestroy {
       })
 
     this.openviduLayout = new OpenViduLayout();
-    this.openviduLayout.initLayoutContainer(document.getElementById('layout'), {
+    this.openviduLayout.initLayoutContainer(document.getElementById('layout'), this.layoutOptions);
-      maxRatio: 3 / 2,      // The narrowest ratio that will be used (default 2x3)
-      minRatio: 9 / 16,     // The widest ratio that will be used (default 16x9)
-      fixedRatio: false,    /* If this is true then the aspect ratio of the video is maintained
-      and minRatio and maxRatio are ignored (default false) */
-      bigClass: 'OV_big',   // The class to add to elements that should be sized bigger
-      bigPercentage: 0.8,   // The maximum percentage of space the big ones should take up
-      bigFixedRatio: false, // fixedRatio for the big ones
-      bigMaxRatio: 3 / 2,   // The narrowest ratio to use for the big elements (default 2x3)
-      bigMinRatio: 9 / 16,  // The widest ratio to use for the big elements (default 16x9)
-      bigFirst: true,       // Whether to place the big one in the top left (true) or bottom right
-      animate: true         // Whether you want to animate the transitions
-    });
   }
 
   private addSubscriber(subscriber: Subscriber): void {
@@ -112,4 +125,12 @@ export class LayoutBestFitComponent implements OnInit, OnDestroy {
     this.session = null;
   }
 
+  updateLayout(changeFixedRatio: boolean) {
+    if (changeFixedRatio) {
+      this.layoutOptions.fixedRatio = this.numberOfScreenStreams > 0;
+      this.openviduLayout.setLayoutOptions(this.layoutOptions);
+    }
+    this.openviduLayout.updateLayout();
+  }
+
 }

openvidu-server/src/main/resources/static/inline.bundle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack/bootstrap e240732b06a3bee8487b"],"names":[],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAQ,oBAAoB;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAY,2BAA2B;AACvC;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA,kDAA0C,oBAAoB,WAAW","file":"inline.bundle.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t\"inline\": 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap e240732b06a3bee8487b"],"sourceRoot":"webpack:///"}
+{"version":3,"sources":["webpack/bootstrap 0f3a1ac335360a2caf31"],"names":[],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAQ,oBAAoB;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAY,2BAA2B;AACvC;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA,kDAA0C,oBAAoB,WAAW","file":"inline.bundle.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t\"inline\": 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 0f3a1ac335360a2caf31"],"sourceRoot":"webpack:///"}

openvidu-server/src/main/resources/static/main.bundle.js

@@ -487,9 +487,9 @@ var Publisher_1 = __webpack_require__("../../../../openvidu-browser/lib/OpenVidu
 var Session_1 = __webpack_require__("../../../../openvidu-browser/lib/OpenVidu/Session.js");
 var OpenViduError_1 = __webpack_require__("../../../../openvidu-browser/lib/OpenViduInternal/Enums/OpenViduError.js");
 var VideoInsertMode_1 = __webpack_require__("../../../../openvidu-browser/lib/OpenViduInternal/Enums/VideoInsertMode.js");
-var RpcBuilder = __webpack_require__("../../../../openvidu-browser/lib/OpenViduInternal/KurentoUtils/kurento-jsonrpc/index.js");
 var screenSharingAuto = __webpack_require__("../../../../openvidu-browser/lib/OpenViduInternal/ScreenSharing/Screen-Capturing-Auto.js");
 var screenSharing = __webpack_require__("../../../../openvidu-browser/lib/OpenViduInternal/ScreenSharing/Screen-Capturing.js");
+var RpcBuilder = __webpack_require__("../../../../openvidu-browser/lib/OpenViduInternal/KurentoUtils/kurento-jsonrpc/index.js");
 var platform = __webpack_require__("../../../../openvidu-browser/node_modules/platform/platform.js");
 /**
  * Entrypoint of OpenVidu Browser library.
@@ -11866,6 +11866,19 @@ var LayoutBestFitComponent = (function () {
         this.route = route;
         this.appRef = appRef;
         this.subscribers = [];
+        this.numberOfScreenStreams = 0;
+        this.layoutOptions = {
+            maxRatio: 3 / 2,
+            minRatio: 9 / 16,
+            fixedRatio: false,
+            bigClass: 'OV_big',
+            bigPercentage: 0.8,
+            bigFixedRatio: false,
+            bigMaxRatio: 3 / 2,
+            bigMinRatio: 9 / 16,
+            bigFirst: true,
+            animate: true // Whether you want to animate the transitions
+        };
         this.route.params.subscribe(function (params) {
             _this.sessionId = params.sessionId;
             _this.secret = params.secret;
@@ -11889,17 +11902,27 @@ var LayoutBestFitComponent = (function () {
         var OV = new __WEBPACK_IMPORTED_MODULE_2_openvidu_browser__["OpenVidu"]();
         this.session = OV.initSession();
         this.session.on('streamCreated', function (event) {
+            var changeFixedRatio = false;
+            if (event.stream.typeOfVideo === 'SCREEN') {
+                _this.numberOfScreenStreams++;
+                changeFixedRatio = true;
+            }
             var subscriber = _this.session.subscribe(event.stream, undefined);
             subscriber.on('streamPlaying', function (e) {
                 var video = subscriber.videos[0].video;
                 video.parentElement.parentElement.classList.remove('custom-class');
-                _this.openviduLayout.updateLayout();
+                _this.updateLayout(changeFixedRatio);
             });
             _this.addSubscriber(subscriber);
         });
         this.session.on('streamDestroyed', function (event) {
+            var changeFixedRatio = false;
+            if (event.stream.typeOfVideo === 'SCREEN') {
+                _this.numberOfScreenStreams--;
+                changeFixedRatio = true;
+            }
             _this.deleteSubscriber(event.stream.streamManager);
-            _this.openviduLayout.updateLayout();
+            _this.updateLayout(changeFixedRatio);
         });
         var token = 'wss://' + location.hostname + ':4443?sessionId=' + this.sessionId + '&secret=' + this.secret + '&recorder=true';
         this.session.connect(token)
@@ -11907,18 +11930,7 @@ var LayoutBestFitComponent = (function () {
             console.error(error);
         });
         this.openviduLayout = new __WEBPACK_IMPORTED_MODULE_3__openvidu_layout__["a" /* OpenViduLayout */]();
-        this.openviduLayout.initLayoutContainer(document.getElementById('layout'), {
+        this.openviduLayout.initLayoutContainer(document.getElementById('layout'), this.layoutOptions);
-            maxRatio: 3 / 2,
-            minRatio: 9 / 16,
-            fixedRatio: false,
-            bigClass: 'OV_big',
-            bigPercentage: 0.8,
-            bigFixedRatio: false,
-            bigMaxRatio: 3 / 2,
-            bigMinRatio: 9 / 16,
-            bigFirst: true,
-            animate: true // Whether you want to animate the transitions
-        });
     };
     LayoutBestFitComponent.prototype.addSubscriber = function (subscriber) {
         this.subscribers.push(subscriber);
@@ -11945,6 +11957,13 @@ var LayoutBestFitComponent = (function () {
         this.subscribers = [];
         this.session = null;
     };
+    LayoutBestFitComponent.prototype.updateLayout = function (changeFixedRatio) {
+        if (changeFixedRatio) {
+            this.layoutOptions.fixedRatio = this.numberOfScreenStreams > 0;
+            this.openviduLayout.setLayoutOptions(this.layoutOptions);
+        }
+        this.openviduLayout.updateLayout();
+    };
     __decorate([
         Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["A" /* HostListener */])('window:beforeunload'),
         __metadata("design:type", Function),

openvidu-server/src/main/resources/static/vendor.bundle.js

@@ -160627,8 +160627,8 @@ function __generator(thisArg, body) {
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
         while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
+            if (y = 0, t) op = [0, t.value];
             switch (op[0]) {
                 case 0: case 1: t = op; break;
                 case 4: _.label++; return { value: op[1], done: false };
@@ -160696,7 +160696,7 @@ function __asyncGenerator(thisArg, _arguments, generator) {
     return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
     function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
     function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
-    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r);  }
     function fulfill(value) { resume("next", value); }
     function reject(value) { resume("throw", value); }
     function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
@@ -160705,15 +160705,13 @@ function __asyncGenerator(thisArg, _arguments, generator) {
 function __asyncDelegator(o) {
     var i, p;
     return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-    function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    function verb(n, f) { if (o[n]) i[n] = function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; }; }
 }
 
 function __asyncValues(o) {
     if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
-    var m = o[Symbol.asyncIterator], i;
+    var m = o[Symbol.asyncIterator];
-    return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+    return m ? m.call(o) : typeof __values === "function" ? __values(o) : o[Symbol.iterator]();
-    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
 }
 
 function __makeTemplateObject(cooked, raw) {