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

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