Browse Source

Cleanup and formatting fixes in the UI module.

master
Boris Grozev 10 years ago
parent
commit
67a52e6f72

+ 61
- 83
modules/UI/UI.js View File

1
+/* global Strophe, APP, $, config, interfaceConfig, toastr */
1
 var UI = {};
2
 var UI = {};
2
 
3
 
3
 var VideoLayout = require("./videolayout/VideoLayout.js");
4
 var VideoLayout = require("./videolayout/VideoLayout.js");
79
     );
80
     );
80
 }
81
 }
81
 
82
 
82
-
83
-function notifyForInitialMute()
84
-{
83
+function notifyForInitialMute() {
85
     messageHandler.notify(null, "notify.mutedTitle", "connected",
84
     messageHandler.notify(null, "notify.mutedTitle", "connected",
86
         "notify.muted", null, {timeOut: 120000});
85
         "notify.muted", null, {timeOut: 120000});
87
 }
86
 }
88
 
87
 
89
-function setupPrezi()
90
-{
91
-    $("#reloadPresentationLink").click(function()
92
-    {
88
+function setupPrezi() {
89
+    $("#reloadPresentationLink").click(function() {
93
         Prezi.reloadPresentation();
90
         Prezi.reloadPresentation();
94
     });
91
     });
95
 }
92
 }
96
 
93
 
97
-function setupChat()
98
-{
94
+function setupChat() {
99
     Chat.init();
95
     Chat.init();
100
     $("#toggle_smileys").click(function() {
96
     $("#toggle_smileys").click(function() {
101
         Chat.toggleSmileys();
97
         Chat.toggleSmileys();
109
 }
105
 }
110
 
106
 
111
 function streamHandler(stream, isMuted) {
107
 function streamHandler(stream, isMuted) {
112
-    switch (stream.type)
113
-    {
108
+    switch (stream.type) {
114
         case "audio":
109
         case "audio":
115
             VideoLayout.changeLocalAudio(stream, isMuted);
110
             VideoLayout.changeLocalAudio(stream, isMuted);
116
             break;
111
             break;
152
 }
147
 }
153
 
148
 
154
 function registerListeners() {
149
 function registerListeners() {
155
-    APP.RTC.addStreamListener(streamHandler, StreamEventTypes.EVENT_TYPE_LOCAL_CREATED);
156
-
157
-    APP.RTC.addStreamListener(streamHandler, StreamEventTypes.EVENT_TYPE_LOCAL_CHANGED);
150
+    APP.RTC.addStreamListener(streamHandler,
151
+        StreamEventTypes.EVENT_TYPE_LOCAL_CREATED);
152
+    APP.RTC.addStreamListener(streamHandler,
153
+        StreamEventTypes.EVENT_TYPE_LOCAL_CHANGED);
158
     APP.RTC.addStreamListener(function (stream) {
154
     APP.RTC.addStreamListener(function (stream) {
159
         VideoLayout.onRemoteStreamAdded(stream);
155
         VideoLayout.onRemoteStreamAdded(stream);
160
     }, StreamEventTypes.EVENT_TYPE_REMOTE_CREATED);
156
     }, StreamEventTypes.EVENT_TYPE_REMOTE_CREATED);
162
         VideoLayout.onVideoTypeChanged(jid);
158
         VideoLayout.onVideoTypeChanged(jid);
163
     }, StreamEventTypes.EVENT_TYPE_REMOTE_CHANGED);
159
     }, StreamEventTypes.EVENT_TYPE_REMOTE_CHANGED);
164
     APP.RTC.addListener(RTCEvents.LASTN_CHANGED, onLastNChanged);
160
     APP.RTC.addListener(RTCEvents.LASTN_CHANGED, onLastNChanged);
165
-    APP.RTC.addListener(RTCEvents.DOMINANTSPEAKER_CHANGED, function (resourceJid) {
161
+    APP.RTC.addListener(RTCEvents.DOMINANTSPEAKER_CHANGED,
162
+        function (resourceJid) {
166
         VideoLayout.onDominantSpeakerChanged(resourceJid);
163
         VideoLayout.onDominantSpeakerChanged(resourceJid);
167
     });
164
     });
168
     APP.RTC.addListener(RTCEvents.LASTN_ENDPOINT_CHANGED,
165
     APP.RTC.addListener(RTCEvents.LASTN_ENDPOINT_CHANGED,
183
         var userJid = APP.UI.getLargeVideoJid();
180
         var userJid = APP.UI.getLargeVideoJid();
184
         eventEmitter.emit(UIEvents.SELECTED_ENDPOINT, userJid);
181
         eventEmitter.emit(UIEvents.SELECTED_ENDPOINT, userJid);
185
     });
182
     });
186
-    APP.statistics.addAudioLevelListener(function(jid, audioLevel)
187
-    {
183
+    APP.statistics.addAudioLevelListener(function(jid, audioLevel) {
188
         var resourceJid;
184
         var resourceJid;
189
-        if(jid === APP.statistics.LOCAL_JID)
190
-        {
185
+        if(jid === APP.statistics.LOCAL_JID) {
191
             resourceJid = AudioLevels.LOCAL_LEVEL;
186
             resourceJid = AudioLevels.LOCAL_LEVEL;
192
-            if(APP.RTC.localAudio.isMuted())
193
-            {
187
+            if(APP.RTC.localAudio.isMuted()) {
194
                 audioLevel = 0;
188
                 audioLevel = 0;
195
             }
189
             }
196
-        }
197
-        else
198
-        {
190
+        } else {
199
             resourceJid = Strophe.getResourceFromJid(jid);
191
             resourceJid = Strophe.getResourceFromJid(jid);
200
         }
192
         }
201
 
193
 
231
             title,
223
             title,
232
             message,
224
             message,
233
             true, {},
225
             true, {},
234
-            function (event, value, message, formVals)
235
-            {
226
+            function (event, value, message, formVals) {
236
                 return false;
227
                 return false;
237
             }
228
             }
238
         );
229
         );
247
         var title = APP.translation.generateTranslationHTML("dialog.sessTerminated");
238
         var title = APP.translation.generateTranslationHTML("dialog.sessTerminated");
248
         messageHandler.openDialog(
239
         messageHandler.openDialog(
249
             title, reason, true, {},
240
             title, reason, true, {},
250
-            function (event, value, message, formVals)
251
-            {
241
+            function (event, value, message, formVals) {
252
                 return false;
242
                 return false;
253
             }
243
             }
254
         );
244
         );
361
         options);
351
         options);
362
 }
352
 }
363
 
353
 
364
-function onResize()
365
-{
354
+function onResize() {
366
     Chat.resizeChat();
355
     Chat.resizeChat();
367
     VideoLayout.resizeLargeVideoContainer();
356
     VideoLayout.resizeLargeVideoContainer();
368
 }
357
 }
369
 
358
 
370
-function bindEvents()
371
-{
359
+function bindEvents() {
372
     /**
360
     /**
373
      * Resizes and repositions videos in full screen mode.
361
      * Resizes and repositions videos in full screen mode.
374
      */
362
      */
380
 
368
 
381
 UI.start = function (init) {
369
 UI.start = function (init) {
382
     document.title = interfaceConfig.APP_NAME;
370
     document.title = interfaceConfig.APP_NAME;
371
+    var setupWelcomePage = null;
383
     if(config.enableWelcomePage && window.location.pathname == "/" &&
372
     if(config.enableWelcomePage && window.location.pathname == "/" &&
384
-        (!window.localStorage.welcomePageDisabled || window.localStorage.welcomePageDisabled == "false"))
385
-    {
373
+        (!window.localStorage.welcomePageDisabled ||
374
+            window.localStorage.welcomePageDisabled == "false")) {
386
         $("#videoconference_page").hide();
375
         $("#videoconference_page").hide();
387
-        var setupWelcomePage = require("./welcome_page/WelcomePage");
376
+        if (!setupWelcomePage)
377
+            setupWelcomePage = require("./welcome_page/WelcomePage");
388
         setupWelcomePage();
378
         setupWelcomePage();
389
 
379
 
390
         return;
380
         return;
391
     }
381
     }
392
 
382
 
393
-
394
     $("#welcome_page").hide();
383
     $("#welcome_page").hide();
395
 
384
 
396
     $("#videospace").mousemove(function () {
385
     $("#videospace").mousemove(function () {
397
         return ToolbarToggler.showToolbar();
386
         return ToolbarToggler.showToolbar();
398
     });
387
     });
399
     // Set the defaults for prompt dialogs.
388
     // Set the defaults for prompt dialogs.
400
-    jQuery.prompt.setDefaults({persistent: false});
389
+    $.prompt.setDefaults({persistent: false});
401
 
390
 
402
 
391
 
403
     registerListeners();
392
     registerListeners();
418
     });
407
     });
419
 
408
 
420
     if(config.enableWelcomePage && window.location.pathname == "/" &&
409
     if(config.enableWelcomePage && window.location.pathname == "/" &&
421
-        (!window.localStorage.welcomePageDisabled || window.localStorage.welcomePageDisabled == "false"))
422
-    {
410
+        (!window.localStorage.welcomePageDisabled ||
411
+            window.localStorage.welcomePageDisabled == "false")) {
423
         $("#videoconference_page").hide();
412
         $("#videoconference_page").hide();
424
-        var setupWelcomePage = require("./welcome_page/WelcomePage");
413
+        if (!setupWelcomePage)
414
+            setupWelcomePage = require("./welcome_page/WelcomePage");
425
         setupWelcomePage();
415
         setupWelcomePage();
426
 
416
 
427
         return;
417
         return;
471
 
461
 
472
 };
462
 };
473
 
463
 
474
-function chatAddError(errorMessage, originalText)
475
-{
464
+function chatAddError(errorMessage, originalText) {
476
     return Chat.chatAddError(errorMessage, originalText);
465
     return Chat.chatAddError(errorMessage, originalText);
477
-};
466
+}
478
 
467
 
479
-function chatSetSubject(text)
480
-{
468
+function chatSetSubject(text) {
481
     return Chat.chatSetSubject(text);
469
     return Chat.chatSetSubject(text);
482
-};
470
+}
483
 
471
 
484
 function updateChatConversation(from, displayName, message, myjid, stamp) {
472
 function updateChatConversation(from, displayName, message, myjid, stamp) {
485
     return Chat.updateChatConversation(from, displayName, message, myjid, stamp);
473
     return Chat.updateChatConversation(from, displayName, message, myjid, stamp);
501
     // Once we've joined the muc show the toolbar
489
     // Once we've joined the muc show the toolbar
502
     ToolbarToggler.showToolbar();
490
     ToolbarToggler.showToolbar();
503
 
491
 
504
-    var displayName = !config.displayJids
505
-        ? info.displayName : Strophe.getResourceFromJid(jid);
492
+    var displayName =
493
+        config.displayJids ? Strophe.getResourceFromJid(jid) : info.displayName;
506
 
494
 
507
     if (displayName)
495
     if (displayName)
508
         onDisplayNameChanged('localVideoContainer', displayName);
496
         onDisplayNameChanged('localVideoContainer', displayName);
522
     messageHandler.notify(displayName,'notify.somebody',
510
     messageHandler.notify(displayName,'notify.somebody',
523
         'disconnected',
511
         'disconnected',
524
         'notify.disconnected');
512
         'notify.disconnected');
525
-    if(!config.startAudioMuted ||
526
-        config.startAudioMuted > APP.members.size())
513
+    if (!config.startAudioMuted ||
514
+        config.startAudioMuted > APP.members.size()) {
527
         UIUtil.playSoundNotification('userLeft');
515
         UIUtil.playSoundNotification('userLeft');
516
+    }
528
 
517
 
529
     ContactList.removeContact(jid);
518
     ContactList.removeContact(jid);
530
 
519
 
531
     VideoLayout.participantLeft(jid);
520
     VideoLayout.participantLeft(jid);
532
-};
533
-
534
-
535
-function onLocalRoleChanged(jid, info, pres, isModerator)
536
-{
521
+}
537
 
522
 
523
+function onLocalRoleChanged(jid, info, pres, isModerator) {
538
     console.info("My role changed, new role: " + info.role);
524
     console.info("My role changed, new role: " + info.role);
539
     onModeratorStatusChanged(isModerator);
525
     onModeratorStatusChanged(isModerator);
540
     VideoLayout.showModeratorIndicator();
526
     VideoLayout.showModeratorIndicator();
548
 }
534
 }
549
 
535
 
550
 function onModeratorStatusChanged(isModerator) {
536
 function onModeratorStatusChanged(isModerator) {
551
-
552
     Toolbar.showSipCallButton(isModerator);
537
     Toolbar.showSipCallButton(isModerator);
553
     Toolbar.showRecordingButton(
538
     Toolbar.showRecordingButton(
554
         isModerator); //&&
539
         isModerator); //&&
602
         'connected',
587
         'connected',
603
         'notify.connected');
588
         'notify.connected');
604
 
589
 
605
-    if(!config.startAudioMuted ||
590
+    if (!config.startAudioMuted ||
606
         config.startAudioMuted > APP.members.size())
591
         config.startAudioMuted > APP.members.size())
607
         UIUtil.playSoundNotification('userJoined');
592
         UIUtil.playSoundNotification('userJoined');
608
 
593
 
625
         if (!displayName) {
610
         if (!displayName) {
626
             messageKey = "notify.grantedToUnknown";
611
             messageKey = "notify.grantedToUnknown";
627
         }
612
         }
628
-        else
629
-        {
613
+        else {
630
             messageKey = "notify.grantedTo";
614
             messageKey = "notify.grantedTo";
631
             messageOptions = {to: displayName};
615
             messageOptions = {to: displayName};
632
         }
616
         }
642
         roomName, intervalCallback, function () {
626
         roomName, intervalCallback, function () {
643
             Toolbar.authenticateClicked();
627
             Toolbar.authenticateClicked();
644
         });
628
         });
645
-};
629
+}
646
 
630
 
647
 
631
 
648
 function onLastNChanged(oldValue, newValue) {
632
 function onLastNChanged(oldValue, newValue) {
676
     VideoLayout.inputDisplayNameHandler(value);
660
     VideoLayout.inputDisplayNameHandler(value);
677
 };
661
 };
678
 
662
 
679
-
680
-UI.getLargeVideoJid = function()
681
-{
663
+UI.getLargeVideoJid = function() {
682
     return VideoLayout.getLargeVideoJid();
664
     return VideoLayout.getLargeVideoJid();
683
 };
665
 };
684
 
666
 
718
 };
700
 };
719
 
701
 
720
 
702
 
721
-UI.connectionIndicatorShowMore = function(jid)
722
-{
703
+UI.connectionIndicatorShowMore = function(jid) {
723
     return VideoLayout.showMore(jid);
704
     return VideoLayout.showMore(jid);
724
 };
705
 };
725
 
706
 
726
-UI.showLoginPopup = function(callback)
727
-{
707
+UI.showLoginPopup = function(callback) {
728
     console.log('password is required');
708
     console.log('password is required');
729
     var message = '<h2 data-i18n="dialog.passwordRequired">';
709
     var message = '<h2 data-i18n="dialog.passwordRequired">';
730
     message += APP.translation.translateString(
710
     message += APP.translation.translateString(
748
         null, null, ':input:first'
728
         null, null, ':input:first'
749
 
729
 
750
     );
730
     );
751
-}
731
+};
752
 
732
 
753
 UI.checkForNicknameAndJoin = function () {
733
 UI.checkForNicknameAndJoin = function () {
754
 
734
 
813
  */
793
  */
814
 UI.setAudioMuted = function (mute, earlyMute) {
794
 UI.setAudioMuted = function (mute, earlyMute) {
815
     var audioMute = null;
795
     var audioMute = null;
816
-    if(earlyMute)
796
+    if (earlyMute)
817
         audioMute = function (mute, cb) {
797
         audioMute = function (mute, cb) {
818
             return APP.xmpp.sendAudioInfoPresence(mute, cb);
798
             return APP.xmpp.sendAudioInfoPresence(mute, cb);
819
         };
799
         };
820
     else
800
     else
821
         audioMute = function (mute, cb) {
801
         audioMute = function (mute, cb) {
822
             return APP.xmpp.setAudioMute(mute, cb);
802
             return APP.xmpp.setAudioMute(mute, cb);
823
-        }
824
-    if(!audioMute(mute, function () {
825
-        VideoLayout.showLocalAudioIndicator(mute);
803
+        };
804
+    if (!audioMute(mute, function () {
805
+            VideoLayout.showLocalAudioIndicator(mute);
826
 
806
 
827
-        UIUtil.buttonClick("#mute", "icon-microphone icon-mic-disabled");
828
-    }))
829
-    {
807
+            UIUtil.buttonClick("#mute", "icon-microphone icon-mic-disabled");
808
+        })) {
830
         // We still click the button.
809
         // We still click the button.
831
         UIUtil.buttonClick("#mute", "icon-microphone icon-mic-disabled");
810
         UIUtil.buttonClick("#mute", "icon-microphone icon-mic-disabled");
832
         return;
811
         return;
833
     }
812
     }
834
-
835
-}
813
+};
836
 
814
 
837
 UI.addListener = function (type, listener) {
815
 UI.addListener = function (type, listener) {
838
     eventEmitter.on(type, listener);
816
     eventEmitter.on(type, listener);
839
-}
817
+};
840
 
818
 
841
 UI.clickOnVideo = function (videoNumber) {
819
 UI.clickOnVideo = function (videoNumber) {
842
     var remoteVideos = $(".videocontainer:not(#mixedstream)");
820
     var remoteVideos = $(".videocontainer:not(#mixedstream)");
843
     if (remoteVideos.length > videoNumber) {
821
     if (remoteVideos.length > videoNumber) {
844
         remoteVideos[videoNumber].click();
822
         remoteVideos[videoNumber].click();
845
     }
823
     }
846
-}
824
+};
847
 
825
 
848
 //Used by torture
826
 //Used by torture
849
 UI.showToolbar = function () {
827
 UI.showToolbar = function () {
850
     return ToolbarToggler.showToolbar();
828
     return ToolbarToggler.showToolbar();
851
-}
829
+};
852
 
830
 
853
 //Used by torture
831
 //Used by torture
854
 UI.dockToolbar = function (isDock) {
832
 UI.dockToolbar = function (isDock) {
855
     return ToolbarToggler.dockToolbar(isDock);
833
     return ToolbarToggler.dockToolbar(isDock);
856
-}
834
+};
857
 
835
 
858
 UI.setVideoMuteButtonsState = function (mute) {
836
 UI.setVideoMuteButtonsState = function (mute) {
859
     var video = $('#video');
837
     var video = $('#video');
867
         video.removeClass(muteClass);
845
         video.removeClass(muteClass);
868
         video.addClass(communicativeClass);
846
         video.addClass(communicativeClass);
869
     }
847
     }
870
-}
848
+};
871
 
849
 
872
 UI.userAvatarChanged = function (resourceJid, thumbUrl, contactListUrl) {
850
 UI.userAvatarChanged = function (resourceJid, thumbUrl, contactListUrl) {
873
     VideoLayout.userAvatarChanged(resourceJid, thumbUrl);
851
     VideoLayout.userAvatarChanged(resourceJid, thumbUrl);
874
     ContactList.userAvatarChanged(resourceJid, contactListUrl);
852
     ContactList.userAvatarChanged(resourceJid, contactListUrl);
875
     if(resourceJid === APP.xmpp.myResource())
853
     if(resourceJid === APP.xmpp.myResource())
876
         SettingsMenu.changeAvatar(thumbUrl);
854
         SettingsMenu.changeAvatar(thumbUrl);
877
-}
855
+};
878
 
856
 
879
 UI.setVideoMute = setVideoMute;
857
 UI.setVideoMute = setVideoMute;
880
 
858
 

+ 18
- 19
modules/UI/audio_levels/AudioLevels.js View File

1
+/* global APP, interfaceConfig, $, Strophe */
1
 var CanvasUtil = require("./CanvasUtils");
2
 var CanvasUtil = require("./CanvasUtils");
2
 
3
 
3
 var ASDrawContext = null;
4
 var ASDrawContext = null;
6
     var ASRadius = interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE / 2;
7
     var ASRadius = interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE / 2;
7
     var ASCenter = (interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE + ASRadius) / 2;
8
     var ASCenter = (interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE + ASRadius) / 2;
8
 
9
 
9
-// Draw a circle.
10
+    // Draw a circle.
10
     ASDrawContext.arc(ASCenter, ASCenter, ASRadius, 0, 2 * Math.PI);
11
     ASDrawContext.arc(ASCenter, ASCenter, ASRadius, 0, 2 * Math.PI);
11
 
12
 
12
-// Add a shadow around the circle
13
+    // Add a shadow around the circle
13
     ASDrawContext.shadowColor = interfaceConfig.SHADOW_COLOR;
14
     ASDrawContext.shadowColor = interfaceConfig.SHADOW_COLOR;
14
     ASDrawContext.shadowOffsetX = 0;
15
     ASDrawContext.shadowOffsetX = 0;
15
     ASDrawContext.shadowOffsetY = 0;
16
     ASDrawContext.shadowOffsetY = 0;
26
     my.init = function () {
27
     my.init = function () {
27
         ASDrawContext = $('#activeSpeakerAudioLevel')[0].getContext('2d');
28
         ASDrawContext = $('#activeSpeakerAudioLevel')[0].getContext('2d');
28
         initActiveSpeakerAudioLevels();
29
         initActiveSpeakerAudioLevels();
29
-    }
30
+    };
30
 
31
 
31
     /**
32
     /**
32
      * Updates the audio level canvas for the given peerJid. If the canvas
33
      * Updates the audio level canvas for the given peerJid. If the canvas
113
             resourceJid = APP.xmpp.myResource();
114
             resourceJid = APP.xmpp.myResource();
114
         }
115
         }
115
 
116
 
116
-        if(resourceJid  === largeVideoResourceJid) {
117
+        if(resourceJid === largeVideoResourceJid) {
117
             window.requestAnimationFrame(function () {
118
             window.requestAnimationFrame(function () {
118
                 AudioLevels.updateActiveSpeakerAudioLevel(audioLevel);
119
                 AudioLevels.updateActiveSpeakerAudioLevel(audioLevel);
119
             });
120
             });
124
         if($("#activeSpeaker").css("visibility") == "hidden" || ASDrawContext === null)
125
         if($("#activeSpeaker").css("visibility") == "hidden" || ASDrawContext === null)
125
             return;
126
             return;
126
 
127
 
127
-
128
         ASDrawContext.clearRect(0, 0, 300, 300);
128
         ASDrawContext.clearRect(0, 0, 300, 300);
129
         if(audioLevel == 0)
129
         if(audioLevel == 0)
130
             return;
130
             return;
166
              * error. Since audio levels are frequently updated, the errors have
166
              * error. Since audio levels are frequently updated, the errors have
167
              * been observed to pile into the console, strain the CPU.
167
              * been observed to pile into the console, strain the CPU.
168
              */
168
              */
169
-            if (audioLevelCanvasOrig)
170
-            {
171
-                audioLevelCanvasCache[resourceJid]
172
-                    = CanvasUtil.cloneCanvas(audioLevelCanvasOrig);
169
+            if (audioLevelCanvasOrig) {
170
+                audioLevelCanvasCache[resourceJid] =
171
+                    CanvasUtil.cloneCanvas(audioLevelCanvasOrig);
173
             }
172
             }
174
         }
173
         }
175
 
174
 
184
 
183
 
185
         var shadowLevel = getShadowLevel(audioLevel);
184
         var shadowLevel = getShadowLevel(audioLevel);
186
 
185
 
187
-        if (shadowLevel > 0)
186
+        if (shadowLevel > 0) {
188
             // drawContext, x, y, w, h, r, shadowColor, shadowLevel
187
             // drawContext, x, y, w, h, r, shadowColor, shadowLevel
189
-            CanvasUtil.drawRoundRectGlow(   drawContext,
190
-                interfaceConfig.CANVAS_EXTRA/2, interfaceConfig.CANVAS_EXTRA/2,
188
+            CanvasUtil.drawRoundRectGlow(drawContext,
189
+                interfaceConfig.CANVAS_EXTRA / 2, interfaceConfig.CANVAS_EXTRA / 2,
191
                 canvas.width - interfaceConfig.CANVAS_EXTRA,
190
                 canvas.width - interfaceConfig.CANVAS_EXTRA,
192
                 canvas.height - interfaceConfig.CANVAS_EXTRA,
191
                 canvas.height - interfaceConfig.CANVAS_EXTRA,
193
                 interfaceConfig.CANVAS_RADIUS,
192
                 interfaceConfig.CANVAS_RADIUS,
194
                 interfaceConfig.SHADOW_COLOR,
193
                 interfaceConfig.SHADOW_COLOR,
195
                 shadowLevel);
194
                 shadowLevel);
195
+        }
196
     }
196
     }
197
 
197
 
198
     /**
198
     /**
222
      */
222
      */
223
     function getVideoSpanId(resourceJid) {
223
     function getVideoSpanId(resourceJid) {
224
         var videoSpanId = null;
224
         var videoSpanId = null;
225
-        if (resourceJid === AudioLevels.LOCAL_LEVEL
226
-                || (APP.xmpp.myResource() && resourceJid
227
-                    === APP.xmpp.myResource()))
225
+        if (resourceJid === AudioLevels.LOCAL_LEVEL ||
226
+            (APP.xmpp.myResource() && resourceJid === APP.xmpp.myResource()))
228
             videoSpanId = 'localVideoContainer';
227
             videoSpanId = 'localVideoContainer';
229
         else
228
         else
230
             videoSpanId = 'participant_' + resourceJid;
229
             videoSpanId = 'participant_' + resourceJid;
252
 
251
 
253
         if (resized)
252
         if (resized)
254
             Object.keys(audioLevelCanvasCache).forEach(function (resourceJid) {
253
             Object.keys(audioLevelCanvasCache).forEach(function (resourceJid) {
255
-                audioLevelCanvasCache[resourceJid].width
256
-                    = width + interfaceConfig.CANVAS_EXTRA;
257
-                audioLevelCanvasCache[resourceJid].height
258
-                    = height + interfaceConfig.CANVAS_EXTRA;
254
+                audioLevelCanvasCache[resourceJid].width =
255
+                    width + interfaceConfig.CANVAS_EXTRA;
256
+                audioLevelCanvasCache[resourceJid].height =
257
+                    height + interfaceConfig.CANVAS_EXTRA;
259
             });
258
             });
260
     });
259
     });
261
 
260
 

+ 1
- 0
modules/UI/side_pannels/SidePanelToggler.js View File

1
+/* global require, $ */
1
 var Chat = require("./chat/Chat");
2
 var Chat = require("./chat/Chat");
2
 var ContactList = require("./contactlist/ContactList");
3
 var ContactList = require("./contactlist/ContactList");
3
 var Settings = require("./../../settings/Settings");
4
 var Settings = require("./../../settings/Settings");

+ 15
- 22
modules/UI/side_pannels/chat/Chat.js View File

1
-/* global $, Util, nickname:true */
1
+/* global APP, $, Util, nickname:true */
2
 var Replacement = require("./Replacement");
2
 var Replacement = require("./Replacement");
3
 var CommandsProcessor = require("./Commands");
3
 var CommandsProcessor = require("./Commands");
4
 var ToolbarToggler = require("../../toolbars/ToolbarToggler");
4
 var ToolbarToggler = require("../../toolbars/ToolbarToggler");
102
     return hour+':'+minute+':'+second;
102
     return hour+':'+minute+':'+second;
103
 }
103
 }
104
 
104
 
105
-function toggleSmileys()
106
-{
105
+function toggleSmileys() {
107
     var smileys = $('#smileysContainer');
106
     var smileys = $('#smileysContainer');
108
     if(!smileys.is(':visible')) {
107
     if(!smileys.is(':visible')) {
109
         smileys.show("slide", { direction: "down", duration: 300});
108
         smileys.show("slide", { direction: "down", duration: 300});
191
             }
190
             }
192
         });
191
         });
193
 
192
 
194
-        $('#usermsg').keydown(function (event) {
193
+        var usermsg = $('#usermsg');
194
+        usermsg.keydown(function (event) {
195
             if (event.keyCode === 13) {
195
             if (event.keyCode === 13) {
196
                 event.preventDefault();
196
                 event.preventDefault();
197
                 var value = this.value;
197
                 var value = this.value;
198
-                $('#usermsg').val('').trigger('autosize.resize');
198
+                usermsg.val('').trigger('autosize.resize');
199
                 this.focus();
199
                 this.focus();
200
                 var command = new CommandsProcessor(value);
200
                 var command = new CommandsProcessor(value);
201
-                if(command.isCommand())
202
-                {
201
+                if(command.isCommand()) {
203
                     command.processCommand();
202
                     command.processCommand();
204
                 }
203
                 }
205
-                else
206
-                {
204
+                else {
207
                     var message = UIUtil.escapeHtml(value);
205
                     var message = UIUtil.escapeHtml(value);
208
                     APP.xmpp.sendChatMessage(message, NicknameHandler.getNickname());
206
                     APP.xmpp.sendChatMessage(message, NicknameHandler.getNickname());
209
                 }
207
                 }
214
             resizeChatConversation();
212
             resizeChatConversation();
215
             Chat.scrollChatToBottom();
213
             Chat.scrollChatToBottom();
216
         };
214
         };
217
-        $('#usermsg').autosize({callback: onTextAreaResize});
215
+        usermsg.autosize({callback: onTextAreaResize});
218
 
216
 
219
         $("#chatspace").bind("shown",
217
         $("#chatspace").bind("shown",
220
             function () {
218
             function () {
228
     /**
226
     /**
229
      * Appends the given message to the chat conversation.
227
      * Appends the given message to the chat conversation.
230
      */
228
      */
231
-    my.updateChatConversation = function (from, displayName, message, myjid, stamp) {
229
+    my.updateChatConversation =
230
+        function (from, displayName, message, myjid, stamp) {
232
         var divClassName = '';
231
         var divClassName = '';
233
 
232
 
234
         if (APP.xmpp.myJid() === from) {
233
         if (APP.xmpp.myJid() === from) {
270
      * @param errorMessage the received error message.
269
      * @param errorMessage the received error message.
271
      * @param originalText the original message.
270
      * @param originalText the original message.
272
      */
271
      */
273
-    my.chatAddError = function(errorMessage, originalText)
274
-    {
272
+    my.chatAddError = function(errorMessage, originalText) {
275
         errorMessage = UIUtil.escapeHtml(errorMessage);
273
         errorMessage = UIUtil.escapeHtml(errorMessage);
276
         originalText = UIUtil.escapeHtml(originalText);
274
         originalText = UIUtil.escapeHtml(originalText);
277
 
275
 
288
      * Sets the subject to the UI
286
      * Sets the subject to the UI
289
      * @param subject the subject
287
      * @param subject the subject
290
      */
288
      */
291
-    my.chatSetSubject = function(subject)
292
-    {
293
-        if(subject)
289
+    my.chatSetSubject = function(subject) {
290
+        if (subject)
294
             subject = subject.trim();
291
             subject = subject.trim();
295
         $('#subject').html(Replacement.linkify(UIUtil.escapeHtml(subject)));
292
         $('#subject').html(Replacement.linkify(UIUtil.escapeHtml(subject)));
296
-        if(subject === "")
297
-        {
293
+        if(subject === "") {
298
             $("#subject").css({display: "none"});
294
             $("#subject").css({display: "none"});
299
         }
295
         }
300
-        else
301
-        {
296
+        else {
302
             $("#subject").css({display: "block"});
297
             $("#subject").css({display: "block"});
303
         }
298
         }
304
     };
299
     };
305
 
300
 
306
-
307
-
308
     /**
301
     /**
309
      * Sets the chat conversation mode.
302
      * Sets the chat conversation mode.
310
      */
303
      */

+ 13
- 24
modules/UI/side_pannels/chat/Commands.js View File

1
+/* global APP, require */
1
 var UIUtil = require("../../util/UIUtil");
2
 var UIUtil = require("../../util/UIUtil");
2
 
3
 
3
 /**
4
 /**
14
  * @param message the received message
15
  * @param message the received message
15
  * @returns {string} the command
16
  * @returns {string} the command
16
  */
17
  */
17
-function getCommand(message)
18
-{
19
-    if(message)
20
-    {
21
-        for(var command in commands)
22
-        {
18
+function getCommand(message) {
19
+    if(message) {
20
+        for(var command in commands) {
23
             if(message.indexOf("/" + command) == 0)
21
             if(message.indexOf("/" + command) == 0)
24
                 return command;
22
                 return command;
25
         }
23
         }
26
     }
24
     }
27
     return "";
25
     return "";
28
-};
26
+}
29
 
27
 
30
 /**
28
 /**
31
  * Processes the data for topic command.
29
  * Processes the data for topic command.
32
  * @param commandArguments the arguments of the topic command.
30
  * @param commandArguments the arguments of the topic command.
33
  */
31
  */
34
-function processTopic(commandArguments)
35
-{
32
+function processTopic(commandArguments) {
36
     var topic = UIUtil.escapeHtml(commandArguments);
33
     var topic = UIUtil.escapeHtml(commandArguments);
37
     APP.xmpp.setSubject(topic);
34
     APP.xmpp.setSubject(topic);
38
 }
35
 }
39
 
36
 
40
 /**
37
 /**
41
- * Constructs new CommandProccessor instance from a message that
38
+ * Constructs a new CommandProccessor instance from a message that
42
  * handles commands received via chat messages.
39
  * handles commands received via chat messages.
43
  * @param message the message
40
  * @param message the message
44
  * @constructor
41
  * @constructor
45
  */
42
  */
46
-function CommandsProcessor(message)
47
-{
48
-
49
-
43
+function CommandsProcessor(message) {
50
     var command = getCommand(message);
44
     var command = getCommand(message);
51
 
45
 
52
     /**
46
     /**
53
      * Returns the name of the command.
47
      * Returns the name of the command.
54
      * @returns {String} the command
48
      * @returns {String} the command
55
      */
49
      */
56
-    this.getCommand = function()
57
-    {
50
+    this.getCommand = function() {
58
         return command;
51
         return command;
59
     };
52
     };
60
 
53
 
65
      * Returns the arguments of the command.
58
      * Returns the arguments of the command.
66
      * @returns {string}
59
      * @returns {string}
67
      */
60
      */
68
-    this.getArgument = function()
69
-    {
61
+    this.getArgument = function() {
70
         return messageArgument;
62
         return messageArgument;
71
     };
63
     };
72
 }
64
 }
75
  * Checks whether this instance is valid command or not.
67
  * Checks whether this instance is valid command or not.
76
  * @returns {boolean}
68
  * @returns {boolean}
77
  */
69
  */
78
-CommandsProcessor.prototype.isCommand = function()
79
-{
80
-    if(this.getCommand())
70
+CommandsProcessor.prototype.isCommand = function() {
71
+    if (this.getCommand())
81
         return true;
72
         return true;
82
     return false;
73
     return false;
83
 };
74
 };
85
 /**
76
 /**
86
  * Processes the command.
77
  * Processes the command.
87
  */
78
  */
88
-CommandsProcessor.prototype.processCommand = function()
89
-{
79
+CommandsProcessor.prototype.processCommand = function() {
90
     if(!this.isCommand())
80
     if(!this.isCommand())
91
         return;
81
         return;
92
 
82
 
93
     commands[this.getCommand()](this.getArgument());
83
     commands[this.getCommand()](this.getArgument());
94
-
95
 };
84
 };
96
 
85
 
97
 module.exports = CommandsProcessor;
86
 module.exports = CommandsProcessor;

+ 3
- 5
modules/UI/side_pannels/contactlist/ContactList.js View File

1
-
1
+/* global $, APP, Strophe */
2
 var Avatar = require('../../avatar/Avatar');
2
 var Avatar = require('../../avatar/Avatar');
3
 
3
 
4
 var numberOfContacts = 0;
4
 var numberOfContacts = 0;
27
 /**
27
 /**
28
  * Creates the avatar element.
28
  * Creates the avatar element.
29
  *
29
  *
30
- * @return the newly created avatar element
30
+ * @return {object} the newly created avatar element
31
  */
31
  */
32
 function createAvatar(jid) {
32
 function createAvatar(jid) {
33
     var avatar = document.createElement('img');
33
     var avatar = document.createElement('img');
46
     var p = document.createElement('p');
46
     var p = document.createElement('p');
47
     if(displayName)
47
     if(displayName)
48
         p.innerText = displayName;
48
         p.innerText = displayName;
49
-    else if(key)
50
-    {
49
+    else if(key) {
51
         p.setAttribute("data-i18n",key);
50
         p.setAttribute("data-i18n",key);
52
         p.innerText = APP.translation.translateString(key);
51
         p.innerText = APP.translation.translateString(key);
53
     }
52
     }
65
     }
64
     }
66
 }
65
 }
67
 
66
 
68
-
69
 /**
67
 /**
70
  * Contact list.
68
  * Contact list.
71
  */
69
  */

+ 11
- 15
modules/UI/side_pannels/settings/SettingsMenu.js View File

1
+/* global APP, $ */
1
 var Avatar = require("../../avatar/Avatar");
2
 var Avatar = require("../../avatar/Avatar");
2
 var Settings = require("./../../../settings/Settings");
3
 var Settings = require("./../../../settings/Settings");
3
 var UIUtil = require("../../util/UIUtil");
4
 var UIUtil = require("../../util/UIUtil");
4
 var languages = require("../../../../service/translation/languages");
5
 var languages = require("../../../../service/translation/languages");
5
 
6
 
6
-function generateLanguagesSelectBox()
7
-{
7
+function generateLanguagesSelectBox() {
8
     var currentLang = APP.translation.getCurrentLanguage();
8
     var currentLang = APP.translation.getCurrentLanguage();
9
     var html = "<select id=\"languages_selectbox\">";
9
     var html = "<select id=\"languages_selectbox\">";
10
     var langArray = languages.getLanguages();
10
     var langArray = languages.getLanguages();
11
-    for(var i = 0; i < langArray.length; i++)
12
-    {
11
+    for(var i = 0; i < langArray.length; i++) {
13
         var lang = langArray[i];
12
         var lang = langArray[i];
14
         html += "<option ";
13
         html += "<option ";
15
         if(lang === currentLang)
14
         if(lang === currentLang)
26
 var SettingsMenu = {
25
 var SettingsMenu = {
27
 
26
 
28
     init: function () {
27
     init: function () {
29
-        $("#startMutedOptions").before(generateLanguagesSelectBox());
28
+        var startMutedSelector = $("#startMutedOptions");
29
+        startMutedSelector.before(generateLanguagesSelectBox());
30
         APP.translation.translateElement($("#languages_selectbox"));
30
         APP.translation.translateElement($("#languages_selectbox"));
31
         $('#settingsmenu>input').keyup(function(event){
31
         $('#settingsmenu>input').keyup(function(event){
32
             if(event.keyCode === 13) {//enter
32
             if(event.keyCode === 13) {//enter
34
             }
34
             }
35
         });
35
         });
36
 
36
 
37
-        if(APP.xmpp.isModerator())
38
-        {
39
-            $("#startMutedOptions").css("display", "block");
37
+        if (APP.xmpp.isModerator()) {
38
+            startMutedSelector.css("display", "block");
40
         }
39
         }
41
-        else
42
-        {
43
-            $("#startMutedOptions").css("display", "none");
40
+        else {
41
+            startMutedSelector.css("display", "none");
44
         }
42
         }
45
 
43
 
46
         $("#updateSettings").click(function () {
44
         $("#updateSettings").click(function () {
49
     },
47
     },
50
 
48
 
51
     onRoleChanged: function () {
49
     onRoleChanged: function () {
52
-        if(APP.xmpp.isModerator())
53
-        {
50
+        if(APP.xmpp.isModerator()) {
54
             $("#startMutedOptions").css("display", "block");
51
             $("#startMutedOptions").css("display", "block");
55
         }
52
         }
56
-        else
57
-        {
53
+        else {
58
             $("#startMutedOptions").css("display", "none");
54
             $("#startMutedOptions").css("display", "none");
59
         }
55
         }
60
     },
56
     },

+ 1
- 0
modules/UI/toolbars/BottomToolbar.js View File

1
+/* global $ */
1
 var PanelToggler = require("../side_pannels/SidePanelToggler");
2
 var PanelToggler = require("../side_pannels/SidePanelToggler");
2
 
3
 
3
 var buttonHandlers = {
4
 var buttonHandlers = {

+ 17
- 30
modules/UI/toolbars/Toolbar.js View File

1
-/* global APP,$, buttonClick, config, lockRoom,
2
-   setSharedKey, Util */
1
+/* global APP, $, buttonClick, config, lockRoom, interfaceConfig, setSharedKey,
2
+ Util */
3
 var messageHandler = require("../util/MessageHandler");
3
 var messageHandler = require("../util/MessageHandler");
4
 var BottomToolbar = require("./BottomToolbar");
4
 var BottomToolbar = require("./BottomToolbar");
5
 var Prezi = require("../prezi/Prezi");
5
 var Prezi = require("../prezi/Prezi");
14
 var sharedKey = '';
14
 var sharedKey = '';
15
 var UI = null;
15
 var UI = null;
16
 
16
 
17
-var buttonHandlers =
18
-{
17
+var buttonHandlers = {
19
     "toolbar_button_mute": function () {
18
     "toolbar_button_mute": function () {
20
         return APP.UI.toggleAudio();
19
         return APP.UI.toggleAudio();
21
     },
20
     },
46
     "toolbar_button_desktopsharing": function () {
45
     "toolbar_button_desktopsharing": function () {
47
         return APP.desktopsharing.toggleScreenSharing();
46
         return APP.desktopsharing.toggleScreenSharing();
48
     },
47
     },
49
-    "toolbar_button_fullScreen": function()
50
-    {
48
+    "toolbar_button_fullScreen": function() {
51
         UIUtil.buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen");
49
         UIUtil.buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen");
52
         return Toolbar.toggleFullScreen();
50
         return Toolbar.toggleFullScreen();
53
     },
51
     },
91
 
89
 
92
 function hangup() {
90
 function hangup() {
93
     APP.xmpp.disposeConference();
91
     APP.xmpp.disposeConference();
94
-    if(config.enableWelcomePage)
95
-    {
96
-        setTimeout(function()
97
-        {
92
+    if(config.enableWelcomePage) {
93
+        setTimeout(function() {
98
             window.localStorage.welcomePageDisabled = false;
94
             window.localStorage.welcomePageDisabled = false;
99
             window.location.pathname = "/";
95
             window.location.pathname = "/";
100
         }, 10000);
96
         }, 10000);
115
         msg,
111
         msg,
116
         true,
112
         true,
117
         buttons,
113
         buttons,
118
-        function(event, value, message, formVals)
119
-        {
114
+        function(event, value, message, formVals) {
120
             window.location.reload();
115
             window.location.reload();
121
             return false;
116
             return false;
122
         }
117
         }
165
 
160
 
166
     APP.xmpp.lockRoom(currentSharedKey, function (res) {
161
     APP.xmpp.lockRoom(currentSharedKey, function (res) {
167
         // password is required
162
         // password is required
168
-        if (sharedKey)
169
-        {
163
+        if (sharedKey) {
170
             console.log('set room password');
164
             console.log('set room password');
171
             Toolbar.lockLockButton();
165
             Toolbar.lockLockButton();
172
         }
166
         }
173
-        else
174
-        {
167
+        else {
175
             console.log('removed room password');
168
             console.log('removed room password');
176
             Toolbar.unlockLockButton();
169
             Toolbar.unlockLockButton();
177
         }
170
         }
186
             "dialog.passwordNotSupported");
179
             "dialog.passwordNotSupported");
187
         Toolbar.setSharedKey('');
180
         Toolbar.setSharedKey('');
188
     });
181
     });
189
-};
182
+}
190
 
183
 
191
 /**
184
 /**
192
  * Invite participants to conference.
185
  * Invite participants to conference.
224
     window.open("mailto:?subject=" + subject + "&body=" + body, '_blank');
217
     window.open("mailto:?subject=" + subject + "&body=" + body, '_blank');
225
 }
218
 }
226
 
219
 
227
-function dialpadButtonClicked()
228
-{
229
-    //TODO show the dialpad window
220
+function dialpadButtonClicked() {
221
+    //TODO show the dialpad box
230
 }
222
 }
231
 
223
 
232
-function callSipButtonClicked()
233
-{
224
+function callSipButtonClicked() {
234
     var defaultNumber
225
     var defaultNumber
235
         = config.defaultSipNumber ? config.defaultSipNumber : '';
226
         = config.defaultSipNumber ? config.defaultSipNumber : '';
236
 
227
 
281
                 }
272
                 }
282
             }
273
             }
283
         );
274
         );
284
-    },
275
+    };
285
 
276
 
286
     /**
277
     /**
287
      * Sets shared key
278
      * Sets shared key
342
      * Disables and enables some of the buttons.
333
      * Disables and enables some of the buttons.
343
      */
334
      */
344
     my.setupButtonsFromConfig = function () {
335
     my.setupButtonsFromConfig = function () {
345
-        if (config.disablePrezi)
346
-        {
336
+        if (config.disablePrezi) {
347
             $("#prezi_button").css({display: "none"});
337
             $("#prezi_button").css({display: "none"});
348
         }
338
         }
349
     };
339
     };
632
      */
622
      */
633
     my.changeDesktopSharingButtonState = function (active) {
623
     my.changeDesktopSharingButtonState = function (active) {
634
         var button = $("#desktopsharing > a");
624
         var button = $("#desktopsharing > a");
635
-        if (active)
636
-        {
625
+        if (active) {
637
             button.addClass("glow");
626
             button.addClass("glow");
638
-        }
639
-        else
640
-        {
627
+        } else {
641
             button.removeClass("glow");
628
             button.removeClass("glow");
642
         }
629
         }
643
     };
630
     };

+ 2
- 3
modules/UI/toolbars/ToolbarToggler.js View File

1
-/* global $, interfaceConfig, Moderator, DesktopStreaming.showDesktopSharingButton */
1
+/* global APP, config, $, interfaceConfig, Moderator,
2
+ DesktopStreaming.showDesktopSharingButton */
2
 
3
 
3
 var toolbarTimeoutObject,
4
 var toolbarTimeoutObject,
4
     toolbarTimeout = interfaceConfig.INITIAL_TOOLBAR_TIMEOUT;
5
     toolbarTimeout = interfaceConfig.INITIAL_TOOLBAR_TIMEOUT;
81
         showDesktopSharingButton();
82
         showDesktopSharingButton();
82
     },
83
     },
83
 
84
 
84
-
85
     /**
85
     /**
86
      * Docks/undocks the toolbar.
86
      * Docks/undocks the toolbar.
87
      *
87
      *
111
     },
111
     },
112
 
112
 
113
     showDesktopSharingButton: showDesktopSharingButton
113
     showDesktopSharingButton: showDesktopSharingButton
114
-
115
 };
114
 };
116
 
115
 
117
 module.exports = ToolbarToggler;
116
 module.exports = ToolbarToggler;

+ 12
- 11
modules/UI/util/JitsiPopover.js View File

1
+/* global $ */
1
 var JitsiPopover = (function () {
2
 var JitsiPopover = (function () {
2
     /**
3
     /**
3
      * Constructs new JitsiPopover and attaches it to the element
4
      * Constructs new JitsiPopover and attaches it to the element
47
     JitsiPopover.prototype.show = function () {
48
     JitsiPopover.prototype.show = function () {
48
         this.createPopover();
49
         this.createPopover();
49
         this.popoverShown = true;
50
         this.popoverShown = true;
50
-
51
     };
51
     };
52
 
52
 
53
     /**
53
     /**
54
      * Hides the popover
54
      * Hides the popover
55
      */
55
      */
56
     JitsiPopover.prototype.hide = function () {
56
     JitsiPopover.prototype.hide = function () {
57
-        if(!this.elementIsHovered && !this.popoverIsHovered && this.popoverShown)
58
-        {
57
+        if(!this.elementIsHovered && !this.popoverIsHovered &&
58
+            this.popoverShown) {
59
             this.forceHide();
59
             this.forceHide();
60
         }
60
         }
61
     };
61
     };
62
 
62
 
63
     /**
63
     /**
64
-     * Hides the popover
64
+     * Hides the popover.
65
      */
65
      */
66
     JitsiPopover.prototype.forceHide = function () {
66
     JitsiPopover.prototype.forceHide = function () {
67
         $(".jitsipopover").remove();
67
         $(".jitsipopover").remove();
69
     };
69
     };
70
 
70
 
71
     /**
71
     /**
72
-     * Creates the popover html
72
+     * Creates the popover html.
73
      */
73
      */
74
     JitsiPopover.prototype.createPopover = function () {
74
     JitsiPopover.prototype.createPopover = function () {
75
         $("body").append(this.template);
75
         $("body").append(this.template);
86
     };
86
     };
87
 
87
 
88
     /**
88
     /**
89
-     * Refreshes the position of the popover
89
+     * Refreshes the position of the popover.
90
      */
90
      */
91
     JitsiPopover.prototype.refreshPosition = function () {
91
     JitsiPopover.prototype.refreshPosition = function () {
92
         $(".jitsipopover").position({
92
         $(".jitsipopover").position({
95
             collision: "fit",
95
             collision: "fit",
96
             of: this.element,
96
             of: this.element,
97
             using: function (position, elements) {
97
             using: function (position, elements) {
98
-                var calcLeft = elements.target.left - elements.element.left + elements.target.width/2;
99
-                $(".jitsipopover").css({top: position.top, left: position.left, display: "table"});
98
+                var calcLeft = elements.target.left - elements.element.left +
99
+                    elements.target.width/2;
100
+                $(".jitsipopover").css(
101
+                    {top: position.top, left: position.left, display: "table"});
100
                 $(".jitsipopover > .arrow").css({left: calcLeft});
102
                 $(".jitsipopover > .arrow").css({left: calcLeft});
101
-                $(".jitsipopover > .jitsiPopupmenuPadding").css({left: calcLeft - 50});
103
+                $(".jitsipopover > .jitsiPopupmenuPadding").css(
104
+                    {left: calcLeft - 50});
102
             }
105
             }
103
         });
106
         });
104
     };
107
     };
116
     };
119
     };
117
 
120
 
118
     return JitsiPopover;
121
     return JitsiPopover;
119
-
120
-
121
 })();
122
 })();
122
 
123
 
123
 module.exports = JitsiPopover;
124
 module.exports = JitsiPopover;

+ 29
- 34
modules/UI/util/MessageHandler.js View File

4
     /**
4
     /**
5
      * Shows a message to the user.
5
      * Shows a message to the user.
6
      *
6
      *
7
-     * @param titleString the title of the message
8
-     * @param messageString the text of the message
7
+     * @param titleKey the title of the message
8
+     * @param messageKey the text of the message
9
      */
9
      */
10
     my.openMessageDialog = function(titleKey, messageKey) {
10
     my.openMessageDialog = function(titleKey, messageKey) {
11
         var title = null;
11
         var title = null;
12
-        if(titleKey)
13
-        {
12
+        if(titleKey) {
14
             title = APP.translation.generateTranslationHTML(titleKey);
13
             title = APP.translation.generateTranslationHTML(titleKey);
15
         }
14
         }
16
         var message = APP.translation.generateTranslationHTML(messageKey);
15
         var message = APP.translation.generateTranslationHTML(messageKey);
17
         $.prompt(message,
16
         $.prompt(message,
18
-            {
19
-                title: title,
20
-                persistent: false
21
-            }
17
+            {title: title, persistent: false}
22
         );
18
         );
23
     };
19
     };
24
 
20
 
25
     /**
21
     /**
26
-     * Shows a message to the user with two buttons: first is given as a parameter and the second is Cancel.
22
+     * Shows a message to the user with two buttons: first is given as a
23
+     * parameter and the second is Cancel.
27
      *
24
      *
28
      * @param titleString the title of the message
25
      * @param titleString the title of the message
29
      * @param msgString the text of the message
26
      * @param msgString the text of the message
30
-     * @param persistent boolean value which determines whether the message is persistent or not
27
+     * @param persistent boolean value which determines whether the message is
28
+     *        persistent or not
31
      * @param leftButton the fist button's text
29
      * @param leftButton the fist button's text
32
      * @param submitFunction function to be called on submit
30
      * @param submitFunction function to be called on submit
33
-     * @param loadedFunction function to be called after the prompt is fully loaded
31
+     * @param loadedFunction function to be called after the prompt is fully
32
+     *        loaded
34
      * @param closeFunction function to be called after the prompt is closed
33
      * @param closeFunction function to be called after the prompt is closed
35
      * @param focus optional focus selector or button index to be focused after
34
      * @param focus optional focus selector or button index to be focused after
36
      *        the dialog is opened
35
      *        the dialog is opened
39
      */
38
      */
40
     my.openTwoButtonDialog = function(titleKey, titleString, msgKey, msgString,
39
     my.openTwoButtonDialog = function(titleKey, titleString, msgKey, msgString,
41
         persistent, leftButtonKey, submitFunction, loadedFunction,
40
         persistent, leftButtonKey, submitFunction, loadedFunction,
42
-        closeFunction, focus, defaultButton)
43
-    {
41
+        closeFunction, focus, defaultButton) {
44
         var buttons = [];
42
         var buttons = [];
45
 
43
 
46
         var leftButton = APP.translation.generateTranslationHTML(leftButtonKey);
44
         var leftButton = APP.translation.generateTranslationHTML(leftButtonKey);
51
         buttons.push({title: cancelButton, value: false});
49
         buttons.push({title: cancelButton, value: false});
52
 
50
 
53
         var message = msgString, title = titleString;
51
         var message = msgString, title = titleString;
54
-        if (titleKey)
55
-        {
52
+        if (titleKey) {
56
             title = APP.translation.generateTranslationHTML(titleKey);
53
             title = APP.translation.generateTranslationHTML(titleKey);
57
         }
54
         }
58
         if (msgKey) {
55
         if (msgKey) {
75
      *
72
      *
76
      * @param titleString the title of the message
73
      * @param titleString the title of the message
77
      * @param msgString the text of the message
74
      * @param msgString the text of the message
78
-     * @param persistent boolean value which determines whether the message is persistent or not
79
-     * @param buttons object with the buttons. The keys must be the name of the button and value is the value
80
-     * that will be passed to submitFunction
75
+     * @param persistent boolean value which determines whether the message is
76
+     *        persistent or not
77
+     * @param buttons object with the buttons. The keys must be the name of the
78
+     *        button and value is the value that will be passed to
79
+     *        submitFunction
81
      * @param submitFunction function to be called on submit
80
      * @param submitFunction function to be called on submit
82
-     * @param loadedFunction function to be called after the prompt is fully loaded
81
+     * @param loadedFunction function to be called after the prompt is fully
82
+     *        loaded
83
      */
83
      */
84
     my.openDialog = function (titleString, msgString, persistent, buttons,
84
     my.openDialog = function (titleString, msgString, persistent, buttons,
85
                               submitFunction, loadedFunction) {
85
                               submitFunction, loadedFunction) {
107
     /**
107
     /**
108
      * Shows a dialog with different states to the user.
108
      * Shows a dialog with different states to the user.
109
      *
109
      *
110
-     * @param statesObject object containing all the states of the dialog
110
+     * @param statesObject object containing all the states of the dialog.
111
      */
111
      */
112
     my.openDialogWithStates = function (statesObject, options) {
112
     my.openDialogWithStates = function (statesObject, options) {
113
-
114
         return new Impromptu(statesObject, options);
113
         return new Impromptu(statesObject, options);
115
     };
114
     };
116
 
115
 
124
      * @param onPopupClosed optional callback function called when popup window
123
      * @param onPopupClosed optional callback function called when popup window
125
      *        has been closed.
124
      *        has been closed.
126
      *
125
      *
127
-     * @returns popup window object if opened successfully or undefined
126
+     * @returns {object} popup window object if opened successfully or undefined
128
      *          in case we failed to open it(popup blocked)
127
      *          in case we failed to open it(popup blocked)
129
      */
128
      */
130
     my.openCenteredPopup = function (url, w, h, onPopupClosed) {
129
     my.openCenteredPopup = function (url, w, h, onPopupClosed) {
147
     /**
146
     /**
148
      * Shows a dialog prompting the user to send an error report.
147
      * Shows a dialog prompting the user to send an error report.
149
      *
148
      *
150
-     * @param titleString the title of the message
151
-     * @param msgString the text of the message
149
+     * @param titleKey the title of the message
150
+     * @param msgKey the text of the message
152
      * @param error the error that is being reported
151
      * @param error the error that is being reported
153
      */
152
      */
154
     my.openReportDialog = function(titleKey, msgKey, error) {
153
     my.openReportDialog = function(titleKey, msgKey, error) {
159
 
158
 
160
     /**
159
     /**
161
      *  Shows an error dialog to the user.
160
      *  Shows an error dialog to the user.
162
-     * @param title the title of the message
163
-     * @param message the text of the messafe
161
+     * @param titleKey the title of the message.
162
+     * @param msgKey the text of the message.
164
      */
163
      */
165
     my.showError = function(titleKey, msgKey) {
164
     my.showError = function(titleKey, msgKey) {
166
 
165
 
167
-        if(!titleKey) {
166
+        if (!titleKey) {
168
             titleKey = "dialog.oops";
167
             titleKey = "dialog.oops";
169
         }
168
         }
170
-        if(!msgKey)
171
-        {
169
+        if (!msgKey) {
172
             msgKey = "dialog.defaultError";
170
             msgKey = "dialog.defaultError";
173
         }
171
         }
174
         messageHandler.openMessageDialog(titleKey, msgKey);
172
         messageHandler.openMessageDialog(titleKey, msgKey);
177
     my.notify = function(displayName, displayNameKey,
175
     my.notify = function(displayName, displayNameKey,
178
                          cls, messageKey, messageArguments, options) {
176
                          cls, messageKey, messageArguments, options) {
179
         var displayNameSpan = '<span class="nickname" ';
177
         var displayNameSpan = '<span class="nickname" ';
180
-        if(displayName)
181
-        {
178
+        if (displayName) {
182
             displayNameSpan += ">" + displayName;
179
             displayNameSpan += ">" + displayName;
183
-        }
184
-        else
185
-        {
180
+        } else {
186
             displayNameSpan += "data-i18n='" + displayNameKey +
181
             displayNameSpan += "data-i18n='" + displayNameKey +
187
                 "'>" + APP.translation.translateString(displayNameKey);
182
                 "'>" + APP.translation.translateString(displayNameKey);
188
         }
183
         }

+ 2
- 2
modules/UI/util/NicknameHandler.js View File

3
 var nickname = null;
3
 var nickname = null;
4
 var eventEmitter = null;
4
 var eventEmitter = null;
5
 
5
 
6
-var NickanameHandler = {
6
+var NicknameHandler = {
7
     init: function (emitter) {
7
     init: function (emitter) {
8
         eventEmitter = emitter;
8
         eventEmitter = emitter;
9
         var storedDisplayName = window.localStorage.displayname;
9
         var storedDisplayName = window.localStorage.displayname;
27
     }
27
     }
28
 };
28
 };
29
 
29
 
30
-module.exports = NickanameHandler;
30
+module.exports = NicknameHandler;

+ 2
- 3
modules/UI/util/UIUtil.js View File

1
+/* global $ */
1
 /**
2
 /**
2
  * Created by hristo on 12/22/14.
3
  * Created by hristo on 12/22/14.
3
  */
4
  */
61
 
62
 
62
         for (var i = 0, n = pixels.length; i < n; i += 4) {
63
         for (var i = 0, n = pixels.length; i < n; i += 4) {
63
             var grayscale
64
             var grayscale
64
-                = pixels[i] * .3 + pixels[i+1] * .59 + pixels[i+2] * .11;
65
+                = pixels[i] * 0.3 + pixels[i+1] * 0.59 + pixels[i+2] * 0.11;
65
             pixels[i  ] = grayscale;        // red
66
             pixels[i  ] = grayscale;        // red
66
             pixels[i+1] = grayscale;        // green
67
             pixels[i+1] = grayscale;        // green
67
             pixels[i+2] = grayscale;        // blue
68
             pixels[i+2] = grayscale;        // blue
78
         element.setAttribute("data-html", true);
79
         element.setAttribute("data-html", true);
79
         element.setAttribute("data-container", "body");
80
         element.setAttribute("data-container", "body");
80
     }
81
     }
81
-
82
-
83
 };
82
 };

+ 50
- 91
modules/UI/videolayout/ConnectionIndicator.js View File

1
+/* global APP, $ */
1
 var JitsiPopover = require("../util/JitsiPopover");
2
 var JitsiPopover = require("../util/JitsiPopover");
2
 
3
 
3
 /**
4
 /**
5
  * @param videoContainer the video container associated with the indicator.
6
  * @param videoContainer the video container associated with the indicator.
6
  * @constructor
7
  * @constructor
7
  */
8
  */
8
-function ConnectionIndicator(videoContainer, jid)
9
-{
9
+function ConnectionIndicator(videoContainer, jid) {
10
     this.videoContainer = videoContainer;
10
     this.videoContainer = videoContainer;
11
     this.bandwidth = null;
11
     this.bandwidth = null;
12
     this.packetLoss = null;
12
     this.packetLoss = null;
37
     0: "0px"//empty
37
     0: "0px"//empty
38
 };
38
 };
39
 
39
 
40
-ConnectionIndicator.getIP = function(value)
41
-{
40
+ConnectionIndicator.getIP = function(value) {
42
     return value.substring(0, value.lastIndexOf(":"));
41
     return value.substring(0, value.lastIndexOf(":"));
43
 };
42
 };
44
 
43
 
45
-ConnectionIndicator.getPort = function(value)
46
-{
44
+ConnectionIndicator.getPort = function(value) {
47
     return value.substring(value.lastIndexOf(":") + 1, value.length);
45
     return value.substring(value.lastIndexOf(":") + 1, value.length);
48
 };
46
 };
49
 
47
 
50
 ConnectionIndicator.getStringFromArray = function (array) {
48
 ConnectionIndicator.getStringFromArray = function (array) {
51
     var res = "";
49
     var res = "";
52
-    for(var i = 0; i < array.length; i++)
53
-    {
50
+    for(var i = 0; i < array.length; i++) {
54
         res += (i === 0? "" : ", ") + array[i];
51
         res += (i === 0? "" : ", ") + array[i];
55
     }
52
     }
56
     return res;
53
     return res;
65
 
62
 
66
     var translate = APP.translation.translateString;
63
     var translate = APP.translation.translateString;
67
 
64
 
68
-    if(this.bitrate === null)
69
-    {
65
+    if(this.bitrate === null) {
70
         downloadBitrate = "N/A";
66
         downloadBitrate = "N/A";
71
         uploadBitrate = "N/A";
67
         uploadBitrate = "N/A";
72
     }
68
     }
73
-    else
74
-    {
69
+    else {
75
         downloadBitrate =
70
         downloadBitrate =
76
             this.bitrate.download? this.bitrate.download + " Kbps" : "N/A";
71
             this.bitrate.download? this.bitrate.download + " Kbps" : "N/A";
77
         uploadBitrate =
72
         uploadBitrate =
78
             this.bitrate.upload? this.bitrate.upload + " Kbps" : "N/A";
73
             this.bitrate.upload? this.bitrate.upload + " Kbps" : "N/A";
79
     }
74
     }
80
 
75
 
81
-    if(this.packetLoss === null)
82
-    {
76
+    if(this.packetLoss === null) {
83
         packetLoss = "N/A";
77
         packetLoss = "N/A";
84
-    }
85
-    else
86
-    {
78
+    } else {
87
 
79
 
88
         packetLoss = "<span class='jitsipopover_green'>&darr;</span>" +
80
         packetLoss = "<span class='jitsipopover_green'>&darr;</span>" +
89
-            (this.packetLoss.download !== null? this.packetLoss.download : "N/A") +
81
+            (this.packetLoss.download !== null ?
82
+                this.packetLoss.download : "N/A") +
90
             "% <span class='jitsipopover_orange'>&uarr;</span>" +
83
             "% <span class='jitsipopover_orange'>&uarr;</span>" +
91
-            (this.packetLoss.upload !== null? this.packetLoss.upload : "N/A") + "%";
84
+            (this.packetLoss.upload !== null? this.packetLoss.upload : "N/A") +
85
+            "%";
92
     }
86
     }
93
 
87
 
94
     var resolutionValue = null;
88
     var resolutionValue = null;
95
-    if(this.resolution && this.jid != null)
96
-    {
89
+    if(this.resolution && this.jid != null) {
97
         var keys = Object.keys(this.resolution);
90
         var keys = Object.keys(this.resolution);
98
-        for(var ssrc in this.resolution)
99
-        {
91
+        for(var ssrc in this.resolution) {
100
             resolutionValue = this.resolution[ssrc];
92
             resolutionValue = this.resolution[ssrc];
101
         }
93
         }
102
     }
94
     }
103
 
95
 
104
-    if(this.jid === null)
105
-    {
96
+    if(this.jid === null) {
106
         resolution = "";
97
         resolution = "";
107
         if(this.resolution === null || !Object.keys(this.resolution) ||
98
         if(this.resolution === null || !Object.keys(this.resolution) ||
108
-            Object.keys(this.resolution).length === 0)
109
-        {
99
+            Object.keys(this.resolution).length === 0) {
110
             resolution = "N/A";
100
             resolution = "N/A";
111
-        }
112
-        else
113
-            for(i in this.resolution)
114
-            {
101
+        } else {
102
+            for (i in this.resolution) {
115
                 resolutionValue = this.resolution[i];
103
                 resolutionValue = this.resolution[i];
116
-                if(resolutionValue)
117
-                {
118
-                    if(resolutionValue.height &&
119
-                        resolutionValue.width)
120
-                    {
121
-                        resolution += (resolution === ""? "" : ", ") +
122
-                            resolutionValue.width + "x" +
123
-                            resolutionValue.height;
104
+                if (resolutionValue) {
105
+                    if (resolutionValue.height &&
106
+                        resolutionValue.width) {
107
+                        resolution += (resolution === "" ? "" : ", ") +
108
+                        resolutionValue.width + "x" +
109
+                        resolutionValue.height;
124
                     }
110
                     }
125
                 }
111
                 }
126
             }
112
             }
127
-    }
128
-    else if(!resolutionValue ||
113
+        }
114
+    } else if(!resolutionValue ||
129
         !resolutionValue.height ||
115
         !resolutionValue.height ||
130
-        !resolutionValue.width)
131
-    {
116
+        !resolutionValue.width) {
132
         resolution = "N/A";
117
         resolution = "N/A";
133
-    }
134
-    else
135
-    {
118
+    } else {
136
         resolution = resolutionValue.width + "x" + resolutionValue.height;
119
         resolution = resolutionValue.width + "x" + resolutionValue.height;
137
     }
120
     }
138
 
121
 
163
             "</div><br />";
146
             "</div><br />";
164
     }
147
     }
165
 
148
 
166
-    if(this.showMoreValue)
167
-    {
149
+    if (this.showMoreValue) {
168
         var downloadBandwidth, uploadBandwidth, transport;
150
         var downloadBandwidth, uploadBandwidth, transport;
169
-        if(this.bandwidth === null)
170
-        {
151
+        if (this.bandwidth === null) {
171
             downloadBandwidth = "N/A";
152
             downloadBandwidth = "N/A";
172
             uploadBandwidth = "N/A";
153
             uploadBandwidth = "N/A";
173
-        }
174
-        else
175
-        {
154
+        } else {
176
             downloadBandwidth = this.bandwidth.download?
155
             downloadBandwidth = this.bandwidth.download?
177
                 this.bandwidth.download + " Kbps" :
156
                 this.bandwidth.download + " Kbps" :
178
                 "N/A";
157
                 "N/A";
181
                 "N/A";
160
                 "N/A";
182
         }
161
         }
183
 
162
 
184
-        if(!this.transport || this.transport.length === 0)
185
-        {
163
+        if (!this.transport || this.transport.length === 0) {
186
             transport = "<tr>" +
164
             transport = "<tr>" +
187
                 "<td><span class='jitsipopover_blue' " +
165
                 "<td><span class='jitsipopover_blue' " +
188
                 "data-i18n='connectionindicator.address'>" +
166
                 "data-i18n='connectionindicator.address'>" +
189
                 translate("connectionindicator.address") + "</span></td>" +
167
                 translate("connectionindicator.address") + "</span></td>" +
190
                 "<td> N/A</td></tr>";
168
                 "<td> N/A</td></tr>";
191
-        }
192
-        else
193
-        {
169
+        } else {
194
             var data = {remoteIP: [], localIP:[], remotePort:[], localPort:[]};
170
             var data = {remoteIP: [], localIP:[], remotePort:[], localPort:[]};
195
-            for(i = 0; i < this.transport.length; i++)
196
-            {
171
+            for(i = 0; i < this.transport.length; i++) {
197
                 var ip =  ConnectionIndicator.getIP(this.transport[i].ip);
172
                 var ip =  ConnectionIndicator.getIP(this.transport[i].ip);
198
                 var port = ConnectionIndicator.getPort(this.transport[i].ip);
173
                 var port = ConnectionIndicator.getPort(this.transport[i].ip);
199
                 var localIP =
174
                 var localIP =
200
                     ConnectionIndicator.getIP(this.transport[i].localip);
175
                     ConnectionIndicator.getIP(this.transport[i].localip);
201
                 var localPort =
176
                 var localPort =
202
                     ConnectionIndicator.getPort(this.transport[i].localip);
177
                     ConnectionIndicator.getPort(this.transport[i].localip);
203
-                if(data.remoteIP.indexOf(ip) == -1)
204
-                {
178
+                if(data.remoteIP.indexOf(ip) == -1) {
205
                     data.remoteIP.push(ip);
179
                     data.remoteIP.push(ip);
206
                 }
180
                 }
207
 
181
 
208
-                if(data.remotePort.indexOf(port) == -1)
209
-                {
182
+                if(data.remotePort.indexOf(port) == -1) {
210
                     data.remotePort.push(port);
183
                     data.remotePort.push(port);
211
                 }
184
                 }
212
 
185
 
213
-                if(data.localIP.indexOf(localIP) == -1)
214
-                {
186
+                if(data.localIP.indexOf(localIP) == -1) {
215
                     data.localIP.push(localIP);
187
                     data.localIP.push(localIP);
216
                 }
188
                 }
217
 
189
 
218
-                if(data.localPort.indexOf(localPort) == -1)
219
-                {
190
+                if(data.localPort.indexOf(localPort) == -1) {
220
                     data.localPort.push(localPort);
191
                     data.localPort.push(localPort);
221
                 }
192
                 }
222
-
223
             }
193
             }
224
 
194
 
225
             var local_address_key = "connectionindicator.localaddress";
195
             var local_address_key = "connectionindicator.localaddress";
285
             uploadBandwidth + "</td></tr>";
255
             uploadBandwidth + "</td></tr>";
286
 
256
 
287
         result += transport + "</table>";
257
         result += transport + "</table>";
288
-
289
     }
258
     }
290
 
259
 
291
     return result;
260
     return result;
300
 };
269
 };
301
 
270
 
302
 
271
 
303
-function createIcon(classes)
304
-{
272
+function createIcon(classes) {
305
     var icon = document.createElement("span");
273
     var icon = document.createElement("span");
306
-    for(var i in classes)
307
-    {
274
+    for(var i in classes) {
308
         icon.classList.add(classes[i]);
275
         icon.classList.add(classes[i]);
309
     }
276
     }
310
     icon.appendChild(
277
     icon.appendChild(
319
     this.connectionIndicatorContainer = document.createElement("div");
286
     this.connectionIndicatorContainer = document.createElement("div");
320
     this.connectionIndicatorContainer.className = "connectionindicator";
287
     this.connectionIndicatorContainer.className = "connectionindicator";
321
     this.connectionIndicatorContainer.style.display = "none";
288
     this.connectionIndicatorContainer.style.display = "none";
322
-    this.videoContainer.container.appendChild(this.connectionIndicatorContainer);
289
+    this.videoContainer.container.appendChild(
290
+        this.connectionIndicatorContainer);
323
     this.popover = new JitsiPopover(
291
     this.popover = new JitsiPopover(
324
         $("#" + this.videoContainer.videoSpanId + " > .connectionindicator"),
292
         $("#" + this.videoContainer.videoSpanId + " > .connectionindicator"),
325
         {content: "<div class=\"connection_info\" data-i18n='connectionindicator.na'>" +
293
         {content: "<div class=\"connection_info\" data-i18n='connectionindicator.na'>" +
330
         createIcon(["connection", "connection_empty"]));
298
         createIcon(["connection", "connection_empty"]));
331
     this.fullIcon = this.connectionIndicatorContainer.appendChild(
299
     this.fullIcon = this.connectionIndicatorContainer.appendChild(
332
         createIcon(["connection", "connection_full"]));
300
         createIcon(["connection", "connection_full"]));
333
-
334
 };
301
 };
335
 
302
 
336
 /**
303
 /**
337
  * Removes the indicator
304
  * Removes the indicator
338
  */
305
  */
339
-ConnectionIndicator.prototype.remove = function()
340
-{
306
+ConnectionIndicator.prototype.remove = function() {
341
     if (this.connectionIndicatorContainer.parentNode) {
307
     if (this.connectionIndicatorContainer.parentNode) {
342
         this.connectionIndicatorContainer.parentNode.removeChild(
308
         this.connectionIndicatorContainer.parentNode.removeChild(
343
             this.connectionIndicatorContainer);
309
             this.connectionIndicatorContainer);
344
     }
310
     }
345
     this.popover.forceHide();
311
     this.popover.forceHide();
346
-
347
 };
312
 };
348
 
313
 
349
 /**
314
 /**
352
  * @param object the statistics data.
317
  * @param object the statistics data.
353
  */
318
  */
354
 ConnectionIndicator.prototype.updateConnectionQuality =
319
 ConnectionIndicator.prototype.updateConnectionQuality =
355
-function (percent, object) {
320
+    function (percent, object) {
356
 
321
 
357
-    if(percent === null)
358
-    {
322
+    if (percent === null) {
359
         this.connectionIndicatorContainer.style.display = "none";
323
         this.connectionIndicatorContainer.style.display = "none";
360
         this.popover.forceHide();
324
         this.popover.forceHide();
361
         return;
325
         return;
362
-    }
363
-    else
364
-    {
326
+    } else {
365
         if(this.connectionIndicatorContainer.style.display == "none") {
327
         if(this.connectionIndicatorContainer.style.display == "none") {
366
             this.connectionIndicatorContainer.style.display = "block";
328
             this.connectionIndicatorContainer.style.display = "block";
367
             this.videoContainer.updateIconPositions();
329
             this.videoContainer.updateIconPositions();
371
     this.bitrate = object.bitrate;
333
     this.bitrate = object.bitrate;
372
     this.packetLoss = object.packetLoss;
334
     this.packetLoss = object.packetLoss;
373
     this.transport = object.transport;
335
     this.transport = object.transport;
374
-    if(object.resolution)
375
-    {
336
+    if (object.resolution) {
376
         this.resolution = object.resolution;
337
         this.resolution = object.resolution;
377
     }
338
     }
378
-    for(var quality in ConnectionIndicator.connectionQualityValues)
379
-    {
380
-        if(percent >= quality)
381
-        {
339
+    for (var quality in ConnectionIndicator.connectionQualityValues) {
340
+        if (percent >= quality) {
382
             this.fullIcon.style.width =
341
             this.fullIcon.style.width =
383
                 ConnectionIndicator.connectionQualityValues[quality];
342
                 ConnectionIndicator.connectionQualityValues[quality];
384
         }
343
         }

+ 16
- 35
modules/UI/videolayout/LargeVideo.js View File

1
+/* global $, APP, Strophe, interfaceConfig */
1
 var Avatar = require("../avatar/Avatar");
2
 var Avatar = require("../avatar/Avatar");
2
 var RTCBrowserType = require("../../RTC/RTCBrowserType");
3
 var RTCBrowserType = require("../../RTC/RTCBrowserType");
3
 var UIUtil = require("../util/UIUtil");
4
 var UIUtil = require("../util/UIUtil");
68
                        horizontalIndent,
69
                        horizontalIndent,
69
                        verticalIndent,
70
                        verticalIndent,
70
                        animate) {
71
                        animate) {
71
-    if(animate)
72
-    {
72
+    if (animate) {
73
         video.animate({
73
         video.animate({
74
                 width: width,
74
                 width: width,
75
                 height: height,
75
                 height: height,
82
                 queue: false,
82
                 queue: false,
83
                 duration: 500
83
                 duration: 500
84
             });
84
             });
85
-    }
86
-    else
87
-    {
85
+    } else {
88
         video.width(width);
86
         video.width(width);
89
         video.height(height);
87
         video.height(height);
90
         video.css({  top: verticalIndent + 'px',
88
         video.css({  top: verticalIndent + 'px',
95
 
93
 
96
 }
94
 }
97
 
95
 
98
-
99
 /**
96
 /**
100
  * Returns an array of the video dimensions, so that it keeps it's aspect
97
  * Returns an array of the video dimensions, so that it keeps it's aspect
101
  * ratio and fits available area with it's larger dimension. This method
98
  * ratio and fits available area with it's larger dimension. This method
251
     var flipX = currentSmallVideo.flipX;
248
     var flipX = currentSmallVideo.flipX;
252
 
249
 
253
     if (flipX && videoTransform !== 'scaleX(-1)') {
250
     if (flipX && videoTransform !== 'scaleX(-1)') {
254
-        document.getElementById('largeVideo').style.webkitTransform
255
-            = "scaleX(-1)";
256
-    }
257
-    else if (!flipX && videoTransform === 'scaleX(-1)') {
258
-        document.getElementById('largeVideo').style.webkitTransform
259
-            = "none";
251
+        document.getElementById('largeVideo').style.webkitTransform =
252
+            "scaleX(-1)";
253
+    } else if (!flipX && videoTransform === 'scaleX(-1)') {
254
+        document.getElementById('largeVideo').style.webkitTransform =
255
+            "none";
260
     }
256
     }
261
 
257
 
262
     var isDesktop = APP.RTC.isVideoSrcDesktop(currentSmallVideo.peerJid);
258
     var isDesktop = APP.RTC.isVideoSrcDesktop(currentSmallVideo.peerJid);
263
     // Change the way we'll be measuring and positioning large video
259
     // Change the way we'll be measuring and positioning large video
264
 
260
 
265
-    getVideoSize = isDesktop
266
-        ? getDesktopVideoSize
267
-        : getCameraVideoSize;
268
-    getVideoPosition = isDesktop
269
-        ? getDesktopVideoPosition
270
-        : getCameraVideoPosition;
261
+    getVideoSize = isDesktop ? getDesktopVideoSize : getCameraVideoSize;
262
+    getVideoPosition = isDesktop ? getDesktopVideoPosition :
263
+        getCameraVideoPosition;
271
 
264
 
272
 
265
 
273
     // Only if the large video is currently visible.
266
     // Only if the large video is currently visible.
434
         if (LargeVideo.isCurrentlyOnLarge(resourceJid))
427
         if (LargeVideo.isCurrentlyOnLarge(resourceJid))
435
         {
428
         {
436
             var isDesktop = APP.RTC.isVideoSrcDesktop(jid);
429
             var isDesktop = APP.RTC.isVideoSrcDesktop(jid);
437
-            getVideoSize = isDesktop
438
-                ? getDesktopVideoSize
439
-                : getCameraVideoSize;
440
-            getVideoPosition = isDesktop
441
-                ? getDesktopVideoPosition
430
+            getVideoSize = isDesktop ? getDesktopVideoSize : getCameraVideoSize;
431
+            getVideoPosition = isDesktop ? getDesktopVideoPosition
442
                 : getCameraVideoPosition;
432
                 : getCameraVideoPosition;
443
             this.position(null, null);
433
             this.position(null, null);
444
         }
434
         }
491
         var top = availableHeight / 2 - avatarSize / 4 * 3;
481
         var top = availableHeight / 2 - avatarSize / 4 * 3;
492
         $('#activeSpeaker').css('top', top);
482
         $('#activeSpeaker').css('top', top);
493
 
483
 
494
-        if(animate)
495
-        {
484
+        if(animate) {
496
             $('#videospace').animate({
485
             $('#videospace').animate({
497
                     right: window.innerWidth - availableWidth,
486
                     right: window.innerWidth - availableWidth,
498
                     width: availableWidth,
487
                     width: availableWidth,
512
                     queue: false,
501
                     queue: false,
513
                     duration: 500
502
                     duration: 500
514
                 });
503
                 });
515
-
516
-
517
-        }
518
-        else
519
-        {
504
+        } else {
520
             $('#videospace').width(availableWidth);
505
             $('#videospace').width(availableWidth);
521
             $('#videospace').height(availableHeight);
506
             $('#videospace').height(availableHeight);
522
             $('#largeVideoContainer').width(availableWidth);
507
             $('#largeVideoContainer').width(availableWidth);
523
             $('#largeVideoContainer').height(availableHeight);
508
             $('#largeVideoContainer').height(availableHeight);
524
         }
509
         }
525
         return [availableWidth, availableHeight];
510
         return [availableWidth, availableHeight];
526
-
527
     },
511
     },
528
     resizeVideoAreaAnimated: function (isVisible, completeFunction) {
512
     resizeVideoAreaAnimated: function (isVisible, completeFunction) {
529
         if(!isEnabled)
513
         if(!isEnabled)
544
     showAvatar: function (resourceJid, show) {
528
     showAvatar: function (resourceJid, show) {
545
         if(!isEnabled)
529
         if(!isEnabled)
546
             return;
530
             return;
547
-        if(this.getResourceJid() === resourceJid
548
-            && state === "video")
549
-        {
531
+        if(this.getResourceJid() === resourceJid && state === "video") {
550
             $("#largeVideo").css("visibility", show ? "hidden" : "visible");
532
             $("#largeVideo").css("visibility", show ? "hidden" : "visible");
551
             $('#activeSpeaker').css("visibility", show ? "visible" : "hidden");
533
             $('#activeSpeaker').css("visibility", show ? "visible" : "hidden");
552
             return true;
534
             return true;
679
     {
661
     {
680
         $('#largeVideoContainer').hover(inHandler, outHandler);
662
         $('#largeVideoContainer').hover(inHandler, outHandler);
681
     }
663
     }
682
-
683
 };
664
 };
684
 
665
 
685
 
666
 

+ 38
- 42
modules/UI/videolayout/LocalVideo.js View File

1
+/* global $, interfaceConfig, APP */
1
 var SmallVideo = require("./SmallVideo");
2
 var SmallVideo = require("./SmallVideo");
2
 var ConnectionIndicator = require("./ConnectionIndicator");
3
 var ConnectionIndicator = require("./ConnectionIndicator");
3
 var NicknameHandler = require("../util/NicknameHandler");
4
 var NicknameHandler = require("../util/NicknameHandler");
5
 var LargeVideo = require("./LargeVideo");
6
 var LargeVideo = require("./LargeVideo");
6
 var RTCBrowserType = require("../../RTC/RTCBrowserType");
7
 var RTCBrowserType = require("../../RTC/RTCBrowserType");
7
 
8
 
8
-function LocalVideo(VideoLayout)
9
-{
9
+function LocalVideo(VideoLayout) {
10
     this.videoSpanId = "localVideoContainer";
10
     this.videoSpanId = "localVideoContainer";
11
     this.container = $("#localVideoContainer").get(0);
11
     this.container = $("#localVideoContainer").get(0);
12
     this.VideoLayout = VideoLayout;
12
     this.VideoLayout = VideoLayout;
21
 /**
21
 /**
22
  * Creates the edit display name button.
22
  * Creates the edit display name button.
23
  *
23
  *
24
- * @returns the edit button
24
+ * @returns {object} the edit button
25
  */
25
  */
26
 function createEditDisplayNameButton() {
26
 function createEditDisplayNameButton() {
27
     var editButton = document.createElement('a');
27
     var editButton = document.createElement('a');
34
     return editButton;
34
     return editButton;
35
 }
35
 }
36
 
36
 
37
-
38
 /**
37
 /**
39
  * Sets the display name for the given video span id.
38
  * Sets the display name for the given video span id.
40
  */
39
  */
41
 LocalVideo.prototype.setDisplayName = function(displayName, key) {
40
 LocalVideo.prototype.setDisplayName = function(displayName, key) {
42
-
43
     if (!this.container) {
41
     if (!this.container) {
44
         console.warn(
42
         console.warn(
45
-                "Unable to set displayName - " + this.videoSpanId + " does not exist");
43
+                "Unable to set displayName - " + this.videoSpanId +
44
+                " does not exist");
46
         return;
45
         return;
47
     }
46
     }
48
 
47
 
50
     var defaultLocalDisplayName = APP.translation.generateTranslationHTML(
49
     var defaultLocalDisplayName = APP.translation.generateTranslationHTML(
51
         interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME);
50
         interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME);
52
 
51
 
52
+    var meHTML;
53
     // If we already have a display name for this video.
53
     // If we already have a display name for this video.
54
     if (nameSpan.length > 0) {
54
     if (nameSpan.length > 0) {
55
-
56
         if (nameSpan.text() !== displayName) {
55
         if (nameSpan.text() !== displayName) {
57
-            if (displayName && displayName.length > 0)
58
-            {
59
-                var meHTML = APP.translation.generateTranslationHTML("me");
56
+            if (displayName && displayName.length > 0) {
57
+                meHTML = APP.translation.generateTranslationHTML("me");
60
                 $('#localDisplayName').html(displayName + ' (' + meHTML + ')');
58
                 $('#localDisplayName').html(displayName + ' (' + meHTML + ')');
61
-            }
62
-            else
59
+            } else {
63
                 $('#localDisplayName').html(defaultLocalDisplayName);
60
                 $('#localDisplayName').html(defaultLocalDisplayName);
61
+            }
64
         }
62
         }
65
     } else {
63
     } else {
66
         var editButton = createEditDisplayNameButton();
64
         var editButton = createEditDisplayNameButton();
71
 
69
 
72
 
70
 
73
         if (displayName && displayName.length > 0) {
71
         if (displayName && displayName.length > 0) {
74
-            var meHTML = APP.translation.generateTranslationHTML("me");
72
+            meHTML = APP.translation.generateTranslationHTML("me");
75
             nameSpan.innerHTML = displayName + meHTML;
73
             nameSpan.innerHTML = displayName + meHTML;
76
         }
74
         }
77
         else {
75
         else {
108
         $('#localVideoContainer .displayname')
106
         $('#localVideoContainer .displayname')
109
             .bind("click", function (e) {
107
             .bind("click", function (e) {
110
 
108
 
109
+                var editDisplayName = $('#editDisplayName');
111
                 e.preventDefault();
110
                 e.preventDefault();
112
                 e.stopPropagation();
111
                 e.stopPropagation();
113
                 $('#localDisplayName').hide();
112
                 $('#localDisplayName').hide();
114
-                $('#editDisplayName').show();
115
-                $('#editDisplayName').focus();
116
-                $('#editDisplayName').select();
113
+                editDisplayName.show();
114
+                editDisplayName.focus();
115
+                editDisplayName.select();
117
 
116
 
118
-                $('#editDisplayName').one("focusout", function (e) {
117
+                editDisplayName.one("focusout", function (e) {
119
                     self.VideoLayout.inputDisplayNameHandler(this.value);
118
                     self.VideoLayout.inputDisplayNameHandler(this.value);
120
                 });
119
                 });
121
 
120
 
122
-                $('#editDisplayName').on('keydown', function (e) {
121
+                editDisplayName.on('keydown', function (e) {
123
                     if (e.keyCode === 13) {
122
                     if (e.keyCode === 13) {
124
                         e.preventDefault();
123
                         e.preventDefault();
125
                         self.VideoLayout.inputDisplayNameHandler(this.value);
124
                         self.VideoLayout.inputDisplayNameHandler(this.value);
127
                 });
126
                 });
128
             });
127
             });
129
     }
128
     }
130
-}
129
+};
131
 
130
 
132
 LocalVideo.prototype.inputDisplayNameHandler = function (name) {
131
 LocalVideo.prototype.inputDisplayNameHandler = function (name) {
133
     NicknameHandler.setNickname(name);
132
     NicknameHandler.setNickname(name);
134
 
133
 
135
-    if (!$('#localDisplayName').is(":visible")) {
136
-        if (NicknameHandler.getNickname())
137
-        {
134
+    var localDisplayName = $('#localDisplayName');
135
+    if (!localDisplayName.is(":visible")) {
136
+        if (NicknameHandler.getNickname()) {
138
             var meHTML = APP.translation.generateTranslationHTML("me");
137
             var meHTML = APP.translation.generateTranslationHTML("me");
139
-            $('#localDisplayName').html(NicknameHandler.getNickname() + " (" + meHTML + ")");
140
-        }
141
-        else
142
-        {
138
+            localDisplayName.html(NicknameHandler.getNickname() + " (" +
139
+            meHTML + ")");
140
+        } else {
143
             var defaultHTML = APP.translation.generateTranslationHTML(
141
             var defaultHTML = APP.translation.generateTranslationHTML(
144
                 interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME);
142
                 interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME);
145
-            $('#localDisplayName')
146
-                .html(defaultHTML);
143
+            localDisplayName .html(defaultHTML);
147
         }
144
         }
148
-        $('#localDisplayName').show();
145
+        localDisplayName.show();
149
     }
146
     }
150
 
147
 
151
     $('#editDisplayName').hide();
148
     $('#editDisplayName').hide();
152
-}
149
+};
153
 
150
 
154
-LocalVideo.prototype.createConnectionIndicator = function()
155
-{
151
+LocalVideo.prototype.createConnectionIndicator = function() {
156
     if(this.connectionIndicator)
152
     if(this.connectionIndicator)
157
         return;
153
         return;
158
 
154
 
159
-    this.connectionIndicator
160
-        = new ConnectionIndicator(this, null);
161
-}
155
+    this.connectionIndicator = new ConnectionIndicator(this, null);
156
+};
162
 
157
 
163
 LocalVideo.prototype.changeVideo = function (stream, isMuted) {
158
 LocalVideo.prototype.changeVideo = function (stream, isMuted) {
164
     var self = this;
159
     var self = this;
174
             APP.xmpp.myResource());
169
             APP.xmpp.myResource());
175
     }
170
     }
176
 
171
 
177
-    $('#localVideoContainer').off('click');
178
-    $('#localVideoContainer').on('click', localVideoClick);
172
+    var localVideoContainerSelector = $('#localVideoContainer');
173
+    localVideoContainerSelector.off('click');
174
+    localVideoContainerSelector.on('click', localVideoClick);
179
 
175
 
180
     // Add hover handler
176
     // Add hover handler
181
-    $('#localVideoContainer').hover(
177
+    localVideoContainerSelector.hover(
182
         function() {
178
         function() {
183
             self.showDisplayName(true);
179
             self.showDisplayName(true);
184
         },
180
         },
185
         function() {
181
         function() {
186
             if (!LargeVideo.isLargeVideoVisible() ||
182
             if (!LargeVideo.isLargeVideoVisible() ||
187
-                !LargeVideo.isCurrentlyOnLarge(self.getResourceJid()))
183
+                !LargeVideo.isCurrentlyOnLarge(self.getResourceJid())) {
188
                 self.showDisplayName(false);
184
                 self.showDisplayName(false);
185
+            }
189
         }
186
         }
190
     );
187
     );
191
 
188
 
192
-    if(isMuted)
193
-    {
189
+    if(isMuted) {
194
         APP.UI.setVideoMute(true);
190
         APP.UI.setVideoMute(true);
195
         return;
191
         return;
196
     }
192
     }
197
-    this.flipX = (stream.videoType == "screen")? false : true;
193
+    this.flipX = stream.videoType != "screen";
198
     var localVideo = document.createElement('video');
194
     var localVideo = document.createElement('video');
199
     localVideo.id = 'localVideo_' +
195
     localVideo.id = 'localVideo_' +
200
         APP.RTC.getStreamID(stream.getOriginalStream());
196
         APP.RTC.getStreamID(stream.getOriginalStream());

+ 13
- 18
modules/UI/videolayout/RemoteVideo.js View File

1
+/* global $, APP, require, Strophe, interfaceConfig */
1
 var ConnectionIndicator = require("./ConnectionIndicator");
2
 var ConnectionIndicator = require("./ConnectionIndicator");
2
 var SmallVideo = require("./SmallVideo");
3
 var SmallVideo = require("./SmallVideo");
3
 var AudioLevels = require("../audio_levels/AudioLevels");
4
 var AudioLevels = require("../audio_levels/AudioLevels");
5
 var Avatar = require("../avatar/Avatar");
6
 var Avatar = require("../avatar/Avatar");
6
 var RTCBrowserType = require("../../RTC/RTCBrowserType");
7
 var RTCBrowserType = require("../../RTC/RTCBrowserType");
7
 
8
 
8
-function RemoteVideo(peerJid, VideoLayout)
9
-{
9
+function RemoteVideo(peerJid, VideoLayout) {
10
     this.peerJid = peerJid;
10
     this.peerJid = peerJid;
11
     this.resourceJid = Strophe.getResourceFromJid(peerJid);
11
     this.resourceJid = Strophe.getResourceFromJid(peerJid);
12
     this.videoSpanId = 'participant_' + this.resourceJid;
12
     this.videoSpanId = 'participant_' + this.resourceJid;
56
 
56
 
57
     var popupmenuElement = document.createElement('ul');
57
     var popupmenuElement = document.createElement('ul');
58
     popupmenuElement.className = 'popupmenu';
58
     popupmenuElement.className = 'popupmenu';
59
-    popupmenuElement.id
60
-        = 'remote_popupmenu_' + this.getResourceJid();
59
+    popupmenuElement.id = 'remote_popupmenu_' + this.getResourceJid();
61
     spanElement.appendChild(popupmenuElement);
60
     spanElement.appendChild(popupmenuElement);
62
 
61
 
63
     var muteMenuItem = document.createElement('li');
62
     var muteMenuItem = document.createElement('li');
118
     var paddingSpan = document.createElement('span');
117
     var paddingSpan = document.createElement('span');
119
     paddingSpan.className = 'popupmenuPadding';
118
     paddingSpan.className = 'popupmenuPadding';
120
     popupmenuElement.appendChild(paddingSpan);
119
     popupmenuElement.appendChild(paddingSpan);
121
-    APP.translation.translateElement($("#" + popupmenuElement.id + " > li > a > div"));
122
-}
120
+    APP.translation.translateElement(
121
+        $("#" + popupmenuElement.id + " > li > a > div"));
122
+};
123
 
123
 
124
 
124
 
125
 /**
125
 /**
128
  *
128
  *
129
  * @param stream the stream
129
  * @param stream the stream
130
  * @param isVideo <tt>true</tt> if given <tt>stream</tt> is a video one.
130
  * @param isVideo <tt>true</tt> if given <tt>stream</tt> is a video one.
131
- * @param container
132
  */
131
  */
133
-RemoteVideo.prototype.removeRemoteStreamElement = function (stream, isVideo, id) {
132
+RemoteVideo.prototype.removeRemoteStreamElement =
133
+    function (stream, isVideo, id) {
134
     if (!this.container)
134
     if (!this.container)
135
         return false;
135
         return false;
136
 
136
 
337
 RemoteVideo.prototype.setDisplayName = function(displayName, key) {
337
 RemoteVideo.prototype.setDisplayName = function(displayName, key) {
338
 
338
 
339
     if (!this.container) {
339
     if (!this.container) {
340
-        console.warn(
341
-                "Unable to set displayName - " + this.videoSpanId + " does not exist");
340
+        console.warn( "Unable to set displayName - " + this.videoSpanId +
341
+                " does not exist");
342
         return;
342
         return;
343
     }
343
     }
344
 
344
 
346
 
346
 
347
     // If we already have a display name for this video.
347
     // If we already have a display name for this video.
348
     if (nameSpan.length > 0) {
348
     if (nameSpan.length > 0) {
349
-        if (displayName && displayName.length > 0)
350
-        {
349
+        if (displayName && displayName.length > 0) {
351
             $('#' + this.videoSpanId + '_name').html(displayName);
350
             $('#' + this.videoSpanId + '_name').html(displayName);
352
         }
351
         }
353
-        else if (key && key.length > 0)
354
-        {
352
+        else if (key && key.length > 0) {
355
             var nameHtml = APP.translation.generateTranslationHTML(key);
353
             var nameHtml = APP.translation.generateTranslationHTML(key);
356
             $('#' + this.videoSpanId + '_name').html(nameHtml);
354
             $('#' + this.videoSpanId + '_name').html(nameHtml);
357
         }
355
         }
365
 
363
 
366
 
364
 
367
         if (displayName && displayName.length > 0) {
365
         if (displayName && displayName.length > 0) {
368
-
369
             nameSpan.innerText = displayName;
366
             nameSpan.innerText = displayName;
370
         }
367
         }
371
         else
368
         else
372
             nameSpan.innerText = interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME;
369
             nameSpan.innerText = interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME;
373
 
370
 
374
-
375
         nameSpan.id = this.videoSpanId + '_name';
371
         nameSpan.id = this.videoSpanId + '_name';
376
-
377
     }
372
     }
378
-}
373
+};
379
 
374
 
380
 /**
375
 /**
381
  * Removes remote video menu element from video element identified by
376
  * Removes remote video menu element from video element identified by

+ 35
- 50
modules/UI/videolayout/SmallVideo.js View File

1
+/* global $, APP, require */
1
 var Avatar = require("../avatar/Avatar");
2
 var Avatar = require("../avatar/Avatar");
2
 var UIUtil = require("../util/UIUtil");
3
 var UIUtil = require("../util/UIUtil");
3
 var LargeVideo = require("./LargeVideo");
4
 var LargeVideo = require("./LargeVideo");
4
 var RTCBrowserType = require("../../RTC/RTCBrowserType");
5
 var RTCBrowserType = require("../../RTC/RTCBrowserType");
5
 
6
 
6
-function SmallVideo(){
7
+function SmallVideo() {
7
     this.isMuted = false;
8
     this.isMuted = false;
8
     this.hasAvatar = false;
9
     this.hasAvatar = false;
9
 }
10
 }
30
     if(!this.container)
31
     if(!this.container)
31
         return;
32
         return;
32
 
33
 
33
-    $("#" + this.videoSpanId + " > .noMic").remove();
34
-    $("#" + this.videoSpanId + " > .noVideo").remove();
35
-    if(!devices.audio)
36
-    {
34
+    var noMic = $("#" + this.videoSpanId + " > .noMic");
35
+    var noVideo =  $("#" + this.videoSpanId + " > .noVideo");
36
+
37
+    noMic.remove();
38
+    noVideo.remove();
39
+    if (!devices.audio) {
37
         this.container.appendChild(
40
         this.container.appendChild(
38
-            document.createElement("div")).setAttribute("class","noMic");
41
+            document.createElement("div")).setAttribute("class", "noMic");
39
     }
42
     }
40
 
43
 
41
-    if(!devices.video)
42
-    {
44
+    if (!devices.video) {
43
         this.container.appendChild(
45
         this.container.appendChild(
44
-            document.createElement("div")).setAttribute("class","noVideo");
46
+            document.createElement("div")).setAttribute("class", "noVideo");
45
     }
47
     }
46
 
48
 
47
-    if(!devices.audio && !devices.video)
48
-    {
49
-        $("#" + this.videoSpanId + " > .noMic").css("background-position", "75%");
50
-        $("#" + this.videoSpanId + " > .noVideo").css("background-position", "25%");
51
-        $("#" + this.videoSpanId + " > .noVideo").css("background-color", "transparent");
49
+    if (!devices.audio && !devices.video) {
50
+        noMic.css("background-position", "75%");
51
+        noVideo.css("background-position", "25%");
52
+        noVideo.css("background-color", "transparent");
52
     }
53
     }
53
-}
54
+};
54
 
55
 
55
 /**
56
 /**
56
  * Shows the presence status message for the given video.
57
  * Shows the presence status message for the given video.
57
  */
58
  */
58
 SmallVideo.prototype.setPresenceStatus = function (statusMsg) {
59
 SmallVideo.prototype.setPresenceStatus = function (statusMsg) {
59
-
60
     if (!this.container) {
60
     if (!this.container) {
61
         // No container
61
         // No container
62
         return;
62
         return;
87
 /**
87
 /**
88
  * Creates an audio or video stream element.
88
  * Creates an audio or video stream element.
89
  */
89
  */
90
-
91
 SmallVideo.createStreamElement = function (sid, stream) {
90
 SmallVideo.createStreamElement = function (sid, stream) {
92
     var isVideo = stream.getVideoTracks().length > 0;
91
     var isVideo = stream.getVideoTracks().length > 0;
93
 
92
 
94
-    var element = isVideo
95
-        ? document.createElement('video')
93
+    var element = isVideo ? document.createElement('video')
96
         : document.createElement('audio');
94
         : document.createElement('audio');
97
-    var id = (isVideo ? 'remoteVideo_' : 'remoteAudio_')
98
-        + sid + '_' + APP.RTC.getStreamID(stream);
95
+    var id = (isVideo ? 'remoteVideo_' : 'remoteAudio_') + sid + '_' +
96
+        APP.RTC.getStreamID(stream);
99
 
97
 
100
     element.id = id;
98
     element.id = id;
101
     if (!RTCBrowserType.isIExplorer()) {
99
     if (!RTCBrowserType.isIExplorer()) {
115
 SmallVideo.prototype.updateStatsIndicator = function (percent, object) {
113
 SmallVideo.prototype.updateStatsIndicator = function (percent, object) {
116
     if(this.connectionIndicator)
114
     if(this.connectionIndicator)
117
         this.connectionIndicator.updateConnectionQuality(percent, object);
115
         this.connectionIndicator.updateConnectionQuality(percent, object);
118
-}
116
+};
119
 
117
 
120
 SmallVideo.prototype.hideIndicator = function () {
118
 SmallVideo.prototype.hideIndicator = function () {
121
     if(this.connectionIndicator)
119
     if(this.connectionIndicator)
122
         this.connectionIndicator.hideIndicator();
120
         this.connectionIndicator.hideIndicator();
123
-}
121
+};
124
 
122
 
125
 
123
 
126
 /**
124
 /**
191
     }
189
     }
192
 };
190
 };
193
 
191
 
194
-SmallVideo.prototype.enableDominantSpeaker = function (isEnable)
195
-{
192
+SmallVideo.prototype.enableDominantSpeaker = function (isEnable) {
196
     var resourceJid = this.getResourceJid();
193
     var resourceJid = this.getResourceJid();
197
     var displayName = resourceJid;
194
     var displayName = resourceJid;
198
     var nameSpan = $('#' + this.videoSpanId + '>span.displayname');
195
     var nameSpan = $('#' + this.videoSpanId + '>span.displayname');
229
     var audioMutedSpan = $('#' + this.videoSpanId + '>span.audioMuted');
226
     var audioMutedSpan = $('#' + this.videoSpanId + '>span.audioMuted');
230
     var connectionIndicator = $('#' + this.videoSpanId + '>div.connectionindicator');
227
     var connectionIndicator = $('#' + this.videoSpanId + '>div.connectionindicator');
231
     var videoMutedSpan = $('#' + this.videoSpanId + '>span.videoMuted');
228
     var videoMutedSpan = $('#' + this.videoSpanId + '>span.videoMuted');
232
-    if(connectionIndicator.length > 0
233
-        && connectionIndicator[0].style.display != "none") {
229
+    if(connectionIndicator.length > 0 &&
230
+        connectionIndicator[0].style.display != "none") {
234
         audioMutedSpan.css({right: "23px"});
231
         audioMutedSpan.css({right: "23px"});
235
         videoMutedSpan.css({right: ((audioMutedSpan.length > 0? 23 : 0) + 30) + "px"});
232
         videoMutedSpan.css({right: ((audioMutedSpan.length > 0? 23 : 0) + 30) + "px"});
236
-    }
237
-    else
238
-    {
233
+    } else {
239
         audioMutedSpan.css({right: "0px"});
234
         audioMutedSpan.css({right: "0px"});
240
         videoMutedSpan.css({right: (audioMutedSpan.length > 0? 30 : 0) + "px"});
235
         videoMutedSpan.css({right: (audioMutedSpan.length > 0? 30 : 0) + "px"});
241
     }
236
     }
242
-}
243
-
237
+};
244
 
238
 
245
 /**
239
 /**
246
  * Creates the element indicating the moderator(owner) of the conference.
240
  * Creates the element indicating the moderator(owner) of the conference.
272
 
266
 
273
     //translates text in focus indicators
267
     //translates text in focus indicators
274
     APP.translation.translateElement($('#' + this.videoSpanId + ' .focusindicator'));
268
     APP.translation.translateElement($('#' + this.videoSpanId + ' .focusindicator'));
275
-}
276
-
269
+};
277
 
270
 
278
 SmallVideo.prototype.getSrc = function () {
271
 SmallVideo.prototype.getSrc = function () {
279
     var videoElement = APP.RTC.getVideoElementName();
272
     var videoElement = APP.RTC.getVideoElementName();
280
     return APP.RTC.getVideoSrc(
273
     return APP.RTC.getVideoSrc(
281
             $('#' + this.videoSpanId).find(videoElement).get(0));
274
             $('#' + this.videoSpanId).find(videoElement).get(0));
282
-},
275
+};
283
 
276
 
284
-SmallVideo.prototype.focus = function(isFocused)
285
-{
277
+SmallVideo.prototype.focus = function(isFocused) {
286
     if(!isFocused) {
278
     if(!isFocused) {
287
         this.container.classList.remove("videoContainerFocused");
279
         this.container.classList.remove("videoContainerFocused");
288
-    }
289
-    else
290
-    {
280
+    } else {
291
         this.container.classList.add("videoContainerFocused");
281
         this.container.classList.add("videoContainerFocused");
292
     }
282
     }
293
-}
283
+};
294
 
284
 
295
 SmallVideo.prototype.hasVideo = function () {
285
 SmallVideo.prototype.hasVideo = function () {
296
     return $("#" + this.videoSpanId).find(
286
     return $("#" + this.videoSpanId).find(
297
                 APP.RTC.getVideoElementName()).length !== 0;
287
                 APP.RTC.getVideoElementName()).length !== 0;
298
-}
288
+};
299
 
289
 
300
 /**
290
 /**
301
  * Hides or shows the user's avatar
291
  * Hides or shows the user's avatar
322
         if (!this.isLocal &&
312
         if (!this.isLocal &&
323
             !this.VideoLayout.isInLastN(resourceJid)) {
313
             !this.VideoLayout.isInLastN(resourceJid)) {
324
             show = true;
314
             show = true;
325
-        }
326
-        else
327
-        {
315
+        } else {
328
             // We want to show the avatar when the video is muted or not exists
316
             // We want to show the avatar when the video is muted or not exists
329
             // that is when 'true' or 'null' is returned
317
             // that is when 'true' or 'null' is returned
330
             show = APP.RTC.isVideoMuted(this.peerJid) !== false;
318
             show = APP.RTC.isVideoMuted(this.peerJid) !== false;
331
         }
319
         }
332
-
333
     }
320
     }
334
 
321
 
335
-    if (LargeVideo.showAvatar(resourceJid, show))
336
-    {
322
+    if (LargeVideo.showAvatar(resourceJid, show)) {
337
         setVisibility(avatar, false);
323
         setVisibility(avatar, false);
338
         setVisibility(video, false);
324
         setVisibility(video, false);
339
     } else {
325
     } else {
341
             setVisibility(video, !show);
327
             setVisibility(video, !show);
342
         }
328
         }
343
         setVisibility(avatar, show);
329
         setVisibility(avatar, show);
344
-
345
     }
330
     }
346
 };
331
 };
347
 
332
 
363
             thumbnail.append(avatar);
348
             thumbnail.append(avatar);
364
         }
349
         }
365
     }
350
     }
366
-}
351
+};
367
 
352
 
368
 module.exports = SmallVideo;
353
 module.exports = SmallVideo;

+ 61
- 94
modules/UI/videolayout/VideoLayout.js View File

1
+/* global config, APP, $, Strophe, require, interfaceConfig */
1
 var AudioLevels = require("../audio_levels/AudioLevels");
2
 var AudioLevels = require("../audio_levels/AudioLevels");
2
 var ContactList = require("../side_pannels/contactlist/ContactList");
3
 var ContactList = require("../side_pannels/contactlist/ContactList");
3
 var MediaStreamType = require("../../../service/RTC/MediaStreamTypes");
4
 var MediaStreamType = require("../../../service/RTC/MediaStreamTypes");
22
 
23
 
23
 var eventEmitter = null;
24
 var eventEmitter = null;
24
 
25
 
25
-var showLargeVideo = true;
26
-
27
-
28
 /**
26
 /**
29
  * Currently focused video jid
27
  * Currently focused video jid
30
  * @type {String}
28
  * @type {String}
42
     };
40
     };
43
 
41
 
44
     my.isInLastN = function(resource) {
42
     my.isInLastN = function(resource) {
45
-        return lastNCount < 0 // lastN is disabled, return true
46
-            || (lastNCount > 0 && lastNEndpointsCache.length == 0) // lastNEndpoints cache not built yet, return true
47
-            || (lastNEndpointsCache && lastNEndpointsCache.indexOf(resource) !== -1);
43
+        return lastNCount < 0 || // lastN is disabled
44
+             // lastNEndpoints cache not built yet
45
+            (lastNCount > 0 && lastNEndpointsCache.length == 0) ||
46
+            (lastNEndpointsCache &&
47
+                lastNEndpointsCache.indexOf(resource) !== -1);
48
     };
48
     };
49
 
49
 
50
     my.changeLocalStream = function (stream, isMuted) {
50
     my.changeLocalStream = function (stream, isMuted) {
95
         if(!devices)
95
         if(!devices)
96
             return;
96
             return;
97
 
97
 
98
-        if(!resourceJid)
99
-        {
98
+        if(!resourceJid) {
100
             localVideoThumbnail.setDeviceAvailabilityIcons(devices);
99
             localVideoThumbnail.setDeviceAvailabilityIcons(devices);
101
-        }
102
-        else
103
-        {
100
+        } else {
104
             if(remoteVideos[resourceJid])
101
             if(remoteVideos[resourceJid])
105
                 remoteVideos[resourceJid].setDeviceAvailabilityIcons(devices);
102
                 remoteVideos[resourceJid].setDeviceAvailabilityIcons(devices);
106
         }
103
         }
107
-
108
-
109
-    }
104
+    };
110
 
105
 
111
     /**
106
     /**
112
      * Checks if removed video is currently displayed and tries to display
107
      * Checks if removed video is currently displayed and tries to display
205
             focusedVideoResourceJid = null;
200
             focusedVideoResourceJid = null;
206
             // Enable the currently set dominant speaker.
201
             // Enable the currently set dominant speaker.
207
             if (currentDominantSpeaker) {
202
             if (currentDominantSpeaker) {
208
-                if(smallVideo && smallVideo.hasVideo())
209
-                {
203
+                if(smallVideo && smallVideo.hasVideo()) {
210
                     LargeVideo.updateLargeVideo(currentDominantSpeaker);
204
                     LargeVideo.updateLargeVideo(currentDominantSpeaker);
211
                 }
205
                 }
212
             }
206
             }
217
             return;
211
             return;
218
         }
212
         }
219
 
213
 
220
-
221
         // Lock new video
214
         // Lock new video
222
         focusedVideoResourceJid = resourceJid;
215
         focusedVideoResourceJid = resourceJid;
223
 
216
 
224
         // Update focused/pinned interface.
217
         // Update focused/pinned interface.
225
-        if (resourceJid)
226
-        {
218
+        if (resourceJid) {
227
             if(smallVideo)
219
             if(smallVideo)
228
                 smallVideo.focus(true);
220
                 smallVideo.focus(true);
229
 
221
 
260
 
252
 
261
         var resourceJid = Strophe.getResourceFromJid(peerJid);
253
         var resourceJid = Strophe.getResourceFromJid(peerJid);
262
 
254
 
263
-        if(!remoteVideos[resourceJid])
264
-        {
255
+        if(!remoteVideos[resourceJid]) {
265
             remoteVideos[resourceJid] = new RemoteVideo(peerJid, VideoLayout);
256
             remoteVideos[resourceJid] = new RemoteVideo(peerJid, VideoLayout);
266
 
257
 
267
             // In case this is not currently in the last n we don't show it.
258
             // In case this is not currently in the last n we don't show it.
268
-            if (localLastNCount
269
-                && localLastNCount > 0
270
-                && $('#remoteVideos>span').length >= localLastNCount + 2) {
259
+            if (localLastNCount &&
260
+                localLastNCount > 0 &&
261
+                $('#remoteVideos>span').length >= localLastNCount + 2) {
271
                 remoteVideos[resourceJid].showPeerContainer('hide');
262
                 remoteVideos[resourceJid].showPeerContainer('hide');
272
             }
263
             }
273
             else
264
             else
298
                 currentDominantSpeaker === resourceJid)) {
289
                 currentDominantSpeaker === resourceJid)) {
299
             LargeVideo.updateLargeVideo(resourceJid, true);
290
             LargeVideo.updateLargeVideo(resourceJid, true);
300
         }
291
         }
301
-    }
292
+    };
302
 
293
 
303
     /**
294
     /**
304
      * Shows the presence status message for the given video.
295
      * Shows the presence status message for the given video.
327
             }
318
             }
328
 
319
 
329
             var resourceJid = Strophe.getResourceFromJid(jid);
320
             var resourceJid = Strophe.getResourceFromJid(jid);
330
-
331
             var member = members[jid];
321
             var member = members[jid];
332
 
322
 
333
             if (member.role === 'moderator') {
323
             if (member.role === 'moderator') {
334
-
335
                 remoteVideos[resourceJid].removeRemoteVideoMenu();
324
                 remoteVideos[resourceJid].removeRemoteVideoMenu();
336
-
337
                 remoteVideos[resourceJid].createModeratorIndicatorElement();
325
                 remoteVideos[resourceJid].createModeratorIndicatorElement();
338
             } else if (isModerator) {
326
             } else if (isModerator) {
339
                 // We are moderator, but user is not - add menu
327
                 // We are moderator, but user is not - add menu
373
 
361
 
374
         $('.userAvatar').css('left', (width - height) / 2);
362
         $('.userAvatar').css('left', (width - height) / 2);
375
 
363
 
376
-        if(animate)
377
-        {
364
+        if(animate) {
378
             $('#remoteVideos').animate({
365
             $('#remoteVideos').animate({
379
                     height: height
366
                     height: height
380
                 },
367
                 },
398
                     }
385
                     }
399
                 });
386
                 });
400
 
387
 
401
-        }
402
-        else
403
-        {
388
+        } else {
404
             // size videos so that while keeping AR and max height, we have a
389
             // size videos so that while keeping AR and max height, we have a
405
             // nice fit
390
             // nice fit
406
             $('#remoteVideos').height(height);
391
             $('#remoteVideos').height(height);
407
             $('#remoteVideos>span').width(width);
392
             $('#remoteVideos>span').width(width);
408
             $('#remoteVideos>span').height(height);
393
             $('#remoteVideos>span').height(height);
409
 
394
 
410
-
411
             $(document).trigger("remotevideo.resized", [width, height]);
395
             $(document).trigger("remotevideo.resized", [width, height]);
412
         }
396
         }
413
     };
397
     };
523
                 remoteVideos[resourceJid].updateRemoteVideoMenu(isMuted);
507
                 remoteVideos[resourceJid].updateRemoteVideoMenu(isMuted);
524
             }
508
             }
525
         }
509
         }
526
-
527
-
528
     };
510
     };
529
 
511
 
530
     /**
512
     /**
531
      * On video muted event.
513
      * On video muted event.
532
      */
514
      */
533
     my.onVideoMute = function (jid, value) {
515
     my.onVideoMute = function (jid, value) {
534
-        if(jid !== APP.xmpp.myJid() && !APP.RTC.muteRemoteVideoStream(jid, value))
516
+        if (jid !== APP.xmpp.myJid() &&
517
+            !APP.RTC.muteRemoteVideoStream(jid, value))
535
             return;
518
             return;
536
 
519
 
537
         if (jid === APP.xmpp.myJid()) {
520
         if (jid === APP.xmpp.myJid()) {
555
      */
538
      */
556
     my.onDisplayNameChanged =
539
     my.onDisplayNameChanged =
557
                     function (jid, displayName, status) {
540
                     function (jid, displayName, status) {
558
-        if (jid === 'localVideoContainer'
559
-            || jid === APP.xmpp.myJid()) {
541
+        if (jid === 'localVideoContainer' ||
542
+            jid === APP.xmpp.myJid()) {
560
             localVideoThumbnail.setDisplayName(displayName);
543
             localVideoThumbnail.setDisplayName(displayName);
561
         } else {
544
         } else {
562
             VideoLayout.ensurePeerContainerExists(jid);
545
             VideoLayout.ensurePeerContainerExists(jid);
564
                 displayName,
547
                 displayName,
565
                 status);
548
                 status);
566
         }
549
         }
567
-
568
     };
550
     };
569
 
551
 
570
     /**
552
     /**
599
 
581
 
600
         // Local video will not have container found, but that's ok
582
         // Local video will not have container found, but that's ok
601
         // since we don't want to switch to local video.
583
         // since we don't want to switch to local video.
602
-        if (!focusedVideoResourceJid && videoSel.length)
603
-        {
584
+        if (!focusedVideoResourceJid && videoSel.length) {
604
             // Update the large video if the video source is already available,
585
             // Update the large video if the video source is already available,
605
             // otherwise wait for the "videoactive.jingle" event.
586
             // otherwise wait for the "videoactive.jingle" event.
606
             if (videoSel[0].currentTime > 0) {
587
             if (videoSel[0].currentTime > 0) {
616
      * @param endpointsEnteringLastN the list currently entering last N
597
      * @param endpointsEnteringLastN the list currently entering last N
617
      * endpoints
598
      * endpoints
618
      */
599
      */
619
-    my.onLastNEndpointsChanged = function ( lastNEndpoints,
620
-                                                endpointsEnteringLastN,
621
-                                                stream) {
600
+    my.onLastNEndpointsChanged = function (lastNEndpoints,
601
+                                           endpointsEnteringLastN,
602
+                                           stream) {
622
         if (lastNCount !== lastNEndpoints.length)
603
         if (lastNCount !== lastNEndpoints.length)
623
             lastNCount = lastNEndpoints.length;
604
             lastNCount = lastNEndpoints.length;
624
 
605
 
655
         }
636
         }
656
 
637
 
657
         localLastNSet = nextLocalLastNSet;
638
         localLastNSet = nextLocalLastNSet;
658
-
659
         var updateLargeVideo = false;
639
         var updateLargeVideo = false;
660
 
640
 
661
         // Handle LastN/local LastN changes.
641
         // Handle LastN/local LastN changes.
663
             var resourceJid = VideoLayout.getPeerContainerResourceJid(element);
643
             var resourceJid = VideoLayout.getPeerContainerResourceJid(element);
664
 
644
 
665
             var isReceived = true;
645
             var isReceived = true;
666
-            if (resourceJid
667
-                && lastNEndpoints.indexOf(resourceJid) < 0
668
-                && localLastNSet.indexOf(resourceJid) < 0) {
646
+            if (resourceJid &&
647
+                lastNEndpoints.indexOf(resourceJid) < 0 &&
648
+                localLastNSet.indexOf(resourceJid) < 0) {
669
                 console.log("Remove from last N", resourceJid);
649
                 console.log("Remove from last N", resourceJid);
670
                 remoteVideos[resourceJid].showPeerContainer('hide');
650
                 remoteVideos[resourceJid].showPeerContainer('hide');
671
                 isReceived = false;
651
                 isReceived = false;
672
-            } else if (resourceJid
673
-                && $('#participant_' + resourceJid).is(':visible')
674
-                && lastNEndpoints.indexOf(resourceJid) < 0
675
-                && localLastNSet.indexOf(resourceJid) >= 0) {
652
+            } else if (resourceJid &&
653
+                $('#participant_' + resourceJid).is(':visible') &&
654
+                lastNEndpoints.indexOf(resourceJid) < 0 &&
655
+                localLastNSet.indexOf(resourceJid) >= 0) {
676
                 remoteVideos[resourceJid].showPeerContainer('avatar');
656
                 remoteVideos[resourceJid].showPeerContainer('avatar');
677
                 isReceived = false;
657
                 isReceived = false;
678
             }
658
             }
682
                 // it is no longer being received. If resourceJid was being
662
                 // it is no longer being received. If resourceJid was being
683
                 // displayed in the large video we have to switch to another
663
                 // displayed in the large video we have to switch to another
684
                 // user.
664
                 // user.
685
-                if (!updateLargeVideo && resourceJid === LargeVideo.getResourceJid()) {
665
+                if (!updateLargeVideo &&
666
+                    resourceJid === LargeVideo.getResourceJid()) {
686
                     updateLargeVideo = true;
667
                     updateLargeVideo = true;
687
                 }
668
                 }
688
             }
669
             }
700
                     console.log("Add to last N", resourceJid);
681
                     console.log("Add to last N", resourceJid);
701
 
682
 
702
                     var jid = APP.xmpp.findJidFromResource(resourceJid);
683
                     var jid = APP.xmpp.findJidFromResource(resourceJid);
703
-                    var mediaStream = APP.RTC.remoteStreams[jid][MediaStreamType.VIDEO_TYPE];
684
+                    var mediaStream =
685
+                        APP.RTC.remoteStreams[jid][MediaStreamType.VIDEO_TYPE];
704
                     var sel = VideoLayout.getPeerVideoSel(resourceJid);
686
                     var sel = VideoLayout.getPeerVideoSel(resourceJid);
705
 
687
 
706
                     APP.RTC.attachMediaStream(sel, mediaStream.stream);
688
                     APP.RTC.attachMediaStream(sel, mediaStream.stream);
716
 
698
 
717
                         updateLargeVideo = false;
699
                         updateLargeVideo = false;
718
                     }
700
                     }
719
-                    remoteVideos[resourceJid].waitForPlayback(sel, mediaStream.stream);
701
+                    remoteVideos[resourceJid].
702
+                        waitForPlayback(sel, mediaStream.stream);
720
                 }
703
                 }
721
             });
704
             });
722
         }
705
         }
726
         // the large video now.
709
         // the large video now.
727
 
710
 
728
         if (updateLargeVideo) {
711
         if (updateLargeVideo) {
729
-
730
-            var resource, container, src;
712
+            var resource;
731
             var myResource
713
             var myResource
732
                 = APP.xmpp.myResource();
714
                 = APP.xmpp.myResource();
733
 
715
 
734
             // Find out which endpoint to show in the large video.
716
             // Find out which endpoint to show in the large video.
735
-            for (var i = 0; i < lastNEndpoints.length; i++) {
717
+            for (i = 0; i < lastNEndpoints.length; i++) {
736
                 resource = lastNEndpoints[i];
718
                 resource = lastNEndpoints[i];
737
                 if (!resource || resource === myResource)
719
                 if (!resource || resource === myResource)
738
                     continue;
720
                     continue;
740
                 // videoSrcToSsrc needs to be update for this call to succeed.
722
                 // videoSrcToSsrc needs to be update for this call to succeed.
741
                 LargeVideo.updateLargeVideo(resource);
723
                 LargeVideo.updateLargeVideo(resource);
742
                 break;
724
                 break;
743
-
744
             }
725
             }
745
         }
726
         }
746
     };
727
     };
752
      */
733
      */
753
     my.updateLocalConnectionStats = function (percent, object) {
734
     my.updateLocalConnectionStats = function (percent, object) {
754
         var resolution = null;
735
         var resolution = null;
755
-        if(object.resolution !== null)
756
-        {
736
+        if (object.resolution !== null) {
757
             resolution = object.resolution;
737
             resolution = object.resolution;
758
             object.resolution = resolution[APP.xmpp.myJid()];
738
             object.resolution = resolution[APP.xmpp.myJid()];
759
             delete resolution[APP.xmpp.myJid()];
739
             delete resolution[APP.xmpp.myJid()];
760
         }
740
         }
761
         localVideoThumbnail.updateStatsIndicator(percent, object);
741
         localVideoThumbnail.updateStatsIndicator(percent, object);
762
-        for(var jid in resolution)
763
-        {
764
-            if(resolution[jid] === null)
742
+        for (var jid in resolution) {
743
+            if (resolution[jid] === null)
765
                 continue;
744
                 continue;
766
             var resourceJid = Strophe.getResourceFromJid(jid);
745
             var resourceJid = Strophe.getResourceFromJid(jid);
767
-            if(remoteVideos[resourceJid] && remoteVideos[resourceJid].connectionIndicator)
768
-            {
769
-                remoteVideos[resourceJid].connectionIndicator.updateResolution(resolution[jid]);
746
+            if (remoteVideos[resourceJid] &&
747
+                remoteVideos[resourceJid].connectionIndicator) {
748
+                remoteVideos[resourceJid].connectionIndicator.
749
+                    updateResolution(resolution[jid]);
770
             }
750
             }
771
         }
751
         }
772
-
773
     };
752
     };
774
 
753
 
775
     /**
754
     /**
781
     my.updateConnectionStats = function (jid, percent, object) {
760
     my.updateConnectionStats = function (jid, percent, object) {
782
         var resourceJid = Strophe.getResourceFromJid(jid);
761
         var resourceJid = Strophe.getResourceFromJid(jid);
783
 
762
 
784
-        if(remoteVideos[resourceJid])
763
+        if (remoteVideos[resourceJid])
785
             remoteVideos[resourceJid].updateStatsIndicator(percent, object);
764
             remoteVideos[resourceJid].updateStatsIndicator(percent, object);
786
     };
765
     };
787
 
766
 
797
      * Hides all the indicators
776
      * Hides all the indicators
798
      */
777
      */
799
     my.onStatsStop = function () {
778
     my.onStatsStop = function () {
800
-        for(var video in remoteVideos)
801
-        {
779
+        for(var video in remoteVideos) {
802
             remoteVideos[video].hideIndicator();
780
             remoteVideos[video].hideIndicator();
803
         }
781
         }
804
         localVideoThumbnail.hideIndicator();
782
         localVideoThumbnail.hideIndicator();
807
     my.participantLeft = function (jid) {
785
     my.participantLeft = function (jid) {
808
         // Unlock large video
786
         // Unlock large video
809
         var resourceJid = Strophe.getResourceFromJid(jid);
787
         var resourceJid = Strophe.getResourceFromJid(jid);
810
-        if (focusedVideoResourceJid === resourceJid)
811
-        {
788
+        if (focusedVideoResourceJid === resourceJid) {
812
             console.info("Focused video owner has left the conference");
789
             console.info("Focused video owner has left the conference");
813
             focusedVideoResourceJid = null;
790
             focusedVideoResourceJid = null;
814
         }
791
         }
837
     };
814
     };
838
 
815
 
839
     my.showMore = function (jid) {
816
     my.showMore = function (jid) {
840
-        if (jid === 'local')
841
-        {
817
+        if (jid === 'local') {
842
             localVideoThumbnail.connectionIndicator.showMore();
818
             localVideoThumbnail.connectionIndicator.showMore();
843
-        }
844
-        else
845
-        {
819
+        } else {
846
             var remoteVideo = remoteVideos[Strophe.getResourceFromJid(jid)];
820
             var remoteVideo = remoteVideos[Strophe.getResourceFromJid(jid)];
847
             if (remoteVideo) {
821
             if (remoteVideo) {
848
                 remoteVideo.connectionIndicator.showMore();
822
                 remoteVideo.connectionIndicator.showMore();
850
                 console.info("Error - no remote video for jid: " + jid);
824
                 console.info("Error - no remote video for jid: " + jid);
851
             }
825
             }
852
         }
826
         }
853
-
854
     };
827
     };
855
 
828
 
856
     my.addPreziContainer = function (id) {
829
     my.addPreziContainer = function (id) {
861
 
834
 
862
     my.setLargeVideoVisible = function (isVisible) {
835
     my.setLargeVideoVisible = function (isVisible) {
863
         LargeVideo.setLargeVideoVisible(isVisible);
836
         LargeVideo.setLargeVideoVisible(isVisible);
864
-        if(!isVisible && focusedVideoResourceJid)
865
-        {
837
+        if(!isVisible && focusedVideoResourceJid) {
866
             var smallVideo = VideoLayout.getSmallVideo(focusedVideoResourceJid);
838
             var smallVideo = VideoLayout.getSmallVideo(focusedVideoResourceJid);
867
             if(smallVideo) {
839
             if(smallVideo) {
868
                 smallVideo.focus(false);
840
                 smallVideo.focus(false);
872
         }
844
         }
873
     };
845
     };
874
 
846
 
875
-
876
     /**
847
     /**
877
      * Resizes the video area
848
      * Resizes the video area
878
-     * @param completeFunction a function to be called when the video space is resized
849
+     * @param callback a function to be called when the video space is
850
+     * resized.
879
      */
851
      */
880
-    my.resizeVideoArea = function(isVisible, completeFunction) {
881
-        LargeVideo.resizeVideoAreaAnimated(isVisible, completeFunction);
852
+    my.resizeVideoArea = function(isVisible, callback) {
853
+        LargeVideo.resizeVideoAreaAnimated(isVisible, callback);
882
         VideoLayout.resizeThumbnails(true);
854
         VideoLayout.resizeThumbnails(true);
883
-
884
     };
855
     };
885
 
856
 
886
     my.getSmallVideo = function (resourceJid) {
857
     my.getSmallVideo = function (resourceJid) {
887
-        if(resourceJid == APP.xmpp.myResource())
888
-        {
858
+        if(resourceJid == APP.xmpp.myResource()) {
889
             return localVideoThumbnail;
859
             return localVideoThumbnail;
890
-        }
891
-        else
892
-        {
860
+        } else {
893
             if(!remoteVideos[resourceJid])
861
             if(!remoteVideos[resourceJid])
894
                 return null;
862
                 return null;
895
             return remoteVideos[resourceJid];
863
             return remoteVideos[resourceJid];
896
         }
864
         }
897
     };
865
     };
898
 
866
 
899
-    my.userAvatarChanged = function(resourceJid, thumbUrl)
900
-    {
867
+    my.userAvatarChanged = function(resourceJid, thumbUrl) {
901
         var smallVideo = VideoLayout.getSmallVideo(resourceJid);
868
         var smallVideo = VideoLayout.getSmallVideo(resourceJid);
902
         if(smallVideo)
869
         if(smallVideo)
903
             smallVideo.avatarChanged(thumbUrl);
870
             smallVideo.avatarChanged(thumbUrl);

+ 12
- 12
modules/UI/welcome_page/RoomnameGenerator.js View File

49
     "Obviously", "Often", "Painfully", "Patiently", "Playfully", "Politely", "Poorly", "Precisely", "Promptly",
49
     "Obviously", "Often", "Painfully", "Patiently", "Playfully", "Politely", "Poorly", "Precisely", "Promptly",
50
     "Quickly", "Quietly", "Randomly", "Rapidly", "Rarely", "Recklessly", "Regularly", "Remorsefully", "Responsibly",
50
     "Quickly", "Quietly", "Randomly", "Rapidly", "Rarely", "Recklessly", "Regularly", "Remorsefully", "Responsibly",
51
     "Rudely", "Ruthlessly", "Sadly", "Scornfully", "Seamlessly", "Seldom", "Selfishly", "Seriously", "Shakily",
51
     "Rudely", "Ruthlessly", "Sadly", "Scornfully", "Seamlessly", "Seldom", "Selfishly", "Seriously", "Shakily",
52
-    "Sharply", "Sideways", "Silently", "Sleepily", "Slightly", "Slowly", "Slyly", "Smoothly", "Softly", "Solemnly", "Steadily", "Sternly", "Strangely", "Strongly", "Stunningly", "Surely", "Tenderly", "Thoughtfully",
52
+    "Sharply", "Sideways", "Silently", "Sleepily", "Slightly", "Slowly", "Slyly", "Smoothly", "Softly", "Solemnly",
53
+    "Steadily", "Sternly", "Strangely", "Strongly", "Stunningly", "Surely", "Tenderly", "Thoughtfully",
53
     "Tightly", "Uneasily", "Vanishingly", "Violently", "Warmly", "Weakly", "Wearily", "Weekly", "Weirdly", "Well",
54
     "Tightly", "Uneasily", "Vanishingly", "Violently", "Warmly", "Weakly", "Wearily", "Weekly", "Weirdly", "Well",
54
     "Well", "Wickedly", "Wildly", "Wisely", "Wonderfully", "Yearly"
55
     "Well", "Wickedly", "Wildly", "Wisely", "Wonderfully", "Yearly"
55
 ];
56
 ];
137
 /*
138
 /*
138
  * Returns a random element from the array 'arr'
139
  * Returns a random element from the array 'arr'
139
  */
140
  */
140
-function randomElement(arr)
141
-{
141
+function randomElement(arr) {
142
     return arr[Math.floor(Math.random() * arr.length)];
142
     return arr[Math.floor(Math.random() * arr.length)];
143
 }
143
 }
144
 
144
 
146
  * Returns true if the string 's' contains one of the
146
  * Returns true if the string 's' contains one of the
147
  * template strings.
147
  * template strings.
148
  */
148
  */
149
-function hasTemplate(s)
150
-{
149
+function hasTemplate(s) {
151
     for (var template in CATEGORIES){
150
     for (var template in CATEGORIES){
152
         if (s.indexOf(template) >= 0){
151
         if (s.indexOf(template) >= 0){
153
             return true;
152
             return true;
159
  * Generates new room name.
158
  * Generates new room name.
160
  */
159
  */
161
 var RoomNameGenerator = {
160
 var RoomNameGenerator = {
162
-    generateRoomWithoutSeparator: function()
163
-    {
164
-        // Note that if more than one pattern is available, the choice of 'name' won't be random (names from patterns
165
-        // with fewer options will have higher probability of being chosen that names from patterns with more options).
161
+    generateRoomWithoutSeparator: function() {
162
+        // Note that if more than one pattern is available, the choice of
163
+        // 'name' won't have a uniform distribution amongst all patterns (names
164
+        // from patterns with fewer options will have higher probability of
165
+        // being chosen that names from patterns with more options).
166
         var name = randomElement(PATTERNS);
166
         var name = randomElement(PATTERNS);
167
         var word;
167
         var word;
168
-        while (hasTemplate(name)){
169
-            for (var template in CATEGORIES){
168
+        while (hasTemplate(name)) {
169
+            for (var template in CATEGORIES) {
170
                 word = randomElement(CATEGORIES[template]);
170
                 word = randomElement(CATEGORIES[template]);
171
                 name = name.replace(template, word);
171
                 name = name.replace(template, word);
172
             }
172
             }
174
 
174
 
175
         return name;
175
         return name;
176
     }
176
     }
177
-}
177
+};
178
 
178
 
179
 module.exports = RoomNameGenerator;
179
 module.exports = RoomNameGenerator;

+ 22
- 27
modules/UI/welcome_page/WelcomePage.js View File

1
+/* global $, interfaceConfig */
1
 var animateTimeout, updateTimeout;
2
 var animateTimeout, updateTimeout;
2
 
3
 
3
 var RoomNameGenerator = require("./RoomnameGenerator");
4
 var RoomNameGenerator = require("./RoomnameGenerator");
4
 
5
 
5
-function enter_room()
6
-{
6
+function enter_room() {
7
     var val = $("#enter_room_field").val();
7
     var val = $("#enter_room_field").val();
8
     if(!val) {
8
     if(!val) {
9
         val = $("#enter_room_field").attr("room_name");
9
         val = $("#enter_room_field").attr("room_name");
21
     }, 70);
21
     }, 70);
22
 }
22
 }
23
 
23
 
24
-function update_roomname()
25
-{
24
+function update_roomname() {
26
     var word = RoomNameGenerator.generateRoomWithoutSeparator();
25
     var word = RoomNameGenerator.generateRoomWithoutSeparator();
27
     $("#enter_room_field").attr("room_name", word);
26
     $("#enter_room_field").attr("room_name", word);
28
     $("#enter_room_field").attr("placeholder", "");
27
     $("#enter_room_field").attr("placeholder", "");
31
     updateTimeout = setTimeout(update_roomname, 10000);
30
     updateTimeout = setTimeout(update_roomname, 10000);
32
 }
31
 }
33
 
32
 
34
-
35
-function setupWelcomePage()
36
-{
33
+function setupWelcomePage() {
37
     $("#videoconference_page").hide();
34
     $("#videoconference_page").hide();
38
     $("#domain_name").text(
35
     $("#domain_name").text(
39
             window.location.protocol + "//" + window.location.host + "/");
36
             window.location.protocol + "//" + window.location.host + "/");
40
     if (interfaceConfig.SHOW_JITSI_WATERMARK) {
37
     if (interfaceConfig.SHOW_JITSI_WATERMARK) {
41
-        var leftWatermarkDiv
42
-            = $("#welcome_page_header div[class='watermark leftwatermark']");
43
-        if(leftWatermarkDiv && leftWatermarkDiv.length > 0)
44
-        {
38
+        var leftWatermarkDiv =
39
+            $("#welcome_page_header div[class='watermark leftwatermark']");
40
+        if(leftWatermarkDiv && leftWatermarkDiv.length > 0) {
45
             leftWatermarkDiv.css({display: 'block'});
41
             leftWatermarkDiv.css({display: 'block'});
46
-            leftWatermarkDiv.parent().get(0).href
47
-                = interfaceConfig.JITSI_WATERMARK_LINK;
42
+            leftWatermarkDiv.parent().get(0).href =
43
+                interfaceConfig.JITSI_WATERMARK_LINK;
48
         }
44
         }
49
 
45
 
50
     }
46
     }
51
 
47
 
52
     if (interfaceConfig.SHOW_BRAND_WATERMARK) {
48
     if (interfaceConfig.SHOW_BRAND_WATERMARK) {
53
-        var rightWatermarkDiv
54
-            = $("#welcome_page_header div[class='watermark rightwatermark']");
49
+        var rightWatermarkDiv =
50
+            $("#welcome_page_header div[class='watermark rightwatermark']");
55
         if(rightWatermarkDiv && rightWatermarkDiv.length > 0) {
51
         if(rightWatermarkDiv && rightWatermarkDiv.length > 0) {
56
             rightWatermarkDiv.css({display: 'block'});
52
             rightWatermarkDiv.css({display: 'block'});
57
-            rightWatermarkDiv.parent().get(0).href
58
-                = interfaceConfig.BRAND_WATERMARK_LINK;
59
-            rightWatermarkDiv.get(0).style.backgroundImage
60
-                = "url(images/rightwatermark.png)";
53
+            rightWatermarkDiv.parent().get(0).href =
54
+                interfaceConfig.BRAND_WATERMARK_LINK;
55
+            rightWatermarkDiv.get(0).style.backgroundImage =
56
+                "url(images/rightwatermark.png)";
61
         }
57
         }
62
     }
58
     }
63
 
59
 
66
             .css({display: 'block'});
62
             .css({display: 'block'});
67
     }
63
     }
68
 
64
 
69
-    $("#enter_room_button").click(function()
70
-    {
65
+    $("#enter_room_button").click(function() {
71
         enter_room();
66
         enter_room();
72
     });
67
     });
73
 
68
 
77
         }
72
         }
78
     });
73
     });
79
 
74
 
80
-    if (!(interfaceConfig.GENERATE_ROOMNAMES_ON_WELCOME_PAGE === false)){
75
+    if (interfaceConfig.GENERATE_ROOMNAMES_ON_WELCOME_PAGE !== false) {
81
         var updateTimeout;
76
         var updateTimeout;
82
         var animateTimeout;
77
         var animateTimeout;
83
-        $("#reload_roomname").click(function () {
78
+        var selector = $("#reload_roomname");
79
+        selector.click(function () {
84
             clearTimeout(updateTimeout);
80
             clearTimeout(updateTimeout);
85
             clearTimeout(animateTimeout);
81
             clearTimeout(animateTimeout);
86
             update_roomname();
82
             update_roomname();
87
         });
83
         });
88
-        $("#reload_roomname").show();
89
-
84
+        selector.show();
90
 
85
 
91
         update_roomname();
86
         update_roomname();
92
     }
87
     }
93
 
88
 
94
     $("#disable_welcome").click(function () {
89
     $("#disable_welcome").click(function () {
95
-        window.localStorage.welcomePageDisabled
96
-            = $("#disable_welcome").is(":checked");
90
+        window.localStorage.welcomePageDisabled =
91
+            $("#disable_welcome").is(":checked");
97
     });
92
     });
98
 
93
 
99
 }
94
 }

Loading…
Cancel
Save