VRFS-2858 : Soundcloud recording widget. Hooked up on profile summary page.

web/app/assets/javascripts/dialog/soundCloudPlayerDialog.js.coffee

@@ -0,0 +1,40 @@
+$ = jQuery
+context = window
+context.JK ||= {}
+
+context.JK.SoundCloudPlayerDialog = class SoundCloudPlayerDialog
+  constructor: (@app) ->
+    @rest = context.JK.Rest()
+    @client = context.jamClient
+    @logger = context.JK.logger
+    @screen = null
+    @dialogId = 'sound-cloud-player-dialog'
+    @dialog = null    
+    @player = null
+
+  initialize:(@url, @caption) =>
+    dialogBindings = {
+      'beforeShow' : @beforeShow,
+      'afterShow' : @afterShow
+    }
+
+    @dialog = $('[layout-id="' + @dialogId + '"]')
+    @app.bindDialog(@dialogId, dialogBindings) 
+    @player = @dialog.find(".sound-cloud-player")  
+    @dialog.find(".caption").text("'#{@caption}'")
+    @player.addClass("hidden")
+
+  beforeShow:() =>
+    @player.addClass("hidden")
+    @player.attr("src", "")    
+    u = encodeURIComponent(@url)
+    src = "https://w.soundcloud.com/player/?url=#{u}&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true&loop=true"
+    @player.attr("src", src)    
+
+  afterShow:() =>
+    @player.removeClass("hidden")
+
+  showDialog:() =>
+    @app.layout.showDialog(@dialogId)
+
+  

web/app/assets/javascripts/profile.js

@@ -13,6 +13,7 @@
     var sentFriendRequest = false;
     var textMessageDialog = null;
     var feed = null;
+    var player = null;
     var profileUtils = context.JK.ProfileUtils;
 
     var NOT_SPECIFIED_TEXT = 'Not specified';
@@ -131,7 +132,7 @@
     function afterShow(data) {
       initUser();
       resetForm();
-      renderAllStats();
+      renderAllStats();      
     }
 
     function beforeHide(data) {
@@ -259,6 +260,18 @@
       $btnAddFriend.click(handleFriendChange);
       $btnFollowUser.click(handleFollowingChange);
       $btnMessageUser.click(handleMessageMusician);
+
+      // Hook up soundcloud player:
+      $soundCloudSamples.off("click", "a.sound-cloud-playable") .on("click", "a.sound-cloud-playable", playSoundCloudFile)
+    }
+
+    function playSoundCloudFile(e) {      
+      e.preventDefault();
+      var url = $(this).attr("soundcloud_url")
+      var cap = $(this).text()
+      player.initialize(url, cap);      
+      app.layout.showDialog('sound-cloud-player-dialog');
+      return false;
     }
 
     function handleFriendChange(evt) {
@@ -558,7 +571,7 @@
         });
 
         $.each(soundCloudSamples, function(index, sample) {
-          $soundCloudSamples.append("<a href='" + sample.url + "' rel='external'>" + formatTitle(sample.description) + "</a><br/>");
+          $soundCloudSamples.append("<a class='sound-cloud-playable' href='' soundcloud_url='" + sample.url + "'>" + formatTitle(sample.description) + "</a><br/>");
         });
 
         $.each(youTubeSamples, function(index, sample) {
@@ -584,8 +597,7 @@
         } else {
           $btnAddSites.hide();
         }
-      } else {
-        console.log("Showing onnline presences....")
+      } else {        
         $btnAddSites.hide();
         $noOnlinePresence.hide();
 
@@ -593,8 +605,7 @@
           $userWebsite.find('a').attr('href', user.website);
         }
 
-        var soundCloudPresences = profileUtils.soundCloudPresences(onlinePresences);
-        console.log("Showing soundkcoud presences....", soundCloudPresences, $soundCloudPresence)
+        var soundCloudPresences = profileUtils.soundCloudPresences(onlinePresences);        
         if (soundCloudPresences && soundCloudPresences.length > 0) {
           $soundCloudPresence.find('a').attr('href', 'http://www.soundcloud.com/' + soundCloudPresences[0].username);
           $soundCloudPresence.show();
@@ -1067,6 +1078,7 @@
       app.bindScreen('profile', screenBindings);
       events();
       initializeFeed();
+      player = new context.JK.SoundCloudPlayerDialog(app);      
     }
 
     this.initialize = initialize;

web/app/assets/stylesheets/dialogs/soundCloudPlayer.css.scss

@@ -0,0 +1,6 @@
+#sound-cloud-player-dialog {
+  height:auto;
+  .caption {
+    margin: 0.1em 0.1em 0.5em 0em
+  }
+}

web/app/views/dialogs/_dialogs.html.haml

@@ -39,4 +39,5 @@
 = render 'dialogs/jamtrackPaymentHistoryDialog'
 = render 'dialogs/singlePlayerProfileGuard'
 = render 'dialogs/genreSelectorDialog'
-= render 'dialogs/recordingSelectorDialog'
+= render 'dialogs/recordingSelectorDialog'
+= render 'dialogs/soundCloudPlayerDialog'

web/app/views/dialogs/_soundCloudPlayerDialog.html.slim

@@ -0,0 +1,11 @@
+#sound-cloud-player-dialog.dialog.dialog-overlay-sm layout='dialog' layout-id = 'sound-cloud-player-dialog'
+  .content-head
+    h1 soundcloud recording    
+  .dialog-inner
+    h2.caption 
+    .content-body       
+    iframe.sound-cloud-player width="100%" height="240" scrolling="no"frameborder="no" src=""
+  .jamtrack_buttons
+    .center.action_buttons
+      /a.button-orange class='btnCancel' layout-action='cancel' OK        
+      a.button-orange.btn-close-dialog href='#' layout-action='close' CLOSE