seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

* wip

This commit is contained in:
Seth Call 2015-09-26 13:58:55 -05:00
parent 0d64724234
commit f80790b1e9
6 changed files with 105 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/app/assets/javascripts/react-components/PopupMediaControls.js.jsx.coffee
View File

@ -2,6 +2,7 @@ context = window
logger = context.JK.logger
ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
mixins = []

88
web/app/assets/javascripts/react-components/PopupRecordingStartStop.js.jsx.coffee
View File

@ -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
</div>
</div>`
if !@state.chatMixer?
chatHelp = `<a href="#" onClick={this.onChatHelp} className="chat-help">[?]</a>`
recordingJSX =
`<div className="recording-options">
<div className="video-settings">
<h3>Video Settings</h3>
<h3>Recording Type</h3>
<div className="field">
<input type="radio" name="recording-input-type" id="recording-input-audio" value="audio-only" defaultChecked="checked" />
<label htmlFor="recording-input-audio">Record audio only</label>
<label htmlFor="recording-input-audio">Audio only</label>
<div className="clearall"></div>
</div>
<div className="field">
<input type="radio" name="recording-input-type" id="recording-input-both" value="audio-video" />
<label htmlFor="recording-input-both">Record audio and video</label>
<label htmlFor="recording-input-both">Audio and video</label>
<div className="clearall"></div>
</div>
<div className="field">
<select className="easydropdown" name="recording-selection" id="recording-selection">
<option value="video-window">Record session video window</option>
<option value="webcam-only">Record my webcam only</option>
</select>
</div>
</div>
<div className="audio-settings">
<h3>Audio Settings</h3>
<div className="field">
<input type="radio" name="recording-input-chat-option" id="recording-inputs-only" value="audio-only" defaultChecked="checked" />
<label htmlFor="recording-inputs-only">Record track audio only</label>
<div className="clearall"></div>
</div>
<div className="field">
<input type="radio" name="recording-input-chat-option" id="recording-inputs-and-chat" value="audio-chat" />
<label htmlFor="recording-inputs-and-chat">Record track audio and voice chat</label>
<div className="clearall"></div>
</div>
<input type="checkbox" name="include-chat" id="include-chat" /><label htmlFor="include-chat">Include voice chat in recorded audio {chatHelp}</label>
</div>
</div>`
@ -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()

5
web/app/assets/javascripts/react-components/stores/RecordingStore.js.jsx.coffee
View File

@ -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()

2
web/app/assets/stylesheets/minimal/minimal.css.scss
View File

@ -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

28
web/app/assets/stylesheets/minimal/recording_controls.css.scss
View File

@ -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;

7
web/app/views/clients/_help.html.slim
View File

@ -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.