VRFS-1437 update recording/session landing page comments automatically

2014-04-08 00:59:35 -04:00 · 2014-04-08 00:59:35 -04:00 · 73f819511e
parent 0dbe8ea634
commit 73f819511e
6 changed files with 137 additions and 73 deletions
--- a/web/app/assets/javascripts/web/recordings.js
+++ b/web/app/assets/javascripts/web/recordings.js
@ -51,10 +51,10 @@

    function like() {
      rest.addRecordingLike(recordingId, claimedRecordingId, JK.currentUserId)
-          .done(function(response) {
-              $("#spnLikeCount").html(parseInt($("#spnLikeCount").text()) + 1);
-              $("#btnLike", $scope).unbind("click");
-          });
+        .done(function(response) {
+          $("#spnLikeCount").html(parseInt($("#spnLikeCount").text()) + 1);
+          $("#btnLike", $scope).unbind("click");
+        });
    }

    function play() {
@ -68,22 +68,35 @@
      var comment = $("#txtRecordingComment").val();
      if ($.trim(comment).length > 0) {
        rest.addRecordingComment(recordingId, JK.currentUserId, comment)
-            .done(function(response) {
-                $("#spnCommentCount", $scope).html(parseInt($("#spnCommentCount").text()) + 1);
-
-                var template = $('#template-landing-comment').html();
-                var commentHtml = context.JK.fillTemplate(template, {
-                    avatar_url: context.JK.currentUserAvatarUrl,
-                    name: context.JK.currentUserName,
-                    comment: comment,
-                    timeago: $.timeago(Date.now())
-                });
-
-                $(".landing-comment-scroller").prepend(commentHtml);
-            });
+          .done(function(response) {
+            $("#spnCommentCount", $scope).html(parseInt($("#spnCommentCount").text()) + 1);
+            renderComment(comment, context.JK.currentUserId, context.JK.currentUserName, 
+              context.JK.currentUserAvatarUrl, $.timeago(Date.now()), context.JK.currentUserMusician, false);
+          });
      }
    }

+    function renderComment(comment, userId, userName, userAvatarUrl, timeago, musician, append) {
+      var template = $('#template-landing-comment').html();
+      var commentHtml = context.JK.fillTemplate(template, {
+        avatar_url: userAvatarUrl,
+        user_id: userId,
+        hoverAction: musician ? "musician" : "fan",
+        name: userName,
+        comment: comment,
+        timeago: timeago
+      });
+
+      if (append) {
+        $(".landing-comment-scroller").append(commentHtml);
+      }
+      else {
+        $(".landing-comment-scroller").prepend(commentHtml);
+      }
+
+      context.JK.bindHoverEvents();
+    }
+
    function initialize(_claimedRecordingId, _recordingId) {
      recordingId = _recordingId;
      claimedRecordingId = _claimedRecordingId;
@ -116,6 +129,28 @@

      $("#btnLike").click(like);
      $("#btnPlay").click(play);
+
+      pollForUpdates(claimedRecordingId);
+    }
+
+    function pollForUpdates(claimedRecordingId) {
+      $(".landing-comment-scroller").empty();
+      rest.getClaimedRecording(claimedRecordingId)
+        .done(function(response) {
+          if (response.recording && response.recording.comments) {
+            $("#spnCommentCount", $scope).html(response.recording.comment_count);
+            $.each(response.recording.comments, function(index, val) {
+              renderComment(val.comment, val.creator.id, val.creator.name, 
+                context.JK.resolveAvatarUrl(val.creator.photo_url), $.timeago(val.created_at), val.creator.musician, true);
+            });
+            setTimeout(function() {
+              pollForUpdates(claimedRecordingId);
+            }, 60000);
+          }
+        })
+        .fail(function(xhr) {
+
+        });
    }

    this.initialize = initialize;
--- a/web/app/assets/javascripts/web/sessions.js
+++ b/web/app/assets/javascripts/web/sessions.js
@ -10,32 +10,45 @@

    function like() {
      rest.addSessionLike(sessionId, JK.currentUserId)
-          .done(function(response) {
-              $("#spnLikeCount").html(parseInt($("#spnLikeCount").text()) + 1);
-              $("#btnLike").unbind("click");
-          });
+        .done(function(response) {
+          $("#spnLikeCount").html(parseInt($("#spnLikeCount").text()) + 1);
+          $("#btnLike").unbind("click");
+        });
    }

    function addComment() {
      var comment = $("#txtSessionComment").val();
      if ($.trim(comment).length > 0) {
-          rest.addSessionComment(sessionId, JK.currentUserId, comment)
-              .done(function(response) {
-                  $("#spnCommentCount").html(parseInt($("#spnCommentCount").text()) + 1);
-                  
-                  var template = $('#template-landing-comment').html();
-                  var commentHtml = context.JK.fillTemplate(template, {
-                      avatar_url: context.JK.currentUserAvatarUrl,
-                      name: context.JK.currentUserName,
-                      comment: comment,
-                      timeago: $.timeago(Date.now())
-                  });
-
-                  $(".landing-comment-scroller").prepend(commentHtml);
-              });
+        rest.addSessionComment(sessionId, JK.currentUserId, comment)
+          .done(function(response) {
+            $("#spnCommentCount").html(parseInt($("#spnCommentCount").text()) + 1);
+            renderComment(comment, context.JK.currentUserId, context.JK.currentUserName,
+              context.JK.currentUserAvatarUrl, $.timeago(Date.now()), context.JK.currentUserMusician, false);
+          });
      }
    }

+    function renderComment(comment, userId, userName, userAvatarUrl, timeago, musician, append) {
+      var template = $('#template-landing-comment').html();
+      var commentHtml = context.JK.fillTemplate(template, {
+        avatar_url: userAvatarUrl,
+        user_id: userId,
+        hoverAction: musician ? "musician" : "fan",
+        name: userName,
+        comment: comment,
+        timeago: timeago
+      });
+
+      if (append) {
+        $(".landing-comment-scroller").append(commentHtml);
+      }
+      else {
+        $(".landing-comment-scroller").prepend(commentHtml);
+      }
+
+      context.JK.bindHoverEvents();
+    }
+
    function stateChange(e, data) {
      if(data.displayText)
      {
@ -94,28 +107,49 @@
      sessionId = musicSessionId;

      if (JK.currentUserId) {
-          var shareDialog = new JK.ShareDialog(context.JK.app, sessionId, "session");
-          shareDialog.initialize(JK.FacebookHelperInstance);
+        var shareDialog = new JK.ShareDialog(context.JK.app, sessionId, "session");
+        shareDialog.initialize(JK.FacebookHelperInstance);

-          $("#btnShare").click(function(e) {
-              shareDialog.showDialog();
-          });
+        $("#btnShare").click(function(e) {
+          shareDialog.showDialog();
+        });

-          $("#btnPostComment").click(function(e) {
-            if ($.trim($("#txtSessionComment").val()).length > 0) {
-              addComment();
-              $("#txtSessionComment").val('');
-              $("#txtSessionComment").blur();
-            }
-          });
+        $("#btnPostComment").click(function(e) {
+          if ($.trim($("#txtSessionComment").val()).length > 0) {
+            addComment();
+            $("#txtSessionComment").val('');
+            $("#txtSessionComment").blur();
+          }
+        });
      }
      else {
-          $("#txtSessionComment").attr("disabled", "disabled");
-          $("#txtSessionComment").val("You must be logged in to add a comment.");
+        $("#txtSessionComment").attr("disabled", "disabled");
+        $("#txtSessionComment").val("You must be logged in to add a comment.");
      }

      $("#btnLike").click(like);

+      pollForUpdates(musicSessionId);
+    }
+
+    function pollForUpdates(musicSessionId) {
+      $(".landing-comment-scroller").empty();
+      rest.getSessionHistory(musicSessionId)
+        .done(function(response) {
+          if (response && response.comments) {
+            $("#spnCommentCount", $scope).html(response.comment_count);
+            $.each(response.comments, function(index, val) {
+              renderComment(val.comment, val.creator.id, val.creator.name, 
+                context.JK.resolveAvatarUrl(val.creator.photo_url), $.timeago(val.created_at), val.creator.musician, true);
+            });
+            setTimeout(function() {
+              pollForUpdates(musicSessionId);
+            }, 60000);
+          }
+        })
+        .fail(function(xhr) {
+
+        });
    }

    this.initialize = initialize;
--- a/web/app/views/api_claimed_recordings/show.rabl
+++ b/web/app/views/api_claimed_recordings/show.rabl
@ -35,7 +35,7 @@ child(:recording => :recording) {
      attributes :comment, :created_at

      child(:user => :creator) {
-        attributes :id, :first_name, :last_name, :photo_url
+        attributes :id, :first_name, :last_name, :name, :photo_url, :musician
      }
    }
 }
--- a/web/app/views/api_music_sessions/history_show.rabl
+++ b/web/app/views/api_music_sessions/history_show.rabl
@ -22,4 +22,12 @@ child(:music_session_user_histories => :users) {
  child(:user => :user) {
    attributes :name, :photo_url
  }
+}
+
+child(:comments => :comments) {
+  attributes :comment, :created_at
+
+  child(:user => :creator) {
+    attributes :id, :first_name, :last_name, :name, :photo_url, :musician
+  }
 }
--- a/web/app/views/layouts/web.html.erb
+++ b/web/app/views/layouts/web.html.erb
@ -92,10 +92,12 @@
            JK.currentUserId = '<%= current_user.id %>';
            JK.currentUserAvatarUrl = JK.resolveAvatarUrl('<%= current_user.photo_url %>');
            JK.currentUserName = '<%= current_user.name %>';
+            JK.currentUserMusician = '<%= current_user.musician %>';
            <% else %>
            JK.currentUserId = null;
            JK.currentUserAvatarUrl = null;
            JK.currentUserName = null;
+            JK.currentUserMusician = null;
            <% end %>

            JK.app = JK.JamKazam();
--- a/web/app/views/shared/_comments.html.erb
+++ b/web/app/views/shared/_comments.html.erb
@ -12,33 +12,18 @@
  <br clear="all" />
        
  <div class="landing-comment-scroller">
-    <% comments.each do |c| %>
-      <% hoverAction = c.user.musician ? "musician" : "fan" %>
-      <div user-id="<%= c.user.id %>" hoveraction="<%= hoverAction %>" class="avatar-small mr10">
-        <% unless c.user.photo_url.blank? %>
-          <%= image_tag "#{c.user.photo_url}", {:alt => ""} %>
-        <% else %>
-          <%= image_tag "shared/avatar_generic.png", {:alt => ""} %>
-        <% end %>
-      </div>
-      <div class="w80 left p10 lightgrey mt10">
-        <a user-id="<%= c.user.id %>" hoveraction="<%= hoverAction %>" href="#"><%= c.user.name %></a>&nbsp;<%= c.comment %>
-        <br />
-        <div class="f12 grey mt5"><%= timeago(c.created_at) %></div>
-      </div>
-      <br clear="all" />
-    <% end %>
+
  </div>
 </div>

 <script type="text/template" id="template-landing-comment">
-  <div class="avatar-small mr10">
-      <img src="{avatar_url}" alt="" />
+  <div user-id="{user_id}" hoveraction="{hoverAction}" class="avatar-small mr10">
+    <img src="{avatar_url}" alt="" />
  </div>
  <div class="w80 left p10 lightgrey mt10">
-      <a href="#">{name}</a>&nbsp;{comment}
-      <br />
-      <div class="f12 grey mt5">{timeago}</div>
-    </div>
-    <br clear="all" />
+    <a user-id="{user_id}" hoveraction="{hoverAction}">{name}</a>&nbsp;{comment}
+    <br />
+    <div class="f12 grey mt5">{timeago}</div>
+  </div>
+  <br clear="all" />
 </script>