* VRFS-3177 - add spinner to playback and stop preloading all media on page

admin/config/initializers/jam_track_tracks.rb

@@ -52,87 +52,4 @@ class JamRuby::JamTrackTrack
     end
   end
 
-  def generate_preview
-
-    begin
-      Dir.mktmpdir do |tmp_dir|
-
-        input = File.join(tmp_dir, 'in.ogg')
-        output = File.join(tmp_dir, 'out.ogg')
-        output_mp3 = File.join(tmp_dir, 'out.mp3')
-
-        start = self.preview_start_time.to_f / 1000
-        stop = start + 20
-
-        raise 'no track' unless self["url_44"]
-
-        s3_manager.download(self.url_by_sample_rate(44), input)
-
-        command = "sox \"#{input}\" \"#{output}\" trim #{sprintf("%.3f", start)} =#{sprintf("%.3f", stop)}"
-
-        @@log.debug("trimming using: " + command)
-
-        sox_output = `#{command}`
-
-        result_code = $?.to_i
-
-        if result_code != 0
-          @@log.debug("fail #{result_code}")
-          @preview_generate_error = "unable to execute cut command #{sox_output}"
-        else
-          # now create mp3 off of ogg preview
-
-          convert_mp3_cmd = "#{APP_CONFIG.ffmpeg_path} -i \"#{output}\" -ab 192k \"#{output_mp3}\""
-
-          @@log.debug("converting to mp3 using: " + convert_mp3_cmd)
-
-          convert_output = `#{convert_mp3_cmd}`
-
-          result_code = $?.to_i
-
-          if result_code != 0
-            @@log.debug("fail #{result_code}")
-            @preview_generate_error = "unable to execute mp3 convert command #{convert_output}"
-          else
-            ogg_digest = ::Digest::MD5.file(output)
-            mp3_digest = ::Digest::MD5.file(output_mp3)
-            self["preview_md5"] = ogg_md5 = ogg_digest.hexdigest
-            self["preview_mp3_md5"] = mp3_md5 = mp3_digest.hexdigest
-
-            @@log.debug("uploading ogg preview to #{self.preview_filename('ogg')}")
-            s3_public_manager.upload(self.preview_filename(ogg_md5, 'ogg'), output, content_type: 'audio/ogg', content_md5: ogg_digest.base64digest)
-            @@log.debug("uploading mp3 preview to #{self.preview_filename('mp3')}")
-            s3_public_manager.upload(self.preview_filename(mp3_md5, 'mp3'), output_mp3, content_type: 'audio/mpeg', content_md5: mp3_digest.base64digest)
-
-            self.skip_uploader = true
-
-            original_ogg_preview_url = self["preview_url"]
-            original_mp3_preview_url = self["preview_mp3_url"]
-
-            # and finally update the JamTrackTrack with the new info
-            self["preview_url"] = self.preview_filename(ogg_md5, 'ogg')
-            self["preview_length"] = File.new(output).size
-            # and finally update the JamTrackTrack with the new info
-            self["preview_mp3_url"] = self.preview_filename(mp3_md5, 'mp3')
-            self["preview_mp3_length"] = File.new(output_mp3).size
-            self.save!
-
-            # if all that worked, now delete old previews, if present
-            begin
-              s3_public_manager.delete(original_ogg_preview_url) if original_ogg_preview_url && original_ogg_preview_url != self["preview_url"]
-              s3_public_manager.delete(original_mp3_preview_url) if original_mp3_preview_url && original_mp3_preview_url != track["preview_mp3_url"]
-            rescue
-              puts "UNABLE TO CLEANUP OLD PREVIEW URL"
-            end
-
-          end
-        end
-      end
-    rescue Exception => e
-      @@log.error("error in sox command #{e.to_s}")
-      @preview_generate_error = e.to_s
-    end
-
-  end
-
 end

ruby/lib/jam_ruby/models/jam_track_track.rb

@@ -130,7 +130,92 @@ module JamRuby
       s3_public_manager.delete(self[:preview_mp3_url]) if self[:preview_mp3_url] && s3_public_manager.exists?(self[:preview_mp3_url])
     end
 
-  private
+
+    def generate_preview
+
+      begin
+        Dir.mktmpdir do |tmp_dir|
+
+          input = File.join(tmp_dir, 'in.ogg')
+          output = File.join(tmp_dir, 'out.ogg')
+          output_mp3 = File.join(tmp_dir, 'out.mp3')
+
+          start = self.preview_start_time.to_f / 1000
+          stop = start + 20
+
+          raise 'no track' unless self["url_44"]
+
+          s3_manager.download(self.url_by_sample_rate(44), input)
+
+          command = "sox \"#{input}\" \"#{output}\" trim #{sprintf("%.3f", start)} =#{sprintf("%.3f", stop)}"
+
+          @@log.debug("trimming using: " + command)
+
+          sox_output = `#{command}`
+
+          result_code = $?.to_i
+
+          if result_code != 0
+            @@log.debug("fail #{result_code}")
+            @preview_generate_error = "unable to execute cut command #{sox_output}"
+          else
+            # now create mp3 off of ogg preview
+
+            convert_mp3_cmd = "#{APP_CONFIG.ffmpeg_path} -i \"#{output}\" -ab 192k \"#{output_mp3}\""
+
+            @@log.debug("converting to mp3 using: " + convert_mp3_cmd)
+
+            convert_output = `#{convert_mp3_cmd}`
+
+            result_code = $?.to_i
+
+            if result_code != 0
+              @@log.debug("fail #{result_code}")
+              @preview_generate_error = "unable to execute mp3 convert command #{convert_output}"
+            else
+              ogg_digest = ::Digest::MD5.file(output)
+              mp3_digest = ::Digest::MD5.file(output_mp3)
+              self["preview_md5"] = ogg_md5 = ogg_digest.hexdigest
+              self["preview_mp3_md5"] = mp3_md5 = mp3_digest.hexdigest
+
+              @@log.debug("uploading ogg preview to #{self.preview_filename('ogg')}")
+              s3_public_manager.upload(self.preview_filename(ogg_md5, 'ogg'), output, content_type: 'audio/ogg', content_md5: ogg_digest.base64digest)
+              @@log.debug("uploading mp3 preview to #{self.preview_filename('mp3')}")
+              s3_public_manager.upload(self.preview_filename(mp3_md5, 'mp3'), output_mp3, content_type: 'audio/mpeg', content_md5: mp3_digest.base64digest)
+
+              self.skip_uploader = true
+
+              original_ogg_preview_url = self["preview_url"]
+              original_mp3_preview_url = self["preview_mp3_url"]
+
+              # and finally update the JamTrackTrack with the new info
+              self["preview_url"] = self.preview_filename(ogg_md5, 'ogg')
+              self["preview_length"] = File.new(output).size
+              # and finally update the JamTrackTrack with the new info
+              self["preview_mp3_url"] = self.preview_filename(mp3_md5, 'mp3')
+              self["preview_mp3_length"] = File.new(output_mp3).size
+              self.save!
+
+              # if all that worked, now delete old previews, if present
+              begin
+                s3_public_manager.delete(original_ogg_preview_url) if original_ogg_preview_url && original_ogg_preview_url != self["preview_url"]
+                s3_public_manager.delete(original_mp3_preview_url) if original_mp3_preview_url && original_mp3_preview_url != track["preview_mp3_url"]
+              rescue
+                puts "UNABLE TO CLEANUP OLD PREVIEW URL"
+              end
+
+            end
+          end
+        end
+      rescue Exception => e
+        @@log.error("error in sox command #{e.to_s}")
+        @preview_generate_error = e.to_s
+      end
+
+    end
+
+
+    private
     def normalize_position
       parent = self.jam_track
       position = 0        

web/app/assets/javascripts/dialog/configureTrackDialog.js

@@ -197,7 +197,6 @@
       configureTracksHelper.reset();
       voiceChatHelper.reset();
       voiceChatHelper.beforeShow();
-
     }
 
     function afterShow() {

web/app/assets/javascripts/jam_track_preview.js.coffee

@@ -19,6 +19,7 @@ context.JK.JamTrackPreview = class JamTrackPreview
     @instrumentIcon = null
     @instrumentName = null
     @part = null
+    @loading = null
 
     template = $('#template-jam-track-preview')
     throw "no jam track  preview template" if not template.exists()
@@ -29,6 +30,7 @@ context.JK.JamTrackPreview = class JamTrackPreview
     @instrumentIcon = @root.find('.instrument-icon')
     @instrumentName = @root.find('.instrument-name')
     @part = @root.find('.part')
+    @loading = @root.find('.loading')
 
     @playButton.on('click', @play)
     @stopButton.on('click', @stop)
@@ -71,16 +73,9 @@ context.JK.JamTrackPreview = class JamTrackPreview
       urls = [@jamTrackTrack.preview_mp3_url]
       if @jamTrackTrack.preview_ogg_url?
         urls.push(@jamTrackTrack.preview_ogg_url)
+      @urls = urls
 
       @no_audio = false
-      @root.on('remove', @onDestroyed);
-
-      @sound = new Howl({
-        src: urls,
-        autoplay: false,
-        loop: false,
-        volume: 1.0,
-        onend: @onHowlerEnd})
     else
       @no_audio = true
 
@@ -103,6 +98,9 @@ context.JK.JamTrackPreview = class JamTrackPreview
     @playButton.removeClass('hidden')
     @removeNowPlaying()
 
+  onHowlerLoad: () =>
+    @loading.addClass('hidden')
+
   play: (e) =>
     if e?
       e.stopPropagation()
@@ -110,6 +108,21 @@ context.JK.JamTrackPreview = class JamTrackPreview
     if @no_audio
       context.JK.prodBubble(@playButton, 'There is no preview available for this track.', {}, {duration:2000})
     else
+      unless @sound?
+        @root.on('remove', @onDestroyed);
+
+        @sound = new Howl({
+          src: @urls,
+          autoplay: false,
+          loop: false,
+          volume: 1.0,
+          preload: true,
+          onload: @onHowlerLoad
+          onend: @onHowlerEnd})
+
+        @loading.removeClass('hidden')
+
+
       @logger.debug("play issued for jam track preview")
       @sound.play()
       for playingSound in context.JK.JamTrackPreview.nowPlaying
@@ -122,7 +135,7 @@ context.JK.JamTrackPreview = class JamTrackPreview
     return false
 
   issueStop: () =>
-    @logger.debug("stop issued for jam track preview")
+    @logger.debug("pause issued for jam track preview")
     @sound.pause() # stop does not actually stop in windows client
     @stopButton.addClass('hidden')
     @playButton.removeClass('hidden')

web/app/assets/stylesheets/client/jamTrackPreview.css.scss

@@ -2,6 +2,7 @@
 
 .jam-track-preview {
 
+  position:relative;
   display:inline-block;
   line-height:24px;
   vertical-align: middle;
@@ -57,4 +58,14 @@
       background-image: url('/assets/content/icon-pause-24-black.png');
     }
   }
+
+  .spinner-small {
+    vertical-align: middle;
+    top: -4px;
+    right: -32px;
+    position:absolute;
+    &.hidden {
+      display:none;
+    }
+  }
 }

web/app/views/clients/_jam_track_preview.html.slim

@@ -5,4 +5,5 @@ script type="text/template" id='template-jam-track-preview'
       a.hidden href="#" class='stop-button {{data.color}}'
     img.instrument-icon hoveraction="instrument" data-instrument-id="" width="24" height="24"
     .instrument-name
-    .part
+    .part
+    .loading.spinner-small.hidden