Merge pull request #724 from jitsi/reloads

Implements support for conference reloads

conference.js

@@ -317,7 +317,7 @@ function changeLocalDisplayName(nickname = '') {
 
     APP.settings.setDisplayName(nickname);
     room.setDisplayName(nickname);
-    APP.UI.changeDisplayName(APP.conference.localId, nickname);
+    APP.UI.changeDisplayName(APP.conference.getMyUserId(), nickname);
 }
 
 class ConferenceConnector {
@@ -410,6 +410,9 @@ class ConferenceConnector {
             connection.disconnect();
             APP.UI.notifyMaxUsersLimitReached();
             break;
+        case ConferenceErrors.INCOMPATIBLE_SERVER_VERSIONS:
+            window.location.reload();
+            break;
         default:
             this._handleConferenceFailed(err, ...params);
         }
@@ -447,7 +450,6 @@ class ConferenceConnector {
 }
 
 export default {
-    localId: undefined,
     isModerator: false,
     audioMuted: false,
     videoMuted: false,
@@ -530,7 +532,7 @@ export default {
      * @returns {boolean}
      */
     isLocalId (id) {
-        return this.localId === id;
+        return this.getMyUserId() === id;
     },
     /**
      * Simulates toolbar button click for audio mute. Used by shortcuts and API.
@@ -728,7 +730,6 @@ export default {
     _createRoom (localTracks) {
         room = connection.initJitsiConference(APP.conference.roomName,
             this._getConferenceOptions());
-        this.localId = room.myUserId();
         this._setLocalAudioVideoStreams(localTracks);
         roomLocker = createRoomLocker(room);
         this._room = room; // FIXME do not use this
@@ -812,7 +813,7 @@ export default {
                 this.isSharingScreen = false;
             }
 
-            APP.UI.setVideoMuted(this.localId, this.videoMuted);
+            APP.UI.setVideoMuted(this.getMyUserId(), this.videoMuted);
 
             APP.UI.updateDesktopSharingButtons();
         });
@@ -847,7 +848,7 @@ export default {
             }
 
             APP.UI.enableMicrophoneButton();
-            APP.UI.setAudioMuted(this.localId, this.audioMuted);
+            APP.UI.setAudioMuted(this.getMyUserId(), this.audioMuted);
         });
     },
 
@@ -1009,7 +1010,7 @@ export default {
             let id;
             const mute = track.isMuted();
             if(track.isLocal()){
-                id = this.localId;
+                id = APP.conference.getMyUserId();
                 if(track.getType() === "audio") {
                     this.audioMuted = mute;
                 } else {

modules/UI/UI.js

@@ -272,14 +272,14 @@ UI.setRaisedHandStatus = (participant, raisedHandStatus) => {
  * Sets the local "raised hand" status.
  */
 UI.setLocalRaisedHandStatus = (raisedHandStatus) => {
-    VideoLayout.setRaisedHandStatus(APP.conference.localId, raisedHandStatus);
+    VideoLayout.setRaisedHandStatus(APP.conference.getMyUserId(), raisedHandStatus);
 };
 
 /**
  * Initialize conference UI.
  */
 UI.initConference = function () {
-    let id = APP.conference.localId;
+    let id = APP.conference.getMyUserId();
     Toolbar.updateRoomUrl(window.location.href);
 
     // Add myself to the contact list.

modules/UI/audio_levels/AudioLevels.js

@@ -209,7 +209,7 @@ const AudioLevels = {
         drawContext.drawImage(canvasCache, 0, 0);
 
         if (id === LOCAL_LEVEL) {
-            id = APP.conference.localId;
+            id = APP.conference.getMyUserId();
             if (!id) {
                 return;
             }

modules/UI/recording/Recording.js

@@ -256,7 +256,7 @@ var Recording = {
         // everyone.
         if (config.iAmRecorder) {
             VideoLayout.enableDeviceAvailabilityIcons(
-                APP.conference.localId, false);
+                APP.conference.getMyUserId(), false);
             VideoLayout.setLocalVideoVisible(false);
             Feedback.enableFeedback(false);
             Toolbar.enable(false);

modules/UI/shared_video/SharedVideo.js

@@ -639,7 +639,6 @@ SharedVideoThumb.prototype.createContainer = function (spanId) {
 
     // add the avatar
     var avatar = document.createElement('img');
-    avatar.id = 'avatar_' + this.id;
     avatar.className = 'sharedVideoAvatar';
     avatar.src = "https://img.youtube.com/vi/" + this.url + "/0.jpg";
     container.appendChild(avatar);
@@ -822,4 +821,3 @@ function requestVideoLink() {
 
     });
 }
-

modules/UI/side_pannels/contactlist/ContactList.js

@@ -156,7 +156,7 @@ var ContactList = {
         if(!displayName)
             return;
         if (id === 'localVideoContainer') {
-            id = APP.conference.localId;
+            id = APP.conference.getMyUserId();
         }
         let contactName = $(`#contacts #${id}>p`);
 

modules/UI/videolayout/LargeVideo.js

@@ -21,7 +21,7 @@ function getStreamOwnerId(stream) {
         return;
     }
     if (stream.isLocal()) { // local stream doesn't have method "getParticipantId"
-        return APP.conference.localId;
+        return APP.conference.getMyUserId();
     } else {
         return stream.getParticipantId();
     }

modules/UI/videolayout/LocalVideo.js

@@ -18,7 +18,7 @@ function LocalVideo(VideoLayout, emitter) {
     this.emitter = emitter;
     Object.defineProperty(this, 'id', {
         get: function () {
-            return APP.conference.localId;
+            return APP.conference.getMyUserId();
         }
     });
     SmallVideo.call(this, VideoLayout);

modules/UI/videolayout/SmallVideo.js

@@ -300,9 +300,6 @@ SmallVideo.prototype.updateIconPositions = function () {
 
 /**
  * Creates the element indicating the moderator(owner) of the conference.
- *
- * @param parentElement the parent element where the owner indicator will
- * be added
  */
 SmallVideo.prototype.createModeratorIndicatorElement = function () {
     // Show moderator indicator
@@ -330,6 +327,13 @@ SmallVideo.prototype.createModeratorIndicatorElement = function () {
     APP.translation.translateElement($('#' + this.videoSpanId + ' .focusindicator'));
 };
 
+/**
+ * Removes the element indicating the moderator(owner) of the conference.
+ */
+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.
@@ -387,7 +391,7 @@ SmallVideo.prototype.updateView = function () {
 
     let video = this.selectVideoElement();
 
-    let avatar = $(`#avatar_${this.id}`);
+    let avatar = $('#' + this.videoSpanId + ' .userAvatar');
 
     var isCurrentlyOnLarge = this.VideoLayout.isCurrentlyOnLarge(this.id);
 
@@ -415,7 +419,7 @@ SmallVideo.prototype.updateView = function () {
 
 SmallVideo.prototype.avatarChanged = function (avatarUrl) {
     var thumbnail = $('#' + this.videoSpanId);
-    var avatar = $('#avatar_' + this.id);
+    var avatar = $('#' + this.videoSpanId + ' .userAvatar');
     this.hasAvatar = true;
 
     // set the avatar in the thumbnail
@@ -424,7 +428,6 @@ SmallVideo.prototype.avatarChanged = function (avatarUrl) {
     } else {
         if (thumbnail && thumbnail.length > 0) {
             avatar = document.createElement('img');
-            avatar.id = 'avatar_' + this.id;
             avatar.className = 'userAvatar';
             avatar.src = avatarUrl;
             thumbnail.append(avatar);

modules/UI/videolayout/VideoLayout.js

@@ -162,7 +162,7 @@ var VideoLayout = {
         localVideoThumbnail.setDisplayName();
         localVideoThumbnail.createConnectionIndicator();
 
-        let localId = APP.conference.localId;
+        let localId = APP.conference.getMyUserId();
         this.onVideoTypeChanged(localId, stream.videoType);
 
         let {thumbWidth, thumbHeight} = this.resizeThumbnails(false, true);
@@ -186,7 +186,7 @@ var VideoLayout = {
      */
     mucJoined () {
         if (largeVideo && !largeVideo.id) {
-            this.updateLargeVideo(APP.conference.localId, true);
+            this.updateLargeVideo(APP.conference.getMyUserId(), true);
         }
     },
 
@@ -290,7 +290,7 @@ var VideoLayout = {
         // Go with local video
         console.info("Fallback to local video...");
 
-        let id = APP.conference.localId;
+        let id = APP.conference.getMyUserId();
         console.info("electLastVisibleVideo: " + id);
 
         return id;
@@ -457,6 +457,8 @@ var VideoLayout = {
         let isModerator = APP.conference.isModerator;
         if (isModerator) {
             localVideoThumbnail.createModeratorIndicatorElement();
+        } else {
+            localVideoThumbnail.removeModeratorIndicatorElement();
         }
 
         APP.conference.listMembers().forEach(function (member) {
@@ -775,7 +777,7 @@ var VideoLayout = {
     updateLocalConnectionStats (percent, object) {
         let resolutions = object.resolution;
 
-        object.resolution = resolutions[APP.conference.localId];
+        object.resolution = resolutions[APP.conference.getMyUserId()];
         localVideoThumbnail.updateStatsIndicator(percent, object);
 
         Object.keys(resolutions).forEach(function (id) {