Moves LargeVideo html dependancies in LargeVideo.js

index.html

@@ -22,7 +22,7 @@
     <script src="libs/popover.js?v=1"></script><!-- bootstrap tooltip lib -->
     <script src="libs/toastr.js?v=1"></script><!-- notifications lib -->
     <script src="interface_config.js?v=5"></script>
-    <script src="libs/app.bundle.js?v=112"></script>
+    <script src="libs/app.bundle.js?v=113"></script>
     <script src="analytics.js?v=1"></script><!-- google analytics plugin -->
     <link rel="stylesheet" href="css/font.css?v=7"/>
     <link rel="stylesheet" href="css/toastr.css?v=1">
@@ -225,18 +225,6 @@
         </div>
         <div id="reloadPresentation"><a id="reloadPresentationLink"><i title="Reload Prezi" class="fa fa-repeat fa-lg"></i></a></div>
         <div id="videospace">
-            <div id="largeVideoContainer" class="videocontainer">
-                <div id="presentation"></div>
-                <div id="etherpad"></div>
-                <a target="_new"><div class="watermark leftwatermark"></div></a>
-                <a target="_new"><div class="watermark rightwatermark"></div></a>
-                <a class="poweredby" href="http://jitsi.org" target="_new" ><span data-i18n="poweredby"></span> jitsi.org</a>
-                <div id="activeSpeaker">
-                    <img id="activeSpeakerAvatar" src=""/>
-                    <canvas id="activeSpeakerAudioLevel"></canvas>
-                </div>
-                <video id="largeVideo" autoplay oncontextmenu="return false;"></video>
-            </div>
             <div id="remoteVideos">
                 <span id="localVideoContainer" class="videocontainer">
                     <span id="localNick" class="nick"></span>

modules/UI/UI.js

@@ -339,6 +339,10 @@ function registerListeners() {
     UI.addListener(UIEvents.NICKNAME_CHANGED, function (nickname) {
         APP.xmpp.addToPresence("displayName", nickname);
     });
+
+    UI.addListener(UIEvents.LARGEVIDEO_INIT, function () {
+        AudioLevels.init();
+    });
 }
 
 
@@ -386,29 +390,6 @@ UI.start = function (init) {
         return;
     }
 
-    if (interfaceConfig.SHOW_JITSI_WATERMARK) {
-        var leftWatermarkDiv
-            = $("#largeVideoContainer div[class='watermark leftwatermark']");
-
-        leftWatermarkDiv.css({display: 'block'});
-        leftWatermarkDiv.parent().get(0).href
-            = interfaceConfig.JITSI_WATERMARK_LINK;
-    }
-
-    if (interfaceConfig.SHOW_BRAND_WATERMARK) {
-        var rightWatermarkDiv
-            = $("#largeVideoContainer div[class='watermark rightwatermark']");
-
-        rightWatermarkDiv.css({display: 'block'});
-        rightWatermarkDiv.parent().get(0).href
-            = interfaceConfig.BRAND_WATERMARK_LINK;
-        rightWatermarkDiv.get(0).style.backgroundImage
-            = "url(images/rightwatermark.png)";
-    }
-
-    if (interfaceConfig.SHOW_POWERED_BY) {
-        $("#largeVideoContainer>a[class='poweredby']").css({display: 'block'});
-    }
 
     $("#welcome_page").hide();
 
@@ -418,10 +399,12 @@ UI.start = function (init) {
     // Set the defaults for prompt dialogs.
     jQuery.prompt.setDefaults({persistent: false});
 
+
+    registerListeners();
+
     VideoLayout.init(eventEmitter);
-    AudioLevels.init();
     NicknameHandler.init(eventEmitter);
-    registerListeners();
+
     bindEvents();
     setupPrezi();
     setupToolbars();
@@ -452,10 +435,6 @@ UI.start = function (init) {
         $('#notice').css({display: 'block'});
     }
 
-    if (!RTCBrowserType.isIExplorer()) {
-        document.getElementById('largeVideo').volume = 0;
-    }
-
     if(config.requireDisplayName) {
         var currentSettings = Settings.getSettings();
         if (!currentSettings.displayName) {

modules/UI/audio_levels/AudioLevels.js

@@ -1,6 +1,6 @@
 var CanvasUtil = require("./CanvasUtils");
 
-var ASDrawContext = $('#activeSpeakerAudioLevel')[0].getContext('2d');
+var ASDrawContext = null;
 
 function initActiveSpeakerAudioLevels() {
     var ASRadius = interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE / 2;
@@ -24,6 +24,7 @@ var AudioLevels = (function(my) {
     my.LOCAL_LEVEL = 'local';
 
     my.init = function () {
+        ASDrawContext = $('#activeSpeakerAudioLevel')[0].getContext('2d');
         initActiveSpeakerAudioLevels();
     }
 
@@ -120,7 +121,7 @@ var AudioLevels = (function(my) {
     };
 
     my.updateActiveSpeakerAudioLevel = function(audioLevel) {
-        if($("#activeSpeaker").css("visibility") == "hidden")
+        if($("#activeSpeaker").css("visibility") == "hidden" || ASDrawContext === null)
             return;
 
 

modules/UI/etherpad/Etherpad.js

@@ -38,31 +38,22 @@ function enableEtherpadButton() {
  * Creates the IFrame for the etherpad.
  */
 function createIFrame() {
-    etherpadIFrame = document.createElement('iframe');
-    etherpadIFrame.src = domain + etherpadName + options;
-    etherpadIFrame.frameBorder = 0;
-    etherpadIFrame.scrolling = "no";
-    etherpadIFrame.width = $('#largeVideoContainer').width() || 640;
-    etherpadIFrame.height = $('#largeVideoContainer').height() || 480;
-    etherpadIFrame.setAttribute('style', 'visibility: hidden;');
-
-    document.getElementById('etherpad').appendChild(etherpadIFrame);
-
-    etherpadIFrame.onload = function() {
-
-        document.domain = document.domain;
-        bubbleIframeMouseMove(etherpadIFrame);
-        setTimeout(function() {
-            // the iframes inside of the etherpad are
-            // not yet loaded when the etherpad iframe is loaded
-            var outer = etherpadIFrame.
-                contentDocument.getElementsByName("ace_outer")[0];
-            bubbleIframeMouseMove(outer);
-            var inner = outer.
-                contentDocument.getElementsByName("ace_inner")[0];
-            bubbleIframeMouseMove(inner);
-        }, 2000);
-    };
+    etherpadIFrame = VideoLayout.createEtherpadIframe(
+            domain + etherpadName + options, function() {
+
+                document.domain = document.domain;
+                bubbleIframeMouseMove(etherpadIFrame);
+                setTimeout(function() {
+                    // the iframes inside of the etherpad are
+                    // not yet loaded when the etherpad iframe is loaded
+                    var outer = etherpadIFrame.
+                        contentDocument.getElementsByName("ace_outer")[0];
+                    bubbleIframeMouseMove(outer);
+                    var inner = outer.
+                        contentDocument.getElementsByName("ace_inner")[0];
+                    bubbleIframeMouseMove(inner);
+                }, 2000);
+            });
 }
 
 function bubbleIframeMouseMove(iframe){
@@ -93,15 +84,6 @@ function bubbleIframeMouseMove(iframe){
 }
 
 
-/**
- * On video selected event.
- */
-$(document).bind('video.selected', function (event, isPresentation) {
-    if (config.etherpad_base && etherpadIFrame && etherpadIFrame.style.visibility !== 'hidden')
-        Etherpad.toggleEtherpad(isPresentation);
-});
-
-
 var Etherpad = {
     /**
      * Initializes the etherpad.
@@ -132,49 +114,17 @@ var Etherpad = {
         if (!etherpadIFrame)
             createIFrame();
 
-        var largeVideo = null;
-        if (Prezi.isPresentationVisible())
-            largeVideo = $('#presentation>iframe');
-        else
-            largeVideo = $('#largeVideo');
-
-        if ($('#etherpad>iframe').css('visibility') === 'hidden') {
-            $('#activeSpeaker').css('visibility', 'hidden');
-            largeVideo.fadeOut(300, function () {
-                if (Prezi.isPresentationVisible()) {
-                    largeVideo.css({opacity: '0'});
-                } else {
-                    VideoLayout.setLargeVideoVisible(false);
-                }
-            });
 
-            $('#etherpad>iframe').fadeIn(300, function () {
-                document.body.style.background = '#eeeeee';
-                $('#etherpad>iframe').css({visibility: 'visible'});
-                $('#etherpad').css({zIndex: 2});
-            });
+        if(VideoLayout.getLargeVideoState() === "etherpad")
+        {
+            VideoLayout.setLargeVideoState("video");
         }
-        else if ($('#etherpad>iframe')) {
-            $('#etherpad>iframe').fadeOut(300, function () {
-                $('#etherpad>iframe').css({visibility: 'hidden'});
-                $('#etherpad').css({zIndex: 0});
-                document.body.style.background = 'black';
-            });
-
-            if (!isPresentation) {
-                $('#largeVideo').fadeIn(300, function () {
-                    VideoLayout.setLargeVideoVisible(true);
-                });
-            }
+        else
+        {
+            VideoLayout.setLargeVideoState("etherpad");
         }
         resize();
-    },
-
-    isVisible: function() {
-        var etherpadIframe = $('#etherpad>iframe');
-        return etherpadIframe && etherpadIframe.is(':visible');
     }
-
 };
 
 module.exports = Etherpad;

modules/UI/prezi/Prezi.js

@@ -6,6 +6,20 @@ var PreziPlayer = require("./PreziPlayer");
 
 var preziPlayer = null;
 
+
+/**
+ * Shows/hides a presentation.
+ */
+function setPresentationVisible(visible) {
+
+    if (visible) {
+        VideoLayout.setLargeVideoState("prezi");
+    }
+    else {
+        VideoLayout.setLargeVideoState("video");
+    }
+}
+
 var Prezi = {
 
 
@@ -165,18 +179,14 @@ function presentationAdded(event, jid, presUrl, currentSlide) {
         + Strophe.getResourceFromJid(jid)
         + '_' + presId;
 
-
-
-
     VideoLayout.addPreziContainer(elementId);
-    VideoLayout.resizeThumbnails();
 
     var controlsEnabled = false;
     if (jid === APP.xmpp.myJid())
         controlsEnabled = true;
 
     setPresentationVisible(true);
-    $('#largeVideoContainer').hover(
+    VideoLayout.setLargeVideoHover(
         function (event) {
             if (Prezi.isPresentationVisible()) {
                 var reloadButtonRight = window.innerWidth
@@ -302,38 +312,6 @@ function resize() {
     }
 }
 
-/**
- * Shows/hides a presentation.
- */
-function setPresentationVisible(visible) {
-    var prezi = $('#presentation>iframe');
-    if (visible) {
-        // Trigger the video.selected event to indicate a change in the
-        // large video.
-        $(document).trigger("video.selected", [true]);
-
-        $('#largeVideo').fadeOut(300);
-        prezi.fadeIn(300, function() {
-            prezi.css({opacity:'1'});
-            ToolbarToggler.dockToolbar(true);
-            VideoLayout.setLargeVideoVisible(false);
-        });
-        $('#activeSpeaker').css('visibility', 'hidden');
-    }
-    else {
-        if (prezi.css('opacity') == '1') {
-            prezi.fadeOut(300, function () {
-                prezi.css({opacity:'0'});
-                $('#reloadPresentation').css({display:'none'});
-                $('#largeVideo').fadeIn(300, function() {
-                    VideoLayout.setLargeVideoVisible(true);
-                    ToolbarToggler.dockToolbar(false);
-                });
-            });
-        }
-    }
-}
-
 /**
  * Presentation has been removed.
  */
@@ -358,15 +336,6 @@ $(document).bind('gotoslide.muc', function (event, jid, presUrl, current) {
     }
 });
 
-/**
- * On video selected event.
- */
-$(document).bind('video.selected', function (event, isPresentation) {
-    if (!isPresentation && $('#presentation>iframe')) {
-        setPresentationVisible(false);
-    }
-});
-
 $(window).resize(function () {
     resize();
 });

modules/UI/videolayout/LargeVideo.js

@@ -3,6 +3,7 @@ var RTCBrowserType = require("../../RTC/RTCBrowserType");
 var UIUtil = require("../util/UIUtil");
 var UIEvents = require("../../../service/UI/UIEvents");
 var xmpp = require("../../xmpp/xmpp");
+var ToolbarToggler = require("../toolbars/ToolbarToggler");
 
 // FIXME: With Temasys we have to re-select everytime
 //var video = $('#largeVideo');
@@ -12,9 +13,45 @@ var currentVideoHeight = null;
 // By default we use camera
 var getVideoSize = getCameraVideoSize;
 var getVideoPosition = getCameraVideoPosition;
+/**
+ * The small video instance that is displayed in the large video
+ * @type {SmallVideo}
+ */
 var currentSmallVideo = null;
+/**
+ * Indicates whether the large video is enabled.
+ * @type {boolean}
+ */
+var isEnabled = true;
+/**
+ * Current large video state.
+ * Possible values - video, prezi or etherpad.
+ * @type {string}
+ */
+var state = "video";
 
-
+/**
+ * Returns the html element associated with the passed state of large video
+ * @param state the state.
+ * @returns {JQuery|*|jQuery|HTMLElement} the container.
+ */
+function getContainerByState(state)
+{
+    var selector = null;
+    switch (state)
+    {
+        case "video":
+            selector = "#largeVideo";
+            break;
+        case "etherpad":
+            selector = "#etherpad>iframe";
+            break;
+        case "prezi":
+            selector = "#presentation>iframe";
+            break;
+    }
+    return (selector !== null)? $(selector) : null;
+}
 
 /**
  * Sets the size and position of the given video element.
@@ -204,6 +241,10 @@ function updateActiveSpeakerAvatarSrc() {
     }
 }
 
+/**
+ * Change the video source of the large video.
+ * @param isVisible
+ */
 function changeVideo(isVisible) {
 
     if (!currentSmallVideo) {
@@ -248,11 +289,66 @@ function changeVideo(isVisible) {
     }
 }
 
+/**
+ * Creates the html elements for the large video.
+ */
+function createLargeVideoHTML()
+{
+    var html = '<div id="largeVideoContainer" class="videocontainer">';
+    html += '<div id="presentation"></div>' +
+            '<div id="etherpad"></div>' +
+            '<a target="_new"><div class="watermark leftwatermark"></div></a>' +
+            '<a target="_new"><div class="watermark rightwatermark"></div></a>' +
+            '<a class="poweredby" href="http://jitsi.org" target="_new" >' +
+                '<span data-i18n="poweredby"></span> jitsi.org' +
+            '</a>'+
+            '<div id="activeSpeaker">' +
+                '<img id="activeSpeakerAvatar" src=""/>' +
+                '<canvas id="activeSpeakerAudioLevel"></canvas>' +
+            '</div>' +
+            '<video id="largeVideo" autoplay oncontextmenu="return false;"></video>';
+    html += '</div>';
+    $(html).prependTo("#videospace");
+
+    if (interfaceConfig.SHOW_JITSI_WATERMARK) {
+        var leftWatermarkDiv
+            = $("#largeVideoContainer div[class='watermark leftwatermark']");
+
+        leftWatermarkDiv.css({display: 'block'});
+        leftWatermarkDiv.parent().get(0).href
+            = interfaceConfig.JITSI_WATERMARK_LINK;
+    }
+
+    if (interfaceConfig.SHOW_BRAND_WATERMARK) {
+        var rightWatermarkDiv
+            = $("#largeVideoContainer div[class='watermark rightwatermark']");
+
+        rightWatermarkDiv.css({display: 'block'});
+        rightWatermarkDiv.parent().get(0).href
+            = interfaceConfig.BRAND_WATERMARK_LINK;
+        rightWatermarkDiv.get(0).style.backgroundImage
+            = "url(images/rightwatermark.png)";
+    }
+
+    if (interfaceConfig.SHOW_POWERED_BY) {
+        $("#largeVideoContainer>a[class='poweredby']").css({display: 'block'});
+    }
+
+    if (!RTCBrowserType.isIExplorer()) {
+        $('#largeVideo').volume = 0;
+    }
+}
+
 var LargeVideo = {
 
     init: function (VideoLayout, emitter) {
+        if(!isEnabled)
+            return;
+        createLargeVideoHTML();
+
         this.VideoLayout = VideoLayout;
         this.eventEmitter = emitter;
+        this.eventEmitter.emit(UIEvents.LARGEVIDEO_INIT);
         var self = this;
         // Listen for large video size updates
         var largeVideo = $('#largeVideo')[0];
@@ -285,6 +381,8 @@ var LargeVideo = {
      * Updates the large video with the given new video source.
      */
     updateLargeVideo: function (resourceJid, forceUpdate) {
+        if(!isEnabled)
+            return;
         var newSmallVideo = this.VideoLayout.getSmallVideo(resourceJid);
         console.log('hover in ' + resourceJid + ', video: ', newSmallVideo);
 
@@ -324,6 +422,8 @@ var LargeVideo = {
      * Shows/hides the large video.
      */
     setLargeVideoVisible: function(isVisible) {
+        if(!isEnabled)
+            return;
         if (isVisible) {
             $('#largeVideo').css({visibility: 'visible'});
             $('.watermark').css({visibility: 'visible'});
@@ -339,6 +439,8 @@ var LargeVideo = {
         }
     },
     onVideoTypeChanged: function (jid) {
+        if(!isEnabled)
+            return;
         var resourceJid = Strophe.getResourceFromJid(jid);
         if (LargeVideo.isCurrentlyOnLarge(resourceJid))
         {
@@ -360,6 +462,8 @@ var LargeVideo = {
      */
     position: function (videoWidth, videoHeight,
                         videoSpaceWidth, videoSpaceHeight, animate) {
+        if(!isEnabled)
+            return;
         if(!videoSpaceWidth)
             videoSpaceWidth = $('#videospace').width();
         if(!videoSpaceHeight)
@@ -386,13 +490,9 @@ var LargeVideo = {
             largeVideoHeight,
             horizontalIndent, verticalIndent, animate);
     },
-
-    isLargeVideoOnTop: function () {
-        var Etherpad = require("../etherpad/Etherpad");
-        var Prezi = require("../prezi/Prezi");
-        return !Prezi.isPresentationVisible() && !Etherpad.isVisible();
-    },
     resize: function (animate, isVisible, completeFunction) {
+        if(!isEnabled)
+            return;
         var availableHeight = window.innerHeight;
         var availableWidth = UIUtil.getAvailableVideoWidth(isVisible);
 
@@ -437,6 +537,8 @@ var LargeVideo = {
 
     },
     resizeVideoAreaAnimated: function (isVisible, completeFunction) {
+        if(!isEnabled)
+            return;
         var size = this.resize(true, isVisible, completeFunction);
         this.position(null, null, size[0], size[1], true);
     },
@@ -444,22 +546,152 @@ var LargeVideo = {
         return currentSmallVideo ? currentSmallVideo.getResourceJid() : null;
     },
     updateAvatar: function (resourceJid) {
+        if(!isEnabled)
+            return;
         if (resourceJid === this.getResourceJid()) {
             updateActiveSpeakerAvatarSrc();
         }
     },
     showAvatar: function (resourceJid, show) {
+        if(!isEnabled)
+            return;
         if(this.getResourceJid() === resourceJid
-            && LargeVideo.isLargeVideoOnTop())
+            && state === "video")
         {
             $("#largeVideo").css("visibility", show ? "hidden" : "visible");
             $('#activeSpeaker').css("visibility", show ? "visible" : "hidden");
             return true;
         }
         return false;
+    },
+    /**
+     * Disables the large video
+     */
+    disable: function () {
+        isEnabled = false;
+    },
+    /**
+     * Enables the large video
+     */
+    enable: function () {
+        isEnabled = true;
+    },
+    /**
+     * Returns true if the video is enabled.
+     */
+    isEnabled: function () {
+        return isEnabled;
+    },
+    /**
+     * Creates the iframe used by the etherpad
+     * @param src the value for src attribute
+     * @param onloadHandler handler executed when the iframe loads it content
+     * @returns {HTMLElement} the iframe
+     */
+    createEtherpadIframe: function (src, onloadHandler) {
+        if(!isEnabled)
+            return;
+
+        var etherpadIFrame = document.createElement('iframe');
+        etherpadIFrame.src = src;
+        etherpadIFrame.frameBorder = 0;
+        etherpadIFrame.scrolling = "no";
+        etherpadIFrame.width = $('#largeVideoContainer').width() || 640;
+        etherpadIFrame.height = $('#largeVideoContainer').height() || 480;
+        etherpadIFrame.setAttribute('style', 'visibility: hidden;');
+
+        document.getElementById('etherpad').appendChild(etherpadIFrame);
+
+        etherpadIFrame.onload = onloadHandler;
+
+        return etherpadIFrame;
+    },
+    /**
+     * Changes the state of the large video.
+     * Possible values - video, prezi, etherpad.
+     * @param newState - the new state
+     */
+    setState: function (newState) {
+        if(state === newState)
+            return;
+        var currentContainer = getContainerByState(state);
+        if(!currentContainer)
+            return;
+
+        var self = this;
+        var oldState = state;
+
+        switch (newState)
+        {
+            case "etherpad":
+                $('#activeSpeaker').css('visibility', 'hidden');
+                currentContainer.fadeOut(300, function () {
+                    if (oldState === "prezi") {
+                        currentContainer.css({opacity: '0'});
+                        $('#reloadPresentation').css({display: 'none'});
+                    }
+                    else {
+                        self.setLargeVideoVisible(false);
+                    }
+                });
+
+                $('#etherpad>iframe').fadeIn(300, function () {
+                    document.body.style.background = '#eeeeee';
+                    $('#etherpad>iframe').css({visibility: 'visible'});
+                    $('#etherpad').css({zIndex: 2});
+                });
+                break;
+            case "prezi":
+                var prezi = $('#presentation>iframe');
+                currentContainer.fadeOut(300, function() {
+                    document.body.style.background = 'black';
+                });
+                prezi.fadeIn(300, function() {
+                    prezi.css({opacity:'1'});
+                    ToolbarToggler.dockToolbar(true);//fix that
+                    self.setLargeVideoVisible(false);
+                    $('#etherpad>iframe').css({visibility: 'hidden'});
+                    $('#etherpad').css({zIndex: 0});
+                });
+                $('#activeSpeaker').css('visibility', 'hidden');
+                break;
+
+            case "video":
+                currentContainer.fadeOut(300, function () {
+                    $('#presentation>iframe').css({opacity:'0'});
+                    $('#reloadPresentation').css({display:'none'});
+                    $('#etherpad>iframe').css({visibility: 'hidden'});
+                    $('#etherpad').css({zIndex: 0});
+                    document.body.style.background = 'black';
+                    ToolbarToggler.dockToolbar(false);//fix that
+                });
+                $('#largeVideo').fadeIn(300, function () {
+                    self.setLargeVideoVisible(true);
+                });
+                break;
+        }
+
+        state = newState;
+
+    },
+    /**
+     * Returns the current state of the large video.
+     * @returns {string} the current state - video, prezi or etherpad.
+     */
+    getState: function () {
+        return state;
+    },
+    /**
+     * Sets hover handlers for the large video container div.
+     * @param inHandler
+     * @param outHandler
+     */
+    setHover: function(inHandler, outHandler)
+    {
+        $('#largeVideoContainer').hover(inHandler, outHandler);
     }
 
-}
+};
 
 
 module.exports = LargeVideo;

modules/UI/videolayout/SmallVideo.js

@@ -210,7 +210,7 @@ SmallVideo.prototype.enableDominantSpeaker = function (isEnable)
     }
 
     if (isEnable) {
-        this.showDisplayName(LargeVideo.isLargeVideoOnTop());
+        this.showDisplayName(LargeVideo.getState() === "video");
 
         if (!this.container.classList.contains("dominantspeaker"))
             this.container.classList.add("dominantspeaker");

modules/UI/videolayout/VideoLayout.js

@@ -1,5 +1,4 @@
 var AudioLevels = require("../audio_levels/AudioLevels");
-var Avatar = require("../avatar/Avatar");
 var ContactList = require("../side_pannels/contactlist/ContactList");
 var MediaStreamType = require("../../../service/RTC/MediaStreamTypes");
 var UIEvents = require("../../../service/UI/UIEvents");
@@ -14,9 +13,6 @@ var LocalVideo = require("./LocalVideo");
 var remoteVideos = {};
 var localVideoThumbnail = null;
 
-
-
-
 var currentDominantSpeaker = null;
 var lastNCount = config.channelLastN;
 var localLastNCount = config.channelLastN;
@@ -26,6 +22,8 @@ var lastNPickupJid = null;
 
 var eventEmitter = null;
 
+var showLargeVideo = true;
+
 
 /**
  * Currently focused video jid
@@ -37,8 +35,10 @@ var VideoLayout = (function (my) {
     my.init = function (emitter) {
         eventEmitter = emitter;
         localVideoThumbnail = new LocalVideo(VideoLayout);
-        VideoLayout.resizeLargeVideoContainer();
+
         LargeVideo.init(VideoLayout, emitter);
+        VideoLayout.resizeLargeVideoContainer();
+
     };
 
     my.isInLastN = function(resource) {
@@ -232,9 +232,7 @@ var VideoLayout = (function (my) {
             }
         }
 
-        // Triggers a "video.selected" event. The "false" parameter indicates
-        // this isn't a prezi.
-        $(document).trigger("video.selected", [false]);
+        LargeVideo.setState("video");
 
         LargeVideo.updateLargeVideo(resourceJid);
 
@@ -583,11 +581,11 @@ var VideoLayout = (function (my) {
             var currentJID = APP.xmpp.findJidFromResource(currentDominantSpeaker);
             var newJID = APP.xmpp.findJidFromResource(resourceJid);
             if(currentDominantSpeaker && (!members || !members[currentJID] ||
-                !members[currentJID].displayName)) {
+                !members[currentJID].displayName) && remoteVideos[resourceJid]) {
                 remoteVideos[resourceJid].setDisplayName(null);
             }
             if(resourceJid && (!members || !members[newJID] ||
-                !members[newJID].displayName)) {
+                !members[newJID].displayName) && remoteVideos[resourceJid]) {
                 remoteVideos[resourceJid].setDisplayName(null,
                     interfaceConfig.DEFAULT_DOMINANT_SPEAKER_DISPLAY_NAME);
             }
@@ -855,7 +853,9 @@ var VideoLayout = (function (my) {
     };
 
     my.addPreziContainer = function (id) {
-        return RemoteVideo.createContainer(id);
+        var container = RemoteVideo.createContainer(id);
+        VideoLayout.resizeThumbnails();
+        return container;
     };
 
     my.setLargeVideoVisible = function (isVisible) {
@@ -905,6 +905,23 @@ var VideoLayout = (function (my) {
         LargeVideo.updateAvatar(resourceJid, thumbUrl);
     };
 
+    my.createEtherpadIframe = function(src, onloadHandler)
+    {
+        return LargeVideo.createEtherpadIframe(src, onloadHandler);
+    };
+
+    my.setLargeVideoState = function (state) {
+        LargeVideo.setState(state);
+    };
+
+    my.getLargeVideoState = function () {
+        return LargeVideo.getState();
+    };
+
+    my.setLargeVideoHover = function (inHandler, outHandler) {
+        LargeVideo.setHover(inHandler, outHandler);
+    };
+
     return my;
 }(VideoLayout || {}));
 

service/UI/UIEvents.js

@@ -1,6 +1,7 @@
 var UIEvents = {
     NICKNAME_CHANGED: "UI.nickname_changed",
     SELECTED_ENDPOINT: "UI.selected_endpoint",
-    PINNED_ENDPOINT: "UI.pinned_endpoint"
+    PINNED_ENDPOINT: "UI.pinned_endpoint",
+    LARGEVIDEO_INIT: "UI.largevideo_init"
 };
 module.exports = UIEvents;