338 lines
12 KiB
JavaScript
Executable File
338 lines
12 KiB
JavaScript
Executable File
let loadLib;
|
|
|
|
// Helper to load javascript libraries from the BBB server
|
|
loadLib = function(libname) {
|
|
let retryMessageCallback, successCallback;
|
|
successCallback = function() {};
|
|
retryMessageCallback = function(param) {
|
|
return console.log("Failed to load library", param);
|
|
};
|
|
return Meteor.Loader.loadJs(`${window.location.origin}/client/lib/${libname}`, successCallback, 10000).fail(retryMessageCallback);
|
|
};
|
|
|
|
// These settings can just be stored locally in session, created at start up
|
|
Meteor.startup(() => {
|
|
// Load SIP libraries before the application starts
|
|
loadLib('sip.js');
|
|
loadLib('bbb_webrtc_bridge_sip.js');
|
|
loadLib('bbblogger.js');
|
|
return this.SessionAmplify = _.extend({}, Session, {
|
|
keys: _.object(_.map(amplify.store.sessionStorage(), (value, key) => {
|
|
return [key, JSON.stringify(value)];
|
|
})),
|
|
set(key, value) {
|
|
Session.set.apply(this, arguments);
|
|
amplify.store.sessionStorage(key, value);
|
|
}
|
|
});
|
|
});
|
|
|
|
//
|
|
Template.header.events({
|
|
"click .chatBarIcon"(event) {
|
|
$(".tooltip").hide();
|
|
return toggleChatbar();
|
|
},
|
|
"click .hideNavbarIcon"(event) {
|
|
$(".tooltip").hide();
|
|
return toggleNavbar();
|
|
},
|
|
"click .leaveAudioButton"(event) {
|
|
return exitVoiceCall(event);
|
|
},
|
|
"click .muteIcon"(event) {
|
|
$(".tooltip").hide();
|
|
return toggleMic(this);
|
|
},
|
|
"click .hideNavbarIcon"(event) {
|
|
$(".tooltip").hide();
|
|
return toggleNavbar();
|
|
},
|
|
"click .videoFeedIcon"(event) {
|
|
$(".tooltip").hide();
|
|
return toggleCam(this);
|
|
},
|
|
"click .toggleUserlistButton"(event) {
|
|
if(isLandscape() || isLandscapeMobile()) {
|
|
return toggleUsersList();
|
|
} else {
|
|
if($('.settingsMenu').hasClass('menuOut')) {
|
|
toggleSettingsMenu();
|
|
} else {
|
|
toggleShield();
|
|
}
|
|
return toggleUserlistMenu();
|
|
}
|
|
},
|
|
"click .toggleMenuButton"(event) {
|
|
if($('.userlistMenu').hasClass('menuOut')) {
|
|
toggleUserlistMenu();
|
|
} else {
|
|
toggleShield();
|
|
}
|
|
$('.toggleMenuButton').blur();
|
|
return toggleSettingsMenu();
|
|
},
|
|
"click .btn"(event) {
|
|
return $(".ui-tooltip").hide();
|
|
}
|
|
});
|
|
|
|
Template.menu.events({
|
|
'click .slideButton'(event) {
|
|
toggleShield();
|
|
toggleSettingsMenu();
|
|
return $('.slideButton').blur();
|
|
},
|
|
'click .toggleChatButton'(event) {
|
|
return toggleChatbar();
|
|
}
|
|
});
|
|
|
|
Template.main.rendered = function() {
|
|
ReactDOM.render(<Chat />, document.getElementById("chat"));
|
|
|
|
let lastOrientationWasLandscape;
|
|
$("#dialog").dialog({
|
|
modal: true,
|
|
draggable: false,
|
|
resizable: false,
|
|
autoOpen: false,
|
|
dialogClass: 'no-close logout-dialog',
|
|
buttons: [
|
|
{
|
|
text: 'Yes',
|
|
click: function() {
|
|
userLogout(BBB.getMeetingId(), getInSession("userId"), true);
|
|
return $(this).dialog("close");
|
|
},
|
|
"class": 'btn btn-xs btn-primary active'
|
|
}, {
|
|
text: 'No',
|
|
click: function() {
|
|
$(this).dialog("close");
|
|
return $(".tooltip").hide();
|
|
},
|
|
"class": 'btn btn-xs btn-default'
|
|
}
|
|
],
|
|
open(event, ui) {
|
|
return $('.ui-widget-overlay').bind('click', () => {
|
|
if(isMobile()) {
|
|
return $("#dialog").dialog('close');
|
|
}
|
|
});
|
|
},
|
|
position: {
|
|
my: 'right top',
|
|
at: 'right bottom',
|
|
of: '.signOutIcon'
|
|
}
|
|
});
|
|
lastOrientationWasLandscape = isLandscape();
|
|
$(window).resize(() => {
|
|
$('#dialog').dialog('close');
|
|
|
|
// when the orientation switches call the handler
|
|
if(isLandscape() && !lastOrientationWasLandscape) {
|
|
orientationBecameLandscape();
|
|
return lastOrientationWasLandscape = true;
|
|
} else if(isPortrait() && lastOrientationWasLandscape) {
|
|
orientationBecamePortrait();
|
|
return lastOrientationWasLandscape = false;
|
|
}
|
|
});
|
|
$('#shield').click(() => {
|
|
return toggleSlidingMenu();
|
|
});
|
|
if(Meteor.config.app.autoJoinAudio) {
|
|
if(Meteor.config.app.skipCheck) {
|
|
return joinVoiceCall(this, {
|
|
isListenOnly: Meteor.config.app.listenOnly
|
|
});
|
|
} else {
|
|
$("#settingsModal").foundation('reveal', 'open');
|
|
if(Meteor.config.app.listenOnly) {
|
|
return $('#joinMicrophone').prop('disabled', true);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
Template.main.events({
|
|
'click .shield'(event) {
|
|
$(".tooltip").hide();
|
|
toggleShield();
|
|
return closeMenus();
|
|
},
|
|
'click .settingsIcon'(event) {
|
|
return $("#settingsModal").foundation('reveal', 'open');
|
|
},
|
|
'click .signOutIcon'(event) {
|
|
$('.signOutIcon').blur();
|
|
return $("#logoutModal").foundation('reveal', 'open');
|
|
}
|
|
});
|
|
|
|
Template.main.gestures({
|
|
'panstart #container'(event, template) {
|
|
let initTransformValue, menuPanned, panIsValid, screenWidth;
|
|
if(isPortraitMobile() && isPanHorizontal(event)) {
|
|
panIsValid = getInSession('panIsValid');
|
|
initTransformValue = getInSession('initTransform');
|
|
menuPanned = getInSession('menuPanned');
|
|
screenWidth = $('#container').width();
|
|
setInSession('panStarted', true);
|
|
if(panIsValid && menuPanned === 'left' && initTransformValue + event.deltaX >= 0 && initTransformValue + event.deltaX <= $('.left-drawer').width()) {
|
|
return $('.left-drawer').css('transform', `translateX(${initTransformValue + event.deltaX}px)`);
|
|
} else if(panIsValid && menuPanned === 'right' && initTransformValue + event.deltaX >= screenWidth - $('.right-drawer').width() && initTransformValue + event.deltaX <= screenWidth) {
|
|
return $('.right-drawer').css('transform', `translateX(${initTransformValue + event.deltaX}px)`);
|
|
}
|
|
}
|
|
},
|
|
'panend #container'(event, template) {
|
|
let leftDrawerWidth, menuPanned, panIsValid, screenWidth;
|
|
if(isPortraitMobile()) {
|
|
panIsValid = getInSession('panIsValid');
|
|
menuPanned = getInSession('menuPanned');
|
|
leftDrawerWidth = $('.left-drawer').width();
|
|
screenWidth = $('#container').width();
|
|
setInSession('panStarted', false);
|
|
if(panIsValid && menuPanned === 'left' && $('.left-drawer').css('transform') !== 'none') {
|
|
if(parseInt($('.left-drawer').css('transform').split(',')[4]) < leftDrawerWidth / 2) {
|
|
$('.shield').removeClass('animatedShield');
|
|
$('.shield').css('opacity', '');
|
|
$('.left-drawer').removeClass('menuOut');
|
|
$('.left-drawer').css('transform', '');
|
|
$('.toggleUserlistButton').removeClass('menuToggledOn');
|
|
$('.shield').removeClass('darken');
|
|
} else {
|
|
$('.left-drawer').css('transform', `translateX(${leftDrawerWidth}px)`);
|
|
$('.shield').css('opacity', 0.5);
|
|
$('.left-drawer').addClass('menuOut');
|
|
$('.left-drawer').css('transform', '');
|
|
$('.toggleUserlistButton').addClass('menuToggledOn');
|
|
}
|
|
}
|
|
if(panIsValid && menuPanned === 'right' && parseInt($('.right-drawer').css('transform').split(',')[4]) !== leftDrawerWidth) {
|
|
if(parseInt($('.right-drawer').css('transform').split(',')[4]) > screenWidth - $('.right-drawer').width() / 2) {
|
|
$('.shield').removeClass('animatedShield');
|
|
$('.shield').css('opacity', '');
|
|
$('.right-drawer').css('transform', `translateX(${screenWidth}px)`);
|
|
$('.right-drawer').removeClass('menuOut');
|
|
$('.right-drawer').css('transform', '');
|
|
$('.toggleMenuButton').removeClass('menuToggledOn');
|
|
$('.shield').removeClass('darken'); // in case it was opened by clicking a button
|
|
} else {
|
|
$('.shield').css('opacity', 0.5);
|
|
$('.right-drawer').css('transform', `translateX(${screenWidth - $('.right-drawer').width()}px)`);
|
|
$('.right-drawer').addClass('menuOut');
|
|
$('.right-drawer').css('transform', '');
|
|
$('.toggleMenuButton').addClass('menuToggledOn');
|
|
}
|
|
}
|
|
$('.left-drawer').addClass('userlistMenu');
|
|
$('.userlistMenu').removeClass('left-drawer');
|
|
$('.right-drawer').addClass('settingsMenu');
|
|
return $('.settingsMenu').removeClass('right-drawer');
|
|
}
|
|
},
|
|
'panright #container, panleft #container'(event, template) {
|
|
let initTransformValue, leftDrawerWidth, menuPanned, panIsValid, rightDrawerWidth, screenWidth;
|
|
if(isPortraitMobile() && isPanHorizontal(event)) {
|
|
|
|
// panright/panleft is always triggered once right before panstart
|
|
if(!getInSession('panStarted')) {
|
|
|
|
// opening the left-hand menu
|
|
if(event.type === 'panright' && event.center.x <= $('#container').width() * 0.1) {
|
|
setInSession('panIsValid', true);
|
|
setInSession('menuPanned', 'left');
|
|
|
|
// closing the left-hand menu
|
|
} else if(event.type === 'panleft' && event.center.x < $('#container').width() * 0.9) {
|
|
setInSession('panIsValid', true);
|
|
setInSession('menuPanned', 'left');
|
|
|
|
// opening the right-hand menu
|
|
} else if(event.type === 'panleft' && event.center.x >= $('#container').width() * 0.9) {
|
|
setInSession('panIsValid', true);
|
|
setInSession('menuPanned', 'right');
|
|
|
|
// closing the right-hand menu
|
|
} else if(event.type === 'panright' && event.center.x > $('#container').width() * 0.1) {
|
|
setInSession('panIsValid', true);
|
|
setInSession('menuPanned', 'right');
|
|
} else {
|
|
setInSession('panIsValid', false);
|
|
}
|
|
setInSession('eventType', event.type);
|
|
if(getInSession('menuPanned') === 'left') {
|
|
if($('.userlistMenu').css('transform') !== 'none') { // menu is already transformed
|
|
setInSession(
|
|
'initTransform',
|
|
parseInt($('.userlistMenu').css('transform').split(',')[4])
|
|
); // translateX value
|
|
} else if($('.userlistMenu').hasClass('menuOut')) {
|
|
setInSession('initTransform', $('.userlistMenu').width());
|
|
} else {
|
|
setInSession('initTransform', 0);
|
|
}
|
|
$('.userlistMenu').addClass('left-drawer');
|
|
$('.left-drawer').removeClass('userlistMenu');
|
|
} else if(getInSession('menuPanned') === 'right') {
|
|
if($('.settingsMenu').css('transform') !== 'none') { // menu is already transformed
|
|
setInSession(
|
|
'initTransform',
|
|
parseInt($('.settingsMenu').css('transform').split(',')[4])
|
|
); // translateX value
|
|
} else if($('.settingsMenu').hasClass('menuOut')) {
|
|
setInSession('initTransform', $('.settingsMenu').width());
|
|
} else {
|
|
setInSession('initTransform', 0);
|
|
}
|
|
$('.settingsMenu').addClass('right-drawer');
|
|
$('.right-drawer').removeClass('settingsMenu');
|
|
}
|
|
}
|
|
initTransformValue = getInSession('initTransform');
|
|
panIsValid = getInSession('panIsValid');
|
|
menuPanned = getInSession('menuPanned');
|
|
leftDrawerWidth = $('.left-drawer').width();
|
|
rightDrawerWidth = $('.right-drawer').width();
|
|
screenWidth = $('#container').width();
|
|
|
|
// moving the left-hand menu
|
|
if(panIsValid &&
|
|
menuPanned === 'left' &&
|
|
initTransformValue + event.deltaX >= 0 &&
|
|
initTransformValue + event.deltaX <= leftDrawerWidth) {
|
|
if($('.settingsMenu').hasClass('menuOut')) {
|
|
toggleSettingsMenu();
|
|
}
|
|
$('.left-drawer').css('transform', `translateX(${initTransformValue + event.deltaX}px)`);
|
|
if(!getInSession('panStarted')) {
|
|
$('.shield').addClass('animatedShield');
|
|
}
|
|
return $('.shield').css('opacity', 0.5 * (initTransformValue + event.deltaX) / leftDrawerWidth);
|
|
} else if(panIsValid &&
|
|
menuPanned === 'right' &&
|
|
initTransformValue + event.deltaX >= screenWidth - rightDrawerWidth &&
|
|
initTransformValue + event.deltaX <= screenWidth) { // moving the right-hand menu
|
|
if($('.userlistMenu').hasClass('menuOut')) {
|
|
toggleUserlistMenu();
|
|
}
|
|
$('.right-drawer').css('transform', `translateX(${initTransformValue + event.deltaX}px)`);
|
|
if(!getInSession('panStarted')) {
|
|
$('.shield').addClass('animatedShield');
|
|
}
|
|
return $('.shield').css('opacity', 0.5 * (screenWidth - initTransformValue - event.deltaX) / rightDrawerWidth);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
Template.makeButton.rendered = function() {
|
|
return $('button[rel=tooltip]').tooltip();
|
|
};
|