230 lines
8.6 KiB
CoffeeScript
230 lines
8.6 KiB
CoffeeScript
context = window
|
|
MIX_MODES = context.JK.MIX_MODES
|
|
rest = context.JK.Rest()
|
|
|
|
|
|
@JamTrackLandingScreen = React.createClass({
|
|
|
|
mixins: [Reflux.listenTo(@AppStore,"onAppInit"), Reflux.listenTo(@UserStore, "onUserChanged")]
|
|
|
|
getInitialState: () ->
|
|
{user: null, purchasedJamTracks: []}
|
|
|
|
onUserChanged: (userState) ->
|
|
@onUser(userState.user) if userState.user
|
|
|
|
render: () ->
|
|
|
|
howTo = null
|
|
if @state.user?.free_jamtrack
|
|
howTo =
|
|
`<div className="free-jamtrack">
|
|
<span>
|
|
For a limited time, get one JamTrack free. Search JamTracks below, add one to your shopping cart, and we'll make it free during the checkout process.
|
|
</span>
|
|
</div>`
|
|
else
|
|
howTo = `<div className="no-free-jamtrack">
|
|
<span>
|
|
The fastest way to start playing with your JamTracks is to open them below and use our <a href="https://jamkazam.desk.com/customer/portal/articles/2166273-playing-your-jamtracks-in-a-browser" onClick={this.customMixHelpClicked}>custom mix feature</a> to play them back in your browser. To access the full set of JamTrack features, <a href="/downloads" rel="external" onClick={this.downloadsClicked}>install our free app</a>. To learn more about all you can do with JamTracks, check out our <a href="https://jamkazam.desk.com/customer/en/portal/articles/2124663-playing-with-jamtracks" onClick={this.jamTrackHelpClicked}>JamTracks help docs</a>.
|
|
</span>
|
|
</div>`
|
|
|
|
playJamTracks = []
|
|
|
|
for jamTrack in @state.purchasedJamTracks
|
|
playJamTracks.push `<tr className="play-jamtrack"><td><a onClick={this.onPlayJamTrack.bind(this, jamTrack)}>{jamTrack.name}</a> by {jamTrack.original_artist}</td></tr>`
|
|
|
|
if @state.purchasedJamTracks.length < 5
|
|
# fill out the table with empty rows
|
|
for x in [@state.purchasedJamTracks.length...(6 - @state.purchasedJamTracks.length )] by 1
|
|
playJamTracks.push `<tr><td> </td></tr>`
|
|
|
|
playableJamTracks =
|
|
`<div className="purchased-jam-tracks">
|
|
<table className="jamtable" cellspacing="0" cellpadding="0" border="0">
|
|
<thead>
|
|
<tr><th className="jamtrack-name" align="left">JAMTRACKS</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
{playJamTracks}
|
|
</tbody>
|
|
</table>
|
|
</div>`
|
|
|
|
`<div className="content-body-scroller">
|
|
<div className="list-columns">
|
|
<div className="browse">
|
|
<h2>my jamtracks</h2>
|
|
<div className="howto">
|
|
{howTo}
|
|
{playableJamTracks}
|
|
</div>
|
|
<h2 className="browse-jamtracks">search jamtracks</h2>
|
|
<div className="search-area">
|
|
<div className="search-help para"> To search by the name of the original artist, band, or song name, enter your search words below:</div>
|
|
<div className="search-controls">
|
|
<JamTrackAutoComplete onSearch={this.search} /><button onClick={this.searchByString} className="search-by-string-btn button-orange ">SEARCH</button>
|
|
</div>
|
|
<div className="filter-help para">To search by genre and instrument, make your selections below:</div>
|
|
<div className="search-controls">
|
|
<select className="genre-list easydropdown" name="genres">
|
|
<option value="">Any Genre</option>
|
|
</select>
|
|
<select className="instrument-list easydropdown" name="insruments">
|
|
<option value="">Any Instrument</option>
|
|
</select>
|
|
<button className="search-by-filter-btn button-orange" onClick={this.searchByFilter}>SEARCH</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="about">
|
|
<h2>what are jamtracks?</h2>
|
|
<div className="what">
|
|
<div className="details">
|
|
JamTracks are the best way to play along with your favorite music! Unlike traditional backing tracks, JamTracks are professionally mastered, complete multitrack recordings, with fully isolated tracks for each part of the master mix. Used with the free JamKazam app & Internet service, you can:
|
|
</div>
|
|
<ul>
|
|
<li>Choose your favorites from our catalog of 3,700+ songs</li>
|
|
<li>Listen to just the single part you want to play to learn it</li>
|
|
<li>Mute the part you want to play, and play along with the rest of the band</li>
|
|
<li>Slow down playback to practice without changing the pitch</li>
|
|
<li>Change the song key by raising or lowering pitch in half steps</li>
|
|
<li>Save your custom mixes for easy access, and export them to use anywhere</li>
|
|
<li>Apply VST & AU audio plugin effects to your live performance</li>
|
|
<li>Use MIDI with VST & AU instruments for keys, electronic drums, more</li>
|
|
<li>Make audio recordings and share via Facebook or URL</li>
|
|
<li>Make video recordings and share via YouTube</li>
|
|
<li>Play online live and in sync with others from different locations</li>
|
|
<li>JamTracks work in standard browser, with more features in Win/Mac apps</li>
|
|
</ul>
|
|
<a className="video-thumbnail" href="https://www.youtube.com/watch?v=07zJC7C2ICA" rel="external">
|
|
<img className="play" src="/assets/content/icon_youtube_play.png" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>`
|
|
|
|
|
|
componentDidMount: () ->
|
|
$root = $(@getDOMNode())
|
|
|
|
search: (searchType, searchData) ->
|
|
context.JamTrackActions.requestSearch(searchType, searchData)
|
|
|
|
searchByString: (e) ->
|
|
e.preventDefault()
|
|
|
|
context.JamTrackActions.requestSearch('user-input', window.JamTrackSearchInput)
|
|
|
|
searchByFilter: (e) ->
|
|
e.preventDefault()
|
|
|
|
$root = $(@getDOMNode())
|
|
genre = $root.find('select.genre-list').val()
|
|
instrument = $root.find('select.instrument-list').val()
|
|
context.JamTrackActions.requestFilter(genre, instrument)
|
|
|
|
processUrl: () ->
|
|
|
|
if $.QueryString['redeemed_flow']?
|
|
@redeemedFlow = true
|
|
|
|
if @redeemedFlow
|
|
|
|
if window.history.replaceState #ie9 proofing
|
|
window.history.replaceState({}, "", "/client#/jamtrack")
|
|
|
|
preparePlayJamTrackProd: () ->
|
|
setTimeout((() =>
|
|
$element = $(this.getDOMNode()).find('.purchased-jam-tracks .play-jamtrack a').first()
|
|
$offsetParent = $element.closest('.screen')
|
|
|
|
context.JK.HelpBubbleHelper.jamtrackWebPlay($element, $offsetParent)
|
|
), 1500)
|
|
|
|
afterShow: (data) ->
|
|
|
|
@processUrl()
|
|
|
|
if !context.JK.currentUserId
|
|
@onUser({free_jamtrack: context.JK.currentUserFreeJamTrack})
|
|
|
|
|
|
|
|
beforeShow: () ->
|
|
@setState({user: null})
|
|
|
|
onUser:(user) ->
|
|
@setState({user: user})
|
|
|
|
rest.getPurchasedJamTracks({page:1, per_page:20})
|
|
.done((purchasedJamTracks) =>
|
|
if @redeemedFlow
|
|
@preparePlayJamTrackProd()
|
|
@redeemedFlow = false
|
|
@setState({purchasedJamTracks: purchasedJamTracks.jamtracks})
|
|
)
|
|
.fail((jqXHR, textStatus, errorMessage) =>
|
|
@app.ajaxError(jqXHR, textStatus, errorMessage);
|
|
)
|
|
|
|
# Get artist names and build links
|
|
#@rest.getJamTrackArtists({group_artist: true, per_page:100})
|
|
#.done(this.buildArtistLinks)
|
|
#.fail(this.handleFailure)
|
|
|
|
# Bind links to action that will open the jam_tracks list view filtered to given artist_name:
|
|
# artist_name
|
|
#@bindArtistLinks()
|
|
|
|
customMixHelpClicked: (e) ->
|
|
e.preventDefault()
|
|
context.JK.popExternalLink($(e.target).attr('href'))
|
|
|
|
downloadsClicked:(e) ->
|
|
e.preventDefault()
|
|
context.JK.popExternalLink($(e.target).attr('href'))
|
|
|
|
jamTrackHelpClicked: (e) ->
|
|
e.preventDefault()
|
|
context.JK.popExternalLink($(e.target).attr('href'))
|
|
|
|
onPlayJamTrack: (jamTrack, e) ->
|
|
e.preventDefault()
|
|
|
|
# popup window
|
|
JamTrackPlayerActions.open(jamTrack)
|
|
|
|
|
|
onAppInit: (@app) ->
|
|
@rest = context.JK.Rest()
|
|
@client = context.jamClient
|
|
@logger = context.JK.logger
|
|
@screen = null
|
|
@noFreeJamTrack = null
|
|
@freeJamTrack = null
|
|
@bandList = null
|
|
@noBandsFound = null
|
|
|
|
screenBindings =
|
|
'beforeShow': @beforeShow
|
|
'afterShow': @afterShow
|
|
|
|
@app.bindScreen('jamtrack', screenBindings)
|
|
|
|
@screen = $('#jamtrackLanding')
|
|
@noFreeJamTrack = @screen.find('.no-free-jamtrack')
|
|
@freeJamTrack = @screen.find('.free-jamtrack')
|
|
@bandList = @screen.find('#band_list')
|
|
@noBandsFound = @screen.find('#no_bands_found')
|
|
|
|
$root = $(@getDOMNode())
|
|
context.JK.GenreSelectorHelper.render2($root.find('select.genre-list'))
|
|
|
|
@instrumentSelector = new context.JK.InstrumentSelector(@app)
|
|
@instrumentSelector.initialize(false, true)
|
|
@instrumentSelector.renderDropdown($root.find('select.instrument-list'))
|
|
}) |