Changeset View
Changeset View
Standalone View
Standalone View
src/resources/js/meet/app.js
| Show All 38 Lines | function Meet(container) | ||||
| let containerWidth | let containerWidth | ||||
| let containerHeight | let containerHeight | ||||
| let chatCount = 0 | let chatCount = 0 | ||||
| let volumeElement | let volumeElement | ||||
| let subscribersContainer | let subscribersContainer | ||||
| OV = new OpenVidu() | OV = new OpenVidu() | ||||
| screenOV = new OpenVidu() | |||||
| // If there's anything to do, do it here. | // If there's anything to do, do it here. | ||||
| //OV.setAdvancedConfiguration(config) | //OV.setAdvancedConfiguration(config) | ||||
| // Disable all logging except errors | // Disable all logging except errors | ||||
| // OV.enableProdMode() | // OV.enableProdMode() | ||||
| // Disconnect participant when browser's window close | // Disconnect participant when browser's window close | ||||
| ▲ Show 20 Lines • Show All 70 Lines • ▼ Show 20 Lines | function joinRoom(data) { | ||||
| connections[connId] = metadata | connections[connId] = metadata | ||||
| // Send the current user status to the connecting user | // Send the current user status to the connecting user | ||||
| // otherwise e.g. nickname might be not up to date | // otherwise e.g. nickname might be not up to date | ||||
| signalUserUpdate(event.connection) | signalUserUpdate(event.connection) | ||||
| }) | }) | ||||
| session.on('connectionDestroyed', event => { | session.on('connectionDestroyed', event => { | ||||
| let conn = connections[event.connection.connectionId] | let connectionId = event.connection.connectionId | ||||
| let conn = connections[connectionId] | |||||
| if (conn) { | if (conn) { | ||||
| $(conn.element).remove() | $(conn.element).remove() | ||||
| delete connections[event.connection.connectionId] | delete connections[connectionId] | ||||
| } | } | ||||
| resize() | resize() | ||||
| }) | }) | ||||
| // On every new Stream received... | // On every new Stream received... | ||||
| session.on('streamCreated', event => { | session.on('streamCreated', event => { | ||||
| let connectionId = event.stream.connection.connectionId | let connectionId = event.stream.connection.connectionId | ||||
| let metadata = connections[connectionId] | let metadata = connections[connectionId] | ||||
| let props = { | let props = { | ||||
| ▲ Show 20 Lines • Show All 537 Lines • ▼ Show 20 Lines | function switchVideo() { | ||||
| return videoActive | return videoActive | ||||
| } | } | ||||
| /** | /** | ||||
| * Switch on/off screen sharing | * Switch on/off screen sharing | ||||
| */ | */ | ||||
| function switchScreen(callback) { | function switchScreen(callback) { | ||||
| if (screenPublisher) { | if (screenPublisher) { | ||||
| // Note: This is what the original openvidu-call app does. | |||||
| // It is probably better for performance reasons to close the connection, | |||||
| // than to use unpublish() and keep the connection open. | |||||
| screenSession.disconnect() | screenSession.disconnect() | ||||
| screenSession = null | screenSession = null | ||||
| screenPublisher = null | screenPublisher = null | ||||
| if (callback) { | if (callback) { | ||||
| // Note: Disconnecting invalidates the token. The callback should request | // Note: Disconnecting invalidates the token, we have to inform the vue component | ||||
| // a new token for the next screen sharing session. | // to update UI state (and be prepared to request a new token). | ||||
| callback(false) | callback(false) | ||||
| } | } | ||||
| return | return | ||||
| } | } | ||||
| screenConnect(callback) | screenConnect(callback) | ||||
| } | } | ||||
| Show All 9 Lines | function Meet(container) | ||||
| * Update participant connection state | * Update participant connection state | ||||
| */ | */ | ||||
| function connectionUpdate(data) { | function connectionUpdate(data) { | ||||
| let conn = connections[data.connectionId] | let conn = connections[data.connectionId] | ||||
| // It's me | // It's me | ||||
| if (session.connection.connectionId == data.connectionId) { | if (session.connection.connectionId == data.connectionId) { | ||||
| const rolePublisher = data.role && data.role & Roles.PUBLISHER | const rolePublisher = data.role && data.role & Roles.PUBLISHER | ||||
| const roleModerator = data.role && data.role & Roles.MODERATOR | |||||
| const isPublisher = sessionData.role & Roles.PUBLISHER | const isPublisher = sessionData.role & Roles.PUBLISHER | ||||
| const isModerator = sessionData.role & Roles.MODERATOR | |||||
| // Inform the vue component, so it can update some UI controls | // Inform the vue component, so it can update some UI controls | ||||
| let update = () => { | let update = () => { | ||||
| if (sessionData.onSessionDataUpdate) { | if (sessionData.onSessionDataUpdate) { | ||||
| sessionData.onSessionDataUpdate(data) | sessionData.onSessionDataUpdate(data) | ||||
| } | } | ||||
| } | } | ||||
| // demoted to a subscriber | // demoted to a subscriber | ||||
| if ('role' in data && isPublisher && !rolePublisher) { | if ('role' in data && isPublisher && !rolePublisher) { | ||||
| session.unpublish(publisher) | session.unpublish(publisher) | ||||
| // FIXME: There's a reference in OpenVidu to a video element that should not | // FIXME: There's a reference in OpenVidu to a video element that should not | ||||
| // exist anymore. It causes issues when we try to do publish/unpublish | // exist anymore. It causes issues when we try to do publish/unpublish | ||||
| // sequence multiple times in a row. So, we're clearing the reference here. | // sequence multiple times in a row. So, we're clearing the reference here. | ||||
| let videos = publisher.stream.streamManager.videos | let videos = publisher.stream.streamManager.videos | ||||
| publisher.stream.streamManager.videos = videos.filter(video => video.video.parentNode != null) | publisher.stream.streamManager.videos = videos.filter(video => video.video.parentNode != null) | ||||
| } | } | ||||
| // merge the changed data into internal session metadata object | // merge the changed data into internal session metadata object | ||||
| Object.keys(data).forEach(key => { sessionData[key] = data[key] }) | Object.keys(data).forEach(key => { sessionData[key] = data[key] }) | ||||
| // update the participant element | // update the participant element | ||||
| sessionData.element = participantUpdate(sessionData.element, sessionData) | sessionData.element = participantUpdate(sessionData.element, sessionData) | ||||
| // promoted/demoted to/from a moderator | |||||
| if ('role' in data) { | |||||
| if ((!isModerator && roleModerator) || (isModerator && !roleModerator)) { | |||||
| // Update all participants, to enable/disable the popup menu | |||||
| Object.keys(connections).forEach(key => { | |||||
| const conn = connections[key] | |||||
| participantUpdate(conn.element, conn) | |||||
| }) | |||||
| } | |||||
| } | |||||
| // promoted to a publisher | // promoted to a publisher | ||||
| if ('role' in data && !isPublisher && rolePublisher) { | if ('role' in data && !isPublisher && rolePublisher) { | ||||
| publisher.createVideoElement(sessionData.element, 'PREPEND') | publisher.createVideoElement(sessionData.element, 'PREPEND') | ||||
| session.publish(publisher).then(() => { | session.publish(publisher).then(() => { | ||||
| data.audioActive = publisher.stream.audioActive | data.audioActive = publisher.stream.audioActive | ||||
| data.videoActive = publisher.stream.videoActive | data.videoActive = publisher.stream.videoActive | ||||
| update() | update() | ||||
| }) | }) | ||||
| ▲ Show 20 Lines • Show All 132 Lines • ▼ Show 20 Lines | function Meet(container) | ||||
| * | * | ||||
| * @param wrapper The wrapper element | * @param wrapper The wrapper element | ||||
| * @param params Connection metadata/params | * @param params Connection metadata/params | ||||
| */ | */ | ||||
| function participantUpdate(wrapper, params) { | function participantUpdate(wrapper, params) { | ||||
| const element = $(wrapper) | const element = $(wrapper) | ||||
| const isModerator = sessionData.role & Roles.MODERATOR | const isModerator = sessionData.role & Roles.MODERATOR | ||||
| const isSelf = session.connection.connectionId == params.connectionId | const isSelf = session.connection.connectionId == params.connectionId | ||||
| const rolePublisher = params.role & Roles.PUBLISHER | |||||
| const roleModerator = params.role & Roles.MODERATOR | |||||
| const roleScreen = params.role & Roles.SCREEN | |||||
| const roleOwner = params.role & Roles.OWNER | |||||
| // Handle publisher-to-subscriber and subscriber-to-publisher change | // Handle publisher-to-subscriber and subscriber-to-publisher change | ||||
| if ('role' in params && !(params.role & Roles.SCREEN)) { | if (!roleScreen) { | ||||
| const rolePublisher = params.role & Roles.PUBLISHER | |||||
| const isPublisher = element.is('.meet-video') | const isPublisher = element.is('.meet-video') | ||||
| if ((rolePublisher && !isPublisher) || (!rolePublisher && isPublisher)) { | if ((rolePublisher && !isPublisher) || (!rolePublisher && isPublisher)) { | ||||
| element.remove() | element.remove() | ||||
| return participantCreate(params) | return participantCreate(params) | ||||
| } | } | ||||
| element.find('.action-role-publisher input').prop('checked', params.role & Roles.PUBLISHER) | |||||
| } | } | ||||
| if ('audioActive' in params) { | if ('audioActive' in params) { | ||||
| element.find('.status-audio')[params.audioActive ? 'addClass' : 'removeClass']('hidden') | element.find('.status-audio')[params.audioActive ? 'addClass' : 'removeClass']('hidden') | ||||
| } | } | ||||
| if ('videoActive' in params) { | if ('videoActive' in params) { | ||||
| element.find('.status-video')[params.videoActive ? 'addClass' : 'removeClass']('hidden') | element.find('.status-video')[params.videoActive ? 'addClass' : 'removeClass']('hidden') | ||||
| } | } | ||||
| if ('nickname' in params) { | if ('nickname' in params) { | ||||
| element.find('.meet-nickname > .content').text(params.nickname) | element.find('.meet-nickname > .content').text(params.nickname) | ||||
| } | } | ||||
| if (isSelf) { | if (isSelf) { | ||||
| element.addClass('self') | element.addClass('self') | ||||
| } | } | ||||
| if (isModerator) { | if (isModerator) { | ||||
| element.addClass('moderated') | element.addClass('moderated') | ||||
| } | } | ||||
| element.find('.dropdown-menu')[isSelf || isModerator ? 'removeClass' : 'addClass']('hidden') | const withPerm = isModerator && !roleScreen && !(roleOwner && !isSelf); | ||||
| element.find('.permissions')[isModerator ? 'removeClass' : 'addClass']('hidden') | const withMenu = isSelf || (isModerator && !roleOwner) | ||||
| if ('role' in params && params.role & Roles.SCREEN) { | let elements = { | ||||
| element.find('.permissions').addClass('hidden') | '.dropdown-menu': withMenu, | ||||
| '.permissions': withPerm, | |||||
| 'svg.moderator': roleModerator, | |||||
| 'svg.user': !roleModerator | |||||
| } | } | ||||
| Object.keys(elements).forEach(key => { | |||||
| element.find(key)[elements[key] ? 'removeClass' : 'addClass']('hidden') | |||||
| }) | |||||
| element.find('.action-role-publisher input').prop('checked', rolePublisher) | |||||
| element.find('.action-role-moderator input').prop('checked', roleModerator) | |||||
| .prop('disabled', roleOwner) | |||||
| return wrapper | return wrapper | ||||
| } | } | ||||
| /** | /** | ||||
| * Create a tag-like element for a subscriber participant | * Create a tag-like element for a subscriber participant | ||||
| * | * | ||||
| * @param params Connection metadata/params | * @param params Connection metadata/params | ||||
| */ | */ | ||||
| Show All 14 Lines | function Meet(container) | ||||
| * @param object params Connection metadata/params | * @param object params Connection metadata/params | ||||
| */ | */ | ||||
| function nicknameWidget(params) { | function nicknameWidget(params) { | ||||
| // Create the element | // Create the element | ||||
| let element = $( | let element = $( | ||||
| '<div class="dropdown">' | '<div class="dropdown">' | ||||
| + '<a href="#" class="meet-nickname btn" aria-haspopup="true" aria-expanded="false" role="button">' | + '<a href="#" class="meet-nickname btn" aria-haspopup="true" aria-expanded="false" role="button">' | ||||
| + '<span class="content"></span>' | + '<span class="content"></span>' | ||||
| + '<span class="icon">' + svgIcon('user') + '</span>' | + '<span class="icon">' | ||||
| + svgIcon('user', null, 'user') | |||||
| + svgIcon('crown', null, 'moderator hidden') | |||||
| + '</span>' | |||||
| + '</a>' | + '</a>' | ||||
| + '<div class="dropdown-menu">' | + '<div class="dropdown-menu">' | ||||
| + '<a class="dropdown-item action-nickname" href="#">Nickname</a>' | + '<a class="dropdown-item action-nickname" href="#">Nickname</a>' | ||||
| + '<a class="dropdown-item action-dismiss" href="#">Dismiss</a>' | + '<a class="dropdown-item action-dismiss" href="#">Dismiss</a>' | ||||
| + '<div class="dropdown-divider permissions"></div>' | + '<div class="dropdown-divider permissions"></div>' | ||||
| + '<div class="permissions">' | + '<div class="permissions">' | ||||
| + '<h6 class="dropdown-header">Permissions</h6>' | + '<h6 class="dropdown-header">Permissions</h6>' | ||||
| + '<label class="dropdown-item action-role-publisher custom-control custom-switch">' | + '<label class="dropdown-item action-role-publisher custom-control custom-switch">' | ||||
| + '<input type="checkbox" class="custom-control-input">' | + '<input type="checkbox" class="custom-control-input">' | ||||
| + ' <span class="custom-control-label">Audio & Video publishing</span>' | + ' <span class="custom-control-label">Audio & Video publishing</span>' | ||||
| + '</label>' | + '</label>' | ||||
| //+ '<label class="dropdown-item action-role-moderator custom-control custom-switch">' | + '<label class="dropdown-item action-role-moderator custom-control custom-switch">' | ||||
| // + '<input type="checkbox" class="custom-control-input">' | + '<input type="checkbox" class="custom-control-input">' | ||||
| // + ' <span class="custom-control-label">Moderation</span>' | + ' <span class="custom-control-label">Moderation</span>' | ||||
| //+ '</label>' | + '</label>' | ||||
| + '</div>' | + '</div>' | ||||
| + '</div>' | + '</div>' | ||||
| + '</div>' | + '</div>' | ||||
| ) | ) | ||||
| let nickname = element.find('.meet-nickname') | let nickname = element.find('.meet-nickname') | ||||
| .addClass('btn btn-outline-' + (params.isSelf ? 'primary' : 'secondary')) | .addClass('btn btn-outline-' + (params.isSelf ? 'primary' : 'secondary')) | ||||
| .attr({title: 'Options', 'data-toggle': 'dropdown'}) | .attr({title: 'Options', 'data-toggle': 'dropdown'}) | ||||
| ▲ Show 20 Lines • Show All 63 Lines • ▼ Show 20 Lines | function nicknameWidget(params) { | ||||
| } else if (role & Roles.MODERATOR) { | } else if (role & Roles.MODERATOR) { | ||||
| role ^= Roles.MODERATOR | role ^= Roles.MODERATOR | ||||
| } | } | ||||
| sessionData.onConnectionChange(params.connectionId, { role }) | sessionData.onConnectionChange(params.connectionId, { role }) | ||||
| }) | }) | ||||
| } | } | ||||
| let connectionRole = () => { | |||||
| if (params.isSelf) { | |||||
| return sessionData.role | |||||
| } | |||||
| if (params.connectionId in connections) { | |||||
| return connections[params.connectionId].role | |||||
| } | |||||
| return 0 | |||||
| } | |||||
| // Don't close the menu on permission change | |||||
| element.find('.dropdown-menu > label').on('click', e => { e.stopPropagation() }) | |||||
| if (sessionData.onConnectionChange) { | |||||
| element.find('.action-role-publisher input').on('change', e => { | |||||
| const enabled = e.target.checked | |||||
| let role = connectionRole() | |||||
| if (enabled) { | |||||
| role |= Roles.PUBLISHER | |||||
| } else { | |||||
| role |= Roles.SUBSCRIBER | |||||
| if (role & Roles.PUBLISHER) { | |||||
| role ^= Roles.PUBLISHER | |||||
| } | |||||
| } | |||||
| sessionData.onConnectionChange(params.connectionId, { role }) | |||||
| }) | |||||
| element.find('.action-role-moderator input').on('change', e => { | |||||
| const enabled = e.target.checked | |||||
| let role = connectionRole() | |||||
| if (enabled) { | |||||
| role |= Roles.MODERATOR | |||||
| } else if (role & Roles.MODERATOR) { | |||||
| role ^= Roles.MODERATOR | |||||
| } | |||||
| sessionData.onConnectionChange(params.connectionId, { role }) | |||||
| }) | |||||
| } | |||||
| return element.get(0) | return element.get(0) | ||||
| } | } | ||||
| /** | /** | ||||
| * Window onresize event handler (updates room layout) | * Window onresize event handler (updates room layout) | ||||
| */ | */ | ||||
| function resize() { | function resize() { | ||||
| containerWidth = container.offsetWidth | containerWidth = container.offsetWidth | ||||
| ▲ Show 20 Lines • Show All 87 Lines • ▼ Show 20 Lines | |||||
| */ | */ | ||||
| function screenConnect(callback) { | function screenConnect(callback) { | ||||
| if (!sessionData.shareToken) { | if (!sessionData.shareToken) { | ||||
| return false | return false | ||||
| } | } | ||||
| let gotSession = !!screenSession | let gotSession = !!screenSession | ||||
| if (!screenOV) { | |||||
| screenOV = new OpenVidu() | |||||
| } | |||||
| // Init screen sharing session | // Init screen sharing session | ||||
| if (!gotSession) { | if (!gotSession) { | ||||
| screenSession = screenOV.initSession(); | screenSession = screenOV.initSession(); | ||||
| } | } | ||||
| let successFunc = function() { | let successFunc = function() { | ||||
| screenSession.publish(screenPublisher) | screenSession.publish(screenPublisher) | ||||
| screenSession.on('sessionDisconnected', event => { | |||||
| callback(false) | |||||
| screenSession = null | |||||
| screenPublisher = null | |||||
| }) | |||||
| if (callback) { | if (callback) { | ||||
| callback(true) | callback(true) | ||||
| } | } | ||||
| } | } | ||||
| let errorFunc = function() { | let errorFunc = function() { | ||||
| screenPublisher = null | screenPublisher = null | ||||
| if (callback) { | if (callback) { | ||||
| callback(false) | callback(false, true) | ||||
| } | } | ||||
| } | } | ||||
| // Init the publisher | // Init the publisher | ||||
| let params = { | let params = { | ||||
| videoSource: 'screen', | videoSource: 'screen', | ||||
| publishAudio: false | publishAudio: false | ||||
| } | } | ||||
| ▲ Show 20 Lines • Show All 112 Lines • Show Last 20 Lines | |||||