jam-cloud/web/app/assets/javascripts/react-components/JamTrackLandingScreen.js.jsx.coffee

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="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>
          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 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>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>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>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 live &amp; in sync</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: () ->
    $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)

  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()


  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'))
})