Updates use of recording states, add some information texts and notifications.

Removes the useBundle and useRtcpMux options from config.js. These are

README.md

@@ -1,6 +1,6 @@
 Jitsi Meet - Secure, Simple and Scalable Video Conferences 
 ====
-Jitsi Meet is an open-source (MIT) WebRTC JavaScript application that uses [Jitsi Videobridge](https://jitsi.org/videobridge) to provide high quality, scalable video conferences. You can see [Jitsi Meet in action](http://youtu.be/7vFUVClsNh0) here at the 482 session of the VoIP Users Conference.
+Jitsi Meet is an open-source (Apache) WebRTC JavaScript application that uses [Jitsi Videobridge](https://jitsi.org/videobridge) to provide high quality, scalable video conferences. You can see [Jitsi Meet in action](http://youtu.be/7vFUVClsNh0) here at the session #482 of the VoIP Users Conference.
 
 You can also try it out yourself at https://meet.jit.si .
 
@@ -30,7 +30,7 @@ make
 ```
 
 ## Discuss
-Please use the [Jitsi dev mailing list](http://lists.jitsi.org/pipermail/dev/) to discuss feature requests before opening an issue on github. 
+Please use the [Jitsi dev mailing list](http://lists.jitsi.org/pipermail/dev/) to discuss feature requests before opening an issue on Github. 
 
 ## Acknowledgements
 
@@ -38,7 +38,7 @@ Jitsi Meet started out as a sample conferencing application using Jitsi Videobri
 
 ## Miscellaneous
 
-This project was originally contributed to the community under the MIT licesne and with the following notice:
+This project was originally contributed to the community under the MIT license and with the following notice:
 
 The MIT License (MIT)
 

app.js

@@ -21,14 +21,11 @@ var APP =
 
 function init() {
 
+    APP.desktopsharing.init();
     APP.RTC.start();
     APP.xmpp.start();
     APP.statistics.start();
     APP.connectionquality.init();
-
-    // Set default desktop sharing method
-    APP.desktopsharing.init();
-
     APP.keyboardshortcut.init();
     APP.members.start();
 }
@@ -36,8 +33,8 @@ function init() {
 
 $(document).ready(function () {
 
-    var URLPRocessor = require("./modules/URLProcessor/URLProcessor");
-    URLPRocessor.setConfigParametersFromUrl();
+    var URLProcessor = require("./modules/URLProcessor/URLProcessor");
+    URLProcessor.setConfigParametersFromUrl();
     APP.init();
 
     APP.translation.init();

config.js

@@ -26,12 +26,11 @@ var config = {
     channelLastN: -1, // The default value of the channel attribute last-n.
     adaptiveLastN: false,
     adaptiveSimulcast: false,
-    useRtcpMux: true, // required for FF support
-    useBundle: true, // required for FF support
     enableRecording: false,
     enableWelcomePage: true,
     enableSimulcast: false, // blocks FF support
     logStats: false, // Enable logging of PeerConnection stats via the focus
+//    requireDisplayName: true,//Forces the participants that doesn't have display name to enter it when they enter the room.
 //    startAudioMuted: 10, //every participant after the Nth will start audio muted
 //    startVideoMuted: 10, //every participant after the Nth will start video muted
 //    defaultLanguage: "en",

css/videolayout_default.css

@@ -60,28 +60,31 @@
 }
 
 #remoteVideos .videocontainer:hover {
-    -webkit-box-shadow: inset 0 0 10px #FFFFFF, 0 0 10px #FFFFFF;
+    box-shadow:  inset 0 0 10px #FFFFFF, 0 0 10px #FFFFFF;
     border: 2px solid #FFFFFF;
 }
 
 #remoteVideos .videocontainer.videoContainerFocused {
-    -webkit-box-shadow: inset 0 0 28px #006d91;
+    box-shadow: inset 0 0 28px #006d91;
     border: 2px solid #006d91;
 }
 
 #remoteVideos .videocontainer.videoContainerFocused:hover {
-    -webkit-box-shadow: inset 0 0 5px #FFFFFF, 0 0 10px #FFFFFF, inset 0 0 60px #006d91;
+    box-shadow: inset 0 0 5px #FFFFFF, 0 0 10px #FFFFFF, inset 0 0 60px #006d91;
     border: 2px solid #FFFFFF;
 }
 
 #localVideoWrapper {
     display:inline-block;
     -webkit-mask-box-image: url(../images/videomask.svg);
-    border-radius:0px !important;
+    border-radius:4px !important;
     border: 0px !important;
 }
 
-#remoteVideos .videocontainer>video {
+/* With TemasysWebRTC plugin <object/> element is used
+   instead of <video/> */
+#remoteVideos .videocontainer>video,
+#remoteVideos .videocontainer>object {
     border-radius:4px;
 }
 
@@ -92,8 +95,9 @@
     -o-transform: scale(-1, 1);
 }
 
-#localVideoWrapper>video {
-    border-radius:0px !important;
+#localVideoWrapper>video,
+#localVideoWrapper>object {
+    border-radius:4px !important;
 }
 
 #largeVideo,
@@ -110,8 +114,10 @@
 #presentation,
 #etherpad,
 #localVideoWrapper>video,
+#localVideoWrapper>object,
 #localVideoWrapper,
-.videocontainer>video {
+.videocontainer>video,
+.videocontainer>object {
     position: absolute;
     left: 0;
     top: 0;
@@ -363,7 +369,7 @@
     margin-right: 40%;
     text-align: center;
     background: linear-gradient(to bottom, rgba(255,255,255,.85) , rgba(255,255,255,.35));
-    -webkit-box-shadow: 0 0 2px #000000, 0 0 10px #000000;
+    box-shadow: 0 0 2px #000000, 0 0 10px #000000;
     border-bottom-left-radius: 12px;
     border-bottom-right-radius: 12px;
     display: none;
@@ -440,3 +446,29 @@
     background-position: center;
 }
 
+.videoMessageFilter {
+    -webkit-filter: grayscale(.5) opacity(0.8);
+    filter: grayscale(.5) opacity(0.8);
+}
+
+.videoProblemFilter {
+    -webkit-filter: blur(10px) grayscale(.5) opacity(0.8);
+    filter: blur(10px) grayscale(.5) opacity(0.8);
+}
+
+#videoConnectionMessage {
+    display: none;
+    position: absolute;
+    width: 100%;
+    top:50%;
+    z-index: 10000;
+    font-weight: 600;
+    font-size: 14px;
+    text-align: center;
+    color: #FFF;
+    opacity: .80;
+    text-shadow:    0px 0px 1px rgba(0,0,0,0.3),
+                    0px 1px 1px rgba(0,0,0,0.3),
+                    1px 0px 1px rgba(0,0,0,0.3),
+                    0px 0px 1px rgba(0,0,0,0.3);
+}

debian/control

@@ -10,14 +10,15 @@ Homepage: https://jitsi.org/meet
 
 Package: jitsi-meet
 Architecture: all
-Depends: ${misc:Depends}, jitsi-videobridge, nginx, jitsi-meet-prosody, libjs-strophe (>= 1.1.3),
- libjs-jquery, libjs-jquery-ui
+Depends: ${misc:Depends}, jitsi-videobridge, jitsi-meet-prosody, libjs-strophe (>= 1.1.3),
+ libjs-jquery, libjs-jquery-ui, openjdk-8-jre-headless | nginx
 Description: WebRTC JavaScript video conferences
  Jitsi Meet is a WebRTC JavaScript application that uses Jitsi
  Videobridge to provide high quality, scalable video conferences.
  .
  It is a web interface to Jitsi Videobridge for audio and video
- forwarding and relaying, configured to work with nginx
+ forwarding and relaying, configured to work with jetty instance
+ running embedded into Jitsi Videobridge
 
 Package: jitsi-meet-prosody
 Architecture: all
@@ -27,7 +28,8 @@ Description: Prosody configuration for Jitsi Meet
  Videobridge to provide high quality, scalable video conferences.
  .
  It is a web interface to Jitsi Videobridge for audio and video
- forwarding and relaying, configured to work with nginx
+ forwarding and relaying, configured to work with jetty instance
+ running embedded into Jitsi Videobridge
  .
  This package contains configuration for Prosody to be used with
  Jitsi Meet.

debian/jitsi-meet-prosody.templates

@@ -1,5 +1,4 @@
 Template: jitsi-meet-prosody/jvb-hostname
 Type: string
-Default: ${default-key}
 _Description: The hostname of the current installation:
  The value for the hostname that is set in Jitsi Videobridge installation.

debian/jitsi-meet.postinst

@@ -1,4 +1,4 @@
-#!/bin/sh
+#!/bin/bash
 # postinst script for jitsi-meet
 #
 # see: dh_installdeb(1)
@@ -20,67 +20,159 @@ set -e
 case "$1" in
     configure)
 
-        . /etc/jitsi/videobridge/config
+        JVB_ETC_CONFIG="/etc/jitsi/videobridge/config"
+        JVB_CONFIG="/usr/share/jitsi-videobridge/.sip-communicator/sip-communicator.properties"
+
+        . $JVB_ETC_CONFIG
 
         # loading debconf
         . /usr/share/debconf/confmodule
 
-        # detect dpkg-reconfigure, just delete old links
+        # detect dpkg-reconfigure
+        RECONFIGURING="false"
         db_get jitsi-meet/jvb-hostname
         JVB_HOSTNAME_OLD=$RET
         if [ -n "$RET" ] && [ ! "$JVB_HOSTNAME_OLD" = "$JVB_HOSTNAME" ] ; then
-            rm -f /etc/nginx/sites-enabled/$JVB_HOSTNAME_OLD.conf
+            RECONFIGURING="true"
             rm -f /etc/jitsi/meet/$JVB_HOSTNAME_OLD-config.js
         fi
 
+        JVB_SERVE="false"
+        db_get jitsi-meet/jvb-serve
+        if [ -n "$RET" ] && [ "$RET" = "true" ] ; then
+            JVB_SERVE="true"
+        fi
+
         # stores the hostname so we will reuse it later, like in purge
         db_set jitsi-meet/jvb-hostname $JVB_HOSTNAME
 
-        # nginx conf
-        if [ ! -f /etc/nginx/sites-available/$JVB_HOSTNAME.conf ]; then
-            cp /usr/share/doc/jitsi-meet/jitsi-meet.example /etc/nginx/sites-available/$JVB_HOSTNAME.conf
-            if [ ! -f /etc/nginx/sites-enabled/$JVB_HOSTNAME.conf ]; then
-                ln -s /etc/nginx/sites-available/$JVB_HOSTNAME.conf /etc/nginx/sites-enabled/$JVB_HOSTNAME.conf
-            fi
-            sed -i "s/jitsi-meet.example.com/$JVB_HOSTNAME/g" /etc/nginx/sites-available/$JVB_HOSTNAME.conf
+        NGINX_INSTALL_CHECK="$(dpkg-query -W -f '${PackageSpec}:${Status}\n' nginx 2>&1 | grep -v "ok installed" || :)"
+        if [ -z "${NGINX_INSTALL_CHECK}" ]; then
+            FORCE_NGINX="true"
         fi
 
         # SSL for nginx
         db_get jitsi-meet/cert-choice
         CERT_CHOICE="$RET"
-        if [ "$CERT_CHOICE" = 'A certificate is available and the files are uploaded on the server' ]; then
-            db_set jitsi-meet/cert-path-key "/etc/ssl/$JVB_HOSTNAME.key"
-            db_input critical jitsi-meet/cert-path-key || true
-            db_go
-            db_get jitsi-meet/cert-path-key
-            CERT_KEY="$RET"
-            db_set jitsi-meet/cert-path-crt "/etc/ssl/$JVB_HOSTNAME.crt"
-            db_input critical jitsi-meet/cert-path-crt || true
-            db_go
-            db_get jitsi-meet/cert-path-crt
-            CERT_CRT="$RET"
-            # replace self-signed certificate paths with user provided ones
-            CERT_KEY_ESC=$(echo $CERT_KEY | sed 's/\./\\\./g')
-            CERT_KEY_ESC=$(echo $CERT_KEY_ESC | sed 's/\//\\\//g')
-            sed -i "s/ssl_certificate_key\ \/var\/lib\/prosody\/.*key/ssl_certificate_key\ $CERT_KEY_ESC/g" \
-                /etc/nginx/sites-available/$JVB_HOSTNAME.conf
-            CERT_CRT_ESC=$(echo $CERT_CRT | sed 's/\./\\\./g')
-            CERT_CRT_ESC=$(echo $CERT_CRT_ESC | sed 's/\//\\\//g')
-            sed -i "s/ssl_certificate\ \/var\/lib\/prosody\/.*crt/ssl_certificate\ $CERT_CRT_ESC/g" \
-                /etc/nginx/sites-available/$JVB_HOSTNAME.conf
-        fi
+        UPLOADED_CERT_CHOICE="A certificate is available and the files are uploaded on the server"
 
         # jitsi meet
         JITSI_MEET_CONFIG="/etc/jitsi/meet/$JVB_HOSTNAME-config.js"
-        if [ ! -f $JITSI_MEET_CONFIG ]; then
+        if [ ! -f $JITSI_MEET_CONFIG ] ; then
             cp /usr/share/doc/jitsi-meet/config.js $JITSI_MEET_CONFIG
             sed -i "s/jitsi-meet.example.com/$JVB_HOSTNAME/g" $JITSI_MEET_CONFIG
         fi
 
+        # this is new install let's configure jvb to serve meet
+        if [[ -z $FORCE_NGINX && ( -z $JVB_HOSTNAME_OLD || "$JVB_SERVE" = "true" ) ]] ; then
+            # this is a reconfigure, lets just delete old links
+            if [ "$RECONFIGURING" = "true" ] ; then
+                rm -f $JVB_CONFIG
+            fi
+
+            # configure jvb
+            echo "AUTHBIND=yes" >> $JVB_ETC_CONFIG
+            sed -i "s/JVB_OPTS=.*/JVB_OPTS=--apis=rest,xmpp/g" $JVB_ETC_CONFIG
+
+            echo "org.jitsi.videobridge.rest.jetty.host=::" >> $JVB_CONFIG
+            echo "org.jitsi.videobridge.rest.jetty.port=443" >> $JVB_CONFIG
+            echo "org.jitsi.videobridge.rest.jetty.ProxyServlet.hostHeader=$JVB_HOSTNAME" >> $JVB_CONFIG
+            echo "org.jitsi.videobridge.rest.jetty.ProxyServlet.pathSpec=/http-bind" >> $JVB_CONFIG
+            echo "org.jitsi.videobridge.rest.jetty.ProxyServlet.proxyTo=http://localhost:5280/http-bind" >> $JVB_CONFIG
+            echo "org.jitsi.videobridge.rest.jetty.ResourceHandler.resourceBase=/usr/share/jitsi-meet" >> $JVB_CONFIG
+            echo "org.jitsi.videobridge.rest.jetty.ResourceHandler.alias./config.js=/etc/jitsi/meet/$JVB_HOSTNAME-config.js" >> $JVB_CONFIG
+            echo "org.jitsi.videobridge.rest.jetty.RewriteHandler.regex=^/([a-zA-Z0-9]+)$" >> $JVB_CONFIG
+            echo "org.jitsi.videobridge.rest.jetty.RewriteHandler.replacement=/" >> $JVB_CONFIG
+            echo "org.jitsi.videobridge.rest.jetty.tls.port=443" >> $JVB_CONFIG
+            echo "org.jitsi.videobridge.TCP_HARVESTER_PORT=443" >> $JVB_CONFIG
+            echo "org.jitsi.videobridge.rest.jetty.sslContextFactory.keyStorePath=/etc/jitsi/videobridge/$JVB_HOSTNAME.jks" >> $JVB_CONFIG
+            echo "org.jitsi.videobridge.rest.jetty.sslContextFactory.keyStorePassword=changeit" >> $JVB_CONFIG
+
+            # configure authbind to allow jvb to bind to privileged ports
+            OWNER=$(stat -c '%U' /usr/share/jitsi-videobridge)
+            GROUP=$(stat -c '%G' /usr/share/jitsi-videobridge)
+            JVB_UID="`id -u $OWNER`"
+            if [ ! -f "/etc/authbind/byuid/$JVB_UID" ] ; then
+                if [ ! -d "/etc/authbind/byuid" ] ; then
+                        mkdir -p /etc/authbind/byuid
+                        chmod 755 /etc/authbind
+                        chmod 755 /etc/authbind/byuid
+                fi
+                echo '::,443' >/etc/authbind/byuid/$JVB_UID
+                chown $OWNER:$GROUP /etc/authbind/byuid/$JVB_UID
+                chmod 700 /etc/authbind/byuid/$JVB_UID
+            fi
+
+            if [ "$CERT_CHOICE" = "$UPLOADED_CERT_CHOICE" ] ; then
+                # create jks from uploaded certs
+                openssl pkcs12 -export \
+                    -in /etc/ssl/$JVB_HOSTNAME.crt \
+                    -inkey /etc/ssl/$JVB_HOSTNAME.key \
+                    -passout pass:changeit > /etc/jitsi/videobridge/$JVB_HOSTNAME.p12
+                keytool -importkeystore \
+                    -srckeystore /etc/jitsi/videobridge/$JVB_HOSTNAME.p12 \
+                    -destkeystore /etc/jitsi/videobridge/$JVB_HOSTNAME.jks \
+                    -srcstoretype pkcs12 \
+                    -noprompt -storepass changeit -srcstorepass changeit
+            else
+                # create jks from self-signed certs
+                openssl pkcs12 -export \
+                    -in /var/lib/prosody/$JVB_HOSTNAME.crt \
+                    -inkey /var/lib/prosody/$JVB_HOSTNAME.key \
+                    -passout pass:changeit > /etc/jitsi/videobridge/$JVB_HOSTNAME.p12
+                keytool -importkeystore \
+                    -srckeystore /etc/jitsi/videobridge/$JVB_HOSTNAME.p12 \
+                    -destkeystore /etc/jitsi/videobridge/$JVB_HOSTNAME.jks \
+                    -srcstoretype pkcs12 \
+                    -noprompt -storepass changeit -srcstorepass changeit
+            fi
+
+            db_set jitsi-meet/jvb-serve "true"
+
+            invoke-rc.d jitsi-videobridge restart
+        elif [[ "$FORCE_NGINX" = "true" || ( -n $JVB_HOSTNAME_OLD && "$JVB_SERVE" = "false" ) ]] ; then
+            # this is a reconfigure, lets just delete old links
+            if [ "$RECONFIGURING" = "true" ] ; then
+                rm -f /etc/nginx/sites-enabled/$JVB_HOSTNAME_OLD.conf
+                rm -f /etc/jitsi/meet/$JVB_HOSTNAME_OLD-config.js
+            fi
+
+            # nginx conf
+            if [ ! -f /etc/nginx/sites-available/$JVB_HOSTNAME.conf ] ; then
+                cp /usr/share/doc/jitsi-meet/jitsi-meet.example /etc/nginx/sites-available/$JVB_HOSTNAME.conf
+                if [ ! -f /etc/nginx/sites-enabled/$JVB_HOSTNAME.conf ] ; then
+                    ln -s /etc/nginx/sites-available/$JVB_HOSTNAME.conf /etc/nginx/sites-enabled/$JVB_HOSTNAME.conf
+                fi
+                sed -i "s/jitsi-meet.example.com/$JVB_HOSTNAME/g" /etc/nginx/sites-available/$JVB_HOSTNAME.conf
+            fi
+
+            if [ "$CERT_CHOICE" = "$UPLOADED_CERT_CHOICE" ] ; then
+                db_set jitsi-meet/cert-path-key "/etc/ssl/$JVB_HOSTNAME.key"
+                db_input critical jitsi-meet/cert-path-key || true
+                db_go
+                db_get jitsi-meet/cert-path-key
+                CERT_KEY="$RET"
+                db_set jitsi-meet/cert-path-crt "/etc/ssl/$JVB_HOSTNAME.crt"
+                db_input critical jitsi-meet/cert-path-crt || true
+                db_go
+                db_get jitsi-meet/cert-path-crt
+                CERT_CRT="$RET"
+                # replace self-signed certificate paths with user provided ones
+                CERT_KEY_ESC=$(echo $CERT_KEY | sed 's/\./\\\./g')
+                CERT_KEY_ESC=$(echo $CERT_KEY_ESC | sed 's/\//\\\//g')
+                sed -i "s/ssl_certificate_key\ \/var\/lib\/prosody\/.*key/ssl_certificate_key\ $CERT_KEY_ESC/g" \
+                    /etc/nginx/sites-available/$JVB_HOSTNAME.conf
+                CERT_CRT_ESC=$(echo $CERT_CRT | sed 's/\./\\\./g')
+                CERT_CRT_ESC=$(echo $CERT_CRT_ESC | sed 's/\//\\\//g')
+                sed -i "s/ssl_certificate\ \/var\/lib\/prosody\/.*crt/ssl_certificate\ $CERT_CRT_ESC/g" \
+                    /etc/nginx/sites-available/$JVB_HOSTNAME.conf
+            fi
+
+            invoke-rc.d nginx reload
+        fi
+
         # and we're done with debconf
         db_stop
-
-        invoke-rc.d nginx reload
     ;;
 
     abort-upgrade|abort-remove|abort-deconfigure)

debian/jitsi-meet.templates

@@ -10,20 +10,23 @@ _Description: SSL certificate for the Jitsi Meet instance
 
 Template: jitsi-meet/cert-path-key
 Type: string
-Default: ${default-key}
 _Description: Full local server path to the SSL key file:
  The full path to the SSL key file on the server.
  If it has not been uploaded, now is a good time to do so.
 
 Template: jitsi-meet/cert-path-crt
 Type: string
-Default: ${default-crt}
 _Description: Full local server path to the SSL certificate file:
  The full path to the SSL certificate file on the server.
  If you haven't uploaded it, now is a good time to upload it in another console.
 
 Template: jitsi-meet/jvb-hostname
 Type: string
-Default: ${default-key}
 _Description: The hostname of the current installation:
  The value for the hostname that is set in Jitsi Videobridge installation.
+
+Template: jitsi-meet/jvb-serve
+Type: boolean
+Default: false
+_Description: for internal use
+ for internal use.

debian/patches/jquery-package

@@ -3,14 +3,16 @@ Index: jitsi-meet/index.html
 ===================================================================
 --- jitsi-meet.orig/index.html
 +++ jitsi-meet/index.html
-@@ -9,12 +9,12 @@
-     <meta itemprop="name" content="Jitsi Meet"/>
+@@ -10,14 +10,14 @@
      <meta itemprop="description" content="Join a WebRTC video conference powered by the Jitsi Videobridge"/>
      <meta itemprop="image" content="/images/jitsilogo.png"/>
+     <script src="https://api.callstats.io/static/callstats.min.js"></script>
 -    <script src="libs/jquery-2.1.1.min.js"></script>
 +    <script src="libs/jquery.min.js"></script>
-     <script src="config.js?v=9"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
-     <script src="libs/strophe/strophe.min.js?v=1"></script>
+     <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
+     <script src="https://cdnjs.cloudflare.com/ajax/libs/jsSHA/1.5.0/sha.js"></script>
+     <script src="config.js?v=11"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
+     <script src="libs/strophe/strophe.min.js?v=2"></script>
      <script src="libs/strophe/strophe.disco.min.js?v=1"></script>
      <script src="libs/strophe/strophe.caps.jsonly.min.js?v=1"></script>
 -    <script src="libs/jquery-ui.js"></script>

debian/po/templates.pot

@@ -1,7 +1,3 @@
-# SOME DESCRIPTIVE TITLE.
-# Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
-# This file is distributed under the same license as the PACKAGE package.
-# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
 #
 #, fuzzy
 msgid ""
@@ -74,7 +70,6 @@ msgid ""
 "uploaded it, now is a good time to upload it in another console."
 msgstr ""
 
-
 #. Type: string
 #. Description
 #: ../jitsi-meet.templates:4001
@@ -87,3 +82,17 @@ msgstr ""
 msgid ""
 "The value for the hostname that is set in Jitsi Videobridge installation."
 msgstr ""
+
+
+#. Type: string
+#. Description
+#: ../jitsi-meet.templates:5001
+msgid "for internal use"
+msgstr ""
+
+#. Type: string
+#. Description
+#: ../jitsi-meet.templates:5001
+msgid ""
+"Jitsi Videobridge installation can use its internal jetty to serve static meet pages."
+msgstr ""

doc/api.md

@@ -49,13 +49,13 @@ the new display name to be set
 ```
 api.executeCommand('displayName', ['New Nickname']);
 ```
-* **muteAudio** - mutes / unmutes the audio for the local participant. No arguments are required.
+* **toggleAudio** - mutes / unmutes the audio for the local participant. No arguments are required.
 ```
-api.executeCommand('muteAudio', [])
+api.executeCommand('toggleAudio', [])
 ```
-* **muteVideo** - mutes / unmutes the video for the local participant. No arguments are required.
+* **toggleVideo** - mutes / unmutes the video for the local participant. No arguments are required.
 ```
-api.executeCommand('muteVideo', [])
+api.executeCommand('toggleVideo', [])
 ```
 * **toggleFilmStrip** - hides / shows the film strip. No arguments are required.
 ```
@@ -78,7 +78,7 @@ The ```commands``` parameter is object with keys the names of the commands and v
 commands.
 
 ```
-api.executeCommands({displayName: ['nickname'], muteAudio: []});
+api.executeCommands({displayName: ['nickname'], toggleAudio: []});
 ```
 
 You can add event listeners to the embedded Jitsi Meet using ```addEventListener``` method.

doc/manual-install.md

@@ -150,7 +150,7 @@ ant dist.{os-name}
 Run jicofo:
 ```sh
 cd dist/{os-name}'
-./jicofo.sh --domain=jitsi.exmaple.com --secret=YOURSECRET2 --user_domain=auth.jitsi.example.com --user_name=focus --user_password=YOURSECRET3
+./jicofo.sh --domain=jitsi.example.com --secret=YOURSECRET2 --user_domain=auth.jitsi.example.com --user_name=focus --user_password=YOURSECRET3
 ```
 
 ## Deploy Jitsi Meet
@@ -220,4 +220,4 @@ enableRecording: true
 
 Restart jitsi-videobridge and start a new conference (making sure that the page
 is reloaded with the new config.js) -- the organizer of the conference should
-now have a "recoriding" button in the floating menu, near the "mute" button.
+now have a "recording" button in the floating menu, near the "mute" button.

doc/quick-install.md

@@ -1,6 +1,6 @@
 # Jitsi Meet quick install
 
-This documents decribes the needed steps for quick Jitsi Meet installation on a Debian based GNU/Linux system.
+This document describes the required steps for a quick Jitsi Meet installation on a Debian based GNU/Linux system.
 
 N.B.: All commands are supposed to be run by root. If you are logged in as a regular user with sudo rights, please prepend ___sudo___ to each of the commands.
 
@@ -24,13 +24,13 @@ apt-get update
 apt-get -y install jitsi-meet
 ```
 
-During the installation you'll be asked to enter the hostname of the Jitsi Meet instance. If you have a FQDN hostname for the instance already set ip in DNS, enter it there. If you don't have a resolvable hostname, you can enter the IP address of the machine (if it is static or doesn't change).
+During the installation, you will be asked to enter the hostname of the Jitsi Meet instance. If you have a FQDN hostname for the instance already set up in DNS, enter it there. If you don't have a resolvable hostname, you can enter the IP address of the machine (if it is static or doesn't change).
 
-This hostname (or IP address) will be used for virtualhost configuration inside the Jitsi Meet and also you and your correspondents will be using it to access the web conferences.
+This hostname (or IP address) will be used for virtualhost configuration inside the Jitsi Meet and also, you and your correspondents will be using it to access the web conferences.
 
 ### Open a conference
 
-Launch a web broswer (Chrome, Chromium or latest Opera) and enter in the URL bar the hostname (or IP address) you used in the previous step.
+Launch a web browser (Chrome, Chromium or latest Opera) and enter in the URL bar the hostname (or IP address) you used in the previous step.
 
 Confirm that you trust the self-signed certificate of the newly installed Jitsi Meet.
 
@@ -50,7 +50,7 @@ wget https://download.jitsi.org/jigasi_1.0-1_amd64.deb
 dpkg -i jigasi_1.0-1_amd64.deb
 ```
 
-During the installation you'll be asked to enter your SIP account and password. This account will be used to invite the other SIP participants.
+During the installation, you will be asked to enter your SIP account and password. This account will be used to invite the other SIP participants.
 
 ### Reload Jitsi Meet
 
@@ -58,19 +58,17 @@ Launch again a browser with the Jitsi Meet URL and you'll see a telephone icon o
 
 Enjoy!
 
-## Deinstall
+## Uninstall
 
 ```sh
 apt-get purge jigasi jitsi-meet jicofo jitsi-videobridge
 ```
 
-Somethimes the following packages will fail to uninstall properly:
+Sometimes the following packages will fail to uninstall properly:
 
 - jigasi
 - jitsi-videobridge
 
-When this happens, just run the deinstall command a second time and it should be ok.
+When this happens, just run the uninstall command a second time and it should be ok.
 
-The reason for failure is that not allways the daemons are stopped right away, there is a timeout before the actual stop. And if the unistall script goes on before the services' stop, there is an error.
-
-The second run of the deinstall command fixes this, as by then the jigasi or jvb daemons are already stopped.
+The reason for failure is that sometimes, the uninstall script is faster than the process that stops the daemons. The second run of the uninstall command fixes this, as by then the jigasi or jvb daemons are already stopped.

external_api.js

@@ -25,15 +25,16 @@ var JitsiMeetExternalAPI = (function()
      * @param parent_node the node that will contain the iframe
      * @constructor
      */
-    function JitsiMeetExternalAPI(domain, room_name, width, height, parent_node)
-    {
+    function JitsiMeetExternalAPI(domain, room_name, width, height, parentNode) {
+        if(!width || width < MIN_WIDTH)
+            width = MIN_WIDTH;
+        if(!height || height < MIN_HEIGHT)
+            height = MIN_HEIGHT;
+
         this.parentNode = null;
-        if(parent_node)
-        {
-            this.parentNode = parent_node;
-        }
-        else
-        {
+        if (parentNode) {
+            this.parentNode = parentNode;
+        } else {
             var scriptTag = document.scripts[document.scripts.length - 1];
             this.parentNode = scriptTag.parentNode;
         }
@@ -41,17 +42,13 @@ var JitsiMeetExternalAPI = (function()
         this.iframeHolder =
             this.parentNode.appendChild(document.createElement("div"));
         this.iframeHolder.id = "jitsiConference" + JitsiMeetExternalAPI.id;
-        if(width < MIN_WIDTH)
-            width = MIN_WIDTH;
-        if(height < MIN_HEIGHT)
-            height = MIN_HEIGHT;
         this.iframeHolder.style.width = width + "px";
         this.iframeHolder.style.height = height + "px";
         this.frameName = "jitsiConferenceFrame" + JitsiMeetExternalAPI.id;
         this.url = "//" + domain + "/";
         if(room_name)
             this.url += room_name;
-        this.url += "#external";
+        this.url += "#external=true";
         JitsiMeetExternalAPI.id++;
 
         this.frame = document.createElement("iframe");
@@ -80,15 +77,12 @@ var JitsiMeetExternalAPI = (function()
      * Sends the passed object to Jitsi Meet
      * @param object the object to be sent
      */
-    JitsiMeetExternalAPI.prototype.sendMessage = function(object)
-    {
-        if(this.frameLoaded)
-        {
+    JitsiMeetExternalAPI.prototype.sendMessage = function(object) {
+        if (this.frameLoaded) {
             this.frame.contentWindow.postMessage(
                 JSON.stringify(object), this.frame.src);
         }
-        else
-        {
+        else {
             this.initialCommands.push(object);
         }
 
@@ -98,8 +92,8 @@ var JitsiMeetExternalAPI = (function()
      * Executes command. The available commands are:
      * displayName - sets the display name of the local participant to the value
      * passed in the arguments array.
-     * muteAudio - mutes / unmutes audio with no arguments
-     * muteVideo - mutes / unmutes video with no arguments
+     * toggleAudio - mutes / unmutes audio with no arguments
+     * toggleVideo - mutes / unmutes video with no arguments
      * filmStrip - hides / shows the film strip with no arguments
      * If the command doesn't require any arguments the parameter should be set
      * to empty array or it may be omitted.
@@ -107,10 +101,9 @@ var JitsiMeetExternalAPI = (function()
      * @param arguments array of arguments
      */
     JitsiMeetExternalAPI.prototype.executeCommand = function(name,
-                                                             argumentsList)
-    {
+                                                             argumentsList) {
         var argumentsArray = argumentsList;
-        if(!argumentsArray)
+        if (!argumentsArray)
             argumentsArray = [];
         var object = {type: "command", action: "execute"};
         object[name] = argumentsArray;
@@ -121,8 +114,8 @@ var JitsiMeetExternalAPI = (function()
      * Executes commands. The available commands are:
      * displayName - sets the display name of the local participant to the value
      * passed in the arguments array.
-     * muteAudio - mutes / unmutes audio with no arguments
-     * muteVideo - mutes / unmutes video with no arguments
+     * toggleAudio - mutes / unmutes audio with no arguments
+     * toggleVideo - mutes / unmutes video with no arguments
      * filmStrip - hides / shows the film strip with no arguments
      * @param object the object with commands to be executed. The keys of the
      * object are the commands that will be executed and the values are the
@@ -135,8 +128,8 @@ var JitsiMeetExternalAPI = (function()
     };
 
     /**
-     * Adds event listeners to Meet Jitsi. The object key should be the name of the
-     * event and value - the listener.
+     * Adds event listeners to Meet Jitsi. The object key should be the name of
+     * the event and value - the listener.
      * Currently we support the following
      * events:
      * incomingMessage - receives event notifications about incoming
@@ -170,8 +163,7 @@ var JitsiMeetExternalAPI = (function()
      * @param object
      */
     JitsiMeetExternalAPI.prototype.addEventListeners
-        = function (object)
-    {
+        = function (object) {
 
         var message = {type: "event", action: "add", events: []};
         for(var i in object)
@@ -217,8 +209,7 @@ var JitsiMeetExternalAPI = (function()
      * @param listener the listener
      */
     JitsiMeetExternalAPI.prototype.addEventListener
-        = function (event, listener)
-    {
+        = function (event, listener) {
 
         var message = {type: "event", action: "add", events: [event]};
         this.eventHandlers[event] = listener;
@@ -230,8 +221,7 @@ var JitsiMeetExternalAPI = (function()
      * @param event the name of the event.
      */
     JitsiMeetExternalAPI.prototype.removeEventListener
-        = function (event)
-    {
+        = function (event) {
         if(!this.eventHandlers[event])
         {
             console.error("The event " + event + " is not registered.");
@@ -247,8 +237,7 @@ var JitsiMeetExternalAPI = (function()
      * @param events array with the names of the events.
      */
     JitsiMeetExternalAPI.prototype.removeEventListeners
-        = function (events)
-    {
+        = function (events) {
         var eventsArray = [];
         for(var i = 0; i < events.length; i++)
         {
@@ -274,8 +263,7 @@ var JitsiMeetExternalAPI = (function()
      * Processes message events sent from Jitsi Meet
      * @param event the event
      */
-    JitsiMeetExternalAPI.prototype.processMessage = function(event)
-    {
+    JitsiMeetExternalAPI.prototype.processMessage = function(event) {
         var message;
         try {
             message = JSON.parse(event.data);
@@ -285,18 +273,15 @@ var JitsiMeetExternalAPI = (function()
             console.error("Message without type is received.");
             return;
         }
-        switch (message.type)
-        {
+        switch (message.type) {
             case "system":
-                if(message.loaded)
-                {
+                if(message.loaded) {
                     this.onFrameLoaded();
                 }
                 break;
             case "event":
                 if(message.action != "result" ||
-                    !message.event || !this.eventHandlers[message.event])
-                {
+                    !message.event || !this.eventHandlers[message.event]) {
                     console.warn("The received event cannot be parsed.");
                     return;
                 }
@@ -306,8 +291,6 @@ var JitsiMeetExternalAPI = (function()
                 console.error("Unknown message type.");
                 return;
         }
-
-
     };
 
     /**
@@ -316,8 +299,7 @@ var JitsiMeetExternalAPI = (function()
      */
     JitsiMeetExternalAPI.prototype.onFrameLoaded = function () {
         this.frameLoaded = true;
-        for (var i = 0; i < this.initialCommands.length; i++)
-        {
+        for (var i = 0; i < this.initialCommands.length; i++) {
             this.sendMessage(this.initialCommands[i]);
         }
         this.initialCommands = null;
@@ -331,13 +313,11 @@ var JitsiMeetExternalAPI = (function()
         this.eventListener = function (event) {
             self.processMessage(event);
         };
-        if (window.addEventListener)
-        {
+        if (window.addEventListener) {
             window.addEventListener('message',
                 this.eventListener, false);
         }
-        else
-        {
+        else {
             window.attachEvent('onmessage', this.eventListener);
         }
     };
@@ -346,13 +326,11 @@ var JitsiMeetExternalAPI = (function()
      * Removes the listeners and removes the Jitsi Meet frame.
      */
     JitsiMeetExternalAPI.prototype.dispose = function () {
-        if (window.removeEventListener)
-        {
+        if (window.removeEventListener) {
             window.removeEventListener('message',
                 this.eventListener, false);
         }
-        else
-        {
+        else {
             window.detachEvent('onmessage',
                 this.eventListener);
         }

index.html

@@ -13,8 +13,8 @@
     <script src="libs/jquery-2.1.1.min.js"></script>
     <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jsSHA/1.5.0/sha.js"></script>
-    <script src="config.js?v=10"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
-    <script src="libs/strophe/strophe.min.js?v=1"></script>
+    <script src="config.js?v=12"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
+    <script src="libs/strophe/strophe.min.js?v=2"></script>
     <script src="libs/strophe/strophe.disco.min.js?v=1"></script>
     <script src="libs/strophe/strophe.caps.jsonly.min.js?v=1"></script>
     <script src="libs/jquery-ui.js"></script>
@@ -22,12 +22,12 @@
     <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=91"></script>
+    <script src="libs/app.bundle.js?v=120"></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">
     <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=30"/>
-    <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=17" id="videolayout_default"/>
+    <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=19" id="videolayout_default"/>
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" href="css/jquery-impromptu.css?v=4">
     <link rel="stylesheet" href="css/modaldialog.css?v=3">
@@ -189,8 +189,8 @@
                             <i class="icon-share-doc"></i>
                         </a>
                     </span>
-                    <div class="header_button_separator"></div>
                     <span id="desktopsharing" style="display: none">
+                        <div class="header_button_separator"></div>
                         <a class="button" id="toolbar_button_desktopsharing" data-container="body" data-toggle="popover" data-placement="bottom" content="Share screen" data-i18n="[content]toolbar.sharescreen">
                             <i class="icon-share-desktop"></i>
                         </a>
@@ -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>

lang/Translation.md

@@ -30,11 +30,11 @@ You can add translatable text in the HTML:
  ```
 
 
- You can also use APP.translation.generateTranslatonHTML(key, options) to get this HTML code as Javascript string.
+ You can also use APP.translation.generateTranslationHTML(key, options) to get this HTML code as Javascript string.
 
 
  ```
- APP.translation.generateTranslatonHTML("dialog.OK") // returns <span data-i18n="dialog.OK">OK</span>
+ APP.translation.generateTranslationHTML("dialog.OK") // returns <span data-i18n="dialog.OK">OK</span>
  ```
  
  The value in the options parameter will be added in data-i18n-options attribute of the element.

lang/languages-de.json

@@ -3,5 +3,6 @@
     "bg": "Bulgarisch",
     "de": "Deutsch",
     "tr": "Türkisch",
-    "it": "Italienisch"
+    "it": "Italienisch",
+    "fr": "Französisch"
 }

lang/main-de.json

@@ -62,7 +62,8 @@
         "Settings": "Einstellungen",
         "hangup": "Auflegen",
         "login": "Anmelden",
-        "logout": "Abmelden"
+        "logout": "Abmelden",
+        "dialpad": "Tastenblock anzeigen"
     },
     "bottomtoolbar": {
         "chat": "Chat öffnen / schliessen",
@@ -79,7 +80,9 @@
     "settings": {
         "title": "Einstellungen",
         "update": "Aktualisieren",
-        "name": "Name"
+        "name": "Name",
+        "startAudioMuted": "Stumm beitreten",
+        "startVideoMuted": "Ohne Video beitreten"
     },
     "videothumbnail": {
         "editnickname": "Klicken um den Anzeigenamen zu bearbeiten",
@@ -118,7 +121,9 @@
         "focus": "Konferenz-Organisator",
         "focusFail": "__component__ ist im Moment nicht verfügbar - wiederholen in __ms__ Sekunden",
         "grantedTo": "Moderatorenrechte an __to__ vergeben.",
-        "grantedToUnknown": "Moderatorenrechte an $t(somebody) vergeben."
+        "grantedToUnknown": "Moderatorenrechte an $t(somebody) vergeben.",
+        "muted": "Der Konferenz wurde stumm beigetreten.",
+        "mutedTitle": "Stummschaltung aktiv."
     },
     "dialog": {
         "kickMessage": "Oh! Sie wurden aus der Konferenz ausgeschlossen.",
@@ -127,7 +132,8 @@
         "passwordError2": "Diese Konferenzt ist nicht mit einem Passwort geschützt. Nur der Besitzer der Konferenz kann ein Passwort vergeben.",
         "joinError": "Oh! Der Konferenz konnte nicht beigetreten werden. Diese könnte ein Problem mit den Sicherheitseinstellungen sein. Bitte kontaktieren Sie den Administrator des Dienstes.",
         "connectError": "Oh! Es hat etwas nicht geklappt und der Konferenz konnte nicht beigetreten werden.",
-        "connecting": "",
+        "connectErrorWithMsg": "Oh! Es hat etwas nicht geklappt und der Konferenz konnte nicht beigetreten werden: __msg__",
+        "connecting": "Verbindung wird hergestellt",
         "error": "Fehler",
         "detectext": "Fehler bei der Erkennung der Bildschirmfreigabeerweiterung.",
         "failtoinstall": "Die Bildschirmfreigabeerweiterung konnte nicht installiert werden.",
@@ -151,9 +157,9 @@
         "sharePreziTitle": "Ein Prezi teilen",
         "sharePreziMsg": "Ein anderer Teilnehmer teilt bereits ein Prezi. Diese Konferenz kann nur eine Prezi auf einmal anzeigen.",
         "Remove": "Entfernen",
-        "Stop": "Stopp",
-        "AuthMsg": "Für die Erstellung des Raums ist eine Authentifizierung erforderlich. <br/><b>__room__</b><br/>Sie können sich entweder anmelden oder warten bis jemand anderes die Authentifizierung vornimmt.",
-        "Authenticate": "Anmelden",
+        "WaitingForHost": "Warten auf den Organisator...",
+        "WaitForHostMsg": "Die Konferenz <b>__room__</b> hat noch nicht begonnen. Wenn Sie der Organisator sind, melden Sie sich bitte an. Anderenfalls warten Sie bitte bis der Organisator beigetreten ist.",
+        "IamHost": "Ich bin der Organisator",
         "Cancel": "Abbrechen",
         "retry": "Wiederholen",
         "logoutTitle": "Abmelden",
@@ -183,7 +189,8 @@
         "reservationErrorMsg": "Fehler, Nummer: __code__, Nachricht: __msg__",
         "password": "Passwort",
         "userPassword": "Benutzerpasswort",
-        "token": "Token"
+        "token": "Token",
+        "displayNameRequired": "Geben Sie Ihren Anzeigenamen ein:"
     },
     "email": {
         "sharedKey": [

lang/main.json

@@ -194,7 +194,8 @@
         "reservationErrorMsg": "Error code: __code__, message: __msg__",
         "password": "password",
         "userPassword": "user password",
-        "token": "token"
+        "token": "token",
+        "displayNameRequired": "Please enter your display name:"
     },
     "email":
     {
@@ -228,6 +229,7 @@
     {
         "ERROR": "Error",
         "CONNECTING": "Connecting",
+        "RECONNECTING": "A network problem occurred. Reconnecting...",
         "CONNFAIL": "Connection failed",
         "AUTHENTICATING": "Authenticating",
         "AUTHFAIL": "Authentication failed",
@@ -238,5 +240,11 @@
         "FETCH_SESSION_ID": "Obtaining session-id...",
         "GOT_SESSION_ID": "Obtaining session-id... Done",
         "GET_SESSION_ID_ERROR": "Get session-id error: "
+    },
+    "recording":
+    {
+        "toaster": "Currently recording!",
+        "pending": "Your recording will start as soon as another participant joins",
+        "on": "Recording has been started"
     }
 }

modules/API/API.js

@@ -1,3 +1,4 @@
+/* global APP */
 /**
  * Implements API class that communicates with external api class
  * and provides interface to access Jitsi Meet features by external
@@ -10,20 +11,25 @@ var XMPPEvents = require("../../service/xmpp/XMPPEvents");
  * List of the available commands.
  * @type {{
  *              displayName: inputDisplayNameHandler,
- *              muteAudio: toggleAudio,
- *              muteVideo: toggleVideo,
- *              filmStrip: toggleFilmStrip
+ *              toggleAudio: toggleAudio,
+ *              toggleVideo: toggleVideo,
+ *              toggleFilmStrip: toggleFilmStrip,
+ *              toggleChat: toggleChat,
+ *              toggleContactList: toggleContactList
  *          }}
  */
-var commands =
-{
-    displayName: APP.UI.inputDisplayNameHandler,
-    muteAudio: APP.UI.toggleAudio,
-    muteVideo: APP.UI.toggleVideo,
-    toggleFilmStrip: APP.UI.toggleFilmStrip,
-    toggleChat: APP.UI.toggleChat,
-    toggleContactList: APP.UI.toggleContactList
-};
+var commands = {};
+
+function initCommands() {
+    commands = {
+        displayName: APP.UI.inputDisplayNameHandler,
+        toggleAudio: APP.UI.toggleAudio,
+        toggleVideo: APP.UI.toggleVideo,
+        toggleFilmStrip: APP.UI.toggleFilmStrip,
+        toggleChat: APP.UI.toggleChat,
+        toggleContactList: APP.UI.toggleContactList
+    };
+}
 
 
 /**
@@ -37,8 +43,7 @@ var commands =
  *              participantLeft: boolean
  *      }}
  */
-var events =
-{
+var events = {
     incomingMessage: false,
     outgoingMessage:false,
     displayNameChange: false,
@@ -49,18 +54,15 @@ var events =
 var displayName = {};
 
 /**
- * Processes commands from external applicaiton.
+ * Processes commands from external application.
  * @param message the object with the command
  */
-function processCommand(message)
-{
-    if(message.action != "execute")
-    {
+function processCommand(message) {
+    if (message.action != "execute") {
         console.error("Unknown action of the message");
         return;
     }
-    for(var key in message)
-    {
+    for (var key in message) {
         if(commands[key])
             commands[key].apply(null, message[key]);
     }
@@ -71,31 +73,26 @@ function processCommand(message)
  * @param event the event
  */
 function processEvent(event) {
-    if(!event.action)
-    {
+    if (!event.action) {
         console.error("Event with no action is received.");
         return;
     }
 
     var i = 0;
-    switch(event.action)
-    {
+    switch(event.action) {
         case "add":
-            for(; i < event.events.length; i++)
-            {
+            for (; i < event.events.length; i++) {
                 events[event.events[i]] = true;
             }
             break;
         case "remove":
-            for(; i < event.events.length; i++)
-            {
+            for (; i < event.events.length; i++) {
                 events[event.events[i]] = false;
             }
             break;
         default:
             console.error("Unknown action for event.");
     }
-
 }
 
 /**
@@ -110,8 +107,7 @@ function sendMessage(object) {
  * Processes a message event from the external application
  * @param event the message event
  */
-function processMessage(event)
-{
+function processMessage(event) {
     var message;
     try {
         message = JSON.parse(event.data);
@@ -119,8 +115,7 @@ function processMessage(event)
 
     if(!message.type)
         return;
-    switch (message.type)
-    {
+    switch (message.type) {
         case "command":
             processCommand(message);
             break;
@@ -131,7 +126,6 @@ function processMessage(event)
             console.error("Unknown type of the message");
             return;
     }
-
 }
 
 function setupListeners() {
@@ -147,7 +141,7 @@ function setupListeners() {
         API.triggerEvent("participantLeft", {jid: jid});
     });
     APP.xmpp.addListener(XMPPEvents.DISPLAY_NAME_CHANGED, function (jid, newDisplayName) {
-        name = displayName[jid];
+        var name = displayName[jid];
         if(!name || name != newDisplayName) {
             API.triggerEvent("displayNameChange", {jid: jid, displayname: newDisplayName});
             displayName[jid] = newDisplayName;
@@ -165,7 +159,7 @@ var API = {
      */
     isEnabled: function () {
         var hash = location.hash;
-        if(hash && hash.indexOf("external") > -1 && window.postMessage)
+        if (hash && hash.indexOf("external") > -1 && window.postMessage)
             return true;
         return false;
     },
@@ -176,13 +170,12 @@ var API = {
      * is initialized.
      */
     init: function () {
-        if (window.addEventListener)
-        {
+        initCommands();
+        if (window.addEventListener) {
             window.addEventListener('message',
                 processMessage, false);
         }
-        else
-        {
+        else {
             window.attachEvent('onmessage', processMessage);
         }
         sendMessage({type: "system", loaded: true});
@@ -213,19 +206,14 @@ var API = {
      * Removes the listeners.
      */
     dispose: function () {
-        if(window.removeEventListener)
-        {
+        if(window.removeEventListener) {
             window.removeEventListener("message",
                 processMessage, false);
         }
-        else
-        {
+        else {
             window.detachEvent('onmessage', processMessage);
         }
-
     }
-
-
 };
 
 module.exports = API;

modules/RTC/DataChannels.js

@@ -1,4 +1,4 @@
-/* global Strophe, focusedVideoSrc*/
+/* global config, APP, Strophe */
 
 // cache datachannels to avoid garbage collection
 // https://code.google.com/p/chromium/issues/detail?id=405545
@@ -8,19 +8,13 @@ var _dataChannels = [];
 var eventEmitter = null;
 
 
-
-
-var DataChannels =
-{
-
+var DataChannels = {
     /**
      * Callback triggered by PeerConnection when new data channel is opened
      * on the bridge.
      * @param event the event info object.
      */
-
-    onDataChannel: function (event)
-    {
+    onDataChannel: function (event) {
         var dataChannel = event.channel;
 
         dataChannel.onopen = function () {
@@ -32,14 +26,7 @@ var DataChannels =
             // Sends 12 bytes binary message to the bridge
             //dataChannel.send(new ArrayBuffer(12));
 
-            // when the data channel becomes available, tell the bridge about video
-            // selections so that it can do adaptive simulcast,
-            // we want the notification to trigger even if userJid is undefined,
-            // or null.
-            var userJid = APP.UI.getLargeVideoJid();
-            // we want the notification to trigger even if userJid is undefined,
-            // or null.
-            onSelectedEndpointChanged(userJid);
+            eventEmitter.emit(RTCEvents.DATA_CHANNEL_OPEN);
         };
 
         dataChannel.onerror = function (error) {
@@ -72,8 +59,7 @@ var DataChannels =
                         dominantSpeakerEndpoint);
                     eventEmitter.emit(RTCEvents.DOMINANTSPEAKER_CHANGED, dominantSpeakerEndpoint);
                 }
-                else if ("InLastNChangeEvent" === colibriClass)
-                {
+                else if ("InLastNChangeEvent" === colibriClass) {
                     var oldValue = obj.oldValue;
                     var newValue = obj.newValue;
                     // Make sure that oldValue and newValue are of type boolean.
@@ -96,15 +82,13 @@ var DataChannels =
 
                     eventEmitter.emit(RTCEvents.LASTN_CHANGED, oldValue, newValue);
                 }
-                else if ("LastNEndpointsChangeEvent" === colibriClass)
-                {
+                else if ("LastNEndpointsChangeEvent" === colibriClass) {
                     // The new/latest list of last-n endpoint IDs.
                     var lastNEndpoints = obj.lastNEndpoints;
                     // The list of endpoint IDs which are entering the list of
                     // last-n at this time i.e. were not in the old list of last-n
                     // endpoint IDs.
                     var endpointsEnteringLastN = obj.endpointsEnteringLastN;
-                    var stream = obj.stream;
 
                     console.log(
                         "Data channel new last-n event: ",
@@ -112,15 +96,13 @@ var DataChannels =
                     eventEmitter.emit(RTCEvents.LASTN_ENDPOINT_CHANGED,
                         lastNEndpoints, endpointsEnteringLastN, obj);
                 }
-                else
-                {
+                else {
                     console.debug("Data channel JSON-formatted message: ", obj);
                 }
             }
         };
 
-        dataChannel.onclose = function ()
-        {
+        dataChannel.onclose = function () {
             console.info("The Data Channel closed", dataChannel);
             var idx = _dataChannels.indexOf(dataChannel);
             if (idx > -1)
@@ -165,19 +147,15 @@ var DataChannels =
     },
     handleSelectedEndpointEvent: onSelectedEndpointChanged,
     handlePinnedEndpointEvent: onPinnedEndpointChanged
-
 };
 
-function onSelectedEndpointChanged(userResource)
-{
+function onSelectedEndpointChanged(userResource) {
     console.log('selected endpoint changed: ', userResource);
-    if (_dataChannels && _dataChannels.length != 0)
-    {
+    if (_dataChannels && _dataChannels.length != 0) {
         _dataChannels.some(function (dataChannel) {
-            if (dataChannel.readyState == 'open')
-            {
-                console.log('sending selected endpoint changed ' 
-                    + 'notification to the bridge: ', userResource);
+            if (dataChannel.readyState == 'open') {
+                console.log('sending selected endpoint changed ' +
+                    'notification to the bridge: ', userResource);
                 dataChannel.send(JSON.stringify({
                     'colibriClass': 'SelectedEndpointChangedEvent',
                     'selectedEndpoint':
@@ -191,14 +169,11 @@ function onSelectedEndpointChanged(userResource)
     }
 }
 
-function onPinnedEndpointChanged(userResource)
-{
+function onPinnedEndpointChanged(userResource) {
     console.log('pinned endpoint changed: ', userResource);
-    if (_dataChannels && _dataChannels.length != 0)
-    {
+    if (_dataChannels && _dataChannels.length != 0) {
         _dataChannels.some(function (dataChannel) {
-            if (dataChannel.readyState == 'open')
-            {
+            if (dataChannel.readyState == 'open') {
                 dataChannel.send(JSON.stringify({
                     'colibriClass': 'PinnedEndpointChangedEvent',
                     'pinnedEndpoint':

modules/RTC/LocalStream.js

@@ -1,9 +1,8 @@
+/* global APP */
 var StreamEventTypes = require("../../service/RTC/StreamEventTypes.js");
 var RTCEvents = require("../../service/RTC/RTCEvents");
 
-
-function LocalStream(stream, type, eventEmitter, videoType, isGUMStream)
-{
+function LocalStream(stream, type, eventEmitter, videoType, isGUMStream) {
     this.stream = stream;
     this.eventEmitter = eventEmitter;
     this.type = type;
@@ -12,84 +11,66 @@ function LocalStream(stream, type, eventEmitter, videoType, isGUMStream)
     if(isGUMStream === false)
         this.isGUMStream = isGUMStream;
     var self = this;
-    if(type == "audio")
-    {
+    if(type == "audio") {
         this.getTracks = function () {
             return self.stream.getAudioTracks();
         };
-    }
-    else
-    {
+    } else {
         this.getTracks = function () {
             return self.stream.getVideoTracks();
         };
     }
 
-    this.stream.onended = function()
-    {
+    this.stream.onended = function() {
         self.streamEnded();
     };
 }
 
 LocalStream.prototype.streamEnded = function () {
     this.eventEmitter.emit(StreamEventTypes.EVENT_TYPE_LOCAL_ENDED, this);
-}
+};
 
 LocalStream.prototype.getOriginalStream = function()
 {
     return this.stream;
-}
+};
 
 LocalStream.prototype.isAudioStream = function () {
     return this.type === "audio";
 };
 
-LocalStream.prototype.setMute = function(mute)
+LocalStream.prototype.setMute = function (mute)
 {
+    var isAudio = this.isAudioStream();
+    var eventType = isAudio ? RTCEvents.AUDIO_MUTE : RTCEvents.VIDEO_MUTE;
 
-    if((window.location.protocol != "https:" && this.isGUMStream) ||
-        (this.isAudioStream() && this.isGUMStream) || this.videoType === "screen")
-    {
+    if ((window.location.protocol != "https:" && this.isGUMStream) ||
+        (isAudio && this.isGUMStream) || this.videoType === "screen") {
         var tracks = this.getTracks();
 
         for (var idx = 0; idx < tracks.length; idx++) {
-            tracks[idx].enabled = mute;
+            tracks[idx].enabled = !mute;
         }
-        this.eventEmitter.emit(
-            (this.type == "audio"? RTCEvents.AUDIO_MUTE : RTCEvents.VIDEO_MUTE),
-            !mute);
-    }
-    else
-    {
-        if(mute === false) {
+        this.eventEmitter.emit(eventType, mute);
+    } else {
+        if (mute) {
             APP.xmpp.removeStream(this.stream);
             this.stream.stop();
-            this.eventEmitter.emit(
-                (this.type == "audio"? RTCEvents.AUDIO_MUTE : RTCEvents.VIDEO_MUTE),
-                true);
-        }
-        else
-        {
+            this.eventEmitter.emit(eventType, true);
+        } else {
             var self = this;
             APP.RTC.rtcUtils.obtainAudioAndVideoPermissions(
                 (this.isAudioStream() ? ["audio"] : ["video"]),
                 function (stream) {
-                    if(self.isAudioStream())
-                    {
+                    if (isAudio) {
                         APP.RTC.changeLocalAudio(stream,
                             function () {
-                                self.eventEmitter.emit(
-                                    (self.type == "audio"? RTCEvents.AUDIO_MUTE : RTCEvents.VIDEO_MUTE),
-                                    true);
+                                self.eventEmitter.emit(eventType, false);
                             });
-                    }
-                    else
-                    {
+                    } else {
                         APP.RTC.changeLocalVideo(stream, false,
                             function () {
-                                self.eventEmitter.emit(
-                                    (self.type == "audio"? RTCEvents.AUDIO_MUTE : RTCEvents.VIDEO_MUTE),
-                                    true);
+                                self.eventEmitter.emit(eventType, false);
                             });
                     }
                 });
@@ -99,13 +80,10 @@ LocalStream.prototype.setMute = function(mute)
 
 LocalStream.prototype.isMuted = function () {
     var tracks = [];
-    if(this.type == "audio")
-    {
+    if (this.isAudioStream()) {
         tracks = this.stream.getAudioTracks();
-    }
-    else
-    {
-        if(this.stream.ended)
+    } else {
+        if (this.stream.ended)
             return true;
         tracks = this.stream.getVideoTracks();
     }
@@ -114,10 +92,10 @@ LocalStream.prototype.isMuted = function () {
             return false;
     }
     return true;
-}
+};
 
 LocalStream.prototype.getId = function () {
     return this.stream.getTracks()[0].id;
-}
+};
 
 module.exports = LocalStream;

modules/RTC/MediaStream.js

@@ -1,6 +1,4 @@
-////These lines should be uncommented when require works in app.js
 var MediaStreamType = require("../../service/RTC/MediaStreamTypes");
-var StreamEventType = require("../../service/RTC/StreamEventTypes");
 
 /**
  * Creates a MediaStream object for the given data, session id and ssrc.
@@ -28,33 +26,22 @@ function MediaStream(data, sid, ssrc, browser, eventEmitter) {
     this.sid = sid;
     this.stream = data.stream;
     this.peerjid = data.peerjid;
+    this.videoType = data.videoType;
     this.ssrc = ssrc;
     this.type = (this.stream.getVideoTracks().length > 0)?
         MediaStreamType.VIDEO_TYPE : MediaStreamType.AUDIO_TYPE;
-    this.videoType = null;
     this.muted = false;
     this.eventEmitter = eventEmitter;
 }
 
 
-MediaStream.prototype.getOriginalStream = function()
-{
+MediaStream.prototype.getOriginalStream = function() {
     return this.stream;
 };
 
-MediaStream.prototype.setMute = function (value)
-{
+MediaStream.prototype.setMute = function (value) {
     this.stream.muted = value;
     this.muted = value;
 };
 
-MediaStream.prototype.setVideoType = function (value) {
-    if(this.videoType === value)
-        return;
-    this.videoType = value;
-    this.eventEmitter.emit(StreamEventType.EVENT_TYPE_REMOTE_CHANGED,
-        this.peerjid);
-};
-
-
 module.exports = MediaStream;

modules/RTC/RTC.js

@@ -1,4 +1,6 @@
+/* global APP */
 var EventEmitter = require("events");
+var RTCBrowserType = require("./RTCBrowserType");
 var RTCUtils = require("./RTCUtils.js");
 var LocalStream = require("./LocalStream.js");
 var DataChannels = require("./DataChannels");
@@ -71,14 +73,11 @@ var RTC = {
             this.localStreams[0].getOriginalStream() != stream)
             this.localStreams.push(localStream);
         if(isMuted === true)
-            localStream.setMute(false);
+            localStream.setMute(true);
 
-        if(type == "audio")
-        {
+        if(type == "audio") {
             this.localAudio = localStream;
-        }
-        else
-        {
+        } else {
             this.localVideo = localStream;
         }
         var eventType = StreamEventTypes.EVENT_TYPE_LOCAL_CREATED;
@@ -89,8 +88,7 @@ var RTC = {
         return localStream;
     },
     removeLocalStream: function (stream) {
-        for(var i = 0; i < this.localStreams.length; i++)
-        {
+        for(var i = 0; i < this.localStreams.length; i++) {
             if(this.localStreams[i].getOriginalStream() === stream) {
                 delete this.localStreams[i];
                 return;
@@ -99,7 +97,7 @@ var RTC = {
     },
     createRemoteStream: function (data, sid, thessrc) {
         var remoteStream = new MediaStream(data, sid, thessrc,
-            this.getBrowserType(), eventEmitter);
+            RTCBrowserType.getBrowserType(), eventEmitter);
         var jid = data.peerjid || APP.xmpp.myJid();
         if(!this.remoteStreams[jid]) {
             this.remoteStreams[jid] = {};
@@ -108,9 +106,6 @@ var RTC = {
         eventEmitter.emit(StreamEventTypes.EVENT_TYPE_REMOTE_CREATED, remoteStream);
         return remoteStream;
     },
-    getBrowserType: function () {
-        return this.rtcUtils.browser;
-    },
     getPCConstraints: function () {
         return this.rtcUtils.pc_constraints;
     },
@@ -121,8 +116,8 @@ var RTC = {
         return this.rtcUtils.getUserMediaWithConstraints(um, success_callback,
             failure_callback, resolution, bandwidth, fps, desktopStream);
     },
-    attachMediaStream:  function (element, stream) {
-        this.rtcUtils.attachMediaStream(element, stream);
+    attachMediaStream:  function (elSelector, stream) {
+        this.rtcUtils.attachMediaStream(elSelector, stream);
     },
     getStreamID:  function (stream) {
         return this.rtcUtils.getStreamID(stream);
@@ -133,6 +128,9 @@ var RTC = {
     setVideoSrc: function (element, src) {
         this.rtcUtils.setVideoSrc(element, src);
     },
+    getVideoElementName: function () {
+        return RTCBrowserType.isTemasysPluginUsed() ? 'object' : 'video';
+    },
     dispose: function() {
         if (this.rtcUtils) {
             this.rtcUtils = null;
@@ -147,20 +145,6 @@ var RTC = {
             function (stream, isUsingScreenStream, callback) {
                 self.changeLocalVideo(stream, isUsingScreenStream, callback);
             }, DesktopSharingEventTypes.NEW_STREAM_CREATED);
-        APP.xmpp.addListener(XMPPEvents.STREAMS_CHANGED, function (jid, changedStreams) {
-            for(var i = 0; i < changedStreams.length; i++) {
-                var type = changedStreams[i].type;
-                if (type != "audio") {
-                    var peerStreams = self.remoteStreams[jid];
-                    if(!peerStreams)
-                        continue;
-                    var videoStream = peerStreams[MediaStreamType.VIDEO_TYPE];
-                    if(!videoStream)
-                        continue;
-                    videoStream.setVideoType(changedStreams[i].type);
-                }
-            }
-        });
         APP.xmpp.addListener(XMPPEvents.CALL_INCOMING, function(event) {
             DataChannels.init(event.peerconnection, eventEmitter);
         });
@@ -168,16 +152,28 @@ var RTC = {
             DataChannels.handleSelectedEndpointEvent);
         APP.UI.addListener(UIEvents.PINNED_ENDPOINT,
             DataChannels.handlePinnedEndpointEvent);
-        this.rtcUtils = new RTCUtils(this);
-        this.rtcUtils.obtainAudioAndVideoPermissions(
-            null, null, getMediaStreamUsage());
+
+        // In case of IE we continue from 'onReady' callback
+        // passed to RTCUtils constructor. It will be invoked by Temasys plugin
+        // once it is initialized.
+        var onReady = function () {
+            eventEmitter.emit(RTCEvents.RTC_READY, true);
+            self.rtcUtils.obtainAudioAndVideoPermissions(
+                null, null, getMediaStreamUsage());
+        };
+
+        this.rtcUtils = new RTCUtils(this, onReady);
+
+        // Call onReady() if Temasys plugin is not used
+        if (!RTCBrowserType.isTemasysPluginUsed()) {
+            onReady();
+        }
     },
     muteRemoteVideoStream: function (jid, value) {
         var stream;
 
         if(this.remoteStreams[jid] &&
-            this.remoteStreams[jid][MediaStreamType.VIDEO_TYPE])
-        {
+            this.remoteStreams[jid][MediaStreamType.VIDEO_TYPE]) {
             stream = this.remoteStreams[jid][MediaStreamType.VIDEO_TYPE];
         }
 
@@ -202,19 +198,28 @@ var RTC = {
     },
     changeLocalVideo: function (stream, isUsingScreenStream, callback) {
         var oldStream = this.localVideo.getOriginalStream();
-        var type = (isUsingScreenStream? "screen" : "video");
+        var type = (isUsingScreenStream ? "screen" : "camera");
         var localCallback = callback;
-        if(this.localVideo.isMuted() && this.localVideo.videoType !== type)
-        {
+        if(this.localVideo.isMuted() && this.localVideo.videoType !== type) {
             localCallback = function() {
-                APP.xmpp.setVideoMute(false, APP.UI.setVideoMuteButtonsState);
+                APP.xmpp.setVideoMute(false, function(mute) {
+                    eventEmitter.emit(RTCEvents.VIDEO_MUTE, mute);
+                });
+                
                 callback();
             };
         }
+        // FIXME: Workaround for FF/IE/Safari
+        if (stream && stream.videoStream) {
+            stream = stream.videoStream;
+        }
         var videoStream = this.rtcUtils.createStream(stream, true);
         this.localVideo = this.createLocalStream(videoStream, "video", true, type);
         // Stop the stream to trigger onended event for old stream
         oldStream.stop();
+
+        this.switchVideoStreams(videoStream, oldStream);
+
         APP.xmpp.switchStreams(videoStream, oldStream,localCallback);
     },
     changeLocalAudio: function (stream, callback) {
@@ -225,45 +230,31 @@ var RTC = {
         oldStream.stop();
         APP.xmpp.switchStreams(newStream, oldStream, callback, true);
     },
-    /**
-     * Checks if video identified by given src is desktop stream.
-     * @param videoSrc eg.
-     * blob:https%3A//pawel.jitsi.net/9a46e0bd-131e-4d18-9c14-a9264e8db395
-     * @returns {boolean}
-     */
-    isVideoSrcDesktop: function (jid) {
-        if(!jid)
-            return false;
-        var isDesktop = false;
-        var stream = null;
-        if (APP.xmpp.myJid() === jid) {
-            // local video
-            stream = this.localVideo;
+    isVideoMuted: function (jid) {
+        if (jid === APP.xmpp.myJid()) {
+            var localVideo = APP.RTC.localVideo;
+            return (!localVideo || localVideo.isMuted());
         } else {
-            var peerStreams = this.remoteStreams[jid];
-            if(!peerStreams)
-                return false;
-            stream = peerStreams[MediaStreamType.VIDEO_TYPE];
+            if (!APP.RTC.remoteStreams[jid] ||
+                !APP.RTC.remoteStreams[jid][MediaStreamType.VIDEO_TYPE]) {
+                return null;
+            }
+            return APP.RTC.remoteStreams[jid][MediaStreamType.VIDEO_TYPE].muted;
         }
-
-        if(stream)
-            isDesktop = (stream.videoType === "screen");
-
-        return isDesktop;
     },
-    setVideoMute: function(mute, callback, options) {
-        if(!this.localVideo)
+    setVideoMute: function (mute, callback, options) {
+        if (!this.localVideo)
             return;
 
         if (mute == APP.RTC.localVideo.isMuted())
         {
             APP.xmpp.sendVideoInfoPresence(mute);
-            if(callback)
+            if (callback)
                 callback(mute);
         }
         else
         {
-            APP.RTC.localVideo.setMute(!mute);
+            APP.RTC.localVideo.setMute(mute);
             APP.xmpp.setVideoMute(
                 mute,
                 callback,

modules/RTC/RTCBrowserType.js

@@ -0,0 +1,161 @@
+
+var currentBrowser;
+
+var browserVersion;
+
+var RTCBrowserType = {
+
+    RTC_BROWSER_CHROME: "rtc_browser.chrome",
+
+    RTC_BROWSER_OPERA: "rtc_browser.opera",
+
+    RTC_BROWSER_FIREFOX: "rtc_browser.firefox",
+
+    RTC_BROWSER_IEXPLORER: "rtc_browser.iexplorer",
+
+    RTC_BROWSER_SAFARI: "rtc_browser.safari",
+
+    getBrowserType: function () {
+        return currentBrowser;
+    },
+
+    isChrome: function () {
+        return currentBrowser === RTCBrowserType.RTC_BROWSER_CHROME;
+    },
+
+    isOpera: function () {
+        return currentBrowser === RTCBrowserType.RTC_BROWSER_OPERA;
+    },
+    isFirefox: function () {
+        return currentBrowser === RTCBrowserType.RTC_BROWSER_FIREFOX;
+    },
+
+    isIExplorer: function () {
+        return currentBrowser === RTCBrowserType.RTC_BROWSER_IEXPLORER;
+    },
+
+    isSafari: function () {
+        return currentBrowser === RTCBrowserType.RTC_BROWSER_SAFARI;
+    },
+    isTemasysPluginUsed: function () {
+        return RTCBrowserType.isIExplorer() || RTCBrowserType.isSafari();
+    },
+    getFirefoxVersion: function () {
+        return RTCBrowserType.isFirefox() ? browserVersion : null;
+    },
+
+    getChromeVersion: function () {
+        return RTCBrowserType.isChrome() ? browserVersion : null;
+    },
+
+    usesPlanB: function() {
+        return RTCBrowserType.isChrome() || RTCBrowserType.isOpera() ||
+            RTCBrowserType.isTemasysPluginUsed();
+    },
+
+    usesUnifiedPlan: function() {
+        return RTCBrowserType.isFirefox();
+    }
+
+    // Add version getters for other browsers when needed
+};
+
+// detectOpera() must be called before detectChrome() !!!
+// otherwise Opera wil be detected as Chrome
+function detectChrome() {
+    if (navigator.webkitGetUserMedia) {
+        currentBrowser = RTCBrowserType.RTC_BROWSER_CHROME;
+        var userAgent = navigator.userAgent.toLowerCase();
+        // We can assume that user agent is chrome, because it's
+        // enforced when 'ext' streaming method is set
+        var ver = parseInt(userAgent.match(/chrome\/(\d+)\./)[1], 10);
+        console.log("This appears to be Chrome, ver: " + ver);
+        return ver;
+    }
+    return null;
+}
+
+function detectOpera() {
+    var userAgent = navigator.userAgent;
+    if (userAgent.match(/Opera|OPR/)) {
+        currentBrowser = RTCBrowserType.RTC_BROWSER_OPERA;
+        var version = userAgent.match(/(Opera|OPR) ?\/?(\d+)\.?/)[2];
+        console.info("This appears to be Opera, ver: " + version);
+        return version;
+    }
+    return null;
+}
+
+function detectFirefox() {
+    if (navigator.mozGetUserMedia) {
+        currentBrowser = RTCBrowserType.RTC_BROWSER_FIREFOX;
+        var version = parseInt(
+            navigator.userAgent.match(/Firefox\/([0-9]+)\./)[1], 10);
+        console.log('This appears to be Firefox, ver: ' + version);
+        return version;
+    }
+    return null;
+}
+
+function detectSafari() {
+    if ((/^((?!chrome).)*safari/i.test(navigator.userAgent))) {
+        currentBrowser = RTCBrowserType.RTC_BROWSER_SAFARI;
+        console.info("This appears to be Safari");
+        // FIXME detect Safari version when needed
+        return 1;
+    }
+    return null;
+}
+
+function detectIE() {
+    var version;
+    var ua = window.navigator.userAgent;
+
+    var msie = ua.indexOf('MSIE ');
+    if (msie > 0) {
+        // IE 10 or older => return version number
+        version = parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
+    }
+
+    var trident = ua.indexOf('Trident/');
+    if (!version && trident > 0) {
+        // IE 11 => return version number
+        var rv = ua.indexOf('rv:');
+        version = parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
+    }
+
+    var edge = ua.indexOf('Edge/');
+    if (!version && edge > 0) {
+        // IE 12 => return version number
+        version = parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
+    }
+
+    if (version) {
+        currentBrowser = RTCBrowserType.RTC_BROWSER_IEXPLORER;
+        console.info("This appears to be IExplorer, ver: " + version);
+    }
+    return version;
+}
+
+function detectBrowser() {
+    var version;
+    var detectors = [
+        detectOpera,
+        detectChrome,
+        detectFirefox,
+        detectIE,
+        detectSafari
+    ];
+    // Try all browser detectors
+    for (var i = 0; i < detectors.length; i++) {
+        version = detectors[i]();
+        if (version)
+            return version;
+    }
+    console.error("Failed to detect browser type");
+    return undefined;
+}
+
+browserVersion = detectBrowser();
+
+module.exports = RTCBrowserType;

modules/RTC/RTCUtils.js

@@ -1,5 +1,8 @@
-var RTCBrowserType = require("../../service/RTC/RTCBrowserType.js");
+/* global config, require, attachMediaStream, getUserMedia */
+var RTCBrowserType = require("./RTCBrowserType");
 var Resolutions = require("../../service/RTC/Resolutions");
+var AdapterJS = require("./adapter.screenshare");
+var SDPUtil = require("../xmpp/SDPUtil");
 
 var currentResolution = null;
 
@@ -9,11 +12,9 @@ function getPreviousResolution(resolution) {
     var order = Resolutions[resolution].order;
     var res = null;
     var resName = null;
-    for(var i in Resolutions)
-    {
+    for(var i in Resolutions) {
         var tmp = Resolutions[i];
-        if(res == null || (res.order < tmp.order && tmp.order < order))
-        {
+        if(res == null || (res.order < tmp.order && tmp.order < order)) {
             resName = i;
             res = tmp;
         }
@@ -21,19 +22,17 @@ function getPreviousResolution(resolution) {
     return resName;
 }
 
-function setResolutionConstraints(constraints, resolution, isAndroid)
-{
+function setResolutionConstraints(constraints, resolution, isAndroid) {
     if (resolution && !constraints.video || isAndroid) {
-        constraints.video = { mandatory: {}, optional: [] };// same behaviour as true
+        // same behaviour as true
+        constraints.video = { mandatory: {}, optional: [] };
     }
 
-    if(Resolutions[resolution])
-    {
+    if(Resolutions[resolution]) {
         constraints.video.mandatory.minWidth = Resolutions[resolution].width;
         constraints.video.mandatory.minHeight = Resolutions[resolution].height;
     }
-    else
-    {
+    else {
         if (isAndroid) {
             constraints.video.mandatory.minWidth = 320;
             constraints.video.mandatory.minHeight = 240;
@@ -42,9 +41,11 @@ function setResolutionConstraints(constraints, resolution, isAndroid)
     }
 
     if (constraints.video.mandatory.minWidth)
-        constraints.video.mandatory.maxWidth = constraints.video.mandatory.minWidth;
+        constraints.video.mandatory.maxWidth =
+            constraints.video.mandatory.minWidth;
     if (constraints.video.mandatory.minHeight)
-        constraints.video.mandatory.maxHeight = constraints.video.mandatory.minHeight;
+        constraints.video.mandatory.maxHeight =
+            constraints.video.mandatory.minHeight;
 }
 
 function getConstraints(um, resolution, bandwidth, fps, desktopStream, isAndroid)
@@ -52,22 +53,38 @@ function getConstraints(um, resolution, bandwidth, fps, desktopStream, isAndroid
     var constraints = {audio: false, video: false};
 
     if (um.indexOf('video') >= 0) {
-        constraints.video = { mandatory: {}, optional: [] };// same behaviour as true
+        // same behaviour as true
+        constraints.video = { mandatory: {}, optional: [] };
     }
     if (um.indexOf('audio') >= 0) {
-        constraints.audio = { mandatory: {}, optional: []};// same behaviour as true
+        // same behaviour as true
+        constraints.audio = { mandatory: {}, optional: []};
     }
     if (um.indexOf('screen') >= 0) {
-        constraints.video = {
-            mandatory: {
-                chromeMediaSource: "screen",
-                googLeakyBucket: true,
-                maxWidth: window.screen.width,
-                maxHeight: window.screen.height,
-                maxFrameRate: 3
-            },
-            optional: []
-        };
+        if (RTCBrowserType.isChrome()) {
+            constraints.video = {
+                mandatory: {
+                    chromeMediaSource: "screen",
+                    googLeakyBucket: true,
+                    maxWidth: window.screen.width,
+                    maxHeight: window.screen.height,
+                    maxFrameRate: 3
+                },
+                optional: []
+            };
+        } else if (RTCBrowserType.isTemasysPluginUsed()) {
+            constraints.video = {
+                optional: [
+                    {
+                        sourceId: AdapterJS.WebRTCPlugin.plugin.screensharingKey
+                    }
+                ]
+            };
+        } else {
+            console.error(
+                "'screen' WebRTC media source is supported only in Chrome" +
+                " and with Temasys plugin");
+        }
     }
     if (um.indexOf('desktop') >= 0) {
         constraints.video = {
@@ -96,9 +113,6 @@ function getConstraints(um, resolution, bandwidth, fps, desktopStream, isAndroid
         );
     }
     if (constraints.video) {
-        constraints.video.optional.push(
-            {googNoiseReduction: false} // chrome 37 workaround for issue 3807, reenable in M38
-        );
         if (um.indexOf('video') >= 0) {
             constraints.video.optional.push(
                 {googLeakyBucket: true}
@@ -110,13 +124,20 @@ function getConstraints(um, resolution, bandwidth, fps, desktopStream, isAndroid
         setResolutionConstraints(constraints, resolution, isAndroid);
     }
 
-    if (bandwidth) { // doesn't work currently, see webrtc issue 1846
-        if (!constraints.video) constraints.video = {mandatory: {}, optional: []};//same behaviour as true
+    if (bandwidth) {
+        if (!constraints.video) {
+            //same behaviour as true
+            constraints.video = {mandatory: {}, optional: []};
+        }
         constraints.video.optional.push({bandwidth: bandwidth});
     }
-    if (fps) { // for some cameras it might be necessary to request 30fps
+    if (fps) {
+        // for some cameras it might be necessary to request 30fps
         // so they choose 30fps mjpg over 10fps yuy2
-        if (!constraints.video) constraints.video = {mandatory: {}, optional: []};// same behaviour as true;
+        if (!constraints.video) {
+            // same behaviour as true;
+            constraints.video = {mandatory: {}, optional: []};
+        }
         constraints.video.mandatory.minFrameRate = fps;
     }
 
@@ -124,16 +145,14 @@ function getConstraints(um, resolution, bandwidth, fps, desktopStream, isAndroid
 }
 
 
-function RTCUtils(RTCService)
+function RTCUtils(RTCService, onTemasysPluginReady)
 {
+    var self = this;
     this.service = RTCService;
-    if (navigator.mozGetUserMedia) {
-        console.log('This appears to be Firefox');
-        var version = parseInt(navigator.userAgent.match(/Firefox\/([0-9]+)\./)[1], 10);
-        if (version >= 40
-            && config.useBundle && config.useRtcpMux) {
+    if (RTCBrowserType.isFirefox()) {
+        var FFversion = RTCBrowserType.getFirefoxVersion();
+        if (FFversion >= 40) {
             this.peerconnection = mozRTCPeerConnection;
-            this.browser = RTCBrowserType.RTC_BROWSER_FIREFOX;
             this.getUserMedia = navigator.mozGetUserMedia.bind(navigator);
             this.pc_constraints = {};
             this.attachMediaStream =  function (element, stream) {
@@ -150,12 +169,15 @@ function RTCUtils(RTCService)
                 element[0].play();
             };
             this.getStreamID =  function (stream) {
-                var tracks = stream.getVideoTracks();
-                if(!tracks || tracks.length == 0)
-                {
-                    tracks = stream.getAudioTracks();
+                var id = stream.id;
+                if (!id) {
+                    var tracks = stream.getVideoTracks();
+                    if (!tracks || tracks.length === 0) {
+                        tracks = stream.getAudioTracks();
+                    }
+                    id = tracks[0].id;
                 }
-                return tracks[0].id.replace(/[\{,\}]/g,"");
+                return SDPUtil.filter_special_chars(id);
             };
             this.getVideoSrc = function (element) {
                 if(!element)
@@ -169,14 +191,14 @@ function RTCUtils(RTCService)
             RTCSessionDescription = mozRTCSessionDescription;
             RTCIceCandidate = mozRTCIceCandidate;
         } else {
+            console.error(
+                "Firefox version too old: " + FFversion + ". Required >= 40.");
             window.location.href = 'unsupported_browser.html';
             return;
         }
 
-    } else if (navigator.webkitGetUserMedia) {
-        console.log('This appears to be Chrome');
+    } else if (RTCBrowserType.isChrome() || RTCBrowserType.isOpera()) {
         this.peerconnection = webkitRTCPeerConnection;
-        this.browser = RTCBrowserType.RTC_BROWSER_CHROME;
         this.getUserMedia = navigator.webkitGetUserMedia.bind(navigator);
         this.attachMediaStream = function (element, stream) {
             element.attr('src', webkitURL.createObjectURL(stream));
@@ -184,7 +206,7 @@ function RTCUtils(RTCService)
         this.getStreamID = function (stream) {
             // streams from FF endpoints have the characters '{' and '}'
             // that make jQuery choke.
-            return stream.id.replace(/[\{,\}]/g,"");
+            return SDPUtil.filter_special_chars(stream.id);
         };
         this.getVideoSrc = function (element) {
             if(!element)
@@ -211,20 +233,68 @@ function RTCUtils(RTCService)
             };
         }
     }
-    else
-    {
-        try { console.log('Browser does not appear to be WebRTC-capable'); } catch (e) { }
+    // Detect IE/Safari
+    else if (RTCBrowserType.isTemasysPluginUsed()) {
 
+        //AdapterJS.WebRTCPlugin.setLogLevel(
+        //    AdapterJS.WebRTCPlugin.PLUGIN_LOG_LEVELS.VERBOSE);
+
+        AdapterJS.webRTCReady(function (isPlugin) {
+
+            self.peerconnection = RTCPeerConnection;
+            self.getUserMedia = getUserMedia;
+            self.attachMediaStream = function (elSel, stream) {
+
+                if (stream.id === "dummyAudio" || stream.id === "dummyVideo") {
+                    return;
+                }
+
+                attachMediaStream(elSel[0], stream);
+            };
+            self.getStreamID = function (stream) {
+                var id = SDPUtil.filter_special_chars(stream.label);
+                return id;
+            };
+            self.getVideoSrc = function (element) {
+                if (!element) {
+                    console.warn("Attempt to get video SRC of null element");
+                    return null;
+                }
+                var children = element.children;
+                for (var i = 0; i !== children.length; ++i) {
+                    if (children[i].name === 'streamId') {
+                        return children[i].value;
+                    }
+                }
+                //console.info(element.id + " SRC: " + src);
+                return null;
+            };
+            self.setVideoSrc = function (element, src) {
+                //console.info("Set video src: ", element, src);
+                if (!src) {
+                    console.warn("Not attaching video stream, 'src' is null");
+                    return;
+                }
+                AdapterJS.WebRTCPlugin.WaitForPluginReady();
+                var stream = AdapterJS.WebRTCPlugin.plugin
+                    .getStreamWithId(AdapterJS.WebRTCPlugin.pageId, src);
+                attachMediaStream(element, stream);
+            };
+
+            onTemasysPluginReady(isPlugin);
+        });
+    } else {
+        try {
+            console.log('Browser does not appear to be WebRTC-capable');
+        } catch (e) { }
         window.location.href = 'unsupported_browser.html';
-        return;
     }
 }
 
 
 RTCUtils.prototype.getUserMediaWithConstraints = function(
     um, success_callback, failure_callback, resolution,bandwidth, fps,
-    desktopStream)
-{
+    desktopStream) {
     currentResolution = resolution;
     // Check if we are running on Android device
     var isAndroid = navigator.userAgent.indexOf('Android') != -1;
@@ -232,7 +302,7 @@ RTCUtils.prototype.getUserMediaWithConstraints = function(
     var constraints = getConstraints(
         um, resolution, bandwidth, fps, desktopStream, isAndroid);
 
-    var isFF = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+    console.info("Get media constraints", constraints);
 
     var self = this;
 
@@ -261,16 +331,14 @@ RTCUtils.prototype.getUserMediaWithConstraints = function(
 
 RTCUtils.prototype.setAvailableDevices = function (um, available) {
     var devices = {};
-    if(um.indexOf("video") != -1)
-    {
+    if(um.indexOf("video") != -1) {
         devices.video = available;
     }
-    if(um.indexOf("audio") != -1)
-    {
+    if(um.indexOf("audio") != -1) {
         devices.audio = available;
     }
     this.service.setDeviceAvailability(devices);
-}
+};
 
 /**
  * We ask for audio and video combined stream in order to get permissions and
@@ -296,8 +364,7 @@ RTCUtils.prototype.obtainAudioAndVideoPermissions =
 
 
     if(usageOptions)
-        for(var i = 0; i < devices.length; i++)
-        {
+        for(var i = 0; i < devices.length; i++) {
             var device = devices[i];
             if(usageOptions[device] === true)
                 newDevices.push(device);
@@ -305,15 +372,14 @@ RTCUtils.prototype.obtainAudioAndVideoPermissions =
     else
         newDevices = devices;
 
-    if(newDevices.length === 0)
-    {
+    if(newDevices.length === 0) {
         successCallback();
         return;
     }
 
-    if (navigator.mozGetUserMedia) {
+    if (RTCBrowserType.isFirefox() || RTCBrowserType.isTemasysPluginUsed()) {
 
-        // With FF we can't split the stream into audio and video because FF
+        // With FF/IE we can't split the stream into audio and video because FF
         // doesn't support media stream constructors. So, we need to get the
         // audio stream separately from the video stream using two distinct GUM
         // calls. Not very user friendly :-( but we don't have many other
@@ -321,31 +387,41 @@ RTCUtils.prototype.obtainAudioAndVideoPermissions =
         //
         // Note that we pack those 2 streams in a single object and pass it to
         // the successCallback method.
-
-        self.getUserMediaWithConstraints(
-            ['audio'],
-            function (audioStream) {
-                self.getUserMediaWithConstraints(
-                    ['video'],
-                    function (videoStream) {
-                        return self.successCallback({
-                            audioStream: audioStream,
-                            videoStream: videoStream
-                        });
-                    },
-                    function (error) {
-                        console.error('failed to obtain video stream - stop',
-                            error);
-                        return self.successCallback(null);
-                    },
-                    config.resolution || '360');
-            },
-            function (error) {
-                console.error('failed to obtain audio stream - stop',
-                        error);
-                return self.successCallback(null);
-            }
-        );
+        var obtainVideo = function (audioStream) {
+            self.getUserMediaWithConstraints(
+                ['video'],
+                function (videoStream) {
+                    return successCallback({
+                        audioStream: audioStream,
+                        videoStream: videoStream
+                    });
+                },
+                function (error) {
+                    console.error(
+                        'failed to obtain video stream - stop', error);
+                    self.errorCallback(error);
+                },
+                config.resolution || '360');
+        };
+        var obtainAudio = function () {
+            self.getUserMediaWithConstraints(
+                ['audio'],
+                function (audioStream) {
+                    if (newDevices.indexOf('video') !== -1)
+                        obtainVideo(audioStream);
+                },
+                function (error) {
+                    console.error(
+                        'failed to obtain audio stream - stop', error);
+                    self.errorCallback(error);
+                }
+            );
+        };
+        if (newDevices.indexOf('audio') !== -1) {
+            obtainAudio();
+        } else {
+            obtainVideo(null);
+        }
     } else {
         this.getUserMediaWithConstraints(
         newDevices,
@@ -357,13 +433,12 @@ RTCUtils.prototype.obtainAudioAndVideoPermissions =
         },
         config.resolution || '360');
     }
-
-}
+};
 
 RTCUtils.prototype.successCallback = function (stream, usageOptions) {
-    // If this is FF, the stream parameter is *not* a MediaStream object, it's
-    // an object with two properties: audioStream, videoStream.
-    if(stream && !navigator.mozGetUserMedia)
+    // If this is FF or IE, the stream parameter is *not* a MediaStream object,
+    // it's an object with two properties: audioStream, videoStream.
+    if (stream && stream.getAudioTracks && stream.getVideoTracks)
         console.log('got', stream, stream.getAudioTracks().length,
             stream.getVideoTracks().length);
     this.handleLocalStream(stream, usageOptions);
@@ -387,8 +462,7 @@ RTCUtils.prototype.errorCallback = function (error) {
                 return self.errorCallback(error);
             }, resolution);
     }
-    else
-    {
+    else {
         self.getUserMediaWithConstraints(
             ['audio'],
             function (stream) {
@@ -401,11 +475,9 @@ RTCUtils.prototype.errorCallback = function (error) {
             }
         );
     }
+};
 
-}
-
-RTCUtils.prototype.handleLocalStream = function(stream, usageOptions)
-{
+RTCUtils.prototype.handleLocalStream = function(stream, usageOptions) {
     // If this is FF, the stream parameter is *not* a MediaStream object, it's
     // an object with two properties: audioStream, videoStream.
     var audioStream, videoStream;
@@ -427,10 +499,17 @@ RTCUtils.prototype.handleLocalStream = function(stream, usageOptions)
             }
         }
     }
-    else
-    {//firefox
-        audioStream = stream.audioStream;
-        videoStream = stream.videoStream;
+    else if (RTCBrowserType.isFirefox() || RTCBrowserType.isTemasysPluginUsed())
+    {   // Firefox and Temasys plugin
+        if (stream && stream.audioStream)
+            audioStream = stream.audioStream;
+        else
+            audioStream = new DummyMediaStream("dummyAudio");
+
+        if (stream && stream.videoStream)
+            videoStream = stream.videoStream;
+        else
+            videoStream = new DummyMediaStream("dummyVideo");
     }
 
     var audioMuted = (usageOptions && usageOptions.audio === false),
@@ -443,28 +522,40 @@ RTCUtils.prototype.handleLocalStream = function(stream, usageOptions)
     this.service.createLocalStream(audioStream, "audio", null, null,
         audioMuted, audioGUM);
 
-    this.service.createLocalStream(videoStream, "video", null, null,
+    this.service.createLocalStream(videoStream, "video", null, 'camera',
         videoMuted, videoGUM);
 };
 
-RTCUtils.prototype.createStream = function(stream, isVideo)
-{
-    var newStream = null;
-    if(window.webkitMediaStream)
-    {
-        newStream = new webkitMediaStream();
-        if(newStream)
-        {
-            var tracks = (isVideo? stream.getVideoTracks() : stream.getAudioTracks());
+function DummyMediaStream(id) {
+    this.id = id;
+    this.label = id;
+    this.stop = function() { };
+    this.getAudioTracks = function() { return []; };
+    this.getVideoTracks = function() { return []; };
+}
 
-            for (i = 0; i < tracks.length; i++) {
+RTCUtils.prototype.createStream = function(stream, isVideo) {
+    var newStream = null;
+    if (window.webkitMediaStream) {
+        newStream = new webkitMediaStream();
+        if (newStream) {
+            var tracks = (isVideo ? stream.getVideoTracks() : stream.getAudioTracks());
+
+            for (var i = 0; i < tracks.length; i++) {
                 newStream.addTrack(tracks[i]);
             }
         }
 
     }
-    else
-        newStream = stream;
+    else {
+        // FIXME: this is duplicated with 'handleLocalStream' !!!
+        if (stream) {
+            newStream = stream;
+        } else {
+            newStream =
+                new DummyMediaStream(isVideo ? "dummyVideo" : "dummyAudio");
+        }
+    }
 
     return newStream;
 };

modules/UI/UI.js

@@ -1,3 +1,4 @@
+/* global Strophe, APP, $, config, interfaceConfig, toastr */
 var UI = {};
 
 var VideoLayout = require("./videolayout/VideoLayout.js");
@@ -24,30 +25,73 @@ var CQEvents = require("../../service/connectionquality/CQEvents");
 var DesktopSharingEventTypes
     = require("../../service/desktopsharing/DesktopSharingEventTypes");
 var RTCEvents = require("../../service/RTC/RTCEvents");
+var RTCBrowserType = require("../RTC/RTCBrowserType");
 var StreamEventTypes = require("../../service/RTC/StreamEventTypes");
 var XMPPEvents = require("../../service/xmpp/XMPPEvents");
+var UIEvents = require("../../service/UI/UIEvents");
 var MemberEvents = require("../../service/members/Events");
 
 var eventEmitter = new EventEmitter();
 var roomName = null;
 
 
-function notifyForInitialMute()
-{
+function promptDisplayName() {
+    var message = '<h2 data-i18n="dialog.displayNameRequired">';
+    message += APP.translation.translateString(
+        "dialog.displayNameRequired");
+    message += '</h2>' +
+        '<input name="displayName" type="text" data-i18n=' +
+        '"[placeholder]defaultNickname" placeholder="' +
+        APP.translation.translateString(
+            "defaultNickname", {name: "Jane Pink"}) +
+        '" autofocus>';
+
+    var buttonTxt
+        = APP.translation.generateTranslationHTML("dialog.Ok");
+    var buttons = [];
+    buttons.push({title: buttonTxt, value: "ok"});
+
+    messageHandler.openDialog(null, message,
+        true,
+        buttons,
+        function (e, v, m, f) {
+            if (v == "ok") {
+                var displayName = f.displayName;
+                if (displayName) {
+                    VideoLayout.inputDisplayNameHandler(displayName);
+                    return true;
+                }
+            }
+            e.preventDefault();
+        },
+        function () {
+            var form  = $.prompt.getPrompt();
+            var input = form.find("input[name='displayName']");
+            input.focus();
+            var button = form.find("button");
+            button.attr("disabled", "disabled");
+            input.keyup(function () {
+                if(!input.val())
+                    button.attr("disabled", "disabled");
+                else
+                    button.removeAttr("disabled");
+            });
+        }
+    );
+}
+
+function notifyForInitialMute() {
     messageHandler.notify(null, "notify.mutedTitle", "connected",
         "notify.muted", null, {timeOut: 120000});
 }
 
-function setupPrezi()
-{
-    $("#reloadPresentationLink").click(function()
-    {
+function setupPrezi() {
+    $("#reloadPresentationLink").click(function() {
         Prezi.reloadPresentation();
     });
 }
 
-function setupChat()
-{
+function setupChat() {
     Chat.init();
     $("#toggle_smileys").click(function() {
         Chat.toggleSmileys();
@@ -61,8 +105,7 @@ function setupToolbars() {
 }
 
 function streamHandler(stream, isMuted) {
-    switch (stream.type)
-    {
+    switch (stream.type) {
         case "audio":
             VideoLayout.changeLocalAudio(stream, isMuted);
             break;
@@ -77,15 +120,15 @@ function streamHandler(stream, isMuted) {
 
 function onXmppConnectionFailed(stropheErrorMsg) {
 
-    var title = APP.translation.generateTranslatonHTML(
+    var title = APP.translation.generateTranslationHTML(
         "dialog.error");
 
     var message;
     if (stropheErrorMsg) {
-        message = APP.translation.generateTranslatonHTML(
+        message = APP.translation.generateTranslationHTML(
             "dialog.connectErrorWithMsg", {msg: stropheErrorMsg});
     } else {
-        message = APP.translation.generateTranslatonHTML(
+        message = APP.translation.generateTranslationHTML(
             "dialog.connectError");
     }
 
@@ -104,17 +147,16 @@ function onDisplayNameChanged(jid, displayName) {
 }
 
 function registerListeners() {
-    APP.RTC.addStreamListener(streamHandler, StreamEventTypes.EVENT_TYPE_LOCAL_CREATED);
-
-    APP.RTC.addStreamListener(streamHandler, StreamEventTypes.EVENT_TYPE_LOCAL_CHANGED);
+    APP.RTC.addStreamListener(streamHandler,
+        StreamEventTypes.EVENT_TYPE_LOCAL_CREATED);
+    APP.RTC.addStreamListener(streamHandler,
+        StreamEventTypes.EVENT_TYPE_LOCAL_CHANGED);
     APP.RTC.addStreamListener(function (stream) {
         VideoLayout.onRemoteStreamAdded(stream);
     }, StreamEventTypes.EVENT_TYPE_REMOTE_CREATED);
-    APP.RTC.addStreamListener(function (jid) {
-        VideoLayout.onVideoTypeChanged(jid);
-    }, StreamEventTypes.EVENT_TYPE_REMOTE_CHANGED);
     APP.RTC.addListener(RTCEvents.LASTN_CHANGED, onLastNChanged);
-    APP.RTC.addListener(RTCEvents.DOMINANTSPEAKER_CHANGED, function (resourceJid) {
+    APP.RTC.addListener(RTCEvents.DOMINANTSPEAKER_CHANGED,
+        function (resourceJid) {
         VideoLayout.onDominantSpeakerChanged(resourceJid);
     });
     APP.RTC.addListener(RTCEvents.LASTN_ENDPOINT_CHANGED,
@@ -125,20 +167,24 @@ function registerListeners() {
     APP.RTC.addListener(RTCEvents.AVAILABLE_DEVICES_CHANGED,
         function (devices) {
             VideoLayout.setDeviceAvailabilityIcons(null, devices);
-        })
-    APP.statistics.addAudioLevelListener(function(jid, audioLevel)
-    {
+        });
+    APP.RTC.addListener(RTCEvents.VIDEO_MUTE, UI.setVideoMuteButtonsState);
+    APP.RTC.addListener(RTCEvents.DATA_CHANNEL_OPEN, function() {
+        // when the data channel becomes available, tell the bridge about video
+        // selections so that it can do adaptive simulcast,
+        // we want the notification to trigger even if userJid is undefined,
+        // or null.
+        var userJid = APP.UI.getLargeVideoJid();
+        eventEmitter.emit(UIEvents.SELECTED_ENDPOINT, userJid);
+    });
+    APP.statistics.addAudioLevelListener(function(jid, audioLevel) {
         var resourceJid;
-        if(jid === APP.statistics.LOCAL_JID)
-        {
+        if(jid === APP.statistics.LOCAL_JID) {
             resourceJid = AudioLevels.LOCAL_LEVEL;
-            if(APP.RTC.localAudio.isMuted())
-            {
+            if(APP.RTC.localAudio.isMuted()) {
                 audioLevel = 0;
             }
-        }
-        else
-        {
+        } else {
             resourceJid = Strophe.getResourceFromJid(jid);
         }
 
@@ -166,16 +212,15 @@ function registerListeners() {
         );
     });
     APP.xmpp.addListener(XMPPEvents.RESERVATION_ERROR, function (code, msg) {
-        var title = APP.translation.generateTranslatonHTML(
+        var title = APP.translation.generateTranslationHTML(
             "dialog.reservationError");
-        var message = APP.translation.generateTranslatonHTML(
+        var message = APP.translation.generateTranslationHTML(
             "dialog.reservationErrorMsg", {code: code, msg: msg});
         messageHandler.openDialog(
             title,
             message,
             true, {},
-            function (event, value, message, formVals)
-            {
+            function (event, value, message, formVals) {
                 return false;
             }
         );
@@ -187,11 +232,10 @@ function registerListeners() {
     APP.xmpp.addListener(XMPPEvents.MUC_DESTROYED, function (reason) {
         //FIXME: use Session Terminated from translation, but
         // 'reason' text comes from XMPP packet and is not translated
-        var title = APP.translation.generateTranslatonHTML("dialog.sessTerminated");
+        var title = APP.translation.generateTranslationHTML("dialog.sessTerminated");
         messageHandler.openDialog(
             title, reason, true, {},
-            function (event, value, message, formVals)
-            {
+            function (event, value, message, formVals) {
                 return false;
             }
         );
@@ -203,24 +247,6 @@ function registerListeners() {
     APP.xmpp.addListener(XMPPEvents.USER_ID_CHANGED, function (from, id) {
         Avatar.setUserAvatar(from, id);
     });
-    APP.xmpp.addListener(XMPPEvents.STREAMS_CHANGED, function (jid, changedStreams) {
-        for(stream in changedStreams)
-        {
-            // might need to update the direction if participant just went from sendrecv to recvonly
-            if (stream.type === 'video' || stream.type === 'screen') {
-                var el = $('#participant_'  + Strophe.getResourceFromJid(jid) + '>video');
-                switch (stream.direction) {
-                    case 'sendrecv':
-                        el.show();
-                        break;
-                    case 'recvonly':
-                        el.hide();
-                        break;
-                }
-            }
-        }
-
-    });
     APP.xmpp.addListener(XMPPEvents.DISPLAY_NAME_CHANGED, onDisplayNameChanged);
     APP.xmpp.addListener(XMPPEvents.MUC_JOINED, onMucJoined);
     APP.xmpp.addListener(XMPPEvents.LOCAL_ROLE_CHANGED, onLocalRoleChanged);
@@ -235,16 +261,81 @@ function registerListeners() {
     APP.xmpp.addListener(XMPPEvents.ETHERPAD, initEtherpad);
     APP.xmpp.addListener(XMPPEvents.AUTHENTICATION_REQUIRED,
         onAuthenticationRequired);
+    APP.xmpp.addListener(XMPPEvents.VIDEO_TYPE, onPeerVideoTypeChanged);
     APP.xmpp.addListener(XMPPEvents.DEVICE_AVAILABLE,
         function (resource, devices) {
             VideoLayout.setDeviceAvailabilityIcons(resource, devices);
         });
 
+    APP.xmpp.addListener(XMPPEvents.AUDIO_MUTED, VideoLayout.onAudioMute);
+    APP.xmpp.addListener(XMPPEvents.VIDEO_MUTED, VideoLayout.onVideoMute);
+    APP.xmpp.addListener(XMPPEvents.AUDIO_MUTED_BY_FOCUS, function(doMuteAudio) {
+        UI.setAudioMuted(doMuteAudio);
+    });
     APP.members.addListener(MemberEvents.DTMF_SUPPORT_CHANGED,
                             onDtmfSupportChanged);
-    APP.xmpp.addListener(XMPPEvents.START_MUTED, function (audio, video) {
+    APP.xmpp.addListener(XMPPEvents.START_MUTED_SETTING_CHANGED, function (audio, video) {
         SettingsMenu.setStartMuted(audio, video);
     });
+    APP.xmpp.addListener(XMPPEvents.START_MUTED_FROM_FOCUS, function (audio, video) {
+        UI.setInitialMuteFromFocus(audio, video);
+    });
+
+    APP.xmpp.addListener(XMPPEvents.JINGLE_FATAL_ERROR, function (session, error) {
+        UI.messageHandler.showError("dialog.sorry",
+            "dialog.internalError");
+    });
+
+    APP.xmpp.addListener(XMPPEvents.SET_LOCAL_DESCRIPTION_ERROR, function() {
+        messageHandler.showError("dialog.error",
+                                        "dialog.SLDFailure");
+    });
+    APP.xmpp.addListener(XMPPEvents.SET_REMOTE_DESCRIPTION_ERROR, function() {
+        messageHandler.showError("dialog.error",
+            "dialog.SRDFailure");
+    });
+    APP.xmpp.addListener(XMPPEvents.CREATE_ANSWER_ERROR, function() {
+        messageHandler.showError();
+    });
+    APP.xmpp.addListener(XMPPEvents.PROMPT_FOR_LOGIN, function() {
+        // FIXME: re-use LoginDialog which supports retries
+        UI.showLoginPopup(connect);
+    });
+    
+    APP.xmpp.addListener(XMPPEvents.FOCUS_DISCONNECTED, function(focusComponent, retrySec) {
+        UI.messageHandler.notify(
+            null, "notify.focus",
+            'disconnected', "notify.focusFail",
+            {component: focusComponent, ms: retrySec});
+    });
+    
+    APP.xmpp.addListener(XMPPEvents.ROOM_JOIN_ERROR, function(pres) {
+        UI.messageHandler.openReportDialog(null,
+            "dialog.joinError", pres);
+    });
+    APP.xmpp.addListener(XMPPEvents.ROOM_CONNECT_ERROR, function(pres) {
+        UI.messageHandler.openReportDialog(null,
+            "dialog.connectError", pres);
+    });
+
+    APP.xmpp.addListener(XMPPEvents.READY_TO_JOIN, function() {
+        var roomName = UI.generateRoomName();
+        APP.xmpp.allocateConferenceFocus(roomName, UI.checkForNicknameAndJoin);
+    });
+    
+    //NicknameHandler emits this event
+    UI.addListener(UIEvents.NICKNAME_CHANGED, function (nickname) {
+        APP.xmpp.addToPresence("displayName", nickname);
+    });
+
+    UI.addListener(UIEvents.LARGEVIDEO_INIT, function () {
+        AudioLevels.init();
+    });
+
+    // Listens for video interruption events.
+    APP.xmpp.addListener(XMPPEvents.CONNECTION_INTERRUPTED, VideoLayout.onVideoInterrupted);
+    // Listens for video restores events.
+    APP.xmpp.addListener(XMPPEvents.CONNECTION_RESTORED, VideoLayout.onVideoRestored);
 }
 
 
@@ -263,14 +354,12 @@ function setVideoMute(mute, options) {
         options);
 }
 
-function onResize()
-{
+function onResize() {
     Chat.resizeChat();
     VideoLayout.resizeLargeVideoContainer();
 }
 
-function bindEvents()
-{
+function bindEvents() {
     /**
      * Resizes and repositions videos in full screen mode.
      */
@@ -282,52 +371,32 @@ function bindEvents()
 
 UI.start = function (init) {
     document.title = interfaceConfig.APP_NAME;
+    var setupWelcomePage = null;
     if(config.enableWelcomePage && window.location.pathname == "/" &&
-        (!window.localStorage.welcomePageDisabled || window.localStorage.welcomePageDisabled == "false"))
-    {
+        (!window.localStorage.welcomePageDisabled ||
+            window.localStorage.welcomePageDisabled == "false")) {
         $("#videoconference_page").hide();
-        var setupWelcomePage = require("./welcome_page/WelcomePage");
+        if (!setupWelcomePage)
+            setupWelcomePage = require("./welcome_page/WelcomePage");
         setupWelcomePage();
 
         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();
 
     $("#videospace").mousemove(function () {
         return ToolbarToggler.showToolbar();
     });
     // Set the defaults for prompt dialogs.
-    jQuery.prompt.setDefaults({persistent: false});
+    $.prompt.setDefaults({persistent: false});
+
+
+    registerListeners();
 
     VideoLayout.init(eventEmitter);
-    AudioLevels.init();
     NicknameHandler.init(eventEmitter);
-    registerListeners();
+
     bindEvents();
     setupPrezi();
     setupToolbars();
@@ -341,10 +410,11 @@ UI.start = function (init) {
     });
 
     if(config.enableWelcomePage && window.location.pathname == "/" &&
-        (!window.localStorage.welcomePageDisabled || window.localStorage.welcomePageDisabled == "false"))
-    {
+        (!window.localStorage.welcomePageDisabled ||
+            window.localStorage.welcomePageDisabled == "false")) {
         $("#videoconference_page").hide();
-        var setupWelcomePage = require("./welcome_page/WelcomePage");
+        if (!setupWelcomePage)
+            setupWelcomePage = require("./welcome_page/WelcomePage");
         setupWelcomePage();
 
         return;
@@ -358,19 +428,15 @@ UI.start = function (init) {
         $('#notice').css({display: 'block'});
     }
 
-    document.getElementById('largeVideo').volume = 0;
-
-    if (!$('#settings').is(':visible')) {
-        console.log('init');
-        init();
-    } else {
-        loginInfo.onsubmit = function (e) {
-            if (e.preventDefault) e.preventDefault();
-            $('#settings').hide();
-            init();
-        };
+    if(config.requireDisplayName) {
+        var currentSettings = Settings.getSettings();
+        if (!currentSettings.displayName) {
+            promptDisplayName();
+        }
     }
 
+    init();
+
     toastr.options = {
         "closeButton": true,
         "debug": false,
@@ -398,15 +464,13 @@ UI.start = function (init) {
 
 };
 
-function chatAddError(errorMessage, originalText)
-{
+function chatAddError(errorMessage, originalText) {
     return Chat.chatAddError(errorMessage, originalText);
-};
+}
 
-function chatSetSubject(text)
-{
+function chatSetSubject(text) {
     return Chat.chatSetSubject(text);
-};
+}
 
 function updateChatConversation(from, displayName, message, myjid, stamp) {
     return Chat.updateChatConversation(from, displayName, message, myjid, stamp);
@@ -414,18 +478,22 @@ function updateChatConversation(from, displayName, message, myjid, stamp) {
 
 function onMucJoined(jid, info) {
     Toolbar.updateRoomUrl(window.location.href);
-    var meHTML = APP.translation.generateTranslatonHTML("me");
+    var meHTML = APP.translation.generateTranslationHTML("me");
     $("#localNick").html(Strophe.getResourceFromJid(jid) + " (" + meHTML + ")");
 
     var settings = Settings.getSettings();
+
+    // Make sure we configure our avatar id, before creating avatar for us
+    Avatar.setUserAvatar(jid, settings.email || settings.uid);
+
     // Add myself to the contact list.
-    ContactList.addContact(jid, settings.email || settings.uid);
+    ContactList.addContact(jid);
 
     // Once we've joined the muc show the toolbar
     ToolbarToggler.showToolbar();
 
-    var displayName = !config.displayJids
-        ? info.displayName : Strophe.getResourceFromJid(jid);
+    var displayName =
+        config.displayJids ? Strophe.getResourceFromJid(jid) : info.displayName;
 
     if (displayName)
         onDisplayNameChanged('localVideoContainer', displayName);
@@ -445,32 +513,17 @@ function onMucMemberLeft(jid) {
     messageHandler.notify(displayName,'notify.somebody',
         'disconnected',
         'notify.disconnected');
-    if(!config.startAudioMuted ||
-        config.startAudioMuted > APP.members.size())
+    if (!config.startAudioMuted ||
+        config.startAudioMuted > APP.members.size()) {
         UIUtil.playSoundNotification('userLeft');
-    // Need to call this with a slight delay, otherwise the element couldn't be
-    // found for some reason.
-    // XXX(gp) it works fine without the timeout for me (with Chrome 38).
-    window.setTimeout(function () {
-        var container = document.getElementById(
-                'participant_' + Strophe.getResourceFromJid(jid));
-        if (container) {
-            ContactList.removeContact(jid);
-            VideoLayout.removeConnectionIndicator(jid);
-            // hide here, wait for video to close before removing
-            $(container).hide();
-            VideoLayout.resizeThumbnails();
-        }
-    }, 10);
+    }
+
+    ContactList.removeContact(jid);
 
     VideoLayout.participantLeft(jid);
+}
 
-};
-
-
-function onLocalRoleChanged(jid, info, pres, isModerator)
-{
-
+function onLocalRoleChanged(jid, info, pres, isModerator) {
     console.info("My role changed, new role: " + info.role);
     onModeratorStatusChanged(isModerator);
     VideoLayout.showModeratorIndicator();
@@ -484,7 +537,6 @@ function onLocalRoleChanged(jid, info, pres, isModerator)
 }
 
 function onModeratorStatusChanged(isModerator) {
-
     Toolbar.showSipCallButton(isModerator);
     Toolbar.showRecordingButton(
         isModerator); //&&
@@ -538,17 +590,25 @@ function onMucMemberJoined(jid, id, displayName) {
         'connected',
         'notify.connected');
 
-    if(!config.startAudioMuted ||
+    if (!config.startAudioMuted ||
         config.startAudioMuted > APP.members.size())
         UIUtil.playSoundNotification('userJoined');
+
+    // Configure avatar
+    Avatar.setUserAvatar(jid, id);
+
     // Add Peer's container
-    VideoLayout.ensurePeerContainerExists(jid,id);
+    VideoLayout.ensurePeerContainerExists(jid);
 }
 
 function onMucPresenceStatus(jid, info) {
     VideoLayout.setPresenceStatus(Strophe.getResourceFromJid(jid), info.status);
 }
 
+function onPeerVideoTypeChanged(resourceJid, newVideoType) {
+    VideoLayout.onVideoTypeChanged(resourceJid, newVideoType);
+}
+
 function onMucRoleChanged(role, displayName) {
     VideoLayout.showModeratorIndicator();
 
@@ -557,8 +617,7 @@ function onMucRoleChanged(role, displayName) {
         if (!displayName) {
             messageKey = "notify.grantedToUnknown";
         }
-        else
-        {
+        else {
             messageKey = "notify.grantedTo";
             messageOptions = {to: displayName};
         }
@@ -574,7 +633,7 @@ function onAuthenticationRequired(intervalCallback) {
         roomName, intervalCallback, function () {
             Toolbar.authenticateClicked();
         });
-};
+}
 
 
 function onLastNChanged(oldValue, newValue) {
@@ -608,9 +667,7 @@ UI.inputDisplayNameHandler = function (value) {
     VideoLayout.inputDisplayNameHandler(value);
 };
 
-
-UI.getLargeVideoJid = function()
-{
+UI.getLargeVideoJid = function() {
     return VideoLayout.getLargeVideoJid();
 };
 
@@ -650,13 +707,11 @@ UI.generateRoomName = function() {
 };
 
 
-UI.connectionIndicatorShowMore = function(jid)
-{
+UI.connectionIndicatorShowMore = function(jid) {
     return VideoLayout.showMore(jid);
 };
 
-UI.showLoginPopup = function(callback)
-{
+UI.showLoginPopup = function(callback) {
     console.log('password is required');
     var message = '<h2 data-i18n="dialog.passwordRequired">';
     message += APP.translation.translateString(
@@ -680,7 +735,7 @@ UI.showLoginPopup = function(callback)
         null, null, ':input:first'
 
     );
-}
+};
 
 UI.checkForNicknameAndJoin = function () {
 
@@ -699,12 +754,12 @@ function dump(elem, filename) {
     elem = elem.parentNode;
     elem.download = filename || 'meetlog.json';
     elem.href = 'data:application/json;charset=utf-8,\n';
-    var data = APP.xmpp.populateData();
+    var data = APP.xmpp.getJingleLog();
     var metadata = {};
     metadata.time = new Date();
     metadata.url = window.location.href;
     metadata.ua = navigator.userAgent;
-    var log = APP.xmpp.getLogger();
+    var log = APP.xmpp.getXmppLog();
     if (log) {
         metadata.xmpp = log;
     }
@@ -718,10 +773,13 @@ UI.getRoomName = function () {
 };
 
 UI.setInitialMuteFromFocus = function (muteAudio, muteVideo) {
-    if(muteAudio || muteVideo) notifyForInitialMute();
-    if(muteAudio) UI.setAudioMuted(true);
-    if(muteVideo) UI.setVideoMute(true);
-}
+    if (muteAudio || muteVideo)
+        notifyForInitialMute();
+    if (muteAudio)
+        UI.setAudioMuted(true);
+    if (muteVideo)
+        UI.setVideoMute(true);
+};
 
 /**
  * Mutes/unmutes the local video.
@@ -742,47 +800,45 @@ UI.toggleAudio = function() {
  */
 UI.setAudioMuted = function (mute, earlyMute) {
     var audioMute = null;
-    if(earlyMute)
+    if (earlyMute)
         audioMute = function (mute, cb) {
             return APP.xmpp.sendAudioInfoPresence(mute, cb);
         };
     else
         audioMute = function (mute, cb) {
             return APP.xmpp.setAudioMute(mute, cb);
-        }
-    if(!audioMute(mute, function () {
-        VideoLayout.showLocalAudioIndicator(mute);
+        };
+    if (!audioMute(mute, function () {
+            VideoLayout.showLocalAudioIndicator(mute);
 
-        UIUtil.buttonClick("#mute", "icon-microphone icon-mic-disabled");
-    }))
-    {
+            UIUtil.buttonClick("#mute", "icon-microphone icon-mic-disabled");
+        })) {
         // We still click the button.
         UIUtil.buttonClick("#mute", "icon-microphone icon-mic-disabled");
         return;
     }
-
-}
+};
 
 UI.addListener = function (type, listener) {
     eventEmitter.on(type, listener);
-}
+};
 
 UI.clickOnVideo = function (videoNumber) {
     var remoteVideos = $(".videocontainer:not(#mixedstream)");
     if (remoteVideos.length > videoNumber) {
         remoteVideos[videoNumber].click();
     }
-}
+};
 
 //Used by torture
 UI.showToolbar = function () {
     return ToolbarToggler.showToolbar();
-}
+};
 
 //Used by torture
 UI.dockToolbar = function (isDock) {
     return ToolbarToggler.dockToolbar(isDock);
-}
+};
 
 UI.setVideoMuteButtonsState = function (mute) {
     var video = $('#video');
@@ -796,8 +852,14 @@ UI.setVideoMuteButtonsState = function (mute) {
         video.removeClass(muteClass);
         video.addClass(communicativeClass);
     }
-}
+};
 
+UI.userAvatarChanged = function (resourceJid, thumbUrl, contactListUrl) {
+    VideoLayout.userAvatarChanged(resourceJid, thumbUrl);
+    ContactList.userAvatarChanged(resourceJid, contactListUrl);
+    if(resourceJid === APP.xmpp.myResource())
+        SettingsMenu.changeAvatar(thumbUrl);
+};
 
 UI.setVideoMute = setVideoMute;
 

modules/UI/audio_levels/AudioLevels.js

@@ -1,15 +1,16 @@
+/* global APP, interfaceConfig, $, Strophe */
 var CanvasUtil = require("./CanvasUtils");
 
-var ASDrawContext = $('#activeSpeakerAudioLevel')[0].getContext('2d');
+var ASDrawContext = null;
 
 function initActiveSpeakerAudioLevels() {
     var ASRadius = interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE / 2;
     var ASCenter = (interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE + ASRadius) / 2;
 
-// Draw a circle.
+    // Draw a circle.
     ASDrawContext.arc(ASCenter, ASCenter, ASRadius, 0, 2 * Math.PI);
 
-// Add a shadow around the circle
+    // Add a shadow around the circle
     ASDrawContext.shadowColor = interfaceConfig.SHADOW_COLOR;
     ASDrawContext.shadowOffsetX = 0;
     ASDrawContext.shadowOffsetY = 0;
@@ -24,8 +25,9 @@ var AudioLevels = (function(my) {
     my.LOCAL_LEVEL = 'local';
 
     my.init = function () {
+        ASDrawContext = $('#activeSpeakerAudioLevel')[0].getContext('2d');
         initActiveSpeakerAudioLevels();
-    }
+    };
 
     /**
      * Updates the audio level canvas for the given peerJid. If the canvas
@@ -112,7 +114,7 @@ var AudioLevels = (function(my) {
             resourceJid = APP.xmpp.myResource();
         }
 
-        if(resourceJid  === largeVideoResourceJid) {
+        if(resourceJid === largeVideoResourceJid) {
             window.requestAnimationFrame(function () {
                 AudioLevels.updateActiveSpeakerAudioLevel(audioLevel);
             });
@@ -120,10 +122,9 @@ var AudioLevels = (function(my) {
     };
 
     my.updateActiveSpeakerAudioLevel = function(audioLevel) {
-        if($("#activeSpeaker").css("visibility") == "hidden")
+        if($("#activeSpeaker").css("visibility") == "hidden" || ASDrawContext === null)
             return;
 
-
         ASDrawContext.clearRect(0, 0, 300, 300);
         if(audioLevel == 0)
             return;
@@ -165,10 +166,9 @@ var AudioLevels = (function(my) {
              * error. Since audio levels are frequently updated, the errors have
              * been observed to pile into the console, strain the CPU.
              */
-            if (audioLevelCanvasOrig)
-            {
-                audioLevelCanvasCache[resourceJid]
-                    = CanvasUtil.cloneCanvas(audioLevelCanvasOrig);
+            if (audioLevelCanvasOrig) {
+                audioLevelCanvasCache[resourceJid] =
+                    CanvasUtil.cloneCanvas(audioLevelCanvasOrig);
             }
         }
 
@@ -183,15 +183,16 @@ var AudioLevels = (function(my) {
 
         var shadowLevel = getShadowLevel(audioLevel);
 
-        if (shadowLevel > 0)
+        if (shadowLevel > 0) {
             // drawContext, x, y, w, h, r, shadowColor, shadowLevel
-            CanvasUtil.drawRoundRectGlow(   drawContext,
-                interfaceConfig.CANVAS_EXTRA/2, interfaceConfig.CANVAS_EXTRA/2,
+            CanvasUtil.drawRoundRectGlow(drawContext,
+                interfaceConfig.CANVAS_EXTRA / 2, interfaceConfig.CANVAS_EXTRA / 2,
                 canvas.width - interfaceConfig.CANVAS_EXTRA,
                 canvas.height - interfaceConfig.CANVAS_EXTRA,
                 interfaceConfig.CANVAS_RADIUS,
                 interfaceConfig.SHADOW_COLOR,
                 shadowLevel);
+        }
     }
 
     /**
@@ -221,9 +222,8 @@ var AudioLevels = (function(my) {
      */
     function getVideoSpanId(resourceJid) {
         var videoSpanId = null;
-        if (resourceJid === AudioLevels.LOCAL_LEVEL
-                || (APP.xmpp.myResource() && resourceJid
-                    === APP.xmpp.myResource()))
+        if (resourceJid === AudioLevels.LOCAL_LEVEL ||
+            (APP.xmpp.myResource() && resourceJid === APP.xmpp.myResource()))
             videoSpanId = 'localVideoContainer';
         else
             videoSpanId = 'participant_' + resourceJid;
@@ -251,10 +251,10 @@ var AudioLevels = (function(my) {
 
         if (resized)
             Object.keys(audioLevelCanvasCache).forEach(function (resourceJid) {
-                audioLevelCanvasCache[resourceJid].width
-                    = width + interfaceConfig.CANVAS_EXTRA;
-                audioLevelCanvasCache[resourceJid].height
-                    = height + interfaceConfig.CANVAS_EXTRA;
+                audioLevelCanvasCache[resourceJid].width =
+                    width + interfaceConfig.CANVAS_EXTRA;
+                audioLevelCanvasCache[resourceJid].height =
+                    height + interfaceConfig.CANVAS_EXTRA;
             });
     });
 

modules/UI/authentication/Authentication.js

@@ -22,13 +22,13 @@ var Authentication = {
         var room = roomName.substr(0, roomName.indexOf('@'));
 
         var title
-            = APP.translation.generateTranslatonHTML("dialog.WaitingForHost");
+            = APP.translation.generateTranslationHTML("dialog.WaitingForHost");
         var msg
-            = APP.translation.generateTranslatonHTML(
+            = APP.translation.generateTranslationHTML(
                     "dialog.WaitForHostMsg", {room: room});
 
         var buttonTxt
-            = APP.translation.generateTranslatonHTML("dialog.IamHost");
+            = APP.translation.generateTranslationHTML("dialog.IamHost");
         var buttons = [];
         buttons.push({title: buttonTxt, value: "authNow"});
 
@@ -79,7 +79,7 @@ var Authentication = {
                     Moderator.allocateConferenceFocus(roomName, function () {
                         // If it's not "on the fly" authentication now join
                         // the conference room
-                        if (!APP.xmpp.getMUCJoined()) {
+                        if (!APP.xmpp.isMUCJoined()) {
                             APP.UI.checkForNicknameAndJoin();
                         }
                     });

modules/UI/authentication/LoginDialog.js

@@ -31,9 +31,9 @@ function Dialog(callback, obtainSession) {
         'type="password" data-i18n="[placeholder]dialog.userPassword"' +
         ' placeholder="user password">';
 
-    var okButton = APP.translation.generateTranslatonHTML("dialog.Ok");
+    var okButton = APP.translation.generateTranslationHTML("dialog.Ok");
 
-    var cancelButton = APP.translation.generateTranslatonHTML("dialog.Cancel");
+    var cancelButton = APP.translation.generateTranslationHTML("dialog.Cancel");
 
     var states = {
         login: {

modules/UI/avatar/Avatar.js

@@ -1,44 +1,6 @@
 var Settings = require("../../settings/Settings");
-var MediaStreamType = require("../../../service/RTC/MediaStreamTypes");
 
 var users = {};
-var activeSpeakerJid;
-
-function setVisibility(selector, show) {
-    if (selector && selector.length > 0) {
-        selector.css("visibility", show ? "visible" : "hidden");
-    }
-}
-
-function isUserMuted(jid) {
-    // XXX(gp) we may want to rename this method to something like
-    // isUserStreaming, for example.
-    if (jid != APP.xmpp.myJid()) {
-        var resource = Strophe.getResourceFromJid(jid);
-        if (!require("../videolayout/VideoLayout").isInLastN(resource)) {
-            return true;
-        }
-    }
-    else
-    {
-        var localVideo = APP.RTC.localVideo;
-        return (!localVideo || localVideo.isMuted());
-    }
-
-    if (!APP.RTC.remoteStreams[jid] || !APP.RTC.remoteStreams[jid][MediaStreamType.VIDEO_TYPE]) {
-        return null;
-    }
-    return APP.RTC.remoteStreams[jid][MediaStreamType.VIDEO_TYPE].muted;
-}
-
-function getGravatarUrl(id, size) {
-    if(id === APP.xmpp.myJid() || !id) {
-        id = Settings.getSettings().uid;
-    }
-    return 'https://www.gravatar.com/avatar/' +
-        MD5.hexdigest(id.trim().toLowerCase()) +
-        "?d=wavatar&size=" + (size || "30");
-}
 
 var Avatar = {
 
@@ -55,100 +17,48 @@ var Avatar = {
             }
             users[jid] = id;
         }
-        var thumbUrl = getGravatarUrl(users[jid] || jid, 100);
-        var contactListUrl = getGravatarUrl(users[jid] || jid);
+        var thumbUrl = this.getThumbUrl(jid);
+        var contactListUrl = this.getContactListUrl(jid);
         var resourceJid = Strophe.getResourceFromJid(jid);
-        var thumbnail = $('#participant_' + resourceJid);
-        var avatar = $('#avatar_' + resourceJid);
 
-        // set the avatar in the settings menu if it is local user and get the
-        // local video container
-        if (jid === APP.xmpp.myJid()) {
-            $('#avatar').get(0).src = thumbUrl;
-            thumbnail = $('#localVideoContainer');
-        }
-
-        // set the avatar in the contact list
-        var contact = $('#' + resourceJid + '>img');
-        if (contact && contact.length > 0) {
-            contact.get(0).src = contactListUrl;
-        }
-
-        // set the avatar in the thumbnail
-        if (avatar && avatar.length > 0) {
-            avatar[0].src = thumbUrl;
-        } else {
-            if (thumbnail && thumbnail.length > 0) {
-                avatar = document.createElement('img');
-                avatar.id = 'avatar_' + resourceJid;
-                avatar.className = 'userAvatar';
-                avatar.src = thumbUrl;
-                thumbnail.append(avatar);
-            }
-        }
-
-        //if the user is the current active speaker - update the active speaker
-        // avatar
-        if (jid === activeSpeakerJid) {
-            this.updateActiveSpeakerAvatarSrc(jid);
-        }
+        APP.UI.userAvatarChanged(resourceJid, thumbUrl, contactListUrl);
     },
-
     /**
-     * Hides or shows the user's avatar
-     * @param jid jid of the user
-     * @param show whether we should show the avatar or not
-     * video because there is no dominant speaker and no focused speaker
+     * Returns image URL for the avatar to be displayed on large video area
+     * where current active speaker is presented.
+     * @param jid full MUC jid of the user for whom we want to obtain avatar URL
      */
-    showUserAvatar: function (jid, show) {
-        if (users[jid]) {
-            var resourceJid = Strophe.getResourceFromJid(jid);
-            var video = $('#participant_' + resourceJid + '>video');
-            var avatar = $('#avatar_' + resourceJid);
-
-            if (jid === APP.xmpp.myJid()) {
-                video = $('#localVideoWrapper>video');
-            }
-            if (show === undefined || show === null) {
-                show = isUserMuted(jid);
-            }
-
-            //if the user is the currently focused, the dominant speaker or if
-            //there is no focused and no dominant speaker and the large video is
-            //currently shown
-            if (activeSpeakerJid === jid && require("../videolayout/LargeVideo").isLargeVideoOnTop()) {
-                setVisibility($("#largeVideo"), !show);
-                setVisibility($('#activeSpeaker'), show);
-                setVisibility(avatar, false);
-                setVisibility(video, false);
-            } else {
-                if (video && video.length > 0) {
-                    setVisibility(video, !show);
-                }
-                setVisibility(avatar, show);
-
-            }
-        }
+    getActiveSpeakerUrl: function (jid) {
+        return this.getGravatarUrl(jid, 100);
     },
-
     /**
-     * Updates the src of the active speaker avatar
-     * @param jid of the current active speaker
+     * Returns image URL for the avatar to be displayed on small video thumbnail
+     * @param jid full MUC jid of the user for whom we want to obtain avatar URL
      */
-    updateActiveSpeakerAvatarSrc: function (jid) {
-        var avatar = $("#activeSpeakerAvatar")[0];
-        var url = getGravatarUrl(users[jid],
-            interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE);
-        if (jid === activeSpeakerJid && avatar.src === url) {
-            return;
+    getThumbUrl: function (jid) {
+        return this.getGravatarUrl(jid, 100);
+    },
+    /**
+     * Returns the URL for the avatar to be displayed as contactlist item
+     * @param jid full MUC jid of the user for whom we want to obtain avatar URL
+     */
+    getContactListUrl: function (jid) {
+        return this.getGravatarUrl(jid, 30);
+    },
+    getGravatarUrl: function (jid, size) {
+        if (!jid) {
+            console.error("Get gravatar - jid is undefined");
+            return null;
         }
-        activeSpeakerJid = jid;
-        var isMuted = isUserMuted(jid);
-        if (jid && isMuted !== null) {
-            avatar.src = url;
-            setVisibility($("#largeVideo"), !isMuted);
-            Avatar.showUserAvatar(jid, isMuted);
+        var id = users[jid];
+        if (!id) {
+            console.warn(
+                "No avatar stored yet for " + jid + " - using JID as ID");
+            id = jid;
         }
+        return 'https://www.gravatar.com/avatar/' +
+            MD5.hexdigest(id.trim().toLowerCase()) +
+            "?d=wavatar&size=" + (size || "30");
     }
 
 };

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;');
+    etherpadIFrame = VideoLayout.createEtherpadIframe(
+            domain + etherpadName + options, function() {
 
-    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);
-    };
+                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 = {
 
 
@@ -58,13 +72,13 @@ var Prezi = {
             );
         }
         else {
-            var html = APP.translation.generateTranslatonHTML(
+            var html = APP.translation.generateTranslationHTML(
                 "dialog.sharePreziTitle");
-            var cancelButton = APP.translation.generateTranslatonHTML(
+            var cancelButton = APP.translation.generateTranslationHTML(
                 "dialog.Cancel");
-            var shareButton = APP.translation.generateTranslatonHTML(
+            var shareButton = APP.translation.generateTranslationHTML(
                 "dialog.Share");
-            var backButton = APP.translation.generateTranslatonHTML(
+            var backButton = APP.translation.generateTranslationHTML(
                 "dialog.Back");
             var buttons = [];
             var buttons1 = [];
@@ -75,7 +89,7 @@ var Prezi = {
             buttons.push({title: shareButton, value: true});
             // Back button
             buttons1.push({title: backButton, value: true});
-            var linkError = APP.translation.generateTranslatonHTML(
+            var linkError = APP.translation.generateTranslationHTML(
                 "dialog.preziLinkError");
             var defaultUrl = APP.translation.translateString("defaultPreziLink",
                 {url: "http://prezi.com/wz7vhjycl7e6/my-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/side_pannels/SidePanelToggler.js

@@ -1,3 +1,4 @@
+/* global require, $ */
 var Chat = require("./chat/Chat");
 var ContactList = require("./contactlist/ContactList");
 var Settings = require("./../../settings/Settings");

modules/UI/side_pannels/chat/Chat.js

@@ -1,4 +1,4 @@
-/* global $, Util, nickname:true */
+/* global APP, $, Util, nickname:true */
 var Replacement = require("./Replacement");
 var CommandsProcessor = require("./Commands");
 var ToolbarToggler = require("../../toolbars/ToolbarToggler");
@@ -102,8 +102,7 @@ function getCurrentTime(stamp) {
     return hour+':'+minute+':'+second;
 }
 
-function toggleSmileys()
-{
+function toggleSmileys() {
     var smileys = $('#smileysContainer');
     if(!smileys.is(':visible')) {
         smileys.show("slide", { direction: "down", duration: 300});
@@ -191,19 +190,18 @@ var Chat = (function (my) {
             }
         });
 
-        $('#usermsg').keydown(function (event) {
+        var usermsg = $('#usermsg');
+        usermsg.keydown(function (event) {
             if (event.keyCode === 13) {
                 event.preventDefault();
                 var value = this.value;
-                $('#usermsg').val('').trigger('autosize.resize');
+                usermsg.val('').trigger('autosize.resize');
                 this.focus();
                 var command = new CommandsProcessor(value);
-                if(command.isCommand())
-                {
+                if(command.isCommand()) {
                     command.processCommand();
                 }
-                else
-                {
+                else {
                     var message = UIUtil.escapeHtml(value);
                     APP.xmpp.sendChatMessage(message, NicknameHandler.getNickname());
                 }
@@ -214,7 +212,7 @@ var Chat = (function (my) {
             resizeChatConversation();
             Chat.scrollChatToBottom();
         };
-        $('#usermsg').autosize({callback: onTextAreaResize});
+        usermsg.autosize({callback: onTextAreaResize});
 
         $("#chatspace").bind("shown",
             function () {
@@ -228,7 +226,8 @@ var Chat = (function (my) {
     /**
      * Appends the given message to the chat conversation.
      */
-    my.updateChatConversation = function (from, displayName, message, myjid, stamp) {
+    my.updateChatConversation =
+        function (from, displayName, message, myjid, stamp) {
         var divClassName = '';
 
         if (APP.xmpp.myJid() === from) {
@@ -270,8 +269,7 @@ var Chat = (function (my) {
      * @param errorMessage the received error message.
      * @param originalText the original message.
      */
-    my.chatAddError = function(errorMessage, originalText)
-    {
+    my.chatAddError = function(errorMessage, originalText) {
         errorMessage = UIUtil.escapeHtml(errorMessage);
         originalText = UIUtil.escapeHtml(originalText);
 
@@ -288,23 +286,18 @@ var Chat = (function (my) {
      * Sets the subject to the UI
      * @param subject the subject
      */
-    my.chatSetSubject = function(subject)
-    {
-        if(subject)
+    my.chatSetSubject = function(subject) {
+        if (subject)
             subject = subject.trim();
         $('#subject').html(Replacement.linkify(UIUtil.escapeHtml(subject)));
-        if(subject === "")
-        {
+        if(subject === "") {
             $("#subject").css({display: "none"});
         }
-        else
-        {
+        else {
             $("#subject").css({display: "block"});
         }
     };
 
-
-
     /**
      * Sets the chat conversation mode.
      */

modules/UI/side_pannels/chat/Commands.js

@@ -1,3 +1,4 @@
+/* global APP, require */
 var UIUtil = require("../../util/UIUtil");
 
 /**
@@ -14,47 +15,39 @@ var commands = {
  * @param message the received message
  * @returns {string} the command
  */
-function getCommand(message)
-{
-    if(message)
-    {
-        for(var command in commands)
-        {
+function getCommand(message) {
+    if(message) {
+        for(var command in commands) {
             if(message.indexOf("/" + command) == 0)
                 return command;
         }
     }
     return "";
-};
+}
 
 /**
  * Processes the data for topic command.
  * @param commandArguments the arguments of the topic command.
  */
-function processTopic(commandArguments)
-{
+function processTopic(commandArguments) {
     var topic = UIUtil.escapeHtml(commandArguments);
     APP.xmpp.setSubject(topic);
 }
 
 /**
- * Constructs new CommandProccessor instance from a message that
+ * Constructs a new CommandProccessor instance from a message that
  * handles commands received via chat messages.
  * @param message the message
  * @constructor
  */
-function CommandsProcessor(message)
-{
-
-
+function CommandsProcessor(message) {
     var command = getCommand(message);
 
     /**
      * Returns the name of the command.
      * @returns {String} the command
      */
-    this.getCommand = function()
-    {
+    this.getCommand = function() {
         return command;
     };
 
@@ -65,8 +58,7 @@ function CommandsProcessor(message)
      * Returns the arguments of the command.
      * @returns {string}
      */
-    this.getArgument = function()
-    {
+    this.getArgument = function() {
         return messageArgument;
     };
 }
@@ -75,9 +67,8 @@ function CommandsProcessor(message)
  * Checks whether this instance is valid command or not.
  * @returns {boolean}
  */
-CommandsProcessor.prototype.isCommand = function()
-{
-    if(this.getCommand())
+CommandsProcessor.prototype.isCommand = function() {
+    if (this.getCommand())
         return true;
     return false;
 };
@@ -85,13 +76,11 @@ CommandsProcessor.prototype.isCommand = function()
 /**
  * Processes the command.
  */
-CommandsProcessor.prototype.processCommand = function()
-{
+CommandsProcessor.prototype.processCommand = function() {
     if(!this.isCommand())
         return;
 
     commands[this.getCommand()](this.getArgument());
-
 };
 
 module.exports = CommandsProcessor;

modules/UI/side_pannels/contactlist/ContactList.js

@@ -1,3 +1,5 @@
+/* global $, APP, Strophe */
+var Avatar = require('../../avatar/Avatar');
 
 var numberOfContacts = 0;
 var notificationInterval;
@@ -9,26 +11,28 @@ var notificationInterval;
  * left(-1)
  */
 function updateNumberOfParticipants(delta) {
-    //when the user is alone we don't show the number of participants
-    if(numberOfContacts === 0) {
+    numberOfContacts += delta;
+    if (numberOfContacts === 1) {
+        // when the user is alone we don't show the number of participants
         $("#numberOfParticipants").text('');
-        numberOfContacts += delta;
-    } else if(numberOfContacts !== 0 && !ContactList.isVisible()) {
-        ContactList.setVisualNotification(true);
-        numberOfContacts += delta;
+        ContactList.setVisualNotification(false);
+    } else if (numberOfContacts > 1) {
+        ContactList.setVisualNotification(!ContactList.isVisible());
         $("#numberOfParticipants").text(numberOfContacts);
+    } else {
+        console.error("Invalid number of participants: " + numberOfContacts);
     }
 }
 
 /**
  * Creates the avatar element.
  *
- * @return the newly created avatar element
+ * @return {object} the newly created avatar element
  */
-function createAvatar(id) {
+function createAvatar(jid) {
     var avatar = document.createElement('img');
     avatar.className = "icon-avatar avatar";
-    avatar.src = "https://www.gravatar.com/avatar/" + id + "?d=wavatar&size=30";
+    avatar.src = Avatar.getContactListUrl(jid);
 
     return avatar;
 }
@@ -42,8 +46,7 @@ function createDisplayNameParagraph(key, displayName) {
     var p = document.createElement('p');
     if(displayName)
         p.innerText = displayName;
-    else if(key)
-    {
+    else if(key) {
         p.setAttribute("data-i18n",key);
         p.innerText = APP.translation.translateString(key);
     }
@@ -61,7 +64,6 @@ function stopGlowing(glower) {
     }
 }
 
-
 /**
  * Contact list.
  */
@@ -80,24 +82,22 @@ var ContactList = {
      * Adds a contact for the given peerJid if such doesn't yet exist.
      *
      * @param peerJid the peerJid corresponding to the contact
-     * @param id the user's email or userId used to get the user's avatar
      */
-    ensureAddContact: function (peerJid, id) {
+    ensureAddContact: function (peerJid) {
         var resourceJid = Strophe.getResourceFromJid(peerJid);
 
         var contact = $('#contacts>li[id="' + resourceJid + '"]');
 
         if (!contact || contact.length <= 0)
-            ContactList.addContact(peerJid, id);
+            ContactList.addContact(peerJid);
     },
 
     /**
      * Adds a contact for the given peer jid.
      *
      * @param peerJid the jid of the contact to add
-     * @param id the email or userId of the user
      */
-    addContact: function (peerJid, id) {
+    addContact: function (peerJid) {
         var resourceJid = Strophe.getResourceFromJid(peerJid);
 
         var contactlist = $('#contacts');
@@ -111,7 +111,7 @@ var ContactList = {
             }
         };
 
-        newContact.appendChild(createAvatar(id));
+        newContact.appendChild(createAvatar(peerJid));
         newContact.appendChild(createDisplayNameParagraph("participant"));
 
         if (resourceJid === APP.xmpp.myResource()) {
@@ -179,6 +179,15 @@ var ContactList = {
 
         if (contactName && displayName && displayName.length > 0)
             contactName.html(displayName);
+    },
+
+    userAvatarChanged: function (resourceJid, contactListUrl) {
+        // set the avatar in the contact list
+        var contact = $('#' + resourceJid + '>img');
+        if (contact && contact.length > 0) {
+            contact.get(0).src = contactListUrl;
+        }
+
     }
 };
 

modules/UI/side_pannels/settings/SettingsMenu.js

@@ -1,15 +1,14 @@
+/* global APP, $ */
 var Avatar = require("../../avatar/Avatar");
 var Settings = require("./../../../settings/Settings");
 var UIUtil = require("../../util/UIUtil");
 var languages = require("../../../../service/translation/languages");
 
-function generateLanguagesSelectBox()
-{
+function generateLanguagesSelectBox() {
     var currentLang = APP.translation.getCurrentLanguage();
     var html = "<select id=\"languages_selectbox\">";
     var langArray = languages.getLanguages();
-    for(var i = 0; i < langArray.length; i++)
-    {
+    for(var i = 0; i < langArray.length; i++) {
         var lang = langArray[i];
         html += "<option ";
         if(lang === currentLang)
@@ -26,7 +25,8 @@ function generateLanguagesSelectBox()
 var SettingsMenu = {
 
     init: function () {
-        $("#startMutedOptions").before(generateLanguagesSelectBox());
+        var startMutedSelector = $("#startMutedOptions");
+        startMutedSelector.before(generateLanguagesSelectBox());
         APP.translation.translateElement($("#languages_selectbox"));
         $('#settingsmenu>input').keyup(function(event){
             if(event.keyCode === 13) {//enter
@@ -34,13 +34,11 @@ var SettingsMenu = {
             }
         });
 
-        if(APP.xmpp.isModerator())
-        {
-            $("#startMutedOptions").css("display", "block");
+        if (APP.xmpp.isModerator()) {
+            startMutedSelector.css("display", "block");
         }
-        else
-        {
-            $("#startMutedOptions").css("display", "none");
+        else {
+            startMutedSelector.css("display", "none");
         }
 
         $("#updateSettings").click(function () {
@@ -49,12 +47,10 @@ var SettingsMenu = {
     },
 
     onRoleChanged: function () {
-        if(APP.xmpp.isModerator())
-        {
+        if(APP.xmpp.isModerator()) {
             $("#startMutedOptions").css("display", "block");
         }
-        else
-        {
+        else {
             $("#startMutedOptions").css("display", "none");
         }
     },
@@ -102,6 +98,9 @@ var SettingsMenu = {
             peerJid === APP.xmpp.myJid()) {
             this.setDisplayName(newDisplayName);
         }
+    },
+    changeAvatar: function (thumbUrl) {
+        $('#avatar').get(0).src = thumbUrl;
     }
 };
 

modules/UI/toolbars/BottomToolbar.js

@@ -1,3 +1,4 @@
+/* global $ */
 var PanelToggler = require("../side_pannels/SidePanelToggler");
 
 var buttonHandlers = {

modules/UI/toolbars/Toolbar.js

@@ -1,5 +1,5 @@
-/* global APP,$, buttonClick, config, lockRoom,
-   setSharedKey, Util */
+/* global APP, $, buttonClick, config, lockRoom, interfaceConfig, setSharedKey,
+ Util */
 var messageHandler = require("../util/MessageHandler");
 var BottomToolbar = require("./BottomToolbar");
 var Prezi = require("../prezi/Prezi");
@@ -13,9 +13,9 @@ var AuthenticationEvents
 var roomUrl = null;
 var sharedKey = '';
 var UI = null;
+var recordingToaster = null;
 
-var buttonHandlers =
-{
+var buttonHandlers = {
     "toolbar_button_mute": function () {
         return APP.UI.toggleAudio();
     },
@@ -46,8 +46,7 @@ var buttonHandlers =
     "toolbar_button_desktopsharing": function () {
         return APP.desktopsharing.toggleScreenSharing();
     },
-    "toolbar_button_fullScreen": function()
-    {
+    "toolbar_button_fullScreen": function() {
         UIUtil.buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen");
         return Toolbar.toggleFullScreen();
     },
@@ -91,21 +90,19 @@ var buttonHandlers =
 
 function hangup() {
     APP.xmpp.disposeConference();
-    if(config.enableWelcomePage)
-    {
-        setTimeout(function()
-        {
+    if(config.enableWelcomePage) {
+        setTimeout(function() {
             window.localStorage.welcomePageDisabled = false;
             window.location.pathname = "/";
         }, 10000);
 
     }
 
-    var title = APP.translation.generateTranslatonHTML(
+    var title = APP.translation.generateTranslationHTML(
         "dialog.sessTerminated");
-    var msg = APP.translation.generateTranslatonHTML(
+    var msg = APP.translation.generateTranslationHTML(
         "dialog.hungUp");
-    var button = APP.translation.generateTranslatonHTML(
+    var button = APP.translation.generateTranslationHTML(
         "dialog.joinAgain");
     var buttons = [];
     buttons.push({title: button, value: true});
@@ -115,8 +112,7 @@ function hangup() {
         msg,
         true,
         buttons,
-        function(event, value, message, formVals)
-        {
+        function(event, value, message, formVals) {
             window.location.reload();
             return false;
         }
@@ -129,7 +125,7 @@ function hangup() {
 
 function toggleRecording() {
     APP.xmpp.toggleRecording(function (callback) {
-        var msg = APP.translation.generateTranslatonHTML(
+        var msg = APP.translation.generateTranslationHTML(
             "dialog.recordingToken");
         var token = APP.translation.translateString("dialog.token");
         APP.UI.messageHandler.openTwoButtonDialog(null, null, null,
@@ -152,7 +148,7 @@ function toggleRecording() {
             function () { },
             ':input:first'
         );
-    }, Toolbar.setRecordingButtonState, Toolbar.setRecordingButtonState);
+    }, Toolbar.setRecordingButtonState);
 }
 
 /**
@@ -165,13 +161,11 @@ function lockRoom(lock) {
 
     APP.xmpp.lockRoom(currentSharedKey, function (res) {
         // password is required
-        if (sharedKey)
-        {
+        if (sharedKey) {
             console.log('set room password');
             Toolbar.lockLockButton();
         }
-        else
-        {
+        else {
             console.log('removed room password');
             Toolbar.unlockLockButton();
         }
@@ -186,7 +180,7 @@ function lockRoom(lock) {
             "dialog.passwordNotSupported");
         Toolbar.setSharedKey('');
     });
-};
+}
 
 /**
  * Invite participants to conference.
@@ -224,17 +218,15 @@ function inviteParticipants() {
     window.open("mailto:?subject=" + subject + "&body=" + body, '_blank');
 }
 
-function dialpadButtonClicked()
-{
-    //TODO show the dialpad window
+function dialpadButtonClicked() {
+    //TODO show the dialpad box
 }
 
-function callSipButtonClicked()
-{
+function callSipButtonClicked() {
     var defaultNumber
         = config.defaultSipNumber ? config.defaultSipNumber : '';
 
-    var sipMsg = APP.translation.generateTranslatonHTML(
+    var sipMsg = APP.translation.generateTranslationHTML(
         "dialog.sipMsg");
     messageHandler.openTwoButtonDialog(null, null, null,
         '<h2>' + sipMsg + '</h2>' +
@@ -281,7 +273,7 @@ var Toolbar = (function (my) {
                 }
             }
         );
-    },
+    };
 
     /**
      * Sets shared key
@@ -298,7 +290,7 @@ var Toolbar = (function (my) {
             return;
         }
         // Get authentication URL
-        if (!APP.xmpp.getMUCJoined()) {
+        if (!APP.xmpp.isMUCJoined()) {
             APP.xmpp.getLoginUrl(UI.getRoomName(), function (url) {
                 // If conference has not been started yet - redirect to login page
                 window.location.href = url;
@@ -342,8 +334,7 @@ var Toolbar = (function (my) {
      * Disables and enables some of the buttons.
      */
     my.setupButtonsFromConfig = function () {
-        if (config.disablePrezi)
-        {
+        if (config.disablePrezi) {
             $("#prezi_button").css({display: "none"});
         }
     };
@@ -374,7 +365,7 @@ var Toolbar = (function (my) {
                         }
                     });
             } else {
-                var msg = APP.translation.generateTranslatonHTML(
+                var msg = APP.translation.generateTranslationHTML(
                     "dialog.passwordMsg");
                 var yourPassword = APP.translation.translateString(
                     "dialog.yourPassword");
@@ -444,11 +435,11 @@ var Toolbar = (function (my) {
      * FIXME: not used ?
      */
     my.openSettingsDialog = function () {
-        var settings1 = APP.translation.generateTranslatonHTML(
+        var settings1 = APP.translation.generateTranslationHTML(
             "dialog.settings1");
-        var settings2 = APP.translation.generateTranslatonHTML(
+        var settings2 = APP.translation.generateTranslationHTML(
             "dialog.settings2");
-        var settings3 = APP.translation.generateTranslatonHTML(
+        var settings3 = APP.translation.generateTranslationHTML(
             "dialog.settings3");
 
         var yourPassword = APP.translation.translateString(
@@ -558,14 +549,44 @@ var Toolbar = (function (my) {
     };
 
     // Sets the state of the recording button
-    my.setRecordingButtonState = function (isRecording) {
+    my.setRecordingButtonState = function (recordingState) {
         var selector = $('#recordButton');
-        if (isRecording) {
+
+        if (recordingState === 'on') {
             selector.removeClass("icon-recEnable");
             selector.addClass("icon-recEnable active");
-        } else {
+
+            $("#largeVideo").toggleClass("videoMessageFilter", true);
+            var recordOnKey = "recording.on";
+            $('#videoConnectionMessage').attr("data-i18n", recordOnKey);
+            $('#videoConnectionMessage').text(APP.translation.translateString(recordOnKey));
+
+            setTimeout(function(){
+                $("#largeVideo").toggleClass("videoMessageFilter", false);
+                $('#videoConnectionMessage').css({display: "none"});
+            }, 1500);
+
+            recordingToaster = messageHandler.notify(null, "recording.toaster", null,
+                null, null, {timeOut: 0, closeButton: null});
+        } else if (recordingState === 'off') {
             selector.removeClass("icon-recEnable active");
             selector.addClass("icon-recEnable");
+
+            $("#largeVideo").toggleClass("videoMessageFilter", false);
+            $('#videoConnectionMessage').css({display: "none"});
+
+            if (recordingToaster)
+                messageHandler.remove(recordingToaster);
+
+        } else if (recordingState === 'pending') {
+            selector.removeClass("icon-recEnable active");
+            selector.addClass("icon-recEnable");
+
+            $("#largeVideo").toggleClass("videoMessageFilter", true);
+            var recordPendingKey = "recording.pending";
+            $('#videoConnectionMessage').attr("data-i18n", recordPendingKey);
+            $('#videoConnectionMessage').text(APP.translation.translateString(recordPendingKey));
+            $('#videoConnectionMessage').css({display: "block"});
         }
     };
 
@@ -632,12 +653,9 @@ var Toolbar = (function (my) {
      */
     my.changeDesktopSharingButtonState = function (active) {
         var button = $("#desktopsharing > a");
-        if (active)
-        {
+        if (active) {
             button.addClass("glow");
-        }
-        else
-        {
+        } else {
             button.removeClass("glow");
         }
     };

modules/UI/toolbars/ToolbarToggler.js

@@ -1,4 +1,5 @@
-/* global $, interfaceConfig, Moderator, DesktopStreaming.showDesktopSharingButton */
+/* global APP, config, $, interfaceConfig, Moderator,
+ DesktopStreaming.showDesktopSharingButton */
 
 var toolbarTimeoutObject,
     toolbarTimeout = interfaceConfig.INITIAL_TOOLBAR_TIMEOUT;
@@ -81,7 +82,6 @@ var ToolbarToggler = {
         showDesktopSharingButton();
     },
 
-
     /**
      * Docks/undocks the toolbar.
      *
@@ -111,7 +111,6 @@ var ToolbarToggler = {
     },
 
     showDesktopSharingButton: showDesktopSharingButton
-
 };
 
 module.exports = ToolbarToggler;

modules/UI/util/JitsiPopover.js

@@ -1,3 +1,4 @@
+/* global $ */
 var JitsiPopover = (function () {
     /**
      * Constructs new JitsiPopover and attaches it to the element
@@ -47,21 +48,20 @@ var JitsiPopover = (function () {
     JitsiPopover.prototype.show = function () {
         this.createPopover();
         this.popoverShown = true;
-
     };
 
     /**
      * Hides the popover
      */
     JitsiPopover.prototype.hide = function () {
-        if(!this.elementIsHovered && !this.popoverIsHovered && this.popoverShown)
-        {
+        if(!this.elementIsHovered && !this.popoverIsHovered &&
+            this.popoverShown) {
             this.forceHide();
         }
     };
 
     /**
-     * Hides the popover
+     * Hides the popover.
      */
     JitsiPopover.prototype.forceHide = function () {
         $(".jitsipopover").remove();
@@ -69,7 +69,7 @@ var JitsiPopover = (function () {
     };
 
     /**
-     * Creates the popover html
+     * Creates the popover html.
      */
     JitsiPopover.prototype.createPopover = function () {
         $("body").append(this.template);
@@ -86,7 +86,7 @@ var JitsiPopover = (function () {
     };
 
     /**
-     * Refreshes the position of the popover
+     * Refreshes the position of the popover.
      */
     JitsiPopover.prototype.refreshPosition = function () {
         $(".jitsipopover").position({
@@ -95,10 +95,13 @@ var JitsiPopover = (function () {
             collision: "fit",
             of: this.element,
             using: function (position, elements) {
-                var calcLeft = elements.target.left - elements.element.left + elements.target.width/2;
-                $(".jitsipopover").css({top: position.top, left: position.left, display: "table"});
+                var calcLeft = elements.target.left - elements.element.left +
+                    elements.target.width/2;
+                $(".jitsipopover").css(
+                    {top: position.top, left: position.left, display: "table"});
                 $(".jitsipopover > .arrow").css({left: calcLeft});
-                $(".jitsipopover > .jitsiPopupmenuPadding").css({left: calcLeft - 50});
+                $(".jitsipopover > .jitsiPopupmenuPadding").css(
+                    {left: calcLeft - 50});
             }
         });
     };
@@ -116,8 +119,6 @@ var JitsiPopover = (function () {
     };
 
     return JitsiPopover;
-
-
 })();
 
 module.exports = JitsiPopover;

modules/UI/util/MessageHandler.js

@@ -4,33 +4,32 @@ var messageHandler = (function(my) {
     /**
      * Shows a message to the user.
      *
-     * @param titleString the title of the message
-     * @param messageString the text of the message
+     * @param titleKey the title of the message
+     * @param messageKey the text of the message
      */
     my.openMessageDialog = function(titleKey, messageKey) {
         var title = null;
-        if(titleKey)
-        {
-            title = APP.translation.generateTranslatonHTML(titleKey);
+        if(titleKey) {
+            title = APP.translation.generateTranslationHTML(titleKey);
         }
-        var message = APP.translation.generateTranslatonHTML(messageKey);
+        var message = APP.translation.generateTranslationHTML(messageKey);
         $.prompt(message,
-            {
-                title: title,
-                persistent: false
-            }
+            {title: title, persistent: false}
         );
     };
 
     /**
-     * Shows a message to the user with two buttons: first is given as a parameter and the second is Cancel.
+     * Shows a message to the user with two buttons: first is given as a
+     * parameter and the second is Cancel.
      *
      * @param titleString the title of the message
      * @param msgString the text of the message
-     * @param persistent boolean value which determines whether the message is persistent or not
+     * @param persistent boolean value which determines whether the message is
+     *        persistent or not
      * @param leftButton the fist button's text
      * @param submitFunction function to be called on submit
-     * @param loadedFunction function to be called after the prompt is fully loaded
+     * @param loadedFunction function to be called after the prompt is fully
+     *        loaded
      * @param closeFunction function to be called after the prompt is closed
      * @param focus optional focus selector or button index to be focused after
      *        the dialog is opened
@@ -39,24 +38,22 @@ var messageHandler = (function(my) {
      */
     my.openTwoButtonDialog = function(titleKey, titleString, msgKey, msgString,
         persistent, leftButtonKey, submitFunction, loadedFunction,
-        closeFunction, focus, defaultButton)
-    {
+        closeFunction, focus, defaultButton) {
         var buttons = [];
 
-        var leftButton = APP.translation.generateTranslatonHTML(leftButtonKey);
+        var leftButton = APP.translation.generateTranslationHTML(leftButtonKey);
         buttons.push({ title: leftButton, value: true});
 
         var cancelButton
-            = APP.translation.generateTranslatonHTML("dialog.Cancel");
+            = APP.translation.generateTranslationHTML("dialog.Cancel");
         buttons.push({title: cancelButton, value: false});
 
         var message = msgString, title = titleString;
-        if (titleKey)
-        {
-            title = APP.translation.generateTranslatonHTML(titleKey);
+        if (titleKey) {
+            title = APP.translation.generateTranslationHTML(titleKey);
         }
         if (msgKey) {
-            message = APP.translation.generateTranslatonHTML(msgKey);
+            message = APP.translation.generateTranslationHTML(msgKey);
         }
         $.prompt(message, {
             title: title,
@@ -75,11 +72,14 @@ var messageHandler = (function(my) {
      *
      * @param titleString the title of the message
      * @param msgString the text of the message
-     * @param persistent boolean value which determines whether the message is persistent or not
-     * @param buttons object with the buttons. The keys must be the name of the button and value is the value
-     * that will be passed to submitFunction
+     * @param persistent boolean value which determines whether the message is
+     *        persistent or not
+     * @param buttons object with the buttons. The keys must be the name of the
+     *        button and value is the value that will be passed to
+     *        submitFunction
      * @param submitFunction function to be called on submit
-     * @param loadedFunction function to be called after the prompt is fully loaded
+     * @param loadedFunction function to be called after the prompt is fully
+     *        loaded
      */
     my.openDialog = function (titleString, msgString, persistent, buttons,
                               submitFunction, loadedFunction) {
@@ -107,10 +107,9 @@ var messageHandler = (function(my) {
     /**
      * Shows a dialog with different states to the user.
      *
-     * @param statesObject object containing all the states of the dialog
+     * @param statesObject object containing all the states of the dialog.
      */
     my.openDialogWithStates = function (statesObject, options) {
-
         return new Impromptu(statesObject, options);
     };
 
@@ -124,7 +123,7 @@ var messageHandler = (function(my) {
      * @param onPopupClosed optional callback function called when popup window
      *        has been closed.
      *
-     * @returns popup window object if opened successfully or undefined
+     * @returns {object} popup window object if opened successfully or undefined
      *          in case we failed to open it(popup blocked)
      */
     my.openCenteredPopup = function (url, w, h, onPopupClosed) {
@@ -147,8 +146,8 @@ var messageHandler = (function(my) {
     /**
      * Shows a dialog prompting the user to send an error report.
      *
-     * @param titleString the title of the message
-     * @param msgString the text of the message
+     * @param titleKey the title of the message
+     * @param msgKey the text of the message
      * @param error the error that is being reported
      */
     my.openReportDialog = function(titleKey, msgKey, error) {
@@ -159,16 +158,15 @@ var messageHandler = (function(my) {
 
     /**
      *  Shows an error dialog to the user.
-     * @param title the title of the message
-     * @param message the text of the messafe
+     * @param titleKey the title of the message.
+     * @param msgKey the text of the message.
      */
     my.showError = function(titleKey, msgKey) {
 
-        if(!titleKey) {
+        if (!titleKey) {
             titleKey = "dialog.oops";
         }
-        if(!msgKey)
-        {
+        if (!msgKey) {
             msgKey = "dialog.defaultError";
         }
         messageHandler.openMessageDialog(titleKey, msgKey);
@@ -177,17 +175,14 @@ var messageHandler = (function(my) {
     my.notify = function(displayName, displayNameKey,
                          cls, messageKey, messageArguments, options) {
         var displayNameSpan = '<span class="nickname" ';
-        if(displayName)
-        {
+        if (displayName) {
             displayNameSpan += ">" + displayName;
-        }
-        else
-        {
+        } else {
             displayNameSpan += "data-i18n='" + displayNameKey +
                 "'>" + APP.translation.translateString(displayNameKey);
         }
         displayNameSpan += "</span>";
-        toastr.info(
+        return toastr.info(
             displayNameSpan + '<br>' +
             '<span class=' + cls + ' data-i18n="' + messageKey + '"' +
                 (messageArguments?
@@ -198,6 +193,14 @@ var messageHandler = (function(my) {
             '</span>', null, options);
     };
 
+    /**
+     * Removes the toaster.
+     * @param toasterElement
+     */
+    my.remove = function(toasterElement) {
+        toasterElement.remove();
+    };
+
     return my;
 }(messageHandler || {}));
 

modules/UI/util/NicknameHandler.js

@@ -3,7 +3,7 @@ var UIEvents = require("../../../service/UI/UIEvents");
 var nickname = null;
 var eventEmitter = null;
 
-var NickanameHandler = {
+var NicknameHandler = {
     init: function (emitter) {
         eventEmitter = emitter;
         var storedDisplayName = window.localStorage.displayname;
@@ -27,4 +27,4 @@ var NickanameHandler = {
     }
 };
 
-module.exports = NickanameHandler;
+module.exports = NicknameHandler;

modules/UI/util/UIUtil.js

@@ -1,3 +1,4 @@
+/* global $ */
 /**
  * Created by hristo on 12/22/14.
  */
@@ -61,7 +62,7 @@ module.exports = {
 
         for (var i = 0, n = pixels.length; i < n; i += 4) {
             var grayscale
-                = pixels[i] * .3 + pixels[i+1] * .59 + pixels[i+2] * .11;
+                = pixels[i] * 0.3 + pixels[i+1] * 0.59 + pixels[i+2] * 0.11;
             pixels[i  ] = grayscale;        // red
             pixels[i+1] = grayscale;        // green
             pixels[i+2] = grayscale;        // blue
@@ -78,6 +79,4 @@ module.exports = {
         element.setAttribute("data-html", true);
         element.setAttribute("data-container", "body");
     }
-
-
 };

modules/UI/videolayout/ConnectionIndicator.js

@@ -1,3 +1,4 @@
+/* global APP, $ */
 var JitsiPopover = require("../util/JitsiPopover");
 
 /**
@@ -5,8 +6,7 @@ var JitsiPopover = require("../util/JitsiPopover");
  * @param videoContainer the video container associated with the indicator.
  * @constructor
  */
-function ConnectionIndicator(videoContainer, jid)
-{
+function ConnectionIndicator(videoContainer, jid) {
     this.videoContainer = videoContainer;
     this.bandwidth = null;
     this.packetLoss = null;
@@ -37,20 +37,17 @@ ConnectionIndicator.connectionQualityValues = {
     0: "0px"//empty
 };
 
-ConnectionIndicator.getIP = function(value)
-{
+ConnectionIndicator.getIP = function(value) {
     return value.substring(0, value.lastIndexOf(":"));
 };
 
-ConnectionIndicator.getPort = function(value)
-{
+ConnectionIndicator.getPort = function(value) {
     return value.substring(value.lastIndexOf(":") + 1, value.length);
 };
 
 ConnectionIndicator.getStringFromArray = function (array) {
     var res = "";
-    for(var i = 0; i < array.length; i++)
-    {
+    for(var i = 0; i < array.length; i++) {
         res += (i === 0? "" : ", ") + array[i];
     }
     return res;
@@ -65,74 +62,60 @@ ConnectionIndicator.prototype.generateText = function () {
 
     var translate = APP.translation.translateString;
 
-    if(this.bitrate === null)
-    {
+    if(this.bitrate === null) {
         downloadBitrate = "N/A";
         uploadBitrate = "N/A";
     }
-    else
-    {
+    else {
         downloadBitrate =
             this.bitrate.download? this.bitrate.download + " Kbps" : "N/A";
         uploadBitrate =
             this.bitrate.upload? this.bitrate.upload + " Kbps" : "N/A";
     }
 
-    if(this.packetLoss === null)
-    {
+    if(this.packetLoss === null) {
         packetLoss = "N/A";
-    }
-    else
-    {
+    } else {
 
         packetLoss = "<span class='jitsipopover_green'>&darr;</span>" +
-            (this.packetLoss.download !== null? this.packetLoss.download : "N/A") +
+            (this.packetLoss.download !== null ?
+                this.packetLoss.download : "N/A") +
             "% <span class='jitsipopover_orange'>&uarr;</span>" +
-            (this.packetLoss.upload !== null? this.packetLoss.upload : "N/A") + "%";
+            (this.packetLoss.upload !== null? this.packetLoss.upload : "N/A") +
+            "%";
     }
 
     var resolutionValue = null;
-    if(this.resolution && this.jid != null)
-    {
+    if(this.resolution && this.jid != null) {
         var keys = Object.keys(this.resolution);
-        for(var ssrc in this.resolution)
-        {
+        for(var ssrc in this.resolution) {
             resolutionValue = this.resolution[ssrc];
         }
     }
 
-    if(this.jid === null)
-    {
+    if(this.jid === null) {
         resolution = "";
         if(this.resolution === null || !Object.keys(this.resolution) ||
-            Object.keys(this.resolution).length === 0)
-        {
+            Object.keys(this.resolution).length === 0) {
             resolution = "N/A";
-        }
-        else
-            for(i in this.resolution)
-            {
+        } else {
+            for (i in this.resolution) {
                 resolutionValue = this.resolution[i];
-                if(resolutionValue)
-                {
-                    if(resolutionValue.height &&
-                        resolutionValue.width)
-                    {
-                        resolution += (resolution === ""? "" : ", ") +
-                            resolutionValue.width + "x" +
-                            resolutionValue.height;
+                if (resolutionValue) {
+                    if (resolutionValue.height &&
+                        resolutionValue.width) {
+                        resolution += (resolution === "" ? "" : ", ") +
+                        resolutionValue.width + "x" +
+                        resolutionValue.height;
                     }
                 }
             }
-    }
-    else if(!resolutionValue ||
+        }
+    } else if(!resolutionValue ||
         !resolutionValue.height ||
-        !resolutionValue.width)
-    {
+        !resolutionValue.width) {
         resolution = "N/A";
-    }
-    else
-    {
+    } else {
         resolution = resolutionValue.width + "x" + resolutionValue.height;
     }
 
@@ -155,22 +138,20 @@ ConnectionIndicator.prototype.generateText = function () {
     if(this.videoContainer.videoSpanId == "localVideoContainer") {
         result += "<div class=\"jitsipopover_showmore\" " +
             "onclick = \"APP.UI.connectionIndicatorShowMore('" +
-            this.jid + "')\"  data-i18n='connectionindicator." +
+            // FIXME: we do not know local jid when this text is generated
+            //this.jid + "')\"  data-i18n='connectionindicator." +
+            "local')\"  data-i18n='connectionindicator." +
                 (this.showMoreValue ? "less" : "more") + "'>" +
             translate("connectionindicator." + (this.showMoreValue ? "less" : "more")) +
             "</div><br />";
     }
 
-    if(this.showMoreValue)
-    {
+    if (this.showMoreValue) {
         var downloadBandwidth, uploadBandwidth, transport;
-        if(this.bandwidth === null)
-        {
+        if (this.bandwidth === null) {
             downloadBandwidth = "N/A";
             uploadBandwidth = "N/A";
-        }
-        else
-        {
+        } else {
             downloadBandwidth = this.bandwidth.download?
                 this.bandwidth.download + " Kbps" :
                 "N/A";
@@ -179,45 +160,36 @@ ConnectionIndicator.prototype.generateText = function () {
                 "N/A";
         }
 
-        if(!this.transport || this.transport.length === 0)
-        {
+        if (!this.transport || this.transport.length === 0) {
             transport = "<tr>" +
                 "<td><span class='jitsipopover_blue' " +
                 "data-i18n='connectionindicator.address'>" +
                 translate("connectionindicator.address") + "</span></td>" +
                 "<td> N/A</td></tr>";
-        }
-        else
-        {
+        } else {
             var data = {remoteIP: [], localIP:[], remotePort:[], localPort:[]};
-            for(i = 0; i < this.transport.length; i++)
-            {
+            for(i = 0; i < this.transport.length; i++) {
                 var ip =  ConnectionIndicator.getIP(this.transport[i].ip);
                 var port = ConnectionIndicator.getPort(this.transport[i].ip);
                 var localIP =
                     ConnectionIndicator.getIP(this.transport[i].localip);
                 var localPort =
                     ConnectionIndicator.getPort(this.transport[i].localip);
-                if(data.remoteIP.indexOf(ip) == -1)
-                {
+                if(data.remoteIP.indexOf(ip) == -1) {
                     data.remoteIP.push(ip);
                 }
 
-                if(data.remotePort.indexOf(port) == -1)
-                {
+                if(data.remotePort.indexOf(port) == -1) {
                     data.remotePort.push(port);
                 }
 
-                if(data.localIP.indexOf(localIP) == -1)
-                {
+                if(data.localIP.indexOf(localIP) == -1) {
                     data.localIP.push(localIP);
                 }
 
-                if(data.localPort.indexOf(localPort) == -1)
-                {
+                if(data.localPort.indexOf(localPort) == -1) {
                     data.localPort.push(localPort);
                 }
-
             }
 
             var local_address_key = "connectionindicator.localaddress";
@@ -283,7 +255,6 @@ ConnectionIndicator.prototype.generateText = function () {
             uploadBandwidth + "</td></tr>";
 
         result += transport + "</table>";
-
     }
 
     return result;
@@ -298,11 +269,9 @@ ConnectionIndicator.prototype.showMore = function () {
 };
 
 
-function createIcon(classes)
-{
+function createIcon(classes) {
     var icon = document.createElement("span");
-    for(var i in classes)
-    {
+    for(var i in classes) {
         icon.classList.add(classes[i]);
     }
     icon.appendChild(
@@ -317,7 +286,8 @@ ConnectionIndicator.prototype.create = function () {
     this.connectionIndicatorContainer = document.createElement("div");
     this.connectionIndicatorContainer.className = "connectionindicator";
     this.connectionIndicatorContainer.style.display = "none";
-    this.videoContainer.container.appendChild(this.connectionIndicatorContainer);
+    this.videoContainer.container.appendChild(
+        this.connectionIndicatorContainer);
     this.popover = new JitsiPopover(
         $("#" + this.videoContainer.videoSpanId + " > .connectionindicator"),
         {content: "<div class=\"connection_info\" data-i18n='connectionindicator.na'>" +
@@ -328,17 +298,17 @@ ConnectionIndicator.prototype.create = function () {
         createIcon(["connection", "connection_empty"]));
     this.fullIcon = this.connectionIndicatorContainer.appendChild(
         createIcon(["connection", "connection_full"]));
-
 };
 
 /**
  * Removes the indicator
  */
-ConnectionIndicator.prototype.remove = function()
-{
-    this.connectionIndicatorContainer.remove();
+ConnectionIndicator.prototype.remove = function() {
+    if (this.connectionIndicatorContainer.parentNode) {
+        this.connectionIndicatorContainer.parentNode.removeChild(
+            this.connectionIndicatorContainer);
+    }
     this.popover.forceHide();
-
 };
 
 /**
@@ -347,16 +317,13 @@ ConnectionIndicator.prototype.remove = function()
  * @param object the statistics data.
  */
 ConnectionIndicator.prototype.updateConnectionQuality =
-function (percent, object) {
+    function (percent, object) {
 
-    if(percent === null)
-    {
+    if (percent === null) {
         this.connectionIndicatorContainer.style.display = "none";
         this.popover.forceHide();
         return;
-    }
-    else
-    {
+    } else {
         if(this.connectionIndicatorContainer.style.display == "none") {
             this.connectionIndicatorContainer.style.display = "block";
             this.videoContainer.updateIconPositions();
@@ -366,14 +333,11 @@ function (percent, object) {
     this.bitrate = object.bitrate;
     this.packetLoss = object.packetLoss;
     this.transport = object.transport;
-    if(object.resolution)
-    {
+    if (object.resolution) {
         this.resolution = object.resolution;
     }
-    for(var quality in ConnectionIndicator.connectionQualityValues)
-    {
-        if(percent >= quality)
-        {
+    for (var quality in ConnectionIndicator.connectionQualityValues) {
+        if (percent >= quality) {
             this.fullIcon.style.width =
                 ConnectionIndicator.connectionQualityValues[quality];
         }

modules/UI/videolayout/LargeVideo.js

@@ -1,19 +1,58 @@
+/* global $, APP, Strophe, interfaceConfig */
 var Avatar = require("../avatar/Avatar");
+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");
 
-var video = $('#largeVideo');
+// FIXME: With Temasys we have to re-select everytime
+//var video = $('#largeVideo');
 
 var currentVideoWidth = null;
 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;
-var oldSmallVideo = 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.
@@ -30,8 +69,7 @@ function positionVideo(video,
                        horizontalIndent,
                        verticalIndent,
                        animate) {
-    if(animate)
-    {
+    if (animate) {
         video.animate({
                 width: width,
                 height: height,
@@ -44,9 +82,7 @@ function positionVideo(video,
                 queue: false,
                 duration: 500
             });
-    }
-    else
-    {
+    } else {
         video.width(width);
         video.height(height);
         video.css({  top: verticalIndent + 'px',
@@ -57,7 +93,6 @@ function positionVideo(video,
 
 }
 
-
 /**
  * Returns an array of the video dimensions, so that it keeps it's aspect
  * ratio and fits available area with it's larger dimension. This method
@@ -176,9 +211,34 @@ function getCameraVideoSize(videoWidth,
     return [availableWidth, availableHeight];
 }
 
+/**
+ * Updates the src of the active speaker avatar
+ * @param jid of the current active speaker
+ */
+function updateActiveSpeakerAvatarSrc() {
+    var avatar = $("#activeSpeakerAvatar")[0];
+    var jid = currentSmallVideo.peerJid;
+    var url = Avatar.getActiveSpeakerUrl(jid);
+    if (avatar.src === url)
+        return;
+    if (jid) {
+        avatar.src = url;
+        currentSmallVideo.showAvatar();
+    }
+}
 
+/**
+ * Change the video source of the large video.
+ * @param isVisible
+ */
 function changeVideo(isVisible) {
-    Avatar.updateActiveSpeakerAvatarSrc(currentSmallVideo.peerJid);
+
+    if (!currentSmallVideo) {
+        console.error("Unable to change large video - no 'currentSmallVideo'");
+        return;
+    }
+
+    updateActiveSpeakerAvatarSrc();
 
     APP.RTC.setVideoSrc($('#largeVideo')[0], currentSmallVideo.getSrc());
 
@@ -188,59 +248,102 @@ function changeVideo(isVisible) {
     var flipX = currentSmallVideo.flipX;
 
     if (flipX && videoTransform !== 'scaleX(-1)') {
-        document.getElementById('largeVideo').style.webkitTransform
-            = "scaleX(-1)";
-    }
-    else if (!flipX && videoTransform === 'scaleX(-1)') {
-        document.getElementById('largeVideo').style.webkitTransform
-            = "none";
+        document.getElementById('largeVideo').style.webkitTransform =
+            "scaleX(-1)";
+    } else if (!flipX && videoTransform === 'scaleX(-1)') {
+        document.getElementById('largeVideo').style.webkitTransform =
+            "none";
     }
 
-    var isDesktop = APP.RTC.isVideoSrcDesktop(currentSmallVideo.peerJid);
+    var isDesktop = currentSmallVideo.getVideoType() === 'screen';
     // Change the way we'll be measuring and positioning large video
 
-    getVideoSize = isDesktop
-        ? getDesktopVideoSize
-        : getCameraVideoSize;
-    getVideoPosition = isDesktop
-        ? getDesktopVideoPosition
-        : getCameraVideoPosition;
+    getVideoSize = isDesktop ? getDesktopVideoSize : getCameraVideoSize;
+    getVideoPosition = isDesktop ? getDesktopVideoPosition :
+        getCameraVideoPosition;
 
 
     // Only if the large video is currently visible.
-    // Disable previous dominant speaker video.
-    if (oldSmallVideo) {
-        oldSmallVideo.enableDominantSpeaker(false);
-    }
-
-    // Enable new dominant speaker in the remote videos section.
-    if (currentSmallVideo) {
-        currentSmallVideo.enableDominantSpeaker(true);
-    }
-
     if (isVisible) {
-        // using "this" should be ok because we're called
-        // from within the fadeOut event.
-        $(this).fadeIn(300);
+        LargeVideo.VideoLayout.largeVideoUpdated(currentSmallVideo);
+
+        $('#largeVideo').fadeIn(300);
+    }
+}
+
+/**
+ * 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>' +
+            '<span id="videoConnectionMessage"></span>';
+    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(oldSmallVideo)
-        Avatar.showUserAvatar(oldSmallVideo.peerJid);
+    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
-        document.getElementById('largeVideo')
-            .addEventListener('loadedmetadata', function (e) {
-                currentVideoWidth = this.videoWidth;
-                currentVideoHeight = this.videoHeight;
-                self.position(currentVideoWidth, currentVideoHeight);
-            });
+        var largeVideo = $('#largeVideo')[0];
+        var onplaying = function (arg1, arg2, arg3) {
+            // re-select
+            if (RTCBrowserType.isTemasysPluginUsed())
+                largeVideo = $('#largeVideo')[0];
+            currentVideoWidth = largeVideo.videoWidth;
+            currentVideoHeight = largeVideo.videoHeight;
+            self.position(currentVideoWidth, currentVideoHeight);
+        };
+        largeVideo.onplaying = onplaying;
     },
     /**
      * Indicates if the large video is currently visible.
@@ -248,43 +351,52 @@ var LargeVideo = {
      * @return <tt>true</tt> if visible, <tt>false</tt> - otherwise
      */
     isLargeVideoVisible: function() {
-        return video.is(':visible');
+        return $('#largeVideo').is(':visible');
+    },
+    /**
+     * Returns <tt>true</tt> if the user is currently displayed on large video.
+     */
+    isCurrentlyOnLarge: function (resourceJid) {
+        return currentSmallVideo && resourceJid &&
+            currentSmallVideo.getResourceJid() === resourceJid;
     },
     /**
      * Updates the large video with the given new video source.
      */
-    updateLargeVideo: function(resourceJid, forceUpdate) {
-        console.log('hover in', resourceJid);
+    updateLargeVideo: function (resourceJid, forceUpdate) {
+        if(!isEnabled)
+            return;
         var newSmallVideo = this.VideoLayout.getSmallVideo(resourceJid);
+        console.log('hover in ' + resourceJid + ', video: ', newSmallVideo);
 
-        if ((currentSmallVideo && currentSmallVideo.resourceJid !== resourceJid)
-            || forceUpdate) {
+        if (!LargeVideo.isCurrentlyOnLarge(resourceJid) || forceUpdate) {
             $('#activeSpeaker').css('visibility', 'hidden');
 
-            if(currentSmallVideo) {
+            var oldSmallVideo = null;
+            if (currentSmallVideo) {
                 oldSmallVideo = currentSmallVideo;
-            } else {
-                oldSmallVideo = null;
             }
-
             currentSmallVideo = newSmallVideo;
-            var oldJid = null;
-            if(oldSmallVideo)
-                oldJid = oldSmallVideo.peerJid;
 
+            var oldJid = null;
+            if (oldSmallVideo)
+                oldJid = oldSmallVideo.peerJid;
             if (oldJid !== resourceJid) {
                 // we want the notification to trigger even if userJid is undefined,
                 // or null.
-                this.eventEmitter.emit(UIEvents.SELECTED_ENDPOINT,
-                    resourceJid);
+                this.eventEmitter.emit(UIEvents.SELECTED_ENDPOINT, resourceJid);
+            }
+            if (RTCBrowserType.isSafari()) {
+                // FIXME In Safari fadeOut works only for the first time
+                changeVideo(this.isLargeVideoVisible());
+            } else {
+                $('#largeVideo').fadeOut(300,
+                    changeVideo.bind($('#largeVideo'), this.isLargeVideoVisible()));
             }
-
-            video.fadeOut(300, changeVideo.bind(video, this.isLargeVideoVisible()));
         } else {
-            var jid = null;
-            if(currentSmallVideo)
-                jid = currentSmallVideo.peerJid;
-            Avatar.showUserAvatar(jid);
+            if (currentSmallVideo) {
+                currentSmallVideo.showAvatar();
+            }
         }
 
     },
@@ -293,6 +405,8 @@ var LargeVideo = {
      * Shows/hides the large video.
      */
     setLargeVideoVisible: function(isVisible) {
+        if(!isEnabled)
+            return;
         if (isVisible) {
             $('#largeVideo').css({visibility: 'visible'});
             $('.watermark').css({visibility: 'visible'});
@@ -307,15 +421,14 @@ var LargeVideo = {
                 currentSmallVideo.enableDominantSpeaker(false);
         }
     },
-    onVideoTypeChanged: function (jid) {
-        if(jid && currentSmallVideo && jid === currentSmallVideo.peerJid)
+    onVideoTypeChanged: function (resourceJid, newVideoType) {
+        if (!isEnabled)
+            return;
+        if (LargeVideo.isCurrentlyOnLarge(resourceJid))
         {
-            var isDesktop = APP.RTC.isVideoSrcDesktop(jid);
-            getVideoSize = isDesktop
-                ? getDesktopVideoSize
-                : getCameraVideoSize;
-            getVideoPosition = isDesktop
-                ? getDesktopVideoPosition
+            var isDesktop = newVideoType === 'screen';
+            getVideoSize = isDesktop ? getDesktopVideoSize : getCameraVideoSize;
+            getVideoPosition = isDesktop ? getDesktopVideoPosition
                 : getCameraVideoPosition;
             this.position(null, null);
         }
@@ -328,6 +441,8 @@ var LargeVideo = {
      */
     position: function (videoWidth, videoHeight,
                         videoSpaceWidth, videoSpaceHeight, animate) {
+        if(!isEnabled)
+            return;
         if(!videoSpaceWidth)
             videoSpaceWidth = $('#videospace').width();
         if(!videoSpaceHeight)
@@ -354,13 +469,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);
 
@@ -370,8 +481,7 @@ var LargeVideo = {
         var top = availableHeight / 2 - avatarSize / 4 * 3;
         $('#activeSpeaker').css('top', top);
 
-        if(animate)
-        {
+        if(animate) {
             $('#videospace').animate({
                     right: window.innerWidth - availableWidth,
                     width: availableWidth,
@@ -391,30 +501,176 @@ var LargeVideo = {
                     queue: false,
                     duration: 500
                 });
-
-
-        }
-        else
-        {
+        } else {
             $('#videospace').width(availableWidth);
             $('#videospace').height(availableHeight);
             $('#largeVideoContainer').width(availableWidth);
             $('#largeVideoContainer').height(availableHeight);
         }
         return [availableWidth, availableHeight];
-
     },
     resizeVideoAreaAnimated: function (isVisible, completeFunction) {
+        if(!isEnabled)
+            return;
         var size = this.resize(true, isVisible, completeFunction);
         this.position(null, null, size[0], size[1], true);
     },
     getResourceJid: function () {
-        if(!currentSmallVideo)
-            return null;
-        return currentSmallVideo.peerJid;
+        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 && 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);
+    },
+
+    /**
+     * Enables/disables the filter indicating a video problem to the user.
+     *
+     * @param enable <tt>true</tt> to enable, <tt>false</tt> to disable
+     */
+    enableVideoProblemFilter: function (enable) {
+        $("#largeVideo").toggleClass("videoProblemFilter", enable);
     }
-
-}
-
+};
 
 module.exports = LargeVideo;

modules/UI/videolayout/LocalVideo.js

@@ -1,17 +1,18 @@
+/* global $, interfaceConfig, APP */
 var SmallVideo = require("./SmallVideo");
 var ConnectionIndicator = require("./ConnectionIndicator");
 var NicknameHandler = require("../util/NicknameHandler");
 var UIUtil = require("../util/UIUtil");
 var LargeVideo = require("./LargeVideo");
+var RTCBrowserType = require("../../RTC/RTCBrowserType");
 
-function LocalVideo(VideoLayout)
-{
+function LocalVideo(VideoLayout) {
     this.videoSpanId = "localVideoContainer";
     this.container = $("#localVideoContainer").get(0);
     this.VideoLayout = VideoLayout;
     this.flipX = true;
+    this.isLocal = true;
     this.peerJid = null;
-    this.resourceJid = null;
 }
 
 LocalVideo.prototype = Object.create(SmallVideo.prototype);
@@ -20,7 +21,7 @@ LocalVideo.prototype.constructor = LocalVideo;
 /**
  * Creates the edit display name button.
  *
- * @returns the edit button
+ * @returns {object} the edit button
  */
 function createEditDisplayNameButton() {
     var editButton = document.createElement('a');
@@ -33,33 +34,31 @@ function createEditDisplayNameButton() {
     return editButton;
 }
 
-
 /**
  * Sets the display name for the given video span id.
  */
 LocalVideo.prototype.setDisplayName = function(displayName, key) {
-
     if (!this.container) {
         console.warn(
-                "Unable to set displayName - " + this.videoSpanId + " does not exist");
+                "Unable to set displayName - " + this.videoSpanId +
+                " does not exist");
         return;
     }
 
     var nameSpan = $('#' + this.videoSpanId + '>span.displayname');
-    var defaultLocalDisplayName = APP.translation.generateTranslatonHTML(
+    var defaultLocalDisplayName = APP.translation.generateTranslationHTML(
         interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME);
 
+    var meHTML;
     // If we already have a display name for this video.
     if (nameSpan.length > 0) {
-
         if (nameSpan.text() !== displayName) {
-            if (displayName && displayName.length > 0)
-            {
-                var meHTML = APP.translation.generateTranslatonHTML("me");
+            if (displayName && displayName.length > 0) {
+                meHTML = APP.translation.generateTranslationHTML("me");
                 $('#localDisplayName').html(displayName + ' (' + meHTML + ')');
-            }
-            else
+            } else {
                 $('#localDisplayName').html(defaultLocalDisplayName);
+            }
         }
     } else {
         var editButton = createEditDisplayNameButton();
@@ -70,7 +69,7 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
 
 
         if (displayName && displayName.length > 0) {
-            var meHTML = APP.translation.generateTranslatonHTML("me");
+            meHTML = APP.translation.generateTranslationHTML("me");
             nameSpan.innerHTML = displayName + meHTML;
         }
         else {
@@ -107,18 +106,19 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
         $('#localVideoContainer .displayname')
             .bind("click", function (e) {
 
+                var editDisplayName = $('#editDisplayName');
                 e.preventDefault();
                 e.stopPropagation();
                 $('#localDisplayName').hide();
-                $('#editDisplayName').show();
-                $('#editDisplayName').focus();
-                $('#editDisplayName').select();
+                editDisplayName.show();
+                editDisplayName.focus();
+                editDisplayName.select();
 
-                $('#editDisplayName').one("focusout", function (e) {
+                editDisplayName.one("focusout", function (e) {
                     self.VideoLayout.inputDisplayNameHandler(this.value);
                 });
 
-                $('#editDisplayName').on('keydown', function (e) {
+                editDisplayName.on('keydown', function (e) {
                     if (e.keyCode === 13) {
                         e.preventDefault();
                         self.VideoLayout.inputDisplayNameHandler(this.value);
@@ -126,74 +126,78 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
                 });
             });
     }
-}
+};
 
 LocalVideo.prototype.inputDisplayNameHandler = function (name) {
     NicknameHandler.setNickname(name);
 
-    if (!$('#localDisplayName').is(":visible")) {
-        if (NicknameHandler.getNickname())
-        {
-            var meHTML = APP.translation.generateTranslatonHTML("me");
-            $('#localDisplayName').html(NicknameHandler.getNickname() + " (" + meHTML + ")");
-        }
-        else
-        {
-            var defaultHTML = APP.translation.generateTranslatonHTML(
+    var localDisplayName = $('#localDisplayName');
+    if (!localDisplayName.is(":visible")) {
+        if (NicknameHandler.getNickname()) {
+            var meHTML = APP.translation.generateTranslationHTML("me");
+            localDisplayName.html(NicknameHandler.getNickname() + " (" +
+            meHTML + ")");
+        } else {
+            var defaultHTML = APP.translation.generateTranslationHTML(
                 interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME);
-            $('#localDisplayName')
-                .html(defaultHTML);
+            localDisplayName .html(defaultHTML);
         }
-        $('#localDisplayName').show();
+        localDisplayName.show();
     }
 
     $('#editDisplayName').hide();
-}
+};
 
-LocalVideo.prototype.createConnectionIndicator = function()
-{
+LocalVideo.prototype.createConnectionIndicator = function() {
     if(this.connectionIndicator)
         return;
 
-    this.connectionIndicator
-        = new ConnectionIndicator(this, null);
-}
+    this.connectionIndicator = new ConnectionIndicator(this, null);
+};
 
 LocalVideo.prototype.changeVideo = function (stream, isMuted) {
     var self = this;
 
     function localVideoClick(event) {
-        event.stopPropagation();
+        // FIXME: with Temasys plugin event arg is not an event, but
+        // the clicked object itself, so we have to skip this call
+        if (event.stopPropagation) {
+            event.stopPropagation();
+        }
         self.VideoLayout.handleVideoThumbClicked(
             false,
             APP.xmpp.myResource());
     }
 
-    $('#localVideoContainer').click(localVideoClick);
+    var localVideoContainerSelector = $('#localVideoContainer');
+    localVideoContainerSelector.off('click');
+    localVideoContainerSelector.on('click', localVideoClick);
 
     // Add hover handler
-    $('#localVideoContainer').hover(
+    localVideoContainerSelector.hover(
         function() {
             self.showDisplayName(true);
         },
         function() {
-            if (!LargeVideo.isLargeVideoVisible()
-                || APP.xmpp.myResource() !== LargeVideo.getResourceJid())
+            if (!LargeVideo.isLargeVideoVisible() ||
+                !LargeVideo.isCurrentlyOnLarge(self.getResourceJid())) {
                 self.showDisplayName(false);
+            }
         }
     );
 
-    if(isMuted)
-    {
+    if(isMuted) {
         APP.UI.setVideoMute(true);
         return;
     }
-    this.flipX = (stream.videoType == "screen")? false : true;
+    this.flipX = stream.videoType != "screen";
     var localVideo = document.createElement('video');
     localVideo.id = 'localVideo_' +
         APP.RTC.getStreamID(stream.getOriginalStream());
-    localVideo.autoplay = true;
-    localVideo.volume = 0; // is it required if audio is separated ?
+    if (!RTCBrowserType.isIExplorer()) {
+        localVideo.autoplay = true;
+        localVideo.volume = 0; // is it required if audio is separated ?
+    }
     localVideo.oncontextmenu = function () { return false; };
 
     var localVideoContainer = document.getElementById('localVideoWrapper');
@@ -203,7 +207,9 @@ LocalVideo.prototype.changeVideo = function (stream, isMuted) {
 
     // Add click handler to both video and video wrapper elements in case
     // there's no video.
-    localVideoSelector.click(localVideoClick);
+
+    // onclick has to be used with Temasys plugin
+    localVideo.onclick = localVideoClick;
 
     if (this.flipX) {
         localVideoSelector.addClass("flipVideoX");
@@ -214,14 +220,24 @@ LocalVideo.prototype.changeVideo = function (stream, isMuted) {
 
     // Add stream ended handler
     stream.getOriginalStream().onended = function () {
+        // We have to re-select after attach when Temasys plugin is used,
+        // because <video> element is replaced with <object>
+        localVideo = $('#' + localVideo.id)[0];
         localVideoContainer.removeChild(localVideo);
-        self.VideoLayout.updateRemovedVideo(APP.RTC.getVideoSrc(localVideo));
+        self.VideoLayout.updateRemovedVideo(APP.xmpp.myResource());
     };
-}
+};
 
 LocalVideo.prototype.joined = function (jid) {
     this.peerJid = jid;
-    this.resourceJid = Strophe.getResourceFromJid(jid);
-}
+};
+
+LocalVideo.prototype.getResourceJid = function () {
+    var myResource = APP.xmpp.myResource();
+    if (!myResource) {
+        console.error("Requested local resource before we're in the MUC");
+    }
+    return myResource;
+};
 
 module.exports = LocalVideo;

modules/UI/videolayout/RemoteVideo.js

@@ -1,11 +1,12 @@
+/* global $, APP, require, Strophe, interfaceConfig */
 var ConnectionIndicator = require("./ConnectionIndicator");
 var SmallVideo = require("./SmallVideo");
 var AudioLevels = require("../audio_levels/AudioLevels");
 var LargeVideo = require("./LargeVideo");
 var Avatar = require("../avatar/Avatar");
+var RTCBrowserType = require("../../RTC/RTCBrowserType");
 
-function RemoteVideo(peerJid, VideoLayout)
-{
+function RemoteVideo(peerJid, VideoLayout) {
     this.peerJid = peerJid;
     this.resourceJid = Strophe.getResourceFromJid(peerJid);
     this.videoSpanId = 'participant_' + this.resourceJid;
@@ -19,6 +20,7 @@ function RemoteVideo(peerJid, VideoLayout)
     nickfield.appendChild(document.createTextNode(this.resourceJid));
     this.container.appendChild(nickfield);
     this.flipX = false;
+    this.isLocal = false;
 }
 
 RemoteVideo.prototype = Object.create(SmallVideo.prototype);
@@ -54,8 +56,7 @@ RemoteVideo.prototype.addRemoteVideoMenu = function () {
 
     var popupmenuElement = document.createElement('ul');
     popupmenuElement.className = 'popupmenu';
-    popupmenuElement.id
-        = 'remote_popupmenu_' + this.resourceJid;
+    popupmenuElement.id = 'remote_popupmenu_' + this.getResourceJid();
     spanElement.appendChild(popupmenuElement);
 
     var muteMenuItem = document.createElement('li');
@@ -116,8 +117,9 @@ RemoteVideo.prototype.addRemoteVideoMenu = function () {
     var paddingSpan = document.createElement('span');
     paddingSpan.className = 'popupmenuPadding';
     popupmenuElement.appendChild(paddingSpan);
-    APP.translation.translateElement($("#" + popupmenuElement.id + " > li > a > div"));
-}
+    APP.translation.translateElement(
+        $("#" + popupmenuElement.id + " > li > a > div"));
+};
 
 
 /**
@@ -126,49 +128,76 @@ RemoteVideo.prototype.addRemoteVideoMenu = function () {
  *
  * @param stream the stream
  * @param isVideo <tt>true</tt> if given <tt>stream</tt> is a video one.
- * @param container
  */
-RemoteVideo.prototype.removeRemoteStreamElement = function (stream, isVideo, id) {
+RemoteVideo.prototype.removeRemoteStreamElement =
+    function (stream, isVideo, id) {
     if (!this.container)
         return false;
 
     var select = null;
-    var removedVideoSrc = null;
     if (isVideo) {
         select = $('#' + id);
-        removedVideoSrc = APP.RTC.getVideoSrc(select.get(0));
     }
     else
         select = $('#' + this.videoSpanId + '>audio');
 
-
-    // Mark video as removed to cancel waiting loop(if video is removed
-    // before has started)
-    select.removed = true;
     select.remove();
 
-    var audioCount = $('#' + this.videoSpanId + '>audio').length;
-    var videoCount = $('#' + this.videoSpanId + '>video').length;
+    console.info((isVideo ? "Video" : "Audio") +
+                 " removed " + this.getResourceJid(), select);
 
-    if (!audioCount && !videoCount) {
-        console.log("Remove whole user", this.videoSpanId);
-        if(this.connectionIndicator)
-            this.connectionIndicator.remove();
-        // Remove whole container
-        this.container.remove();
+    if (isVideo)
+        this.VideoLayout.updateRemovedVideo(this.getResourceJid());
+};
 
-        this.VideoLayout.resizeThumbnails();
+/**
+ * Removes RemoteVideo from the page.
+ */
+RemoteVideo.prototype.remove = function () {
+    console.log("Remove thumbnail", this.peerJid);
+    this.removeConnectionIndicator();
+    // Remove whole container
+    if (this.container.parentNode)
+        this.container.parentNode.removeChild(this.container);
+};
+
+RemoteVideo.prototype.waitForPlayback = function (sel, stream) {
+
+    var isVideo = stream.getVideoTracks().length > 0;
+    if (!isVideo || stream.id === 'mixedmslabel') {
+        return;
     }
 
-    if (removedVideoSrc)
-        this.VideoLayout.updateRemovedVideo(removedVideoSrc);
+    var self = this;
+    var resourceJid = this.getResourceJid();
+
+    // Register 'onplaying' listener to trigger 'videoactive' on VideoLayout
+    // when video playback starts
+    var onPlayingHandler = function () {
+        // FIXME: why do i have to do this for FF?
+        if (RTCBrowserType.isFirefox()) {
+            APP.RTC.attachMediaStream(sel, stream);
+        }
+        if (RTCBrowserType.isTemasysPluginUsed()) {
+            sel = self.VideoLayout.getPeerVideoSel(resourceJid);
+        }
+        self.VideoLayout.videoactive(sel, resourceJid);
+        sel[0].onplaying = null;
+        if (RTCBrowserType.isTemasysPluginUsed()) {
+            // 'currentTime' is used to check if the video has started
+            // and the value is not set by the plugin, so we do it
+            sel[0].currentTime = 1;
+        }
+    };
+    sel[0].onplaying = onPlayingHandler;
 };
 
 RemoteVideo.prototype.addRemoteStreamElement = function (sid, stream, thessrc) {
-    var isVideo = stream.getVideoTracks().length > 0;
-    if(!this.container)
+    if (!this.container)
         return;
 
+    var self = this;
+    var isVideo = stream.getVideoTracks().length > 0;
     var streamElement = SmallVideo.createStreamElement(sid, stream);
     var newElementId = streamElement.id;
 
@@ -178,15 +207,12 @@ RemoteVideo.prototype.addRemoteStreamElement = function (sid, stream, thessrc) {
     sel.hide();
 
     // If the container is currently visible we attach the stream.
-    if (!isVideo
-        || (this.container.offsetParent !== null && isVideo)) {
-        APP.RTC.attachMediaStream(sel, stream);
+    if (!isVideo || (this.container.offsetParent !== null && isVideo)) {
+        this.waitForPlayback(sel, stream);
 
-        if (isVideo)
-            this.waitForRemoteVideo(sel, thessrc, stream);
+        APP.RTC.attachMediaStream(sel, stream);
     }
 
-    var self = this;
     stream.onended = function () {
         console.log('stream ended', this);
 
@@ -194,23 +220,28 @@ RemoteVideo.prototype.addRemoteStreamElement = function (sid, stream, thessrc) {
 
     };
 
-    // Add click handler.
-    this.container.onclick = function (event) {
-        /*
-         * FIXME It turns out that videoThumb may not exist (if there is
-         * no actual video).
-         */
-        var videoThumb = $('#' + self.videoSpanId + '>video').get(0);
-        if (videoThumb) {
-            self.VideoLayout.handleVideoThumbClicked(
-                false,
-                self.resourceJid);
-        }
+    // Name of video element name is different for IE/Safari
+    var videoElem = APP.RTC.getVideoElementName();
 
-        event.stopPropagation();
-        event.preventDefault();
+    // Add click handler.
+    var onClickHandler = function (event) {
+
+        self.VideoLayout.handleVideoThumbClicked(false, self.getResourceJid());
+
+        // On IE we need to populate this handler on video <object>
+        // and it does not give event instance as an argument,
+        // so we check here for methods.
+        if (event.stopPropagation && event.preventDefault) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
         return false;
     };
+    this.container.onclick = onClickHandler;
+    // reselect
+    if (RTCBrowserType.isTemasysPluginUsed())
+        sel = $('#' + newElementId);
+    sel[0].onclick = onClickHandler;
 
     //FIXME
     // Add hover handler
@@ -219,40 +250,14 @@ RemoteVideo.prototype.addRemoteStreamElement = function (sid, stream, thessrc) {
             self.showDisplayName(true);
         },
         function() {
-            var videoSrc = null;
-            if ($('#' + self.videoSpanId + '>video')
-                && $('#' + self.videoSpanId + '>video').length > 0) {
-                videoSrc = APP.RTC.getVideoSrc($('#' + self.videoSpanId + '>video').get(0));
-            }
-
             // If the video has been "pinned" by the user we want to
             // keep the display name on place.
-            if (!LargeVideo.isLargeVideoVisible()
-                || videoSrc !== APP.RTC.getVideoSrc($('#largeVideo')[0]))
+            if (!LargeVideo.isLargeVideoVisible() ||
+                !LargeVideo.isCurrentlyOnLarge(self.getResourceJid()))
                 self.showDisplayName(false);
         }
     );
-}
-
-
-RemoteVideo.prototype.waitForRemoteVideo = function(selector, ssrc, stream) {
-    if (selector.removed || !selector.parent().is(":visible")) {
-        console.warn("Media removed before had started", selector);
-        return;
-    }
-
-    if (stream.id === 'mixedmslabel') return;
-
-    if (selector[0].currentTime > 0) {
-        APP.RTC.attachMediaStream(selector, stream); // FIXME: why do i have to do this for FF?
-        this.VideoLayout.videoactive(selector, this.resourceJid);
-    } else {
-        var self = this;
-        setTimeout(function () {
-            self.waitForRemoteVideo(selector, ssrc, stream);
-        }, 250);
-    }
-}
+},
 
 /**
  * Show/hide peer container for the given resourceJid.
@@ -270,7 +275,7 @@ RemoteVideo.prototype.showPeerContainer = function (state) {
             $(this.container).show();
         }
 
-        Avatar.showUserAvatar(this.peerJid, (state !== 'show'));
+        this.showAvatar(state !== 'show');
     }
     else if ($(this.container).is(':visible') && isHide)
     {
@@ -291,14 +296,14 @@ RemoteVideo.prototype.showPeerContainer = function (state) {
 };
 
 RemoteVideo.prototype.removeConnectionIndicator = function () {
-    if(this.connectionIndicator)
+    if (this.connectionIndicator)
         this.connectionIndicator.remove();
-}
+};
 
 RemoteVideo.prototype.hideConnectionIndicator = function () {
-    if(this.connectionIndicator)
+    if (this.connectionIndicator)
         this.connectionIndicator.hide();
-}
+};
 
 /**
  * Updates the remote video menu.
@@ -308,9 +313,7 @@ RemoteVideo.prototype.hideConnectionIndicator = function () {
  */
 RemoteVideo.prototype.updateRemoteVideoMenu = function (isMuted) {
     var muteMenuItem
-        = $('#remote_popupmenu_'
-        + this.resourceJid
-        + '>li>a.mutelink');
+        = $('#remote_popupmenu_' + this.getResourceJid() + '>li>a.mutelink');
 
     var mutedIndicator = "<i class='icon-mic-disabled'></i>";
 
@@ -326,7 +329,7 @@ RemoteVideo.prototype.updateRemoteVideoMenu = function (isMuted) {
             muteLink.className = 'mutelink';
         }
     }
-}
+};
 
 /**
  * Sets the display name for the given video span id.
@@ -334,8 +337,8 @@ RemoteVideo.prototype.updateRemoteVideoMenu = function (isMuted) {
 RemoteVideo.prototype.setDisplayName = function(displayName, key) {
 
     if (!this.container) {
-        console.warn(
-                "Unable to set displayName - " + this.videoSpanId + " does not exist");
+        console.warn( "Unable to set displayName - " + this.videoSpanId +
+                " does not exist");
         return;
     }
 
@@ -343,13 +346,11 @@ RemoteVideo.prototype.setDisplayName = function(displayName, key) {
 
     // If we already have a display name for this video.
     if (nameSpan.length > 0) {
-        if (displayName && displayName.length > 0)
-        {
+        if (displayName && displayName.length > 0) {
             $('#' + this.videoSpanId + '_name').html(displayName);
         }
-        else if (key && key.length > 0)
-        {
-            var nameHtml = APP.translation.generateTranslatonHTML(key);
+        else if (key && key.length > 0) {
+            var nameHtml = APP.translation.generateTranslationHTML(key);
             $('#' + this.videoSpanId + '_name').html(nameHtml);
         }
         else
@@ -362,17 +363,14 @@ RemoteVideo.prototype.setDisplayName = function(displayName, key) {
 
 
         if (displayName && displayName.length > 0) {
-
             nameSpan.innerText = displayName;
         }
         else
             nameSpan.innerText = interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME;
 
-
         nameSpan.id = this.videoSpanId + '_name';
-
     }
-}
+};
 
 /**
  * Removes remote video menu element from video element identified by
@@ -385,7 +383,14 @@ RemoteVideo.prototype.removeRemoteVideoMenu = function() {
     if (menuSpan.length) {
         menuSpan.remove();
     }
-}
+};
+
+RemoteVideo.prototype.getResourceJid = function () {
+    if (!this.resourceJid) {
+        console.error("Undefined resource jid");
+    }
+    return this.resourceJid;
+};
 
 RemoteVideo.createContainer = function (spanId) {
     var container = document.createElement('span');
@@ -395,4 +400,5 @@ RemoteVideo.createContainer = function (spanId) {
     return remotes.appendChild(container);
 };
 
+
 module.exports = RemoteVideo;

modules/UI/videolayout/SmallVideo.js

@@ -1,8 +1,18 @@
+/* global $, APP, require */
+var Avatar = require("../avatar/Avatar");
 var UIUtil = require("../util/UIUtil");
 var LargeVideo = require("./LargeVideo");
+var RTCBrowserType = require("../../RTC/RTCBrowserType");
 
-function SmallVideo(){
+function SmallVideo() {
     this.isMuted = false;
+    this.hasAvatar = false;
+}
+
+function setVisibility(selector, show) {
+    if (selector && selector.length > 0) {
+        selector.css("visibility", show ? "visible" : "hidden");
+    }
 }
 
 SmallVideo.prototype.showDisplayName = function(isShow) {
@@ -21,33 +31,48 @@ SmallVideo.prototype.setDeviceAvailabilityIcons = function (devices) {
     if(!this.container)
         return;
 
-    $("#" + this.videoSpanId + " > .noMic").remove();
-    $("#" + this.videoSpanId + " > .noVideo").remove();
-    if(!devices.audio)
-    {
+    var noMic = $("#" + this.videoSpanId + " > .noMic");
+    var noVideo =  $("#" + this.videoSpanId + " > .noVideo");
+
+    noMic.remove();
+    noVideo.remove();
+    if (!devices.audio) {
         this.container.appendChild(
-            document.createElement("div")).setAttribute("class","noMic");
+            document.createElement("div")).setAttribute("class", "noMic");
     }
 
-    if(!devices.video)
-    {
+    if (!devices.video) {
         this.container.appendChild(
-            document.createElement("div")).setAttribute("class","noVideo");
+            document.createElement("div")).setAttribute("class", "noVideo");
     }
 
-    if(!devices.audio && !devices.video)
-    {
-        $("#" + this.videoSpanId + " > .noMic").css("background-position", "75%");
-        $("#" + this.videoSpanId + " > .noVideo").css("background-position", "25%");
-        $("#" + this.videoSpanId + " > .noVideo").css("background-color", "transparent");
+    if (!devices.audio && !devices.video) {
+        noMic.css("background-position", "75%");
+        noVideo.css("background-position", "25%");
+        noVideo.css("background-color", "transparent");
     }
-}
+};
+
+/**
+ * Sets the type of the video displayed by this instance.
+ * @param videoType 'camera' or 'screen'
+ */
+SmallVideo.prototype.setVideoType = function (videoType) {
+    this.videoType = videoType;
+};
+
+/**
+ * Returns the type of the video displayed by this instance.
+ * @returns {String} 'camera', 'screen' or undefined.
+ */
+SmallVideo.prototype.getVideoType = function () {
+    return this.videoType;
+};
 
 /**
  * Shows the presence status message for the given video.
  */
 SmallVideo.prototype.setPresenceStatus = function (statusMsg) {
-
     if (!this.container) {
         // No container
         return;
@@ -78,18 +103,18 @@ SmallVideo.prototype.setPresenceStatus = function (statusMsg) {
 /**
  * Creates an audio or video stream element.
  */
-
 SmallVideo.createStreamElement = function (sid, stream) {
     var isVideo = stream.getVideoTracks().length > 0;
 
-    var element = isVideo
-        ? document.createElement('video')
+    var element = isVideo ? document.createElement('video')
         : document.createElement('audio');
-    var id = (isVideo ? 'remoteVideo_' : 'remoteAudio_')
-        + sid + '_' + APP.RTC.getStreamID(stream);
+    var id = (isVideo ? 'remoteVideo_' : 'remoteAudio_') + sid + '_' +
+        APP.RTC.getStreamID(stream);
 
     element.id = id;
-    element.autoplay = true;
+    if (!RTCBrowserType.isIExplorer()) {
+        element.autoplay = true;
+    }
     element.oncontextmenu = function () { return false; };
 
     return element;
@@ -104,12 +129,12 @@ SmallVideo.createStreamElement = function (sid, stream) {
 SmallVideo.prototype.updateStatsIndicator = function (percent, object) {
     if(this.connectionIndicator)
         this.connectionIndicator.updateConnectionQuality(percent, object);
-}
+};
 
 SmallVideo.prototype.hideIndicator = function () {
     if(this.connectionIndicator)
         this.connectionIndicator.hideIndicator();
-}
+};
 
 
 /**
@@ -119,7 +144,7 @@ SmallVideo.prototype.hideIndicator = function () {
 SmallVideo.prototype.showAudioIndicator = function(isMuted) {
     var audioMutedSpan = $('#' + this.videoSpanId + '>span.audioMuted');
 
-    if (isMuted === 'false') {
+    if (!isMuted) {
         if (audioMutedSpan.length > 0) {
             audioMutedSpan.popover('hide');
             audioMutedSpan.remove();
@@ -149,6 +174,8 @@ SmallVideo.prototype.showAudioIndicator = function(isMuted) {
  * Shows video muted indicator over small videos.
  */
 SmallVideo.prototype.showVideoIndicator = function(isMuted) {
+    this.showAvatar(isMuted);
+
     var videoMutedSpan = $('#' + this.videoSpanId + '>span.videoMuted');
 
     if (isMuted === false) {
@@ -178,16 +205,16 @@ SmallVideo.prototype.showVideoIndicator = function(isMuted) {
     }
 };
 
-SmallVideo.prototype.enableDominantSpeaker = function (isEnable)
-{
-    var displayName = this.resourceJid;
+SmallVideo.prototype.enableDominantSpeaker = function (isEnable) {
+    var resourceJid = this.getResourceJid();
+    var displayName = resourceJid;
     var nameSpan = $('#' + this.videoSpanId + '>span.displayname');
     if (nameSpan.length > 0)
         displayName = nameSpan.html();
 
     console.log("UI enable dominant speaker",
         displayName,
-        this.resourceJid,
+        resourceJid,
         isEnable);
 
 
@@ -195,40 +222,35 @@ SmallVideo.prototype.enableDominantSpeaker = function (isEnable)
         return;
     }
 
-    var video = $('#' + this.videoSpanId + '>video');
+    if (isEnable) {
+        this.showDisplayName(LargeVideo.getState() === "video");
 
-    if (video && video.length > 0) {
-        if (isEnable) {
-            this.showDisplayName(LargeVideo.isLargeVideoOnTop());
-
-            if (!this.container.classList.contains("dominantspeaker"))
-                this.container.classList.add("dominantspeaker");
-        }
-        else {
-            this.showDisplayName(false);
-
-            if (this.container.classList.contains("dominantspeaker"))
-                this.container.classList.remove("dominantspeaker");
-        }
+        if (!this.container.classList.contains("dominantspeaker"))
+            this.container.classList.add("dominantspeaker");
     }
+    else {
+        this.showDisplayName(false);
+
+        if (this.container.classList.contains("dominantspeaker"))
+            this.container.classList.remove("dominantspeaker");
+    }
+
+    this.showAvatar();
 };
 
 SmallVideo.prototype.updateIconPositions = function () {
     var audioMutedSpan = $('#' + this.videoSpanId + '>span.audioMuted');
     var connectionIndicator = $('#' + this.videoSpanId + '>div.connectionindicator');
     var videoMutedSpan = $('#' + this.videoSpanId + '>span.videoMuted');
-    if(connectionIndicator.length > 0
-        && connectionIndicator[0].style.display != "none") {
+    if(connectionIndicator.length > 0 &&
+        connectionIndicator[0].style.display != "none") {
         audioMutedSpan.css({right: "23px"});
         videoMutedSpan.css({right: ((audioMutedSpan.length > 0? 23 : 0) + 30) + "px"});
-    }
-    else
-    {
+    } else {
         audioMutedSpan.css({right: "0px"});
         videoMutedSpan.css({right: (audioMutedSpan.length > 0? 30 : 0) + "px"});
     }
-}
-
+};
 
 /**
  * Creates the element indicating the moderator(owner) of the conference.
@@ -260,26 +282,88 @@ SmallVideo.prototype.createModeratorIndicatorElement = function () {
 
     //translates text in focus indicators
     APP.translation.translateElement($('#' + this.videoSpanId + ' .focusindicator'));
-}
-
+};
 
 SmallVideo.prototype.getSrc = function () {
-    return APP.RTC.getVideoSrc($('#' + this.videoSpanId).find("video").get(0));
-}
+    var videoElement = APP.RTC.getVideoElementName();
+    return APP.RTC.getVideoSrc(
+            $('#' + this.videoSpanId).find(videoElement).get(0));
+};
 
-SmallVideo.prototype.focus = function(isFocused)
-{
+SmallVideo.prototype.focus = function(isFocused) {
     if(!isFocused) {
         this.container.classList.remove("videoContainerFocused");
-    }
-    else
-    {
+    } else {
         this.container.classList.add("videoContainerFocused");
     }
-}
+};
 
 SmallVideo.prototype.hasVideo = function () {
-    return $("#" + this.videoSpanId).find("video").length !== 0;
-}
+    return $("#" + this.videoSpanId).find(
+                APP.RTC.getVideoElementName()).length !== 0;
+};
+
+/**
+ * Hides or shows the user's avatar
+ * @param show whether we should show the avatar or not
+ * video because there is no dominant speaker and no focused speaker
+ */
+SmallVideo.prototype.showAvatar = function (show) {
+    if (!this.hasAvatar) {
+        if (this.peerJid) {
+            // Init avatar
+            this.avatarChanged(Avatar.getThumbUrl(this.peerJid));
+        } else {
+            console.error("Unable to init avatar - no peerjid", this);
+            return;
+        }
+    }
+
+    var resourceJid = this.getResourceJid();
+    var videoElem = APP.RTC.getVideoElementName();
+    var video = $('#' + this.videoSpanId).find(videoElem);
+    var avatar = $('#avatar_' + resourceJid);
+
+    if (show === undefined || show === null) {
+        if (!this.isLocal &&
+            !this.VideoLayout.isInLastN(resourceJid)) {
+            show = true;
+        } else {
+            // We want to show the avatar when the video is muted or not exists
+            // that is when 'true' or 'null' is returned
+            show = APP.RTC.isVideoMuted(this.peerJid) !== false;
+        }
+    }
+
+    if (LargeVideo.showAvatar(resourceJid, show)) {
+        setVisibility(avatar, false);
+        setVisibility(video, false);
+    } else {
+        if (video && video.length > 0) {
+            setVisibility(video, !show);
+        }
+        setVisibility(avatar, show);
+    }
+};
+
+SmallVideo.prototype.avatarChanged = function (thumbUrl) {
+    var thumbnail = $('#' + this.videoSpanId);
+    var resourceJid = this.getResourceJid();
+    var avatar = $('#avatar_' + resourceJid);
+    this.hasAvatar = true;
+
+    // set the avatar in the thumbnail
+    if (avatar && avatar.length > 0) {
+        avatar[0].src = thumbUrl;
+    } else {
+        if (thumbnail && thumbnail.length > 0) {
+            avatar = document.createElement('img');
+            avatar.id = 'avatar_' + resourceJid;
+            avatar.className = 'userAvatar';
+            avatar.src = thumbUrl;
+            thumbnail.append(avatar);
+        }
+    }
+};
 
 module.exports = SmallVideo;

modules/UI/videolayout/VideoLayout.js

@@ -1,18 +1,20 @@
+/* global config, APP, $, Strophe, require, interfaceConfig */
 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");
+
+var RTC = require("../../RTC/RTC");
+var RTCBrowserType = require('../../RTC/RTCBrowserType');
+
 var RemoteVideo = require("./RemoteVideo");
 var LargeVideo = require("./LargeVideo");
 var LocalVideo = require("./LocalVideo");
 
 var remoteVideos = {};
+var remoteVideoTypes = {};
 var localVideoThumbnail = null;
 
-
-
-
 var currentDominantSpeaker = null;
 var lastNCount = config.channelLastN;
 var localLastNCount = config.channelLastN;
@@ -22,7 +24,6 @@ var lastNPickupJid = null;
 
 var eventEmitter = null;
 
-
 /**
  * Currently focused video jid
  * @type {String}
@@ -33,14 +34,18 @@ 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) {
-        return lastNCount < 0 // lastN is disabled, return true
-            || (lastNCount > 0 && lastNEndpointsCache.length == 0) // lastNEndpoints cache not built yet, return true
-            || (lastNEndpointsCache && lastNEndpointsCache.indexOf(resource) !== -1);
+        return lastNCount < 0 || // lastN is disabled
+             // lastNEndpoints cache not built yet
+            (lastNCount > 0 && lastNEndpointsCache.length == 0) ||
+            (lastNEndpointsCache &&
+                lastNEndpointsCache.indexOf(resource) !== -1);
     };
 
     my.changeLocalStream = function (stream, isMuted) {
@@ -48,11 +53,15 @@ var VideoLayout = (function (my) {
     };
 
     my.changeLocalAudio = function(stream, isMuted) {
-        if(isMuted)
+        if (isMuted)
             APP.UI.setAudioMuted(true, true);
         APP.RTC.attachMediaStream($('#localAudio'), stream.getOriginalStream());
-        document.getElementById('localAudio').autoplay = true;
-        document.getElementById('localAudio').volume = 0;
+        var localAudio = document.getElementById('localAudio');
+        // Writing volume not allowed in IE
+        if (!RTCBrowserType.isIExplorer()) {
+            localAudio.autoplay = true;
+            localAudio.volume = 0;
+        }
     };
 
     my.changeLocalVideo = function(stream, isMuted) {
@@ -60,12 +69,16 @@ var VideoLayout = (function (my) {
         localVideoThumbnail.setDisplayName();
         localVideoThumbnail.createConnectionIndicator();
 
+        this.onVideoTypeChanged(APP.xmpp.myResource(), stream.videoType);
+
         AudioLevels.updateAudioLevelCanvas(null, VideoLayout);
 
         localVideoThumbnail.changeVideo(stream, isMuted);
 
-        LargeVideo.updateLargeVideo(APP.xmpp.myResource());
-
+        /* force update if we're currently being displayed */
+        if (LargeVideo.isCurrentlyOnLarge(APP.xmpp.myResource())) {
+            LargeVideo.updateLargeVideo(APP.xmpp.myResource(), true);
+        }
     };
 
     my.mucJoined = function () {
@@ -85,18 +98,13 @@ var VideoLayout = (function (my) {
         if(!devices)
             return;
 
-        if(!resourceJid)
-        {
+        if(!resourceJid) {
             localVideoThumbnail.setDeviceAvailabilityIcons(devices);
-        }
-        else
-        {
+        } else {
             if(remoteVideos[resourceJid])
                 remoteVideos[resourceJid].setDeviceAvailabilityIcons(devices);
         }
-
-
-    }
+    };
 
     /**
      * Checks if removed video is currently displayed and tries to display
@@ -104,52 +112,45 @@ var VideoLayout = (function (my) {
      * @param removedVideoSrc src stream identifier of the video.
      */
     my.updateRemovedVideo = function(resourceJid) {
+
         if (resourceJid === LargeVideo.getResourceJid()) {
-            // this is currently displayed as large
-            // pick the last visible video in the row
-            // if nobody else is left, this picks the local video
-            var pick
-                = $('#remoteVideos>span[id!="mixedstream"]:visible:last>video')
-                    .get(0);
-
-            if (!pick) {
-                console.info("Last visible video no longer exists");
-                pick = $('#remoteVideos>span[id!="mixedstream"]>video').get(0);
-
-                if (!pick || !APP.RTC.getVideoSrc(pick)) {
-                    // Try local video
-                    console.info("Fallback to local video...");
-                    pick = $('#remoteVideos>span>span>video').get(0);
-                }
-            }
-
-            // mute if localvideo
-            if (pick) {
-                var container = pick.parentNode;
+            var newResourceJid;
+            // We'll show user's avatar if he is the dominant speaker or if
+            // his video thumbnail is pinned
+            if (remoteVideos[resourceJid] &&
+                resourceJid === focusedVideoResourceJid ||
+                resourceJid === currentDominantSpeaker) {
+                newResourceJid = resourceJid;
             } else {
-                console.warn("Failed to elect large video");
-                container = $('#remoteVideos>span[id!="mixedstream"]:visible:last').get(0);
-
+                // Otherwise select last visible video
+                newResourceJid = this.electLastVisibleVideo();
             }
-
-            var jid = null;
-            if(container)
-            {
-                if(container.id == "localVideoWrapper")
-                {
-                    jid = APP.xmpp.myResource();
-                }
-                else
-                {
-                    jid = VideoLayout.getPeerContainerResourceJid(container);
-                }
-            }
-            else
-                return;
-
-            LargeVideo.updateLargeVideo(jid);
+            LargeVideo.updateLargeVideo(newResourceJid);
         }
     };
+
+    my.electLastVisibleVideo = function() {
+        // pick the last visible video in the row
+        // if nobody else is left, this picks the local video
+        var jid;
+        var videoElem = RTC.getVideoElementName();
+        var pick = $('#remoteVideos>span[id!="mixedstream"]:visible:last>' + videoElem);
+        if (pick.length && APP.RTC.getVideoSrc(pick[0])) {
+            jid = VideoLayout.getPeerContainerResourceJid(pick[0].parentNode);
+        } else {
+            console.info("Last visible video no longer exists");
+            pick = $('#remoteVideos>span[id!="mixedstream"]>' + videoElem);
+            if (pick.length && APP.RTC.getVideoSrc(pick[0])) {
+                jid = VideoLayout.getPeerContainerResourceJid(pick[0].parentNode);
+            } else {
+                // Try local video
+                console.info("Fallback to local video...");
+                jid = APP.xmpp.myResource();
+            }
+        }
+        console.info("electLastVisibleVideo: " + jid);
+        return jid;
+    };
     
     my.onRemoteStreamAdded = function (stream) {
         if (stream.peerjid) {
@@ -167,6 +168,26 @@ var VideoLayout = (function (my) {
         return LargeVideo.getResourceJid();
     };
 
+    /**
+     * Called when large video update is finished
+     * @param currentSmallVideo small video currently displayed on large video
+     */
+    my.largeVideoUpdated = function (currentSmallVideo) {
+        // Makes sure that dominant speaker UI
+        // is enabled only on current small video
+        localVideoThumbnail.enableDominantSpeaker(
+            localVideoThumbnail === currentSmallVideo);
+        Object.keys(remoteVideos).forEach(
+            function (resourceJid) {
+                var remoteVideo = remoteVideos[resourceJid];
+                if (remoteVideo) {
+                    remoteVideo.enableDominantSpeaker(
+                        remoteVideo === currentSmallVideo);
+                }
+            }
+        );
+    };
+
     my.handleVideoThumbClicked = function(noPinnedEndpointChangedEvent,
                                           resourceJid) {
         if(focusedVideoResourceJid) {
@@ -182,8 +203,7 @@ var VideoLayout = (function (my) {
             focusedVideoResourceJid = null;
             // Enable the currently set dominant speaker.
             if (currentDominantSpeaker) {
-                if(smallVideo && smallVideo.hasVideo())
-                {
+                if(smallVideo && smallVideo.hasVideo()) {
                     LargeVideo.updateLargeVideo(currentDominantSpeaker);
                 }
             }
@@ -194,13 +214,11 @@ var VideoLayout = (function (my) {
             return;
         }
 
-
         // Lock new video
         focusedVideoResourceJid = resourceJid;
 
         // Update focused/pinned interface.
-        if (resourceJid)
-        {
+        if (resourceJid) {
             if(smallVideo)
                 smallVideo.focus(true);
 
@@ -209,21 +227,17 @@ var VideoLayout = (function (my) {
             }
         }
 
-        if (LargeVideo.getResourceJid() === resourceJid &&
-            LargeVideo.isLargeVideoOnTop()) {
-            return;
-        }
-
-        // 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);
 
-        $('audio').each(function (idx, el) {
-            el.volume = 0;
-            el.volume = 1;
-        });
+        // Writing volume not allowed in IE
+        if (!RTCBrowserType.isIExplorer()) {
+            $('audio').each(function (idx, el) {
+                el.volume = 0;
+                el.volume = 1;
+            });
+        }
     };
 
 
@@ -232,26 +246,30 @@ var VideoLayout = (function (my) {
      * in the document and creates it eventually.
      * 
      * @param peerJid peer Jid to check.
-     * @param userId user email or id for setting the avatar
      * 
      * @return Returns <tt>true</tt> if the peer container exists,
      * <tt>false</tt> - otherwise
      */
-    my.ensurePeerContainerExists = function(peerJid, userId) {
-        ContactList.ensureAddContact(peerJid, userId);
+    my.ensurePeerContainerExists = function(peerJid) {
+        ContactList.ensureAddContact(peerJid);
 
         var resourceJid = Strophe.getResourceFromJid(peerJid);
 
-        if(!remoteVideos[resourceJid])
-        {
-            remoteVideos[resourceJid] = new RemoteVideo(peerJid, VideoLayout);
-            Avatar.setUserAvatar(peerJid, userId);
+        if (!remoteVideos[resourceJid]) {
+
+            var remoteVideo = new RemoteVideo(peerJid, VideoLayout);
+            remoteVideos[resourceJid] = remoteVideo;
+
+            var videoType = remoteVideoTypes[resourceJid];
+            if (videoType) {
+                remoteVideo.setVideoType(videoType);
+            }
 
             // In case this is not currently in the last n we don't show it.
-            if (localLastNCount
-                && localLastNCount > 0
-                && $('#remoteVideos>span').length >= localLastNCount + 2) {
-                remoteVideos[resourceJid].showPeerContainer('hide');
+            if (localLastNCount &&
+                localLastNCount > 0 &&
+                $('#remoteVideos>span').length >= localLastNCount + 2) {
+                remoteVideo.showPeerContainer('hide');
             }
             else
                 VideoLayout.resizeThumbnails();
@@ -264,6 +282,9 @@ var VideoLayout = (function (my) {
     };
 
     my.videoactive = function (videoelem, resourceJid) {
+
+        console.info(resourceJid + " video is now active");
+
         videoelem.show();
         VideoLayout.resizeThumbnails();
 
@@ -271,13 +292,14 @@ var VideoLayout = (function (my) {
         // current dominant, focused speaker or prezi playing or update it to
         // the current dominant speaker.
         if ((!focusedVideoResourceJid &&
-            !VideoLayout.getDominantSpeakerResourceJid() &&
+            !currentDominantSpeaker &&
             !require("../prezi/Prezi").isPresentationVisible()) ||
+            focusedVideoResourceJid === resourceJid ||
             (resourceJid &&
-                VideoLayout.getDominantSpeakerResourceJid() === resourceJid)) {
+                currentDominantSpeaker === resourceJid)) {
             LargeVideo.updateLargeVideo(resourceJid, true);
         }
-    }
+    };
 
     /**
      * Shows the presence status message for the given video.
@@ -306,13 +328,10 @@ var VideoLayout = (function (my) {
             }
 
             var resourceJid = Strophe.getResourceFromJid(jid);
-
             var member = members[jid];
 
             if (member.role === 'moderator') {
-
                 remoteVideos[resourceJid].removeRemoteVideoMenu();
-
                 remoteVideos[resourceJid].createModeratorIndicatorElement();
             } else if (isModerator) {
                 // We are moderator, but user is not - add menu
@@ -328,7 +347,7 @@ var VideoLayout = (function (my) {
      * @param {boolean} isMuted
      */
     my.showLocalAudioIndicator = function(isMuted) {
-        localVideoThumbnail.showAudioIndicator(isMuted.toString());
+        localVideoThumbnail.showAudioIndicator(isMuted);
     };
 
     /**
@@ -352,8 +371,7 @@ var VideoLayout = (function (my) {
 
         $('.userAvatar').css('left', (width - height) / 2);
 
-        if(animate)
-        {
+        if(animate) {
             $('#remoteVideos').animate({
                     height: height
                 },
@@ -377,43 +395,17 @@ var VideoLayout = (function (my) {
                     }
                 });
 
-        }
-        else
-        {
+        } else {
             // size videos so that while keeping AR and max height, we have a
             // nice fit
             $('#remoteVideos').height(height);
             $('#remoteVideos>span').width(width);
             $('#remoteVideos>span').height(height);
 
-
             $(document).trigger("remotevideo.resized", [width, height]);
         }
     };
 
-    /**
-     * Enables the dominant speaker UI.
-     *
-     * @param resourceJid the jid indicating the video element to
-     * activate/deactivate
-     * @param isEnable indicates if the dominant speaker should be enabled or
-     * disabled
-     */
-    my.enableDominantSpeaker = function(resourceJid, isEnable) {
-
-        if (resourceJid
-                === APP.xmpp.myResource()) {
-            localVideoThumbnail.enableDominantSpeaker(isEnable);
-        }
-        else {
-            remoteVideos[resourceJid].enableDominantSpeaker(isEnable);
-        }
-
-
-        Avatar.showUserAvatar(
-            APP.xmpp.findJidFromResource(resourceJid));
-    };
-
     /**
      * Calculates the thumbnail size.
      *
@@ -447,13 +439,6 @@ var VideoLayout = (function (my) {
        return [availableWidth, availableHeight];
    };
 
-    /**
-     * Returns the current dominant speaker resource jid.
-     */
-    my.getDominantSpeakerResourceJid = function () {
-        return currentDominantSpeaker;
-    };
-
     /**
      * Returns the corresponding resource jid to the given peer container
      * DOM element.
@@ -468,6 +453,11 @@ var VideoLayout = (function (my) {
             return containerElement.id.substring(i + 12); 
     };
 
+    my.getPeerVideoSel = function (peerResourceJid) {
+        return $('#participant_'  + peerResourceJid +
+                 '>' + APP.RTC.getVideoElementName());
+    };
+
     /**
      * On contact list item clicked.
      */
@@ -476,39 +466,39 @@ var VideoLayout = (function (my) {
             return;
         }
 
+        if (jid === APP.xmpp.myJid()) {
+            $("#localVideoContainer").click();
+            return;
+        }
+
         var resource = Strophe.getResourceFromJid(jid);
-        var videoContainer = $("#participant_" + resource);
-        if (videoContainer.length > 0) {
-            var videoThumb = $('video', videoContainer).get(0);
+        var videoSel = VideoLayout.getPeerVideoSel(resource);
+        if (videoSel.length > 0) {
+            var videoThumb = videoSel[0];
             // It is not always the case that a videoThumb exists (if there is
             // no actual video).
-            if (videoThumb) {
-                if (videoThumb.src && videoThumb.src != '') {
+            if (RTC.getVideoSrc(videoThumb)) {
 
-                    // We have a video src, great! Let's update the large video
-                    // now.
+                // We have a video src, great! Let's update the large video
+                // now.
+                VideoLayout.handleVideoThumbClicked(
+                    false,
+                    Strophe.getResourceFromJid(jid));
+            } else {
 
-                    VideoLayout.handleVideoThumbClicked(
-                        false,
-                        Strophe.getResourceFromJid(jid));
-                } else {
+                // If we don't have a video src for jid, there's absolutely
+                // no point in calling handleVideoThumbClicked; Quite
+                // simply, it won't work because it needs an src to attach
+                // to the large video.
+                //
+                // Instead, we trigger the pinned endpoint changed event to
+                // let the bridge adjust its lastN set for myjid and store
+                // the pinned user in the lastNPickupJid variable to be
+                // picked up later by the lastN changed event handler.
 
-                    // If we don't have a video src for jid, there's absolutely
-                    // no point in calling handleVideoThumbClicked; Quite
-                    // simply, it won't work because it needs an src to attach
-                    // to the large video.
-                    //
-                    // Instead, we trigger the pinned endpoint changed event to
-                    // let the bridge adjust its lastN set for myjid and store
-                    // the pinned user in the lastNPickupJid variable to be
-                    // picked up later by the lastN changed event handler.
-
-                    lastNPickupJid = jid;
-                    eventEmitter.emit(UIEvents.PINNED_ENDPOINT,
-                        Strophe.getResourceFromJid(jid));
-                }
-            } else if (jid == APP.xmpp.myJid()) {
-                $("#localVideoContainer").click();
+                lastNPickupJid = jid;
+                eventEmitter.emit(UIEvents.PINNED_ENDPOINT,
+                    Strophe.getResourceFromJid(jid));
             }
         }
     });
@@ -516,7 +506,7 @@ var VideoLayout = (function (my) {
     /**
      * On audio muted event.
      */
-    $(document).bind('audiomuted.muc', function (event, jid, isMuted) {
+    my.onAudioMute = function (jid, isMuted) {
         var resourceJid = Strophe.getResourceFromJid(jid);
         if (resourceJid === APP.xmpp.myResource()) {
             localVideoThumbnail.showAudioIndicator(isMuted);
@@ -527,34 +517,39 @@ var VideoLayout = (function (my) {
                 remoteVideos[resourceJid].updateRemoteVideoMenu(isMuted);
             }
         }
-
-
-    });
+    };
 
     /**
      * On video muted event.
      */
-    $(document).bind('videomuted.muc', function (event, jid, value) {
-        var isMuted = (value === "true");
-        if(jid !== APP.xmpp.myJid() && !APP.RTC.muteRemoteVideoStream(jid, isMuted))
+    my.onVideoMute = function (jid, value) {
+        if (jid !== APP.xmpp.myJid() &&
+            !APP.RTC.muteRemoteVideoStream(jid, value))
             return;
 
-        Avatar.showUserAvatar(jid, isMuted);
         if (jid === APP.xmpp.myJid()) {
-            localVideoThumbnail.showVideoIndicator(isMuted);
+            localVideoThumbnail.showVideoIndicator(value);
         } else {
+            var resource = Strophe.getResourceFromJid(jid);
+
             VideoLayout.ensurePeerContainerExists(jid);
-            remoteVideos[Strophe.getResourceFromJid(jid)].showVideoIndicator(isMuted);
+            remoteVideos[resource].showVideoIndicator(value);
+
+            var el = VideoLayout.getPeerVideoSel(resource);
+            if (!value)
+                el.show();
+            else
+                el.hide();
         }
-    });
+    };
 
     /**
      * Display name changed.
      */
     my.onDisplayNameChanged =
                     function (jid, displayName, status) {
-        if (jid === 'localVideoContainer'
-            || jid === APP.xmpp.myJid()) {
+        if (jid === 'localVideoContainer' ||
+            jid === APP.xmpp.myJid()) {
             localVideoThumbnail.setDisplayName(displayName);
         } else {
             VideoLayout.ensurePeerContainerExists(jid);
@@ -562,7 +557,6 @@ var VideoLayout = (function (my) {
                 displayName,
                 status);
         }
-
     };
 
     /**
@@ -579,11 +573,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);
             }
@@ -593,18 +587,14 @@ var VideoLayout = (function (my) {
         }
 
         // Obtain container for new dominant speaker.
-        var container  = document.getElementById(
-                'participant_' + resourceJid);
+        var videoSel  = VideoLayout.getPeerVideoSel(resourceJid);
 
         // Local video will not have container found, but that's ok
         // since we don't want to switch to local video.
-        if (container && !focusedVideoResourceJid)
-        {
-            var video = container.getElementsByTagName("video");
-
+        if (!focusedVideoResourceJid && videoSel.length) {
             // Update the large video if the video source is already available,
             // otherwise wait for the "videoactive.jingle" event.
-            if (video.length && video[0].currentTime > 0) {
+            if (videoSel[0].currentTime > 0) {
                 LargeVideo.updateLargeVideo(resourceJid);
             }
         }
@@ -617,9 +607,9 @@ var VideoLayout = (function (my) {
      * @param endpointsEnteringLastN the list currently entering last N
      * endpoints
      */
-    my.onLastNEndpointsChanged = function ( lastNEndpoints,
-                                                endpointsEnteringLastN,
-                                                stream) {
+    my.onLastNEndpointsChanged = function (lastNEndpoints,
+                                           endpointsEnteringLastN,
+                                           stream) {
         if (lastNCount !== lastNEndpoints.length)
             lastNCount = lastNEndpoints.length;
 
@@ -656,7 +646,6 @@ var VideoLayout = (function (my) {
         }
 
         localLastNSet = nextLocalLastNSet;
-
         var updateLargeVideo = false;
 
         // Handle LastN/local LastN changes.
@@ -664,16 +653,16 @@ var VideoLayout = (function (my) {
             var resourceJid = VideoLayout.getPeerContainerResourceJid(element);
 
             var isReceived = true;
-            if (resourceJid
-                && lastNEndpoints.indexOf(resourceJid) < 0
-                && localLastNSet.indexOf(resourceJid) < 0) {
+            if (resourceJid &&
+                lastNEndpoints.indexOf(resourceJid) < 0 &&
+                localLastNSet.indexOf(resourceJid) < 0) {
                 console.log("Remove from last N", resourceJid);
                 remoteVideos[resourceJid].showPeerContainer('hide');
                 isReceived = false;
-            } else if (resourceJid
-                && $('#participant_' + resourceJid).is(':visible')
-                && lastNEndpoints.indexOf(resourceJid) < 0
-                && localLastNSet.indexOf(resourceJid) >= 0) {
+            } else if (resourceJid &&
+                $('#participant_' + resourceJid).is(':visible') &&
+                lastNEndpoints.indexOf(resourceJid) < 0 &&
+                localLastNSet.indexOf(resourceJid) >= 0) {
                 remoteVideos[resourceJid].showPeerContainer('avatar');
                 isReceived = false;
             }
@@ -683,7 +672,8 @@ var VideoLayout = (function (my) {
                 // it is no longer being received. If resourceJid was being
                 // displayed in the large video we have to switch to another
                 // user.
-                if (!updateLargeVideo && resourceJid === LargeVideo.getResourceJid()) {
+                if (!updateLargeVideo &&
+                    resourceJid === LargeVideo.getResourceJid()) {
                     updateLargeVideo = true;
                 }
             }
@@ -701,8 +691,9 @@ var VideoLayout = (function (my) {
                     console.log("Add to last N", resourceJid);
 
                     var jid = APP.xmpp.findJidFromResource(resourceJid);
-                    var mediaStream = APP.RTC.remoteStreams[jid][MediaStreamType.VIDEO_TYPE];
-                    var sel = $('#participant_' + resourceJid + '>video');
+                    var mediaStream =
+                        APP.RTC.remoteStreams[jid][MediaStreamType.VIDEO_TYPE];
+                    var sel = VideoLayout.getPeerVideoSel(resourceJid);
 
                     APP.RTC.attachMediaStream(sel, mediaStream.stream);
                     if (lastNPickupJid == mediaStream.peerjid) {
@@ -717,9 +708,10 @@ var VideoLayout = (function (my) {
 
                         updateLargeVideo = false;
                     }
-                    remoteVideos[resourceJid].waitForRemoteVideo(sel, mediaStream.ssrc, mediaStream.stream);
+                    remoteVideos[resourceJid].
+                        waitForPlayback(sel, mediaStream.stream);
                 }
-            })
+            });
         }
 
         // The endpoint that was being shown in the large video has dropped out
@@ -727,13 +719,12 @@ var VideoLayout = (function (my) {
         // the large video now.
 
         if (updateLargeVideo) {
-
-            var resource, container, src;
+            var resource;
             var myResource
                 = APP.xmpp.myResource();
 
             // Find out which endpoint to show in the large video.
-            for (var i = 0; i < lastNEndpoints.length; i++) {
+            for (i = 0; i < lastNEndpoints.length; i++) {
                 resource = lastNEndpoints[i];
                 if (!resource || resource === myResource)
                     continue;
@@ -741,7 +732,6 @@ var VideoLayout = (function (my) {
                 // videoSrcToSsrc needs to be update for this call to succeed.
                 LargeVideo.updateLargeVideo(resource);
                 break;
-
             }
         }
     };
@@ -753,24 +743,22 @@ var VideoLayout = (function (my) {
      */
     my.updateLocalConnectionStats = function (percent, object) {
         var resolution = null;
-        if(object.resolution !== null)
-        {
+        if (object.resolution !== null) {
             resolution = object.resolution;
             object.resolution = resolution[APP.xmpp.myJid()];
             delete resolution[APP.xmpp.myJid()];
         }
         localVideoThumbnail.updateStatsIndicator(percent, object);
-        for(var jid in resolution)
-        {
-            if(resolution[jid] === null)
+        for (var jid in resolution) {
+            if (resolution[jid] === null)
                 continue;
             var resourceJid = Strophe.getResourceFromJid(jid);
-            if(remoteVideos[resourceJid] && remoteVideos[resourceJid].connectionIndicator)
-            {
-                remoteVideos[resourceJid].connectionIndicator.updateResolution(resolution[jid]);
+            if (remoteVideos[resourceJid] &&
+                remoteVideos[resourceJid].connectionIndicator) {
+                remoteVideos[resourceJid].connectionIndicator.
+                    updateResolution(resolution[jid]);
             }
         }
-
     };
 
     /**
@@ -782,18 +770,10 @@ var VideoLayout = (function (my) {
     my.updateConnectionStats = function (jid, percent, object) {
         var resourceJid = Strophe.getResourceFromJid(jid);
 
-        if(remoteVideos[resourceJid])
+        if (remoteVideos[resourceJid])
             remoteVideos[resourceJid].updateStatsIndicator(percent, object);
     };
 
-    /**
-     * Removes the connection
-     * @param jid
-     */
-    my.removeConnectionIndicator = function (jid) {
-        remoteVideos[Strophe.getResourceFromJid(jid)].removeConnectionIndicator();
-    };
-
     /**
      * Hides the connection indicator
      * @param jid
@@ -806,8 +786,7 @@ var VideoLayout = (function (my) {
      * Hides all the indicators
      */
     my.onStatsStop = function () {
-        for(var video in remoteVideos)
-        {
+        for(var video in remoteVideos) {
             remoteVideos[video].hideIndicator();
         }
         localVideoThumbnail.hideIndicator();
@@ -816,70 +795,153 @@ var VideoLayout = (function (my) {
     my.participantLeft = function (jid) {
         // Unlock large video
         var resourceJid = Strophe.getResourceFromJid(jid);
-        if (focusedVideoResourceJid === resourceJid)
-        {
+        if (focusedVideoResourceJid === resourceJid) {
             console.info("Focused video owner has left the conference");
             focusedVideoResourceJid = null;
         }
-    }
+
+        if (currentDominantSpeaker === resourceJid)
+        {
+            console.info("Dominant speaker has left the conference");
+            currentDominantSpeaker = null;
+        }
+
+        var remoteVideo = remoteVideos[resourceJid];
+        if (remoteVideo) {
+            // Remove remote video
+            console.info("Removing remote video: " + resourceJid);
+            remoteVideo.remove();
+            delete remoteVideos[resourceJid];
+        } else {
+            console.warn("No remote video for " + resourceJid);
+        }
+
+        VideoLayout.resizeThumbnails();
+    };
     
-    my.onVideoTypeChanged = function (jid) {
-        LargeVideo.onVideoTypeChanged();
-    }
-
-    my.showMore = function (jid) {
-        if(APP.xmpp.myJid = jid)
-        {
-            localVideoThumbnail.connectionIndicator.showMore();
-        }
-        else
-        {
-            remoteVideos[Strophe.getResourceFromJid(jid)].connectionIndicator.showMore();
+    my.onVideoTypeChanged = function (resourceJid, newVideoType) {
+        if (remoteVideoTypes[resourceJid] === newVideoType) {
+            return;
         }
 
-    }
-
-    my.addPreziContainer = function (id) {
-        return RemoteVideo.createContainer(id);
-    }
-
-    my.setLargeVideoVisible = function (isVisible) {
-        LargeVideo.setLargeVideoVisible(isVisible);
-        if(!isVisible && focusedVideoResourceJid)
-        {
-            var smallVideo = VideoLayout.getSmallVideo(focusedVideoResourceJid);
-            if(smallVideo)
-                smallVideo.focus(false);
-            Avatar.showUserAvatar(
-                APP.xmpp.findJidFromResource(focusedVideoResourceJid));
-            focusedVideoResourceJid = null;
+        console.info("Peer video type changed: ", resourceJid, newVideoType);
+        remoteVideoTypes[resourceJid] = newVideoType;
 
+        var smallVideo;
+        if (resourceJid === APP.xmpp.myResource()) {
+            if (!localVideoThumbnail) {
+                console.warn("Local video not ready yet");
+                return;
+            }
+            smallVideo = localVideoThumbnail;
+        } else if (remoteVideos[resourceJid]) {
+            smallVideo = remoteVideos[resourceJid];
+        } else {
+            return;
         }
-    }
 
-
-    /**
-     * Resizes the video area
-     * @param completeFunction a function to be called when the video space is resized
-     */
-    my.resizeVideoArea = function(isVisible, completeFunction) {
-        LargeVideo.resizeVideoAreaAnimated(isVisible, completeFunction);
-        VideoLayout.resizeThumbnails(true);
+        smallVideo.setVideoType(newVideoType);
+        LargeVideo.onVideoTypeChanged(resourceJid, newVideoType);
 
     };
 
-    my.getSmallVideo = function (resourceJid) {
-        if(resourceJid == APP.xmpp.myResource())
-        {
-            return localVideoThumbnail;
+    my.showMore = function (jid) {
+        if (jid === 'local') {
+            localVideoThumbnail.connectionIndicator.showMore();
+        } else {
+            var remoteVideo = remoteVideos[Strophe.getResourceFromJid(jid)];
+            if (remoteVideo) {
+                remoteVideo.connectionIndicator.showMore();
+            } else {
+                console.info("Error - no remote video for jid: " + jid);
+            }
         }
-        else
-        {
+    };
+
+    my.addPreziContainer = function (id) {
+        var container = RemoteVideo.createContainer(id);
+        VideoLayout.resizeThumbnails();
+        return container;
+    };
+
+    my.setLargeVideoVisible = function (isVisible) {
+        LargeVideo.setLargeVideoVisible(isVisible);
+        if(!isVisible && focusedVideoResourceJid) {
+            var smallVideo = VideoLayout.getSmallVideo(focusedVideoResourceJid);
+            if(smallVideo) {
+                smallVideo.focus(false);
+                smallVideo.showAvatar();
+            }
+            focusedVideoResourceJid = null;
+        }
+    };
+
+    /**
+     * Resizes the video area
+     * @param callback a function to be called when the video space is
+     * resized.
+     */
+    my.resizeVideoArea = function(isVisible, callback) {
+        LargeVideo.resizeVideoAreaAnimated(isVisible, callback);
+        VideoLayout.resizeThumbnails(true);
+    };
+
+    my.getSmallVideo = function (resourceJid) {
+        if(resourceJid == APP.xmpp.myResource()) {
+            return localVideoThumbnail;
+        } else {
             if(!remoteVideos[resourceJid])
                 return null;
             return remoteVideos[resourceJid];
         }
-    }
+    };
+
+    my.userAvatarChanged = function(resourceJid, thumbUrl) {
+        var smallVideo = VideoLayout.getSmallVideo(resourceJid);
+        if(smallVideo)
+            smallVideo.avatarChanged(thumbUrl);
+        else
+            console.warn(
+                "Missed avatar update - no small video yet for " + resourceJid);
+        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);
+    };
+
+    /**
+     * Indicates that the video has been interrupted.
+     */
+    my.onVideoInterrupted = function () {
+        LargeVideo.enableVideoProblemFilter(true);
+        var reconnectingKey = "connection.RECONNECTING";
+        $('#videoConnectionMessage').attr("data-i18n", reconnectingKey);
+        $('#videoConnectionMessage').text(APP.translation.translateString(reconnectingKey));
+        $('#videoConnectionMessage').css({display: "block"});
+    };
+
+    /**
+     * Indicates that the video has been restored.
+     */
+    my.onVideoRestored = function () {
+        LargeVideo.enableVideoProblemFilter(false);
+        $('#videoConnectionMessage').css({display: "none"});
+    };
+
     return my;
 }(VideoLayout || {}));
 

modules/UI/welcome_page/RoomnameGenerator.js

@@ -49,7 +49,8 @@ var adverbs = [
     "Obviously", "Often", "Painfully", "Patiently", "Playfully", "Politely", "Poorly", "Precisely", "Promptly",
     "Quickly", "Quietly", "Randomly", "Rapidly", "Rarely", "Recklessly", "Regularly", "Remorsefully", "Responsibly",
     "Rudely", "Ruthlessly", "Sadly", "Scornfully", "Seamlessly", "Seldom", "Selfishly", "Seriously", "Shakily",
-    "Sharply", "Sideways", "Silently", "Sleepily", "Slightly", "Slowly", "Slyly", "Smoothly", "Softly", "Solemnly", "Steadily", "Sternly", "Strangely", "Strongly", "Stunningly", "Surely", "Tenderly", "Thoughtfully",
+    "Sharply", "Sideways", "Silently", "Sleepily", "Slightly", "Slowly", "Slyly", "Smoothly", "Softly", "Solemnly",
+    "Steadily", "Sternly", "Strangely", "Strongly", "Stunningly", "Surely", "Tenderly", "Thoughtfully",
     "Tightly", "Uneasily", "Vanishingly", "Violently", "Warmly", "Weakly", "Wearily", "Weekly", "Weirdly", "Well",
     "Well", "Wickedly", "Wildly", "Wisely", "Wonderfully", "Yearly"
 ];
@@ -137,8 +138,7 @@ var PATTERNS = [
 /*
  * Returns a random element from the array 'arr'
  */
-function randomElement(arr)
-{
+function randomElement(arr) {
     return arr[Math.floor(Math.random() * arr.length)];
 }
 
@@ -146,8 +146,7 @@ function randomElement(arr)
  * Returns true if the string 's' contains one of the
  * template strings.
  */
-function hasTemplate(s)
-{
+function hasTemplate(s) {
     for (var template in CATEGORIES){
         if (s.indexOf(template) >= 0){
             return true;
@@ -159,14 +158,15 @@ function hasTemplate(s)
  * Generates new room name.
  */
 var RoomNameGenerator = {
-    generateRoomWithoutSeparator: function()
-    {
-        // Note that if more than one pattern is available, the choice of 'name' won't be random (names from patterns
-        // with fewer options will have higher probability of being chosen that names from patterns with more options).
+    generateRoomWithoutSeparator: function() {
+        // Note that if more than one pattern is available, the choice of
+        // 'name' won't have a uniform distribution amongst all patterns (names
+        // from patterns with fewer options will have higher probability of
+        // being chosen that names from patterns with more options).
         var name = randomElement(PATTERNS);
         var word;
-        while (hasTemplate(name)){
-            for (var template in CATEGORIES){
+        while (hasTemplate(name)) {
+            for (var template in CATEGORIES) {
                 word = randomElement(CATEGORIES[template]);
                 name = name.replace(template, word);
             }
@@ -174,6 +174,6 @@ var RoomNameGenerator = {
 
         return name;
     }
-}
+};
 
 module.exports = RoomNameGenerator;

modules/UI/welcome_page/WelcomePage.js

@@ -1,9 +1,9 @@
+/* global $, interfaceConfig */
 var animateTimeout, updateTimeout;
 
 var RoomNameGenerator = require("./RoomnameGenerator");
 
-function enter_room()
-{
+function enter_room() {
     var val = $("#enter_room_field").val();
     if(!val) {
         val = $("#enter_room_field").attr("room_name");
@@ -21,8 +21,7 @@ function animate(word) {
     }, 70);
 }
 
-function update_roomname()
-{
+function update_roomname() {
     var word = RoomNameGenerator.generateRoomWithoutSeparator();
     $("#enter_room_field").attr("room_name", word);
     $("#enter_room_field").attr("placeholder", "");
@@ -31,33 +30,30 @@ function update_roomname()
     updateTimeout = setTimeout(update_roomname, 10000);
 }
 
-
-function setupWelcomePage()
-{
+function setupWelcomePage() {
     $("#videoconference_page").hide();
     $("#domain_name").text(
             window.location.protocol + "//" + window.location.host + "/");
     if (interfaceConfig.SHOW_JITSI_WATERMARK) {
-        var leftWatermarkDiv
-            = $("#welcome_page_header div[class='watermark leftwatermark']");
-        if(leftWatermarkDiv && leftWatermarkDiv.length > 0)
-        {
+        var leftWatermarkDiv =
+            $("#welcome_page_header div[class='watermark leftwatermark']");
+        if(leftWatermarkDiv && leftWatermarkDiv.length > 0) {
             leftWatermarkDiv.css({display: 'block'});
-            leftWatermarkDiv.parent().get(0).href
-                = interfaceConfig.JITSI_WATERMARK_LINK;
+            leftWatermarkDiv.parent().get(0).href =
+                interfaceConfig.JITSI_WATERMARK_LINK;
         }
 
     }
 
     if (interfaceConfig.SHOW_BRAND_WATERMARK) {
-        var rightWatermarkDiv
-            = $("#welcome_page_header div[class='watermark rightwatermark']");
+        var rightWatermarkDiv =
+            $("#welcome_page_header div[class='watermark rightwatermark']");
         if(rightWatermarkDiv && rightWatermarkDiv.length > 0) {
             rightWatermarkDiv.css({display: 'block'});
-            rightWatermarkDiv.parent().get(0).href
-                = interfaceConfig.BRAND_WATERMARK_LINK;
-            rightWatermarkDiv.get(0).style.backgroundImage
-                = "url(images/rightwatermark.png)";
+            rightWatermarkDiv.parent().get(0).href =
+                interfaceConfig.BRAND_WATERMARK_LINK;
+            rightWatermarkDiv.get(0).style.backgroundImage =
+                "url(images/rightwatermark.png)";
         }
     }
 
@@ -66,8 +62,7 @@ function setupWelcomePage()
             .css({display: 'block'});
     }
 
-    $("#enter_room_button").click(function()
-    {
+    $("#enter_room_button").click(function() {
         enter_room();
     });
 
@@ -77,23 +72,23 @@ function setupWelcomePage()
         }
     });
 
-    if (!(interfaceConfig.GENERATE_ROOMNAMES_ON_WELCOME_PAGE === false)){
+    if (interfaceConfig.GENERATE_ROOMNAMES_ON_WELCOME_PAGE !== false) {
         var updateTimeout;
         var animateTimeout;
-        $("#reload_roomname").click(function () {
+        var selector = $("#reload_roomname");
+        selector.click(function () {
             clearTimeout(updateTimeout);
             clearTimeout(animateTimeout);
             update_roomname();
         });
-        $("#reload_roomname").show();
-
+        selector.show();
 
         update_roomname();
     }
 
     $("#disable_welcome").click(function () {
-        window.localStorage.welcomePageDisabled
-            = $("#disable_welcome").is(":checked");
+        window.localStorage.welcomePageDisabled =
+            $("#disable_welcome").is(":checked");
     });
 
 }

modules/URLProcessor/URLProcessor.js

@@ -1,3 +1,4 @@
+/* global $, $iq, config */
 var params = {};
 function getConfigParamsFromUrl() {
     if(!location.hash)

modules/connectionquality/connectionquality.js

@@ -1,3 +1,4 @@
+/* global APP, require */
 var EventEmitter = require("events");
 var eventEmitter = new EventEmitter();
 var CQEvents = require("../../service/connectionquality/CQEvents");
@@ -53,7 +54,7 @@ function convertToMUCStats(stats) {
 }
 
 /**
- * Converts statitistics to format used by VideoLayout
+ * Converts statistics to format used by VideoLayout
  * @param stats
  * @returns {{bitrate: {download: *, upload: *}, packetLoss: {total: *, download: *, upload: *}}}
  */
@@ -71,7 +72,6 @@ function parseMUCStats(stats) {
     };
 }
 
-
 var ConnectionQuality = {
     init: function () {
         APP.xmpp.addListener(XMPPEvents.REMOTE_STATS, this.updateRemoteStats);

modules/desktopsharing/desktopsharing.js

@@ -31,13 +31,7 @@ var extInstalled = false;
  */
 var extUpdateRequired = false;
 
-/**
- * Flag used to cache desktop sharing enabled state. Do not use directly as
- * it can be <tt>null</tt>.
- *
- * @type {null|boolean}
- */
-var _desktopSharingEnabled = null;
+var AdapterJS = require("../RTC/adapter.screenshare");
 
 var EventEmitter = require("events");
 
@@ -46,6 +40,10 @@ var eventEmitter = new EventEmitter();
 var DesktopSharingEventTypes
     = require("../../service/desktopsharing/DesktopSharingEventTypes");
 
+var RTCBrowserType = require("../RTC/RTCBrowserType");
+
+var RTCEvents = require("../../service/RTC/RTCEvents");
+
 /**
  * Method obtains desktop stream from WebRTC 'screen' source.
  * Flag 'chrome://flags/#enable-usermedia-screen-capture' must be enabled.
@@ -116,7 +114,7 @@ function isUpdateRequired(minVersion, extVersion)
     }
 }
 
-function checkExtInstalled(callback) {
+function checkChromeExtInstalled(callback) {
     if (!chrome.runtime) {
         // No API, so no extension for sure
         callback(false, false);
@@ -213,20 +211,39 @@ function obtainScreenFromExtension(streamCallback, failCallback) {
  *        feature completely.
  */
 function setDesktopSharing(method) {
-    // Check if we are running chrome
-    if (!navigator.webkitGetUserMedia) {
-        obtainDesktopStream = null;
-        console.info("Desktop sharing disabled");
-    } else if (method == "ext") {
-        obtainDesktopStream = obtainScreenFromExtension;
-        console.info("Using Chrome extension for desktop sharing");
-    } else if (method == "webrtc") {
-        obtainDesktopStream = obtainWebRTCScreen;
-        console.info("Using Chrome WebRTC for desktop sharing");
+
+    obtainDesktopStream = null;
+
+    // When TemasysWebRTC plugin is used we always use getUserMedia, so we don't
+    // care about 'method' parameter
+    if (RTCBrowserType.isTemasysPluginUsed()) {
+        if (!AdapterJS.WebRTCPlugin.plugin.HasScreensharingFeature) {
+            console.info("Screensharing not supported by this plugin version");
+        } else if (!AdapterJS.WebRTCPlugin.plugin.isScreensharingAvailable) {
+            console.info(
+            "Screensharing not available with Temasys plugin on this site");
+        } else {
+            obtainDesktopStream = obtainWebRTCScreen;
+            console.info("Using Temasys plugin for desktop sharing");
+        }
+    } else if (RTCBrowserType.isChrome()) {
+        if (method == "ext") {
+            if (RTCBrowserType.getChromeVersion() >= 34) {
+                obtainDesktopStream = obtainScreenFromExtension;
+                console.info("Using Chrome extension for desktop sharing");
+                initChromeExtension();
+            } else {
+                console.info("Chrome extension not supported until ver 34");
+            }
+        } else if (method == "webrtc") {
+            obtainDesktopStream = obtainWebRTCScreen;
+            console.info("Using Chrome WebRTC for desktop sharing");
+        }
     }
 
-    // Reset enabled cache
-    _desktopSharingEnabled = null;
+    if (!obtainDesktopStream) {
+        console.info("Desktop sharing disabled");
+    }
 }
 
 /**
@@ -239,6 +256,19 @@ function initInlineInstalls()
     $("link[rel=chrome-webstore-item]").attr("href", getWebStoreInstallUrl());
 }
 
+function initChromeExtension() {
+    // Initialize Chrome extension inline installs
+    initInlineInstalls();
+    // Check if extension is installed
+    checkChromeExtInstalled(function (installed, updateRequired) {
+        extInstalled = installed;
+        extUpdateRequired = updateRequired;
+        console.info(
+            "Chrome extension installed: " + extInstalled +
+            " updateRequired: " + extUpdateRequired);
+    });
+}
+
 function getVideoStreamFailed(error) {
     console.error("Failed to obtain the stream to switch to", error);
     switchInProgress = false;
@@ -264,6 +294,25 @@ function newStreamCreated(stream)
         stream, isUsingScreenStream, streamSwitchDone);
 }
 
+function onEndedHandler(stream) {
+    if (!switchInProgress && isUsingScreenStream) {
+        APP.desktopsharing.toggleScreenSharing();
+    }
+    //FIXME: to be verified
+    if (stream.removeEventListener) {
+        stream.removeEventListener('ended', onEndedHandler);
+    } else {
+        stream.detachEvent('ended', onEndedHandler);
+    }
+}
+
+// Called when RTC finishes initialization
+function onWebRtcReady() {
+
+    setDesktopSharing(config.desktopSharing);
+
+    eventEmitter.emit(DesktopSharingEventTypes.INIT);
+}
 
 module.exports = {
     isUsingScreenStream: function () {
@@ -274,43 +323,10 @@ module.exports = {
      * @returns {boolean} <tt>true</tt> if desktop sharing feature is available
      *          and enabled.
      */
-    isDesktopSharingEnabled: function () {
-        if (_desktopSharingEnabled === null) {
-            if (obtainDesktopStream === obtainScreenFromExtension) {
-                // Parse chrome version
-                var userAgent = navigator.userAgent.toLowerCase();
-                // We can assume that user agent is chrome, because it's
-                // enforced when 'ext' streaming method is set
-                var ver = parseInt(userAgent.match(/chrome\/(\d+)\./)[1], 10);
-                console.log("Chrome version" + userAgent, ver);
-                _desktopSharingEnabled = ver >= 34;
-            } else {
-                _desktopSharingEnabled =
-                    obtainDesktopStream === obtainWebRTCScreen;
-            }
-        }
-        return _desktopSharingEnabled;
-    },
+    isDesktopSharingEnabled: function () { return !!obtainDesktopStream; },
     
     init: function () {
-        setDesktopSharing(config.desktopSharing);
-
-        // Initialize Chrome extension inline installs
-        if (config.chromeExtensionId) {
-
-            initInlineInstalls();
-
-            // Check if extension is installed
-            checkExtInstalled(function (installed, updateRequired) {
-                extInstalled = installed;
-                extUpdateRequired = updateRequired;
-                console.info(
-                    "Chrome extension installed: " + extInstalled +
-                    " updateRequired: " + extUpdateRequired);
-            });
-        }
-
-        eventEmitter.emit(DesktopSharingEventTypes.INIT);
+        APP.RTC.addListener(RTCEvents.RTC_READY, onWebRtcReady);
     },
 
     addListener: function (listener, type)
@@ -341,13 +357,16 @@ module.exports = {
                     isUsingScreenStream = true;
                     // Hook 'ended' event to restore camera
                     // when screen stream stops
-                    stream.addEventListener('ended',
-                        function (e) {
-                            if (!switchInProgress && isUsingScreenStream) {
-                                APP.desktopsharing.toggleScreenSharing();
-                            }
-                        }
-                    );
+                    //FIXME: to be verified
+                    if (stream.addEventListener) {
+                        stream.addEventListener('ended', function () {
+                            onEndedHandler(stream);
+                        });
+                    } else {
+                        stream.attachEvent('ended', function () {
+                            onEndedHandler(stream);
+                        });
+                    }
                     newStreamCreated(stream);
                 },
                 getDesktopStreamFailed);

modules/keyboardshortcut/keyboardshortcut.js

@@ -1,38 +1,43 @@
+/* global APP, $ */
 //maps keycode to character, id of popover for given function and function
-var shortcuts = {
-    67: {
-        character: "C",
-        id: "toggleChatPopover",
-        function: APP.UI.toggleChat
-    },
-    70: {
-        character: "F",
-        id: "filmstripPopover",
-        function: APP.UI.toggleFilmStrip
-    },
-    77: {
-        character: "M",
-        id: "mutePopover",
-        function: APP.UI.toggleAudio
-    },
-    84: {
-        character: "T",
-        function: function() {
-            if(!APP.RTC.localAudio.isMuted()) {
-                APP.UI.toggleAudio();
+var shortcuts = {};
+function initShortcutHandlers() {
+    shortcuts = {
+        67: {
+            character: "C",
+            id: "toggleChatPopover",
+            function: APP.UI.toggleChat
+        },
+        70: {
+            character: "F",
+            id: "filmstripPopover",
+            function: APP.UI.toggleFilmStrip
+        },
+        77: {
+            character: "M",
+            id: "mutePopover",
+            function: APP.UI.toggleAudio
+        },
+        84: {
+            character: "T",
+            function: function() {
+                if(!APP.RTC.localAudio.isMuted()) {
+                    APP.UI.toggleAudio();
+                }
             }
+        },
+        86: {
+            character: "V",
+            id: "toggleVideoPopover",
+            function: APP.UI.toggleVideo
         }
-    },
-    86: {
-        character: "V",
-        id: "toggleVideoPopover",
-        function: APP.UI.toggleVideo
-    }
-};
+    };
+}
 
 
 var KeyboardShortcut = {
     init: function () {
+        initShortcutHandlers();
         window.onkeyup = function(e) {
             var keycode = e.which;
             if(!($(":focus").is("input[type=text]") ||

modules/members/MemberList.js

@@ -1,4 +1,4 @@
-/* global APP */
+/* global APP, require, $ */
 
 /**
  * This module is meant to (eventually) contain and manage all information
@@ -87,7 +87,7 @@ function updateDtmf(jid, newValue) {
  * Checks each member's 'supportsDtmf' field and updates
  * 'atLastOneSupportsDtmf'.
  */
-function updateAtLeastOneDtmf(){
+function updateAtLeastOneDtmf() {
     var newAtLeastOneDtmf = false;
     for (var key in members) {
         if (typeof members[key].supportsDtmf !== 'undefined'
@@ -108,11 +108,10 @@ function updateAtLeastOneDtmf(){
  * Exported interface.
  */
 var Members = {
-    start: function(){
+    start: function() {
         registerListeners();
     },
-    addListener: function(type, listener)
-    {
+    addListener: function(type, listener) {
         eventEmitter.on(type, listener);
     },
     removeListener: function (type, listener) {

modules/settings/Settings.js

@@ -35,15 +35,13 @@ if (supportsLocalStorage()) {
     userId = generateUniqueId();
 }
 
-var Settings =
-{
+var Settings = {
     setDisplayName: function (newDisplayName) {
         displayName = newDisplayName;
         window.localStorage.displayname = displayName;
         return displayName;
     },
-    setEmail: function (newEmail)
-    {
+    setEmail: function (newEmail) {
         email = newEmail;
         window.localStorage.email = newEmail;
         return email;

modules/statistics/CallStats.js

@@ -1,3 +1,4 @@
+/* global config, $, APP, Strophe, callstats */
 var callStats = null;
 
 function initCallback (err, msg) {
@@ -17,8 +18,9 @@ var CallStats = {
 
         this.userID =  APP.xmpp.myResource();
 
-        var roomJid = APP.UI.getRoomName();
-        this.confID = roomJid? Strophe.getNodeFromJid(roomJid) : null;
+        var location = window.location;
+        this.confID = location.protocol + "//" +
+            location.hostname + location.pathname;
 
         //userID is generated or given by the origin server
         callStats.initialize(config.callStatsID,
@@ -26,9 +28,7 @@ var CallStats = {
             this.userID,
             initCallback);
 
-        var usage = callStats.fabricUsage.unbundled;
-        if(config.useBundle)
-            usage = callStats.fabricUsage.multiplex;
+        var usage = callStats.fabricUsage.multiplex;
 
         callStats.addNewFabric(this.peerconnection,
             Strophe.getResourceFromJid(jingleSession.peerjid),
@@ -37,37 +37,37 @@ var CallStats = {
             this.pcCallback.bind(this));
     },
     pcCallback: function (err, msg) {
-        if(!callStats)
+        if (!callStats)
             return;
         console.log("Monitoring status: "+ err + " msg: " + msg);
         callStats.sendFabricEvent(this.peerconnection,
             callStats.fabricEvent.fabricSetup, this.confID);
     },
     sendMuteEvent: function (mute, type) {
-        if(!callStats)
+        if (!callStats)
             return;
         var event = null;
-        if(type === "video")
-        {
+        if (type === "video") {
             event = (mute? callStats.fabricEvent.videoPause :
                 callStats.fabricEvent.videoResume);
         }
-        else
-        {
+        else {
             event = (mute? callStats.fabricEvent.audioMute :
                 callStats.fabricEvent.audioUnmute);
         }
         callStats.sendFabricEvent(this.peerconnection, event, this.confID);
     },
     sendTerminateEvent: function () {
-        if(!callStats)
+        if(!callStats) {
             return;
+        }
         callStats.sendFabricEvent(this.peerconnection,
             callStats.fabricEvent.fabricTerminated, this.confID);
     },
     sendSetupFailedEvent: function () {
-        if(!callStats)
+        if(!callStats) {
             return;
+        }
         callStats.sendFabricEvent(this.peerconnection,
             callStats.fabricEvent.fabricSetupFailed, this.confID);
     }

modules/statistics/LocalStatsCollector.js

@@ -1,23 +1,25 @@
+/* global config */
 /**
  * Provides statistics for the local stream.
  */
 
+var RTCBrowserType = require('../RTC/RTCBrowserType');
 
 /**
- * Size of the webaudio analizer buffer.
+ * Size of the webaudio analyzer buffer.
  * @type {number}
  */
-var WEBAUDIO_ANALIZER_FFT_SIZE = 2048;
+var WEBAUDIO_ANALYZER_FFT_SIZE = 2048;
 
 /**
- * Value of the webaudio analizer smoothing time parameter.
+ * Value of the webaudio analyzer smoothing time parameter.
  * @type {number}
  */
-var WEBAUDIO_ANALIZER_SMOOTING_TIME = 0.8;
+var WEBAUDIO_ANALYZER_SMOOTING_TIME = 0.8;
 
 /**
  * Converts time domain data array to audio level.
- * @param array the time domain data array.
+ * @param samples the time domain data array.
  * @returns {number} the audio level
  */
 function timeDomainDataToAudioLevel(samples) {
@@ -32,7 +34,7 @@ function timeDomainDataToAudioLevel(samples) {
     }
 
     return parseFloat(((maxVolume - 127) / 128).toFixed(3));
-};
+}
 
 /**
  * Animates audio level change
@@ -40,20 +42,16 @@ function timeDomainDataToAudioLevel(samples) {
  * @param lastLevel the last audio level
  * @returns {Number} the audio level to be set
  */
-function animateLevel(newLevel, lastLevel)
-{
+function animateLevel(newLevel, lastLevel) {
     var value = 0;
     var diff = lastLevel - newLevel;
-    if(diff > 0.2)
-    {
+    if(diff > 0.2) {
         value = lastLevel - 0.2;
     }
-    else if(diff < -0.4)
-    {
+    else if(diff < -0.4) {
         value = lastLevel + 0.4;
     }
-    else
-    {
+    else {
         value = newLevel;
     }
 
@@ -66,8 +64,6 @@ function animateLevel(newLevel, lastLevel)
  *
  * @param stream the local stream
  * @param interval stats refresh interval given in ms.
- * @param {function(LocalStatsCollector)} updateCallback the callback called on stats
- *                                   update.
  * @constructor
  */
 function LocalStatsCollector(stream, interval, statisticsService, eventEmitter) {
@@ -84,13 +80,14 @@ function LocalStatsCollector(stream, interval, statisticsService, eventEmitter)
  * Starts the collecting the statistics.
  */
 LocalStatsCollector.prototype.start = function () {
-    if (config.disableAudioLevels || !window.AudioContext)
+    if (config.disableAudioLevels || !window.AudioContext ||
+        RTCBrowserType.isTemasysPluginUsed())
         return;
 
     var context = new AudioContext();
     var analyser = context.createAnalyser();
-    analyser.smoothingTimeConstant = WEBAUDIO_ANALIZER_SMOOTING_TIME;
-    analyser.fftSize = WEBAUDIO_ANALIZER_FFT_SIZE;
+    analyser.smoothingTimeConstant = WEBAUDIO_ANALYZER_SMOOTING_TIME;
+    analyser.fftSize = WEBAUDIO_ANALYZER_FFT_SIZE;
 
 
     var source = context.createMediaStreamSource(this.stream);
@@ -104,7 +101,7 @@ LocalStatsCollector.prototype.start = function () {
             var array = new Uint8Array(analyser.frequencyBinCount);
             analyser.getByteTimeDomainData(array);
             var audioLevel = timeDomainDataToAudioLevel(array);
-            if(audioLevel != self.audioLevel) {
+            if (audioLevel != self.audioLevel) {
                 self.audioLevel = animateLevel(audioLevel, self.audioLevel);
                 self.eventEmitter.emit(
                     "statistics.audioLevel",
@@ -114,7 +111,6 @@ LocalStatsCollector.prototype.start = function () {
         },
         this.intervalMilis
     );
-
 };
 
 /**

modules/statistics/RTPStatsCollector.js

@@ -1,8 +1,10 @@
-/* global ssrc2jid */
+/* global require, ssrc2jid */
 /* jshint -W117 */
-var RTCBrowserType = require("../../service/RTC/RTCBrowserType");
-
+var RTCBrowserType = require("../RTC/RTCBrowserType");
 
+/* Whether we support the browser we are running into for logging statistics */
+var browserSupported = RTCBrowserType.isChrome() ||
+    RTCBrowserType.isOpera();
 /**
  * Calculates packet lost percent using the number of lost packets and the
  * number of all packet.
@@ -17,10 +19,12 @@ function calculatePacketLoss(lostPackets, totalPackets) {
 }
 
 function getStatValue(item, name) {
-    if(!keyMap[APP.RTC.getBrowserType()][name])
+    var browserType = RTCBrowserType.getBrowserType();
+    if (!keyMap[browserType][name])
         throw "The property isn't supported!";
-    var key = keyMap[APP.RTC.getBrowserType()][name];
-    return APP.RTC.getBrowserType() == RTCBrowserType.RTC_BROWSER_CHROME? item.stat(key) : item[key];
+    var key = keyMap[browserType][name];
+    return (RTCBrowserType.isChrome() || RTCBrowserType.isOpera()) ?
+        item.stat(key) : item[key];
 }
 
 /**
@@ -47,8 +51,6 @@ PeerStats.bandwidth = {};
  */
 PeerStats.bitrate = {};
 
-
-
 /**
  * The packet loss rate
  * @type {{}}
@@ -233,7 +235,7 @@ StatsCollector.prototype.errorCallback = function (error)
 StatsCollector.prototype.start = function ()
 {
     var self = this;
-    if(!config.disableAudioLevels) {
+    if (!config.disableAudioLevels) {
         this.audioLevelsIntervalId = setInterval(
             function () {
                 // Interval updates
@@ -260,7 +262,7 @@ StatsCollector.prototype.start = function ()
         );
     }
 
-    if(!config.disableStats && !navigator.mozGetUserMedia) {
+    if (!config.disableStats && browserSupported) {
         this.statsIntervalId = setInterval(
             function () {
                 // Interval updates
@@ -294,7 +296,7 @@ StatsCollector.prototype.start = function ()
         );
     }
 
-    if (config.logStats && !navigator.mozGetUserMedia) {
+    if (config.logStats && browserSupported) {
         this.gatherStatsIntervalId = setInterval(
             function () {
                 self.peerconnection.getStats(
@@ -415,6 +417,8 @@ keyMap[RTCBrowserType.RTC_BROWSER_CHROME] = {
     "audioInputLevel": "audioInputLevel",
     "audioOutputLevel": "audioOutputLevel"
 };
+keyMap[RTCBrowserType.RTC_BROWSER_OPERA] =
+    keyMap[RTCBrowserType.RTC_BROWSER_CHROME];
 
 
 /**
@@ -671,41 +675,34 @@ StatsCollector.prototype.processStatsReport = function () {
 /**
  * Stats processing logic.
  */
-StatsCollector.prototype.processAudioLevelReport = function ()
-{
-    if (!this.baselineAudioLevelsReport)
-    {
+StatsCollector.prototype.processAudioLevelReport = function () {
+    if (!this.baselineAudioLevelsReport) {
         return;
     }
 
-    for (var idx in this.currentAudioLevelsReport)
-    {
+    for (var idx in this.currentAudioLevelsReport) {
         var now = this.currentAudioLevelsReport[idx];
 
-        if (now.type != 'ssrc')
-        {
+        if (now.type != 'ssrc') {
             continue;
         }
 
         var before = this.baselineAudioLevelsReport[idx];
-        if (!before)
-        {
+        if (!before) {
             console.warn(getStatValue(now, 'ssrc') + ' not enough data');
             continue;
         }
 
         var ssrc = getStatValue(now, 'ssrc');
         var jid = APP.xmpp.getJidFromSSRC(ssrc);
-        if (!jid)
-        {
+        if (!jid) {
             if((Date.now() - now.timestamp) < 3000)
                 console.warn("No jid for ssrc: " + ssrc);
             continue;
         }
 
         var jidStats = this.jid2stats[jid];
-        if (!jidStats)
-        {
+        if (!jidStats) {
             jidStats = new PeerStats();
             this.jid2stats[jid] = jidStats;
         }
@@ -724,8 +721,7 @@ StatsCollector.prototype.processAudioLevelReport = function ()
             return;
         }
 
-        if (audioLevel)
-        {
+        if (audioLevel) {
             // TODO: can't find specs about what this value really is,
             // but it seems to vary between 0 and around 32k.
             audioLevel = audioLevel / 32767;
@@ -733,8 +729,5 @@ StatsCollector.prototype.processAudioLevelReport = function ()
             if(jid != APP.xmpp.myJid())
                 this.eventEmitter.emit("statistics.audioLevel", jid, audioLevel);
         }
-
     }
-
-
 };

modules/statistics/statistics.js

@@ -1,3 +1,4 @@
+/* global require, APP */
 /**
  * Created by hristo on 8/4/14.
  */
@@ -6,7 +7,7 @@ var RTPStats = require("./RTPStatsCollector.js");
 var EventEmitter = require("events");
 var StreamEventTypes = require("../../service/RTC/StreamEventTypes.js");
 var XMPPEvents = require("../../service/xmpp/XMPPEvents");
-var CallStats = require("./callstats");
+var CallStats = require("./CallStats");
 var RTCEvents = require("../../service/RTC/RTCEvents");
 
 var eventEmitter = new EventEmitter();
@@ -15,19 +16,15 @@ var localStats = null;
 
 var rtpStats = null;
 
-function stopLocal()
-{
-    if(localStats)
-    {
+function stopLocal() {
+    if (localStats) {
         localStats.stop();
         localStats = null;
     }
 }
 
-function stopRemote()
-{
-    if(rtpStats)
-    {
+function stopRemote() {
+    if (rtpStats) {
         rtpStats.stop();
         eventEmitter.emit("statistics.stop");
         rtpStats = null;
@@ -35,20 +32,18 @@ function stopRemote()
 }
 
 function startRemoteStats (peerconnection) {
-    if(rtpStats)
-    {
+    if (rtpStats) {
         rtpStats.stop();
-        rtpStats = null;
     }
 
     rtpStats = new RTPStats(peerconnection, 200, 2000, eventEmitter);
     rtpStats.start();
 }
 
-function onStreamCreated(stream)
-{
-    if(stream.getOriginalStream().getAudioTracks().length === 0)
+function onStreamCreated(stream) {
+    if(stream.getOriginalStream().getAudioTracks().length === 0) {
         return;
+    }
 
     localStats = new LocalStats(stream.getOriginalStream(), 200, statistics,
         eventEmitter);
@@ -64,9 +59,7 @@ function onDisposeConference(onUnload) {
     }
 }
 
-
-var statistics =
-{
+var statistics = {
     /**
      * Indicates that this audio level is for local jid.
      * @type {string}
@@ -129,18 +122,17 @@ var statistics =
         });
         APP.xmpp.addListener(XMPPEvents.PEERCONNECTION_READY, function (session) {
             CallStats.init(session);
-        })
+        });
         APP.RTC.addListener(RTCEvents.AUDIO_MUTE, function (mute) {
             CallStats.sendMuteEvent(mute, "audio");
         });
         APP.xmpp.addListener(XMPPEvents.CONFERENCE_SETUP_FAILED, function () {
             CallStats.sendSetupFailedEvent();
-        })
+        });
         APP.RTC.addListener(RTCEvents.VIDEO_MUTE, function (mute) {
             CallStats.sendMuteEvent(mute, "video");
         });
     }
-
 };
 
 

modules/translation/translation.js

@@ -1,3 +1,4 @@
+/* global $, require, config, interfaceConfig */
 var i18n = require("i18next-client");
 var languages = require("../../service/translation/languages");
 var Settings = require("../settings/Settings");
@@ -23,7 +24,6 @@ var defaultOptions = {
     fallbackOnNull: true,
     fallbackOnEmpty: true,
     useDataAttrOptions: true,
-    defaultValueFromContent: false,
     app: interfaceConfig.APP_NAME,
     getAsync: false,
     defaultValueFromContent: false,
@@ -63,8 +63,7 @@ var defaultOptions = {
 //                localStorageExpirationTime: 86400000 // in ms, default 1 week
 };
 
-function initCompleted(t)
-{
+function initCompleted(t) {
     $("[data-i18n]").i18n();
 }
 
@@ -122,7 +121,7 @@ module.exports = {
     translateElement: function (selector) {
         selector.i18n();
     },
-    generateTranslatonHTML: function (key, options) {
+    generateTranslationHTML: function (key, options) {
         var str = "<span data-i18n=\"" + key + "\"";
         if(options)
         {

modules/xmpp/JingleSession.js

@@ -6,6 +6,8 @@ var SDP = require("./SDP");
 var async = require("async");
 var transform = require("sdp-transform");
 var XMPPEvents = require("../../service/xmpp/XMPPEvents");
+var RTCBrowserType = require("../RTC/RTCBrowserType");
+var VideoSSRCHack = require("./VideoSSRCHack");
 
 // Jingle stuff
 function JingleSession(me, sid, connection, service, eventEmitter) {
@@ -27,6 +29,7 @@ function JingleSession(me, sid, connection, service, eventEmitter) {
     this.ice_config = {};
     this.drip_container = [];
     this.service = service;
+    this.eventEmitter = eventEmitter;
 
     this.usetrickle = true;
     this.usepranswer = false; // early transport warmup -- mind you, this might fail. depends on webrtc issue 1718
@@ -47,6 +50,8 @@ function JingleSession(me, sid, connection, service, eventEmitter) {
 
     this.wait = true;
     this.localStreamsSSRC = null;
+    this.ssrcOwners = {};
+    this.ssrcVideoTypes = {};
     this.eventEmitter = eventEmitter;
 
     /**
@@ -86,6 +91,7 @@ JingleSession.prototype.initiate = function (peerjid, isInitiator) {
     this.hadstuncandidate = false;
     this.hadturncandidate = false;
     this.lasticecandidate = false;
+    this.isreconnect = false;
 
     this.peerconnection
         = new TraceablePeerConnection(
@@ -98,7 +104,7 @@ JingleSession.prototype.initiate = function (peerjid, isInitiator) {
     };
     this.peerconnection.onaddstream = function (event) {
         if (event.stream.id !== 'default') {
-        console.log("REMOTE STREAM ADDED: " + event.stream + " - " + event.stream.id);
+        console.log("REMOTE STREAM ADDED: ", event.stream , event.stream.id);
         self.remoteStreamAdded(event);
         } else {
             // This is a recvonly stream. Clients that implement Unified Plan,
@@ -117,18 +123,35 @@ JingleSession.prototype.initiate = function (peerjid, isInitiator) {
         if (!(self && self.peerconnection)) return;
         self.updateModifySourcesQueue();
     };
+    /**
+     * The oniceconnectionstatechange event handler contains the code to execute when the iceconnectionstatechange event,
+     * of type Event, is received by this RTCPeerConnection. Such an event is sent when the value of
+     * RTCPeerConnection.iceConnectionState changes.
+     *
+     * @param event the event containing information about the change
+     */
     this.peerconnection.oniceconnectionstatechange = function (event) {
         if (!(self && self.peerconnection)) return;
         self.updateModifySourcesQueue();
         switch (self.peerconnection.iceConnectionState) {
             case 'connected':
-                this.startTime = new Date();
+                self.startTime = new Date();
+
+                // Informs interested parties that the connection has been restored.
+                if (self.peerconnection.signalingState === 'stable' && self.isreconnect)
+                    self.eventEmitter.emit(XMPPEvents.CONNECTION_RESTORED);
+                self.isreconnect = false;
+
                 break;
             case 'disconnected':
-                this.stopTime = new Date();
+                self.isreconnect = true;
+                self.stopTime = new Date();
+                // Informs interested parties that the connection has been interrupted.
+                if (self.peerconnection.signalingState === 'stable')
+                    self.eventEmitter.emit(XMPPEvents.CONNECTION_INTERRUPTED);
                 break;
             case 'failed':
-                self.eventEmitter(XMPPEvents.CONFERENCE_SETUP_FAILED);
+                self.eventEmitter.emit(XMPPEvents.CONFERENCE_SETUP_FAILED);
                 break;
         }
         onIceConnectionStateChange(self.sid, self);
@@ -189,7 +212,6 @@ function onIceConnectionStateChange(sid, session) {
 }
 
 JingleSession.prototype.accept = function () {
-    var self = this;
     this.state = 'active';
 
     var pranswer = this.peerconnection.localDescription;
@@ -216,7 +238,11 @@ JingleSession.prototype.accept = function () {
             initiator: this.initiator,
             responder: this.responder,
             sid: this.sid });
-    prsdp.toJingle(accept, this.initiator == this.me ? 'initiator' : 'responder', this.localStreamsSSRC);
+    // FIXME why do we generate session-accept in 3 different places ?
+    prsdp.toJingle(
+        accept,
+        this.initiator == this.me ? 'initiator' : 'responder',
+        this.localStreamsSSRC);
     var sdp = this.peerconnection.localDescription.sdp;
     while (SDPUtil.find_line(sdp, 'a=inactive')) {
         // FIXME: change any inactive to sendrecv or whatever they were originally
@@ -228,6 +254,8 @@ JingleSession.prototype.accept = function () {
             //console.log('setLocalDescription success');
             self.setLocalDescription();
 
+            VideoSSRCHack.processSessionInit(accept);
+
             self.connection.sendIQ(accept,
                 function () {
                     var ack = {};
@@ -303,6 +331,7 @@ JingleSession.prototype.sendIceCandidate = function (candidate) {
         //console.log('sendIceCandidate: last candidate.');
         if (!this.usetrickle) {
             //console.log('should send full offer now...');
+            //FIXME why do we generate session-accept in 3 different places ?
             var init = $iq({to: this.peerjid,
                 type: 'set'})
                 .c('jingle', {xmlns: 'urn:xmpp:jingle:1',
@@ -314,7 +343,13 @@ JingleSession.prototype.sendIceCandidate = function (candidate) {
             var sendJingle = function (ssrc) {
                 if(!ssrc)
                     ssrc = {};
-                self.localSDP.toJingle(init, self.initiator == self.me ? 'initiator' : 'responder', ssrc);
+                self.localSDP.toJingle(
+                    init,
+                    self.initiator == self.me ? 'initiator' : 'responder',
+                    ssrc);
+
+                VideoSSRCHack.processSessionInit(init);
+
                 self.connection.sendIQ(init,
                     function () {
                         //console.log('session initiate ack');
@@ -414,6 +449,7 @@ JingleSession.prototype.sendOffer = function () {
     );
 };
 
+// FIXME createdOffer is never used in jitsi-meet
 JingleSession.prototype.createdOffer = function (sdp) {
     //console.log('createdOffer', sdp);
     var self = this;
@@ -426,7 +462,13 @@ JingleSession.prototype.createdOffer = function (sdp) {
                 action: 'session-initiate',
                 initiator: this.initiator,
                 sid: this.sid});
-        self.localSDP.toJingle(init, this.initiator == this.me ? 'initiator' : 'responder', this.localStreamsSSRC);
+        self.localSDP.toJingle(
+            init,
+            this.initiator == this.me ? 'initiator' : 'responder',
+            this.localStreamsSSRC);
+
+        VideoSSRCHack.processSessionInit(init);
+
         self.connection.sendIQ(init,
             function () {
                 var ack = {};
@@ -471,10 +513,33 @@ JingleSession.prototype.createdOffer = function (sdp) {
     }
 };
 
+JingleSession.prototype.readSsrcInfo = function (contents) {
+    var self = this;
+    $(contents).each(function (idx, content) {
+        var name = $(content).attr('name');
+        var mediaType = this.getAttribute('name');
+        var ssrcs = $(content).find('description>source[xmlns="urn:xmpp:jingle:apps:rtp:ssma:0"]');
+        ssrcs.each(function () {
+            var ssrc = this.getAttribute('ssrc');
+            $(this).find('>ssrc-info[xmlns="http://jitsi.org/jitmeet"]').each(
+                function () {
+                    var owner = this.getAttribute('owner');
+                    self.ssrcOwners[ssrc] = owner;
+                }
+            );
+        });
+    });
+};
+
+JingleSession.prototype.getSsrcOwner = function (ssrc) {
+    return this.ssrcOwners[ssrc];
+};
+
 JingleSession.prototype.setRemoteDescription = function (elem, desctype) {
     //console.log('setting remote description... ', desctype);
     this.remoteSDP = new SDP('');
     this.remoteSDP.fromJingle(elem);
+    this.readSsrcInfo($(elem).find(">content"));
     if (this.peerconnection.remoteDescription !== null) {
         console.log('setRemoteDescription when remote description is not null, should be pranswer', this.peerconnection.remoteDescription);
         if (this.peerconnection.remoteDescription.type == 'pranswer') {
@@ -655,7 +720,7 @@ JingleSession.prototype.createdAnswer = function (sdp, provisional) {
     }
     var self = this;
     var sendJingle = function (ssrcs) {
-
+                // FIXME why do we generate session-accept in 3 different places ?
                 var accept = $iq({to: self.peerjid,
                     type: 'set'})
                     .c('jingle', {xmlns: 'urn:xmpp:jingle:1',
@@ -663,7 +728,13 @@ JingleSession.prototype.createdAnswer = function (sdp, provisional) {
                         initiator: self.initiator,
                         responder: self.responder,
                         sid: self.sid });
-                self.localSDP.toJingle(accept, self.initiator == self.me ? 'initiator' : 'responder', ssrcs);
+                self.localSDP.toJingle(
+                    accept,
+                    self.initiator == self.me ? 'initiator' : 'responder',
+                    ssrcs);
+
+                VideoSSRCHack.processSessionInit(accept);
+
                 self.connection.sendIQ(accept,
                     function () {
                         var ack = {};
@@ -762,6 +833,9 @@ JingleSession.prototype.addSource = function (elem, fromJid) {
 
     console.log('addssrc', new Date().getTime());
     console.log('ice', this.peerconnection.iceConnectionState);
+
+    this.readSsrcInfo(elem);
+
     var sdp = new SDP(this.peerconnection.remoteDescription.sdp);
     var mySdp = new SDP(this.peerconnection.localDescription.sdp);
 
@@ -790,6 +864,10 @@ JingleSession.prototype.addSource = function (elem, fromJid) {
                 console.warn("Got add stream request for my own ssrc: "+ssrc);
                 return;
             }
+            if (sdp.containsSSRC(ssrc)) {
+                console.warn("Source-add request for existing SSRC: " + ssrc);
+                return;
+            }
             $(this).find('>parameter').each(function () {
                 lines += 'a=ssrc:' + ssrc + ' ' + $(this).attr('name');
                 if ($(this).attr('value') && $(this).attr('value').length)
@@ -925,15 +1003,6 @@ JingleSession.prototype._modifySources = function (successCallback, queueCallbac
     });
     this.removessrc = [];
 
-    // FIXME:
-    // this was a hack for the situation when only one peer exists
-    // in the conference.
-    // check if still required and remove
-    if (sdp.media[0])
-        sdp.media[0] = sdp.media[0].replace('a=recvonly', 'a=sendrecv');
-    if (sdp.media[1])
-        sdp.media[1] = sdp.media[1].replace('a=recvonly', 'a=sendrecv');
-
     sdp.raw = sdp.session + sdp.media.join('');
     this.peerconnection.setRemoteDescription(new RTCSessionDescription({type: 'offer', sdp: sdp.raw}),
         function() {
@@ -1020,9 +1089,6 @@ JingleSession.prototype.switchStreams = function (new_stream, oldStream, success
             self.peerconnection.addStream(new_stream);
     }
 
-    if(!isAudio)
-    APP.RTC.switchVideoStreams(new_stream, oldStream);
-
     // Conference is not active
     if(!oldSdp || !self.peerconnection) {
         success_callback();
@@ -1065,7 +1131,13 @@ JingleSession.prototype.notifyMySSRCUpdate = function (old_sdp, new_sdp) {
         }
     );
     var removed = sdpDiffer.toJingle(remove);
-    if (removed) {
+
+    // Let 'source-remove' IQ through the hack and see if we're allowed to send
+    // it in the current form
+    if (removed)
+        remove = VideoSSRCHack.processSourceRemove(remove);
+
+    if (removed && remove) {
         this.connection.sendIQ(remove,
             function (res) {
                 console.info('got remove result', res);
@@ -1089,7 +1161,13 @@ JingleSession.prototype.notifyMySSRCUpdate = function (old_sdp, new_sdp) {
         }
     );
     var added = sdpDiffer.toJingle(add);
-    if (added) {
+
+    // Let 'source-add' IQ through the hack and see if we're allowed to send
+    // it in the current form
+    if (added)
+        add = VideoSSRCHack.processSourceAdd(add);
+
+    if (added & add) {
         this.connection.sendIQ(add,
             function (res) {
                 console.info('got add result', res);
@@ -1242,13 +1320,12 @@ JingleSession.onJingleFatalError = function (session, error)
 {
     this.service.sessionTerminated = true;
     this.connection.emuc.doLeave();
-    APP.UI.messageHandler.showError("dialog.sorry",
-        "dialog.internalError");
     this.eventEmitter.emit(XMPPEvents.CONFERENCE_SETUP_FAILED);
+    this.eventEmitter.emit(XMPPEvents.JINGLE_FATAL_ERROR, session, error);
 }
 
 JingleSession.prototype.setLocalDescription = function () {
-    // put our ssrcs into presence so other clients can identify our stream
+    var self = this;
     var newssrcs = [];
     var session = transform.parse(this.peerconnection.localDescription.sdp);
     session.media.forEach(function (media) {
@@ -1261,17 +1338,15 @@ JingleSession.prototype.setLocalDescription = function () {
                 }
                 newssrcs.push({
                     'ssrc': ssrc.id,
-                    'type': media.type,
-                    'direction': media.direction
+                    'type': media.type
                 });
             });
         }
-        else if(this.localStreamsSSRC && this.localStreamsSSRC[media.type])
+        else if(self.localStreamsSSRC && self.localStreamsSSRC[media.type])
         {
             newssrcs.push({
-                'ssrc': this.localStreamsSSRC[media.type],
-                'type': media.type,
-                'direction': media.direction
+                'ssrc': self.localStreamsSSRC[media.type],
+                'type': media.type
             });
         }
 
@@ -1279,20 +1354,13 @@ JingleSession.prototype.setLocalDescription = function () {
 
     console.log('new ssrcs', newssrcs);
 
-    // Have to clear presence map to get rid of removed streams
-    this.connection.emuc.clearPresenceMedia();
-
+    // Bind us as local SSRCs owner
     if (newssrcs.length > 0) {
         for (var i = 1; i <= newssrcs.length; i ++) {
-            // Change video type to screen
-            if (newssrcs[i-1].type === 'video' && APP.desktopsharing.isUsingScreenStream()) {
-                newssrcs[i-1].type = 'screen';
-            }
-            this.connection.emuc.addMediaToPresence(i,
-                newssrcs[i-1].type, newssrcs[i-1].ssrc, newssrcs[i-1].direction);
+            var ssrc = newssrcs[i-1].ssrc;
+            var myJid = self.connection.emuc.myroomjid;
+            self.ssrcOwners[ssrc] = myJid;
         }
-
-        this.connection.emuc.sendPresence();
     }
 }
 
@@ -1313,19 +1381,19 @@ function sendKeyframe(pc) {
                         },
                         function (error) {
                             console.log('triggerKeyframe setLocalDescription failed', error);
-                            APP.UI.messageHandler.showError();
+                            eventEmitter.emit(XMPPEvents.SET_LOCAL_DESCRIPTION_ERROR);
                         }
                     );
                 },
                 function (error) {
                     console.log('triggerKeyframe createAnswer failed', error);
-                    APP.UI.messageHandler.showError();
+                    eventEmitter.emit(XMPPEvents.CREATE_ANSWER_ERROR);
                 }
             );
         },
         function (error) {
             console.log('triggerKeyframe setRemoteDescription failed', error);
-            APP.UI.messageHandler.showError();
+            eventEmitter.emit(XMPPEvents.SET_REMOTE_DESCRIPTION_ERROR);
         }
     );
 }
@@ -1334,10 +1402,12 @@ function sendKeyframe(pc) {
 JingleSession.prototype.remoteStreamAdded = function (data, times) {
     var self = this;
     var thessrc;
-    var ssrc2jid = this.connection.emuc.ssrc2jid;
+    var streamId = APP.RTC.getStreamID(data.stream);
 
     // look up an associated JID for a stream id
-    if (data.stream.id && data.stream.id.indexOf('mixedmslabel') === -1) {
+    if (!streamId) {
+        console.error("No stream ID for", data.stream);
+    } else if (streamId && streamId.indexOf('mixedmslabel') === -1) {
         // look only at a=ssrc: and _not_ at a=ssrc-group: lines
 
         var ssrclines
@@ -1347,45 +1417,23 @@ JingleSession.prototype.remoteStreamAdded = function (data, times) {
             // is not always present.
             // return line.indexOf('mslabel:' + data.stream.label) !== -1;
 
-            return ((line.indexOf('msid:' + data.stream.id) !== -1));
+            if (RTCBrowserType.isTemasysPluginUsed()) {
+                return ((line.indexOf('mslabel:' + streamId) !== -1));
+            } else {
+                return ((line.indexOf('msid:' + streamId) !== -1));
+            }
         });
         if (ssrclines.length) {
             thessrc = ssrclines[0].substring(7).split(' ')[0];
 
-            // We signal our streams (through Jingle to the focus) before we set
-            // our presence (through which peers associate remote streams to
-            // jids). So, it might arrive that a remote stream is added but
-            // ssrc2jid is not yet updated and thus data.peerjid cannot be
-            // successfully set. Here we wait for up to a second for the
-            // presence to arrive.
-
-            if (!ssrc2jid[thessrc]) {
-
-                if (typeof times === 'undefined')
-                {
-                    times = 0;
-                }
-
-                if (times > 10)
-                {
-                    console.warning('Waiting for jid timed out', thessrc);
-                }
-                else
-                {
-                    setTimeout(function(d) {
-                        return function() {
-                            self.remoteStreamAdded(d, times++);
-                        }
-                    }(data), 250);
-                }
+            if (!self.ssrcOwners[thessrc]) {
+                console.error("No SSRC owner known for: " + thessrc);
                 return;
             }
-
-            // ok to overwrite the one from focus? might save work in colibri.js
-            console.log('associated jid', ssrc2jid[thessrc], data.peerjid);
-            if (ssrc2jid[thessrc]) {
-                data.peerjid = ssrc2jid[thessrc];
-            }
+            data.peerjid = self.ssrcOwners[thessrc];
+            console.log('associated jid', self.ssrcOwners[thessrc]);
+        } else {
+            console.error("No SSRC lines for ", streamId);
         }
     }
 

modules/xmpp/SDP.js

@@ -218,12 +218,15 @@ SDP.prototype.toJingle = function (elem, thecreator, ssrcs) {
                         if (kv.indexOf(':') == -1) {
                             elem.attrs({ name: kv });
                         } else {
-                            elem.attrs({ name: kv.split(':', 2)[0] });
-                            elem.attrs({ value: kv.split(':', 2)[1] });
+                            var k = kv.split(':', 2)[0];
+                            elem.attrs({ name: k });
+
+                            var v = kv.split(':', 2)[1];
+                            v = SDPUtil.filter_special_chars(v);
+                            elem.attrs({ value: v });
                         }
                         elem.up();
                     });
-                    elem.up();
                 }
                 else
                 {
@@ -243,7 +246,7 @@ SDP.prototype.toJingle = function (elem, thecreator, ssrcs) {
                     }
                     if(msid != null)
                     {
-                        msid = msid.replace(/[\{,\}]/g,"");
+                        msid = SDPUtil.filter_special_chars(msid);
                         elem.c('parameter');
                         elem.attrs({name: "msid", value:msid});
                         elem.up();
@@ -253,11 +256,9 @@ SDP.prototype.toJingle = function (elem, thecreator, ssrcs) {
                         elem.c('parameter');
                         elem.attrs({name: "label", value:msid});
                         elem.up();
-                        elem.up();
                     }
-
-
                 }
+                elem.up();
 
                 // XEP-0339 handle ssrc-group attributes
                 var ssrc_group_lines = SDPUtil.find_lines(this.media[i], 'a=ssrc-group:');
@@ -605,9 +606,12 @@ SDP.prototype.jingle2media = function (content) {
     tmp.each(function () {
         var ssrc = this.getAttribute('ssrc');
         $(this).find('>parameter').each(function () {
-            media += 'a=ssrc:' + ssrc + ' ' + this.getAttribute('name');
-            if (this.getAttribute('value') && this.getAttribute('value').length)
-                media += ':' + this.getAttribute('value');
+            var name = this.getAttribute('name');
+            var value = this.getAttribute('value');
+            value = SDPUtil.filter_special_chars(value);
+            media += 'a=ssrc:' + ssrc + ' ' + name;
+            if (value && value.length)
+                media += ':' + value;
             media += '\r\n';
         });
     });

modules/xmpp/SDPDiffer.js

@@ -1,3 +1,6 @@
+
+var SDPUtil = require("./SDPUtil");
+
 function SDPDiffer(mySDP, otherSDP) {
     this.mySDP = mySDP;
     this.otherSDP = otherSDP;
@@ -130,8 +133,11 @@ SDPDiffer.prototype.toJingle = function(modify) {
                 if (kv.indexOf(':') == -1) {
                     modify.attrs({ name: kv });
                 } else {
-                    modify.attrs({ name: kv.split(':', 2)[0] });
-                    modify.attrs({ value: kv.split(':', 2)[1] });
+                    var nv = kv.split(':', 2);
+                    var name = nv[0];
+                    var value = SDPUtil.filter_special_chars(nv[1]);
+                    modify.attrs({ name: name });
+                    modify.attrs({ value: value });
                 }
                 modify.up(); // end of parameter
             });

modules/xmpp/SDPUtil.js

@@ -1,4 +1,7 @@
 SDPUtil = {
+    filter_special_chars: function (text) {
+        return text.replace(/[\\\/\{,\}\+]/g, "");
+    },
     iceparams: function (mediadesc, sessiondesc) {
         var data = null;
         if (SDPUtil.find_line(mediadesc, 'a=ice-ufrag:', sessiondesc) &&

modules/xmpp/TraceablePeerConnection.js

@@ -1,9 +1,19 @@
+var RTC = require('../RTC/RTC');
+var RTCBrowserType = require("../RTC/RTCBrowserType.js");
 var XMPPEvents = require("../../service/xmpp/XMPPEvents");
+var VideoSSRCHack = require("./VideoSSRCHack");
 
 function TraceablePeerConnection(ice_config, constraints, session) {
     var self = this;
-    var RTCPeerconnection = navigator.mozGetUserMedia ? mozRTCPeerConnection : webkitRTCPeerConnection;
-    this.peerconnection = new RTCPeerconnection(ice_config, constraints);
+    var RTCPeerConnectionType = null;
+    if (RTCBrowserType.isFirefox()) {
+        RTCPeerConnectionType = mozRTCPeerConnection;
+    } else if (RTCBrowserType.isTemasysPluginUsed()) {
+        RTCPeerConnectionType = RTCPeerConnection;
+    } else {
+        RTCPeerConnectionType = webkitRTCPeerConnection;
+    }
+    this.peerconnection = new RTCPeerConnectionType(ice_config, constraints);
     this.updateLog = [];
     this.stats = {};
     this.statsinterval = null;
@@ -15,7 +25,15 @@ function TraceablePeerConnection(ice_config, constraints, session) {
 
     // override as desired
     this.trace = function (what, info) {
-        //console.warn('WTRACE', what, info);
+        /*console.warn('WTRACE', what, info);
+        if (info && RTCBrowserType.isIExplorer()) {
+            if (info.length > 1024) {
+                console.warn('WTRACE', what, info.substr(1024));
+            }
+            if (info.length > 2048) {
+                console.warn('WTRACE', what, info.substr(2048));
+            }
+        }*/
         self.updateLog.push({
             time: new Date(),
             type: what,
@@ -24,7 +42,9 @@ function TraceablePeerConnection(ice_config, constraints, session) {
     };
     this.onicecandidate = null;
     this.peerconnection.onicecandidate = function (event) {
-        self.trace('onicecandidate', JSON.stringify(event.candidate, null, ' '));
+        // FIXME: this causes stack overflow with Temasys Plugin
+        if (!RTCBrowserType.isTemasysPluginUsed())
+            self.trace('onicecandidate', JSON.stringify(event.candidate, null, ' '));
         if (self.onicecandidate !== null) {
             self.onicecandidate(event);
         }
@@ -71,13 +91,13 @@ function TraceablePeerConnection(ice_config, constraints, session) {
             self.ondatachannel(event);
         }
     };
-    if (!navigator.mozGetUserMedia && this.maxstats) {
+    // XXX: do all non-firefox browsers which we support also support this?
+    if (!RTCBrowserType.isFirefox() && this.maxstats) {
         this.statsinterval = window.setInterval(function() {
             self.peerconnection.getStats(function(stats) {
                 var results = stats.result();
+                var now = new Date();
                 for (var i = 0; i < results.length; ++i) {
-                    //console.log(results[i].type, results[i].id, results[i].names())
-                    var now = new Date();
                     results[i].names().forEach(function (name) {
                         var id = results[i].id + '-' + name;
                         if (!self.stats[id]) {
@@ -101,9 +121,12 @@ function TraceablePeerConnection(ice_config, constraints, session) {
 
         }, 1000);
     }
-};
+}
 
-dumpSDP = function(description) {
+/**
+ * Returns a string representation of a SessionDescription object.
+ */
+var dumpSDP = function(description) {
     if (typeof description === 'undefined' || description == null) {
         return '';
     }
@@ -111,31 +134,109 @@ dumpSDP = function(description) {
     return 'type: ' + description.type + '\r\n' + description.sdp;
 };
 
+/**
+ * Takes a SessionDescription object and returns a "normalized" version.
+ * Currently it only takes care of ordering the a=ssrc lines.
+ */
+var normalizePlanB = function(desc) {
+    if (typeof desc !== 'object' || desc === null ||
+        typeof desc.sdp !== 'string') {
+        console.warn('An empty description was passed as an argument.');
+        return desc;
+    }
+
+    var transform = require('sdp-transform');
+    var session = transform.parse(desc.sdp);
+
+    if (typeof session !== 'undefined' && typeof session.media !== 'undefined' &&
+        Array.isArray(session.media)) {
+        session.media.forEach(function (mLine) {
+
+            // Chrome appears to be picky about the order in which a=ssrc lines
+            // are listed in an m-line when rtx is enabled (and thus there are
+            // a=ssrc-group lines with FID semantics). Specifically if we have
+            // "a=ssrc-group:FID S1 S2" and the "a=ssrc:S2" lines appear before
+            // the "a=ssrc:S1" lines, SRD fails.
+            // So, put SSRC which appear as the first SSRC in an FID ssrc-group
+            // first.
+            var firstSsrcs = [];
+            var newSsrcLines = [];
+
+            if (typeof mLine.ssrcGroups !== 'undefined' && Array.isArray(mLine.ssrcGroups)) {
+                mLine.ssrcGroups.forEach(function (group) {
+                    if (typeof group.semantics !== 'undefined' &&
+                        group.semantics === 'FID') {
+                        if (typeof group.ssrcs !== 'undefined') {
+                            firstSsrcs.push(Number(group.ssrcs.split(' ')[0]));
+                        }
+                    }
+                });
+            }
+
+            if (typeof mLine.ssrcs !== 'undefined' && Array.isArray(mLine.ssrcs)) {
+                for (var i = 0; i<mLine.ssrcs.length; i++){
+                    if (typeof mLine.ssrcs[i] === 'object'
+                        && typeof mLine.ssrcs[i].id !== 'undefined'
+                        && $.inArray(mLine.ssrcs[i].id, firstSsrcs) == 0) {
+                        newSsrcLines.push(mLine.ssrcs[i]);
+                        delete mLine.ssrcs[i];
+                    }
+                }
+
+                for (var i = 0; i<mLine.ssrcs.length; i++){
+                    if (typeof mLine.ssrcs[i] !== 'undefined') {
+                        newSsrcLines.push(mLine.ssrcs[i]);
+                    }
+                }
+
+                mLine.ssrcs = newSsrcLines;
+            }
+        });
+    }
+
+    var resStr = transform.write(session);
+    return new RTCSessionDescription({
+        type: desc.type,
+        sdp: resStr
+    });
+};
+
 if (TraceablePeerConnection.prototype.__defineGetter__ !== undefined) {
-    TraceablePeerConnection.prototype.__defineGetter__('signalingState', function() { return this.peerconnection.signalingState; });
-    TraceablePeerConnection.prototype.__defineGetter__('iceConnectionState', function() { return this.peerconnection.iceConnectionState; });
-    TraceablePeerConnection.prototype.__defineGetter__('localDescription', function() {
-        var desc = this.peerconnection.localDescription;
-        this.trace('getLocalDescription::preTransform', dumpSDP(desc));
+    TraceablePeerConnection.prototype.__defineGetter__(
+        'signalingState',
+        function() { return this.peerconnection.signalingState; });
+    TraceablePeerConnection.prototype.__defineGetter__(
+        'iceConnectionState',
+        function() { return this.peerconnection.iceConnectionState; });
+    TraceablePeerConnection.prototype.__defineGetter__(
+        'localDescription',
+        function() {
+            var desc = this.peerconnection.localDescription;
 
-        // if we're running on FF, transform to Plan B first.
-        if (navigator.mozGetUserMedia) {
-            desc = this.interop.toPlanB(desc);
-            this.trace('getLocalDescription::postTransform (Plan B)', dumpSDP(desc));
-        }
-        return desc;
-    });
-    TraceablePeerConnection.prototype.__defineGetter__('remoteDescription', function() {
-        var desc = this.peerconnection.remoteDescription;
-        this.trace('getRemoteDescription::preTransform', dumpSDP(desc));
+            desc = VideoSSRCHack.mungeLocalVideoSSRC(desc);
+            
+            this.trace('getLocalDescription::preTransform', dumpSDP(desc));
 
-        // if we're running on FF, transform to Plan B first.
-        if (navigator.mozGetUserMedia) {
-            desc = this.interop.toPlanB(desc);
-            this.trace('getRemoteDescription::postTransform (Plan B)', dumpSDP(desc));
-        }
-        return desc;
-    });
+            // if we're running on FF, transform to Plan B first.
+            if (RTCBrowserType.usesUnifiedPlan()) {
+                desc = this.interop.toPlanB(desc);
+                this.trace('getLocalDescription::postTransform (Plan B)', dumpSDP(desc));
+            }
+            return desc;
+        });
+    TraceablePeerConnection.prototype.__defineGetter__(
+        'remoteDescription',
+        function() {
+            var desc = this.peerconnection.remoteDescription;
+            this.trace('getRemoteDescription::preTransform', dumpSDP(desc));
+
+            // if we're running on FF, transform to Plan B first.
+            if (RTCBrowserType.usesUnifiedPlan()) {
+                desc = this.interop.toPlanB(desc);
+                this.trace('getRemoteDescription::postTransform (Plan B)', dumpSDP(desc));
+            }
+            return desc;
+        });
 }
 
 TraceablePeerConnection.prototype.addStream = function (stream) {
@@ -147,7 +248,6 @@ TraceablePeerConnection.prototype.addStream = function (stream) {
     catch (e)
     {
         console.error(e);
-        return;
     }
 };
 
@@ -155,16 +255,26 @@ TraceablePeerConnection.prototype.removeStream = function (stream, stopStreams)
     this.trace('removeStream', stream.id);
     if(stopStreams) {
         stream.getAudioTracks().forEach(function (track) {
-            track.stop();
+            // stop() not supported with IE
+            if (track.stop) {
+                track.stop();
+            }
         });
         stream.getVideoTracks().forEach(function (track) {
-            track.stop();
+            // stop() not supported with IE
+            if (track.stop) {
+                track.stop();
+            }
         });
+        if (stream.stop) {
+            stream.stop();
+        }
     }
 
     try {
         // FF doesn't support this yet.
-        this.peerconnection.removeStream(stream);
+        if (this.peerconnection.removeStream)
+            this.peerconnection.removeStream(stream);
     } catch (e) {
         console.error(e);
     }
@@ -175,10 +285,11 @@ TraceablePeerConnection.prototype.createDataChannel = function (label, opts) {
     return this.peerconnection.createDataChannel(label, opts);
 };
 
-TraceablePeerConnection.prototype.setLocalDescription = function (description, successCallback, failureCallback) {
+TraceablePeerConnection.prototype.setLocalDescription
+        = function (description, successCallback, failureCallback) {
     this.trace('setLocalDescription::preTransform', dumpSDP(description));
     // if we're running on FF, transform to Plan A first.
-    if (navigator.mozGetUserMedia) {
+    if (RTCBrowserType.usesUnifiedPlan()) {
         description = this.interop.toUnifiedPlan(description);
         this.trace('setLocalDescription::postTransform (Plan A)', dumpSDP(description));
     }
@@ -201,17 +312,23 @@ TraceablePeerConnection.prototype.setLocalDescription = function (description, s
      */
 };
 
-TraceablePeerConnection.prototype.setRemoteDescription = function (description, successCallback, failureCallback) {
+TraceablePeerConnection.prototype.setRemoteDescription
+        = function (description, successCallback, failureCallback) {
     this.trace('setRemoteDescription::preTransform', dumpSDP(description));
     // TODO the focus should squeze or explode the remote simulcast
     description = this.simulcast.mungeRemoteDescription(description);
     this.trace('setRemoteDescription::postTransform (simulcast)', dumpSDP(description));
 
     // if we're running on FF, transform to Plan A first.
-    if (navigator.mozGetUserMedia) {
+    if (RTCBrowserType.usesUnifiedPlan()) {
         description = this.interop.toUnifiedPlan(description);
         this.trace('setRemoteDescription::postTransform (Plan A)', dumpSDP(description));
     }
+
+    if (RTCBrowserType.usesPlanB()) {
+        description = normalizePlanB(description);
+    }
+
     var self = this;
     this.peerconnection.setRemoteDescription(description,
         function () {
@@ -239,20 +356,24 @@ TraceablePeerConnection.prototype.close = function () {
     this.peerconnection.close();
 };
 
-TraceablePeerConnection.prototype.createOffer = function (successCallback, failureCallback, constraints) {
+TraceablePeerConnection.prototype.createOffer
+        = function (successCallback, failureCallback, constraints) {
     var self = this;
     this.trace('createOffer', JSON.stringify(constraints, null, ' '));
     this.peerconnection.createOffer(
         function (offer) {
             self.trace('createOfferOnSuccess::preTransform', dumpSDP(offer));
-            // if we're running on FF, transform to Plan B first.
             // NOTE this is not tested because in meet the focus generates the
             // offer.
-            if (navigator.mozGetUserMedia) {
+
+            // if we're running on FF, transform to Plan B first.
+            if (RTCBrowserType.usesUnifiedPlan()) {
                 offer = self.interop.toPlanB(offer);
                 self.trace('createOfferOnSuccess::postTransform (Plan B)', dumpSDP(offer));
             }
 
+            offer = VideoSSRCHack.mungeLocalVideoSSRC(offer);
+
             if (config.enableSimulcast && self.simulcast.isSupported()) {
                 offer = self.simulcast.mungeLocalDescription(offer);
                 self.trace('createOfferOnSuccess::postTransform (simulcast)', dumpSDP(offer));
@@ -267,20 +388,25 @@ TraceablePeerConnection.prototype.createOffer = function (successCallback, failu
     );
 };
 
-TraceablePeerConnection.prototype.createAnswer = function (successCallback, failureCallback, constraints) {
+TraceablePeerConnection.prototype.createAnswer
+        = function (successCallback, failureCallback, constraints) {
     var self = this;
     this.trace('createAnswer', JSON.stringify(constraints, null, ' '));
     this.peerconnection.createAnswer(
         function (answer) {
-            self.trace('createAnswerOnSuccess::preTransfom', dumpSDP(answer));
+            self.trace('createAnswerOnSuccess::preTransform', dumpSDP(answer));
             // if we're running on FF, transform to Plan A first.
-            if (navigator.mozGetUserMedia) {
+            if (RTCBrowserType.usesUnifiedPlan()) {
                 answer = self.interop.toPlanB(answer);
-                self.trace('createAnswerOnSuccess::postTransfom (Plan B)', dumpSDP(answer));
+                self.trace('createAnswerOnSuccess::postTransform (Plan B)', dumpSDP(answer));
             }
+
+            // munge local video SSRC
+            answer = VideoSSRCHack.mungeLocalVideoSSRC(answer);
+
             if (config.enableSimulcast && self.simulcast.isSupported()) {
                 answer = self.simulcast.mungeLocalDescription(answer);
-                self.trace('createAnswerOnSuccess::postTransfom (simulcast)', dumpSDP(answer));
+                self.trace('createAnswerOnSuccess::postTransform (simulcast)', dumpSDP(answer));
             }
             successCallback(answer);
         },
@@ -292,8 +418,9 @@ TraceablePeerConnection.prototype.createAnswer = function (successCallback, fail
     );
 };
 
-TraceablePeerConnection.prototype.addIceCandidate = function (candidate, successCallback, failureCallback) {
-    var self = this;
+TraceablePeerConnection.prototype.addIceCandidate
+        = function (candidate, successCallback, failureCallback) {
+    //var self = this;
     this.trace('addIceCandidate', JSON.stringify(candidate, null, ' '));
     this.peerconnection.addIceCandidate(candidate);
     /* maybe later
@@ -311,13 +438,12 @@ TraceablePeerConnection.prototype.addIceCandidate = function (candidate, success
 };
 
 TraceablePeerConnection.prototype.getStats = function(callback, errback) {
-    if (navigator.mozGetUserMedia) {
+    // TODO: Is this the correct way to handle Opera, Temasys?
+    if (RTCBrowserType.isFirefox()) {
         // ignore for now...
         if(!errback)
-            errback = function () {
-
-            }
-        this.peerconnection.getStats(null,callback,errback);
+            errback = function () {};
+        this.peerconnection.getStats(null, callback, errback);
     } else {
         this.peerconnection.getStats(callback);
     }

modules/xmpp/VideoSSRCHack.js

@@ -0,0 +1,169 @@
+/* global $ */
+
+/*
+ The purpose of this hack is to re-use SSRC of first video stream ever created
+ for any video streams created later on. In order to do that this hack:
+
+ 1. Stores the SSRC of the first video stream created by
+   a) scanning Jingle session-accept/session-invite for existing video SSRC
+   b) watching for 'source-add' for new video stream if it has not been
+      created in step a)
+ 2. Exposes method 'mungeLocalVideoSSRC' which replaces any new video SSRC with
+    the stored one. It is called by 'TracablePeerConnection' before local SDP is
+    returned to the other parts of the application.
+ 3. Scans 'source-remove'/'source-add' notifications for stored video SSRC and
+    blocks those notifications. This makes Jicofo and all participants think
+    that it exists all the time even if the video stream has been removed or
+    replaced locally. Thanks to that there is no additional signaling activity
+    on video mute or when switching to the desktop stream.
+ */
+
+var SDP = require('./SDP');
+
+/**
+ * Stored SSRC of local video stream.
+ */
+var localVideoSSRC;
+
+/**
+ * Method removes <source> element which describes <tt>localVideoSSRC</tt>
+ * from given Jingle IQ.
+ * @param modifyIq 'source-add' or 'source-remove' Jingle IQ.
+ * @param actionName display name of the action which will be printed in log
+ *        messages.
+ * @returns {*} modified Jingle IQ, so that it does not contain <source> element
+ *          corresponding to <tt>localVideoSSRC</tt> or <tt>null</tt> if no
+ *          other SSRCs left to be signaled after removing it.
+ */
+var filterOutSource = function (modifyIq, actionName) {
+    if (!localVideoSSRC)
+        return modifyIq;
+
+    var modifyIqTree = $(modifyIq.tree());
+    var videoSSRC = modifyIqTree.find(
+        '>jingle>content[name="video"]' +
+        '>description>source[ssrc="' + localVideoSSRC + '"]');
+
+    if (!videoSSRC.length) {
+        return modifyIqTree;
+    }
+
+    console.info(
+        'Blocking ' + actionName + ' for local video SSRC: ' + localVideoSSRC);
+
+    videoSSRC.remove();
+
+    // Check if any sources still left to be added/removed
+    if (modifyIqTree.find('>jingle>content>description>source').length) {
+        return modifyIqTree;
+    } else {
+        return null;
+    }
+};
+
+/**
+ * Scans given Jingle IQ for video SSRC and stores it.
+ * @param jingleIq the Jingle IQ to be scanned for video SSRC.
+ */
+var storeLocalVideoSSRC = function (jingleIq) {
+    var videoSSRCs =
+        $(jingleIq.tree())
+            .find('>jingle>content[name="video"]>description>source');
+
+    console.info('Video desc: ', videoSSRCs);
+    if (!videoSSRCs.length)
+        return;
+
+    var ssrc = videoSSRCs.attr('ssrc');
+    if (ssrc) {
+        localVideoSSRC = ssrc;
+        console.info(
+            'Stored local video SSRC for future re-use: ' + localVideoSSRC);
+    } else {
+        console.error('No "ssrc" attribute present in <source> element');
+    }
+};
+
+var LocalVideoSSRCHack = {
+    /**
+     * Method must be called before 'session-initiate' or 'session-invite' is
+     * sent. Scans the IQ for local video SSRC and stores it if detected.
+     *
+     * @param sessionInit our 'session-initiate' or 'session-accept' Jingle IQ
+     *        which will be scanned for local video SSRC.
+     */
+    processSessionInit: function (sessionInit) {
+        if (localVideoSSRC) {
+            console.error("Local SSRC stored already: " + localVideoSSRC);
+            return;
+        }
+        storeLocalVideoSSRC(sessionInit);
+    },
+    /**
+     * If we have local video SSRC stored searched given
+     * <tt>localDescription</tt> for video SSRC and makes sure it is replaced
+     * with the stored one.
+     * @param localDescription local description object that will have local
+     *        video SSRC replaced with the stored one
+     * @returns modified <tt>localDescription</tt> object.
+     */
+    mungeLocalVideoSSRC: function (localDescription) {
+        // IF we have local video SSRC stored make sure it is replaced
+        // with old SSRC
+        if (localVideoSSRC) {
+            var newSdp = new SDP(localDescription.sdp);
+            if (newSdp.media[1].indexOf("a=ssrc:") !== -1 &&
+                !newSdp.containsSSRC(localVideoSSRC)) {
+                // Get new video SSRC
+                var map = newSdp.getMediaSsrcMap();
+                var videoPart = map[1];
+                var videoSSRCs = videoPart.ssrcs;
+                var newSSRC = Object.keys(videoSSRCs)[0];
+
+                console.info(
+                    "Replacing new video SSRC: " + newSSRC +
+                    " with " + localVideoSSRC);
+
+                localDescription.sdp =
+                    newSdp.raw.replace(
+                        new RegExp('a=ssrc:' + newSSRC, 'g'),
+                        'a=ssrc:' + localVideoSSRC);
+            }
+        }
+        return localDescription;
+    },
+    /**
+     * Method must be called before 'source-add' notification is sent. In case
+     * we have local video SSRC advertised already it will be removed from the
+     * notification. If no other SSRCs are described by given IQ null will be
+     * returned which means that there is no point in sending the notification.
+     * @param sourceAdd 'source-add' Jingle IQ to be processed
+     * @returns modified 'source-add' IQ which can be sent to the focus or
+     *          <tt>null</tt> if no notification shall be sent. It is no longer
+     *          a Strophe IQ Builder instance, but DOM element tree.
+     */
+    processSourceAdd: function (sourceAdd) {
+        if (!localVideoSSRC) {
+            // Store local SSRC if available
+            storeLocalVideoSSRC(sourceAdd);
+            return sourceAdd;
+        } else {
+            return filterOutSource(sourceAdd, 'source-add');
+        }
+    },
+    /**
+     * Method must be called before 'source-remove' notification is sent.
+     * Removes local video SSRC from the notification. If there are no other
+     * SSRCs described in the given IQ <tt>null</tt> will be returned which
+     * means that there is no point in sending the notification.
+     * @param sourceRemove 'source-remove' Jingle IQ to be processed
+     * @returns modified 'source-remove' IQ which can be sent to the focus or
+     *          <tt>null</tt> if no notification shall be sent. It is no longer
+     *          a Strophe IQ Builder instance, but DOM element tree.
+     */
+    processSourceRemove: function (sourceRemove) {
+        return filterOutSource(sourceRemove, 'source-remove');
+    }
+};
+
+module.exports = LocalVideoSSRCHack;

modules/xmpp/moderator.js

@@ -1,4 +1,4 @@
-/* global $, $iq, APP, config, connection, UI, messageHandler,
+/* global $, $iq, APP, config, messageHandler,
  roomName, sessionTerminated, Strophe, Util */
 var XMPPEvents = require("../../service/xmpp/XMPPEvents");
 var Settings = require("../settings/Settings");
@@ -69,8 +69,8 @@ var Moderator = {
         function listener(event) {
             if (event.data && event.data.sessionId) {
                 if (event.origin !== window.location.origin) {
-                    console.warn(
-                        "Ignoring sessionId from different origin: " + event.origin);
+                    console.warn("Ignoring sessionId from different origin: " +
+                        event.origin);
                     return;
                 }
                 localStorage.setItem('sessionId', event.data.sessionId);
@@ -219,8 +219,7 @@ var Moderator = {
 
         console.info("Authentication enabled: " + authenticationEnabled);
 
-        externalAuthEnabled
-            = $(resultIq).find(
+        externalAuthEnabled = $(resultIq).find(
                 '>conference>property' +
                 '[name=\'externalAuth\'][value=\'true\']').length > 0;
 
@@ -333,10 +332,8 @@ var Moderator = {
                 // Do not show in case of session invalid
                 // which means just a retry
                 if (!invalidSession) {
-                    APP.UI.messageHandler.notify(
-                        null, "notify.focus",
-                        'disconnected', "notify.focusFail",
-                        {component: focusComponent, ms: retrySec});
+                    eventEmitter.emit(XMPPEvents.FOCUS_DISCONNECTED,
+                        focusComponent, retrySec);
                 }
                 // Reset response timeout
                 getNextTimeout(true);

modules/xmpp/recording.js

@@ -1,4 +1,4 @@
-/* global $, $iq, config, connection, focusMucJid, messageHandler, Moderator,
+/* global $, $iq, config, connection, focusMucJid, messageHandler,
    Toolbar, Util */
 var Moderator = require("./moderator");
 
@@ -19,18 +19,16 @@ var useJirecon = (typeof config.hosts.jirecon != "undefined");
  */
 var jireconRid = null;
 
+/**
+ * The callback to update the recording button. Currently used from colibri
+ * after receiving a pending status.
+ */
+var recordingStateChangeCallback = null;
+
 function setRecordingToken(token) {
     recordingToken = token;
 }
 
-function setRecording(state, token, callback, connection) {
-    if (useJirecon){
-        setRecordingJirecon(state, token, callback, connection);
-    } else {
-        setRecordingColibri(state, token, callback, connection);
-    }
-}
-
 function setRecordingJirecon(state, token, callback, connection) {
     if (state == recordingEnabled){
         return;
@@ -38,9 +36,9 @@ function setRecordingJirecon(state, token, callback, connection) {
 
     var iq = $iq({to: config.hosts.jirecon, type: 'set'})
         .c('recording', {xmlns: 'http://jitsi.org/protocol/jirecon',
-            action: state ? 'start' : 'stop',
+            action: (state === 'on') ? 'start' : 'stop',
             mucjid: connection.emuc.roomjid});
-    if (!state){
+    if (state === 'off'){
         iq.attrs({rid: jireconRid});
     }
 
@@ -52,10 +50,10 @@ function setRecordingJirecon(state, token, callback, connection) {
             // TODO wait for an IQ with the real status, since this is
             // provisional?
             jireconRid = $(result).find('recording').attr('rid');
-            console.log('Recording ' + (state ? 'started' : 'stopped') +
+            console.log('Recording ' + ((state === 'on') ? 'started' : 'stopped') +
                 '(jirecon)' + result);
             recordingEnabled = state;
-            if (!state){
+            if (state === 'off'){
                 jireconRid = null;
             }
 
@@ -81,10 +79,19 @@ function setRecordingColibri(state, token, callback, connection) {
         function (result) {
             console.log('Set recording "', state, '". Result:', result);
             var recordingElem = $(result).find('>conference>recording');
-            var newState = ('true' === recordingElem.attr('state'));
+            var newState = recordingElem.attr('state');
 
             recordingEnabled = newState;
             callback(newState);
+
+            if (newState === 'pending' && recordingStateChangeCallback == null) {
+                recordingStateChangeCallback = callback;
+                connection.addHandler(function(iq){
+                    var state = $(iq).find('recording').attr('state');
+                    if (state)
+                        recordingStateChangeCallback(state);
+                }, 'http://jitsi.org/protocol/colibri', 'iq', null, null, null);
+            }
         },
         function (error) {
             console.warn(error);
@@ -93,9 +100,16 @@ function setRecordingColibri(state, token, callback, connection) {
     );
 }
 
+function setRecording(state, token, callback, connection) {
+    if (useJirecon){
+        setRecordingJirecon(state, token, callback, connection);
+    } else {
+        setRecordingColibri(state, token, callback, connection);
+    }
+}
+
 var Recording = {
-    toggleRecording: function (tokenEmptyCallback,
-                               startingCallback, startedCallback, connection) {
+    toggleRecording: function (tokenEmptyCallback, recordingStateChangeCallback, connection) {
         if (!Moderator.isModerator()) {
             console.log(
                     'non-focus, or conference not yet organized:' +
@@ -108,16 +122,16 @@ var Recording = {
         if (!recordingToken && !useJirecon) {
             tokenEmptyCallback(function (value) {
                 setRecordingToken(value);
-                self.toggleRecording(tokenEmptyCallback,
-                    startingCallback, startedCallback, connection);
+                self.toggleRecording(tokenEmptyCallback, recordingStateChangeCallback, connection);
             });
 
             return;
         }
 
         var oldState = recordingEnabled;
-        startingCallback(!oldState);
-        setRecording(!oldState,
+        var newState = (oldState === 'off' || !oldState) ? 'on' : 'off';
+
+        setRecording(newState,
             recordingToken,
             function (state) {
                 console.log("New recording state: ", state);
@@ -143,13 +157,13 @@ var Recording = {
                     // have been wrong
                     setRecordingToken(null);
                 }
-                startedCallback(state);
+                recordingStateChangeCallback(state);
 
             },
             connection
         );
     }
 
-}
+};
 
 module.exports = Recording;

modules/xmpp/strophe.emuc.js

@@ -4,9 +4,6 @@
  */
 var XMPPEvents = require("../../service/xmpp/XMPPEvents");
 var Moderator = require("./moderator");
-var JingleSession = require("./JingleSession");
-
-var bridgeIsDown = false;
 
 module.exports = function(XMPP, eventEmitter) {
     Strophe.addConnectionPlugin('emuc', {
@@ -21,20 +18,17 @@ module.exports = function(XMPP, eventEmitter) {
         isOwner: false,
         role: null,
         focusMucJid: null,
-        ssrc2jid: {},
+        bridgeIsDown: false,
         init: function (conn) {
             this.connection = conn;
         },
         initPresenceMap: function (myroomjid) {
             this.presMap['to'] = myroomjid;
             this.presMap['xns'] = 'http://jabber.org/protocol/muc';
-            if(APP.RTC.localAudio.isMuted())
-            {
+            if (APP.RTC.localAudio && APP.RTC.localAudio.isMuted()) {
                 this.addAudioInfoToPresence(true);
             }
-
-            if(APP.RTC.localVideo.isMuted())
-            {
+            if (APP.RTC.localVideo && APP.RTC.localVideo.isMuted()) {
                 this.addVideoInfoToPresence(true);
             }
         },
@@ -143,19 +137,21 @@ module.exports = function(XMPP, eventEmitter) {
             // Parse audio info tag.
             var audioMuted = $(pres).find('>audiomuted');
             if (audioMuted.length) {
-                $(document).trigger('audiomuted.muc', [from, audioMuted.text()]);
+                eventEmitter.emit(XMPPEvents.AUDIO_MUTED,
+                    from, (audioMuted.text() === "true"));
             }
 
             // Parse video info tag.
             var videoMuted = $(pres).find('>videomuted');
             if (videoMuted.length) {
-                $(document).trigger('videomuted.muc', [from, videoMuted.text()]);
+                eventEmitter.emit(XMPPEvents.VIDEO_MUTED,
+                    from, (videoMuted.text() === "true"));
             }
 
             var startMuted = $(pres).find('>startmuted');
             if (startMuted.length)
             {
-                eventEmitter.emit(XMPPEvents.START_MUTED,
+                eventEmitter.emit(XMPPEvents.START_MUTED_SETTING_CHANGED,
                     startMuted.attr("audio") === "true", startMuted.attr("video") === "true");
             }
 
@@ -178,6 +174,16 @@ module.exports = function(XMPP, eventEmitter) {
                     Strophe.getResourceFromJid(from), devicesValues);
             }
 
+            var videoType = $(pres).find('>videoType');
+            if (videoType.length)
+            {
+                if (videoType.text().length)
+                {
+                    eventEmitter.emit(XMPPEvents.VIDEO_TYPE,
+                        Strophe.getResourceFromJid(from), videoType.text());
+                }
+            }
+
             var stats = $(pres).find('>stats');
             if (stats.length) {
                 var statsObj = {};
@@ -279,14 +285,6 @@ module.exports = function(XMPP, eventEmitter) {
                 return true;
             }
 
-            var self = this;
-            // Remove old ssrcs coming from the jid
-            Object.keys(this.ssrc2jid).forEach(function (ssrc) {
-                if (self.ssrc2jid[ssrc] == from) {
-                    delete self.ssrc2jid[ssrc];
-                }
-            });
-
             // Status code 110 indicates that this notification is "self-presence".
             if (!$(pres).find('>x[xmlns="http://jabber.org/protocol/muc#user"]>status[code="110"]').length) {
                 delete this.members[from];
@@ -329,19 +327,15 @@ module.exports = function(XMPP, eventEmitter) {
                     // We're either missing Jicofo/Prosody config for anonymous
                     // domains or something is wrong.
 //                    XMPP.promptLogin();
-                    APP.UI.messageHandler.openReportDialog(null,
-                        "dialog.joinError", pres);
+                    eventEmitter.emit(XMPPEvents.ROOM_JOIN_ERROR, pres);
+
                 } else {
                     console.warn('onPresError ', pres);
-                    APP.UI.messageHandler.openReportDialog(null,
-                        "dialog.connectError",
-                        pres);
+                    eventEmitter.emit(XMPPEvents.ROOM_CONNECT_ERROR, pres);
                 }
             } else {
                 console.warn('onPresError ', pres);
-                APP.UI.messageHandler.openReportDialog(null,
-                    "dialog.connectError",
-                    pres);
+                eventEmitter.emit(XMPPEvents.ROOM_CONNECT_ERROR, pres);
             }
             return true;
         },
@@ -498,6 +492,11 @@ module.exports = function(XMPP, eventEmitter) {
                     .t(this.presMap['videomuted']).up();
             }
 
+            if (this.presMap['videoTypeNs']) {
+                pres.c('videoType', { xmlns: this.presMap['videoTypeNs'] })
+                    .t(this.presMap['videoType']).up();
+            }
+
             if (this.presMap['statsns']) {
                 var stats = pres.c('stats', {xmlns: this.presMap['statsns']});
                 for (var stat in this.presMap["stats"])
@@ -513,26 +512,6 @@ module.exports = function(XMPP, eventEmitter) {
                     .c('current').t(this.presMap['prezicurrent']).up().up();
             }
 
-            if (this.presMap['medians']) {
-                pres.c('media', {xmlns: this.presMap['medians']});
-                var sourceNumber = 0;
-                Object.keys(this.presMap).forEach(function (key) {
-                    if (key.indexOf('source') >= 0) {
-                        sourceNumber++;
-                    }
-                });
-                if (sourceNumber > 0)
-                    for (var i = 1; i <= sourceNumber / 3; i++) {
-                        pres.c('source',
-                            {type: this.presMap['source' + i + '_type'],
-                                ssrc: this.presMap['source' + i + '_ssrc'],
-                                direction: this.presMap['source' + i + '_direction']
-                                    || 'sendrecv' }
-                        ).up();
-                    }
-                pres.up();
-            }
-
             if(this.presMap["startMuted"] !== undefined)
             {
                 pres.c("startmuted", {audio: this.presMap["startMuted"].audio,
@@ -547,24 +526,16 @@ module.exports = function(XMPP, eventEmitter) {
         addDisplayNameToPresence: function (displayName) {
             this.presMap['displayName'] = displayName;
         },
-        addMediaToPresence: function (sourceNumber, mtype, ssrcs, direction) {
-            if (!this.presMap['medians'])
-                this.presMap['medians'] = 'http://estos.de/ns/mjs';
-
-            this.presMap['source' + sourceNumber + '_type'] = mtype;
-            this.presMap['source' + sourceNumber + '_ssrc'] = ssrcs;
-            this.presMap['source' + sourceNumber + '_direction'] = direction;
-        },
         addDevicesToPresence: function (devices) {
             this.presMap['devices'] = devices;
         },
-        clearPresenceMedia: function () {
-            var self = this;
-            Object.keys(this.presMap).forEach(function (key) {
-                if (key.indexOf('source') != -1) {
-                    delete self.presMap[key];
-                }
-            });
+        /**
+         * Adds the info about the type of our video stream.
+         * @param videoType 'camera' or 'screen'
+         */
+        addVideoTypeToPresence: function (videoType) {
+            this.presMap['videoTypeNs'] = 'http://jitsi.org/jitmeet/video';
+            this.presMap['videoType'] = videoType;
         },
         addPreziToPresence: function (url, currentSlide) {
             this.presMap['prezins'] = 'http://jitsi.org/jitmeet/prezi';
@@ -640,51 +611,25 @@ module.exports = function(XMPP, eventEmitter) {
 
             Moderator.onMucMemberLeft(jid);
         },
-        parsePresence: function (from, memeber, pres) {
-            if($(pres).find(">bridgeIsDown").length > 0 && !bridgeIsDown) {
-                bridgeIsDown = true;
+        parsePresence: function (from, member, pres) {
+            if($(pres).find(">bridgeIsDown").length > 0 && !this.bridgeIsDown) {
+                this.bridgeIsDown = true;
                 eventEmitter.emit(XMPPEvents.BRIDGE_DOWN);
             }
 
-            if(memeber.isFocus)
+            if(member.isFocus)
                 return;
 
-            var self = this;
-            // Remove old ssrcs coming from the jid
-            Object.keys(this.ssrc2jid).forEach(function (ssrc) {
-                if (self.ssrc2jid[ssrc] == from) {
-                    delete self.ssrc2jid[ssrc];
-                }
-            });
-
-            var changedStreams = [];
-            $(pres).find('>media[xmlns="http://estos.de/ns/mjs"]>source').each(function (idx, ssrc) {
-                //console.log(jid, 'assoc ssrc', ssrc.getAttribute('type'), ssrc.getAttribute('ssrc'));
-                var ssrcV = ssrc.getAttribute('ssrc');
-                self.ssrc2jid[ssrcV] = from;
-
-                var type = ssrc.getAttribute('type');
-
-                var direction = ssrc.getAttribute('direction');
-
-                changedStreams.push({type: type, direction: direction});
-
-            });
-
-            eventEmitter.emit(XMPPEvents.STREAMS_CHANGED, from, changedStreams);
-
             var displayName = !config.displayJids
-                ? memeber.displayName : Strophe.getResourceFromJid(from);
+                ? member.displayName : Strophe.getResourceFromJid(from);
 
-            if (displayName && displayName.length > 0)
-            {
+            if (displayName && displayName.length > 0) {
                 eventEmitter.emit(XMPPEvents.DISPLAY_NAME_CHANGED, from, displayName);
             }
 
-
             var id = $(pres).find('>userID').text();
             var email = $(pres).find('>email');
-            if(email.length > 0) {
+            if (email.length > 0) {
                 id = email.text();
             }
 

modules/xmpp/strophe.jingle.js

@@ -2,10 +2,10 @@
 
 var JingleSession = require("./JingleSession");
 var XMPPEvents = require("../../service/xmpp/XMPPEvents");
+var RTCBrowserType = require("../RTC/RTCBrowserType");
 
 
-module.exports = function(XMPP, eventEmitter)
-{
+module.exports = function(XMPP, eventEmitter) {
     function CallIncomingJingle(sid, connection) {
         var sess = connection.jingle.sessions[sid];
 
@@ -20,7 +20,7 @@ module.exports = function(XMPP, eventEmitter)
         sess.sendAnswer();
         sess.accept();
 
-    };
+    }
 
     Strophe.addConnectionPlugin('jingle', {
         connection: null,
@@ -49,16 +49,18 @@ module.exports = function(XMPP, eventEmitter)
                 this.connection.disco.addFeature('urn:xmpp:jingle:apps:rtp:audio');
                 this.connection.disco.addFeature('urn:xmpp:jingle:apps:rtp:video');
 
+                if (RTCBrowserType.isChrome() || RTCBrowserType.isOpera()
+                    || RTCBrowserType.isTemasysPluginUsed()) {
+                    this.connection.disco.addFeature('urn:ietf:rfc:4588');
+                }
 
-                // this is dealt with by SDP O/A so we don't need to annouce this
+                // this is dealt with by SDP O/A so we don't need to announce this
                 //this.connection.disco.addFeature('urn:xmpp:jingle:apps:rtp:rtcp-fb:0'); // XEP-0293
                 //this.connection.disco.addFeature('urn:xmpp:jingle:apps:rtp:rtp-hdrext:0'); // XEP-0294
-                if (config.useRtcpMux) {
-                    this.connection.disco.addFeature('urn:ietf:rfc:5761'); // rtcp-mux
-                }
-                if (config.useBundle) {
-                    this.connection.disco.addFeature('urn:ietf:rfc:5888'); // a=group, e.g. bundle
-                }
+
+                this.connection.disco.addFeature('urn:ietf:rfc:5761'); // rtcp-mux
+                this.connection.disco.addFeature('urn:ietf:rfc:5888'); // a=group, e.g. bundle
+
                 //this.connection.disco.addFeature('urn:ietf:rfc:5576'); // a=ssrc
             }
             this.connection.addHandler(this.onJingle.bind(this), 'urn:xmpp:jingle:1', 'iq', 'set', null, null);
@@ -83,9 +85,8 @@ module.exports = function(XMPP, eventEmitter)
                     this.connection.send(ack);
                     return true;
                 }
-                // compare from to sess.peerjid (bare jid comparison for later compat with message-mode)
                 // local jid is not checked
-                if (Strophe.getBareJidFromJid(fromJid) != Strophe.getBareJidFromJid(sess.peerjid)) {
+                if (fromJid != sess.peerjid) {
                     console.warn('jid mismatch for session id', sid, fromJid, sess.peerjid);
                     ack.type = 'error';
                     ack.c('error', {type: 'cancel'})
@@ -110,12 +111,11 @@ module.exports = function(XMPP, eventEmitter)
             switch (action) {
                 case 'session-initiate':
                     var startMuted = $(iq).find('jingle>startmuted');
-                    if(startMuted && startMuted.length > 0)
-                    {
+                    if (startMuted && startMuted.length > 0) {
                         var audioMuted = startMuted.attr("audio");
                         var videoMuted = startMuted.attr("video");
-                        APP.UI.setInitialMuteFromFocus((audioMuted === "true"),
-                            (videoMuted === "true"));
+                        eventEmitter.emit(XMPPEvents.START_MUTED_FROM_FOCUS,
+                                audioMuted === "true", videoMuted === "true");
                     }
                     sess = new JingleSession(
                         $(iq).attr('to'), $(iq).find('jingle').attr('sid'),
@@ -324,9 +324,9 @@ module.exports = function(XMPP, eventEmitter)
         },
 
         /**
-         * Populates the log data
+         * Returns the data saved in 'updateLog' in a format to be logged.
          */
-        populateData: function () {
+        getLog: function () {
             var data = {};
             var self = this;
             Object.keys(this.sessions).forEach(function (sid) {

modules/xmpp/strophe.moderate.js

@@ -3,7 +3,9 @@
 /**
  * Moderate connection plugin.
  */
-module.exports = function (XMPP) {
+var XMPPEvents = require("../../service/xmpp/XMPPEvents");
+
+module.exports = function (XMPP, eventEmitter) {
     Strophe.addConnectionPlugin('moderate', {
         connection: null,
         init: function (conn) {
@@ -44,7 +46,7 @@ module.exports = function (XMPP) {
             var mute = $(iq).find('mute');
             if (mute.length) {
                 var doMuteAudio = mute.text() === "true";
-                APP.UI.setAudioMuted(doMuteAudio);
+                eventEmitter.emit(XMPPEvents.AUDIO_MUTED_BY_FOCUS, doMuteAudio);
                 XMPP.forceMuted = doMuteAudio;
             }
             return true;

modules/xmpp/xmpp.js

@@ -7,7 +7,6 @@ var Settings = require("../settings/Settings");
 var Pako = require("pako");
 var StreamEventTypes = require("../../service/RTC/StreamEventTypes");
 var RTCEvents = require("../../service/RTC/RTCEvents");
-var UIEvents = require("../../service/UI/UIEvents");
 var XMPPEvents = require("../../service/xmpp/XMPPEvents");
 var retry = require('retry');
 
@@ -27,9 +26,6 @@ function connect(jid, password) {
         connection = XMPP.createConnection();
         Moderator.setConnection(connection);
 
-        if (connection.disco) {
-            // for chrome, add multistream cap
-        }
         connection.jingle.pc_constraints = APP.RTC.getPCConstraints();
         if (config.useIPv6) {
             // https://code.google.com/p/webrtc/issues/detail?id=2828
@@ -132,8 +128,8 @@ function connect(jid, password) {
                     // if we get disconnected from the XMPP server permanently.
 
                     // If the connection failed, retry.
-                    if (connectionFailed
-                        && faultTolerantConnect.retry("connection-failed")) {
+                    if (connectionFailed &&
+                        faultTolerantConnect.retry("connection-failed")) {
                         return;
                     }
 
@@ -152,41 +148,53 @@ function connect(jid, password) {
 }
 
 
-
 function maybeDoJoin() {
     if (connection && connection.connected &&
-        Strophe.getResourceFromJid(connection.jid)
-        && (APP.RTC.localAudio || APP.RTC.localVideo)) {
+        Strophe.getResourceFromJid(connection.jid) &&
+        (APP.RTC.localAudio || APP.RTC.localVideo)) {
         // .connected is true while connecting?
         doJoin();
     }
 }
 
 function doJoin() {
-    var roomName = APP.UI.generateRoomName();
-
-    Moderator.allocateConferenceFocus(
-        roomName, APP.UI.checkForNicknameAndJoin);
+    eventEmitter.emit(XMPPEvents.READY_TO_JOIN);
 }
 
 function initStrophePlugins()
 {
     require("./strophe.emuc")(XMPP, eventEmitter);
     require("./strophe.jingle")(XMPP, eventEmitter);
-    require("./strophe.moderate")(XMPP);
+    require("./strophe.moderate")(XMPP, eventEmitter);
     require("./strophe.util")();
     require("./strophe.rayo")();
     require("./strophe.logger")();
 }
 
+/**
+ * If given <tt>localStream</tt> is video one this method will advertise it's
+ * video type in MUC presence.
+ * @param localStream new or modified <tt>LocalStream</tt>.
+ */
+function broadcastLocalVideoType(localStream) {
+    if (localStream.videoType)
+        XMPP.addToPresence('videoType', localStream.videoType);
+}
+
 function registerListeners() {
-    APP.RTC.addStreamListener(maybeDoJoin,
-        StreamEventTypes.EVENT_TYPE_LOCAL_CREATED);
+    APP.RTC.addStreamListener(
+        function (localStream) {
+            maybeDoJoin();
+            broadcastLocalVideoType(localStream);
+        },
+        StreamEventTypes.EVENT_TYPE_LOCAL_CREATED
+    );
+    APP.RTC.addStreamListener(
+        broadcastLocalVideoType,
+        StreamEventTypes.EVENT_TYPE_LOCAL_CHANGED
+    );
     APP.RTC.addListener(RTCEvents.AVAILABLE_DEVICES_CHANGED, function (devices) {
         XMPP.addToPresence("devices", devices);
-    })
-    APP.UI.addListener(UIEvents.NICKNAME_CHANGED, function (nickname) {
-        XMPP.addToPresence("displayName", nickname);
     });
 }
 
@@ -205,7 +213,8 @@ var unload = (function () {
                 async: false,
                 cache: false,
                 contentType: 'application/xml',
-                data: "<body rid='" + (connection.rid || connection._proto.rid) +
+                data: "<body rid='" +
+                    (connection.rid || connection._proto.rid) +
                     "' xmlns='http://jabber.org/protocol/httpbind' sid='" +
                     (connection.sid || connection._proto.sid)  +
                     "' type='terminate'>" +
@@ -231,7 +240,7 @@ function setupEvents() {
     // (change URL). If this participant doesn't unload properly, then it
     // becomes a ghost for the rest of the participants that stay in the
     // conference. Thankfully handling the 'unload' event in addition to the
-    // 'beforeunload' event seems to garante the execution of the 'unload'
+    // 'beforeunload' event seems to guarantee the execution of the 'unload'
     // method at least once.
     //
     // The 'unload' method can safely be run multiple times, it will actually do
@@ -279,13 +288,10 @@ var XMPP = {
         return Strophe.getStatusString(status);
     },
     promptLogin: function () {
-        // FIXME: re-use LoginDialog which supports retries
-        APP.UI.showLoginPopup(connect);
+        eventEmitter.emit(XMPPEvents.PROMPT_FOR_LOGIN);
     },
-    joinRoom: function(roomName, useNicks, nick)
-    {
-        var roomjid;
-        roomjid = roomName;
+    joinRoom: function(roomName, useNicks, nick) {
+        var roomjid = roomName;
 
         if (useNicks) {
             if (nick) {
@@ -294,7 +300,6 @@ var XMPP = {
                 roomjid += '/' + Strophe.getNodeFromJid(connection.jid);
             }
         } else {
-
             var tmpJid = Strophe.getNodeFromJid(connection.jid);
 
             if(!authenticatedUser)
@@ -331,14 +336,12 @@ var XMPP = {
         }
         eventEmitter.emit(XMPPEvents.DISPOSE_CONFERENCE, onUnload);
         connection.jingle.activecall = null;
-        if(!onUnload)
-        {
+        if (!onUnload) {
             this.sessionTerminated = true;
             connection.emuc.doLeave();
         }
     },
-    addListener: function(type, listener)
-    {
+    addListener: function(type, listener) {
         eventEmitter.on(type, listener);
     },
     removeListener: function (type, listener) {
@@ -362,8 +365,12 @@ var XMPP = {
     isExternalAuthEnabled: function () {
         return Moderator.isExternalAuthEnabled();
     },
+    isConferenceInProgress: function () {
+        return connection && connection.jingle.activecall &&
+            connection.jingle.activecall.peerconnection;
+    },
     switchStreams: function (stream, oldStream, callback, isAudio) {
-        if (connection && connection.jingle.activecall) {
+        if (this.isConferenceInProgress()) {
             // FIXME: will block switchInProgress on true value in case of exception
             connection.jingle.activecall.switchStreams(stream, oldStream, callback, isAudio);
         } else {
@@ -402,7 +409,6 @@ var XMPP = {
             return false;
         }
 
-
         if (this.forceMuted && !mute) {
             console.info("Asking focus for unmute");
             connection.moderate.setMute(connection.emuc.myroomjid, mute);
@@ -415,16 +421,11 @@ var XMPP = {
             return true;
         }
 
-        // It is not clear what is the right way to handle multiple tracks.
-        // So at least make sure that they are all muted or all unmuted and
-        // that we send presence just once.
-        APP.RTC.localAudio.setMute(!mute);
-        // isMuted is the opposite of audioEnabled
+        APP.RTC.localAudio.setMute(mute);
         this.sendAudioInfoPresence(mute, callback);
         return true;
     },
-    sendAudioInfoPresence: function(mute, callback)
-    {
+    sendAudioInfoPresence: function(mute, callback) {
         if(connection) {
             connection.emuc.addAudioInfoToPresence(mute);
             connection.emuc.sendPresence();
@@ -432,56 +433,13 @@ var XMPP = {
         callback();
         return true;
     },
-    // Really mute video, i.e. dont even send black frames
-    muteVideo: function (pc, unmute) {
-        // FIXME: this probably needs another of those lovely state safeguards...
-        // which checks for iceconn == connected and sigstate == stable
-        pc.setRemoteDescription(pc.remoteDescription,
-            function () {
-                pc.createAnswer(
-                    function (answer) {
-                        var sdp = new SDP(answer.sdp);
-                        if (sdp.media.length > 1) {
-                            if (unmute)
-                                sdp.media[1] = sdp.media[1].replace('a=recvonly', 'a=sendrecv');
-                            else
-                                sdp.media[1] = sdp.media[1].replace('a=sendrecv', 'a=recvonly');
-                            sdp.raw = sdp.session + sdp.media.join('');
-                            answer.sdp = sdp.raw;
-                        }
-                        pc.setLocalDescription(answer,
-                            function () {
-                                console.log('mute SLD ok');
-                            },
-                            function (error) {
-                                console.log('mute SLD error');
-                                APP.UI.messageHandler.showError("dialog.error",
-                                    "dialog.SLDFailure");
-                            }
-                        );
-                    },
-                    function (error) {
-                        console.log(error);
-                        APP.UI.messageHandler.showError();
-                    }
-                );
-            },
-            function (error) {
-                console.log('muteVideo SRD error');
-                APP.UI.messageHandler.showError("dialog.error",
-                    "dialog.SRDFailure");
-
-            }
-        );
-    },
     toggleRecording: function (tokenEmptyCallback,
-                               startingCallback, startedCallback) {
+                               recordingStateChangeCallback) {
         Recording.toggleRecording(tokenEmptyCallback,
-            startingCallback, startedCallback, connection);
+            recordingStateChangeCallback, connection);
     },
     addToPresence: function (name, value, dontSend) {
-        switch (name)
-        {
+        switch (name) {
             case "displayName":
                 connection.emuc.addDisplayNameToPresence(value);
                 break;
@@ -500,6 +458,9 @@ var XMPP = {
             case "devices":
                 connection.emuc.addDevicesToPresence(value);
                 break;
+            case "videoType":
+                connection.emuc.addVideoTypeToPresence(value);
+                break;
             case "startMuted":
                 if(!Moderator.isModerator())
                     return;
@@ -543,17 +504,13 @@ var XMPP = {
         connection.send(message);
         return true;
     },
-    populateData: function () {
-        var data = {};
-        if (connection.jingle) {
-            data = connection.jingle.populateData();
-        }
-        return data;
+    // Gets the logs from strophe.jingle.
+    getJingleLog: function () {
+        return connection.jingle ? connection.jingle.getLog() : {};
     },
-    getLogger: function () {
-        if(connection.logger)
-            return connection.logger.log;
-        return null;
+    // Gets the logs from strophe.
+    getXmppLog: function () {
+        return connection.logger ? connection.logger.log : null;
     },
     getPrezi: function () {
         return connection.emuc.getPrezi(this.myJid());
@@ -590,19 +547,19 @@ var XMPP = {
         return connection.emuc.members;
     },
     getJidFromSSRC: function (ssrc) {
-        if(!connection)
+        if (!this.isConferenceInProgress())
             return null;
-        return connection.emuc.ssrc2jid[ssrc];
+        return connection.jingle.activecall.getSsrcOwner(ssrc);
     },
-    getMUCJoined: function () {
+    // Returns true iff we have joined the MUC.
+    isMUCJoined: function () {
         return connection.emuc.joined;
     },
     getSessions: function () {
         return connection.jingle.sessions;
     },
     removeStream: function (stream) {
-        if(!connection || !connection.jingle.activecall ||
-            !connection.jingle.activecall.peerconnection)
+        if (!this.isConferenceInProgress())
             return;
         connection.jingle.activecall.peerconnection.removeStream(stream);
     }

package.json

@@ -26,5 +26,5 @@
   },
   "devDependencies": {
   },
-  "license": "MIT"
+  "license": "Apache"
 }

service/RTC/RTCBrowserType.js

@@ -1,7 +0,0 @@
-var RTCBrowserType = {
-    RTC_BROWSER_CHROME: "rtc_browser.chrome",
-
-    RTC_BROWSER_FIREFOX: "rtc_browser.firefox"
-};
-
-module.exports = RTCBrowserType;

service/RTC/RTCEvents.js

@@ -1,4 +1,6 @@
 var RTCEvents = {
+    RTC_READY: "rtc.ready",
+    DATA_CHANNEL_OPEN: "rtc.data_channel_open",
     LASTN_CHANGED: "rtc.lastn_changed",
     DOMINANTSPEAKER_CHANGED: "rtc.dominantspeaker_changed",
     LASTN_ENDPOINT_CHANGED: "rtc.lastn_endpoint_changed",

service/RTC/StreamEventTypes.js

@@ -7,9 +7,7 @@ var StreamEventTypes = {
 
     EVENT_TYPE_REMOTE_CREATED: "stream.remote_created",
 
-    EVENT_TYPE_REMOTE_ENDED: "stream.remote_ended",
-
-    EVENT_TYPE_REMOTE_CHANGED: "stream.changed"
+    EVENT_TYPE_REMOTE_ENDED: "stream.remote_ended"
 };
 
 module.exports = StreamEventTypes;

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;

service/xmpp/XMPPEvents.js

@@ -1,5 +1,9 @@
 var XMPPEvents = {
     CONNECTION_FAILED: "xmpp.connection.failed",
+    // Indicates an interrupted connection event.
+    CONNECTION_INTERRUPTED: "xmpp.connection.interrupted",
+    // Indicates a restored connection event.
+    CONNECTION_RESTORED: "xmpp.connection.restored",
     CONFERENCE_CREATED: "xmpp.conferenceCreated.jingle",
     CALL_INCOMING: "xmpp.callincoming.jingle",
     DISPOSE_CONFERENCE: "xmpp.dispose_conference",
@@ -7,7 +11,6 @@ var XMPPEvents = {
     KICKED: "xmpp.kicked",
     BRIDGE_DOWN: "xmpp.bridge_down",
     USER_ID_CHANGED: "xmpp.user_id_changed",
-    STREAMS_CHANGED: "xmpp.streams_changed",
     // We joined the MUC
     MUC_JOINED: "xmpp.muc_joined",
     // A member joined the MUC
@@ -29,8 +32,23 @@ var XMPPEvents = {
     CHAT_ERROR_RECEIVED: "xmpp.chat_error_received",
     ETHERPAD: "xmpp.etherpad",
     DEVICE_AVAILABLE: "xmpp.device_available",
-    START_MUTED: "xmpp.start_muted",
+    VIDEO_TYPE: "xmpp.video_type",
     PEERCONNECTION_READY: "xmpp.peerconnection_ready",
-    CONFERENCE_SETUP_FAILED: "xmpp.conference_setup_failed"
+    CONFERENCE_SETUP_FAILED: "xmpp.conference_setup_failed",
+    AUDIO_MUTED: "xmpp.audio_muted",
+    VIDEO_MUTED: "xmpp.video_muted",
+    AUDIO_MUTED_BY_FOCUS: "xmpp.audio_muted_by_focus",
+    START_MUTED_SETTING_CHANGED: "xmpp.start_muted_setting_changed",
+    START_MUTED_FROM_FOCUS: "xmpp.start_muted_from_focus",
+    SET_LOCAL_DESCRIPTION_ERROR: 'xmpp.set_local_description_error',
+    SET_REMOTE_DESCRIPTION_ERROR: 'xmpp.set_remote_description_error',
+    CREATE_ANSWER_ERROR: 'xmpp.create_answer_error',
+    JINGLE_FATAL_ERROR: 'xmpp.jingle_fatal_error',
+    PROMPT_FOR_LOGIN: 'xmpp.prompt_for_login',
+    FOCUS_DISCONNECTED: 'xmpp.focus_disconnected',
+    ROOM_JOIN_ERROR: 'xmpp.room_join_error',
+    ROOM_CONNECT_ERROR: 'xmpp.room_connect_error',
+    // xmpp is connected and obtained user media
+    READY_TO_JOIN: 'xmpp.ready_to_join'
 };
 module.exports = XMPPEvents;