From 95ec9ce66eb75d5193e6bc9a9c8f439420e7de04 Mon Sep 17 00:00:00 2001 From: Seth Call Date: Thu, 22 Oct 2015 09:04:49 -0500 Subject: [PATCH] * VRFS-3667 - put download buttons in client app view --- ...PopupJamTrackMixdownDownload.js.jsx.coffee | 163 ++++++++++++++++++ .../PopupJamTrackPlayer.js.jsx.coffee | 7 +- .../PopupMediaControls.js.jsx.coffee | 57 +++++- .../actions/JamTrackMixdownActions.js.coffee | 1 + .../stores/JamTrackStore.js.coffee | 5 + .../minimal/jamtrack_download.css.scss | 39 +++++ .../minimal/media_controls.css.scss | 7 +- .../api_jam_track_mixdowns_controller.rb | 2 +- .../controllers/api_jam_tracks_controller.rb | 2 +- web/app/controllers/popups_controller.rb | 8 + .../views/popups/jamtrack_download.html.slim | 2 + web/config/routes.rb | 1 + 12 files changed, 282 insertions(+), 12 deletions(-) create mode 100644 web/app/assets/javascripts/react-components/PopupJamTrackMixdownDownload.js.jsx.coffee create mode 100644 web/app/assets/stylesheets/minimal/jamtrack_download.css.scss create mode 100644 web/app/views/popups/jamtrack_download.html.slim diff --git a/web/app/assets/javascripts/react-components/PopupJamTrackMixdownDownload.js.jsx.coffee b/web/app/assets/javascripts/react-components/PopupJamTrackMixdownDownload.js.jsx.coffee new file mode 100644 index 000000000..2e01584ba --- /dev/null +++ b/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 = `

Mix: "{this.state.mixdown.name}"

` + + if @state.package? + switch this.state.package.signing_state + when 'QUIET_TIMEOUT' + action = `Failure. Try again? ` + when 'QUIET' + action = `Failure. Try again? ` + when 'QUEUED' + action = `Creating mix... ` + when 'QUEUED_TIMEOUT' + action = `Failure. Try again? ` + when 'SIGNING' + action = `Creating mix... ` + when 'SIGNING_TIMEOUT' + action = `Failure. Try again? ` + when 'SIGNED' + action = `` + when 'ERROR' + action = `Failure. Try again? ` + else + action = `` + + else + action = null + + `
+
To download this mix or track, we first need to convert it to an MP3 file.
+ {header} + {action} +
` + + 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.") + ) + +}) \ No newline at end of file diff --git a/web/app/assets/javascripts/react-components/PopupJamTrackPlayer.js.jsx.coffee b/web/app/assets/javascripts/react-components/PopupJamTrackPlayer.js.jsx.coffee index 7229934e6..84ffda604 100644 --- a/web/app/assets/javascripts/react-components/PopupJamTrackPlayer.js.jsx.coffee +++ b/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 = `` - download = `` - myMixdowns.push `
@@ -246,8 +243,8 @@ mixins.push(Reflux.listenTo(JamTrackPlayerStore, 'onJamTrackPlayerStoreChanged')
- {action} - {download} + +
diff --git a/web/app/assets/javascripts/react-components/PopupMediaControls.js.jsx.coffee b/web/app/assets/javascripts/react-components/PopupMediaControls.js.jsx.coffee index f7e7596a3..4c37b8a51 100644 --- a/web/app/assets/javascripts/react-components/PopupMediaControls.js.jsx.coffee +++ b/web/app/assets/javascripts/react-components/PopupMediaControls.js.jsx.coffee @@ -246,6 +246,35 @@ mixins.push(Reflux.listenTo(JamTrackStore, 'onJamTrackChanged'))
` + 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(``) + + myMixdowns.push ` +
+
+ +
+
+ + + + +
+
` + myMixes = `
{myMixdowns}
` mixControls = null @@ -269,7 +298,7 @@ mixins.push(Reflux.listenTo(JamTrackStore, 'onJamTrackChanged')) - + @@ -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) -> diff --git a/web/app/assets/javascripts/react-components/actions/JamTrackMixdownActions.js.coffee b/web/app/assets/javascripts/react-components/actions/JamTrackMixdownActions.js.coffee index 98169165b..475cefc7b 100644 --- a/web/app/assets/javascripts/react-components/actions/JamTrackMixdownActions.js.coffee +++ b/web/app/assets/javascripts/react-components/actions/JamTrackMixdownActions.js.coffee @@ -9,5 +9,6 @@ context = window closeMixdown: {} enqueueMixdown: {} downloadMixdown: {} + openDownloader: {} }) diff --git a/web/app/assets/javascripts/react-components/stores/JamTrackStore.js.coffee b/web/app/assets/javascripts/react-components/stores/JamTrackStore.js.coffee index 9bea103ce..86d4ee8e6 100644 --- a/web/app/assets/javascripts/react-components/stores/JamTrackStore.js.coffee +++ b/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) diff --git a/web/app/assets/stylesheets/minimal/jamtrack_download.css.scss b/web/app/assets/stylesheets/minimal/jamtrack_download.css.scss new file mode 100644 index 000000000..081977943 --- /dev/null +++ b/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; + } + +} \ No newline at end of file diff --git a/web/app/assets/stylesheets/minimal/media_controls.css.scss b/web/app/assets/stylesheets/minimal/media_controls.css.scss index f49dae376..f3eecabc4 100644 --- a/web/app/assets/stylesheets/minimal/media_controls.css.scss +++ b/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; } diff --git a/web/app/controllers/api_jam_track_mixdowns_controller.rb b/web/app/controllers/api_jam_track_mixdowns_controller.rb index 5f620477c..55edbc586 100644 --- a/web/app/controllers/api_jam_track_mixdowns_controller.rb +++ b/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) diff --git a/web/app/controllers/api_jam_tracks_controller.rb b/web/app/controllers/api_jam_tracks_controller.rb index 607dc390c..3dc6d8502 100644 --- a/web/app/controllers/api_jam_tracks_controller.rb +++ b/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 diff --git a/web/app/controllers/popups_controller.rb b/web/app/controllers/popups_controller.rb index b93260d4e..6f0903151 100644 --- a/web/app/controllers/popups_controller.rb +++ b/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 \ No newline at end of file diff --git a/web/app/views/popups/jamtrack_download.html.slim b/web/app/views/popups/jamtrack_download.html.slim new file mode 100644 index 000000000..5dd515273 --- /dev/null +++ b/web/app/views/popups/jamtrack_download.html.slim @@ -0,0 +1,2 @@ +- provide(:page_name, 'jamtrack-download-popup popup') += react_component 'PopupWrapper', {component: 'PopupJamTrackMixdownDownload'} \ No newline at end of file diff --git a/web/config/routes.rb b/web/config/routes.rb index cdee5ff3a..772c48eb7 100644 --- a/web/config/routes.rb +++ b/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