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

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