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.

UI.js 26KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991
  1. /* global APP, $, config, interfaceConfig, toastr */
  2. /* jshint -W101 */
  3. var UI = {};
  4. import Chat from "./side_pannels/chat/Chat";
  5. import Toolbar from "./toolbars/Toolbar";
  6. import ToolbarToggler from "./toolbars/ToolbarToggler";
  7. import BottomToolbar from "./toolbars/BottomToolbar";
  8. import ContactList from "./side_pannels/contactlist/ContactList";
  9. import Avatar from "./avatar/Avatar";
  10. import PanelToggler from "./side_pannels/SidePanelToggler";
  11. import UIUtil from "./util/UIUtil";
  12. import UIEvents from "../../service/UI/UIEvents";
  13. import CQEvents from '../../service/connectionquality/CQEvents';
  14. import PreziManager from './prezi/Prezi';
  15. import EtherpadManager from './etherpad/Etherpad';
  16. import VideoLayout from "./videolayout/VideoLayout";
  17. import SettingsMenu from "./side_pannels/settings/SettingsMenu";
  18. import Settings from "./../settings/Settings";
  19. var EventEmitter = require("events");
  20. UI.messageHandler = require("./util/MessageHandler");
  21. var messageHandler = UI.messageHandler;
  22. var JitsiPopover = require("./util/JitsiPopover");
  23. var Feedback = require("./Feedback");
  24. var eventEmitter = new EventEmitter();
  25. UI.eventEmitter = eventEmitter;
  26. let preziManager;
  27. let etherpadManager;
  28. /**
  29. * Prompt user for nickname.
  30. */
  31. function promptDisplayName() {
  32. let nickRequiredMsg = APP.translation.translateString("dialog.displayNameRequired");
  33. let defaultNickMsg = APP.translation.translateString(
  34. "defaultNickname", {name: "Jane Pink"}
  35. );
  36. let message = `
  37. <h2 data-i18n="dialog.displayNameRequired">${nickRequiredMsg}</h2>
  38. <input name="displayName" type="text"
  39. data-i18n="[placeholder]defaultNickname"
  40. placeholder="${defaultNickMsg}" autofocus>`;
  41. let buttonTxt = APP.translation.generateTranslationHTML("dialog.Ok");
  42. let buttons = [{title: buttonTxt, value: "ok"}];
  43. messageHandler.openDialog(
  44. null, message,
  45. true,
  46. buttons,
  47. function (e, v, m, f) {
  48. if (v == "ok") {
  49. let displayName = f.displayName;
  50. if (displayName) {
  51. UI.inputDisplayNameHandler(displayName);
  52. return true;
  53. }
  54. }
  55. e.preventDefault();
  56. },
  57. function () {
  58. let form = $.prompt.getPrompt();
  59. let input = form.find("input[name='displayName']");
  60. input.focus();
  61. let button = form.find("button");
  62. button.attr("disabled", "disabled");
  63. input.keyup(function () {
  64. if (input.val()) {
  65. button.removeAttr("disabled");
  66. } else {
  67. button.attr("disabled", "disabled");
  68. }
  69. });
  70. }
  71. );
  72. }
  73. /**
  74. * Initialize chat.
  75. */
  76. function setupChat() {
  77. Chat.init(eventEmitter);
  78. $("#toggle_smileys").click(function() {
  79. Chat.toggleSmileys();
  80. });
  81. }
  82. /**
  83. * Initialize toolbars.
  84. */
  85. function setupToolbars() {
  86. Toolbar.init(eventEmitter);
  87. Toolbar.setupButtonsFromConfig();
  88. BottomToolbar.setupListeners(eventEmitter);
  89. }
  90. /**
  91. * Toggles the application in and out of full screen mode
  92. * (a.k.a. presentation mode in Chrome).
  93. */
  94. function toggleFullScreen () {
  95. let fsElement = document.documentElement;
  96. if (!document.mozFullScreen && !document.webkitIsFullScreen) {
  97. //Enter Full Screen
  98. if (fsElement.mozRequestFullScreen) {
  99. fsElement.mozRequestFullScreen();
  100. } else {
  101. fsElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
  102. }
  103. } else {
  104. //Exit Full Screen
  105. if (document.mozCancelFullScreen) {
  106. document.mozCancelFullScreen();
  107. } else {
  108. document.webkitCancelFullScreen();
  109. }
  110. }
  111. }
  112. /**
  113. * Notify user that server has shut down.
  114. */
  115. UI.notifyGracefulShudown = function () {
  116. messageHandler.openMessageDialog(
  117. 'dialog.serviceUnavailable',
  118. 'dialog.gracefulShutdown'
  119. );
  120. };
  121. /**
  122. * Notify user that reservation error happened.
  123. */
  124. UI.notifyReservationError = function (code, msg) {
  125. var title = APP.translation.generateTranslationHTML(
  126. "dialog.reservationError");
  127. var message = APP.translation.generateTranslationHTML(
  128. "dialog.reservationErrorMsg", {code: code, msg: msg});
  129. messageHandler.openDialog(
  130. title,
  131. message,
  132. true, {},
  133. function (event, value, message, formVals) {
  134. return false;
  135. }
  136. );
  137. };
  138. /**
  139. * Notify user that he has been kicked from the server.
  140. */
  141. UI.notifyKicked = function () {
  142. messageHandler.openMessageDialog("dialog.sessTerminated", "dialog.kickMessage");
  143. };
  144. /**
  145. * Notify user that Jitsi Videobridge is not accessible.
  146. */
  147. UI.notifyBridgeDown = function () {
  148. messageHandler.showError("dialog.error", "dialog.bridgeUnavailable");
  149. };
  150. /**
  151. * Change nickname for the user.
  152. * @param {string} id user id
  153. * @param {string} displayName new nickname
  154. */
  155. UI.changeDisplayName = function (id, displayName) {
  156. ContactList.onDisplayNameChange(id, displayName);
  157. SettingsMenu.onDisplayNameChange(id, displayName);
  158. VideoLayout.onDisplayNameChanged(id, displayName);
  159. if (APP.conference.isLocalId(id)) {
  160. Chat.setChatConversationMode(!!displayName);
  161. }
  162. };
  163. /**
  164. * Intitialize conference UI.
  165. */
  166. UI.initConference = function () {
  167. var id = APP.conference.localId;
  168. Toolbar.updateRoomUrl(window.location.href);
  169. var meHTML = APP.translation.generateTranslationHTML("me");
  170. var settings = Settings.getSettings();
  171. $("#localNick").html(settings.email || settings.uid + " (" + meHTML + ")");
  172. // Add myself to the contact list.
  173. ContactList.addContact(id);
  174. // Once we've joined the muc show the toolbar
  175. ToolbarToggler.showToolbar();
  176. var displayName = config.displayJids ? id : settings.displayName;
  177. if (displayName) {
  178. UI.changeDisplayName('localVideoContainer', displayName);
  179. }
  180. // Make sure we configure our avatar id, before creating avatar for us
  181. UI.setUserAvatar(id, settings.email);
  182. Toolbar.checkAutoEnableDesktopSharing();
  183. if(!interfaceConfig.filmStripOnly) {
  184. Feedback.init();
  185. }
  186. };
  187. UI.mucJoined = function () {
  188. VideoLayout.mucJoined();
  189. };
  190. /**
  191. * Setup some UI event listeners.
  192. */
  193. function registerListeners() {
  194. UI.addListener(UIEvents.EMAIL_CHANGED, function (email) {
  195. UI.setUserAvatar(APP.conference.localId, email);
  196. });
  197. UI.addListener(UIEvents.PREZI_CLICKED, function () {
  198. preziManager.handlePreziButtonClicked();
  199. });
  200. UI.addListener(UIEvents.ETHERPAD_CLICKED, function () {
  201. if (etherpadManager) {
  202. etherpadManager.toggleEtherpad();
  203. }
  204. });
  205. UI.addListener(UIEvents.FULLSCREEN_TOGGLE, toggleFullScreen);
  206. UI.addListener(UIEvents.TOGGLE_CHAT, UI.toggleChat);
  207. UI.addListener(UIEvents.TOGGLE_SETTINGS, function () {
  208. PanelToggler.toggleSettingsMenu();
  209. });
  210. UI.addListener(UIEvents.TOGGLE_CONTACT_LIST, UI.toggleContactList);
  211. UI.addListener(UIEvents.TOGGLE_FILM_STRIP, UI.toggleFilmStrip);
  212. }
  213. /**
  214. * Setup some DOM event listeners.
  215. */
  216. function bindEvents() {
  217. function onResize() {
  218. PanelToggler.resizeChat();
  219. VideoLayout.resizeLargeVideoContainer(PanelToggler.isVisible());
  220. }
  221. // Resize and reposition videos in full screen mode.
  222. $(document).on(
  223. 'webkitfullscreenchange mozfullscreenchange fullscreenchange',
  224. onResize
  225. );
  226. $(window).resize(onResize);
  227. }
  228. /**
  229. * Starts the UI module and initializes all related components.
  230. *
  231. * @returns {boolean} true if the UI is ready and the conference should be
  232. * esablished, false - otherwise (for example in the case of welcome page)
  233. */
  234. UI.start = function () {
  235. document.title = interfaceConfig.APP_NAME;
  236. var setupWelcomePage = null;
  237. if(config.enableWelcomePage && window.location.pathname == "/" &&
  238. (!window.localStorage.welcomePageDisabled ||
  239. window.localStorage.welcomePageDisabled == "false")) {
  240. $("#videoconference_page").hide();
  241. if (!setupWelcomePage)
  242. setupWelcomePage = require("./welcome_page/WelcomePage");
  243. setupWelcomePage();
  244. // Return false to indicate that the UI hasn't been fully started and
  245. // conference ready. We're still waiting for input from the user.
  246. return false;
  247. }
  248. $("#welcome_page").hide();
  249. // Set the defaults for prompt dialogs.
  250. $.prompt.setDefaults({persistent: false});
  251. registerListeners();
  252. BottomToolbar.init();
  253. VideoLayout.init(eventEmitter);
  254. if (!interfaceConfig.filmStripOnly) {
  255. VideoLayout.initLargeVideo(PanelToggler.isVisible());
  256. }
  257. VideoLayout.resizeLargeVideoContainer(PanelToggler.isVisible());
  258. ContactList.init(eventEmitter);
  259. bindEvents();
  260. preziManager = new PreziManager(eventEmitter);
  261. if (!interfaceConfig.filmStripOnly) {
  262. $("#videospace").mousemove(function () {
  263. return ToolbarToggler.showToolbar();
  264. });
  265. setupToolbars();
  266. setupChat();
  267. // Display notice message at the top of the toolbar
  268. if (config.noticeMessage) {
  269. $('#noticeText').text(config.noticeMessage);
  270. $('#notice').css({display: 'block'});
  271. }
  272. $("#downloadlog").click(function (event) {
  273. let logs = APP.conference.getLogs();
  274. let data = encodeURIComponent(JSON.stringify(logs, null, ' '));
  275. let elem = event.target.parentNode;
  276. elem.download = 'meetlog.json';
  277. elem.href = 'data:application/json;charset=utf-8,\n' + data;
  278. });
  279. } else {
  280. $("#header").css("display", "none");
  281. $("#bottomToolbar").css("display", "none");
  282. $("#downloadlog").css("display", "none");
  283. BottomToolbar.setupFilmStripOnly();
  284. messageHandler.disableNotifications();
  285. $('body').popover("disable");
  286. JitsiPopover.enabled = false;
  287. }
  288. document.title = interfaceConfig.APP_NAME;
  289. if(config.requireDisplayName) {
  290. if (!APP.settings.getDisplayName()) {
  291. promptDisplayName();
  292. }
  293. }
  294. if (!interfaceConfig.filmStripOnly) {
  295. toastr.options = {
  296. "closeButton": true,
  297. "debug": false,
  298. "positionClass": "notification-bottom-right",
  299. "onclick": null,
  300. "showDuration": "300",
  301. "hideDuration": "1000",
  302. "timeOut": "2000",
  303. "extendedTimeOut": "1000",
  304. "showEasing": "swing",
  305. "hideEasing": "linear",
  306. "showMethod": "fadeIn",
  307. "hideMethod": "fadeOut",
  308. "reposition": function () {
  309. if (PanelToggler.isVisible()) {
  310. $("#toast-container").addClass("notification-bottom-right-center");
  311. } else {
  312. $("#toast-container").removeClass("notification-bottom-right-center");
  313. }
  314. },
  315. "newestOnTop": false
  316. };
  317. SettingsMenu.init(eventEmitter);
  318. }
  319. // Return true to indicate that the UI has been fully started and
  320. // conference ready.
  321. return true;
  322. };
  323. /**
  324. * Show local stream on UI.
  325. * @param {JitsiTrack} track stream to show
  326. */
  327. UI.addLocalStream = function (track) {
  328. switch (track.getType()) {
  329. case 'audio':
  330. VideoLayout.changeLocalAudio(track);
  331. break;
  332. case 'video':
  333. VideoLayout.changeLocalVideo(track);
  334. break;
  335. default:
  336. console.error("Unknown stream type: " + track.getType());
  337. break;
  338. }
  339. };
  340. /**
  341. * Show remote stream on UI.
  342. * @param {JitsiTrack} track stream to show
  343. */
  344. UI.addRemoteStream = function (track) {
  345. VideoLayout.onRemoteStreamAdded(track);
  346. };
  347. function chatAddError(errorMessage, originalText) {
  348. return Chat.chatAddError(errorMessage, originalText);
  349. }
  350. /**
  351. * Update chat subject.
  352. * @param {string} subject new chat subject
  353. */
  354. UI.setSubject = function (subject) {
  355. Chat.setSubject(subject);
  356. };
  357. /**
  358. * Setup and show Etherpad.
  359. * @param {string} name etherpad id
  360. */
  361. UI.initEtherpad = function (name) {
  362. if (etherpadManager || !config.etherpad_base || !name) {
  363. return;
  364. }
  365. console.log('Etherpad is enabled');
  366. etherpadManager = new EtherpadManager(config.etherpad_base, name);
  367. Toolbar.showEtherpadButton();
  368. };
  369. /**
  370. * Show user on UI.
  371. * @param {string} id user id
  372. * @param {string} displayName user nickname
  373. */
  374. UI.addUser = function (id, displayName) {
  375. ContactList.addContact(id);
  376. messageHandler.notify(
  377. displayName,'notify.somebody', 'connected', 'notify.connected'
  378. );
  379. if (!config.startAudioMuted ||
  380. config.startAudioMuted > APP.conference.membersCount)
  381. UIUtil.playSoundNotification('userJoined');
  382. // Configure avatar
  383. UI.setUserAvatar(id);
  384. // Add Peer's container
  385. VideoLayout.addParticipantContainer(id);
  386. };
  387. /**
  388. * Remove user from UI.
  389. * @param {string} id user id
  390. * @param {string} displayName user nickname
  391. */
  392. UI.removeUser = function (id, displayName) {
  393. ContactList.removeContact(id);
  394. messageHandler.notify(
  395. displayName,'notify.somebody', 'disconnected', 'notify.disconnected'
  396. );
  397. if (!config.startAudioMuted
  398. || config.startAudioMuted > APP.conference.membersCount) {
  399. UIUtil.playSoundNotification('userLeft');
  400. }
  401. VideoLayout.removeParticipantContainer(id);
  402. };
  403. //FIXME: NOT USED. Should start using the lib
  404. // function onMucPresenceStatus(jid, info) {
  405. // VideoLayout.setPresenceStatus(Strophe.getResourceFromJid(jid), info.status);
  406. // }
  407. /**
  408. * Update videotype for specified user.
  409. * @param {string} id user id
  410. * @param {string} newVideoType new videotype
  411. */
  412. UI.onPeerVideoTypeChanged = (id, newVideoType) => {
  413. VideoLayout.onVideoTypeChanged(id, newVideoType);
  414. };
  415. /**
  416. * Update local user role and show notification if user is moderator.
  417. * @param {boolean} isModerator if local user is moderator or not
  418. */
  419. UI.updateLocalRole = function (isModerator) {
  420. VideoLayout.showModeratorIndicator();
  421. Toolbar.showSipCallButton(isModerator);
  422. Toolbar.showRecordingButton(isModerator);
  423. SettingsMenu.onRoleChanged();
  424. if (isModerator) {
  425. messageHandler.notify(null, "notify.me", 'connected', "notify.moderator");
  426. Toolbar.checkAutoRecord();
  427. }
  428. };
  429. /**
  430. * Check the role for the user and reflect it in the UI, moderator ui indication
  431. * and notifies user who is the moderator
  432. * @param user to check for moderator
  433. */
  434. UI.updateUserRole = function (user) {
  435. VideoLayout.showModeratorIndicator();
  436. if (!user.isModerator()) {
  437. return;
  438. }
  439. var displayName = user.getDisplayName();
  440. if (displayName) {
  441. messageHandler.notify(
  442. displayName, 'notify.somebody',
  443. 'connected', 'notify.grantedTo', {
  444. to: displayName
  445. }
  446. );
  447. } else {
  448. messageHandler.notify(
  449. '', 'notify.somebody',
  450. 'connected', 'notify.grantedToUnknown', {}
  451. );
  452. }
  453. };
  454. /**
  455. * Toggles smileys in the chat.
  456. */
  457. UI.toggleSmileys = function () {
  458. Chat.toggleSmileys();
  459. };
  460. /**
  461. * Get current settings.
  462. * @returns {object} settings
  463. */
  464. UI.getSettings = function () {
  465. return Settings.getSettings();
  466. };
  467. /**
  468. * Toggles film strip.
  469. */
  470. UI.toggleFilmStrip = function () {
  471. BottomToolbar.toggleFilmStrip();
  472. };
  473. /**
  474. * Toggles chat panel.
  475. */
  476. UI.toggleChat = function () {
  477. PanelToggler.toggleChat();
  478. };
  479. /**
  480. * Toggles contact list panel.
  481. */
  482. UI.toggleContactList = function () {
  483. PanelToggler.toggleContactList();
  484. };
  485. UI.inputDisplayNameHandler = function (value) {
  486. VideoLayout.inputDisplayNameHandler(value);
  487. };
  488. /**
  489. * Return the type of the remote video.
  490. * @param jid the jid for the remote video
  491. * @returns the video type video or screen.
  492. */
  493. UI.getRemoteVideoType = function (jid) {
  494. return VideoLayout.getRemoteVideoType(jid);
  495. };
  496. UI.connectionIndicatorShowMore = function(jid) {
  497. return VideoLayout.showMore(jid);
  498. };
  499. // FIXME check if someone user this
  500. UI.showLoginPopup = function(callback) {
  501. console.log('password is required');
  502. var message = '<h2 data-i18n="dialog.passwordRequired">';
  503. message += APP.translation.translateString(
  504. "dialog.passwordRequired");
  505. message += '</h2>' +
  506. '<input name="username" type="text" ' +
  507. 'placeholder="user@domain.net" autofocus>' +
  508. '<input name="password" ' +
  509. 'type="password" data-i18n="[placeholder]dialog.userPassword"' +
  510. ' placeholder="user password">';
  511. UI.messageHandler.openTwoButtonDialog(null, null, null, message,
  512. true,
  513. "dialog.Ok",
  514. function (e, v, m, f) {
  515. if (v) {
  516. if (f.username && f.password) {
  517. callback(f.username, f.password);
  518. }
  519. }
  520. },
  521. null, null, ':input:first'
  522. );
  523. };
  524. UI.askForNickname = function () {
  525. return window.prompt('Your nickname (optional)');
  526. };
  527. /**
  528. * Sets muted audio state for participant
  529. */
  530. UI.setAudioMuted = function (id, muted) {
  531. VideoLayout.onAudioMute(id, muted);
  532. if(APP.conference.isLocalId(id))
  533. UIUtil.buttonClick("#toolbar_button_mute",
  534. "icon-microphone icon-mic-disabled");
  535. };
  536. /**
  537. * Sets muted video state for participant
  538. */
  539. UI.setVideoMuted = function (id, muted) {
  540. VideoLayout.onVideoMute(id, muted);
  541. if(APP.conference.isLocalId(id))
  542. $('#toolbar_button_camera').toggleClass("icon-camera-disabled", muted);
  543. };
  544. UI.addListener = function (type, listener) {
  545. eventEmitter.on(type, listener);
  546. };
  547. UI.clickOnVideo = function (videoNumber) {
  548. var remoteVideos = $(".videocontainer:not(#mixedstream)");
  549. if (remoteVideos.length > videoNumber) {
  550. remoteVideos[videoNumber].click();
  551. }
  552. };
  553. //Used by torture
  554. UI.showToolbar = function () {
  555. return ToolbarToggler.showToolbar();
  556. };
  557. //Used by torture
  558. UI.dockToolbar = function (isDock) {
  559. ToolbarToggler.dockToolbar(isDock);
  560. };
  561. /**
  562. * Update user avatar.
  563. * @param {string} id user id
  564. * @param {stirng} email user email
  565. */
  566. UI.setUserAvatar = function (id, email) {
  567. // update avatar
  568. Avatar.setUserAvatar(id, email);
  569. var avatarUrl = Avatar.getAvatarUrl(id);
  570. VideoLayout.changeUserAvatar(id, avatarUrl);
  571. ContactList.changeUserAvatar(id, avatarUrl);
  572. if (APP.conference.isLocalId(id)) {
  573. SettingsMenu.changeAvatar(avatarUrl);
  574. }
  575. };
  576. /**
  577. * Notify user that connection failed.
  578. * @param {string} stropheErrorMsg raw Strophe error message
  579. */
  580. UI.notifyConnectionFailed = function (stropheErrorMsg) {
  581. var title = APP.translation.generateTranslationHTML(
  582. "dialog.error");
  583. var message;
  584. if (stropheErrorMsg) {
  585. message = APP.translation.generateTranslationHTML(
  586. "dialog.connectErrorWithMsg", {msg: stropheErrorMsg});
  587. } else {
  588. message = APP.translation.generateTranslationHTML(
  589. "dialog.connectError");
  590. }
  591. messageHandler.openDialog(
  592. title, message, true, {}, function (e, v, m, f) { return false; }
  593. );
  594. };
  595. /**
  596. * Notify user that he need to install Firefox extension to share screen.
  597. * @param {stirng} url extension url
  598. */
  599. UI.notifyFirefoxExtensionRequired = function (url) {
  600. messageHandler.openMessageDialog(
  601. "dialog.extensionRequired",
  602. null,
  603. null,
  604. APP.translation.generateTranslationHTML(
  605. "dialog.firefoxExtensionPrompt", {url: url}
  606. )
  607. );
  608. };
  609. /**
  610. * Notify user that he was automatically muted when joned the conference.
  611. */
  612. UI.notifyInitiallyMuted = function () {
  613. messageHandler.notify(
  614. null, "notify.mutedTitle", "connected", "notify.muted", null, {timeOut: 120000}
  615. );
  616. };
  617. /**
  618. * Mark user as dominant speaker.
  619. * @param {string} id user id
  620. */
  621. UI.markDominantSpeaker = function (id) {
  622. VideoLayout.onDominantSpeakerChanged(id);
  623. };
  624. UI.handleLastNEndpoints = function (ids) {
  625. VideoLayout.onLastNEndpointsChanged(ids, []);
  626. };
  627. /**
  628. * Update audio level visualization for specified user.
  629. * @param {string} id user id
  630. * @param {number} lvl audio level
  631. */
  632. UI.setAudioLevel = function (id, lvl) {
  633. VideoLayout.setAudioLevel(id, lvl);
  634. };
  635. /**
  636. * Update state of desktop sharing buttons.
  637. * @param {boolean} isSharingScreen if user is currently sharing his screen
  638. */
  639. UI.updateDesktopSharingButtons = function (isSharingScreen) {
  640. Toolbar.changeDesktopSharingButtonState(isSharingScreen);
  641. };
  642. /**
  643. * Hide connection quality statistics from UI.
  644. */
  645. UI.hideStats = function () {
  646. VideoLayout.hideStats();
  647. };
  648. /**
  649. * Update local connection quality statistics.
  650. * @param {number} percent
  651. * @param {object} stats
  652. */
  653. UI.updateLocalStats = function (percent, stats) {
  654. VideoLayout.updateLocalConnectionStats(percent, stats);
  655. };
  656. /**
  657. * Update connection quality statistics for remote user.
  658. * @param {string} id user id
  659. * @param {number} percent
  660. * @param {object} stats
  661. */
  662. UI.updateRemoteStats = function (id, percent, stats) {
  663. VideoLayout.updateConnectionStats(id, percent, stats);
  664. };
  665. /**
  666. * Mark video as interrupted or not.
  667. * @param {boolean} interrupted if video is interrupted
  668. */
  669. UI.markVideoInterrupted = function (interrupted) {
  670. if (interrupted) {
  671. VideoLayout.onVideoInterrupted();
  672. } else {
  673. VideoLayout.onVideoRestored();
  674. }
  675. };
  676. /**
  677. * Mark room as locked or not.
  678. * @param {boolean} locked if room is locked.
  679. */
  680. UI.markRoomLocked = function (locked) {
  681. if (locked) {
  682. Toolbar.lockLockButton();
  683. } else {
  684. Toolbar.unlockLockButton();
  685. }
  686. };
  687. /**
  688. * Add chat message.
  689. * @param {string} from user id
  690. * @param {string} displayName user nickname
  691. * @param {string} message message text
  692. * @param {number} stamp timestamp when message was created
  693. */
  694. UI.addMessage = function (from, displayName, message, stamp) {
  695. Chat.updateChatConversation(from, displayName, message, stamp);
  696. };
  697. UI.updateDTMFSupport = function (isDTMFSupported) {
  698. //TODO: enable when the UI is ready
  699. //Toolbar.showDialPadButton(dtmfSupport);
  700. };
  701. /**
  702. * Invite participants to conference.
  703. * @param {string} roomUrl
  704. * @param {string} conferenceName
  705. * @param {string} key
  706. * @param {string} nick
  707. */
  708. UI.inviteParticipants = function (roomUrl, conferenceName, key, nick) {
  709. let keyText = "";
  710. if (key) {
  711. keyText = APP.translation.translateString(
  712. "email.sharedKey", {sharedKey: key}
  713. );
  714. }
  715. let and = APP.translation.translateString("email.and");
  716. let supportedBrowsers = `Chromium, Google Chrome ${and} Opera`;
  717. let subject = APP.translation.translateString(
  718. "email.subject", {appName:interfaceConfig.APP_NAME, conferenceName}
  719. );
  720. let body = APP.translation.translateString(
  721. "email.body", {
  722. appName:interfaceConfig.APP_NAME,
  723. sharedKeyText: keyText,
  724. roomUrl,
  725. supportedBrowsers
  726. }
  727. );
  728. body = body.replace(/\n/g, "%0D%0A");
  729. if (nick) {
  730. body += "%0D%0A%0D%0A" + nick;
  731. }
  732. if (interfaceConfig.INVITATION_POWERED_BY) {
  733. body += "%0D%0A%0D%0A--%0D%0Apowered by jitsi.org";
  734. }
  735. window.open(`mailto:?subject=${subject}&body=${body}`, '_blank');
  736. };
  737. /**
  738. * Show user feedback dialog if its required or just show "thank you" dialog.
  739. * @returns {Promise} when dialog is closed.
  740. */
  741. UI.requestFeedback = function () {
  742. return new Promise(function (resolve, reject) {
  743. if (Feedback.isEnabled()) {
  744. // If the user has already entered feedback, we'll show the window and
  745. // immidiately start the conference dispose timeout.
  746. if (Feedback.feedbackScore > 0) {
  747. Feedback.openFeedbackWindow();
  748. resolve();
  749. } else { // Otherwise we'll wait for user's feedback.
  750. Feedback.openFeedbackWindow(resolve);
  751. }
  752. } else {
  753. // If the feedback functionality isn't enabled we show a thank you
  754. // dialog.
  755. messageHandler.openMessageDialog(
  756. null, null, null,
  757. APP.translation.translateString(
  758. "dialog.thankYou", {appName:interfaceConfig.APP_NAME}
  759. )
  760. );
  761. resolve();
  762. }
  763. });
  764. };
  765. /**
  766. * Request recording token from the user.
  767. * @returns {Promise}
  768. */
  769. UI.requestRecordingToken = function () {
  770. let msg = APP.translation.generateTranslationHTML("dialog.recordingToken");
  771. let token = APP.translation.translateString("dialog.token");
  772. return new Promise(function (resolve, reject) {
  773. messageHandler.openTwoButtonDialog(
  774. null, null, null,
  775. `<h2>${msg}</h2>
  776. <input name="recordingToken" type="text"
  777. data-i18n="[placeholder]dialog.token"
  778. placeholder="${token}" autofocus>`,
  779. false, "dialog.Save",
  780. function (e, v, m, f) {
  781. if (v && f.recordingToken) {
  782. resolve(UIUtil.escapeHtml(f.recordingToken));
  783. } else {
  784. reject();
  785. }
  786. },
  787. null,
  788. function () { },
  789. ':input:first'
  790. );
  791. });
  792. };
  793. UI.updateRecordingState = function (state) {
  794. Toolbar.updateRecordingState(state);
  795. };
  796. UI.notifyTokenAuthFailed = function () {
  797. messageHandler.showError("dialog.error", "dialog.tokenAuthFailed");
  798. };
  799. /**
  800. * Updates auth info on the UI.
  801. * @param {boolean} isAuthEnabled if authentication is enabled
  802. * @param {string} [login] current login
  803. */
  804. UI.updateAuthInfo = function (isAuthEnabled, login) {
  805. let loggedIn = !!login;
  806. Toolbar.showAuthenticateButton(isAuthEnabled);
  807. if (isAuthEnabled) {
  808. Toolbar.setAuthenticatedIdentity(login);
  809. Toolbar.showLoginButton(!loggedIn);
  810. Toolbar.showLogoutButton(loggedIn);
  811. }
  812. };
  813. /**
  814. * Show Prezi from the user.
  815. * @param {string} userId user id
  816. * @param {string} url Prezi url
  817. * @param {number} slide slide to show
  818. */
  819. UI.showPrezi = function (userId, url, slide) {
  820. preziManager.showPrezi(userId, url, slide);
  821. };
  822. /**
  823. * Stop showing Prezi from the user.
  824. * @param {string} userId user id
  825. */
  826. UI.stopPrezi = function (userId) {
  827. if (preziManager.isSharing(userId)) {
  828. preziManager.removePrezi(userId);
  829. }
  830. };
  831. UI.onStartMutedChanged = function () {
  832. SettingsMenu.onStartMutedChanged();
  833. };
  834. /**
  835. * Returns the id of the current video shown on large.
  836. * Currently used by tests (torture).
  837. */
  838. UI.getLargeVideoID = function () {
  839. return VideoLayout.getLargeVideoID();
  840. };
  841. /**
  842. * Shows dialog with a link to FF extension.
  843. */
  844. UI.showExtensionRequiredDialog = function (url) {
  845. APP.UI.messageHandler.openMessageDialog(
  846. "dialog.extensionRequired",
  847. null,
  848. null,
  849. APP.translation.generateTranslationHTML(
  850. "dialog.firefoxExtensionPrompt", {url: url}));
  851. };
  852. module.exports = UI;