139 lines
4.6 KiB
CoffeeScript
139 lines
4.6 KiB
CoffeeScript
context = window
|
|
MIX_MODES = context.JK.MIX_MODES
|
|
|
|
|
|
@JamTrackLandingScreen = React.createClass({
|
|
|
|
mixins: [Reflux.listenTo(@AppStore,"onAppInit")]
|
|
|
|
getInitialState: () ->
|
|
{user: null}
|
|
|
|
render: () ->
|
|
|
|
howTo = null
|
|
if @state.user?.free_jamtrack
|
|
howTo =
|
|
`<div className="no-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="free-track">
|
|
<span>
|
|
To play with your JamTracks, open a JamTrack while in a session in the JamKazam app. Or <a href="/client#/account/jamtracks">visit the JamTracks Section of your account.</a>
|
|
</span>
|
|
</div>`
|
|
|
|
`<div className="content-body-scroller">
|
|
<div className="list-columns">
|
|
<div className="browse">
|
|
<h2>my jamtracks</h2>
|
|
<div className="howto">
|
|
{howTo}
|
|
</div>
|
|
<h2 className="browse-jamtracks">search jamtracks</h2>
|
|
</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>Solo just the part you want to play in order to hear and learn it</li>
|
|
<li>Mute just the part you want to play and play along with the rest</li>
|
|
<li>Make audio recordings and share them via Facebook or URL</li>
|
|
<li>Make video recordings and share them via YouTube</li>
|
|
<li>And even go online to play with others in real time -- for example, you can play the electric guitar lead, while someone else plays the bass, and all other parts play from the recorded tracks in your session</li>
|
|
</ul>
|
|
<a className="video-thumbnail" href="https://www.youtube.com/watch?v=askHvcCoNfw" rel="external">
|
|
<img className="play" src="/assets/content/icon_youtube_play.png" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>`
|
|
|
|
|
|
componentDidMount: () ->
|
|
logger.debug("componentDidMount")
|
|
|
|
|
|
afterShow: (data) ->
|
|
|
|
if context.JK.currentUserId
|
|
@app.user().done(@onUser)
|
|
else
|
|
@onUser({free_jamtrack: gon.global.one_free_jamtrack_per_user})
|
|
|
|
beforeShow: () ->
|
|
@setState({user: null})
|
|
|
|
onUser:(user) ->
|
|
@setState({user: user})
|
|
|
|
# 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()
|
|
|
|
|
|
buildArtistLinks:(response) ->
|
|
# Get artist names and build links
|
|
@logger.debug("buildArtist links response", response)
|
|
|
|
artists = response.artists
|
|
$("#band_list>li:not('#no_bands_found')").remove()
|
|
if artists.length==0
|
|
@noBandsFound.removeClass("hidden")
|
|
else
|
|
@noBandsFound.addClass("hidden")
|
|
|
|
# client#/jamtrack
|
|
for artist in artists
|
|
artistLink = "<a href='client?artist=#{encodeURIComponent(artist.original_artist)}#/jamtrackBrowse' class='artist-link' artist='#{artist.original_artist}'>#{artist.original_artist} (#{artist.song_count})</a>"
|
|
@bandList.append("<li>#{artistLink}</li>")
|
|
|
|
|
|
# We don't want to do a full page load if this is clicked on here:
|
|
bindArtistLinks:() ->
|
|
that=this
|
|
@bandList.on "click", "a.artist-link", (event)->
|
|
context.location="client#/jamtrackBrowse"
|
|
if window.history.replaceState # ie9 proofing
|
|
window.history.replaceState({}, "", this.href)
|
|
event.preventDefault()
|
|
|
|
|
|
onAppInit: (@app) ->
|
|
|
|
logger.debug("ON APP INI")
|
|
|
|
@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('jamtrackLanding', 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')
|
|
}) |