359 lines
12 KiB
CoffeeScript
359 lines
12 KiB
CoffeeScript
context = window
|
|
rest = context.JK.Rest()
|
|
SessionActions = @SessionActions
|
|
JamTrackActions = @JamTrackActions
|
|
ReactCSSTransitionGroup = React.addons.CSSTransitionGroup
|
|
MIX_MODES = context.JK.MIX_MODES
|
|
EVENTS = context.JK.EVENTS
|
|
ChannelGroupIds = context.JK.ChannelGroupIds
|
|
|
|
@SessionMediaTracks = React.createClass({
|
|
|
|
mixins: [@SessionMediaTracksMixin,
|
|
Reflux.listenTo(@SessionMediaTracksStore,"onInputsChanged"),
|
|
Reflux.listenTo(@AppStore,"onAppInit"),
|
|
Reflux.listenTo(@JamTrackStore, "onJamTrackStateChanged")]
|
|
|
|
onJamTrackStateChanged: (jamTrackState) ->
|
|
@setState({jamTrackState: jamTrackState})
|
|
|
|
if jamTrackState.fullTrackActivated || jamTrackState.opened && jamTrackState.jamTrack.activeMixdown == null
|
|
@loadJamTrack(jamTrackState.jamTrack)
|
|
else if jamTrackState.closed
|
|
logger.debug("SessionMediaTracks: jamtrack has been closed")
|
|
|
|
if @state.downloadJamTrack?
|
|
logger.debug("closing DownloadJamTrack widget")
|
|
@state.downloadJamTrack.root.remove()
|
|
@state.downloadJamTrack.destroy()
|
|
SessionActions.downloadingJamTrack(false)
|
|
@setState({downloadJamTrack: null})
|
|
|
|
SessionActions.closeMedia(true)
|
|
|
|
|
|
#inputsChangedProcessed: (state) ->
|
|
|
|
|
|
closeWindow: () ->
|
|
if @childWindow?
|
|
@childWindow.DontAutoCloseMedia = true
|
|
@childWindow.close()
|
|
|
|
closeAudio: (e) ->
|
|
e.preventDefault()
|
|
|
|
SessionActions.closeMedia(false)
|
|
|
|
cancelDownloadJamTrack: (e) ->
|
|
e.preventDefault()
|
|
|
|
logger.debug("closing DownloadJamTrack widget")
|
|
@state.downloadJamTrack.root.remove()
|
|
@state.downloadJamTrack.destroy()
|
|
|
|
SessionActions.downloadingJamTrack(false)
|
|
|
|
@setState({downloadJamTrack: null})
|
|
|
|
openRecording: (e) ->
|
|
e.preventDefault()
|
|
|
|
# just ignore the click if they are currently recording for now
|
|
if @state.isRecording
|
|
@app.notify({
|
|
"title": "Currently Recording",
|
|
"text": "You can't open a recording while creating a recording.",
|
|
"icon_url": "/assets/content/icon_alert_big.png"
|
|
})
|
|
return
|
|
|
|
@app.layout.showDialog('localRecordings') unless @app.layout.isDialogShowing('localRecordings')
|
|
|
|
openBackingTrack: (e) ->
|
|
e.preventDefault()
|
|
if @state.backingTrackDialogOpen
|
|
logger.debug("backing track dialog already open")
|
|
return
|
|
|
|
|
|
# just ignore the click if they are currently recording for now
|
|
if @state.isRecording
|
|
@app.notify({
|
|
"title": "Currently Recording",
|
|
"text": "You can't open a backing track while creating a recording.",
|
|
"icon_url": "/assets/content/icon_alert_big.png"
|
|
});
|
|
return
|
|
|
|
@setState({backingTrackDialogOpen: true})
|
|
context.jamClient.ShowSelectBackingTrackDialog("window.JK.HandleBackingTrackSelectedCallback2");
|
|
|
|
openMetronome: (e) ->
|
|
|
|
if @state.isRecording
|
|
@app.notify({
|
|
"title": "Currently Recording",
|
|
"text": "You can't open a metronome while creating a recording.",
|
|
"icon_url": "/assets/content/icon_alert_big.png"
|
|
})
|
|
return
|
|
|
|
SessionActions.openMetronome()
|
|
|
|
openJamTrack: (e) ->
|
|
e.preventDefault()
|
|
|
|
if @state.isRecording
|
|
@app.notify({
|
|
"title": "Currently Recording",
|
|
"text": "You can't open a jam track while creating a recording.",
|
|
"icon_url": "/assets/content/icon_alert_big.png"
|
|
})
|
|
return
|
|
|
|
@app.layout.showDialog('open-jam-track-dialog').one(EVENTS.DIALOG_CLOSED, (e, data) =>
|
|
# once the dialog is closed, see if the user has a jamtrack selected
|
|
if !data.canceled && data.result.jamTrack
|
|
JamTrackActions.open(data.result.jamTrack)
|
|
else
|
|
logger.debug("OpenJamTrack dialog closed with no selection; ignoring", data)
|
|
)
|
|
|
|
loadJamTrack: (jamTrack) ->
|
|
if @state.downloadJamTrack
|
|
# if there was one showing before somehow, destroy it.
|
|
logger.warn("destroying existing JamTrack")
|
|
@state.downloadJamTrack.root.remove()
|
|
@state.downloadJamTrack.destroy()
|
|
#set to null
|
|
|
|
|
|
downloadJamTrack = new context.JK.DownloadJamTrack(@app, jamTrack, 'large');
|
|
|
|
# the widget indicates when it gets to any transition; we can hide it once it reaches completion
|
|
$(downloadJamTrack).on(EVENTS.JAMTRACK_DOWNLOADER_STATE_CHANGED, (e, data) =>
|
|
if data.state == downloadJamTrack.states.synchronized
|
|
logger.debug("jamtrack synchronized; hide widget and show tracks")
|
|
downloadJamTrack.root.remove()
|
|
downloadJamTrack.destroy()
|
|
downloadJamTrack = null
|
|
|
|
this.setState({downloadJamTrack: null})
|
|
|
|
# XXX: test with this removed; it should be unnecessary
|
|
context.jamClient.JamTrackStopPlay();
|
|
|
|
sampleRate = context.jamClient.GetSampleRate()
|
|
sampleRateForFilename = if sampleRate == 48 then '48' else '44'
|
|
fqId = jamTrack.id + '-' + sampleRateForFilename
|
|
|
|
if jamTrack.jmep
|
|
logger.debug("setting jmep data")
|
|
|
|
context.jamClient.JamTrackLoadJmep(fqId, jamTrack.jmep)
|
|
else
|
|
logger.debug("no jmep data for jamtrack")
|
|
|
|
# JamTrackPlay means 'load'
|
|
result = context.jamClient.JamTrackPlay(fqId);
|
|
|
|
SessionActions.downloadingJamTrack(false)
|
|
|
|
console.log("JamTrackPlay: result", result)
|
|
if !result
|
|
@app.notify(
|
|
{
|
|
title: "JamTrack Can Not Open",
|
|
text: "Unable to open your JamTrack. Please contact support@jamkazam.com"
|
|
}
|
|
, null, true)
|
|
else
|
|
participantCnt = context.SessionStore.participants().length
|
|
rest.playJamTrack(jamTrack.id)
|
|
.done(() =>
|
|
@app.refreshUser();
|
|
)
|
|
|
|
context.stats.write('web.jamtrack.open', {
|
|
value: 1,
|
|
session_size: participantCnt,
|
|
user_id: context.JK.currentUserId,
|
|
user_name: context.JK.currentUserName
|
|
})
|
|
)
|
|
|
|
|
|
@setState({downloadJamTrack: downloadJamTrack})
|
|
|
|
render: () ->
|
|
|
|
scrollerClassData = {'session-tracks-scroller': true}
|
|
mediaOptions = `<div className="media-options">
|
|
<div className="open-media-file-header">
|
|
<div className="vertical-helper" />
|
|
<img src="/assets/content/icon_open_folder.png" width="21" height="21" />
|
|
<span className="open-text">Open:</span>
|
|
</div>
|
|
<ul className="open-media-file-options">
|
|
<li>
|
|
<a className="open-recording" onClick={this.openRecording}>Recording</a>
|
|
</li>
|
|
<li>
|
|
<a className="open-jamtrack" onClick={this.openJamTrack}>JamTrack</a>
|
|
</li>
|
|
<li>
|
|
<a className="open-backingtrack" onClick={this.openBackingTrack}>Audio File</a>
|
|
</li>
|
|
</ul>
|
|
<div className="use-metronome-header">
|
|
<img src="/assets/content/icon_instrument_metronome21.png" width="21" height="21" />
|
|
<a className="open-metronome" onClick={this.openMetronome}>Use Metronome</a>
|
|
</div>
|
|
</div>`
|
|
|
|
contents = null
|
|
mediaTracks = []
|
|
|
|
mediaTracks.push `<div key="download-jamtrack-holder" className="download-jamtrack-holder"></div>`
|
|
|
|
if this.state.downloadJamTrack?
|
|
closeOptions =
|
|
`<div>
|
|
<a className="closeAudio" onClick={this.cancelDownloadJamTrack}>
|
|
<img src="/assets/content/icon_close.png" width="18" height="20" />
|
|
Close JamTrack
|
|
</a>
|
|
</div>`
|
|
|
|
contents = closeOptions
|
|
|
|
else if this.state.mediaSummary.mediaOpen || @state.jamTrackState?.jamTrack?
|
|
|
|
# give the users options to close it
|
|
if this.state.mediaSummary.recordingOpen
|
|
mediaType = "Recording"
|
|
else if this.state.mediaSummary.jamTrackOpen || @state.jamTrackState?.jamTrack?
|
|
mediaType = "JamTrack"
|
|
else if this.state.mediaSummary.backingTrackOpen
|
|
mediaType = "Audio File"
|
|
else if this.state.mediaSummary.metronomeOpen
|
|
mediaType = "Metronome"
|
|
|
|
else
|
|
mediaType = ""
|
|
|
|
closeOptions = `<a className="closeAudio" onClick={this.closeAudio}>
|
|
<img src="/assets/content/icon_close.png" width="18" height="20" />
|
|
Close {mediaType}
|
|
</a>`
|
|
|
|
|
|
if this.state.mediaSummary.backingTrackOpen
|
|
|
|
for backingTrack in @state.backingTracks
|
|
backingTrack.mode = MIX_MODES.PERSONAL
|
|
mediaTracks.push(`<SessionBackingTrack key={backingTrack.track.id} {...backingTrack} />`)
|
|
|
|
else if this.state.mediaSummary.recordingOpen
|
|
|
|
mediaTracks.push(`<SessionRecordedCategory key="RecordedCategory" recordingName={this.state.recordingName} mixers={this.state.mediaCategoryMixer} mode={MIX_MODES.PERSONAL} />`)
|
|
for recordedTrack in @state.recordedTracks
|
|
recordedTrack.mode = MIX_MODES.PERSONAL
|
|
mediaTracks.push(`<SessionRecordedTrack key={recordedTrack.track.id} {...recordedTrack} />`)
|
|
|
|
# if a JamTrack is also open (meaning the Recording was made with a Jamtrack), show it's mixers as well
|
|
if this.state.mediaSummary.jamTrackOpen
|
|
for jamTrack in @state.jamTracks
|
|
jamTrack.mode = MIX_MODES.PERSONAL
|
|
mediaTracks.push(`<SessionJamTrack key={jamTrack.id} {...jamTrack} />`)
|
|
|
|
else if this.state.mediaSummary.jamTrackOpen
|
|
|
|
# JamTrack shows in this order:
|
|
# The Category mixer
|
|
# The Metronome
|
|
# All the JamTracks
|
|
mediaTracks.push(`<SessionJamTrackCategory key="JamTrackCategory" jamTrackName={this.state.jamTrackName} mixers={this.state.mediaCategoryMixer} mode={MIX_MODES.PERSONAL} />`)
|
|
|
|
if @state.metronome? # && @state.jamTrackMixdown.id == null
|
|
@state.metronome.mode = MIX_MODES.PERSONAL
|
|
mediaTracks.push(`<SessionMetronome key="JamTrackMetronome" {...this.state.metronome} location="jam-track" />`)
|
|
|
|
|
|
for jamTrack in @state.jamTracks
|
|
jamTrack.mode = MIX_MODES.PERSONAL
|
|
mediaTracks.push(`<SessionJamTrack key={jamTrack.id} {...jamTrack} />`)
|
|
|
|
else if this.state.mediaSummary.metronomeOpen
|
|
|
|
@state.metronome.mode = MIX_MODES.PERSONAL
|
|
mediaTracks.push(`<SessionMetronome key={this.state.metronome.id} {...this.state.metronome} />`)
|
|
|
|
contents = closeOptions
|
|
else
|
|
|
|
scrollerClassData['media-options-showing'] = true
|
|
contents = mediaOptions
|
|
|
|
scrollerClasses = classNames(scrollerClassData)
|
|
|
|
`<div className="session-media-tracks">
|
|
<h2>recorded audio</h2>
|
|
{contents}
|
|
<div className={scrollerClasses}>
|
|
<ReactCSSTransitionGroup transitionName="session-track-list" transitionAppear={true}>
|
|
{mediaTracks}
|
|
</ReactCSSTransitionGroup>
|
|
</div>
|
|
</div>`
|
|
|
|
|
|
getInitialState:() ->
|
|
{mediaSummary:{mediaOpen: false}, isRecording: false, backingTracks: [], jamTracks: [], recordedTracks: [], metronome: null, jamTrackState: {}}
|
|
|
|
onAppInit: (app) ->
|
|
@app = app
|
|
$(context.AppStore).on('SessionEnded', @onSessionEnded)
|
|
|
|
onSessionEnded: () ->
|
|
@closeWindow()
|
|
|
|
handleBackingTrackSelectedCallback: (result) ->
|
|
|
|
@setState({backingTrackDialogOpen: false})
|
|
|
|
SessionActions.openBackingTrack(result)
|
|
|
|
componentDidMount: () ->
|
|
context.JK.HandleBackingTrackSelectedCallback2 = @handleBackingTrackSelectedCallback
|
|
|
|
|
|
componentDidUpdate: () ->
|
|
|
|
if @state.downloadJamTrack?
|
|
$holder = $(@getDOMNode()).find('.download-jamtrack-holder')
|
|
|
|
if $holder.find('.download-jamtrack').length == 0
|
|
|
|
SessionActions.downloadingJamTrack(true)
|
|
$holder.append(@state.downloadJamTrack.root)
|
|
|
|
# kick off the download JamTrack process
|
|
@state.downloadJamTrack.init()
|
|
|
|
@handlePopup()
|
|
|
|
handlePopup: () ->
|
|
if @state.mediaSummary.userNeedsMediaControls || @state.jamTrackState?.jamTrack?
|
|
unless @childWindow?
|
|
logger.debug("opening media control window")
|
|
@childWindow = window.open("/popups/media-controls", 'Media Controls', 'scrollbars=yes,toolbar=no,status=no,height=155,width=350')
|
|
@childWindow.PopupProps = {media: @state, jamTrackState: context.JamTrackStore.getState(), downloadingJamTrack: context.SessionStore.downloadingJamTrack }
|
|
else
|
|
if @childWindow?
|
|
@childWindow.DontAutoCloseMedia = true
|
|
@childWindow.close()
|
|
@childWindow = null
|
|
})
|