Merge branch 'master' into reloads

Makefile

@@ -13,7 +13,7 @@ IFRAME_API_DIR = ./modules/API/external
 all: update-deps compile compile-iframe-api uglify uglify-iframe-api deploy clean
 
 update-deps:
-	$(NPM) install
+	$(NPM) update
 
 compile:
 	$(BROWSERIFY) $(BROWSERIFY_FLAGS) -e app.js -s APP | $(EXORCIST) $(OUTPUT_DIR)/app.bundle.js.map > $(OUTPUT_DIR)/app.bundle.js

README.md

@@ -66,6 +66,7 @@ npm link lib-jitsi-meet
 ```
 
 So now after changes in local `lib-jitsi-meet` repository you can rebuild it with `npm run install` and your `jitsi-meet` repository will use that modified library.
+Note: when using node version 4.x, the make file of jitsi-meet do npm update which will delete the link, no longer the case with version 6.x.
 
 If you do not want to use local repository anymore you should run
 ```bash

conference.js

@@ -1232,6 +1232,12 @@ export default {
             room.dial(sipNumber);
         });
 
+        APP.UI.addListener(UIEvents.RESOLUTION_CHANGED,
+            (id, oldResolution, newResolution, delay) => {
+            room.sendApplicationLog("Resolution change id=" + id
+                + " old=" + oldResolution + " new=" + newResolution
+                + " delay=" + delay);
+        });
 
         // Starts or stops the recording for the conference.
         APP.UI.addListener(UIEvents.RECORDING_TOGGLED, (options) => {

modules/UI/videolayout/SmallVideo.js

@@ -2,6 +2,7 @@
 /* jshint -W101 */
 import Avatar from "../avatar/Avatar";
 import UIUtil from "../util/UIUtil";
+import UIEvents from "../../../service/UI/UIEvents";
 
 const RTCUIHelper = JitsiMeetJS.util.RTCUIHelper;
 
@@ -333,6 +334,16 @@ SmallVideo.prototype.removeModeratorIndicatorElement = function () {
     $('#' + this.videoSpanId + ' .focusindicator').remove();
 };
 
+/**
+ * This is an especially interesting function. A naive reader might think that
+ * it returns this SmallVideo's "video" element. But it is much more exciting.
+ * It first finds this video's parent element using jquery, then uses a utility
+ * from lib-jitsi-meet to extract the video element from it (with two more
+ * jquery calls), and finally uses jquery again to encapsulate the video element
+ * in an array. This last step allows (some might prefer "forces") users of
+ * this function to access the video element via the 0th element of the returned
+ * array (after checking its length of course!).
+ */
 SmallVideo.prototype.selectVideoElement = function () {
     return $(RTCUIHelper.findVideoElement($('#' + this.videoSpanId)[0]));
 };
@@ -490,4 +501,37 @@ SmallVideo.prototype.getIndicatorSpan = function(id) {
     return indicatorSpan;
 };
 
+/**
+ * Adds a listener for onresize events for this video, which will monitor for
+ * resolution changes, will calculate the delay since the moment the listened
+ * is added, and will fire a RESOLUTION_CHANGED event.
+ */
+SmallVideo.prototype.waitForResolutionChange = function() {
+    let self = this;
+    let beforeChange = window.performance.now();
+    let videos = this.selectVideoElement();
+    if (!videos || !videos.length || videos.length <= 0)
+        return;
+    let video = videos[0];
+    let oldWidth = video.videoWidth;
+    let oldHeight = video.videoHeight;
+    video.onresize = (event) => {
+        if (video.videoWidth != oldWidth || video.videoHeight != oldHeight) {
+            // Only run once.
+            video.onresize = null;
+
+            let delay = window.performance.now() - beforeChange;
+            let emitter = self.VideoLayout.getEventEmitter();
+            if (emitter) {
+                emitter.emit(
+                        UIEvents.RESOLUTION_CHANGED,
+                        self.getId(),
+                        oldWidth + "x" + oldHeight,
+                        video.videoWidth + "x" + video.videoHeight,
+                        delay);
+            }
+        }
+    };
+};
+
 export default SmallVideo;

modules/UI/videolayout/VideoLayout.js

@@ -1012,11 +1012,16 @@ var VideoLayout = {
             if (id !== currentId && videoType === VIDEO_CONTAINER_TYPE) {
                 eventEmitter.emit(UIEvents.SELECTED_ENDPOINT, id);
             }
+
+            let smallVideo = this.getSmallVideo(id);
+            let oldSmallVideo;
             if (currentId) {
-                var oldSmallVideo = this.getSmallVideo(currentId);
+                oldSmallVideo = this.getSmallVideo(currentId);
             }
 
-            let smallVideo = this.getSmallVideo(id);
+            smallVideo.waitForResolutionChange();
+            if (oldSmallVideo)
+                oldSmallVideo.waitForResolutionChange();
 
             largeVideo.updateLargeVideo(
                 id,
@@ -1120,7 +1125,9 @@ var VideoLayout = {
     setLocalFlipX: function (val) {
         this.localFlipX = val;
 
-    }
+    },
+
+    getEventEmitter: () => {return eventEmitter;}
 };
 
 export default VideoLayout;

package.json

@@ -25,7 +25,7 @@
     "jQuery-Impromptu": "git+https://github.com/trentrichardson/jQuery-Impromptu.git#v6.0.0",
     "lib-jitsi-meet": "jitsi/lib-jitsi-meet",
     "jquery-contextmenu": "*",
-    "jquery-ui": "^1.10.5",
+    "jquery-ui": "1.10.5",
     "jssha": "1.5.0",
     "retry": "0.6.1",
     "strophe": "^1.2.2",

service/UI/UIEvents.js

@@ -80,5 +80,8 @@ export default {
     /**
      * Notifies that flipX property of the local video is changed.
      */
-    LOCAL_FLIPX_CHANGED: "UI.local_flipx_changed"
+    LOCAL_FLIPX_CHANGED: "UI.local_flipx_changed",
+    // An event which indicates that the resolution of a remote video has
+    // changed.
+    RESOLUTION_CHANGED: "UI.resolution_changed"
 };