Changeset View
Changeset View
Standalone View
Standalone View
src/resources/js/meet/app.js
import anchorme from 'anchorme' | import anchorme from 'anchorme' | ||||
import { Dropdown } from 'bootstrap' | |||||
import { library } from '@fortawesome/fontawesome-svg-core' | import { library } from '@fortawesome/fontawesome-svg-core' | ||||
import { OpenVidu } from 'openvidu-browser' | import { OpenVidu } from 'openvidu-browser' | ||||
class Roles { | class Roles { | ||||
static get SUBSCRIBER() { return 1 << 0; } | static get SUBSCRIBER() { return 1 << 0; } | ||||
static get PUBLISHER() { return 1 << 1; } | static get PUBLISHER() { return 1 << 1; } | ||||
static get MODERATOR() { return 1 << 2; } | static get MODERATOR() { return 1 << 2; } | ||||
static get SCREEN() { return 1 << 3; } | static get SCREEN() { return 1 << 3; } | ||||
▲ Show 20 Lines • Show All 1,018 Lines • ▼ Show 20 Lines | function publisherCreate(params, content) { | ||||
wrapper.prepend(content) | wrapper.prepend(content) | ||||
} | } | ||||
if (isScreen) { | if (isScreen) { | ||||
wrapper.addClass('screen') | wrapper.addClass('screen') | ||||
} | } | ||||
if (params.isSelf) { | if (params.isSelf) { | ||||
wrapper.find('.link-setup').removeClass('hidden').click(() => sessionData.onMediaSetup()) | wrapper.find('.link-setup').removeClass('hidden').on('click', () => sessionData.onMediaSetup()) | ||||
} else { | } else { | ||||
let volumeInput = wrapper.find('.volume input') | let volumeInput = wrapper.find('.volume input') | ||||
let audioButton = wrapper.find('.link-audio') | let audioButton = wrapper.find('.link-audio') | ||||
let inVolume = false | let inVolume = false | ||||
let hideVolumeTimeout | let hideVolumeTimeout | ||||
let hideVolume = () => { | let hideVolume = () => { | ||||
if (inVolume) { | if (inVolume) { | ||||
hideVolumeTimeout = setTimeout(hideVolume, 1000) | hideVolumeTimeout = setTimeout(hideVolume, 1000) | ||||
▲ Show 20 Lines • Show All 234 Lines • ▼ Show 20 Lines | function nicknameWidget(params) { | ||||
+ '</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">' + $t('meet.perm') + '</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 form-check form-switch">' | ||||
+ '<input type="checkbox" class="custom-control-input">' | + '<input type="checkbox" class="form-check-input">' | ||||
+ ' <span class="custom-control-label">' + $t('meet.perm-av') + '</span>' | + ' <span class="form-check-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 form-check form-switch">' | ||||
+ '<input type="checkbox" class="custom-control-input">' | + '<input type="checkbox" class="form-check-input">' | ||||
+ ' <span class="custom-control-label">' + $t('meet.perm-mod') + '</span>' | + ' <span class="form-check-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">' + $t('meet.lang-int') + '</h6>' | + '<h6 class="dropdown-header">' + $t('meet.lang-int') + '</h6>' | ||||
+ '<div class="ml-4 mr-4"><select class="custom-select">' | + '<div class="ps-3 pe-3"><select class="form-select">' | ||||
+ '<option value="">- ' + $t('form.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: $t('meet.menu-options'), 'data-toggle': 'dropdown'}) | .attr({title: $t('meet.menu-options'), 'data-bs-toggle': 'dropdown'}) | ||||
.dropdown({boundary: container.parentNode}) | |||||
const dropdown = new Dropdown(nickname[0], {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 68 Lines • ▼ Show 20 Lines | function nicknameWidget(params) { | ||||
sessionData.onConnectionChange(params.connectionId, { role }) | sessionData.onConnectionChange(params.connectionId, { role }) | ||||
}) | }) | ||||
element.find('.interpreting select') | element.find('.interpreting select') | ||||
.on('change', e => { | .on('change', e => { | ||||
const language = $(e.target).val() | const language = $(e.target).val() | ||||
sessionData.onConnectionChange(params.connectionId, { language }) | sessionData.onConnectionChange(params.connectionId, { language }) | ||||
element.find('.meet-nickname').dropdown('hide') | dropdown.hide() | ||||
}) | }) | ||||
.on('click', e => { | .on('click', e => { | ||||
// Prevents from closing the dropdown menu on click | // Prevents from closing the dropdown menu on click | ||||
e.stopPropagation() | e.stopPropagation() | ||||
}) | }) | ||||
return element.get(0) | return element.get(0) | ||||
} | } | ||||
▲ Show 20 Lines • Show All 320 Lines • Show Last 20 Lines |