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 24KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801
  1. /* global Strophe, APP, $, config, interfaceConfig, toastr */
  2. /* jshint -W101 */
  3. var UI = {};
  4. var VideoLayout = require("./videolayout/VideoLayout.js");
  5. var AudioLevels = require("./audio_levels/AudioLevels.js");
  6. var Prezi = require("./prezi/Prezi.js");
  7. var Etherpad = require("./etherpad/Etherpad.js");
  8. var Chat = require("./side_pannels/chat/Chat.js");
  9. var Toolbar = require("./toolbars/Toolbar");
  10. var ToolbarToggler = require("./toolbars/ToolbarToggler");
  11. var BottomToolbar = require("./toolbars/BottomToolbar");
  12. var ContactList = require("./side_pannels/contactlist/ContactList");
  13. var Avatar = require("./avatar/Avatar");
  14. var EventEmitter = require("events");
  15. var SettingsMenu = require("./side_pannels/settings/SettingsMenu");
  16. var Settings = require("./../settings/Settings");
  17. var PanelToggler = require("./side_pannels/SidePanelToggler");
  18. var RoomnameGenerator = require("../util/RoomnameGenerator");
  19. UI.messageHandler = require("./util/MessageHandler");
  20. var messageHandler = UI.messageHandler;
  21. var Authentication = require("./authentication/Authentication");
  22. var UIUtil = require("./util/UIUtil");
  23. var NicknameHandler = require("./util/NicknameHandler");
  24. var JitsiPopover = require("./util/JitsiPopover");
  25. var CQEvents = require("../../service/connectionquality/CQEvents");
  26. var DesktopSharingEventTypes
  27. = require("../../service/desktopsharing/DesktopSharingEventTypes");
  28. var XMPPEvents = require("../../service/xmpp/XMPPEvents");
  29. var StatisticsEvents = require("../../service/statistics/Events");
  30. var UIEvents = require("../../service/UI/UIEvents");
  31. var MemberEvents = require("../../service/members/Events");
  32. var Feedback = require("./Feedback");
  33. var eventEmitter = new EventEmitter();
  34. var roomNode = null;
  35. var roomName = null;
  36. function promptDisplayName() {
  37. var message = '<h2 data-i18n="dialog.displayNameRequired">';
  38. message += APP.translation.translateString(
  39. "dialog.displayNameRequired");
  40. message += '</h2>' +
  41. '<input name="displayName" type="text" data-i18n=' +
  42. '"[placeholder]defaultNickname" placeholder="' +
  43. APP.translation.translateString(
  44. "defaultNickname", {name: "Jane Pink"}) +
  45. '" autofocus>';
  46. var buttonTxt
  47. = APP.translation.generateTranslationHTML("dialog.Ok");
  48. var buttons = [];
  49. buttons.push({title: buttonTxt, value: "ok"});
  50. messageHandler.openDialog(null, message,
  51. true,
  52. buttons,
  53. function (e, v, m, f) {
  54. if (v == "ok") {
  55. var displayName = f.displayName;
  56. if (displayName) {
  57. VideoLayout.inputDisplayNameHandler(displayName);
  58. return true;
  59. }
  60. }
  61. e.preventDefault();
  62. },
  63. function () {
  64. var form = $.prompt.getPrompt();
  65. var input = form.find("input[name='displayName']");
  66. input.focus();
  67. var button = form.find("button");
  68. button.attr("disabled", "disabled");
  69. input.keyup(function () {
  70. if(!input.val())
  71. button.attr("disabled", "disabled");
  72. else
  73. button.removeAttr("disabled");
  74. });
  75. }
  76. );
  77. }
  78. function setupPrezi() {
  79. $("#reloadPresentationLink").click(function() {
  80. Prezi.reloadPresentation();
  81. });
  82. }
  83. function setupChat() {
  84. Chat.init();
  85. $("#toggle_smileys").click(function() {
  86. Chat.toggleSmileys();
  87. });
  88. }
  89. function setupToolbars() {
  90. Toolbar.init(UI);
  91. Toolbar.setupButtonsFromConfig();
  92. BottomToolbar.init(eventEmitter);
  93. }
  94. function onDisposeConference(unload) {
  95. Toolbar.showAuthenticateButton(false);
  96. }
  97. function onDisplayNameChanged(jid, displayName) {
  98. ContactList.onDisplayNameChange(jid, displayName);
  99. SettingsMenu.onDisplayNameChange(jid, displayName);
  100. VideoLayout.onDisplayNameChanged(jid, displayName);
  101. }
  102. function registerListeners() {
  103. APP.xmpp.addListener(XMPPEvents.DISPOSE_CONFERENCE, onDisposeConference);
  104. APP.xmpp.addListener(XMPPEvents.GRACEFUL_SHUTDOWN, function () {
  105. messageHandler.openMessageDialog(
  106. 'dialog.serviceUnavailable',
  107. 'dialog.gracefulShutdown'
  108. );
  109. });
  110. APP.xmpp.addListener(XMPPEvents.RESERVATION_ERROR, function (code, msg) {
  111. var title = APP.translation.generateTranslationHTML(
  112. "dialog.reservationError");
  113. var message = APP.translation.generateTranslationHTML(
  114. "dialog.reservationErrorMsg", {code: code, msg: msg});
  115. messageHandler.openDialog(
  116. title,
  117. message,
  118. true, {},
  119. function (event, value, message, formVals) {
  120. return false;
  121. }
  122. );
  123. });
  124. APP.xmpp.addListener(XMPPEvents.KICKED, function () {
  125. messageHandler.openMessageDialog("dialog.sessTerminated",
  126. "dialog.kickMessage");
  127. });
  128. APP.xmpp.addListener(XMPPEvents.MUC_DESTROYED, function (reason) {
  129. //FIXME: use Session Terminated from translation, but
  130. // 'reason' text comes from XMPP packet and is not translated
  131. var title = APP.translation.generateTranslationHTML("dialog.sessTerminated");
  132. messageHandler.openDialog(
  133. title, reason, true, {},
  134. function (event, value, message, formVals) {
  135. return false;
  136. }
  137. );
  138. });
  139. APP.xmpp.addListener(XMPPEvents.BRIDGE_DOWN, function () {
  140. messageHandler.showError("dialog.error",
  141. "dialog.bridgeUnavailable");
  142. });
  143. APP.xmpp.addListener(XMPPEvents.USER_ID_CHANGED, function (from, id) {
  144. Avatar.setUserAvatar(from, id);
  145. });
  146. APP.xmpp.addListener(XMPPEvents.DISPLAY_NAME_CHANGED, onDisplayNameChanged);
  147. APP.xmpp.addListener(XMPPEvents.MUC_JOINED, onMucJoined);
  148. APP.xmpp.addListener(XMPPEvents.LOCAL_ROLE_CHANGED, onLocalRoleChanged);
  149. APP.xmpp.addListener(XMPPEvents.MUC_MEMBER_JOINED, onMucMemberJoined);
  150. APP.xmpp.addListener(XMPPEvents.MUC_ROLE_CHANGED, onMucRoleChanged);
  151. APP.xmpp.addListener(XMPPEvents.PRESENCE_STATUS, onMucPresenceStatus);
  152. APP.xmpp.addListener(XMPPEvents.SUBJECT_CHANGED, chatSetSubject);
  153. APP.xmpp.addListener(XMPPEvents.MUC_MEMBER_LEFT, onMucMemberLeft);
  154. APP.xmpp.addListener(XMPPEvents.PASSWORD_REQUIRED, onPasswordRequired);
  155. APP.xmpp.addListener(XMPPEvents.ETHERPAD, initEtherpad);
  156. APP.xmpp.addListener(XMPPEvents.AUTHENTICATION_REQUIRED,
  157. onAuthenticationRequired);
  158. APP.xmpp.addListener(XMPPEvents.PARTICIPANT_VIDEO_TYPE_CHANGED,
  159. onPeerVideoTypeChanged);
  160. APP.xmpp.addListener(XMPPEvents.DEVICE_AVAILABLE,
  161. function (resource, devices) {
  162. VideoLayout.setDeviceAvailabilityIcons(resource, devices);
  163. });
  164. APP.xmpp.addListener(XMPPEvents.PARTICIPANT_AUDIO_MUTED,
  165. VideoLayout.onAudioMute);
  166. APP.xmpp.addListener(XMPPEvents.PARTICIPANT_VIDEO_MUTED,
  167. VideoLayout.onVideoMute);
  168. APP.members.addListener(MemberEvents.DTMF_SUPPORT_CHANGED,
  169. onDtmfSupportChanged);
  170. APP.xmpp.addListener(XMPPEvents.START_MUTED_SETTING_CHANGED, function (audio, video) {
  171. SettingsMenu.setStartMuted(audio, video);
  172. });
  173. APP.xmpp.addListener(XMPPEvents.JINGLE_FATAL_ERROR, function (session, error) {
  174. UI.messageHandler.showError("dialog.sorry",
  175. "dialog.internalError");
  176. });
  177. APP.xmpp.addListener(XMPPEvents.PROMPT_FOR_LOGIN, function (callback) {
  178. // FIXME: re-use LoginDialog which supports retries
  179. if (config.token) {
  180. messageHandler.showError("dialog.error", "dialog.tokenAuthFailed");
  181. } else {
  182. UI.showLoginPopup(callback);
  183. }
  184. });
  185. APP.xmpp.addListener(XMPPEvents.FOCUS_DISCONNECTED, function (focusComponent, retrySec) {
  186. UI.messageHandler.notify(
  187. null, "notify.focus",
  188. 'disconnected', "notify.focusFail",
  189. {component: focusComponent, ms: retrySec});
  190. });
  191. APP.xmpp.addListener(XMPPEvents.ROOM_JOIN_ERROR, function (pres) {
  192. UI.messageHandler.openReportDialog(null,
  193. "dialog.connectError", pres);
  194. });
  195. APP.xmpp.addListener(XMPPEvents.ROOM_CONNECT_ERROR, function (pres) {
  196. UI.messageHandler.openReportDialog(null,
  197. "dialog.connectError", pres);
  198. });
  199. APP.xmpp.addListener(XMPPEvents.READY_TO_JOIN, function () {
  200. var roomName = UI.generateRoomName();
  201. APP.xmpp.allocateConferenceFocus(roomName, UI.checkForNicknameAndJoin);
  202. });
  203. //NicknameHandler emits this event
  204. UI.addListener(UIEvents.NICKNAME_CHANGED, function (nickname) {
  205. APP.xmpp.addToPresence("displayName", nickname);
  206. });
  207. UI.addListener(UIEvents.LARGEVIDEO_INIT, function () {
  208. AudioLevels.init();
  209. });
  210. UI.addListener(UIEvents.FILM_STRIP_TOGGLED, function (isToggled) {
  211. VideoLayout.onFilmStripToggled(isToggled);
  212. });
  213. if (!interfaceConfig.filmStripOnly) {
  214. APP.xmpp.addListener(XMPPEvents.MESSAGE_RECEIVED, updateChatConversation);
  215. APP.xmpp.addListener(XMPPEvents.CHAT_ERROR_RECEIVED, chatAddError);
  216. // Listens for video interruption events.
  217. APP.xmpp.addListener(XMPPEvents.CONNECTION_INTERRUPTED, VideoLayout.onVideoInterrupted);
  218. // Listens for video restores events.
  219. APP.xmpp.addListener(XMPPEvents.CONNECTION_RESTORED, VideoLayout.onVideoRestored);
  220. }
  221. }
  222. function onResize() {
  223. Chat.resizeChat();
  224. VideoLayout.resizeLargeVideoContainer();
  225. }
  226. function bindEvents() {
  227. /**
  228. * Resizes and repositions videos in full screen mode.
  229. */
  230. $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange',
  231. onResize);
  232. $(window).resize(onResize);
  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;
  245. }
  246. $("#welcome_page").hide();
  247. // Set the defaults for prompt dialogs.
  248. $.prompt.setDefaults({persistent: false});
  249. registerListeners();
  250. VideoLayout.init(eventEmitter);
  251. NicknameHandler.init(eventEmitter);
  252. bindEvents();
  253. setupPrezi();
  254. if (!interfaceConfig.filmStripOnly) {
  255. $("#videospace").mousemove(function () {
  256. return ToolbarToggler.showToolbar();
  257. });
  258. setupToolbars();
  259. setupChat();
  260. // Display notice message at the top of the toolbar
  261. if (config.noticeMessage) {
  262. $('#noticeText').text(config.noticeMessage);
  263. $('#notice').css({display: 'block'});
  264. }
  265. $("#downloadlog").click(function (event) {
  266. dump(event.target);
  267. });
  268. Feedback.init();
  269. }
  270. else
  271. {
  272. $("#header").css("display", "none");
  273. $("#bottomToolbar").css("display", "none");
  274. $("#downloadlog").css("display", "none");
  275. $("#remoteVideos").css("padding", "0px 0px 18px 0px");
  276. $("#remoteVideos").css("right", "0px");
  277. messageHandler.disableNotifications();
  278. $('body').popover("disable");
  279. // $("[data-toggle=popover]").popover("disable");
  280. JitsiPopover.enabled = false;
  281. }
  282. document.title = interfaceConfig.APP_NAME;
  283. if(config.requireDisplayName) {
  284. var currentSettings = Settings.getSettings();
  285. if (!currentSettings.displayName) {
  286. promptDisplayName();
  287. }
  288. }
  289. if (!interfaceConfig.filmStripOnly) {
  290. toastr.options = {
  291. "closeButton": true,
  292. "debug": false,
  293. "positionClass": "notification-bottom-right",
  294. "onclick": null,
  295. "showDuration": "300",
  296. "hideDuration": "1000",
  297. "timeOut": "2000",
  298. "extendedTimeOut": "1000",
  299. "showEasing": "swing",
  300. "hideEasing": "linear",
  301. "showMethod": "fadeIn",
  302. "hideMethod": "fadeOut",
  303. "reposition": function () {
  304. if (PanelToggler.isVisible()) {
  305. $("#toast-container").addClass("notification-bottom-right-center");
  306. } else {
  307. $("#toast-container").removeClass("notification-bottom-right-center");
  308. }
  309. },
  310. "newestOnTop": false
  311. };
  312. SettingsMenu.init();
  313. }
  314. };
  315. UI.addLocalStream = function (stream, isMuted) {
  316. switch (stream.type) {
  317. case 'audio':
  318. VideoLayout.changeLocalAudio(stream, isMuted);
  319. break;
  320. case 'video':
  321. VideoLayout.changeLocalVideo(stream, isMuted);
  322. break;
  323. default:
  324. console.error("Unknown stream type: " + stream.type);
  325. break;
  326. }
  327. };
  328. UI.addRemoteStream = function (stream) {
  329. VideoLayout.onRemoteStreamAdded(stream);
  330. };
  331. function chatAddError(errorMessage, originalText) {
  332. return Chat.chatAddError(errorMessage, originalText);
  333. }
  334. function chatSetSubject(text) {
  335. return Chat.chatSetSubject(text);
  336. }
  337. function updateChatConversation(from, displayName, message, myjid, stamp) {
  338. return Chat.updateChatConversation(from, displayName, message, myjid, stamp);
  339. }
  340. function onMucJoined(jid, info) {
  341. Toolbar.updateRoomUrl(window.location.href);
  342. var meHTML = APP.translation.generateTranslationHTML("me");
  343. $("#localNick").html(Strophe.getResourceFromJid(jid) + " (" + meHTML + ")");
  344. var settings = Settings.getSettings();
  345. // Make sure we configure our avatar id, before creating avatar for us
  346. Avatar.setUserAvatar(jid, settings.email || settings.uid);
  347. // Add myself to the contact list.
  348. ContactList.addContact(jid);
  349. // Once we've joined the muc show the toolbar
  350. ToolbarToggler.showToolbar();
  351. var displayName =
  352. config.displayJids ? Strophe.getResourceFromJid(jid) : info.displayName;
  353. if (displayName)
  354. onDisplayNameChanged('localVideoContainer', displayName);
  355. VideoLayout.mucJoined();
  356. Toolbar.checkAutoEnableDesktopSharing();
  357. }
  358. function initEtherpad(name) {
  359. Etherpad.init(name);
  360. }
  361. function onMucMemberLeft(jid) {
  362. console.log('left.muc', jid);
  363. var displayName = $('#participant_' + Strophe.getResourceFromJid(jid) +
  364. '>.displayname').html();
  365. messageHandler.notify(displayName,'notify.somebody',
  366. 'disconnected',
  367. 'notify.disconnected');
  368. if (!config.startAudioMuted ||
  369. config.startAudioMuted > APP.members.size()) {
  370. UIUtil.playSoundNotification('userLeft');
  371. }
  372. ContactList.removeContact(jid);
  373. VideoLayout.participantLeft(jid);
  374. }
  375. function onLocalRoleChanged(jid, info, pres, isModerator) {
  376. console.info("My role changed, new role: " + info.role);
  377. onModeratorStatusChanged(isModerator);
  378. VideoLayout.showModeratorIndicator();
  379. SettingsMenu.onRoleChanged();
  380. if (isModerator) {
  381. Authentication.closeAuthenticationWindow();
  382. messageHandler.notify(null, "notify.me",
  383. 'connected', "notify.moderator");
  384. Toolbar.checkAutoRecord();
  385. }
  386. }
  387. function onModeratorStatusChanged(isModerator) {
  388. Toolbar.showSipCallButton(isModerator);
  389. Toolbar.showRecordingButton(
  390. isModerator); //&&
  391. // FIXME:
  392. // Recording visible if
  393. // there are at least 2(+ 1 focus) participants
  394. //Object.keys(connection.emuc.members).length >= 3);
  395. }
  396. function onPasswordRequired(callback) {
  397. // password is required
  398. Toolbar.lockLockButton();
  399. var message = '<h2 data-i18n="dialog.passwordRequired">';
  400. message += APP.translation.translateString(
  401. "dialog.passwordRequired");
  402. message += '</h2>' +
  403. '<input name="lockKey" type="text" data-i18n=' +
  404. '"[placeholder]dialog.password" placeholder="' +
  405. APP.translation.translateString("dialog.password") +
  406. '" autofocus>';
  407. messageHandler.openTwoButtonDialog(null, null, null, message,
  408. true,
  409. "dialog.Ok",
  410. function (e, v, m, f) {},
  411. null,
  412. function (e, v, m, f) {
  413. if (v) {
  414. var lockKey = f.lockKey;
  415. if (lockKey) {
  416. Toolbar.setSharedKey(lockKey);
  417. callback(lockKey);
  418. }
  419. }
  420. },
  421. ':input:first'
  422. );
  423. }
  424. /**
  425. * The dialpad button is shown iff there is at least one member that supports
  426. * DTMF (e.g. jigasi).
  427. */
  428. function onDtmfSupportChanged(dtmfSupport) {
  429. //TODO: enable when the UI is ready
  430. //Toolbar.showDialPadButton(dtmfSupport);
  431. }
  432. function onMucMemberJoined(jid, id, displayName) {
  433. messageHandler.notify(displayName,'notify.somebody',
  434. 'connected',
  435. 'notify.connected');
  436. if (!config.startAudioMuted ||
  437. config.startAudioMuted > APP.members.size())
  438. UIUtil.playSoundNotification('userJoined');
  439. // Configure avatar
  440. Avatar.setUserAvatar(jid, id);
  441. // Add Peer's container
  442. VideoLayout.ensurePeerContainerExists(jid);
  443. }
  444. function onMucPresenceStatus(jid, info) {
  445. VideoLayout.setPresenceStatus(Strophe.getResourceFromJid(jid), info.status);
  446. }
  447. function onPeerVideoTypeChanged(resourceJid, newVideoType) {
  448. VideoLayout.onVideoTypeChanged(resourceJid, newVideoType);
  449. }
  450. function onMucRoleChanged(role, displayName) {
  451. VideoLayout.showModeratorIndicator();
  452. if (role === 'moderator') {
  453. var messageKey, messageOptions = {};
  454. if (!displayName) {
  455. messageKey = "notify.grantedToUnknown";
  456. }
  457. else {
  458. messageKey = "notify.grantedTo";
  459. messageOptions = {to: displayName};
  460. }
  461. messageHandler.notify(
  462. displayName,'notify.somebody',
  463. 'connected', messageKey,
  464. messageOptions);
  465. }
  466. }
  467. function onAuthenticationRequired(intervalCallback) {
  468. Authentication.openAuthenticationDialog(
  469. roomName, intervalCallback, function () {
  470. Toolbar.authenticateClicked();
  471. });
  472. }
  473. UI.toggleSmileys = function () {
  474. Chat.toggleSmileys();
  475. };
  476. UI.getSettings = function () {
  477. return Settings.getSettings();
  478. };
  479. UI.toggleFilmStrip = function () {
  480. return BottomToolbar.toggleFilmStrip();
  481. };
  482. UI.toggleChat = function () {
  483. return BottomToolbar.toggleChat();
  484. };
  485. UI.toggleContactList = function () {
  486. return BottomToolbar.toggleContactList();
  487. };
  488. UI.inputDisplayNameHandler = function (value) {
  489. VideoLayout.inputDisplayNameHandler(value);
  490. };
  491. /**
  492. * Return the type of the remote video.
  493. * @param jid the jid for the remote video
  494. * @returns the video type video or screen.
  495. */
  496. UI.getRemoteVideoType = function (jid) {
  497. return VideoLayout.getRemoteVideoType(jid);
  498. };
  499. UI.getRoomNode = function () {
  500. if (roomNode)
  501. return roomNode;
  502. var path = window.location.pathname;
  503. // determinde the room node from the url
  504. // TODO: just the roomnode or the whole bare jid?
  505. if (config.getroomnode && typeof config.getroomnode === 'function') {
  506. // custom function might be responsible for doing the pushstate
  507. roomNode = config.getroomnode(path);
  508. } else {
  509. /* fall back to default strategy
  510. * this is making assumptions about how the URL->room mapping happens.
  511. * It currently assumes deployment at root, with a rewrite like the
  512. * following one (for nginx):
  513. location ~ ^/([a-zA-Z0-9]+)$ {
  514. rewrite ^/(.*)$ / break;
  515. }
  516. */
  517. if (path.length > 1) {
  518. roomNode = path.substr(1).toLowerCase();
  519. } else {
  520. var word = RoomnameGenerator.generateRoomWithoutSeparator();
  521. roomNode = word.toLowerCase();
  522. window.history.pushState('VideoChat',
  523. 'Room: ' + word, window.location.pathname + word);
  524. }
  525. }
  526. return roomNode;
  527. };
  528. UI.generateRoomName = function () {
  529. if (roomName)
  530. return roomName;
  531. var roomNode = UI.getRoomNode();
  532. roomName = roomNode + '@' + config.hosts.muc;
  533. return roomName;
  534. };
  535. UI.connectionIndicatorShowMore = function(jid) {
  536. return VideoLayout.showMore(jid);
  537. };
  538. UI.showLoginPopup = function(callback) {
  539. console.log('password is required');
  540. var message = '<h2 data-i18n="dialog.passwordRequired">';
  541. message += APP.translation.translateString(
  542. "dialog.passwordRequired");
  543. message += '</h2>' +
  544. '<input name="username" type="text" ' +
  545. 'placeholder="user@domain.net" autofocus>' +
  546. '<input name="password" ' +
  547. 'type="password" data-i18n="[placeholder]dialog.userPassword"' +
  548. ' placeholder="user password">';
  549. UI.messageHandler.openTwoButtonDialog(null, null, null, message,
  550. true,
  551. "dialog.Ok",
  552. function (e, v, m, f) {
  553. if (v) {
  554. if (f.username && f.password) {
  555. callback(f.username, f.password);
  556. }
  557. }
  558. },
  559. null, null, ':input:first'
  560. );
  561. };
  562. UI.checkForNicknameAndJoin = function () {
  563. Authentication.closeAuthenticationDialog();
  564. Authentication.stopInterval();
  565. var nick = null;
  566. if (config.useNicks) {
  567. nick = window.prompt('Your nickname (optional)');
  568. }
  569. APP.xmpp.joinRoom(roomName, config.useNicks, nick);
  570. };
  571. function dump(elem, filename) {
  572. elem = elem.parentNode;
  573. elem.download = filename || 'meetlog.json';
  574. elem.href = 'data:application/json;charset=utf-8,\n';
  575. var data = APP.xmpp.getJingleLog();
  576. var metadata = {};
  577. metadata.time = new Date();
  578. metadata.url = window.location.href;
  579. metadata.ua = navigator.userAgent;
  580. var log = APP.xmpp.getXmppLog();
  581. if (log) {
  582. metadata.xmpp = log;
  583. }
  584. data.metadata = metadata;
  585. elem.href += encodeURIComponent(JSON.stringify(data, null, ' '));
  586. return false;
  587. }
  588. UI.getRoomName = function () {
  589. return roomName;
  590. };
  591. /**
  592. * Sets muted audio state for the local participant.
  593. */
  594. UI.setAudioMuted = function (mute) {
  595. VideoLayout.showLocalAudioIndicator(mute);
  596. UIUtil.buttonClick("#toolbar_button_mute", "icon-microphone icon-mic-disabled");
  597. };
  598. UI.setVideoMuted = function (muted) {
  599. $('#toolbar_button_camera').toggleClass("icon-camera-disabled", muted);
  600. };
  601. UI.addListener = function (type, listener) {
  602. eventEmitter.on(type, listener);
  603. };
  604. UI.clickOnVideo = function (videoNumber) {
  605. var remoteVideos = $(".videocontainer:not(#mixedstream)");
  606. if (remoteVideos.length > videoNumber) {
  607. remoteVideos[videoNumber].click();
  608. }
  609. };
  610. //Used by torture
  611. UI.showToolbar = function () {
  612. return ToolbarToggler.showToolbar();
  613. };
  614. //Used by torture
  615. UI.dockToolbar = function (isDock) {
  616. return ToolbarToggler.dockToolbar(isDock);
  617. };
  618. UI.userAvatarChanged = function (resourceJid, thumbUrl, contactListUrl) {
  619. VideoLayout.userAvatarChanged(resourceJid, thumbUrl);
  620. ContactList.userAvatarChanged(resourceJid, contactListUrl);
  621. if(resourceJid === APP.xmpp.myResource()) {
  622. SettingsMenu.changeAvatar(thumbUrl);
  623. }
  624. };
  625. UI.notifyConnectionFailed = function (stropheErrorMsg) {
  626. var title = APP.translation.generateTranslationHTML(
  627. "dialog.error");
  628. var message;
  629. if (stropheErrorMsg) {
  630. message = APP.translation.generateTranslationHTML(
  631. "dialog.connectErrorWithMsg", {msg: stropheErrorMsg});
  632. } else {
  633. message = APP.translation.generateTranslationHTML(
  634. "dialog.connectError");
  635. }
  636. messageHandler.openDialog(
  637. title, message, true, {}, function (e, v, m, f) { return false; }
  638. );
  639. };
  640. UI.notifyFirefoxExtensionRequired = function (url) {
  641. messageHandler.openMessageDialog(
  642. "dialog.extensionRequired",
  643. null,
  644. null,
  645. APP.translation.generateTranslationHTML(
  646. "dialog.firefoxExtensionPrompt", {url: url}
  647. )
  648. );
  649. };
  650. UI.notifyInitiallyMuted = function () {
  651. messageHandler.notify(
  652. null, "notify.mutedTitle", "connected", "notify.muted", null, {timeOut: 120000}
  653. );
  654. };
  655. UI.markDominantSpiker = function (id) {
  656. VideoLayout.onDominantSpeakerChanged(id);
  657. };
  658. UI.handleLastNEndpoints = function (ids) {
  659. VideoLayout.onLastNEndpointsChanged(ids, []);
  660. };
  661. UI.setAudioLevel = function (targetJid, lvl) {
  662. AudioLevels.updateAudioLevel(
  663. targetJid, lvl, VideoLayout.getLargeVideoResource()
  664. );
  665. };
  666. UI.showToolbar = ToolbarToggler.showToolbar;
  667. UI.updateDesktopSharingButtons = function () {
  668. Toolbar.changeDesktopSharingButtonState();
  669. };
  670. UI.hideStats = function () {
  671. VideoLayout.hideStats();
  672. };
  673. UI.updateLocalStats = function (percent, stats) {
  674. VideoLayout.updateLocalConnectionStats(percent, stats);
  675. };
  676. UI.updateRemoteStats = function (jid, percent, stats) {
  677. VideoLayout.updateConnectionStats(jid, percent, stats);
  678. };
  679. module.exports = UI;