124 lines
3.5 KiB
CoffeeScript
124 lines
3.5 KiB
CoffeeScript
context = window
|
|
logger = context.JK.logger
|
|
|
|
mixins = []
|
|
|
|
if window.opener?
|
|
SessionActions = window.opener.SessionActions
|
|
MediaPlaybackStore = window.opener.MediaPlaybackStore
|
|
MixerActions = window.opener.MixerActions
|
|
|
|
mixins.push(Reflux.listenTo(MediaPlaybackStore, 'onMediaStateChanged'))
|
|
|
|
@PopupMediaControls = React.createClass({
|
|
|
|
mixins: mixins
|
|
|
|
onMediaStateChanged: (changes) ->
|
|
if changes.currentTimeChanged && @root?
|
|
@setState({time: changes.time})
|
|
|
|
showMetronome: (e) ->
|
|
e.preventDefault()
|
|
|
|
SessionActions.showNativeMetronomeGui()
|
|
|
|
getInitialState: () ->
|
|
{time: '0:00'}
|
|
|
|
close: () ->
|
|
window.close()
|
|
|
|
render: () ->
|
|
|
|
closeLinkText = null
|
|
header = null
|
|
extraControls = null
|
|
|
|
# give the users options to close it
|
|
if @props.mediaSummary.jamTrackOpen
|
|
mediaType = "JamTrack"
|
|
mediaName = @props.jamTracks[0].name
|
|
closeLinkText = 'close JamTrack'
|
|
header = `<h3>{mediaType}: {mediaName} ({this.state.time})</h3>`
|
|
else if @props.mediaSummary.backingTrackOpen
|
|
mediaType = "Audio File"
|
|
mediaName = context.JK.getNameOfFile(@props.backingTracks[0].shortFilename)
|
|
closeLinkText = 'close audio file'
|
|
header = `<h3>{mediaType}: {mediaName} ({this.state.time})</h3>`
|
|
extraControls =
|
|
`<div>
|
|
<div className="field">
|
|
<input type="checkbox" name="loop" /><label htmlFor="loop">Loop audio file playback</label>
|
|
</div>
|
|
<br className="clearall"/>
|
|
</div>`
|
|
else if @props.mediaSummary.metronomeOpen
|
|
mediaType = "Metronome"
|
|
closeLinkText = 'close metronome'
|
|
header = `<h3>Metronome</h3>`
|
|
extraControls =
|
|
`<div>
|
|
<a className="display-metronome" onClick={this.showMetronome}>Display visual metronome</a>
|
|
</div>`
|
|
else if @props.mediaSummary.recordingOpen
|
|
mediaType = "Recording"
|
|
mediaName = @props.recordedTracks[0].recordingName
|
|
closeLinkText = 'close recording'
|
|
header = `<h3>{mediaType}: {mediaName} ({this.state.time})</h3>`
|
|
else
|
|
mediaType = ""
|
|
|
|
`<div className="media-controls-popup">
|
|
{header}
|
|
<MediaControls />
|
|
{extraControls}
|
|
<a className="close-link" onClick={this.close}>{closeLinkText}</a>
|
|
</div>`
|
|
|
|
windowUnloaded: () ->
|
|
SessionActions.closeMedia() unless window.DontAutoCloseMedia
|
|
|
|
componentDidMount: () ->
|
|
|
|
$(window).unload(@windowUnloaded )
|
|
|
|
@root = jQuery(this.getDOMNode())
|
|
|
|
$loop = @root.find('input[name="loop"]')
|
|
context.JK.checkbox($loop)
|
|
|
|
$loop.on('ifChecked', () =>
|
|
console.log("@props", @props)
|
|
MixerActions.loopChanged(@props.backingTracks[0].mixers.mixer, true)
|
|
)
|
|
$loop.on('ifUnchecked', () =>
|
|
MixerActions.loopChanged(@props.backingTracks[0].mixers.mixer, false)
|
|
)
|
|
|
|
@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
|
|
mysteryTopMargin = 0
|
|
# 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)
|
|
}) |