diff --git a/web/app/assets/javascripts/accounts_video_profile.js b/web/app/assets/javascripts/accounts_video_profile.js index ef4d4cf63..09e665de1 100644 --- a/web/app/assets/javascripts/accounts_video_profile.js +++ b/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() { diff --git a/web/app/assets/javascripts/fakeJamClient.js b/web/app/assets/javascripts/fakeJamClient.js index 4f5695abb..d64b43ee4 100644 --- a/web/app/assets/javascripts/fakeJamClient.js +++ b/web/app/assets/javascripts/fakeJamClient.js @@ -87,8 +87,8 @@ } function FTUEGetAvailableEncodeVideoResolutions() { return { - 1: "1024x768", - 2: "800x600" + 1: "VGA (640X480)", + 2: "WHD (1280X720)" } } diff --git a/web/app/assets/javascripts/webcam_viewer.js.coffee b/web/app/assets/javascripts/webcam_viewer.js.coffee index ad5dae90f..4cb997590 100644 --- a/web/app/assets/javascripts/webcam_viewer.js.coffee +++ b/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') diff --git a/web/app/assets/stylesheets/client/accountVideo.css.scss b/web/app/assets/stylesheets/client/accountVideo.css.scss new file mode 100644 index 000000000..41b060986 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/web/app/assets/stylesheets/client/client.css b/web/app/assets/stylesheets/client/client.css index 86a185c5e..277f98cdb 100644 --- a/web/app/assets/stylesheets/client/client.css +++ b/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 diff --git a/web/app/views/clients/_webcam.html.slim b/web/app/views/clients/_webcam.html.slim index 22725aea3..f715a79c0 100644 --- a/web/app/views/clients/_webcam.html.slim +++ b/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.