You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Toolbar.js 20KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646
  1. /* global APP,$, buttonClick, config, lockRoom,
  2. setSharedKey, Util */
  3. var messageHandler = require("../util/MessageHandler");
  4. var BottomToolbar = require("./BottomToolbar");
  5. var Prezi = require("../prezi/Prezi");
  6. var Etherpad = require("../etherpad/Etherpad");
  7. var PanelToggler = require("../side_pannels/SidePanelToggler");
  8. var Authentication = require("../authentication/Authentication");
  9. var UIUtil = require("../util/UIUtil");
  10. var AuthenticationEvents
  11. = require("../../../service/authentication/AuthenticationEvents");
  12. var roomUrl = null;
  13. var sharedKey = '';
  14. var UI = null;
  15. var buttonHandlers =
  16. {
  17. "toolbar_button_mute": function () {
  18. return APP.UI.toggleAudio();
  19. },
  20. "toolbar_button_camera": function () {
  21. return APP.UI.toggleVideo();
  22. },
  23. /*"toolbar_button_authentication": function () {
  24. return Toolbar.authenticateClicked();
  25. },*/
  26. "toolbar_button_record": function () {
  27. return toggleRecording();
  28. },
  29. "toolbar_button_security": function () {
  30. return Toolbar.openLockDialog();
  31. },
  32. "toolbar_button_link": function () {
  33. return Toolbar.openLinkDialog();
  34. },
  35. "toolbar_button_chat": function () {
  36. return BottomToolbar.toggleChat();
  37. },
  38. "toolbar_button_prezi": function () {
  39. return Prezi.openPreziDialog();
  40. },
  41. "toolbar_button_etherpad": function () {
  42. return Etherpad.toggleEtherpad(0);
  43. },
  44. "toolbar_button_desktopsharing": function () {
  45. return APP.desktopsharing.toggleScreenSharing();
  46. },
  47. "toolbar_button_fullScreen": function()
  48. {
  49. UIUtil.buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen");
  50. return Toolbar.toggleFullScreen();
  51. },
  52. "toolbar_button_sip": function () {
  53. return callSipButtonClicked();
  54. },
  55. "toolbar_button_dialpad": function () {
  56. return dialpadButtonClicked();
  57. },
  58. "toolbar_button_settings": function () {
  59. PanelToggler.toggleSettingsMenu();
  60. },
  61. "toolbar_button_hangup": function () {
  62. return hangup();
  63. },
  64. "toolbar_button_login": function () {
  65. Toolbar.authenticateClicked();
  66. },
  67. "toolbar_button_logout": function () {
  68. // Ask for confirmation
  69. messageHandler.openTwoButtonDialog(
  70. "dialog.logoutTitle",
  71. null,
  72. "dialog.logoutQuestion",
  73. null,
  74. false,
  75. "dialog.Yes",
  76. function (evt, yes) {
  77. if (yes) {
  78. APP.xmpp.logout(function (url) {
  79. if (url) {
  80. window.location.href = url;
  81. } else {
  82. hangup();
  83. }
  84. });
  85. }
  86. });
  87. }
  88. };
  89. function hangup() {
  90. APP.xmpp.disposeConference();
  91. if(config.enableWelcomePage)
  92. {
  93. setTimeout(function()
  94. {
  95. window.localStorage.welcomePageDisabled = false;
  96. window.location.pathname = "/";
  97. }, 10000);
  98. }
  99. var title = APP.translation.generateTranslatonHTML(
  100. "dialog.sessTerminated");
  101. var msg = APP.translation.generateTranslatonHTML(
  102. "dialog.hungUp");
  103. var button = APP.translation.generateTranslatonHTML(
  104. "dialog.joinAgain");
  105. var buttons = [];
  106. buttons.push({title: button, value: true});
  107. UI.messageHandler.openDialog(
  108. title,
  109. msg,
  110. true,
  111. buttons,
  112. function(event, value, message, formVals)
  113. {
  114. window.location.reload();
  115. return false;
  116. }
  117. );
  118. }
  119. /**
  120. * Starts or stops the recording for the conference.
  121. */
  122. function toggleRecording() {
  123. APP.xmpp.toggleRecording(function (callback) {
  124. var msg = APP.translation.generateTranslatonHTML(
  125. "dialog.recordingToken");
  126. var token = APP.translation.translateString("dialog.token");
  127. APP.UI.messageHandler.openTwoButtonDialog(null, null, null,
  128. '<h2>' + msg + '</h2>' +
  129. '<input name="recordingToken" type="text" ' +
  130. ' data-i18n="[placeholder]dialog.token" ' +
  131. 'placeholder="' + token + '" autofocus>',
  132. false,
  133. "dialog.Save",
  134. function (e, v, m, f) {
  135. if (v) {
  136. var token = f.recordingToken;
  137. if (token) {
  138. callback(UIUtil.escapeHtml(token));
  139. }
  140. }
  141. },
  142. null,
  143. function () { },
  144. ':input:first'
  145. );
  146. }, Toolbar.setRecordingButtonState, Toolbar.setRecordingButtonState);
  147. }
  148. /**
  149. * Locks / unlocks the room.
  150. */
  151. function lockRoom(lock) {
  152. var currentSharedKey = '';
  153. if (lock)
  154. currentSharedKey = sharedKey;
  155. APP.xmpp.lockRoom(currentSharedKey, function (res) {
  156. // password is required
  157. if (sharedKey)
  158. {
  159. console.log('set room password');
  160. Toolbar.lockLockButton();
  161. }
  162. else
  163. {
  164. console.log('removed room password');
  165. Toolbar.unlockLockButton();
  166. }
  167. }, function (err) {
  168. console.warn('setting password failed', err);
  169. messageHandler.showError("dialog.lockTitle",
  170. "dialog.lockMessage");
  171. Toolbar.setSharedKey('');
  172. }, function () {
  173. console.warn('room passwords not supported');
  174. messageHandler.showError("dialog.warning",
  175. "dialog.passwordNotSupported");
  176. Toolbar.setSharedKey('');
  177. });
  178. };
  179. /**
  180. * Invite participants to conference.
  181. */
  182. function inviteParticipants() {
  183. if (roomUrl === null)
  184. return;
  185. var sharedKeyText = "";
  186. if (sharedKey && sharedKey.length > 0) {
  187. sharedKeyText =
  188. APP.translation.translateString("email.sharedKey",
  189. {sharedKey: sharedKey});
  190. sharedKeyText = sharedKeyText.replace(/\n/g, "%0D%0A");
  191. }
  192. var supportedBrowsers = "Chromium, Google Chrome " +
  193. APP.translation.translateString("email.and") + " Opera";
  194. var conferenceName = roomUrl.substring(roomUrl.lastIndexOf('/') + 1);
  195. var subject = APP.translation.translateString("email.subject",
  196. {appName:interfaceConfig.APP_NAME, conferenceName: conferenceName});
  197. var body = APP.translation.translateString("email.body",
  198. {appName:interfaceConfig.APP_NAME, sharedKeyText: sharedKeyText,
  199. roomUrl: roomUrl, supportedBrowsers: supportedBrowsers});
  200. body = body.replace(/\n/g, "%0D%0A");
  201. if (window.localStorage.displayname) {
  202. body += "%0D%0A%0D%0A" + window.localStorage.displayname;
  203. }
  204. if (interfaceConfig.INVITATION_POWERED_BY) {
  205. body += "%0D%0A%0D%0A--%0D%0Apowered by jitsi.org";
  206. }
  207. window.open("mailto:?subject=" + subject + "&body=" + body, '_blank');
  208. }
  209. function dialpadButtonClicked()
  210. {
  211. //TODO show the dialpad window
  212. }
  213. function callSipButtonClicked()
  214. {
  215. var defaultNumber
  216. = config.defaultSipNumber ? config.defaultSipNumber : '';
  217. var sipMsg = APP.translation.generateTranslatonHTML(
  218. "dialog.sipMsg");
  219. messageHandler.openTwoButtonDialog(null, null, null,
  220. '<h2>' + sipMsg + '</h2>' +
  221. '<input name="sipNumber" type="text"' +
  222. ' value="' + defaultNumber + '" autofocus>',
  223. false,
  224. "dialog.Dial",
  225. function (e, v, m, f) {
  226. if (v) {
  227. var numberInput = f.sipNumber;
  228. if (numberInput) {
  229. APP.xmpp.dial(
  230. numberInput, 'fromnumber', UI.getRoomName(), sharedKey);
  231. }
  232. }
  233. },
  234. null, null, ':input:first'
  235. );
  236. }
  237. var Toolbar = (function (my) {
  238. my.init = function (ui) {
  239. for(var k in buttonHandlers)
  240. $("#" + k).click(buttonHandlers[k]);
  241. UI = ui;
  242. // Update login info
  243. APP.xmpp.addListener(
  244. AuthenticationEvents.IDENTITY_UPDATED,
  245. function (authenticationEnabled, userIdentity) {
  246. var loggedIn = false;
  247. if (userIdentity) {
  248. loggedIn = true;
  249. }
  250. Toolbar.showAuthenticateButton(authenticationEnabled);
  251. if (authenticationEnabled) {
  252. Toolbar.setAuthenticatedIdentity(userIdentity);
  253. Toolbar.showLoginButton(!loggedIn);
  254. Toolbar.showLogoutButton(loggedIn);
  255. }
  256. }
  257. );
  258. },
  259. /**
  260. * Sets shared key
  261. * @param sKey the shared key
  262. */
  263. my.setSharedKey = function (sKey) {
  264. sharedKey = sKey;
  265. };
  266. my.authenticateClicked = function () {
  267. Authentication.focusAuthenticationWindow();
  268. if (!APP.xmpp.isExternalAuthEnabled()) {
  269. Authentication.xmppAuthenticate();
  270. return;
  271. }
  272. // Get authentication URL
  273. if (!APP.xmpp.getMUCJoined()) {
  274. APP.xmpp.getLoginUrl(UI.getRoomName(), function (url) {
  275. // If conference has not been started yet - redirect to login page
  276. window.location.href = url;
  277. });
  278. } else {
  279. APP.xmpp.getPopupLoginUrl(UI.getRoomName(), function (url) {
  280. // Otherwise - open popup with authentication URL
  281. var authenticationWindow = Authentication.createAuthenticationWindow(
  282. function () {
  283. // On popup closed - retry room allocation
  284. APP.xmpp.allocateConferenceFocus(
  285. APP.UI.getRoomName(),
  286. function () { console.info("AUTH DONE"); }
  287. );
  288. }, url);
  289. if (!authenticationWindow) {
  290. messageHandler.openMessageDialog(
  291. null, "dialog.popupError");
  292. }
  293. });
  294. }
  295. };
  296. /**
  297. * Updates the room invite url.
  298. */
  299. my.updateRoomUrl = function (newRoomUrl) {
  300. roomUrl = newRoomUrl;
  301. // If the invite dialog has been already opened we update the information.
  302. var inviteLink = document.getElementById('inviteLinkRef');
  303. if (inviteLink) {
  304. inviteLink.value = roomUrl;
  305. inviteLink.select();
  306. document.getElementById('jqi_state0_buttonInvite').disabled = false;
  307. }
  308. };
  309. /**
  310. * Disables and enables some of the buttons.
  311. */
  312. my.setupButtonsFromConfig = function () {
  313. if (config.disablePrezi)
  314. {
  315. $("#prezi_button").css({display: "none"});
  316. }
  317. };
  318. /**
  319. * Opens the lock room dialog.
  320. */
  321. my.openLockDialog = function () {
  322. // Only the focus is able to set a shared key.
  323. if (!APP.xmpp.isModerator()) {
  324. if (sharedKey) {
  325. messageHandler.openMessageDialog(null,
  326. "dialog.passwordError");
  327. } else {
  328. messageHandler.openMessageDialog(null, "dialog.passwordError2");
  329. }
  330. } else {
  331. if (sharedKey) {
  332. messageHandler.openTwoButtonDialog(null, null,
  333. "dialog.passwordCheck",
  334. null,
  335. false,
  336. "dialog.Remove",
  337. function (e, v) {
  338. if (v) {
  339. Toolbar.setSharedKey('');
  340. lockRoom(false);
  341. }
  342. });
  343. } else {
  344. var msg = APP.translation.generateTranslatonHTML(
  345. "dialog.passwordMsg");
  346. var yourPassword = APP.translation.translateString(
  347. "dialog.yourPassword");
  348. messageHandler.openTwoButtonDialog(null, null, null,
  349. '<h2>' + msg + '</h2>' +
  350. '<input name="lockKey" type="text"' +
  351. ' data-i18n="[placeholder]dialog.yourPassword" ' +
  352. 'placeholder="' + yourPassword + '" autofocus>',
  353. false,
  354. "dialog.Save",
  355. function (e, v, m, f) {
  356. if (v) {
  357. var lockKey = f.lockKey;
  358. if (lockKey) {
  359. Toolbar.setSharedKey(
  360. UIUtil.escapeHtml(lockKey));
  361. lockRoom(true);
  362. }
  363. }
  364. },
  365. null, null, 'input:first'
  366. );
  367. }
  368. }
  369. };
  370. /**
  371. * Opens the invite link dialog.
  372. */
  373. my.openLinkDialog = function () {
  374. var inviteAttreibutes;
  375. if (roomUrl === null) {
  376. inviteAttreibutes = 'data-i18n="[value]roomUrlDefaultMsg" value="' +
  377. APP.translation.translateString("roomUrlDefaultMsg") + '"';
  378. } else {
  379. inviteAttreibutes = "value=\"" + encodeURI(roomUrl) + "\"";
  380. }
  381. messageHandler.openTwoButtonDialog("dialog.shareLink",
  382. null, null,
  383. '<input id="inviteLinkRef" type="text" ' +
  384. inviteAttreibutes + ' onclick="this.select();" readonly>',
  385. false,
  386. "dialog.Invite",
  387. function (e, v) {
  388. if (v) {
  389. if (roomUrl) {
  390. inviteParticipants();
  391. }
  392. }
  393. },
  394. function () {
  395. if (roomUrl) {
  396. document.getElementById('inviteLinkRef').select();
  397. } else {
  398. document.getElementById('jqi_state0_buttonInvite')
  399. .disabled = true;
  400. }
  401. }
  402. );
  403. };
  404. /**
  405. * Opens the settings dialog.
  406. * FIXME: not used ?
  407. */
  408. my.openSettingsDialog = function () {
  409. var settings1 = APP.translation.generateTranslatonHTML(
  410. "dialog.settings1");
  411. var settings2 = APP.translation.generateTranslatonHTML(
  412. "dialog.settings2");
  413. var settings3 = APP.translation.generateTranslatonHTML(
  414. "dialog.settings3");
  415. var yourPassword = APP.translation.translateString(
  416. "dialog.yourPassword");
  417. messageHandler.openTwoButtonDialog(null,
  418. '<h2>' + settings1 + '</h2>' +
  419. '<input type="checkbox" id="initMuted">' +
  420. settings2 + '<br/>' +
  421. '<input type="checkbox" id="requireNicknames">' +
  422. settings3 +
  423. '<input id="lockKey" type="text" placeholder="' + yourPassword +
  424. '" data-i18n="[placeholder]dialog.yourPassword" autofocus>',
  425. null,
  426. null,
  427. false,
  428. "dialog.Save",
  429. function () {
  430. document.getElementById('lockKey').focus();
  431. },
  432. function (e, v) {
  433. if (v) {
  434. if ($('#initMuted').is(":checked")) {
  435. // it is checked
  436. }
  437. if ($('#requireNicknames').is(":checked")) {
  438. // it is checked
  439. }
  440. /*
  441. var lockKey = document.getElementById('lockKey');
  442. if (lockKey.value) {
  443. setSharedKey(lockKey.value);
  444. lockRoom(true);
  445. }
  446. */
  447. }
  448. }
  449. );
  450. };
  451. /**
  452. * Toggles the application in and out of full screen mode
  453. * (a.k.a. presentation mode in Chrome).
  454. */
  455. my.toggleFullScreen = function () {
  456. var fsElement = document.documentElement;
  457. if (!document.mozFullScreen && !document.webkitIsFullScreen) {
  458. //Enter Full Screen
  459. if (fsElement.mozRequestFullScreen) {
  460. fsElement.mozRequestFullScreen();
  461. }
  462. else {
  463. fsElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
  464. }
  465. } else {
  466. //Exit Full Screen
  467. if (document.mozCancelFullScreen) {
  468. document.mozCancelFullScreen();
  469. } else {
  470. document.webkitCancelFullScreen();
  471. }
  472. }
  473. };
  474. /**
  475. * Unlocks the lock button state.
  476. */
  477. my.unlockLockButton = function () {
  478. if ($("#lockIcon").hasClass("icon-security-locked"))
  479. UIUtil.buttonClick("#lockIcon", "icon-security icon-security-locked");
  480. };
  481. /**
  482. * Updates the lock button state to locked.
  483. */
  484. my.lockLockButton = function () {
  485. if ($("#lockIcon").hasClass("icon-security"))
  486. UIUtil.buttonClick("#lockIcon", "icon-security icon-security-locked");
  487. };
  488. /**
  489. * Shows or hides authentication button
  490. * @param show <tt>true</tt> to show or <tt>false</tt> to hide
  491. */
  492. my.showAuthenticateButton = function (show) {
  493. if (show) {
  494. $('#authentication').css({display: "inline"});
  495. }
  496. else {
  497. $('#authentication').css({display: "none"});
  498. }
  499. };
  500. // Shows or hides the 'recording' button.
  501. my.showRecordingButton = function (show) {
  502. if (!config.enableRecording) {
  503. return;
  504. }
  505. if (show) {
  506. $('#recording').css({display: "inline"});
  507. }
  508. else {
  509. $('#recording').css({display: "none"});
  510. }
  511. };
  512. // Sets the state of the recording button
  513. my.setRecordingButtonState = function (isRecording) {
  514. var selector = $('#recordButton');
  515. if (isRecording) {
  516. selector.removeClass("icon-recEnable");
  517. selector.addClass("icon-recEnable active");
  518. } else {
  519. selector.removeClass("icon-recEnable active");
  520. selector.addClass("icon-recEnable");
  521. }
  522. };
  523. // Shows or hides SIP calls button
  524. my.showSipCallButton = function (show) {
  525. if (APP.xmpp.isSipGatewayEnabled() && show) {
  526. $('#sipCallButton').css({display: "inline-block"});
  527. } else {
  528. $('#sipCallButton').css({display: "none"});
  529. }
  530. };
  531. // Shows or hides the dialpad button
  532. my.showDialPadButton = function (show) {
  533. if (show) {
  534. $('#dialPadButton').css({display: "inline-block"});
  535. } else {
  536. $('#dialPadButton').css({display: "none"});
  537. }
  538. };
  539. /**
  540. * Displays user authenticated identity name(login).
  541. * @param authIdentity identity name to be displayed.
  542. */
  543. my.setAuthenticatedIdentity = function (authIdentity) {
  544. if (authIdentity) {
  545. var selector = $('#toolbar_auth_identity');
  546. selector.css({display: "list-item"});
  547. selector.text(authIdentity);
  548. } else {
  549. $('#toolbar_auth_identity').css({display: "none"});
  550. }
  551. };
  552. /**
  553. * Shows/hides login button.
  554. * @param show <tt>true</tt> to show
  555. */
  556. my.showLoginButton = function (show) {
  557. if (show) {
  558. $('#toolbar_button_login').css({display: "list-item"});
  559. } else {
  560. $('#toolbar_button_login').css({display: "none"});
  561. }
  562. };
  563. /**
  564. * Shows/hides logout button.
  565. * @param show <tt>true</tt> to show
  566. */
  567. my.showLogoutButton = function (show) {
  568. if (show) {
  569. $('#toolbar_button_logout').css({display: "list-item"});
  570. } else {
  571. $('#toolbar_button_logout').css({display: "none"});
  572. }
  573. };
  574. /**
  575. * Sets the state of the button. The button has blue glow if desktop
  576. * streaming is active.
  577. * @param active the state of the desktop streaming.
  578. */
  579. my.changeDesktopSharingButtonState = function (active) {
  580. var button = $("#desktopsharing > a");
  581. if (active)
  582. {
  583. button.addClass("glow");
  584. }
  585. else
  586. {
  587. button.removeClass("glow");
  588. }
  589. };
  590. return my;
  591. }(Toolbar || {}));
  592. module.exports = Toolbar;