選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

UI.js 26KB

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