* VRFS-3667 - put download buttons in client app view

web/app/assets/javascripts/react-components/PopupJamTrackMixdownDownload.js.jsx.coffee

@@ -0,0 +1,163 @@
+context = window
+logger = context.JK.logger
+ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
+rest = context.JK.Rest()
+
+mixins = []
+
+
+# make sure this is actually us opening the window, not someone else (by checking for MixerStore)
+# this check ensures we attempt to listen if this component is created in a popup
+reactContext = if window.opener? then window.opener else window
+# make sure this is actually us opening the window, not someone else (by checking for MixerStore)
+if window.opener?
+  try
+    m = window.opener.MixerStore
+  catch e
+    reactContext = window
+
+# temporarily..
+# reactContext = window
+
+AppActions = reactContext.AppActions
+JamTrackPlayerActions = reactContext.JamTrackPlayerActions
+JamTrackPlayerStore = reactContext.JamTrackPlayerStore
+
+
+@PopupJamTrackMixdownDownload = React.createClass({
+
+  checkServerTimeout: null
+  checkTime: 5000
+  sampleRate: 48
+
+  render: () ->
+    if @state.mixdown?
+      header = `<h2>Mix: "{this.state.mixdown.name}"</h2>`
+
+      if @state.package?
+        switch this.state.package.signing_state
+          when 'QUIET_TIMEOUT'
+            action = `<span className="action">Failure.  Try again? <button className="button-orange" onClick={this.enqueue}></button></span>`
+          when 'QUIET'
+            action = `<span className="action">Failure.  Try again? <button className="button-orange" onClick={this.enqueue}></button></span>`
+          when 'QUEUED'
+            action = `<span className="action">Creating mix... <img src="/assets/shared/spinner.gif" className="please-wait"/></span>`
+          when 'QUEUED_TIMEOUT'
+            action = `<span className="action">Failure.  Try again? <button className="button-orange" onClick={this.enqueue}></button></span>`
+          when 'SIGNING'
+            action = `<span className="action">Creating mix... <img src="/assets/shared/spinner.gif" className="please-wait"/></span>`
+          when 'SIGNING_TIMEOUT'
+            action = `<span className="action">Failure.  Try again? <button className="button-orange" onClick={this.enqueue}></button></span>`
+          when 'SIGNED'
+            action = `<span className="action"><button className="button-orange" onClick={this.download}>DOWNLOAD IN BROWSER</button></span>`
+          when 'ERROR'
+            action = `<span className="action">Failure.  Try again? <button className="button-orange" onClick={this.enqueue}></button></span>`
+      else
+        action = `<span className="action"><button className="button-orange enqueue" onClick={this.enqueue}>CREATE MP3</button></span>`
+
+    else
+      action = null
+
+    `<div className="jamtrack-downloader">
+      <div className="help-text">To download this mix or track, we first need to convert it to an MP3 file.</div>
+      {header}
+      {action}
+    </div>`
+
+  download: (e) ->
+    e.preventDefault()
+
+    AppActions.openExternalUrl(window.location.protocol + '//' + window.location.host + "/api/mixdowns/#{@state.mixdown.id}/download.mp3?file_type=mp3&sample_rate=#{@sampleRate}&download=1")
+
+  enqueue: (e) ->
+    e.preventDefault()
+
+    logger.debug("enqueuing mixdown")
+
+    package_settings = {file_type: 'mp3', encrypt_type: null, sample_rate: @sampleRate}
+    package_settings.id = @state.mixdown.id
+
+    rest.enqueueMixdown(package_settings)
+    .done((enqueued) =>
+      @setState({package: enqueued})
+    )
+    .fail((jqxhr) =>
+      @app.layout.notify({title:'Unable to Create Custom Mix', text: 'Click the error icon to retry.'})
+      fail(jqxhr) if fail?
+    )
+
+  getInitialState: () ->
+    {mixdown:null, package:null}
+
+  getDefaultProps: () ->
+    {fileType: 'mp3'}
+
+  componentWillUpdate: (nextProps, nextState) ->
+
+    cancelTimer = false
+    setTimer = false
+    if nextState.package?
+      switch nextState.package.signing_state
+        when 'QUIET_TIMEOUT'
+          cancelTimer = true
+        when 'QUIET'
+          cancelTimer = true
+        when 'QUEUED'
+          setTimer = true
+        when 'QUEUED_TIMEOUT'
+          cancelTimer = true
+        when 'SIGNING'
+          setTimer = true
+        when 'SIGNING_TIMEOUT'
+          cancelTimer = true
+        when 'SIGNED'
+          cancelTimer = true
+        when 'ERROR'
+          cancelTimer = true
+    else
+      cancelTimer = true
+
+    if cancelTimer && @checkServerTimer?
+      logger.debug("canceling timer")
+      clearTimeout(@checkServerTimer)
+      @checkServerTimer = null
+
+    if setTimer
+      logger.debug("starting timer")
+      if @checkServerTimer?
+        clearTimeout(@checkServerTimer)
+        @checkServerTimer = null
+
+      @checkServerTimer = setTimeout((() =>
+         @fetchJamTrackPackageInfo()
+      ), @checkTime)
+
+  componentDidMount: () ->
+
+    @fetchJamTrackInfo()
+
+  fetchJamTrackPackageInfo: () ->
+    rest.getMixdownPackage({id: @state.package.id})
+    .done((response) =>
+      @setState({package: response})
+    )
+    .fail((jqXHR) =>
+      alert("Unable to fetch JamTrack information. Try logging in.")
+    )
+
+
+  fetchJamTrackInfo: () ->
+    rest.getMixdown({id: gon.jam_track_mixdown_id})
+    .done((response) =>
+
+      for mixdown_package in response.packages
+        if mixdown_package.file_type == @props.fileType
+          activePackage = mixdown_package
+
+      @setState({mixdown: response, package: activePackage})
+    )
+    .fail((jqXHR) =>
+      alert("Unable to fetch JamTrack information. Try logging in.")
+    )
+
+})

web/app/assets/javascripts/react-components/PopupJamTrackPlayer.js.jsx.coffee

@@ -234,9 +234,6 @@ mixins.push(Reflux.listenTo(JamTrackPlayerStore, 'onJamTrackPlayerStoreChanged')
       boundStemPlayClick = this.downloadStem.bind(this)
       boundStemChange = this.stemChanged.bind(this)
 
-      action = `<img src="/assets/content/icon_open@2X.png" className="mixdown-play" onClick={boundStemActivateClick}/>`
-      download = `<img src="/assets/content/icon_download@2X.png" className="mixdown-download" onClick={boundStemPlayClick} />`
-
       myMixdowns.push `
         <div key={track.id} className={classNames({'stem-track' : true, 'mixdown-display': true, 'active' : active})}>
           <div className="mixdown-name">
@@ -246,8 +243,8 @@ mixins.push(Reflux.listenTo(JamTrackPlayerStore, 'onJamTrackPlayerStoreChanged')
             </select>
           </div>
           <div className="mixdown-actions">
-            {action}
-            {download}
+            <img src="/assets/content/icon_open@2X.png" className="mixdown-play" onClick={boundStemActivateClick}/>
+            <img src="/assets/content/icon_download@2X.png" className="mixdown-download" onClick={boundStemPlayClick} />
             <img src ="/assets/content/icon-delete@2X.png" style={{visibility:'hidden'}} className="mixdown-edit" onClick={false} />
             <img src ="/assets/content/icon-delete@2X.png" style={{visibility:'hidden'}} className="mixdown-delete" onClick={false} />
           </div>

web/app/assets/javascripts/react-components/PopupMediaControls.js.jsx.coffee

@@ -246,6 +246,35 @@ mixins.push(Reflux.listenTo(JamTrackStore, 'onJamTrackChanged'))
               </div>
             </div>`
 
+          trackOptions = []
+          for track in jamTrack.tracks
+            if track.track_type == 'Track'
+
+              if track.instrument
+                instrumentId = track.instrument.id
+                instrumentDescription = track.instrument.description
+                if track.part? && track.part != instrumentDescription
+                  part = "(#{track.part})"
+                else
+                  part = ''
+              trackOptions.push(`<option key={track.id} value={track.id}>{instrumentDescription} {part}</option>`)
+
+          myMixdowns.push `
+              <div key={track.id} className={classNames({'stem-track' : true, 'mixdown-display': true})}>
+                <div className="mixdown-name">
+                  <select className="active-stem-select" name="active-stem-select" onChange={this.stemChanged}>
+                    <option key="null" value="">or select a track</option>
+                    {trackOptions}
+                  </select>
+                </div>
+                <div className="mixdown-actions">
+                  <img src="/assets/content/icon_open@2X.png" style={{visibility:'hidden'}} className="mixdown-play"/>
+                  <img src="/assets/content/icon_download@2X.png" className="mixdown-download" onClick={this.stemDownload}/>
+                  <img src ="/assets/content/icon-delete@2X.png" style={{visibility:'hidden'}} className="mixdown-edit" onClick={false} />
+                  <img src ="/assets/content/icon-delete@2X.png" style={{visibility:'hidden'}} className="mixdown-delete" onClick={false} />
+                </div>
+              </div>`
+
           myMixes = `<div key="my-mixes" className="my-mixes">{myMixdowns}</div>`
 
         mixControls = null
@@ -269,7 +298,7 @@ mixins.push(Reflux.listenTo(JamTrackStore, 'onJamTrackChanged'))
                     <option value="separator-1">------------</option>
                     <option value="-5">Slower by 5%</option>
                     <option value="-10">Slower by 10%</option>
-                    <option value="-15">Slower by 15%</option>
+                      <option value="-15">Slower by 15%</option>
                     <option value="-20">Slower by 20%</option>
                     <option value="-25">Slower by 25%</option>
                     <option value="-30">Slower by 30%</option>
@@ -458,6 +487,22 @@ mixins.push(Reflux.listenTo(JamTrackStore, 'onJamTrackChanged'))
 
     AppActions.openExternalUrl(window.location.protocol + '//' + window.location.host + "/api/jamtracks/#{jamTrack.id}/stems/master/download.mp3?file_type=mp3&download=1")
 
+  stemChanged:() ->
+  stemDownload: (e) ->
+    e.preventDefault()
+
+    $select = $(this.getDOMNode()).find('.active-stem-select')
+
+    selectedTrackId = $select.val()
+
+    if !selectedTrackId? || selectedTrackId == ''
+      alert("You must select a track in order to download.")
+    else
+      e.preventDefault()
+
+      AppActions.openExternalUrl(window.location.protocol + '//' + window.location.host + "/api/jamtracks/#{@state.jamTrackState.jamTrack.id}/stems/#{selectedTrackId}/download.mp3?file_type=mp3&download=1")
+
+
   onEditKeydown: (mixdown, e) ->
     logger.debug("on edit keydown", e)
     if e.keyCode == 13 # enter
@@ -487,10 +532,16 @@ mixins.push(Reflux.listenTo(JamTrackStore, 'onJamTrackChanged'))
   downloadMixdownReady: (mixdown, e) ->
     e.preventDefault()
 
-    if mixdown.myPackage?.signing_state == 'SIGNED'
+    # find the mp3 package for browser state check
+    for mixdown_package in mixdown.packages
+      if mixdown_package.file_type == 'mp3'
+        browserPackage = mixdown_package
+        break
+
+    if browserPackage?.signing_state == 'SIGNED'
       AppActions.openExternalUrl(window.location.protocol + '//' + window.location.host + "/api/mixdowns/#{mixdown.id}/download.mp3?file_type=mp3&sample_rate=48&download=1")
     else
-      alert("The mix is not yet ready to download")
+      JamTrackMixdownActions.openDownloader(mixdown)
 
   mixdownError: (mixdown) ->
 

web/app/assets/javascripts/react-components/actions/JamTrackMixdownActions.js.coffee

@@ -9,5 +9,6 @@ context = window
   closeMixdown: {}
   enqueueMixdown: {}
   downloadMixdown: {}
+  openDownloader: {}
 })
 

web/app/assets/javascripts/react-components/stores/JamTrackStore.js.coffee

@@ -400,6 +400,11 @@ JamTrackActions = @JamTrackActions
     onDownloadMixdown: (mixdown) ->
       logger.debug("download mixdown", mixdown)
 
+    onOpenDownloader: (mixdown) ->
+      logger.debug("open mixdown dowloader", mixdown)
+
+      window.open("/popups/jamtrack/download/#{mixdown.jam_track_id}/mixdowns/#{mixdown.id}", 'Mixdown Downloader', 'scrollbars=yes,toolbar=no,status=no,height=171,width=340')
+
     onRefreshMixdown: (mixdown) ->
       logger.debug("refresh mixdown", mixdown)
 

web/app/assets/stylesheets/minimal/jamtrack_download.css.scss

@@ -0,0 +1,39 @@
+@import "client/common";
+
+body.jamtrack-download-popup.popup {
+
+  text-align: center;
+
+  background-color: #242323;
+
+  #minimal-container {
+    padding-bottom: 0;
+  }
+
+  .jamtrack-downloader {
+    padding:30px 30px;
+  }
+
+  h2 {
+    font-size:14px;
+    font-weight:bold;
+    margin-bottom:20px;
+  }
+
+  .action {
+    height:24px;
+    vertical-align: middle;
+  }
+
+  .please-wait {
+    height:24px;
+    width:24px;
+    vertical-align: middle;
+    margin-left:10px;
+  }
+
+  .help-text {
+    margin-bottom:20px;
+  }
+
+}

web/app/assets/stylesheets/minimal/media_controls.css.scss

@@ -141,6 +141,10 @@ body.media-controls-popup.popup {
       }
     }
 
+    .active-stem-select {
+      max-width:141px;
+    }
+
     .mixdown-name {
       line-height:125%;
       width:210px;
@@ -170,7 +174,6 @@ body.media-controls-popup.popup {
     .mixdown-download {
       width:24px;
       height:24px;
-      display:none;
 
       cursor:pointer;
 
@@ -182,7 +185,7 @@ body.media-controls-popup.popup {
     .mixdown-play {
       width:24px;
       height:24px;
-      //margin-right:10px;
+      margin-right:10px;
 
       cursor:pointer;
     }

web/app/controllers/api_jam_track_mixdowns_controller.rb

@@ -84,7 +84,7 @@ class ApiJamTrackMixdownsController < ApiController
         @package.first_downloaded_at = now if @package.first_downloaded_at.nil?
         @package.save!
         if params[:download]
-          redirect_to @package.sign_url(120, 'application/octet-stream', "attachment; filename=#{@package.jam_track_mixdown.name}.#{params[:file_type]}")
+          redirect_to @package.sign_url(120, 'application/octet-stream', "attachment; filename=\"#{@package.jam_track_mixdown.name}.#{params[:file_type]}\"")
 
         else
           redirect_to @package.sign_url(120)

web/app/controllers/api_jam_tracks_controller.rb

@@ -114,7 +114,7 @@ class ApiJamTracksController < ApiController
       end
 
       if params[:download]
-        redirect_to jam_track_track.web_download_sign_url(120, params[:file_type], 'application/octet-stream', "attachment; filename=#{@jam_track_right.jam_track.name + '-' + jam_track_track.display_name}.mp3")
+        redirect_to jam_track_track.web_download_sign_url(120, params[:file_type], 'application/octet-stream', "attachment; filename=\"#{@jam_track_right.jam_track.name + '-' + jam_track_track.display_name}.mp3\"")
       else
         redirect_to jam_track_track.web_download_sign_url(120, params[:file_type])
       end

web/app/controllers/popups_controller.rb

@@ -35,4 +35,12 @@ class PopupsController < ApplicationController
     gon.jamtrack_id = @jamtrack_id
     render :layout => "minimal"
   end
+
+  def jamtrack_download
+    @jam_track_id = params[:jam_track_id]
+    @jam_track_mixdown_id = params[:jam_track_mixdown_id]
+    gon.jam_track_id = @jam_track_id
+    gon.jam_track_mixdown_id = @jam_track_mixdown_id
+    render :layout => "minimal"
+  end
 end

web/app/views/popups/jamtrack_download.html.slim

@@ -0,0 +1,2 @@
+- provide(:page_name, 'jamtrack-download-popup popup')
+= react_component 'PopupWrapper', {component: 'PopupJamTrackMixdownDownload'}

web/config/routes.rb

@@ -153,6 +153,7 @@ SampleApp::Application.routes.draw do
     match '/configure-video',     to: 'popups#configure_video'
     match '/video/upload/:recording_id', to: 'popups#vio_upload'
     match '/jamtrack-player/:jam_track_id', to: 'popups#jamtrack_player'
+    match '/jamtrack/download/:jam_track_id/mixdowns/:jam_track_mixdown_id', to: 'popups#jamtrack_download'
   end
 
   scope '/corp' do