diff --git a/src/resources/js/meet/app.js b/src/resources/js/meet/app.js
index 746904d4..9fc4b9f3 100644
--- a/src/resources/js/meet/app.js
+++ b/src/resources/js/meet/app.js
@@ -1,814 +1,852 @@
 import anchorme from 'anchorme'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { OpenVidu } from 'openvidu-browser'
 
 
 function Meet(container)
 {
     let OV                      // OpenVidu object to initialize a session
     let session                 // Session object where the user will connect
     let publisher               // Publisher object which the user will publish
-    let audioEnabled = false    // True if the audio track of publisher is active
-    let videoEnabled = false    // True if the video track of publisher is active
+    let audioActive = false     // True if the audio track of the publisher is active
+    let videoActive = false     // True if the video track of the publisher is active
     let numOfVideos = 0         // Keeps track of the number of videos that are being shown
     let audioSource = ''        // Currently selected microphone
     let videoSource = ''        // Currently selected camera
     let sessionData             // Room session metadata
 
     let screenOV                // OpenVidu object to initialize a screen sharing session
     let screenSession           // Session object where the user will connect for screen sharing
     let screenPublisher         // Publisher object which the user will publish the screen sharing
 
     let publisherDefaults = {
         publishAudio: true,     // Whether to start publishing with your audio unmuted or not
         publishVideo: true,     // Whether to start publishing with your video enabled or not
         resolution: '640x480',  // The resolution of your video
         frameRate: 30,          // The frame rate of your video
         mirror: true            // Whether to mirror your local video or not
     }
 
     let cameras = []            // List of user video devices
     let microphones = []        // List of user audio devices
     let connections = {}        // Connected users in the session
 
     let containerWidth
     let containerHeight
     let chatCount = 0
     let volumeElement
     let setupProps
 
     OV = new OpenVidu()
     screenOV = new OpenVidu()
 
     // if there's anything to do, do it here.
     //OV.setAdvancedConfiguration(config)
 
     // Disconnect participant when browser's window close
     window.addEventListener('beforeunload', () => {
         leaveRoom()
     })
 
     window.addEventListener('resize', resize)
 
     // Public methods
     this.isScreenSharingSupported = isScreenSharingSupported
     this.joinRoom = joinRoom
     this.leaveRoom = leaveRoom
     this.setup = setup
     this.setupSetAudioDevice = setupSetAudioDevice
     this.setupSetVideoDevice = setupSetVideoDevice
     this.switchAudio = switchAudio
     this.switchScreen = switchScreen
     this.switchVideo = switchVideo
 
 
     /**
      * Join the room session
      *
      * @param data Session metadata and event handlers (session, token, shareToken, nickname,
      *             chatElement, menuElement, onDestroy)
      */
     function joinRoom(data) {
         resize();
         volumeMeterStop()
 
         data.params = {
             nickname: data.nickname, // user nickname
             // avatar: undefined        // avatar image
         }
 
         sessionData = data
 
         // Init a session
         session = OV.initSession()
 
+        // Handle connection creation events
+        session.on('connectionCreated', event => {
+            // Ignore the current user connection
+            if (!event.connection.options) {
+                return
+            }
+
+            // This is the first event executed when a user joins in.
+            // We'll create the video wrapper here, which will be re-used
+            // in 'streamCreated' event handler.
+            // Note: For a user with no cam/mic enabled streamCreated even
+            // is not being dispatched at all
+
+            // TODO: We may consider placing users with no video enabled
+            // in a separate place, so they do not fill the precious
+            // screen estate
+
+            let connectionId = event.connection.connectionId
+            let metadata = JSON.parse(event.connection.data)
+            let wrapper = videoWrapperCreate(container, metadata)
+
+            connections[connectionId] = {
+                element: wrapper
+            }
+
+            updateLayout()
+
+            // Send the current user status to the connecting user
+            // otherwise e.g. nickname might be not up to date
+            signalUserUpdate(event.connection)
+        })
+
+        session.on('connectionDestroyed', event => {
+            let conn = connections[event.connection.connectionId]
+            if (conn) {
+                $(conn.element).remove()
+                numOfVideos--
+                updateLayout()
+                delete connections[event.connection.connectionId]
+            }
+        })
+
         // On every new Stream received...
         session.on('streamCreated', event => {
             let connection = event.stream.connection
             let connectionId = connection.connectionId
             let metadata = JSON.parse(connection.data)
-
-            let wrapper = addVideoWrapper(container, metadata, event.stream)
+            let wrapper = connections[connectionId].element
 
             // Subscribe to the Stream to receive it
             let subscriber = session.subscribe(event.stream, wrapper);
-
+/*
             // When the new video is added to DOM, update the page layout
             subscriber.on('videoElementCreated', event => {
-                numOfVideos++
                 updateLayout()
-
-                connections[connectionId] = {
-                    element: wrapper
-                }
-
-                // Send the current user status to the connecting user
-                // otherwise e.g. nickname might be not up to date
-                signalUserUpdate(connection)
             })
 
             // When a video is removed from DOM, update the page layout
             subscriber.on('videoElementDestroyed', event => {
-                numOfVideos--
                 updateLayout()
-
-                delete connections[connectionId]
             })
+*/
+            // Update the wrapper controls/status
+            videoWrapperUpdate(wrapper, event.stream)
         })
-
+/*
+        session.on('streamDestroyed', event => {
+        })
+*/
         // Handle session disconnection events
         session.on('sessionDisconnected', event => {
             if (data.onDestroy) {
                 data.onDestroy(event)
             }
 
             updateLayout()
         })
 
-        // Register handler for signals from other participants
+        // Handle signals from all participants
         session.on('signal', signalEventHandler)
 
         // Connect with the token
         session.connect(data.token, data.params)
             .then(() => {
-                data.params.publisher = true
-
-                let wrapper = addVideoWrapper(container, data.params)
+                let params = { publisher: true, audioActive, videoActive }
+                let wrapper = videoWrapperCreate(container, Object.assign({}, data.params, params))
 
                 publisher.on('videoElementCreated', event => {
                     $(event.element).prop('muted', true) // Mute local video to avoid feedback
-
-                    numOfVideos++
                     updateLayout()
                 })
 
                 publisher.createVideoElement(wrapper, 'PREPEND')
                 sessionData.wrapper = wrapper
 
                 // Publish the stream
                 session.publish(publisher)
             })
             .catch(error => {
                 console.error('There was an error connecting to the session: ', error.message);
             })
 
         // Prepare the chat
         setupChat()
     }
 
     /**
      * Leave the room (disconnect)
      */
     function leaveRoom() {
         if (publisher) {
             volumeMeterStop()
-            publisher.publishAudio(false)
-            publisher.publishVideo(false)
+            if (audioActive) {
+                publisher.publishAudio(false)
+            }
+            if (videoActive) {
+                publisher.publishVideo(false)
+            }
         }
 
         if (session) {
             session.disconnect();
             session = null
         }
 
         if (screenSession) {
             screenSession.disconnect();
             screenSession = null
         }
 
         publisher = null
     }
 
     /**
      * Sets the audio and video devices for the session.
      * This will ask user for permission to access media devices.
      *
      * @param props Setup properties (videoElement, volumeElement, success, error)
      */
     function setup(props) {
         setupProps = props
 
         publisher = OV.initPublisher(undefined, publisherDefaults)
 
         publisher.once('accessDenied', error => {
             props.error(error)
         })
 
         publisher.once('accessAllowed', async () => {
             let mediaStream = publisher.stream.getMediaStream()
             let videoStream = mediaStream.getVideoTracks()[0]
             let audioStream = mediaStream.getAudioTracks()[0]
 
-            audioEnabled = !!audioStream
-            videoEnabled = !!videoStream
+            audioActive = !!audioStream
+            videoActive = !!videoStream
             volumeElement = props.volumeElement
 
             publisher.addVideoElement(props.videoElement)
 
             volumeMeterStart()
 
             const devices = await OV.getDevices()
 
             devices.forEach(device => {
                 // device's props: deviceId, kind, label
                 if (device.kind == 'videoinput') {
                     cameras.push(device)
                     if (videoStream && videoStream.label == device.label) {
                         videoSource = device.deviceId
                     }
                 } else if (device.kind == 'audioinput') {
                     microphones.push(device)
                     if (audioStream && audioStream.label == device.label) {
                         audioSource = device.deviceId
                     }
                 }
             })
 
             props.success({
                 microphones,
                 cameras,
                 audioSource,
                 videoSource,
-                audioEnabled,
-                videoEnabled
+                audioActive,
+                videoActive
             })
         })
     }
 
     /**
      * Change the publisher audio device
      *
      * @param deviceId Device identifier string
      */
     async function setupSetAudioDevice(deviceId) {
         if (!deviceId) {
             publisher.publishAudio(false)
             volumeMeterStop()
-            audioEnabled = false
+            audioActive = false
         } else if (deviceId == audioSource) {
             publisher.publishAudio(true)
             volumeMeterStart()
-            audioEnabled = true
+            audioActive = true
         } else {
             const mediaStream = publisher.stream.mediaStream
             const oldTrack = mediaStream.getAudioTracks()[0]
 
             let properties = Object.assign({}, publisherDefaults, {
                 publishAudio: true,
-                publishVideo: videoEnabled,
+                publishVideo: videoActive,
                 audioSource: deviceId,
                 videoSource: videoSource
             })
 
             volumeMeterStop()
 
             // Note: We're not using publisher.replaceTrack() as it wasn't working for me
 
             // Stop and remove the old track
             if (oldTrack) {
                 oldTrack.stop()
                 mediaStream.removeTrack(oldTrack)
             }
 
             // TODO: Handle errors
 
             await OV.getUserMedia(properties)
                 .then(async (newMediaStream) => {
                     publisher.stream.mediaStream = newMediaStream
                     volumeMeterStart()
-                    audioEnabled = true
+                    audioActive = true
                     audioSource = deviceId
                 })
         }
 
-        return audioEnabled
+        return audioActive
     }
 
     /**
      * Change the publisher video device
      *
      * @param deviceId Device identifier string
      */
     async function setupSetVideoDevice(deviceId) {
         if (!deviceId) {
             publisher.publishVideo(false)
-            videoEnabled = false
+            videoActive = false
         } else if (deviceId == videoSource) {
             publisher.publishVideo(true)
-            videoEnabled = true
+            videoActive = true
         } else {
             const mediaStream = publisher.stream.mediaStream
             const oldTrack = mediaStream.getAudioTracks()[0]
 
             let properties = Object.assign({}, publisherDefaults, {
-                publishAudio: audioEnabled,
+                publishAudio: audioActive,
                 publishVideo: true,
                 audioSource: audioSource,
                 videoSource: deviceId
             })
 
             volumeMeterStop()
 
             // Stop and remove the old track
             if (oldTrack) {
                 oldTrack.stop()
                 mediaStream.removeTrack(oldTrack)
             }
 
             // TODO: Handle errors
 
             await OV.getUserMedia(properties)
                 .then(async (newMediaStream) => {
                     publisher.stream.mediaStream = newMediaStream
                     volumeMeterStart()
-                    videoEnabled = true
+                    videoActive = true
                     videoSource = deviceId
                 })
         }
 
-        return videoEnabled
+        return videoActive
     }
 
     /**
      * Setup the chat UI
      */
     function setupChat() {
         // The UI elements are created in the vue template
         // Here we add a logic for how they work
 
         const textarea = $(sessionData.chatElement).find('textarea')
         const button = $(sessionData.menuElement).find('.link-chat')
 
         textarea.on('keydown', e => {
             if (e.keyCode == 13 && !e.shiftKey) {
                 if (textarea.val().length) {
                     signalChat(textarea.val())
                     textarea.val('')
                 }
 
                 return false
             }
         })
 
         // Add an element for the count of unread messages on the chat button
         button.append('<span class="badge badge-dark blinker">')
             .on('click', () => { button.find('.badge').text('') })
     }
 
     /**
      * Signal events handler
      */
     function signalEventHandler(signal) {
         let conn, data
 
         switch (signal.type) {
             case 'signal:userChanged':
                 if (conn = connections[signal.from.connectionId]) {
                     data = JSON.parse(signal.data)
-                    $(conn.element).find('.nickname > span').text(data.nickname || '')
-                    $(conn.element).find('.status-audio')[data.audioEnabled ? 'addClass' : 'removeClass']('d-none')
-                    $(conn.element).find('.status-video')[data.videoEnabled ? 'addClass' : 'removeClass']('d-none')
+                    videoWrapperUpdate(conn.element, data)
                 }
                 break
 
             case 'signal:chat':
                 data = JSON.parse(signal.data)
                 data.id = signal.from.connectionId
                 pushChatMessage(data)
                 break
         }
     }
 
     /**
      * Send the chat message to other participants
      *
      * @param message Message string
      */
     function signalChat(message) {
         let data = {
             nickname: sessionData.params.nickname,
             message
         }
 
         session.signal({
             data: JSON.stringify(data),
             type: 'chat'
         })
     }
 
     /**
      * Add a message to the chat
      *
      * @param data Object with a message, nickname, id (of the connection, empty for self)
      */
     function pushChatMessage(data) {
         let message = $('<span>').text(data.message).text() // make the message secure
 
         // Format the message, convert emails and urls to links
         message = anchorme({
             input: message,
             options: {
                 attributes: {
                     target: "_blank"
                 },
                 // any link above 20 characters will be truncated
                 // to 20 characters and ellipses at the end
                 truncate: 20,
                 // characters will be taken out of the middle
                 middleTruncation: true
             }
             // TODO: anchorme is extensible, we could support
             //       github/phabricator's markup e.g. backticks for code samples
         })
 
         message = message.replace(/\r?\n/, '<br>')
 
         // Display the message
         let isSelf = data.id == publisher.stream.connection.connectionId
         let chat = $(sessionData.chatElement).find('.chat')
         let box = chat.find('.message').last()
 
         message = $('<div>').html(message)
 
         message.find('a').attr('rel', 'noreferrer')
 
         if (box.length && box.data('id') == data.id) {
             // A message from the same user as the last message, no new box needed
             message.appendTo(box)
         } else {
             box = $('<div class="message">').data('id', data.id)
                 .append($('<div class="nickname">').text(data.nickname || ''))
                 .append(message)
                 .appendTo(chat)
 
             if (isSelf) {
                 box.addClass('self')
             }
         }
 
         // Count unread messages
         if (!$(sessionData.chatElement).is('.open')) {
             if (!isSelf) {
                 chatCount++
             }
         } else {
             chatCount = 0
         }
 
         $(sessionData.menuElement).find('.link-chat .badge').text(chatCount ? chatCount : '')
     }
 
     /**
      * Send the user properties update signal to other participants
      *
      * @param connection Optional connection to which the signal will be sent
      *                   If not specified the signal is sent to all participants
      */
     function signalUserUpdate(connection) {
         let data = {
-            audioEnabled,
-            videoEnabled,
+            audioActive,
+            videoActive,
             nickname: sessionData.params.nickname
         }
 
         // TODO: The same for screen sharing session?
         session.signal({
             data: JSON.stringify(data),
             type: 'userChanged',
             to: connection ? [connection] : undefined
         })
     }
 
     /**
      * Mute/Unmute audio for current session publisher
      */
     function switchAudio() {
-        audioEnabled = !audioEnabled
-        publisher.publishAudio(audioEnabled)
+        audioActive = !audioActive
+        publisher.publishAudio(audioActive)
 
         // TODO: Handle enabling audio if it was never enabled (e.g. user joined the room
         //       without giving access to his mic)
 
-        $(sessionData.wrapper).find('.status-audio')[audioEnabled ? 'addClass' : 'removeClass']('d-none')
+        videoWrapperUpdate(sessionData.wrapper, { audioActive })
 
         signalUserUpdate()
 
-        return audioEnabled
+        return audioActive
     }
 
     /**
      * Mute/Unmute video for current session publisher
      */
     function switchVideo() {
-        videoEnabled = !videoEnabled
-        publisher.publishVideo(videoEnabled)
+        videoActive = !videoActive
+        publisher.publishVideo(videoActive)
 
         // TODO: Handle enabling video if it was never enabled (e.g. user joined the room
         //       without giving access to his camera)
 
-        $(sessionData.wrapper).find('.status-video')[videoEnabled ? 'addClass' : 'removeClass']('d-none')
+        videoWrapperUpdate(sessionData.wrapper, { videoActive })
 
         signalUserUpdate()
 
-        return videoEnabled
+        return videoActive
     }
 
     /**
      * Switch on/off screen sharing
      */
     function switchScreen(callback) {
         if (screenPublisher) {
             screenSession.unpublish(screenPublisher)
             screenPublisher = null
 
             if (callback) {
                 callback(false)
             }
 
             return
         }
 
         screenConnect(callback)
     }
 
     /**
      * Detect if screen sharing is supported by the browser
      */
     function isScreenSharingSupported() {
         return !!OV.checkScreenSharingCapabilities();
     }
 
     /**
      * Create a <video> element wrapper with controls
      *
      * @param container The parent element
-     * @param metadata  Connection metadata
-     * @param stream    Connection stream
+     * @param params  Connection metadata/params
      */
-    function addVideoWrapper(container, metadata, stream) {
+    function videoWrapperCreate(container, params) {
         // Create the element
         let wrapper = $('<div class="meet-video">').html(`
             <div class="nickname" title="Nickname">
                 <span></span>
             </div>
             <div class="controls">
                 <button class="btn btn-link link-audio d-none" title="Mute audio">` + svgIcon("volume-mute") + `</button>
                 <button class="btn btn-link link-fullscreen d-none" title="Full screen">` + svgIcon("expand") + `</button>
                 <button class="btn btn-link link-fullscreen-close d-none" title="Full screen">` + svgIcon("compress") + `</button>
             </div>
             <div class="status">
                 <span class="bg-danger status-audio d-none">` + svgIcon("microphone") + `</span>
                 <span class="bg-danger status-video d-none">` + svgIcon("video") + `</span>
             </div>`)
 
-        if (metadata.publisher) {
+        if (params.publisher) {
             // Add events for nickname change
             let nickname = wrapper.addClass('publisher').find('.nickname')
             let editable = nickname.find('span').get(0)
             let editableEnable = () => {
                 editable.contentEditable = true
                 editable.focus()
             }
             let editableUpdate = () => {
                 editable.contentEditable = false
                 sessionData.params.nickname = editable.innerText
                 signalUserUpdate()
             }
 
             nickname.on('click', editableEnable)
 
             $(editable).on('blur', editableUpdate)
                 .on('click', editableEnable)
                 .on('keydown', e => {
                     // Enter or Esc
                     if (e.keyCode == 13 || e.keyCode == 27) {
                         editableUpdate()
                         return false
                     }
                 })
-
-            // Status
-            if (!audioEnabled) {
-                wrapper.find('.status-audio').removeClass('d-none')
-            }
-
-            if (!videoEnabled) {
-                wrapper.find('.status-video').removeClass('d-none')
-            }
         } else {
             wrapper.find('.nickname > svg').addClass('d-none')
 
             wrapper.find('.link-audio').removeClass('d-none')
                 .on('click', e => {
                     let video = wrapper.find('video')[0]
                     video.muted = !video.muted
                     wrapper.find('.link-audio')[video.muted ? 'addClass' : 'removeClass']('text-danger')
                 })
-
-            if (!stream.audioActive) {
-                wrapper.find('.status-audio').removeClass('d-none')
-            }
-
-            if (!stream.videoActive) {
-                wrapper.find('.status-video').removeClass('d-none')
-            }
         }
 
-        if (metadata.nickname) {
-            wrapper.find('.nickname > span').text(metadata.nickname)
-        }
+        videoWrapperUpdate(wrapper, params)
 
         // Fullscreen control
         if (document.fullscreenEnabled) {
             wrapper.find('.link-fullscreen').removeClass('d-none')
                 .on('click', () => {
                     wrapper.get(0).requestFullscreen()
                 })
 
             wrapper.find('.link-fullscreen-close')
                 .on('click', () => {
                     document.exitFullscreen()
                 })
 
             wrapper.on('fullscreenchange', () => {
                 // const enabled = document.fullscreenElement
                 wrapper.find('.link-fullscreen').toggleClass('d-none')
                 wrapper.find('.link-fullscreen-close').toggleClass('d-none')
             })
         }
 
-        return wrapper.appendTo(container).get(0)
+        numOfVideos++
+
+        return wrapper[params.publisher ? 'prependTo' : 'appendTo'](container).get(0)
+    }
+
+    /**
+     * Update the <video> wrapper controls
+     *
+     * @param wrapper The wrapper element
+     * @param params  Connection metadata/params
+     */
+    function videoWrapperUpdate(wrapper, params) {
+        if ('audioActive' in params) {
+            $(wrapper).find('.status-audio')[params.audioActive ? 'addClass' : 'removeClass']('d-none')
+        }
+
+        if ('videoActive' in params) {
+            $(wrapper).find('.status-video')[params.videoActive ? 'addClass' : 'removeClass']('d-none')
+        }
+
+        if ('nickname' in params) {
+            $(wrapper).find('.nickname > span').text(params.nickname)
+        }
     }
 
     /**
      * Window onresize event handler (updates room layout)
      */
     function resize() {
         containerWidth = container.offsetWidth
         containerHeight = container.offsetHeight
         updateLayout()
     }
 
     /**
      * Update the room "matrix" layout
      */
     function updateLayout() {
         if (!numOfVideos) {
             return
         }
 
         let css, rows, cols, height
 
         if (numOfVideos == 1) {
             cols = 1
         } else if (numOfVideos <= 4) {
             cols = 2
         } else if (numOfVideos <= 9) {
             cols = 3
         } else if (numOfVideos <= 16) {
             cols = 4
         } else if (numOfVideos <= 25) {
             cols = 5
         } else {
             cols = 6
         }
 
         rows = Math.ceil(numOfVideos / cols)
 
         if (rows < cols && containerWidth < containerHeight) {
             cols = rows
             rows = Math.ceil(numOfVideos / cols)
         }
 
         height = containerHeight / rows
         css = {
             width: (100 / cols) + '%',
             // Height must be in pixels to make object-fit:cover working
             height: height + 'px'
         }
 
         // Update the matrix
         $(container).find('.meet-video').css(css)
             .each((idx, elem) => {
                 let video = $(elem).children('video')[0]
+/*
                 if (!video) {
                     // Remove orphaned video wrappers (after video has been removed)
                     $(elem).remove()
-                } else if (video.videoWidth && video.videoHeight && video.videoWidth > video.videoHeight) {
+                } else */
+                if (video && video.videoWidth && video.videoHeight && video.videoWidth > video.videoHeight) {
                     // Set max-width to keep the original aspect ratio in cases
                     // when there's enough room to display the element
                     let maxWidth = height * video.videoWidth / video.videoHeight
                     $(elem).css('max-width', maxWidth)
                 }
             })
     }
 
     /**
      * Initialize screen sharing session/publisher
      */
     function screenConnect(callback) {
         if (!sessionData.shareToken) {
             return false
         }
 
         let gotSession = !!screenSession
 
         // Init screen sharing session
         if (!gotSession) {
             screenSession = screenOV.initSession();
         }
 
         let successFunc = function() {
             screenSession.publish(screenPublisher)
             if (callback) {
                 callback(true)
             }
         }
 
         let errorFunc = function() {
             screenPublisher = null
             if (callback) {
                 callback(false)
             }
         }
 
         // Init the publisher
         let params = {
             videoSource: 'screen',
             publishAudio: false
         }
 
         screenPublisher = screenOV.initPublisher(null, params)
 
         screenPublisher.once('accessAllowed', (event) => {
             if (gotSession) {
                 successFunc()
             } else {
                 screenSession.connect(sessionData.shareToken, sessionData.params)
                     .then(() => {
                         successFunc()
                     })
                     .catch(error => {
                         console.error('There was an error connecting to the session:', error.code, error.message);
                         errorFunc()
                     })
             }
         })
 
         screenPublisher.once('accessDenied', () => {
             console.info('ScreenShare: Access Denied')
             errorFunc()
         })
     }
 
     /**
      * Create an svg element (string) for a FontAwesome icon
      *
      * @todo Find if there's a "official" way to do this
      */
     function svgIcon(name, type) {
         // Note: the library will contain definitions for all icons registered elswhere
         const icon = library.definitions[type || 'fas'][name]
 
         return $(`<svg><path fill="currentColor" d="${icon[4]}"></path></svg>`)
             .attr({
                 'class': 'svg-inline--fa',
                 'aria-hidden': true,
                 focusable: false,
                 role: 'img',
                 xmlns: 'http://www.w3.org/2000/svg',
                 viewBox: `0 0 ${icon[0]} ${icon[1]}`
             })
             .get(0).outerHTML
     }
 
     function volumeChangeHandler(event) {
         let value = 100 + Math.min(0, Math.max(-100, event.value.newValue))
         let color = 'lime'
         const bar = volumeElement.firstChild
 
         if (value >= 70) {
             color = '#ff3300'
         } else if (value >= 50) {
             color = '#ff9933'
         }
 
         bar.style.height = value + '%'
         bar.style.background = color
     }
 
     function volumeMeterStart() {
         if (publisher && volumeElement) {
             publisher.on('streamAudioVolumeChange', volumeChangeHandler)
         }
     }
 
     function volumeMeterStop() {
         if (publisher && volumeElement) {
             publisher.off('streamAudioVolumeChange')
             volumeElement.firstChild.style.height = 0
         }
     }
 }
 
 export default Meet
diff --git a/src/resources/vue/Login.vue b/src/resources/vue/Login.vue
index 94c5c679..db1373f2 100644
--- a/src/resources/vue/Login.vue
+++ b/src/resources/vue/Login.vue
@@ -1,81 +1,81 @@
 <template>
     <div class="container d-flex flex-column align-items-center justify-content-center">
         <div class="card col-sm-8 col-lg-6">
             <div class="card-body">
                 <h1 class="card-title text-center mb-3">Please sign in</h1>
                 <div class="card-text">
                     <form class="form-signin" @submit.prevent="submitLogin">
                         <div class="form-group">
                             <label for="inputEmail" class="sr-only">Email address</label>
                             <div class="input-group">
                                 <span class="input-group-prepend">
                                     <span class="input-group-text"><svg-icon icon="user"></svg-icon></span>
                                 </span>
                                 <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus v-model="email">
                             </div>
                         </div>
                         <div class="form-group">
                             <label for="inputPassword" class="sr-only">Password</label>
                             <div class="input-group">
                                 <span class="input-group-prepend">
                                     <span class="input-group-text"><svg-icon icon="lock"></svg-icon></span>
                                 </span>
                                 <input type="password" id="inputPassword" class="form-control" placeholder="Password" required v-model="password">
                             </div>
                         </div>
                         <div class="form-group pt-3" v-if="!$root.isAdmin">
                             <label for="secondfactor" class="sr-only">2FA</label>
                             <div class="input-group">
                                 <span class="input-group-prepend">
                                     <span class="input-group-text"><svg-icon icon="key"></svg-icon></span>
                                 </span>
                                 <input type="text" id="secondfactor" class="form-control rounded-right" placeholder="Second factor code" v-model="secondFactor">
                             </div>
                             <small class="form-text text-muted">Second factor code is optional for users with no 2-Factor Authentication setup.</small>
                         </div>
                         <div class="text-center">
                             <button class="btn btn-primary" type="submit">
                                 <svg-icon icon="sign-in-alt"></svg-icon> Sign in
                             </button>
                         </div>
                     </form>
                 </div>
             </div>
         </div>
         <div class="mt-1">
             <router-link v-if="!$root.isAdmin && $root.hasRoute('password-reset')" :to="{ name: 'password-reset' }" id="forgot-password">Forgot password?</router-link>
             <a v-if="!$root.isAdmin && !$root.hasRoute('password-reset')" :href="app_url + '/password-reset'" id="forgot-password">Forgot password?</a>
         </div>
     </div>
 </template>
 
 <script>
     export default {
+        props: {
+            dashboard: { type: Boolean, default: true }
+        },
         data() {
             return {
                 app_url: window.config['app.url'],
                 email: '',
                 password: '',
                 secondFactor: ''
             }
         },
-        props: {
-            dashboard: { type: Boolean, default: true }
-        },
         methods: {
             submitLogin() {
                 this.$root.clearFormValidation($('form.form-signin'))
 
                 axios.post('/api/auth/login', {
                     email: this.email,
                     password: this.password,
                     secondfactor: this.secondFactor
                 }).then(response => {
                     // login user and redirect to dashboard
                     this.$root.loginUser(response.data, this.dashboard)
                     this.$emit('success')
                 })
             }
         }
     }
 </script>
diff --git a/src/resources/vue/Meet/Room.vue b/src/resources/vue/Meet/Room.vue
index ad2741a4..6c36b696 100644
--- a/src/resources/vue/Meet/Room.vue
+++ b/src/resources/vue/Meet/Room.vue
@@ -1,325 +1,325 @@
 <template>
     <div id="meet-component">
         <div id="meet-session-toolbar" class="d-none">
             <div id="meet-session-menu">
                 <button class="btn btn-link link-audio" @click="switchSound" title="Mute audio">
                     <svg-icon icon="microphone"></svg-icon>
                 </button>
                 <button class="btn btn-link link-video" @click="switchVideo" title="Mute video">
                     <svg-icon icon="video"></svg-icon>
                 </button>
                 <button class="btn btn-link link-screen text-danger" @click="switchScreen" :disabled="!canShareScreen" title="Share screen">
                     <svg-icon icon="desktop"></svg-icon>
                 </button>
                 <button class="btn btn-link link-chat text-danger" @click="switchChat" title="Chat">
                     <svg-icon icon="align-left"></svg-icon>
                 </button>
                 <button class="btn btn-link link-fullscreen d-none" @click="switchFullscreen" title="Full screen">
                     <svg-icon icon="expand"></svg-icon>
                 </button>
                 <button class="btn btn-link link-fullscreen d-none" @click="switchFullscreen" title="Full screen">
                     <svg-icon icon="compress"></svg-icon>
                 </button>
                 <button class="btn btn-link link-logout" @click="logout" title="Leave session">
                     <svg-icon icon="power-off"></svg-icon>
                 </button>
             </div>
         </div>
 
         <div id="meet-setup" class="card container mt-5 mb-5">
             <div class="card-body">
                 <div class="card-title">Set up your session</div>
                 <div class="card-text">
                     <form class="setup-form row">
                         <div id="setup-preview" class="col-sm-6">
                             <video class="rounded"></video>
                             <div class="volume"><div class="bar"></div></div>
                         </div>
                         <div class="col-sm-6">
                             <div class="form-group">
-                                <label>Microphone</label>
+                                <label for="setup-microphone">Microphone</label>
                                 <select class="custom-select" id="setup-microphone" v-model="microphone" @change="setupMicrophoneChange">
                                     <option value="">None</option>
                                     <option v-for="mic in setup.microphones" :value="mic.deviceId" :key="mic.deviceId">{{ mic.label }}</option>
                                 </select>
                             </div>
                             <div class="form-group">
-                                <label>Camera</label>
+                                <label for="setup-camera">Camera</label>
                                 <select class="custom-select" id="setup-camera" v-model="camera" @change="setupCameraChange">
                                     <option value="">None</option>
                                     <option v-for="cam in setup.cameras" :value="cam.deviceId" :key="cam.deviceId">{{ cam.label }}</option>
                                 </select>
                             </div>
                             <div class="form-group mb-0">
-                                <label>Nickname</label>
+                                <label for="setup-nickname">Nickname</label>
                                 <input class="form-control" type="text" id="setup-nickname" v-model="nickname">
                             </div>
                         </div>
                         <div class="text-center mt-4 col-sm-12">
                             <status-message :status="roomState" :status-labels="roomStateLabels" class="mb-3"></status-message>
                             <button v-if="roomState == 'ready' || roomState == 424"
                                     type="button"
                                     @click="joinSession"
                                     class="btn btn-primary pl-5 pr-5"
                             >JOIN</button>
                             <button v-if="roomState == 423"
                                     type="button"
                                     @click="joinSession"
                                     class="btn btn-primary pl-5 pr-5"
                             >I'm the owner</button>
                         </div>
                     </form>
                 </div>
             </div>
         </div>
 
         <div id="meet-session-layout" class="d-flex d-none">
             <div id="meet-session"></div>
             <div id="meet-chat">
                 <div class="chat"></div>
                 <div class="chat-input m-2">
                     <textarea class="form-control" rows="1"></textarea>
                 </div>
             </div>
         </div>
 
-        <logon-form id="meet-auth" class="d-none" :dashboard="false" v-on:success="authSuccess"></logon-form>
+        <logon-form id="meet-auth" class="d-none" :dashboard="false" @success="authSuccess"></logon-form>
 
         <div id="leave-dialog" class="modal" tabindex="-1" role="dialog">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">Room closed</h5>
                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                             <span aria-hidden="true">&times;</span>
                         </button>
                     </div>
                     <div class="modal-body">
                         <p>The session has been closed by the room owner.</p>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-danger modal-action" @click="leaveRoom()">Close</button>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     import Meet from '../../js/meet/app.js'
     import StatusMessage from '../Widgets/StatusMessage'
     import LogonForm from '../Login'
 
     export default {
         components: {
             LogonForm,
             StatusMessage
         },
         data() {
             return {
                 setup: {
                     cameras: [],
                     microphones: [],
                 },
                 canShareScreen: false,
                 camera: '',
                 meet: null,
                 microphone: '',
                 nickname: '',
                 room: null,
                 roomState: 'init',
                 roomStateLabels: {
                     init: 'Checking the room...',
                     404: 'The room does not exist.',
                     423: 'The room is closed. Please, wait for the owner to start the session.',
                     424: 'The room is closed. It will be open for others after you join.',
                     500: 'Failed to create a session. Server error.'
                 },
                 session: {}
             }
         },
         mounted() {
             this.room = this.$route.params.room
 
             // Initialize OpenVidu and do some basic checks
             this.meet = new Meet($('#meet-session')[0]);
             this.canShareScreen = this.meet.isScreenSharingSupported()
 
             // Check the room and init the session
             this.initSession()
 
             // Setup the room UI
             this.setupSession()
         },
         beforeDestroy() {
             if (this.meet) {
                 this.meet.leaveRoom()
             }
         },
         methods: {
             authSuccess() {
                 // The user (owner) authentication succeeded
                 this.roomState = 'init'
                 this.initSession()
 
                 $('#meet-setup').removeClass('d-none')
                 $('#meet-auth').addClass('d-none')
             },
             initSession(init) {
                 let params = []
 
                 if (this.canShareScreen) {
                     params.push('screenShare=1')
                 }
 
                 if (init) {
                     params.push('init=1')
                 }
 
                 axios.get('/api/v4/openvidu/rooms/' + this.room + '?' + params.join('&'))
                     .then(response => {
                         // Response data contains: session, token and shareToken
                         this.roomState = 'ready'
                         this.session = response.data
 
                         if (init) {
                             this.joinSession()
                         }
                     })
                     .catch(error => {
                         this.roomState = String(error.response.status)
                     })
 
                 if (document.fullscreenEnabled) {
                     $('#meet-session-menu').find('.link-fullscreen').first().removeClass('d-none')
                 }
             },
             joinSession() {
                 if (this.roomState == 423) {
                     $('#meet-setup').addClass('d-none')
                     $('#meet-auth').removeClass('d-none')
                     return
                 }
 
                 if (this.roomState == 424) {
                     this.initSession(true)
                     return
                 }
 
                 $('#app').addClass('meet')
                 $('#meet-setup').addClass('d-none')
                 $('#meet-session-toolbar,#meet-session-layout').removeClass('d-none')
 
                 this.session.nickname = this.nickname
                 this.session.menuElement = $('#meet-session-menu')[0]
                 this.session.chatElement = $('#meet-chat')[0]
                 this.session.onDestroy = event => {
                     // TODO: Handle nicely other reasons: disconnect, forceDisconnectByUser,
                     //       forceDisconnectByServer, networkDisconnect?
                     if (event.reason == 'sessionClosedByServer') {
                         $('#leave-dialog').modal()
                     }
                 }
 
                 this.meet.joinRoom(this.session)
             },
             leaveRoom() {
                 $('#leave-dialog').modal('hide')
 
                 // FIXME: Where exactly the user should land? Currently he'll land
                 //        on dashboard (if he's logged in) or login form (if he's not).
 
                 window.location = window.config['app.url']
             },
             logout() {
                 if (this.session.owner) {
                     axios.post('/api/v4/openvidu/rooms/' + this.room + '/close')
                         .then(response => {
                             this.meet.leaveRoom()
                             this.leaveRoom()
                         })
                 } else {
                     this.meet.leaveRoom()
                     this.leaveRoom()
                 }
             },
             setMenuItem(type, state) {
                 $('#meet-session-menu').find('.link-' + type)[state ? 'removeClass' : 'addClass']('text-danger')
             },
             setupSession() {
                 this.meet.setup({
                     videoElement: $('#setup-preview video')[0],
                     volumeElement: $('#setup-preview .volume')[0],
                     success: setup => {
                         this.setup = setup
                         this.microphone = setup.audioSource
                         this.camera = setup.videoSource
 
-                        this.setMenuItem('audio', setup.audioEnabled)
-                        this.setMenuItem('video', setup.videoEnabled)
+                        this.setMenuItem('audio', setup.audioActive)
+                        this.setMenuItem('video', setup.videoActive)
                     },
                     error: error => {
                         // TODO: display nice error to the user
                         // FIXME: It looks like OpenVidu requires audio or video,
                         //        otherwise it will not connect to the session?
 
                         this.setMenuItem('audio', false)
                         this.setMenuItem('video', false)
                     }
                 })
             },
             setupCameraChange() {
                 this.meet.setupSetVideoDevice(this.camera).then(enabled => {
                     this.setMenuItem('video', enabled)
                 })
             },
             setupMicrophoneChange() {
                 this.meet.setupSetAudioDevice(this.microphone).then(enabled => {
                     this.setMenuItem('audio', enabled)
                 })
             },
             switchChat() {
                 let chat = $('#meet-chat')
                 let enabled = chat.is('.open')
 
                 this.setMenuItem('chat', !enabled)
                 chat.toggleClass('open')
 
                 if (!enabled) {
                     chat.find('textarea').focus()
                 }
             },
             switchFullscreen() {
                 const element = this.$el
 
                 $(element).off('fullscreenchange').on('fullscreenchange', (e) => {
                     let enabled = document.fullscreenElement == element
                     let buttons = $('#meet-session-menu').find('.link-fullscreen')
 
                     buttons.first()[enabled ? 'addClass' : 'removeClass']('d-none')
                     buttons.last()[!enabled ? 'addClass' : 'removeClass']('d-none')
                 })
 
                 if (document.fullscreenElement) {
                     document.exitFullscreen()
                 } else {
                     element.requestFullscreen()
                 }
             },
             switchSound() {
                 const enabled = this.meet.switchAudio()
                 this.setMenuItem('audio', enabled)
             },
             switchVideo() {
                 const enabled = this.meet.switchVideo()
                 this.setMenuItem('video', enabled)
             },
             switchScreen() {
                 this.meet.switchScreen(enabled => {
                     this.setMenuItem('screen', enabled)
                 })
             }
         }
     }
 </script>
diff --git a/src/resources/vue/Widgets/StatusMessage.vue b/src/resources/vue/Widgets/StatusMessage.vue
index 021a27d7..71935346 100644
--- a/src/resources/vue/Widgets/StatusMessage.vue
+++ b/src/resources/vue/Widgets/StatusMessage.vue
@@ -1,47 +1,49 @@
 <template>
     <div v-if="status != 'ready'" :class="statusClass()">
         <div v-if="status == 'init'" class="app-loader small">
             <div class="spinner-border" role="status"></div>
         </div>
         <span v-if="status == 'init'">{{ statusLabel() }}</span>
 
         <svg-icon v-if="Number(status) >= 400 && status in statusLabels" icon="exclamation-circle"></svg-icon>
         <span v-if="Number(status) >= 400 && status in statusLabels">{{ statusLabel() }}</span>
     </div>
 </template>
 
 <script>
     const defaultLabels = {
         init: 'Loading...',
         404: 'Resource not found.'
     }
 
     export default {
         props: {
             status: { type: String, default: () => 'init' },
             statusLabels: { type: Object, default: () => defaultLabels }
         },
         methods: {
             statusClass() {
                 let className = 'status-message'
 
-                if (Number(this.status) >= 400) {
+                if (this.status === 'init') {
+                    className += ' loading'
+                } else if (Number(this.status) >= 400) {
                     className += ' text-danger'
                 }
 
                 return className
             },
             statusLabel() {
                 if (this.status in this.statusLabels) {
                     return this.statusLabels[this.status]
                 }
 
                 if (this.status in defaultLabels) {
                     return defaultLabels[this.status]
                 }
 
                 return ''
             }
         }
     }
 </script>
diff --git a/src/tests/TestCaseDusk.php b/src/tests/TestCaseDusk.php
index 92882119..cf688987 100644
--- a/src/tests/TestCaseDusk.php
+++ b/src/tests/TestCaseDusk.php
@@ -1,98 +1,101 @@
 <?php
 
 namespace Tests;
 
 use Facebook\WebDriver\Chrome\ChromeOptions;
 use Facebook\WebDriver\Remote\RemoteWebDriver;
 use Facebook\WebDriver\Remote\DesiredCapabilities;
 use Laravel\Dusk\TestCase as BaseTestCase;
 
 abstract class TestCaseDusk extends BaseTestCase
 {
     use TestCaseTrait;
 
     /**
      * Prepare for Dusk test execution.
      *
      * @beforeClass
      * @return void
      */
     public static function prepare()
     {
         static::startChromeDriver();
     }
 
     /**
      * Create the RemoteWebDriver instance.
      *
      * @return \Facebook\WebDriver\Remote\RemoteWebDriver
      */
     protected function driver()
     {
         $options = (new ChromeOptions())->addArguments([
             '--lang=en_US',
             '--disable-gpu',
             '--headless',
+            '--use-fake-ui-for-media-stream',
+            '--ignore-certificate-errors',
+            '--incognito',
         ]);
 
         // For file download handling
         $prefs = [
             'profile.default_content_settings.popups' => 0,
             'download.default_directory' => __DIR__ . '/Browser/downloads',
         ];
 
         $options->setExperimentalOption('prefs', $prefs);
 
         if (getenv('TESTS_MODE') == 'phone') {
             // Fake User-Agent string for mobile mode
             $ua = 'Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76B) AppleWebKit/537.36'
                 . ' (KHTML, like Gecko) Chrome/60.0.3112.90 Mobile Safari/537.36';
             $options->setExperimentalOption('mobileEmulation', ['userAgent' => $ua]);
             $options->addArguments(['--window-size=375,667']);
         } elseif (getenv('TESTS_MODE') == 'tablet') {
             // Fake User-Agent string for mobile mode
             $ua = 'Mozilla/5.0 (Linux; Android 6.0.1; vivo 1603 Build/MMB29M) AppleWebKit/537.36 '
                 . ' (KHTML, like Gecko) Chrome/58.0.3029.83 Mobile Safari/537.36';
             $options->setExperimentalOption('mobileEmulation', ['userAgent' => $ua]);
             $options->addArguments(['--window-size=800,640']);
         } else {
             $options->addArguments(['--window-size=1280,1024']);
         }
 
         // Make sure downloads dir exists and is empty
         if (!file_exists(__DIR__ . '/Browser/downloads')) {
             mkdir(__DIR__ . '/Browser/downloads', 0777, true);
         } else {
             foreach (glob(__DIR__ . '/Browser/downloads/*') as $file) {
                 @unlink($file);
             }
         }
 
         return RemoteWebDriver::create(
             'http://localhost:9515',
             DesiredCapabilities::chrome()->setCapability(
                 ChromeOptions::CAPABILITY,
                 $options
             )
         );
     }
 
     /**
      * Replace Dusk's Browser with our (extended) Browser
      */
     protected function newBrowser($driver)
     {
         return new Browser($driver);
     }
 
     /**
      * Set baseURL to the admin UI location
      */
     protected static function useAdminUrl(): void
     {
         // This will set baseURL for all tests in this file
         // If we wanted to visit both user and admin in one test
         // we can also just call visit() with full url
         Browser::$baseUrl = str_replace('//', '//admin.', \config('app.url'));
     }
 }