135 lines
4.1 KiB
CoffeeScript
135 lines
4.1 KiB
CoffeeScript
context = window
|
|
|
|
mixins = []
|
|
|
|
# this check ensures we attempt to listen if this component is created in a popup
|
|
if window.opener
|
|
mixins.push(Reflux.listenTo(window.opener.RecordingStore,"onRecordingStateChanged"))
|
|
|
|
@PopupRecordingStartStop = React.createClass({
|
|
|
|
mixins: mixins
|
|
|
|
onRecordingStateChanged: (recordingState) ->
|
|
this.setState(isRecording: recordingState.isRecording, recordedOnce: this.state.recordedOnce || recordingState.isRecording)
|
|
|
|
startStopRecording: () ->
|
|
if this.state.isRecording
|
|
window.opener.RecordingActions.stopRecording()
|
|
else
|
|
window.opener.RecordingActions.startRecording()
|
|
|
|
onNoteShowHide: () ->
|
|
this.setState(showNote: !this.state.showNote)
|
|
|
|
getInitialState: () ->
|
|
{isRecording: window.ParentIsRecording, showNote: true, recordedOnce: false}
|
|
|
|
render: () ->
|
|
|
|
recordingVerb = if this.state.isRecording then 'Stop' else 'Start'
|
|
|
|
recordingBtnClasses = classNames({
|
|
"currently-recording" : this.state.isRecording,
|
|
"control" : true
|
|
})
|
|
|
|
noteJSX = `<div className="important-note">
|
|
<h5>
|
|
Important Note
|
|
</h5>
|
|
<div className="contents">
|
|
While playing in your session, you are listening to your own personal mix. This recording will use the master mix,
|
|
which may sound very different. To hear and adjust your master mix settings, click the MIXER button in the session toolbar.
|
|
</div>
|
|
</div>`
|
|
|
|
recordingJSX = `<div className="recording-options">
|
|
<div className="field">
|
|
<input type="radio" name="recording-input-type" id="recording-input-both" defaultChecked="checked" />
|
|
<label htmlFor="recording-input-both">Record both video and audio</label>
|
|
<div className="clearall"></div>
|
|
</div>
|
|
<div className="field">
|
|
<input type="radio" name="recording-input-type" id="recording-input-audio" />
|
|
<label htmlFor="recording-input-audio">Record audio only</label>
|
|
<div className="clearall"></div>
|
|
</div>
|
|
</div>`
|
|
|
|
if this.state.showNote
|
|
noteText = 'hide note'
|
|
else
|
|
noteText = 'show note'
|
|
|
|
noteShowHideJSX = `<a href="#" className="note-show-hide" onClick={this.onNoteShowHide}>{noteText}</a>`
|
|
|
|
note = null
|
|
recordingOptions = null
|
|
noteShowHide = null
|
|
|
|
if this.state.showNote && !this.state.isRecording && !this.state.recordedOnce
|
|
# should we show the note itself? Only if not recording, too
|
|
note = noteJSX
|
|
|
|
if !this.state.isRecording && !this.state.recordedOnce
|
|
noteShowHide = noteShowHideJSX
|
|
|
|
if gon.global.video_available == "full"
|
|
recordingOptions = recordingJSX
|
|
|
|
|
|
`<div className="recording-start-stop">
|
|
<div className="control-holder">
|
|
<a className={recordingBtnClasses} onClick={this.startStopRecording}>
|
|
<span className="helper" />
|
|
<img src="/assets/content/recordbutton-off.png" width="20" height="20" />
|
|
<span id="recording-status">{recordingVerb} Recording</span>
|
|
</a>
|
|
</div>
|
|
|
|
{recordingOptions}
|
|
|
|
{note}
|
|
|
|
{noteShowHide}
|
|
|
|
</div>`
|
|
|
|
windowUnloaded: () ->
|
|
window.opener.RecordingActions.recordingControlsClosed()
|
|
|
|
componentDidMount: () ->
|
|
$(window).unload(@windowUnloaded)
|
|
|
|
$root = jQuery(this.getDOMNode())
|
|
|
|
$recordingType = $root.find('input[type="radio"]')
|
|
context.JK.checkbox($recordingType)
|
|
|
|
@resizeWindow()
|
|
|
|
# this is necessary due to whatever the client's rendering behavior is.
|
|
setTimeout(@resizeWindow, 300)
|
|
|
|
componentDidUpdate: () ->
|
|
@resizeWindow()
|
|
|
|
resizeWindow: () =>
|
|
$container = $('#minimal-container')
|
|
width = $container.width()
|
|
height = $container.height()
|
|
|
|
# there is 20px or so of unused space at the top of the page. can't figure out why it's there. (above #minimal-container)
|
|
mysteryTopMargin = 20
|
|
|
|
# deal with chrome in real browsers
|
|
offset = (window.outerHeight - window.innerHeight) + mysteryTopMargin
|
|
|
|
# handle native client chrome that the above outer-inner doesn't catch
|
|
#if navigator.userAgent.indexOf('JamKazam') > -1
|
|
|
|
#offset += 25
|
|
|
|
window.resizeTo(width, height + offset)
|
|
}) |