distribute client page images in to 3 css sprite files

this is to reduce the size of sprite images

ruby/lib/jam_ruby/lib/s3_manager.rb

@@ -29,7 +29,8 @@ module JamRuby
       "http#{options[:secure] ? "s" : ""}://s3.amazonaws.com/#{@aws_bucket}/#{filename}"
     end
 
-    # XXX: the client can not support HTTPS atm!!! AGH
+    # XXX: the client can not support HTTPS atm!!! AGH  Change the :url to => https://s3.jamkazam.com when client supports https
+    # is_native_client check?
     def upload_sign(filename, content_md5, part_number, upload_id)
       hdt = http_date_time
       str_to_sign = "PUT\n#{content_md5}\n#{content_type}\n#{hdt}\n/#{@aws_bucket}/#{filename}?partNumber=#{part_number}&uploadId=#{upload_id}"

ruby/lib/jam_ruby/models/mix.rb

@@ -305,17 +305,17 @@ module JamRuby
     end
 
     # if the url starts with http, just return it because it's in some other store.  Otherwise it's a relative path in s3 and needs be signed
-    def resolve_url(url_field, mime_type, expiration_time)
-      self[url_field].start_with?('http') ? self[url_field] : s3_manager.sign_url(self[url_field], {:expires => expiration_time, :response_content_type => mime_type, :secure => true})
+    def resolve_url(url_field, mime_type, expiration_time, secure = true)
+      self[url_field].start_with?('http') ? self[url_field] : s3_manager.sign_url(self[url_field], {:expires => expiration_time, :response_content_type => mime_type, :secure => secure})
     end
 
-    def sign_url(expiration_time = 120, type='ogg')
+    def sign_url(expiration_time = 120, type='ogg', secure = true)
       type ||= 'ogg'
       # expire link in 1 minute--the expectation is that a client is immediately following this link
       if type == 'ogg'
-        resolve_url(:ogg_url, 'audio/ogg', expiration_time)
+        resolve_url(:ogg_url, 'audio/ogg', expiration_time, secure)
       else
-        resolve_url(:mp3_url, 'audio/mpeg', expiration_time)
+        resolve_url(:mp3_url, 'audio/mpeg', expiration_time, secure)
       end
     end
 

ruby/lib/jam_ruby/models/recorded_backing_track.rb

@@ -40,8 +40,8 @@ module JamRuby
       recorded_backing_track
     end
 
-    def sign_url(expiration_time = 120)
-      s3_manager.sign_url(self[:url], {:expires => expiration_time, :response_content_type => 'audio/ogg', :secure => true})
+    def sign_url(expiration_time = 120, secure = true)
+      s3_manager.sign_url(self[:url], {:expires => expiration_time, :response_content_type => 'audio/ogg', :secure => secure})
     end
 
     def can_download?(some_user)

ruby/lib/jam_ruby/models/recorded_track.rb

@@ -165,8 +165,8 @@ module JamRuby
       recorded_track.is_skip_mount_uploader = false
       recorded_track
     end
-    def sign_url(expiration_time = 120)
-      s3_manager.sign_url(self[:url], {:expires => expiration_time, :response_content_type => 'audio/ogg', :secure => true})
+    def sign_url(expiration_time = 120, secure = true)
+      s3_manager.sign_url(self[:url], {:expires => expiration_time, :response_content_type => 'audio/ogg', :secure => secure})
     end
 
     def upload_start(length, md5)

web/Gemfile

@@ -148,6 +148,7 @@ gem 'zip-codes'
 #gem "browserify-rails", "~> 0.7"
 
 gem 'elasticsearch'
+gem 'css_sprite', '~> 2.4'
 
 if ENV['FASTER_PATH'] == '1'
   # https://github.com/danielpclark/faster_path

web/Gemfile.lock

@@ -143,6 +143,8 @@ GEM
     concurrent-ruby (1.1.8)
     connection_pool (2.2.3)
     crass (1.0.6)
+    css_sprite (2.4.0)
+      mini_magick
     database_cleaner (1.3.0)
     devise (3.3.0)
       bcrypt (~> 3.0)
@@ -463,6 +465,7 @@ GEM
       mime-types-data (~> 3.2015)
     mime-types-data (3.2020.1104)
     mimemagic (0.3.5)
+    mini_magick (4.11.0)
     mini_mime (1.0.2)
     mini_portile2 (2.4.0)
     minitest (5.14.3)
@@ -820,6 +823,7 @@ DEPENDENCIES
   cause
   coffee-rails
   coffee-script-source (= 1.12.2)
+  css_sprite (~> 2.4)
   database_cleaner (= 1.3.0)
   devise (= 3.3.0)
   elasticsearch
@@ -932,7 +936,7 @@ DEPENDENCIES
   zip-codes
 
 RUBY VERSION
-   ruby 2.3.1p112
+   ruby 2.4.1p111
 
 BUNDLED WITH
    1.17.3

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

@@ -94,5 +94,8 @@
  *= require landings/partner_agreement_v1
  *= require ./teachers
  *= require_directory ./react-components
-
+  *= require 'icon_css_sprite'
+ *= require 'logo_css_sprite'
+ *= require 'css_sprite'
+ 
 */

web/app/assets/stylesheets/css_sprite.scss

@@ -0,0 +1,96 @@
+.arrow_left_24, .arrow_right_24, .audio_capture_ftue, .avatar_generic, .avatar_generic_band,
+.checkmark, .computer_ftue, .down_arrow, .down_arrow_black_pad, .expand_arrows_left,
+.expand_arrows_right, .microphone_ftue, .recordbutton-off, .shopping-cart, .slider_gain_vertical,
+.slider_playcontrols, .slider_volume, .up_arrow {
+  background: url('/assets/css_sprite.png?1613113547') no-repeat;
+}
+.arrow_left_24 {
+  background-position: 0px 0px;
+  width: 24px;
+  height: 24px;
+ }
+.arrow_right_24 {
+  background-position: 0px -24px;
+  width: 24px;
+  height: 24px;
+ }
+.audio_capture_ftue {
+  background-position: 0px -48px;
+  width: 243px;
+  height: 70px;
+ }
+.avatar_generic {
+  background-position: 0px -118px;
+  width: 88px;
+  height: 88px;
+ }
+.avatar_generic_band {
+  background-position: 0px -206px;
+  width: 88px;
+  height: 88px;
+ }
+.checkmark {
+  background-position: 0px -294px;
+  width: 50px;
+  height: 50px;
+ }
+.computer_ftue {
+  background-position: 0px -344px;
+  width: 118px;
+  height: 105px;
+ }
+.down_arrow {
+  background-position: 0px -449px;
+  width: 12px;
+  height: 8px;
+ }
+.down_arrow_black_pad {
+  background-position: 0px -457px;
+  width: 13px;
+  height: 8px;
+ }
+.expand_arrows_left {
+  background-position: 0px -465px;
+  width: 28px;
+  height: 14px;
+ }
+.expand_arrows_right {
+  background-position: 0px -479px;
+  width: 28px;
+  height: 14px;
+ }
+.microphone_ftue {
+  background-position: 0px -493px;
+  width: 70px;
+  height: 113px;
+ }
+.recordbutton-off {
+  background-position: 0px -606px;
+  width: 20px;
+  height: 20px;
+ }
+.shopping-cart {
+  background-position: 0px -626px;
+  width: 40px;
+  height: 36px;
+ }
+.slider_gain_vertical {
+  background-position: 0px -662px;
+  width: 28px;
+  height: 11px;
+ }
+.slider_playcontrols {
+  background-position: 0px -673px;
+  width: 5px;
+  height: 16px;
+ }
+.slider_volume {
+  background-position: 0px -689px;
+  width: 8px;
+  height: 17px;
+ }
+.up_arrow {
+  background-position: 0px -706px;
+  width: 12px;
+  height: 8px;
+ }

web/app/assets/stylesheets/dialogs/dialog.css

@@ -3,4 +3,5 @@
  *
  *= require ./base_dialog
  *= require_directory .
+ *= require 'css_sprite'
 */

web/app/assets/stylesheets/icon_css_sprite.scss

@@ -0,0 +1,257 @@
+.icon_account, .icon_add, .icon_alert, .icon_alert_big, .icon_arrow,
+.icon_bands, .icon_blue_score, .icon_check_white, .icon_checkmark_circle, .icon_closetrack,
+.icon_comment, .icon_delete_sm, .icon_dollar, .icon_email, .icon_facebook,
+.icon_feed, .icon_findsession, .icon_followers, .icon_friend, .icon_gmail,
+.icon_goodquality, .icon_google, .icon_green_score, .icon_help, .icon_home,
+.icon_information_big, .icon_jamtracks, .icon_like, .icon_musicians, .icon_pausebutton,
+.icon_playbutton, .icon_pr, .icon_product, .icon_profile, .icon_purple_score,
+.icon_recording, .icon_recordings, .icon_red_score, .icon_resync, .icon_search,
+.icon_session, .icon_session_tiny, .icon_settings_lg, .icon_share, .icon_shopping_cart,
+.icon_stopbutton, .icon_twitter, .icon_users, .icon_yellow_score {
+  background: url('/assets/icon_css_sprite.png?1613113553') no-repeat;
+}
+.icon_account {
+  background-position: 0px 0px;
+  width: 27px;
+  height: 20px;
+ }
+.icon_add {
+  background-position: 0px -20px;
+  width: 19px;
+  height: 19px;
+ }
+.icon_alert {
+  background-position: 0px -39px;
+  width: 24px;
+  height: 24px;
+ }
+.icon_alert_big {
+  background-position: 0px -63px;
+  width: 96px;
+  height: 96px;
+ }
+.icon_arrow {
+  background-position: 0px -159px;
+  width: 7px;
+  height: 12px;
+ }
+.icon_bands {
+  background-position: 0px -171px;
+  width: 20px;
+  height: 19px;
+ }
+.icon_blue_score {
+  background-position: 0px -190px;
+  width: 12px;
+  height: 12px;
+ }
+.icon_check_white {
+  background-position: 0px -202px;
+  width: 11px;
+  height: 12px;
+ }
+.icon_checkmark_circle {
+  background-position: 0px -214px;
+  width: 24px;
+  height: 24px;
+ }
+.icon_closetrack {
+  background-position: 0px -238px;
+  width: 12px;
+  height: 12px;
+ }
+.icon_comment {
+  background-position: 0px -250px;
+  width: 12px;
+  height: 12px;
+ }
+.icon_delete_sm {
+  background-position: 0px -262px;
+  width: 13px;
+  height: 13px;
+ }
+.icon_dollar {
+  background-position: 0px -275px;
+  width: 24px;
+  height: 24px;
+ }
+.icon_email {
+  background-position: 0px -299px;
+  width: 22px;
+  height: 21px;
+ }
+.icon_facebook {
+  background-position: 0px -320px;
+  width: 24px;
+  height: 24px;
+ }
+.icon_feed {
+  background-position: 0px -344px;
+  width: 16px;
+  height: 16px;
+ }
+.icon_findsession {
+  background-position: 0px -360px;
+  width: 19px;
+  height: 19px;
+ }
+.icon_followers {
+  background-position: 0px -379px;
+  width: 22px;
+  height: 12px;
+ }
+.icon_friend {
+  background-position: 0px -391px;
+  width: 14px;
+  height: 14px;
+ }
+.icon_gmail {
+  background-position: 0px -405px;
+  width: 24px;
+  height: 24px;
+ }
+.icon_goodquality {
+  background-position: 0px -429px;
+  width: 16px;
+  height: 16px;
+ }
+.icon_google {
+  background-position: 0px -445px;
+  width: 26px;
+  height: 26px;
+ }
+.icon_green_score {
+  background-position: 0px -471px;
+  width: 12px;
+  height: 12px;
+ }
+.icon_help {
+  background-position: 0px -483px;
+  width: 12px;
+  height: 12px;
+ }
+.icon_home {
+  background-position: 0px -495px;
+  width: 20px;
+  height: 15px;
+ }
+.icon_information_big {
+  background-position: 0px -510px;
+  width: 96px;
+  height: 96px;
+ }
+.icon_jamtracks {
+  background-position: 0px -606px;
+  width: 24px;
+  height: 24px;
+ }
+.icon_like {
+  background-position: 0px -630px;
+  width: 12px;
+  height: 12px;
+ }
+.icon_musicians {
+  background-position: 0px -642px;
+  width: 20px;
+  height: 20px;
+ }
+.icon_pausebutton {
+  background-position: 0px -662px;
+  width: 20px;
+  height: 20px;
+ }
+.icon_playbutton {
+  background-position: 0px -682px;
+  width: 20px;
+  height: 20px;
+ }
+.icon_pr {
+  background-position: 0px -702px;
+  width: 58px;
+  height: 58px;
+ }
+.icon_product {
+  background-position: 0px -760px;
+  width: 61px;
+  height: 61px;
+ }
+.icon_profile {
+  background-position: 0px -821px;
+  width: 21px;
+  height: 18px;
+ }
+.icon_purple_score {
+  background-position: 0px -839px;
+  width: 12px;
+  height: 12px;
+ }
+.icon_recording {
+  background-position: 0px -851px;
+  width: 24px;
+  height: 24px;
+ }
+.icon_recordings {
+  background-position: 0px -875px;
+  width: 12px;
+  height: 13px;
+ }
+.icon_red_score {
+  background-position: 0px -888px;
+  width: 12px;
+  height: 12px;
+ }
+.icon_resync {
+  background-position: 0px -900px;
+  width: 14px;
+  height: 14px;
+ }
+.icon_search {
+  background-position: 0px -914px;
+  width: 19px;
+  height: 19px;
+ }
+.icon_session {
+  background-position: 0px -933px;
+  width: 24px;
+  height: 24px;
+ }
+.icon_session_tiny {
+  background-position: 0px -957px;
+  width: 12px;
+  height: 12px;
+ }
+.icon_settings_lg {
+  background-position: 0px -969px;
+  width: 18px;
+  height: 18px;
+ }
+.icon_share {
+  background-position: 0px -987px;
+  width: 14px;
+  height: 14px;
+ }
+.icon_shopping_cart {
+  background-position: 0px -1001px;
+  width: 20px;
+  height: 20px;
+ }
+.icon_stopbutton {
+  background-position: 0px -1021px;
+  width: 20px;
+  height: 20px;
+ }
+.icon_twitter {
+  background-position: 0px -1041px;
+  width: 24px;
+  height: 24px;
+ }
+.icon_users {
+  background-position: 0px -1065px;
+  width: 57px;
+  height: 57px;
+ }
+.icon_yellow_score {
+  background-position: 0px -1122px;
+  width: 12px;
+  height: 12px;
+ }

web/app/assets/stylesheets/landing/landing.css

@@ -14,4 +14,5 @@
 *= require landings/posa_activation
 *= require landings/simple_jamtracks
 *= require landings/simple_jamclass
+*= require 'css_sprite'
 */

web/app/assets/stylesheets/logo_css_sprite.scss

@@ -0,0 +1,39 @@
+.bandcamp-logo, .facebook-logo, .fandalism-logo, .reverbnation-logo, .soundcloud-logo,
+.twitter-logo, .website-logo {
+  background: url('/assets/logo_css_sprite.png?1613113548') no-repeat;
+}
+.bandcamp-logo {
+  background-position: 0px 0px;
+  width: 120px;
+  height: 19px;
+ }
+.facebook-logo {
+  background-position: 0px -19px;
+  width: 30px;
+  height: 30px;
+ }
+.fandalism-logo {
+  background-position: 0px -49px;
+  width: 22px;
+  height: 30px;
+ }
+.reverbnation-logo {
+  background-position: 0px -79px;
+  width: 58px;
+  height: 30px;
+ }
+.soundcloud-logo {
+  background-position: 0px -109px;
+  width: 44px;
+  height: 30px;
+ }
+.twitter-logo {
+  background-position: 0px -139px;
+  width: 37px;
+  height: 30px;
+ }
+.website-logo {
+  background-position: 0px -169px;
+  width: 98px;
+  height: 30px;
+ }

web/app/assets/stylesheets/web/web.css

@@ -34,4 +34,5 @@
 *= require_directory ../landings
 *= require icheck/minimal/minimal
 *= require_directory ../client/react-components
+*= require 'css_sprite'
 */

web/app/controllers/api_mixes_controller.rb

@@ -32,7 +32,7 @@ class ApiMixesController < ApiController
     @mix.valid?
     if !@mix.errors.any?
       @mix.save!
-      redirect_to @mix.sign_url
+      redirect_to @mix.sign_url(120, 'ogg', false) # !is_native_client? # no header to indicate this
     else
       render :json => { :message => "download limit surpassed" }, :status => 404
     end

web/app/controllers/api_recordings_controller.rb

@@ -137,7 +137,7 @@ class ApiRecordingsController < ApiController
     @recorded_track.valid?
     if !@recorded_track.errors.any?
       @recorded_track.save!
-      redirect_to @recorded_track.sign_url()
+      redirect_to @recorded_track.sign_url(120, false)  # !is_native_client? - no indicator to indicate this
     else
       render :json => { :message => "download limit surpassed" }, :status => 404
     end
@@ -152,7 +152,7 @@ class ApiRecordingsController < ApiController
     @recorded_backing_track.valid?
     if !@recorded_backing_track.errors.any?
       @recorded_backing_track.save!
-      redirect_to @recorded_backing_track.sign_url
+      redirect_to @recorded_backing_track.sign_url(120, false) # !is_native_client? - no indicator to indicate this
     else
       render :json => { :message => "download limit surpassed" }, :status => 404
     end

web/app/helpers/application_helper.rb

@@ -31,4 +31,16 @@ module ApplicationHelper
     Rails.application.config.bugsnag_notify_release_stages.include? Rails.env
   end
 
+  def image_sprite_tag(path, options = {})
+    base = File.basename(path, ".png")
+    cls = options.dig(:class) || ""
+    cls = cls.concat(" #{base}").strip
+    raw image_tag 'transparent-1x1.png', options.merge({ class: cls })
+  end
+
+  def css_image_sprite(options)
+    path = options.delete(:src)
+    image_sprite_tag(path, options)
+  end
+
 end

web/app/views/clients/_account.html.erb

@@ -4,7 +4,7 @@
         <!-- header -->
         <div class="content-head">
             <div class="content-icon">
-                <%= image_tag "content/icon_account.png", {:height => 18, :width => 18} %>
+                <%= image_sprite_tag "content/icon_account.png", {:height => 18, :width => 18} %>
             </div>
             <h1>my account</h1>
             <%= render "screen_navigation" %>

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

@@ -2,7 +2,7 @@
 #account-affiliate-partner.screen.secondary layout='screen' layout-id='account/affiliatePartner'
   .content-head
     .content-icon
-      = image_tag "content/icon_account.png", :width => 27, :height => 20
+      = image_sprite_tag "content/icon_account.png", :width => 27, :height => 20
     h1 my account
     = render "screen_navigation"
 

web/app/views/clients/_account_audio_profile.html.erb

@@ -4,7 +4,7 @@
   <div class="content-head">
     <!-- icon -->
     <div class="content-icon">
-      <%= image_tag "content/icon_account.png", {:width => 27, :height => 20} %>
+      <%= image_sprite_tag "content/icon_account.png", {:width => 27, :height => 20} %>
     </div>
     <!-- section head text -->
     <h1>my account</h1>

web/app/views/clients/_account_identity.html.erb

@@ -4,7 +4,7 @@
   <div class="content-head">
     <!-- icon -->
     <div class="content-icon">
-      <%= image_tag "content/icon_account.png", {:width => 27, :height => 20} %>
+      <%= image_sprite_tag "content/icon_account.png", {:width => 27, :height => 20} %>
     </div>
     <!-- section head text -->
     <h1>my account</h1>