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

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