Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

UI.js 29KB

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