more UI tweaks for video settup in account screen VRFS-3428

web/app/assets/javascripts/accounts_video_profile.js

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

web/app/assets/javascripts/fakeJamClient.js

@@ -87,8 +87,8 @@
         }
         function FTUEGetAvailableEncodeVideoResolutions() {
             return {
-                1: "1024x768",
-                2: "800x600"
+                1: "VGA    (640X480)",
+                2: "WHD    (1280X720)"
             }
         }
 

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

@@ -3,12 +3,12 @@ context = window
 context.JK ||= {};
 
 BackendToFrontend = {
-  "QCIF   (176X144)" : "QCIF   (176X144)",
-  "CIF    (352X288)" : "CIF    (352X288)",
-  "VGA    (640X480)" : "VGA    (640X480)",
-  "4CIF   (704X576)" : "4CIF   (704X576)",
-  "1/2WHD (640X360)" : "1/2WHD (640X360)",
-  "WHD    (1280X720)": "WHD   (1280X720)",
+  "QCIF   (176X144)" :   "QCIF   (176X144)",
+  "CIF    (352X288)" :   "CIF    (352X288)",
+  "VGA    (640X480)" :   "VGA    (640X480)",
+  "4CIF   (704X576)" :   "4CIF   (704X576)",
+  "1/2WHD (640X360)" :   "1/2WHD (640X360)",
+  "WHD    (1280X720)":   "WHD    (1280X720)",
   "FHD    (1920x1080)" : "FHD    (1920x1080)"
 }
 
@@ -28,20 +28,28 @@ context.JK.WebcamViewer = class WebcamViewer
     @videoShared = false
     @resolution = null
     @videoSettingsHelp = null
-  init: (root) =>
+    @showBackBtn = false
+
+  init: (root, showBackBtn) =>
     # the session usage of webcamViewer does not actually pass in anything
     root = $() unless root?
 
     @root = root
+    @showBackBtn = showBackBtn
     @toggleBtn = @root.find(".webcam-test-btn")
     @webcamSelect = @root.find(".webcam-select-container select")
     @resolutionSelect = @root.find(".webcam-resolution-select-container select")
     @videoSettingsHelp = @root.find('.ftue-video-settings-help')
-    @webcamSelect.on("change", this.selectWebcam)
+    @backBtn = @root.find('.back-btn')
+    @webcamSelect.on("change", @selectWebcam)
     @toggleBtn.on('click', @toggleWebcam)
-    @resolutionSelect.on("change", this.selectResolution)
+    @resolutionSelect.on("change", @selectResolution)
+    @backBtn.on('click', @back)
+    @backBtn.show() if @showBackBtn
     #logger.debug("Initialed with (unique) select",@webcamSelect)
 
+
+    console.log("@videoSettingsHelp", @videoSettingsHelp)
     context.JK.helpBubble(@videoSettingsHelp, 'ftue-video-settings', {}, {width:300})
     @videoSettingsHelp.click(false)
   beforeShow:() =>
@@ -96,6 +104,9 @@ context.JK.WebcamViewer = class WebcamViewer
     @toggleBtn.prop 'disabled', true
     @toggleBtn.prop 'disabled', !available
 
+  back: () =>
+    window.location = '/client#/account'
+
   toggleWebcam:() =>
     @logger.debug 'Toggling webcam from: ', this.isVideoShared(), @toggleBtn
     if this.isVideoShared()
@@ -162,4 +173,4 @@ context.JK.WebcamViewer = class WebcamViewer
     if @resolution != null and @resolution != ''
       selectControl.val(@resolution)
     else
-      selectControl.val(BackendToFrontend["WHD    (1280X720)"])
+      selectControl.val(BackendToFrontend["WHD    (1280X720)"] + '|30')

web/app/assets/stylesheets/client/accountVideo.css.scss

@@ -0,0 +1,46 @@
+@import 'common';
+
+#account-video-profile {
+  h2.subcaption {
+    font-size: 23px;
+    font-weight: 400;
+    margin-bottom:20px !important;
+  }
+
+  div.subcaption {
+    font-size:14px;
+    width:500px;
+  }
+
+  .sub-header {
+    font-size: 16px;
+    font-weight: 400;
+    margin-bottom:2px;
+  }
+
+  .webcam-container {
+    margin-top:20px;
+  }
+
+  select {
+    @include border_box_sizing;
+    width:350px;
+
+  }
+
+  form {
+    @include border_box_sizing;
+    width:350px;
+  }
+
+  a.ftue-video-settings-help {
+    margin-left:15px;
+
+    position: absolute;
+    margin-top: 3px;
+  }
+
+  .configure-webcam {
+    float:right;
+  }
+}

web/app/assets/stylesheets/client/client.css

@@ -37,6 +37,7 @@
  *= require ./accountProfileSamples
  *= require ./accountPaymentHistory
  *= require ./account_affiliate
+ *= require ./accountVideo
  *= require ./search
  *= require ./ftue
  *= require ./jamServer

web/app/views/clients/_webcam.html.slim

@@ -1,13 +1,14 @@
 form.video
   h2.sub-header.select-webcam select webcam:
   .webcam-select-container.wizard_control
-    select.w100
+    select
   h2.sub-header.select-resolution select video capture resolution & frame rate:
   .webcam-resolution-select-container.wizard_control
-    select.w100
+    select
     a.ftue-video-settings-help href='#' [?]
   .configure-webcam.wizard_control
-    a.button-grey-toggle.webcam-test-btn Test Webcam
+    a.hidden.button-grey.back-btn BACK
+    a.button-orange.webcam-test-btn TEST WEBCAM
   .hidden.configure-webcam.wizard_control
-    a.hidden.button-grey-toggle.webcam-settings-btn WEBCAM SETTINGS
+    a.hidden.button-orange.webcam-settings-btn WEBCAM SETTINGS
 em.no-webcam-msg.hidden No webcam detected.  If using an external webcam, please make sure it is plugged in to your computer.