diff --git a/src/resources/js/meet.js b/src/resources/js/meet.js
index c8a0f1e8..4665f826 100644
--- a/src/resources/js/meet.js
+++ b/src/resources/js/meet.js
@@ -1,36 +1,38 @@
 /**
  * Application code for the Meet UI
  */
 
 import routes from './routes-meet.js'
 
 window.routes = routes
 window.isAdmin = false
 
 require('./app')
 
 // Register additional icons
 import { library } from '@fortawesome/fontawesome-svg-core'
 
 import {
     faAlignLeft,
     faCompress,
     faDesktop,
     faExpand,
     faMicrophone,
     faPowerOff,
+    faUser,
     faVideo,
     faVolumeMute
 } from '@fortawesome/free-solid-svg-icons'
 
 // Register only these icons we need
 library.add(
     faAlignLeft,
     faCompress,
     faDesktop,
     faExpand,
     faMicrophone,
     faPowerOff,
+    faUser,
     faVideo,
     faVolumeMute
 )
diff --git a/src/resources/js/meet/app.js b/src/resources/js/meet/app.js
index 9fc4b9f3..5ee7bc44 100644
--- a/src/resources/js/meet/app.js
+++ b/src/resources/js/meet/app.js
@@ -1,852 +1,867 @@
 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 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
+            // TODO: Verify if it is indeed required with recent OpenVidu version
             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 = connections[connectionId].element
+            let props = {
+                // Prepend the video element so it is always before the watermark element
+                insertMode: 'PREPEND'
+            }
 
             // Subscribe to the Stream to receive it
-            let subscriber = session.subscribe(event.stream, wrapper);
+            let subscriber = session.subscribe(event.stream, wrapper, props);
 /*
             // When the new video is added to DOM, update the page layout
             subscriber.on('videoElementCreated', event => {
                 updateLayout()
             })
 
             // When a video is removed from DOM, update the page layout
             subscriber.on('videoElementDestroyed', event => {
                 updateLayout()
             })
 */
             // 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()
         })
 
         // Handle signals from all participants
         session.on('signal', signalEventHandler)
 
         // Connect with the token
         session.connect(data.token, data.params)
             .then(() => {
                 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
                     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()
-            if (audioActive) {
+
+            // FIXME: We have to unpublish streams only if there's no session yet
+            if (!session && audioActive) {
                 publisher.publishAudio(false)
             }
-            if (videoActive) {
+            if (!session && videoActive) {
                 publisher.publishVideo(false)
             }
+
+            publisher = null
         }
 
         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]
 
             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,
                 audioActive,
                 videoActive
             })
         })
     }
 
     /**
      * Change the publisher audio device
      *
      * @param deviceId Device identifier string
      */
     async function setupSetAudioDevice(deviceId) {
         if (!deviceId) {
             publisher.publishAudio(false)
             volumeMeterStop()
             audioActive = false
         } else if (deviceId == audioSource) {
             publisher.publishAudio(true)
             volumeMeterStart()
             audioActive = true
         } else {
             const mediaStream = publisher.stream.mediaStream
             const oldTrack = mediaStream.getAudioTracks()[0]
 
             let properties = Object.assign({}, publisherDefaults, {
                 publishAudio: true,
                 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()
                     audioActive = true
                     audioSource = deviceId
                 })
         }
 
         return audioActive
     }
 
     /**
      * Change the publisher video device
      *
      * @param deviceId Device identifier string
      */
     async function setupSetVideoDevice(deviceId) {
         if (!deviceId) {
             publisher.publishVideo(false)
             videoActive = false
         } else if (deviceId == videoSource) {
             publisher.publishVideo(true)
             videoActive = true
         } else {
             const mediaStream = publisher.stream.mediaStream
             const oldTrack = mediaStream.getAudioTracks()[0]
 
             let properties = Object.assign({}, publisherDefaults, {
                 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()
                     videoActive = true
                     videoSource = deviceId
                 })
         }
 
         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)
                     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 = {
             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() {
         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)
 
         videoWrapperUpdate(sessionData.wrapper, { audioActive })
 
         signalUserUpdate()
 
         return audioActive
     }
 
     /**
      * Mute/Unmute video for current session publisher
      */
     function switchVideo() {
         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)
 
         videoWrapperUpdate(sessionData.wrapper, { videoActive })
 
         signalUserUpdate()
 
         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 params  Connection metadata/params
      */
     function videoWrapperCreate(container, params) {
         // Create the element
-        let wrapper = $('<div class="meet-video">').html(`
+        let wrapper = $('<div class="meet-video">').html(
+            svgIcon("user", 'fas', 'watermark') + `
             <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>
+                <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>`)
+                <span class="bg-danger status-audio d-none">` + svgIcon('microphone') + `</span>
+                <span class="bg-danger status-video d-none">` + svgIcon('video') + `</span>
+            </div>`
+        )
 
         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
                     }
                 })
         } 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')
                 })
         }
 
         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')
             })
         }
 
         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 && 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) {
+    function svgIcon(name, type, className) {
         // Note: the library will contain definitions for all icons registered elswhere
         const icon = library.definitions[type || 'fas'][name]
 
+        let attrs = {
+            '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]}`
+        }
+
+        if (className) {
+            attrs['class'] += ' ' + className
+        }
+
         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]}`
-            })
+            .attr(attrs)
             .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/sass/meet.scss b/src/resources/sass/meet.scss
index 78d66b62..e53af7e7 100644
--- a/src/resources/sass/meet.scss
+++ b/src/resources/sass/meet.scss
@@ -1,197 +1,213 @@
 .meet-video {
     position: relative;
+    background: $menu-bg-color;
+    // Use flexbox for centering .watermark
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .watermark {
+        color: darken($menu-bg-color, 20%);
+        width: 50%;
+        height: 50%;
+    }
 
     video {
         // To make object-fit:cover working we have to set the height in pixels
         // on the wrapper element. This is what javascript method will do.
         object-fit: cover;
         width: 100%;
         height: 100%;
         background: #000;
+
+        & + .watermark {
+            display: none;
+        }
     }
 
     .controls {
         position: absolute;
         bottom: 0;
         right: 0;
         margin: 0.5em;
         padding: 0 0.05em;
         line-height: 2em;
         border-radius: 1em;
         background: rgba(#000, 0.7);
 
         button {
             line-height: 2;
             border-radius: 50%;
             padding: 0;
             width: 2em;
         }
     }
 
     .status {
         position: absolute;
         bottom: 0;
         left: 0;
         margin: 0.5em;
         line-height: 2em;
 
         span {
             display: inline-block;
             color: #fff;
             border-radius: 50%;
             width: 2em;
             text-align: center;
             margin-right: 0.25em;
         }
     }
 
     .nickname {
         position: absolute;
         top: 0;
+        left: 0;
         margin: 0.5em;
         padding: 0 1em;
         line-height: 2em;
         border-radius: 1em;
         max-width: calc(100% - 1em);
         background: rgba(#fff, 0.8);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
 
     &.publisher .nickname {
         cursor: pointer;
         background: rgba($main-color, 0.9);
 
         span:empty {
             // A hack to make the .nickname element not disappear when empty
             display: block;
             height: 2em;
         }
     }
 }
 
 #meet-component {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
 
     & + .filler {
         display: none;
     }
 }
 
 #app.meet {
     height: 100%;
 
     #meet-component {
         overflow: hidden;
     }
 }
 
 #meet-setup {
     max-width: 720px;
 }
 
 #meet-auth {
     margin-top: 2rem;
     margin-bottom: 2rem;
     flex: 1;
 }
 
 #meet-session-toolbar {
     display: flex;
     justify-content: center;
 }
 
 #meet-session-menu {
     button {
         font-size: 1.3em;
         padding: 0 0.25em;
         margin: 0.5em;
         position: relative;
 
         .badge {
             font-size: 0.5em;
             position: absolute;
             right: -0.5em;
 
             &:empty {
                 display: none;
             }
         }
     }
 }
 
 #meet-session-layout {
     flex: 1;
     overflow: hidden;
 }
 
 #meet-session {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     flex: 1;
     //overflow: hidden;
 }
 
 #meet-chat {
     width: 0;
     display: flex;
     flex-direction: column;
 
     &.open {
         width: 30%;
     }
 
     .chat {
         flex: 1;
         overflow-y: auto;
     }
 
     .message {
         margin: 0 0.5em 0.5em 0.5em;
         padding: 0.25em 0.5em;
         border-radius: 1em;
         background: $menu-bg-color;
         overflow-wrap: break-word;
 
         &.self {
             background: lighten($main-color, 30%);
         }
     }
 
     .nickname {
         font-size: 80%;
         color: $secondary;
         text-align: right;
     }
 
     // TODO: mobile mode
 }
 
 #setup-preview {
     display: flex;
 
     video {
         width: 100%;
         transform: rotateY(180deg);
         background: #000;
     }
 
     .volume {
         height: 50%;
         position: absolute;
         bottom: 1em;
         right: 2em;
         width: 0.5em;
         background: rgba(0, 0, 0, 0.5);
 
         .bar {
             width: 100%;
             position: absolute;
             bottom: 0;
         }
     }
 }
diff --git a/src/resources/vue/Meet/Room.vue b/src/resources/vue/Meet/Room.vue
index 6c36b696..8972ad6c 100644
--- a/src/resources/vue/Meet/Room.vue
+++ b/src/resources/vue/Meet/Room.vue
@@ -1,325 +1,324 @@
 <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 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 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 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" @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>
+                        <button type="button" class="btn btn-danger modal-action" data-dismiss="modal">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()
+                    if (event.reason == 'sessionClosedByServer' && !this.session.owner) {
+                        $('#leave-dialog').on('hide.bs.modal', () => {
+                            // 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']
+                        }).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()
+                            this.meet = null
+                            window.location = window.config['app.url']
                         })
                 } else {
                     this.meet.leaveRoom()
-                    this.leaveRoom()
+                    this.meet = null
+                    window.location = window.config['app.url']
                 }
             },
             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.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>