VRFS-3334 : Proper initialization of webcam viewer with unique parents. Trigger resolution change when select box changes.

web/app/assets/javascripts/accounts_video_profile.js

@@ -11,12 +11,12 @@
         'beforeHide':beforeHide
       };
       app.bindScreen('account/video', screenBindings);
-      
-      $webcamViewer.init($(".webcam-container"))      
+
+      $webcamViewer.init($("#account-video-profile .webcam-container"))
     }
 
     function beforeShow() {
-      $webcamViewer.beforeShow()      
+      $webcamViewer.beforeShow()
     }
 
     function beforeHide() {

web/app/assets/javascripts/react-components/stores/SessionStore.js.coffee

@@ -52,7 +52,7 @@ NotificationActions = @NotificationActions
 
       if gon.global.video_available && gon.global.video_available!="none" && context.JK.WebcamViewer?
         @webcamViewer = new context.JK.WebcamViewer()
-        @webcamViewer.init()
+        @webcamViewer.init($("#create-session-layout"))
         @webcamViewer.setVideoOff()
 
 

web/app/assets/javascripts/session.js

@@ -3294,7 +3294,7 @@
             $voiceChat = $screen.find('#voice-chat');
             $tracksHolder = $screen.find('#tracks')
             if(gon.global.video_available && gon.global.video_available!="none") {
-              webcamViewer.init($(".webcam-container"))
+              webcamViewer.init($("#create-session-layout .webcam-container"))
               webcamViewer.setVideoOff()
             }
             events();

web/app/assets/javascripts/webcam_viewer.js.coffee

@@ -14,7 +14,6 @@ context.JK.WebcamViewer = class WebcamViewer
     @resolution=null
 
   init: (root) =>
-
     # the session usage of webcamViewer does not actually pass in anything
     root = $() unless root?
 
@@ -23,34 +22,36 @@ context.JK.WebcamViewer = class WebcamViewer
     @webcamSelect = @root.find(".webcam-select-container select")
     @resolutionSelect = @root.find(".webcam-resolution-select-container select")
     @webcamSelect.on("change", this.selectWebcam)
-    @toggleBtn.on 'click', @toggleWebcam
+    @toggleBtn.on('click', @toggleWebcam)
+    @resolutionSelect.on("change", this.selectResolution)
+    logger.debug("Initialed with (unique) select",@webcamSelect)
 
-  beforeShow:() =>    
+  beforeShow:() =>
     this.loadWebCams()
     this.selectWebcam()
     this.loadResolutions()
     this.selectResolution()
     @initialScan = true
     @client.SessStopVideoSharing()
-    #client.SessSetInsetPosition(5)   
+    #client.SessSetInsetPosition(5)
     #client.SessSetInsetSize(1)
     #client.FTUESetAutoSelectVideoLayout(false)
-    #client.SessSelectVideoDisplayLayoutGroup(1)      
-    
-  
+    #client.SessSelectVideoDisplayLayoutGroup(1)
+
+
   selectWebcam:(e, data) =>
-    device = @webcamSelect.val()    
+    device = @webcamSelect.val()
     if device?
       caps = @client.FTUEGetVideoCaptureDeviceCapabilities(device)
       @logger.debug("Got capabilities from device", caps, device)
-      @client.FTUESelectVideoCaptureDevice(device, caps)      
-      
+      @client.FTUESelectVideoCaptureDevice(device, caps)
+
   selectResolution:() =>
-    @logger.debug 'Selecting res control: ', @resolutionSelect
+    @logger.debug 'Selecting from res control: ', @resolutionSelect
     @resolution = @resolutionSelect.val()
     if @resolution?
-      @logger.debug 'Selecting res: ', @resolution
-      @client.FTUESetVideoEncodeResolution @resolution    
+      @logger.debug 'Selecting webcam resolution: ', @resolution
+      @client.FTUESetVideoEncodeResolution @resolution
       # if @isVideoShared
       #   this.setVideoOff()
       #   this.toggleWebcam()
@@ -58,18 +59,18 @@ context.JK.WebcamViewer = class WebcamViewer
   setVideoOff:() =>
     if this.isVideoShared()
       @client.SessStopVideoSharing()
-      
+
   isVideoShared:() =>
     @videoShared
-    
+
   setToggleState:() =>
     available = @webcamSelect.find('option').size() > 0
     shared = this.isVideoShared()
     @toggleBtn.prop 'disabled', true
     @toggleBtn.prop 'disabled', !available
-    
+
   toggleWebcam:() =>
-    @logger.debug 'Toggling webcam from: ', this.isVideoShared()
+    @logger.debug 'Toggling webcam from: ', this.isVideoShared(), @toggleBtn
     if this.isVideoShared()
       @toggleBtn.removeClass("selected")
       @client.SessStopVideoSharing()
@@ -82,11 +83,11 @@ context.JK.WebcamViewer = class WebcamViewer
   selectedDeviceName:() =>
     webcamName="None Configured"
     webcam = @client.FTUECurrentSelectedVideoDevice()
-    if (webcam? && Object.keys(webcam).length>0) 
-      webcamName = _.values(webcam)[0]    
+    if (webcam? && Object.keys(webcam).length>0)
+      webcamName = _.values(webcam)[0]
 
     webcamName
-    
+
   loadWebCams:() =>
     devices = @client.FTUEGetVideoCaptureDeviceNames()
     selectedDevice = this.selectedDeviceName()
@@ -99,11 +100,11 @@ context.JK.WebcamViewer = class WebcamViewer
         text: device)
       selectControl.append option
     selectControl.val selectedDevice
-    
+
     if devices.length == 0
       @root.find('.no-webcam-msg').removeClass 'hidden'
     else
-      @root.find('.no-webcam-msg').addClass 'hidden'      
+      @root.find('.no-webcam-msg').addClass 'hidden'
 
   loadResolutions:() =>
     resolutions = @client.FTUEGetAvailableEncodeVideoResolutions()
@@ -113,7 +114,7 @@ context.JK.WebcamViewer = class WebcamViewer
       option = $('<option/>',
         value: value
         text: value)
-      selectControl.append option      
+      selectControl.append option
 
     if @resolution != null and @resolution != ''
       selectControl.val(@resolution)