diff --git a/web/app/assets/javascripts/webcam_viewer.js.coffee b/web/app/assets/javascripts/webcam_viewer.js.coffee index a5538167a..bd1afbc60 100644 --- a/web/app/assets/javascripts/webcam_viewer.js.coffee +++ b/web/app/assets/javascripts/webcam_viewer.js.coffee @@ -10,9 +10,9 @@ context.JK.WebcamViewer = class WebcamViewer @toggleBtn = null @webcamSelect = null @resolutionSelect = null - @videoShared=false - @resolution=null - + @videoShared = false + @resolution = null + @videoSettingsHelp = null init: (root) => # the session usage of webcamViewer does not actually pass in anything root = $() unless root? @@ -21,11 +21,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() diff --git a/web/app/assets/javascripts/wizard/gear/step_video_gear.js b/web/app/assets/javascripts/wizard/gear/step_video_gear.js index 90fabdeaa..df0b54787 100644 --- a/web/app/assets/javascripts/wizard/gear/step_video_gear.js +++ b/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() } diff --git a/web/app/assets/stylesheets/client/wizard/gearWizard.css.scss b/web/app/assets/stylesheets/client/wizard/gearWizard.css.scss index 4d2261e7a..0204fffe5 100644 --- a/web/app/assets/stylesheets/client/wizard/gearWizard.css.scss +++ b/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; diff --git a/web/app/views/clients/_help.html.slim b/web/app/views/clients/_help.html.slim index fb9ae0d55..ca21af96f 100644 --- a/web/app/views/clients/_help.html.slim +++ b/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. \ No newline at end of file + 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. \ No newline at end of file diff --git a/web/app/views/clients/_webcam.html.slim b/web/app/views/clients/_webcam.html.slim index 82182c2c8..a156c8a1a 100644 --- a/web/app/views/clients/_webcam.html.slim +++ b/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 - a.button-grey-toggle.webcam-settings-btn Webcam Settings + .hidden.configure-webcam.wizard_control + 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. diff --git a/web/app/views/clients/wizard/gear/_gear_wizard.html.haml b/web/app/views/clients/wizard/gear/_gear_wizard.html.haml index cfadad69c..c2c1d9b50 100644 --- a/web/app/views/clients/wizard/gear/_gear_wizard.html.haml +++ b/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' diff --git a/web/app/views/clients/wizard/gear/_video_gear.html.haml b/web/app/views/clients/wizard/gear/_video_gear.html.haml index f87fd9802..888067af9 100644 --- a/web/app/views/clients/wizard/gear/_video_gear.html.haml +++ b/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 Configure webcam settings if desired. - .center - %a.button-orange.watch-video{href:'https://www.youtube.com/watch?v=f7niycdWm7Y', rel:'external'} WATCH VIDEO + %li Select video capture settings. + %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. .wizard-step-column =render(partial: '/clients/webcam') .clearall