* VRFS-3519 - prevent play click when JamTrack is loading

web/app/assets/javascripts/playbackControls.js

@@ -39,6 +39,7 @@
 
     var $self = $(this);
 
+    var disabled = false;
     var playbackPlaying = false;
     var playbackDurationMs = 0;
     var playbackPositionMs = 0;
@@ -173,6 +174,11 @@
     }
 
     $playButton.on('click', function (e) {
+
+      if (disabled) {
+        logger.debug("PlaybackControls are disabled; ignoring start button")
+        return;
+      }
       startPlay();
       return false;
     });
@@ -484,6 +490,10 @@
       playbackPlaying = false;
     }
 
+    function setDisabled(_disabled) {
+      disabled = _disabled;
+    }
+
     this.update = update;
     this.setPlaybackMode = setPlaybackMode;
     this.startMonitor = startMonitor;
@@ -492,6 +502,7 @@
     this.onPlayStopEvent = onPlayStopEvent;
     this.onPlayStartEvent = onPlayStartEvent;
     this.onPlayPauseEvent = onPlayPauseEvent;
+    this.setDisabled = setDisabled;
 
     return this;
   }

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

@@ -206,6 +206,7 @@ mixins.push(Reflux.listenTo(JamTrackStore, 'onJamTrackStateChanged'))
 
     $root = jQuery(this.getDOMNode())
     controls = context.JK.PlaybackControls($root, {mediaActions: MediaPlaybackActions})
+    controls.setDisabled(@props.disabled)
 
     mediaSummary = MixerStore.mixers.mediaSummary
     metro = MixerStore.mixers.metro
@@ -216,4 +217,8 @@ mixins.push(Reflux.listenTo(JamTrackStore, 'onJamTrackStateChanged'))
     @tryPrepareMetronome(metro)
 
     @setState({mediaSummary: mediaSummary, controls: controls, metro: metro, jamTrackState: jamTrackState})
+
+  componentWillUpdate: (nextProps) ->
+
+    @state.controls.setDisabled(nextProps.disabled) if @state.controls?
 })

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

@@ -386,7 +386,7 @@ mixins.push(Reflux.listenTo(JamTrackStore, 'onJamTrackChanged'))
 
     `<div className="media-controls-popup">
       {header}
-      <MediaControls />
+      <MediaControls disabled={this.state.downloadingJamTrack || this.disableLoading}/>
       {extraControls}
       <a className="close-link button-orange" onClick={this.close}>{closeLinkText}</a>
     </div>`
@@ -588,13 +588,12 @@ mixins.push(Reflux.listenTo(JamTrackStore, 'onJamTrackChanged'))
 
     window.resizeTo(width, height + offset)
 
-  componentWillUpdate: (nextProps, nextState) ->
-
+  computeDisableLoading: (state) ->
     @disableLoading = false
 
     return unless nextState?
 
-    selectedMixdown = nextState?.jamTrackState?.jamTrack?.activeMixdown
+    selectedMixdown = state?.jamTrackState?.jamTrack?.activeMixdown
 
     mixdownDownloading = false
     if selectedMixdown?
@@ -607,5 +606,11 @@ mixins.push(Reflux.listenTo(JamTrackStore, 'onJamTrackChanged'))
 
     @disableLoading = SessionStore.downloadingJamTrack || mixdownDownloading
 
+  componentWillMount: () ->
+    @computeDisableLoading(@state)
+
+  componentWillUpdate: (nextProps, nextState) ->
+    @computeDisableLoading(nextState)
+
 
 })