132 lines
4.8 KiB
CoffeeScript
132 lines
4.8 KiB
CoffeeScript
context = window
|
|
PLAYBACK_MONITOR_MODE = context.JK.PLAYBACK_MONITOR_MODE
|
|
EVENTS = context.JK.EVENTS
|
|
logger = context.JK.logger
|
|
|
|
mixins = []
|
|
|
|
# this check ensures we attempt to listen if this component is created in a popup
|
|
reactContext = if window.opener? then window.opener else window
|
|
# make sure this is actually us opening the window, not someone else (by checking for MixerStore)
|
|
if window.opener?
|
|
try
|
|
m = window.opener.MixerStore
|
|
catch e
|
|
reactContext = window
|
|
|
|
# temporarily..
|
|
# reactContext = window
|
|
|
|
MediaPlaybackActions = reactContext.MediaPlaybackActions
|
|
BrowserMediaStore = reactContext.BrowserMediaStore
|
|
BrowserMediaPlaybackStore = reactContext.BrowserMediaPlaybackStore
|
|
BrowserMediaPlaybackActions = reactContext.BrowserMediaPlaybackActions
|
|
|
|
mixins.push(Reflux.listenTo(BrowserMediaPlaybackStore,"onMediaStateChanged"))
|
|
|
|
|
|
@BrowserMediaControls = React.createClass({
|
|
|
|
mixins: mixins
|
|
tempos : [ 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 63, 66, 69, 72, 76, 80, 84, 88, 92, 96, 100, 104, 108, 112, 116, 120, 126, 132, 138, 144, 152, 160, 168, 176, 184, 192, 200, 208 ]
|
|
|
|
onMediaStateChanged: (changes) ->
|
|
if changes.playbackStateChanged
|
|
if @state.controls?
|
|
if changes.playbackState == 'play_start'
|
|
@state.controls.onPlayStartEvent()
|
|
else if changes.playbackState == 'play_stop'
|
|
@state.controls.onPlayStopEvent()
|
|
else if changes.playbackState == 'play_pause'
|
|
@state.controls.onPlayPauseEvent();
|
|
if changes.positionUpdateChanged
|
|
if @state.controls?
|
|
@state.controls.executeMonitor(changes.positionMs, changes.durationMs, changes.isPlaying)
|
|
if changes.currentTimeChanged
|
|
@setState({time: changes.time})
|
|
|
|
monitorControls: (controls) ->
|
|
|
|
controls.startMonitor(PLAYBACK_MONITOR_MODE.BROWSER_MEDIA)
|
|
|
|
render: () ->
|
|
|
|
|
|
tempo_options = []
|
|
for tempo in @tempos
|
|
tempo_options.push(`<option key={tempo} value={tempo}>{tempo}</option>`)
|
|
|
|
`<div className="media-controls has-mix">
|
|
|
|
<div className="jam-track-get-ready">
|
|
<div className="spinner-small"></div>
|
|
<span>Get Ready!</span>
|
|
</div>
|
|
|
|
<div className="play-buttons">
|
|
<a className="play-button" href="#">
|
|
<img src="/assets/content/icon_playbutton.png" width="20" height="20" className="playbutton" />
|
|
<img src="/assets/content/icon_pausebutton.png" width="20" height="20" className="pausebutton" />
|
|
</a>
|
|
<a className="stop-button" href="#">
|
|
<img src="/assets/content/icon_stopbutton.png" width="20" height="20" className="stopbutton" />
|
|
</a>
|
|
</div>
|
|
|
|
<div className="metronome-playback-options">
|
|
<span id="metronome-playback-select"></span>
|
|
</div>
|
|
|
|
<div className="metronome-options">
|
|
<div className="metronome-selects">
|
|
<div class="metronome-field">
|
|
<select className="metronome-select metro-sound" title="Metronome Sound" name="metronome_sound">
|
|
<option value="Beep">Knock</option>
|
|
<option value="Click">Tap</option>
|
|
<option value="Snare">Snare</option>
|
|
<option value="Kick">Kick</option>
|
|
</select>
|
|
<label htmlFor="metronome_sound">Sound:</label>
|
|
</div>
|
|
<div class="metronome-field">
|
|
<select className="metronome-select metro-tempo" title="Metronome Tempo" name="metronome_tempo">
|
|
{tempo_options}
|
|
</select>
|
|
<label htmlFor="metronome_tempo">Tempo:</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="recording-time start-time">{this.state.time}</div>
|
|
<div className="recording-playback">
|
|
<div className="recording-slider"><img src="/assets/content/slider_playcontrols.png" height="16" width="5" /></div>
|
|
</div>
|
|
<div className="recording-time duration-time">0:00</div>
|
|
|
|
<div className="recording-current">0:00</div>
|
|
|
|
<div className="playback-mode-buttons icheckbuttons">
|
|
<input type="radio" name="playback-mode" defaultChecked="checked" value="preview-to-all" className="preview-to-all" /><label htmlFor="playback-mode-preview-all" className="radio-text">Preview to All</label>
|
|
<input type="radio" name="playback-mode" value="preview-to-me" className="preview-to-me" /><label htmlFor="playback-mode-preview-me" className="radio-text">Preview Only to Me</label>
|
|
</div>
|
|
</div>`
|
|
|
|
|
|
getInitialState: () ->
|
|
{controls: null, time: '0:00'}
|
|
|
|
componentDidUpdate: (prevProps, prevState) ->
|
|
|
|
componentDidMount: () ->
|
|
$root = jQuery(this.getDOMNode())
|
|
controls = context.JK.PlaybackControls($root, {mediaActions: BrowserMediaPlaybackActions})
|
|
controls.setDisabled(@props.disabled)
|
|
|
|
@monitorControls(controls)
|
|
|
|
@setState({controls:controls})
|
|
|
|
componentWillUpdate: (nextProps) ->
|
|
|
|
@state.controls.setDisabled(nextProps.disabled) if @state.controls?
|
|
}) |