Merge branch 'feature/video_frontend' into develop

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

@@ -25,9 +25,9 @@ context.JK.WebcamViewer = class WebcamViewer
     @toggleBtn = null
     @webcamSelect = null
     @resolutionSelect = null
-    @videoShared=false
+    @videoShared = false
-    @resolution=null
+    @resolution = null
-
+    @videoSettingsHelp = null
   init: (root) =>
     # the session usage of webcamViewer does not actually pass in anything
     root = $() unless root?
@@ -36,11 +36,14 @@ context.JK.WebcamViewer = class WebcamViewer
     @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)
     @toggleBtn.on('click', @toggleWebcam)
     @resolutionSelect.on("change", this.selectResolution)
     #logger.debug("Initialed with (unique) select",@webcamSelect)
 
+    context.JK.helpBubble(@videoSettingsHelp, 'ftue-video-settings', {}, {width:300})
+    @videoSettingsHelp.click(false)
   beforeShow:() =>
     this.loadWebCams()
     this.selectWebcam()

web/app/assets/javascripts/wizard/gear/step_video_gear.js

@@ -12,10 +12,12 @@
     }
 
     function beforeShow() {
+      $dialog.getWizard().getDialog().find('h1.top-header').text('video gear setup')
       $webcamViewer.beforeShow()      
     }
 
     function beforeHide() {
+      $dialog.getWizard().getDialog().find('h1.top-header').text('audio gear setup')
       $webcamViewer.setVideoOff()      
     }
 

web/app/assets/stylesheets/client/wizard/gearWizard.css.scss

@@ -326,6 +326,20 @@
         width: 50%;
       }
 
+      a.ftue-video-settings-help {
+        margin-left:15px;
+      }
+
+      h2.select-resolution {
+        margin-top:20px;
+      }
+
+      .webcam-test-btn {
+        margin-top:20px;
+        margin-left:0;
+      }
+
+
       .webcam-preview {
         .webcam-content {
           min-width: 200px;

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

@@ -321,4 +321,12 @@ script type="text/template" id="template-help-personal-media-track"
 
 script type="text/template" id="template-help-missing-my-tracks"
   .missing-my-tracks
-    p Click the RESYNC button up above to search for your track again.
+    p Click the RESYNC button up above to search for your track again.
+
+script type="text/template" id="template-help-ftue-video-settings"
+  .ftue-video-settings
+    p
+      ul
+        li If you have a quad core computer, we recommend selecting 720p resolution (1280x720) and 30 frames per second (fps).
+        li If you have a dual core computer, we recommend selecting one half 720p resolution (640x360) and 30 frames per second (fps).
+        li If you're not sure what to choose, don't worry, you can change this later while in sessions to experiment with it.

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

@@ -1,11 +1,13 @@
-h2.sub-header webcam:
 form.video
+  h2.sub-header.select-webcam select webcam:
   .webcam-select-container.wizard_control
     select.w100
+  h2.sub-header.select-resolution select video capture resolution & frame rate:
   .webcam-resolution-select-container.wizard_control
     select.w100
+    a.ftue-video-settings-help href='#' [?]
   .configure-webcam.wizard_control
     a.button-grey-toggle.webcam-test-btn Test Webcam
-  .configure-webcam.wizard_control
+  .hidden.configure-webcam.wizard_control
-    a.button-grey-toggle.webcam-settings-btn Webcam Settings
+    a.hidden.button-grey-toggle.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.

web/app/views/clients/wizard/gear/_gear_wizard.html.haml

@@ -1,6 +1,6 @@
 .dialog.gear-wizard{ layout: 'dialog', 'layout-id' => 'gear-wizard', id: 'gear-wizard-dialog'}
   .content-head
-    %h1 audio gear setup
+    %h1.top-header audio gear setup
 
   .ftue-inner{ 'layout-wizard' => 'gear-wizard' }
     .wizard-step{ 'layout-wizard-step' => "0", 'dialog-title' =>  "Understand Your Gear", 'dialog-purpose' => "Intro"}
@@ -162,7 +162,7 @@
 
     -step=4
     -if (Rails.application.config.video_available && Rails.application.config.video_available!="none") 
-      .wizard-step.video-gear{ 'layout-wizard-step' => "#{step+=1}", 'dialog-title' =>  "Select Video Gear", 'dialog-purpose' => "SelectVideoGear" }
+      .wizard-step.video-gear{ 'layout-wizard-step' => "#{step+=1}", 'dialog-title' =>  "Set Up Video Gear", 'dialog-purpose' => "SelectVideoGear" }
         .ftuesteps
         .clearall
         = render :partial => '/clients/wizard/gear/video_gear'

web/app/views/clients/wizard/gear/_video_gear.html.haml

@@ -5,10 +5,8 @@
     .ftue-box.instructions
       %ul
         %li Select webcam to use for video in sessions.
-        %li Verify that you see the video for the webcam in the window to the right.
+        %li Select video capture settings.
-        %li Configure webcam settings if desired.
+        %li Click the Test webcam button to open a window and verify that your webcam is properly capturing video. Then use the Window / Close Video Window menu command to close the window, and click the Next button to move forward.
-      .center
-        %a.button-orange.watch-video{href:'https://www.youtube.com/watch?v=f7niycdWm7Y', rel:'external'} WATCH VIDEO
   .wizard-step-column
     =render(partial: '/clients/webcam')
     .clearall