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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751
  1. var UI = {};
  2. var VideoLayout = require("./videolayout/VideoLayout.js");
  3. var AudioLevels = require("./audio_levels/AudioLevels.js");
  4. var Prezi = require("./prezi/Prezi.js");
  5. var Etherpad = require("./etherpad/Etherpad.js");
  6. var Chat = require("./side_pannels/chat/Chat.js");
  7. var Toolbar = require("./toolbars/Toolbar");
  8. var ToolbarToggler = require("./toolbars/ToolbarToggler");
  9. var BottomToolbar = require("./toolbars/BottomToolbar");
  10. var ContactList = require("./side_pannels/contactlist/ContactList");
  11. var Avatar = require("./avatar/Avatar");
  12. var EventEmitter = require("events");
  13. var SettingsMenu = require("./side_pannels/settings/SettingsMenu");
  14. var Settings = require("./../settings/Settings");
  15. var PanelToggler = require("./side_pannels/SidePanelToggler");
  16. var RoomNameGenerator = require("./welcome_page/RoomnameGenerator");
  17. UI.messageHandler = require("./util/MessageHandler");
  18. var messageHandler = UI.messageHandler;
  19. var Authentication = require("./authentication/Authentication");
  20. var UIUtil = require("./util/UIUtil");
  21. var NicknameHandler = require("./util/NicknameHandler");
  22. var CQEvents = require("../../service/connectionquality/CQEvents");
  23. var DesktopSharingEventTypes
  24. = require("../../service/desktopsharing/DesktopSharingEventTypes");
  25. var RTCEvents = require("../../service/RTC/RTCEvents");
  26. var StreamEventTypes = require("../../service/RTC/StreamEventTypes");
  27. var XMPPEvents = require("../../service/xmpp/XMPPEvents");
  28. var eventEmitter = new EventEmitter();
  29. var roomName = null;
  30. function setupPrezi()
  31. {
  32. $("#reloadPresentationLink").click(function()
  33. {
  34. Prezi.reloadPresentation();
  35. });
  36. }
  37. function setupChat()
  38. {
  39. Chat.init();
  40. $("#toggle_smileys").click(function() {
  41. Chat.toggleSmileys();
  42. });
  43. }
  44. function setupToolbars() {
  45. Toolbar.init(UI);
  46. Toolbar.setupButtonsFromConfig();
  47. BottomToolbar.init();
  48. }
  49. function streamHandler(stream) {
  50. switch (stream.type)
  51. {
  52. case "audio":
  53. VideoLayout.changeLocalAudio(stream);
  54. break;
  55. case "video":
  56. VideoLayout.changeLocalVideo(stream);
  57. break;
  58. case "stream":
  59. VideoLayout.changeLocalStream(stream);
  60. break;
  61. }
  62. }
  63. function onDisposeConference(unload) {
  64. Toolbar.showAuthenticateButton(false);
  65. };
  66. function onDisplayNameChanged(jid, displayName) {
  67. ContactList.onDisplayNameChange(jid, displayName);
  68. SettingsMenu.onDisplayNameChange(jid, displayName);
  69. VideoLayout.onDisplayNameChanged(jid, displayName);
  70. }
  71. function registerListeners() {
  72. APP.RTC.addStreamListener(streamHandler, StreamEventTypes.EVENT_TYPE_LOCAL_CREATED);
  73. APP.RTC.addStreamListener(streamHandler, StreamEventTypes.EVENT_TYPE_LOCAL_CHANGED);
  74. APP.RTC.addStreamListener(function (stream) {
  75. VideoLayout.onRemoteStreamAdded(stream);
  76. }, StreamEventTypes.EVENT_TYPE_REMOTE_CREATED);
  77. APP.RTC.addListener(RTCEvents.LASTN_CHANGED, onLastNChanged);
  78. APP.RTC.addListener(RTCEvents.DOMINANTSPEAKER_CHANGED, function (resourceJid) {
  79. VideoLayout.onDominantSpeakerChanged(resourceJid);
  80. });
  81. APP.RTC.addListener(RTCEvents.LASTN_ENDPOINT_CHANGED,
  82. function (lastNEndpoints, endpointsEnteringLastN, stream) {
  83. VideoLayout.onLastNEndpointsChanged(lastNEndpoints,
  84. endpointsEnteringLastN, stream);
  85. });
  86. APP.RTC.addListener(RTCEvents.SIMULCAST_LAYER_CHANGED,
  87. function (endpointSimulcastLayers) {
  88. VideoLayout.onSimulcastLayersChanged(endpointSimulcastLayers);
  89. });
  90. APP.RTC.addListener(RTCEvents.SIMULCAST_LAYER_CHANGING,
  91. function (endpointSimulcastLayers) {
  92. VideoLayout.onSimulcastLayersChanging(endpointSimulcastLayers);
  93. });
  94. APP.statistics.addAudioLevelListener(function(jid, audioLevel)
  95. {
  96. var resourceJid;
  97. if(jid === APP.statistics.LOCAL_JID)
  98. {
  99. resourceJid = AudioLevels.LOCAL_LEVEL;
  100. if(APP.RTC.localAudio.isMuted())
  101. {
  102. audioLevel = 0;
  103. }
  104. }
  105. else
  106. {
  107. resourceJid = Strophe.getResourceFromJid(jid);
  108. }
  109. AudioLevels.updateAudioLevel(resourceJid, audioLevel,
  110. UI.getLargeVideoState().userResourceJid);
  111. });
  112. APP.desktopsharing.addListener(function () {
  113. ToolbarToggler.showDesktopSharingButton();
  114. }, DesktopSharingEventTypes.INIT);
  115. APP.desktopsharing.addListener(
  116. Toolbar.changeDesktopSharingButtonState,
  117. DesktopSharingEventTypes.SWITCHING_DONE);
  118. APP.connectionquality.addListener(CQEvents.LOCALSTATS_UPDATED,
  119. VideoLayout.updateLocalConnectionStats);
  120. APP.connectionquality.addListener(CQEvents.REMOTESTATS_UPDATED,
  121. VideoLayout.updateConnectionStats);
  122. APP.connectionquality.addListener(CQEvents.STOP,
  123. VideoLayout.onStatsStop);
  124. APP.xmpp.addListener(XMPPEvents.DISPOSE_CONFERENCE, onDisposeConference);
  125. APP.xmpp.addListener(XMPPEvents.GRACEFUL_SHUTDOWN, function () {
  126. messageHandler.openMessageDialog(
  127. 'dialog.serviceUnavailable',
  128. 'dialog.gracefulShutdown'
  129. );
  130. });
  131. APP.xmpp.addListener(XMPPEvents.RESERVATION_ERROR, function (code, msg) {
  132. var title = APP.translation.generateTranslatonHTML(
  133. "dialog.reservationError");
  134. var message = APP.translation.generateTranslatonHTML(
  135. "dialog.reservationErrorMsg", {code: code, msg: msg});
  136. messageHandler.openDialog(
  137. title,
  138. message,
  139. true, {},
  140. function (event, value, message, formVals)
  141. {
  142. return false;
  143. }
  144. );
  145. });
  146. APP.xmpp.addListener(XMPPEvents.KICKED, function () {
  147. messageHandler.openMessageDialog("dialog.sessTerminated",
  148. "dialog.kickMessage");
  149. });
  150. APP.xmpp.addListener(XMPPEvents.MUC_DESTROYED, function (reason) {
  151. //FIXME: use Session Terminated from translation, but
  152. // 'reason' text comes from XMPP packet and is not translated
  153. var title = APP.translation.generateTranslatonHTML("dialog.sessTerminated");
  154. messageHandler.openDialog(
  155. title, reason, true, {},
  156. function (event, value, message, formVals)
  157. {
  158. return false;
  159. }
  160. );
  161. });
  162. APP.xmpp.addListener(XMPPEvents.BRIDGE_DOWN, function () {
  163. messageHandler.showError("dialog.error",
  164. "dialog.bridgeUnavailable");
  165. });
  166. APP.xmpp.addListener(XMPPEvents.USER_ID_CHANGED, function (from, id) {
  167. Avatar.setUserAvatar(from, id);
  168. });
  169. APP.xmpp.addListener(XMPPEvents.CHANGED_STREAMS, function (jid, changedStreams) {
  170. for(stream in changedStreams)
  171. {
  172. // might need to update the direction if participant just went from sendrecv to recvonly
  173. if (stream.type === 'video' || stream.type === 'screen') {
  174. var el = $('#participant_' + Strophe.getResourceFromJid(jid) + '>video');
  175. switch (stream.direction) {
  176. case 'sendrecv':
  177. el.show();
  178. break;
  179. case 'recvonly':
  180. el.hide();
  181. // FIXME: Check if we have to change large video
  182. //VideoLayout.updateLargeVideo(el);
  183. break;
  184. }
  185. }
  186. }
  187. });
  188. APP.xmpp.addListener(XMPPEvents.DISPLAY_NAME_CHANGED, onDisplayNameChanged);
  189. APP.xmpp.addListener(XMPPEvents.MUC_JOINED, onMucJoined);
  190. APP.xmpp.addListener(XMPPEvents.LOCALROLE_CHANGED, onLocalRoleChange);
  191. APP.xmpp.addListener(XMPPEvents.MUC_ENTER, onMucEntered);
  192. APP.xmpp.addListener(XMPPEvents.MUC_ROLE_CHANGED, onMucRoleChanged);
  193. APP.xmpp.addListener(XMPPEvents.PRESENCE_STATUS, onMucPresenceStatus);
  194. APP.xmpp.addListener(XMPPEvents.SUBJECT_CHANGED, chatSetSubject);
  195. APP.xmpp.addListener(XMPPEvents.MESSAGE_RECEIVED, updateChatConversation);
  196. APP.xmpp.addListener(XMPPEvents.MUC_LEFT, onMucLeft);
  197. APP.xmpp.addListener(XMPPEvents.PASSWORD_REQUIRED, onPasswordReqiured);
  198. APP.xmpp.addListener(XMPPEvents.CHAT_ERROR_RECEIVED, chatAddError);
  199. APP.xmpp.addListener(XMPPEvents.ETHERPAD, initEtherpad);
  200. APP.xmpp.addListener(XMPPEvents.AUTHENTICATION_REQUIRED, onAuthenticationRequired);
  201. }
  202. /**
  203. * Mutes/unmutes the local video.
  204. *
  205. * @param mute <tt>true</tt> to mute the local video; otherwise, <tt>false</tt>
  206. * @param options an object which specifies optional arguments such as the
  207. * <tt>boolean</tt> key <tt>byUser</tt> with default value <tt>true</tt> which
  208. * specifies whether the method was initiated in response to a user command (in
  209. * contrast to an automatic decision taken by the application logic)
  210. */
  211. function setVideoMute(mute, options) {
  212. APP.xmpp.setVideoMute(
  213. mute,
  214. function (mute) {
  215. var video = $('#video');
  216. var communicativeClass = "icon-camera";
  217. var muteClass = "icon-camera icon-camera-disabled";
  218. if (mute) {
  219. video.removeClass(communicativeClass);
  220. video.addClass(muteClass);
  221. } else {
  222. video.removeClass(muteClass);
  223. video.addClass(communicativeClass);
  224. }
  225. },
  226. options);
  227. }
  228. function bindEvents()
  229. {
  230. /**
  231. * Resizes and repositions videos in full screen mode.
  232. */
  233. $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange',
  234. function () {
  235. VideoLayout.resizeLargeVideoContainer();
  236. VideoLayout.positionLarge();
  237. }
  238. );
  239. $(window).resize(function () {
  240. VideoLayout.resizeLargeVideoContainer();
  241. VideoLayout.positionLarge();
  242. });
  243. }
  244. UI.start = function (init) {
  245. document.title = interfaceConfig.APP_NAME;
  246. if(config.enableWelcomePage && window.location.pathname == "/" &&
  247. (!window.localStorage.welcomePageDisabled || window.localStorage.welcomePageDisabled == "false"))
  248. {
  249. $("#videoconference_page").hide();
  250. var setupWelcomePage = require("./welcome_page/WelcomePage");
  251. setupWelcomePage();
  252. return;
  253. }
  254. if (interfaceConfig.SHOW_JITSI_WATERMARK) {
  255. var leftWatermarkDiv
  256. = $("#largeVideoContainer div[class='watermark leftwatermark']");
  257. leftWatermarkDiv.css({display: 'block'});
  258. leftWatermarkDiv.parent().get(0).href
  259. = interfaceConfig.JITSI_WATERMARK_LINK;
  260. }
  261. if (interfaceConfig.SHOW_BRAND_WATERMARK) {
  262. var rightWatermarkDiv
  263. = $("#largeVideoContainer div[class='watermark rightwatermark']");
  264. rightWatermarkDiv.css({display: 'block'});
  265. rightWatermarkDiv.parent().get(0).href
  266. = interfaceConfig.BRAND_WATERMARK_LINK;
  267. rightWatermarkDiv.get(0).style.backgroundImage
  268. = "url(images/rightwatermark.png)";
  269. }
  270. if (interfaceConfig.SHOW_POWERED_BY) {
  271. $("#largeVideoContainer>a[class='poweredby']").css({display: 'block'});
  272. }
  273. $("#welcome_page").hide();
  274. VideoLayout.resizeLargeVideoContainer();
  275. $("#videospace").mousemove(function () {
  276. return ToolbarToggler.showToolbar();
  277. });
  278. // Set the defaults for prompt dialogs.
  279. jQuery.prompt.setDefaults({persistent: false});
  280. VideoLayout.init(eventEmitter);
  281. AudioLevels.init();
  282. NicknameHandler.init(eventEmitter);
  283. registerListeners();
  284. bindEvents();
  285. setupPrezi();
  286. setupToolbars();
  287. setupChat();
  288. document.title = interfaceConfig.APP_NAME;
  289. $("#downloadlog").click(function (event) {
  290. dump(event.target);
  291. });
  292. if(config.enableWelcomePage && window.location.pathname == "/" &&
  293. (!window.localStorage.welcomePageDisabled || window.localStorage.welcomePageDisabled == "false"))
  294. {
  295. $("#videoconference_page").hide();
  296. var setupWelcomePage = require("./welcome_page/WelcomePage");
  297. setupWelcomePage();
  298. return;
  299. }
  300. $("#welcome_page").hide();
  301. // Display notice message at the top of the toolbar
  302. if (config.noticeMessage) {
  303. $('#noticeText').text(config.noticeMessage);
  304. $('#notice').css({display: 'block'});
  305. }
  306. document.getElementById('largeVideo').volume = 0;
  307. if (!$('#settings').is(':visible')) {
  308. console.log('init');
  309. init();
  310. } else {
  311. loginInfo.onsubmit = function (e) {
  312. if (e.preventDefault) e.preventDefault();
  313. $('#settings').hide();
  314. init();
  315. };
  316. }
  317. toastr.options = {
  318. "closeButton": true,
  319. "debug": false,
  320. "positionClass": "notification-bottom-right",
  321. "onclick": null,
  322. "showDuration": "300",
  323. "hideDuration": "1000",
  324. "timeOut": "2000",
  325. "extendedTimeOut": "1000",
  326. "showEasing": "swing",
  327. "hideEasing": "linear",
  328. "showMethod": "fadeIn",
  329. "hideMethod": "fadeOut",
  330. "reposition": function() {
  331. if(PanelToggler.isVisible()) {
  332. $("#toast-container").addClass("notification-bottom-right-center");
  333. } else {
  334. $("#toast-container").removeClass("notification-bottom-right-center");
  335. }
  336. },
  337. "newestOnTop": false
  338. };
  339. SettingsMenu.init();
  340. };
  341. function chatAddError(errorMessage, originalText)
  342. {
  343. return Chat.chatAddError(errorMessage, originalText);
  344. };
  345. function chatSetSubject(text)
  346. {
  347. return Chat.chatSetSubject(text);
  348. };
  349. function updateChatConversation(from, displayName, message) {
  350. return Chat.updateChatConversation(from, displayName, message);
  351. };
  352. function onMucJoined(jid, info) {
  353. Toolbar.updateRoomUrl(window.location.href);
  354. var meHTML = APP.translation.generateTranslatonHTML("me");
  355. $("#localNick").html(Strophe.getResourceFromJid(jid) + " (" + meHTML + ")");
  356. var settings = Settings.getSettings();
  357. // Add myself to the contact list.
  358. ContactList.addContact(jid, settings.email || settings.uid);
  359. // Once we've joined the muc show the toolbar
  360. ToolbarToggler.showToolbar();
  361. var displayName = !config.displayJids
  362. ? info.displayName : Strophe.getResourceFromJid(jid);
  363. if (displayName)
  364. onDisplayNameChanged('localVideoContainer', displayName);
  365. }
  366. function initEtherpad(name) {
  367. Etherpad.init(name);
  368. };
  369. function onMucLeft(jid) {
  370. console.log('left.muc', jid);
  371. var displayName = $('#participant_' + Strophe.getResourceFromJid(jid) +
  372. '>.displayname').html();
  373. messageHandler.notify(displayName,'notify.somebody',
  374. 'disconnected',
  375. 'notify.disconnected');
  376. // Need to call this with a slight delay, otherwise the element couldn't be
  377. // found for some reason.
  378. // XXX(gp) it works fine without the timeout for me (with Chrome 38).
  379. window.setTimeout(function () {
  380. var container = document.getElementById(
  381. 'participant_' + Strophe.getResourceFromJid(jid));
  382. if (container) {
  383. ContactList.removeContact(jid);
  384. VideoLayout.removeConnectionIndicator(jid);
  385. // hide here, wait for video to close before removing
  386. $(container).hide();
  387. VideoLayout.resizeThumbnails();
  388. }
  389. }, 10);
  390. VideoLayout.participantLeft(jid);
  391. };
  392. function onLocalRoleChange(jid, info, pres, isModerator)
  393. {
  394. console.info("My role changed, new role: " + info.role);
  395. onModeratorStatusChanged(isModerator);
  396. VideoLayout.showModeratorIndicator();
  397. if (isModerator) {
  398. Authentication.closeAuthenticationWindow();
  399. messageHandler.notify(null, "notify.me",
  400. 'connected', "notify.moderator");
  401. }
  402. }
  403. function onModeratorStatusChanged(isModerator) {
  404. Toolbar.showSipCallButton(isModerator);
  405. Toolbar.showRecordingButton(
  406. isModerator); //&&
  407. // FIXME:
  408. // Recording visible if
  409. // there are at least 2(+ 1 focus) participants
  410. //Object.keys(connection.emuc.members).length >= 3);
  411. if (isModerator && config.etherpad_base) {
  412. Etherpad.init();
  413. }
  414. };
  415. function onPasswordReqiured(callback) {
  416. // password is required
  417. Toolbar.lockLockButton();
  418. var message = '<h2 data-i18n="dialog.passwordRequired">';
  419. message += APP.translation.translateString(
  420. "dialog.passwordRequired");
  421. message += '</h2>' +
  422. '<input id="lockKey" type="text" data-i18n=' +
  423. '"[placeholder]dialog.password" placeholder="' +
  424. APP.translation.translateString("dialog.password") +
  425. '" autofocus>';
  426. messageHandler.openTwoButtonDialog(null, null, null, message,
  427. true,
  428. "dialog.Ok",
  429. function (e, v, m, f) {},
  430. function (event) {
  431. document.getElementById('lockKey').focus();
  432. },
  433. function (e, v, m, f) {
  434. if (v) {
  435. var lockKey = document.getElementById('lockKey');
  436. if (lockKey.value !== null) {
  437. Toolbar.setSharedKey(lockKey.value);
  438. callback(lockKey.value);
  439. }
  440. }
  441. }
  442. );
  443. }
  444. function onMucEntered(jid, id, displayName) {
  445. messageHandler.notify(displayName,'notify.somebody',
  446. 'connected',
  447. 'notify.connected');
  448. // Add Peer's container
  449. VideoLayout.ensurePeerContainerExists(jid,id);
  450. }
  451. function onMucPresenceStatus( jid, info) {
  452. VideoLayout.setPresenceStatus(
  453. 'participant_' + Strophe.getResourceFromJid(jid), info.status);
  454. }
  455. function onMucRoleChanged(role, displayName) {
  456. VideoLayout.showModeratorIndicator();
  457. if (role === 'moderator') {
  458. var messageKey, messageOptions = {};
  459. if (!displayName) {
  460. messageKey = "notify.grantedToUnknown";
  461. }
  462. else
  463. {
  464. messageKey = "notify.grantedTo";
  465. messageOptions = {to: displayName};
  466. }
  467. messageHandler.notify(
  468. displayName,'notify.somebody',
  469. 'connected', messageKey,
  470. messageOptions);
  471. }
  472. }
  473. function onAuthenticationRequired(intervalCallback) {
  474. Authentication.openAuthenticationDialog(
  475. roomName, intervalCallback, function () {
  476. Toolbar.authenticateClicked();
  477. });
  478. };
  479. function onLastNChanged(oldValue, newValue) {
  480. if (config.muteLocalVideoIfNotInLastN) {
  481. setVideoMute(!newValue, { 'byUser': false });
  482. }
  483. }
  484. UI.toggleSmileys = function () {
  485. Chat.toggleSmileys();
  486. };
  487. UI.getSettings = function () {
  488. return Settings.getSettings();
  489. };
  490. UI.toggleFilmStrip = function () {
  491. return BottomToolbar.toggleFilmStrip();
  492. };
  493. UI.toggleChat = function () {
  494. return BottomToolbar.toggleChat();
  495. };
  496. UI.toggleContactList = function () {
  497. return BottomToolbar.toggleContactList();
  498. };
  499. UI.inputDisplayNameHandler = function (value) {
  500. VideoLayout.inputDisplayNameHandler(value);
  501. };
  502. UI.getLargeVideoState = function()
  503. {
  504. return VideoLayout.getLargeVideoState();
  505. };
  506. UI.generateRoomName = function() {
  507. if(roomName)
  508. return roomName;
  509. var roomnode = null;
  510. var path = window.location.pathname;
  511. // determinde the room node from the url
  512. // TODO: just the roomnode or the whole bare jid?
  513. if (config.getroomnode && typeof config.getroomnode === 'function') {
  514. // custom function might be responsible for doing the pushstate
  515. roomnode = config.getroomnode(path);
  516. } else {
  517. /* fall back to default strategy
  518. * this is making assumptions about how the URL->room mapping happens.
  519. * It currently assumes deployment at root, with a rewrite like the
  520. * following one (for nginx):
  521. location ~ ^/([a-zA-Z0-9]+)$ {
  522. rewrite ^/(.*)$ / break;
  523. }
  524. */
  525. if (path.length > 1) {
  526. roomnode = path.substr(1).toLowerCase();
  527. } else {
  528. var word = RoomNameGenerator.generateRoomWithoutSeparator();
  529. roomnode = word.toLowerCase();
  530. window.history.pushState('VideoChat',
  531. 'Room: ' + word, window.location.pathname + word);
  532. }
  533. }
  534. roomName = roomnode + '@' + config.hosts.muc;
  535. return roomName;
  536. };
  537. UI.connectionIndicatorShowMore = function(id)
  538. {
  539. return VideoLayout.connectionIndicators[id].showMore();
  540. };
  541. UI.showLoginPopup = function(callback)
  542. {
  543. console.log('password is required');
  544. var message = '<h2 data-i18n="dialog.passwordRequired">';
  545. message += APP.translation.translateString(
  546. "dialog.passwordRequired");
  547. message += '</h2>' +
  548. '<input id="passwordrequired.username" type="text" ' +
  549. 'placeholder="user@domain.net" autofocus>' +
  550. '<input id="passwordrequired.password" ' +
  551. 'type="password" data-i18n="[placeholder]dialog.userPassword"' +
  552. ' placeholder="user password">';
  553. UI.messageHandler.openTwoButtonDialog(null, null, null, message,
  554. true,
  555. "dialog.Ok",
  556. function (e, v, m, f) {
  557. if (v) {
  558. var username = document.getElementById('passwordrequired.username');
  559. var password = document.getElementById('passwordrequired.password');
  560. if (username.value !== null && password.value != null) {
  561. callback(username.value, password.value);
  562. }
  563. }
  564. },
  565. function (event) {
  566. document.getElementById('passwordrequired.username').focus();
  567. }
  568. );
  569. }
  570. UI.checkForNicknameAndJoin = function () {
  571. Authentication.closeAuthenticationDialog();
  572. Authentication.stopInterval();
  573. var nick = null;
  574. if (config.useNicks) {
  575. nick = window.prompt('Your nickname (optional)');
  576. }
  577. APP.xmpp.joinRoom(roomName, config.useNicks, nick);
  578. };
  579. function dump(elem, filename) {
  580. elem = elem.parentNode;
  581. elem.download = filename || 'meetlog.json';
  582. elem.href = 'data:application/json;charset=utf-8,\n';
  583. var data = APP.xmpp.populateData();
  584. var metadata = {};
  585. metadata.time = new Date();
  586. metadata.url = window.location.href;
  587. metadata.ua = navigator.userAgent;
  588. var log = APP.xmpp.getLogger();
  589. if (log) {
  590. metadata.xmpp = log;
  591. }
  592. data.metadata = metadata;
  593. elem.href += encodeURIComponent(JSON.stringify(data, null, ' '));
  594. return false;
  595. }
  596. UI.getRoomName = function () {
  597. return roomName;
  598. };
  599. /**
  600. * Mutes/unmutes the local video.
  601. */
  602. UI.toggleVideo = function () {
  603. UIUtil.buttonClick("#video", "icon-camera icon-camera-disabled");
  604. setVideoMute(!APP.RTC.localVideo.isMuted());
  605. };
  606. /**
  607. * Mutes / unmutes audio for the local participant.
  608. */
  609. UI.toggleAudio = function() {
  610. UI.setAudioMuted(!APP.RTC.localAudio.isMuted());
  611. };
  612. /**
  613. * Sets muted audio state for the local participant.
  614. */
  615. UI.setAudioMuted = function (mute) {
  616. if(!APP.xmpp.setAudioMute(mute, function () {
  617. VideoLayout.showLocalAudioIndicator(mute);
  618. UIUtil.buttonClick("#mute", "icon-microphone icon-mic-disabled");
  619. }))
  620. {
  621. // We still click the button.
  622. UIUtil.buttonClick("#mute", "icon-microphone icon-mic-disabled");
  623. return;
  624. }
  625. }
  626. UI.addListener = function (type, listener) {
  627. eventEmitter.on(type, listener);
  628. }
  629. UI.clickOnVideo = function (videoNumber) {
  630. var remoteVideos = $(".videocontainer:not(#mixedstream)");
  631. if (remoteVideos.length > videoNumber) {
  632. remoteVideos[videoNumber].click();
  633. }
  634. }
  635. //Used by torture
  636. UI.showToolbar = function () {
  637. return ToolbarToggler.showToolbar();
  638. }
  639. //Used by torture
  640. UI.dockToolbar = function (isDock) {
  641. return ToolbarToggler.dockToolbar(isDock);
  642. }
  643. module.exports = UI;