diff --git a/web/app/assets/javascripts/react-components/PopupMediaControls.js.jsx.coffee b/web/app/assets/javascripts/react-components/PopupMediaControls.js.jsx.coffee index 59a068003..052be1e7b 100644 --- a/web/app/assets/javascripts/react-components/PopupMediaControls.js.jsx.coffee +++ b/web/app/assets/javascripts/react-components/PopupMediaControls.js.jsx.coffee @@ -2,6 +2,7 @@ context = window logger = context.JK.logger ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; + mixins = [] diff --git a/web/app/assets/javascripts/react-components/PopupRecordingStartStop.js.jsx.coffee b/web/app/assets/javascripts/react-components/PopupRecordingStartStop.js.jsx.coffee index 09295a5ad..53431519b 100644 --- a/web/app/assets/javascripts/react-components/PopupRecordingStartStop.js.jsx.coffee +++ b/web/app/assets/javascripts/react-components/PopupRecordingStartStop.js.jsx.coffee @@ -1,25 +1,39 @@ context = window logger = context.JK.logger +NoVideoRecordActive = 0 +WebCamRecordActive = 1 +ScreenRecordActive = 2 + mixins = [] # make sure this is actually us opening the window, not someone else (by checking for MixerStore) +# this check ensures we attempt to listen if this component is created in a popup +reactContext = if window.opener? then window.opener else window + accessOpener = false if window.opener? try m = window.opener.MixerStore accessOpener = true catch e + reactContext = window +MixerStore = reactContext.MixerStore +RecordingStore = reactContext.RecordingStore if accessOpener - mixins.push(Reflux.listenTo(window.opener.RecordingStore,"onRecordingStateChanged")) + mixins.push(Reflux.listenTo(RecordingStore,"onRecordingStateChanged")) + mixins.push(Reflux.listenTo(MixerStore,"onMixersChanged")) @PopupRecordingStartStop = React.createClass({ mixins: mixins + onMixersChanged: (mixers) -> + this.setState(chatMixer: mixers.chatMixer) + onRecordingStateChanged: (recordingState) -> this.setState(isRecording: recordingState.isRecording, recordedOnce: this.state.recordedOnce || recordingState.isRecording) @@ -28,15 +42,26 @@ if accessOpener window.opener.RecordingActions.stopRecording() else recordChat = false - recordVideo = false + recordVideo = NoVideoRecordActive + + $root = $(this.getDOMNode()) if @inputType != 'audio-only' - recordVideo = true - if @audioType != 'audio-only' - recordChat = true + if $root.find('#recording-selection').val() == 'video-window' + recordVideo = ScreenRecordActive + else + recordVideo = WebCamRecordActive - logger.debug("@inputType, @udiotye", @inputType, @audioType) + + recordChat = if @state.chatMixer? then $root.find('#include-chat').is(':checked') else false + + + # if the video window isn't open, but a video option was selected... + if recordVideo != NoVideoRecordActive && !VideoStore.videoOpen + context.JK.prodBubble($root.find('.control'), 'video-window-not-open', {}, {positions:['bottom']}) + return + logger.debug("@inputType, @udiotye", recordChat, recordVideo) window.opener.RecordingActions.startRecording(recordVideo, recordChat) onNoteShowHide: () -> @@ -47,7 +72,7 @@ if accessOpener this.setState(showNote: !this.state.showNote) getInitialState: () -> - {isRecording: window.ParentIsRecording, showNote: true, recordedOnce: false} + {isRecording: window.ParentIsRecording, showNote: true, recordedOnce: false, chatMixer: MixerStore.mixers?.chatMixer} render: () -> @@ -68,34 +93,33 @@ if accessOpener ` + if !@state.chatMixer? + chatHelp = `[?]` + recordingJSX = `
-

Video Settings

+

Recording Type

- +
- +
+
+ +
-

Audio Settings

-
- - -
-
-
- - -
-
+
` @@ -141,6 +165,10 @@ if accessOpener windowUnloaded: () -> window.opener.RecordingActions.recordingControlsClosed() + onChatHelp: (e) -> + e.preventDefault() + + context.JK.prodBubble($(e.target), 'vid-record-no-chat-input', {}, {positions:['left']}) trackInputType: (e) -> $checkedType = $(e.target); @inputType = $checkedType.val() @@ -165,6 +193,17 @@ if accessOpener $root.find('input[name="recording-input-type"]').on('ifChanged', @trackInputType) $root.find('input[name="recording-input-chat-option"]').on('ifChanged', @trackAudioType) + $recordingRegion = $root.find('#recording-selection') + #console.log("$recordingou", $recordingRegion) + #context.JK.dropdown($recordingRegion) + + $includeChat = $root.find('#include-chat') + context.JK.checkbox($includeChat) + if !@state.chatMixer? + $includeChat.iCheck('disable') + + + @resizeWindow() # this is necessary due to whatever the client's rendering behavior is. @@ -173,6 +212,13 @@ if accessOpener componentDidUpdate: () -> @resizeWindow() + $root = jQuery(this.getDOMNode()) + $includeChat = $root.find('#include-chat') + if @state.chatMixer? + $includeChat.iCheck('enable') + else + $includeChat.iCheck('disable') + resizeWindow: () => $container = $('#minimal-container') width = $container.width() diff --git a/web/app/assets/javascripts/react-components/stores/RecordingStore.js.jsx.coffee b/web/app/assets/javascripts/react-components/stores/RecordingStore.js.jsx.coffee index d36593d48..684013ec9 100644 --- a/web/app/assets/javascripts/react-components/stores/RecordingStore.js.jsx.coffee +++ b/web/app/assets/javascripts/react-components/stores/RecordingStore.js.jsx.coffee @@ -27,6 +27,9 @@ logger = context.JK.logger frameRate = context.jamClient.GetCurrentVideoFrameRate() || 30; + NoVideoRecordActive = 0 + WebCamRecordActive = 1 + ScreenRecordActive = 2 logger.debug("onStartRecording: recordVideo: #{recordVideo}, recordChat: #{recordChat} frameRate: #{frameRate}") @recordingModel.startRecording(recordVideo, recordChat, frameRate) @@ -71,7 +74,7 @@ logger = context.JK.logger popupRecordingControls: () -> logger.debug("poupRecordingControls") - @recordingWindow = window.open("/popups/recording-controls", 'Recording', 'scrollbars=yes,toolbar=no,status=no,height=315,width=350') + @recordingWindow = window.open("/popups/recording-controls", 'Recording', 'scrollbars=yes,toolbar=no,status=no,height=315,width=340') @recordingWindow.ParentRecordingStore = context.RecordingStore @recordingWindow.ParentIsRecording = @recordingModel.isRecording() diff --git a/web/app/assets/stylesheets/minimal/minimal.css.scss b/web/app/assets/stylesheets/minimal/minimal.css.scss index 5ac30bc35..0e3be9153 100644 --- a/web/app/assets/stylesheets/minimal/minimal.css.scss +++ b/web/app/assets/stylesheets/minimal/minimal.css.scss @@ -7,6 +7,8 @@ *= require client/ftue *= require client/help *= require icheck/minimal/minimal +*= require easydropdown +*= require easydropdown_jk *= require_directory . *= require client/metronomePlaybackModeSelect *= require_directory ../client/react-components diff --git a/web/app/assets/stylesheets/minimal/recording_controls.css.scss b/web/app/assets/stylesheets/minimal/recording_controls.css.scss index 0b1cb54cc..1cbfaec28 100644 --- a/web/app/assets/stylesheets/minimal/recording_controls.css.scss +++ b/web/app/assets/stylesheets/minimal/recording_controls.css.scss @@ -10,12 +10,12 @@ body.recording-start-stop { } .recording-start-stop { - padding-left:44px; + padding-left:30px; } .control-holder { width:100%; - margin: 1em 0; + margin: 10px 0 20px; } .helper { @@ -24,7 +24,20 @@ body.recording-start-stop { vertical-align: middle; } + .audio-settings { + margin-top:40px; + + label { + display:inline; + margin-left:6px; + } + + .icheckbox_minimal { + vertical-align:middle; + } + } .control { + margin-left:20px; width:231px; height:34px; @include border_box_sizing; @@ -38,7 +51,10 @@ body.recording-start-stop { color:#ccc; } - + .chat-help { + text-decoration:none; + outline:0; + } .control img { vertical-align:middle; margin-right:5px; @@ -65,6 +81,10 @@ body.recording-start-stop { &:nth-of-type(2) { margin-top:9px; } + &:nth-of-type(3) { + margin-top: 10px; + padding-left: 22px; + } } .note-show-hide { @@ -77,7 +97,7 @@ body.recording-start-stop { } .important-note { - margin-top:30px; + margin-top:15px; line-height:150%; font-size:12px; width:260px; diff --git a/web/app/views/clients/_help.html.slim b/web/app/views/clients/_help.html.slim index 6823d0b45..fcde2bce4 100644 --- a/web/app/views/clients/_help.html.slim +++ b/web/app/views/clients/_help.html.slim @@ -352,4 +352,11 @@ script type="text/template" id="template-help-ftue-video-disable" script type="text/template" id="template-help-no-change-while-loading" span Certain actions are disabled while a track is being loaded. +script type="text/template" id="template-help-video-window-not-open" + .video-window-not-open + p You've selected to record video, but the video window is not open. + p Click the VIDEO button in the main window and try again. +script type="text/template" id="template-help-vid-record-no-chat-input" + .vid-record-no-chat-input + p You have no chat input configured. Your track inputs are always recorded, so if your chat mic is configured as a track input, you're covered. \ No newline at end of file