Changeset View
Changeset View
Standalone View
Standalone View
src/resources/js/meet/app.js
| Show All 36 Lines | function Meet(container) | ||||
| let microphones = [] // List of user audio devices | let microphones = [] // List of user audio devices | ||||
| let connections = {} // Connected users in the session | let connections = {} // Connected users in the session | ||||
| let chatCount = 0 | let chatCount = 0 | ||||
| let volumeElement | let volumeElement | ||||
| let publishersContainer | let publishersContainer | ||||
| let subscribersContainer | let subscribersContainer | ||||
| let scrollStop | let scrollStop | ||||
| let $t | |||||
| OV = ovInit() | OV = ovInit() | ||||
| // Disconnect participant when browser's window close | // Disconnect participant when browser's window close | ||||
| window.addEventListener('beforeunload', () => { | window.addEventListener('beforeunload', () => { | ||||
| leaveRoom() | leaveRoom() | ||||
| }) | }) | ||||
| ▲ Show 20 Lines • Show All 47 Lines • ▼ Show 20 Lines | function Meet(container) | ||||
| * onSuccess - Callback for session connection (join) success | * onSuccess - Callback for session connection (join) success | ||||
| * onError - Callback for session connection (join) error | * onError - Callback for session connection (join) error | ||||
| * onDestroy - Callback for session disconnection event, | * onDestroy - Callback for session disconnection event, | ||||
| * onDismiss - Callback for Dismiss action, | * onDismiss - Callback for Dismiss action, | ||||
| * onJoinRequest - Callback for join request, | * onJoinRequest - Callback for join request, | ||||
| * onConnectionChange - Callback for participant changes, e.g. role update, | * onConnectionChange - Callback for participant changes, e.g. role update, | ||||
| * onSessionDataUpdate - Callback for current user connection update, | * onSessionDataUpdate - Callback for current user connection update, | ||||
| * onMediaSetup - Called when user clicks the Media setup button | * onMediaSetup - Called when user clicks the Media setup button | ||||
| * translate - Translation function | |||||
| */ | */ | ||||
| function joinRoom(data) { | function joinRoom(data) { | ||||
| // Create a container for subscribers and publishers | // Create a container for subscribers and publishers | ||||
| publishersContainer = $('<div id="meet-publishers">').appendTo(container).get(0) | publishersContainer = $('<div id="meet-publishers">').appendTo(container).get(0) | ||||
| subscribersContainer = $('<div id="meet-subscribers">').appendTo(container).get(0) | subscribersContainer = $('<div id="meet-subscribers">').appendTo(container).get(0) | ||||
| resize(); | resize(); | ||||
| volumeMeterStop() | volumeMeterStop() | ||||
| data.params = { | data.params = { | ||||
| nickname: data.nickname, // user nickname | nickname: data.nickname, // user nickname | ||||
| // avatar: undefined // avatar image | // avatar: undefined // avatar image | ||||
| } | } | ||||
| $t = data.translate | |||||
| // Make sure all supported callbacks exist, so we don't have to check | // Make sure all supported callbacks exist, so we don't have to check | ||||
| // their existence everywhere anymore | // their existence everywhere anymore | ||||
| let events = ['Success', 'Error', 'Destroy', 'Dismiss', 'JoinRequest', 'ConnectionChange', | let events = ['Success', 'Error', 'Destroy', 'Dismiss', 'JoinRequest', 'ConnectionChange', | ||||
| 'SessionDataUpdate', 'MediaSetup'] | 'SessionDataUpdate', 'MediaSetup'] | ||||
| events.map(event => 'on' + event).forEach(event => { | events.map(event => 'on' + event).forEach(event => { | ||||
| if (!data[event]) { | if (!data[event]) { | ||||
| data[event] = () => {} | data[event] = () => {} | ||||
| ▲ Show 20 Lines • Show All 864 Lines • ▼ Show 20 Lines | function Meet(container) | ||||
| function publisherCreate(params, content) { | function publisherCreate(params, content) { | ||||
| let isScreen = params.role & Roles.SCREEN | let isScreen = params.role & Roles.SCREEN | ||||
| // Create the element | // Create the element | ||||
| let wrapper = $( | let wrapper = $( | ||||
| '<div class="meet-video">' | '<div class="meet-video">' | ||||
| + svgIcon('user', 'fas', 'watermark') | + svgIcon('user', 'fas', 'watermark') | ||||
| + '<div class="controls">' | + '<div class="controls">' | ||||
| + '<button type="button" class="btn btn-link link-setup hidden" title="Media setup">' + svgIcon('cog') + '</button>' | + '<button type="button" class="btn btn-link link-setup hidden" title="' + $t('meet.media-setup') + '">' + svgIcon('cog') + '</button>' | ||||
| + '<button type="button" class="btn btn-link link-audio hidden" title="Mute audio">' + svgIcon('volume-mute') + '</button>' | + '<button type="button" class="btn btn-link link-audio hidden" title="' + $t('meet.menu-audio-mute') + '">' + svgIcon('volume-mute') + '</button>' | ||||
| + '<button type="button" class="btn btn-link link-fullscreen closed hidden" title="Full screen">' + svgIcon('expand') + '</button>' | + '<button type="button" class="btn btn-link link-fullscreen closed hidden" title="' + $t('meet.menu-fullscreen') + '">' + svgIcon('expand') + '</button>' | ||||
| + '<button type="button" class="btn btn-link link-fullscreen open hidden" title="Full screen">' + svgIcon('compress') + '</button>' | + '<button type="button" class="btn btn-link link-fullscreen open hidden" title="' + $t('meet.menu-fullscreen') + '">' + svgIcon('compress') + '</button>' | ||||
| + '</div>' | + '</div>' | ||||
| + '<div class="status">' | + '<div class="status">' | ||||
| + '<span class="bg-warning status-audio hidden">' + svgIcon('microphone-slash') + '</span>' | + '<span class="bg-warning status-audio hidden">' + svgIcon('microphone-slash') + '</span>' | ||||
| + '<span class="bg-warning status-video hidden">' + svgIcon('video-slash') + '</span>' | + '<span class="bg-warning status-video hidden">' + svgIcon('video-slash') + '</span>' | ||||
| + '</div>' | + '</div>' | ||||
| + '</div>' | + '</div>' | ||||
| ) | ) | ||||
| ▲ Show 20 Lines • Show All 195 Lines • ▼ Show 20 Lines | |||||
| * | * | ||||
| * @param object params Connection metadata/params | * @param object params Connection metadata/params | ||||
| */ | */ | ||||
| function nicknameWidget(params) { | function nicknameWidget(params) { | ||||
| let languages = [] | let languages = [] | ||||
| // Append languages selection options | // Append languages selection options | ||||
| Object.keys(sessionData.languages).forEach(code => { | Object.keys(sessionData.languages).forEach(code => { | ||||
| languages.push(`<option value="${code}">${sessionData.languages[code]}</option>`) | languages.push(`<option value="${code}">${$t(sessionData.languages[code])}</option>`) | ||||
| }) | }) | ||||
| // 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">' | + '<span class="icon">' | ||||
| + svgIcon('user', null, 'user') | + svgIcon('user', null, 'user') | ||||
| + svgIcon('crown', null, 'moderator hidden') | + svgIcon('crown', null, 'moderator hidden') | ||||
| + svgIcon('headphones', null, 'interpreter hidden') | + svgIcon('headphones', null, 'interpreter hidden') | ||||
| + '</span>' | + '</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">' + $t('meet.perm') + '</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">' + $t('meet.perm-av') + '</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">' + $t('meet.perm-mod') + '</span>' | ||||
| + '</label>' | + '</label>' | ||||
| + '</div>' | + '</div>' | ||||
| + '<div class="dropdown-divider interpreting"></div>' | + '<div class="dropdown-divider interpreting"></div>' | ||||
| + '<div class="interpreting">' | + '<div class="interpreting">' | ||||
| + '<h6 class="dropdown-header">Language interpreter</h6>' | + '<h6 class="dropdown-header">' + $t('meet.lang-int') + '</h6>' | ||||
| + '<div class="ml-4 mr-4"><select class="custom-select">' | + '<div class="ml-4 mr-4"><select class="custom-select">' | ||||
| + '<option value="">- none -</option>' | + '<option value="">- ' + $t('form.none') + ' -</option>' | ||||
| + languages.join('') | + languages.join('') | ||||
| + '</select></div>' | + '</select></div>' | ||||
| + '</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: $t('meet.menu-options'), 'data-toggle': 'dropdown'}) | ||||
| .dropdown({boundary: container.parentNode}) | .dropdown({boundary: container.parentNode}) | ||||
| if (params.isSelf) { | if (params.isSelf) { | ||||
| // Add events for nickname change | // Add events for nickname change | ||||
| let editable = element.find('.content')[0] | let editable = element.find('.content')[0] | ||||
| let editableEnable = () => { | let editableEnable = () => { | ||||
| editable.contentEditable = true | editable.contentEditable = true | ||||
| editable.focus() | editable.focus() | ||||
| ▲ Show 20 Lines • Show All 406 Lines • Show Last 20 Lines | |||||