diff --git a/web/app/assets/javascripts/commentDialog.js b/web/app/assets/javascripts/commentDialog.js new file mode 100644 index 000000000..ea2f64b5e --- /dev/null +++ b/web/app/assets/javascripts/commentDialog.js @@ -0,0 +1,149 @@ +(function(context,$) { + + "use strict"; + context.JK = context.JK || {}; + context.JK.CommentDialog = function(app, options) { + var logger = context.JK.logger; + var rest = context.JK.Rest(); + var $screen = null; + var $content = null; + var recordingId; + var entityType = options.entity_type; + var sessionId = options.session_id; + var recordingId = options.recording_id; + var claimedRecordingId = options.claimed_recording_id; + + function beforeShow(data) { + } + + function afterShow(data) { + $("#txtComment", $screen).val(''); + renderComments(); + } + + function afterHide() { + } + + function renderComments() { + $content.empty(); + + var h1Text = $('h1', $screen).html('comment on this ' + entityType); + + if (entityType === 'session') { + rest.getSessionHistory(sessionId) + .done(function(response) { + if (response && response.comments) { + $.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); + }); + context.JK.bindHoverEvents($content); + context.JK.bindProfileClickEvents($content, ['comment-dialog']); + } + }) + .fail(function(xhr) { + + }); + } + else if (entityType === 'recording') { + rest.getClaimedRecording(claimedRecordingId) + .done(function(response) { + if (response.recording && response.recording.comments) { + $.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); + }); + + context.JK.bindHoverEvents($content); + context.JK.bindProfileClickEvents($content, ['comment-dialog']); + } + }) + .fail(function(xhr) { + + }); + } + } + + function renderComment(comment, userId, userName, userAvatarUrl, timeago, musician, append) { + + var options = { + avatar_url: userAvatarUrl, + user_id: userId, + hoverAction: musician ? "musician" : "fan", + name: userName, + comment: comment, + timeago: timeago + }; + + var $comment = $(context._.template($('#template-comments').html(), options, {variable: 'data'})); + if (append) { + $content.append($comment); + } + else { + $content.prepend($comment); + } + } + + function addComment() { + var comment = $("#txtComment", $screen).val(); + if ($.trim(comment).length > 0) { + if (entityType === 'session') { + 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); + }); + } + else if (entityType === 'recording') { + rest.addRecordingComment(recordingId, JK.currentUserId, comment) + .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 events() { + var $btnSelector = $('#btn-add-comment', $screen); + var $txtComment = $('#txtComment', $screen); + + if (!context.JK.currentUserId) { + $txtComment.attr('placeholder', 'You must be logged in to add a comment.'); + $btnSelector.removeClass('button-orange'); + $btnSelector.addClass('button-grey'); + } + else { + $btnSelector.unbind('click'); + $btnSelector.click(addComment); + } + } + + function showDialog() { + app.layout.showDialog('comment-dialog'); + } + + function initialize() { + + var dialogBindings = { + 'beforeShow' : beforeShow, + 'afterShow' : afterShow, + 'afterHide': afterHide + }; + + app.bindDialog('comment-dialog', dialogBindings); + + $screen = $('[layout-id="comment-dialog"]'); + $content = $screen.find('.dialog-comment-scroller'); + + events(); + } + + this.initialize = initialize; + this.showDialog = showDialog; + } + + return this; +})(window,jQuery); \ No newline at end of file diff --git a/web/app/assets/javascripts/feed.js b/web/app/assets/javascripts/feed.js index cc176e06a..c32871db9 100644 --- a/web/app/assets/javascripts/feed.js +++ b/web/app/assets/javascripts/feed.js @@ -5,7 +5,8 @@ context.JK.FeedScreen = function(app) { var logger = context.JK.logger; - var rest = context.JK.Rest(); + var rest = new context.JK.Rest(); + var ui = new context.JK.UIHelper(JK.app); var currentQuery = null; var currentPage = 0; var LIMIT = 20; @@ -282,24 +283,6 @@ return false; } - function toggleUserProfile() { - var userId = $(this).attr('user-id'); - window.location = '/client#/profile/' + userId; - return false; - } - - function toggleBandProfile() { - var bandId = $(this).attr('band-id'); - if (bandId == null) { - var userId = $(this).attr('user-id'); - window.location = '/client#/profile/' + userId; - } - else { - window.location = '/client#/bandProfile/' + bandId; - } - return false; - } - function renderFeeds(feeds) { $.each(feeds.entries, function(i, feed) { @@ -319,9 +302,27 @@ $('.details', $feedItem).click(toggleSessionDetails); $('.details-arrow', $feedItem).click(toggleSessionDetails); $('.play-button', $feedItem).click(toggleSessionPlay); - $('.avatar-tiny', $feedItem).click(toggleUserProfile); - $('.musician-name', $feedItem).click(toggleUserProfile); - $('.artist', $feedItem).click(toggleBandProfile); + + if (!feed.session_removed_at) + { + $('.btn-share', $feedItem).click(function() { + ui.launchShareDialog(feed.id, 'session'); + }); + } + else { + $('.btn-share', $feedItem).hide(); + } + + $('.btn-comment', $feedItem).click(function() { + ui.launchCommentDialog({ + session_id: feed.id, + entity_type: 'session' + }); + }); + + $('.btn-like', $feedItem).click(function() { + ui.addSessionLike(feed.id, JK.currentUserId, $('.likes', $feedItem), $('.btn-like', $feedItem)) + }); // put the feed item on the page renderFeed($feedItem); @@ -332,6 +333,7 @@ $('.dotdotdot', $feedItem).dotdotdot(); $feedItem.data('original-max-height', $feedItem.css('height')); context.JK.bindHoverEvents($feedItem); + context.JK.bindProfileClickEvents($feedItem); } else if(feed.type == 'recording') { if(feed.claimed_recordings.length == 0) { @@ -353,6 +355,22 @@ $('.details', $feedItem).click(toggleRecordingDetails); $('.details-arrow', $feedItem).click(toggleRecordingDetails); $('.play-button', $feedItem).click(toggleRecordingPlay); + + $('.btn-share', $feedItem).click(function() { + ui.launchShareDialog(options.candidate_claimed_recording.id, 'recording'); + }); + + $('.btn-comment', $feedItem).click(function() { + ui.launchCommentDialog({ + recording_id: feed.id, + claimed_recording_id: options.candidate_claimed_recording.id, + entity_type: 'recording' + }); + }); + + $('.btn-like', $feedItem).click(function() { + ui.addRecordingLike(feed.id, options.candidate_claimed_recording.id, JK.currentUserId, $('.likes', $feedItem), $('.btn-like', $feedItem)); + }); // put the feed item on the page renderFeed($feedItem); @@ -363,11 +381,14 @@ $('.dotdotdot', $feedItem).dotdotdot(); $feedItem.data('original-max-height', $feedItem.css('height')); context.JK.bindHoverEvents($feedItem); + context.JK.bindProfileClickEvents($feedItem); } else { logger.warn("skipping feed type: " + feed.type); } - }) + + context.JK.bindProfileClickEvents(); + }); } function renderFeed(feed) { diff --git a/web/app/assets/javascripts/feed_item_recording.js b/web/app/assets/javascripts/feed_item_recording.js index 834aedae5..e9c138479 100644 --- a/web/app/assets/javascripts/feed_item_recording.js +++ b/web/app/assets/javascripts/feed_item_recording.js @@ -5,6 +5,8 @@ context.JK = context.JK || {}; context.JK.FeedItemRecording = function($parentElement, options){ + var ui = new context.JK.UIHelper(JK.app); + var claimedRecordingId = $parentElement.attr('data-claimed-recording-id'); var recordingId = $parentElement.attr('id'); var mode = $parentElement.attr('data-mode'); @@ -94,19 +96,39 @@ $('.details', $feedItem).click(toggleDetails); $('.details-arrow', $feedItem).click(toggleDetails); $('.play-button', $feedItem).click(togglePlay); + + $('.btn-share', $feedItem).click(function() { + ui.launchShareDialog(claimedRecordingId, 'recording'); + }); + + $('.btn-comment', $feedItem).click(function() { + ui.launchCommentDialog({ + recording_id: recordingId, + claimed_recording_id: claimedRecordingId, + entity_type: 'recording' + }); + }); + + $('.btn-like', $feedItem).click(function() { + ui.addRecordingLike(recordingId, claimedRecordingId, JK.currentUserId, $('.likes', $feedItem), $('.btn-like', $feedItem)); + }); + $controls.bind('statechange.listenRecording', stateChange); } function initialize() { $('.timeago', $feedItem).timeago(); $('.dotdotdot', $feedItem).dotdotdot(); - $controls.listenRecording({recordingId: recordingId, claimedRecordingId: claimedRecordingId, sliderSelector:'.recording-slider', sliderBarSelector: '.recording-playback', currentTimeSelector:'.recording-current'}); + $controls.listenRecording({recordingId: recordingId, claimedRecordingId: claimedRecordingId, sliderSelector:'.recording-slider', sliderBarSelector: '.recording-playback', currentTimeSelector:'.recording-current'}); context.JK.prettyPrintElements($('time.duration', $feedItem)); context.JK.setInstrumentAssetPath($('.instrument-icon', $feedItem)); $feedItem.data('original-max-height', $feedItem.css('height')); events(); + + context.JK.bindHoverEvents($feedItem); + //context.JK.bindProfileClickEvents($feedItem); } initialize(); diff --git a/web/app/assets/javascripts/feed_item_session.js b/web/app/assets/javascripts/feed_item_session.js index 95e996b34..c5a39246e 100644 --- a/web/app/assets/javascripts/feed_item_session.js +++ b/web/app/assets/javascripts/feed_item_session.js @@ -6,8 +6,7 @@ context.JK.FeedItemSessionTimer = null; context.JK.FeedItemSession = function($parentElement, options){ - var logger = context.JK.logger; - var rest = new context.JK.Rest(); + var ui = new context.JK.UIHelper(JK.app); var $feedItem = $parentElement; var $description = $('.description', $feedItem) @@ -84,6 +83,22 @@ $('.details', $feedItem).click(toggleDetails); $('.details-arrow', $feedItem).click(toggleDetails); $('.play-button', $feedItem).click(togglePlay); + + $('.btn-share', $feedItem).click(function() { + ui.launchShareDialog(musicSessionId, 'session'); + }); + + $('.btn-comment', $feedItem).click(function() { + ui.launchCommentDialog({ + session_id: musicSessionId, + entity_type: 'session' + }); + }); + + $('.btn-like', $feedItem).click(function() { + ui.addSessionLike(musicSessionId, JK.currentUserId, $('.likes', $feedItem), $('.btn-like', $feedItem)) + }); + $controls.bind('statechange.listenBroadcast', stateChange); } @@ -97,6 +112,9 @@ $feedItem.data('original-max-height', $feedItem.css('height')); events(); + + context.JK.bindHoverEvents($feedItem); + //context.JK.bindProfileClickEvents($feedItem); } initialize(); diff --git a/web/app/assets/javascripts/hoverBand.js b/web/app/assets/javascripts/hoverBand.js index d6498f91a..7f85e0dbc 100644 --- a/web/app/assets/javascripts/hoverBand.js +++ b/web/app/assets/javascripts/hoverBand.js @@ -3,7 +3,6 @@ "use strict"; context.JK = context.JK || {}; context.JK.BandHoverBubble = function(bandId, x, y) { - var logger = context.JK.logger; var rest = context.JK.Rest(); var hoverSelector = "#band-hover"; @@ -13,9 +12,9 @@ var mouseTop = y < (document.body.clientHeight / 2); var css = {}; if (mouseLeft) - css.left = x + 10 + 'px'; + css.left = x + 20 + 'px'; else - css.left = x - (7 + $(hoverSelector).width()) + 'px'; + css.left = x - (25 + $(hoverSelector).width()) + 'px'; if (mouseTop) css.top = y + 10 + 'px'; else diff --git a/web/app/assets/javascripts/hoverFan.js b/web/app/assets/javascripts/hoverFan.js index f5b9926d0..a68f65204 100644 --- a/web/app/assets/javascripts/hoverFan.js +++ b/web/app/assets/javascripts/hoverFan.js @@ -6,7 +6,6 @@ var logger = context.JK.logger; var rest = context.JK.Rest(); - var instrumentLogoMap = context.JK.getInstrumentIconMap24(); var hoverSelector = "#fan-hover"; this.showBubble = function() { @@ -14,9 +13,9 @@ var mouseTop = y < (document.body.clientHeight / 2); var css = {}; if (mouseLeft) - css.left = x + 10 + 'px'; + css.left = x + 20 + 'px'; else - css.left = x - (7 + $(hoverSelector).width()) + 'px'; + css.left = x - (25 + $(hoverSelector).width()) + 'px'; if (mouseTop) css.top = y + 10 + 'px'; else diff --git a/web/app/assets/javascripts/hoverMusician.js b/web/app/assets/javascripts/hoverMusician.js index 6ce0368a6..360bc664d 100644 --- a/web/app/assets/javascripts/hoverMusician.js +++ b/web/app/assets/javascripts/hoverMusician.js @@ -9,14 +9,13 @@ var hoverSelector = "#musician-hover"; this.showBubble = function() { - var mouseLeft = x < (document.body.clientWidth / 2); var mouseTop = y < (document.body.clientHeight / 2); var css = {}; if (mouseLeft) - css.left = x + 10 + 'px'; + css.left = x + 20 + 'px'; else - css.left = x - (7 + $(hoverSelector).width()) + 'px'; + css.left = x - (25 + $(hoverSelector).width()) + 'px'; if (mouseTop) css.top = y + 10 + 'px'; else diff --git a/web/app/assets/javascripts/hoverRecording.js b/web/app/assets/javascripts/hoverRecording.js index 3555b626e..02092717b 100644 --- a/web/app/assets/javascripts/hoverRecording.js +++ b/web/app/assets/javascripts/hoverRecording.js @@ -42,9 +42,9 @@ var mouseTop = y < (document.body.clientHeight / 2); var css = {}; if (mouseLeft) - css.left = x + 10 + 'px'; + css.left = x + 20 + 'px'; else - css.left = x - (7 + $(hoverSelector).width()) + 'px'; + css.left = x - (25 + $(hoverSelector).width()) + 'px'; if (mouseTop) css.top = y + 10 + 'px'; else diff --git a/web/app/assets/javascripts/hoverSession.js b/web/app/assets/javascripts/hoverSession.js index f6a9843c5..5bedf9249 100644 --- a/web/app/assets/javascripts/hoverSession.js +++ b/web/app/assets/javascripts/hoverSession.js @@ -13,9 +13,9 @@ var mouseTop = y < (document.body.clientHeight / 2); var css = {}; if (mouseLeft) - css.left = x + 10 + 'px'; + css.left = x + 20 + 'px'; else - css.left = x - (7 + $(hoverSelector).width()) + 'px'; + css.left = x - (25 + $(hoverSelector).width()) + 'px'; if (mouseTop) css.top = y + 10 + 'px'; else diff --git a/web/app/assets/javascripts/landing/landing.js b/web/app/assets/javascripts/landing/landing.js index 52cd0cc83..fbdb167c0 100644 --- a/web/app/assets/javascripts/landing/landing.js +++ b/web/app/assets/javascripts/landing/landing.js @@ -5,7 +5,9 @@ //= require globals //= require jamkazam //= require utils +//= require ui_helper //= require ga //= require jam_rest //= require landing/init -//= require landing/signup \ No newline at end of file +//= require landing/signup +//= require shareDialog \ No newline at end of file diff --git a/web/app/assets/javascripts/shareDialog.js b/web/app/assets/javascripts/shareDialog.js index c5dceb65b..dc3bca311 100644 --- a/web/app/assets/javascripts/shareDialog.js +++ b/web/app/assets/javascripts/shareDialog.js @@ -413,7 +413,7 @@ $(dialogId + ' .link-contents').text(entity.share_url) }) .fail(function(jqXHR) { - app.notifyServerError(jqXHR, "Unable to Fetch Session Data"); + app.notifyServerError(jqXHR, "Unable to Fetch Recording Data"); }) } else { diff --git a/web/app/assets/javascripts/ui_helper.js b/web/app/assets/javascripts/ui_helper.js new file mode 100644 index 000000000..97eacab17 --- /dev/null +++ b/web/app/assets/javascripts/ui_helper.js @@ -0,0 +1,46 @@ +(function(context,$) { + "use strict"; + + context.JK = context.JK || {}; + + context.JK.UIHelper = function(app) { + var logger = context.JK.logger; + var rest = new context.JK.Rest(); + + function addSessionLike(sessionId, userId, $likeCountSelector, $likeButtonSelector) { + rest.addSessionLike(sessionId, userId) + .done(function(response) { + $likeCountSelector.html(parseInt($likeCountSelector.text()) + 1); + $likeButtonSelector.unbind("click"); + }); + } + + function addRecordingLike(recordingId, claimedRecordingId, userId, $likeCountSelector, $likeButtonSelector) { + rest.addRecordingLike(recordingId, claimedRecordingId, userId) + .done(function(response) { + $likeCountSelector.html(parseInt($likeCountSelector.text()) + 1); + $likeButtonSelector.unbind("click"); + }); + } + + function launchCommentDialog(options) { + var commentDialog = new JK.CommentDialog(JK.app, options); + commentDialog.initialize(); + commentDialog.showDialog(); + } + + function launchShareDialog(entityId, entityType) { + var shareDialog = new JK.ShareDialog(JK.app, entityId, entityType); + shareDialog.initialize(JK.FacebookHelperInstance); + shareDialog.showDialog(); + } + + this.addSessionLike = addSessionLike; + this.addRecordingLike = addRecordingLike; + this.launchCommentDialog = launchCommentDialog; + this.launchShareDialog = launchShareDialog; + + return this; + }; + +})(window,jQuery); \ No newline at end of file diff --git a/web/app/assets/javascripts/utils.js b/web/app/assets/javascripts/utils.js index dd5de4c3b..0140c1b9f 100644 --- a/web/app/assets/javascripts/utils.js +++ b/web/app/assets/javascripts/utils.js @@ -153,9 +153,39 @@ $element.bt(text, options); } + context.JK.bindProfileClickEvents = function($parent, dialogsToClose) { + if (!$parent) { + $parent = $('body'); + } + + function closeDialogs() { + if (dialogsToClose) { + $.each(dialogsToClose, function(index, val) { + JK.app.layout.closeDialog(val); + }); + } + } + + $("[profileaction='band']", $parent).unbind('click'); + $("[profileaction='band']", $parent).click(function(evt) { + closeDialogs(); + console.log("navigating to band profile %o", $(this).attr('band-id')); + window.location = "/client#/bandProfile/" + $(this).attr('band-id'); + }); + + $("[profileaction='musician']", $parent).unbind('click'); + $("[profileaction='musician']", $parent).click(function(evt) { + closeDialogs(); + console.log("navigating to musician profile %o", $(this).attr('user-id')); + window.location = "/client#/profile/" + $(this).attr('user-id'); + }); + } + context.JK.bindHoverEvents = function ($parent) { var timeout = 300; var fadeoutValue = 100; + var sensitivity = 3; + var interval = 500; if (!$parent) { $parent = $('body'); @@ -194,7 +224,8 @@ out: function () { // this registers for leaving the hoverable element hideBubble($(this)); }, - sensitivity: 1, + sensitivity: sensitivity, + interval: interval, timeout: timeout }); @@ -207,7 +238,8 @@ out: function () { // this registers for leaving the hoverable element hideBubble($(this)); }, - sensitivity: 1, + sensitivity: sensitivity, + interval: interval, timeout: timeout }); @@ -220,7 +252,8 @@ out: function () { // this registers for leaving the hoverable element hideBubble($(this)); }, - sensitivity: 1, + sensitivity: sensitivity, + interval: interval, timeout: timeout }); @@ -233,7 +266,8 @@ out: function () { // this registers for leaving the hoverable element hideBubble($(this)); }, - sensitivity: 1, + sensitivity: sensitivity, + interval: interval, timeout: timeout }); @@ -246,7 +280,8 @@ out: function () { // this registers for leaving the hoverable element hideBubble($(this)); }, - sensitivity: 1, + sensitivity: sensitivity, + interval: interval, timeout: timeout }); } diff --git a/web/app/assets/javascripts/web/recordings.js b/web/app/assets/javascripts/web/recordings.js index 5a901a81e..1fecac65b 100644 --- a/web/app/assets/javascripts/web/recordings.js +++ b/web/app/assets/javascripts/web/recordings.js @@ -2,7 +2,8 @@ context.JK.ShowRecording = function(app) { var logger = context.JK.logger; - var rest = new JK.Rest(); + var rest = JK.Rest(); + var ui = context.JK.UIHelper(); var recordingId = null; var claimedRecordingId = null; var $scope = $(".landing-details"); @@ -105,14 +106,11 @@ $controls.bind('statechange.listenRecording', stateChange); $controls.listenRecording({recordingId: recordingId, claimedRecordingId: claimedRecordingId, sliderSelector:'.recording-slider', sliderBarSelector: '.recording-playback', currentTimeSelector:'.recording-current'}); + $("#btnShare", $scope).click(function(e) { + ui.launchShareDialog(claimedRecordingId, "recording"); + }); + if (JK.currentUserId) { - var shareDialog = new JK.ShareDialog(JK.app, claimedRecordingId, "recording"); - shareDialog.initialize(JK.FacebookHelperInstance); - - $("#btnShare", $scope).click(function(e) { - shareDialog.showDialog(); - }); - $("#btnPostComment").click(function(e) { if ($.trim($("#txtRecordingComment").val()).length > 0) { addComment(); diff --git a/web/app/assets/javascripts/web/sessions.js b/web/app/assets/javascripts/web/sessions.js index 55a569142..c31bd62c7 100644 --- a/web/app/assets/javascripts/web/sessions.js +++ b/web/app/assets/javascripts/web/sessions.js @@ -2,7 +2,8 @@ context.JK.ShowMusicSession = function(app) { var logger = context.JK.logger; - var rest = new JK.Rest(); + var rest = JK.Rest(); + var ui = context.JK.UIHelper(); var sessionId = null; var $scope = $(".landing-details"); var $controls = null; @@ -107,14 +108,11 @@ sessionId = musicSessionId; + $("#btnShare").click(function(e) { + ui.launchShareDialog(sessionId, "session"); + }); + if (JK.currentUserId) { - var shareDialog = new JK.ShareDialog(context.JK.app, sessionId, "session"); - shareDialog.initialize(JK.FacebookHelperInstance); - - $("#btnShare").click(function(e) { - shareDialog.showDialog(); - }); - $("#btnPostComment").click(function(e) { if ($.trim($("#txtSessionComment").val()).length > 0) { addComment(); diff --git a/web/app/assets/javascripts/web/web.js b/web/app/assets/javascripts/web/web.js index e5230fbf0..ffcbebaa6 100644 --- a/web/app/assets/javascripts/web/web.js +++ b/web/app/assets/javascripts/web/web.js @@ -35,10 +35,12 @@ //= require hoverSession //= require hoverRecording //= require shareDialog +//= require commentDialog //= require layout //= require user_dropdown //= require jamkazam //= require utils +//= require ui_helper //= require custom_controls //= require ga //= require jam_rest diff --git a/web/app/assets/stylesheets/client/client.css b/web/app/assets/stylesheets/client/client.css index 8dfded0bf..844f9ca42 100644 --- a/web/app/assets/stylesheets/client/client.css +++ b/web/app/assets/stylesheets/client/client.css @@ -57,7 +57,7 @@ *= require ./musician *= require web/audioWidgets *= require web/recordings - #= require web/sessions + *= require web/sessions *= require jquery.Jcrop *= require icheck/minimal/minimal */ \ No newline at end of file diff --git a/web/app/assets/stylesheets/client/dialog.css.scss b/web/app/assets/stylesheets/client/dialog.css.scss index 06e8ca2ba..c7882be42 100644 --- a/web/app/assets/stylesheets/client/dialog.css.scss +++ b/web/app/assets/stylesheets/client/dialog.css.scss @@ -78,5 +78,10 @@ color:#aaa; } +.dialog-comment-scroller { + height:210px; + overflow:auto; +} + diff --git a/web/app/assets/stylesheets/client/hoverBubble.css.scss b/web/app/assets/stylesheets/client/hoverBubble.css.scss index 3d2efd754..a53fff3b8 100644 --- a/web/app/assets/stylesheets/client/hoverBubble.css.scss +++ b/web/app/assets/stylesheets/client/hoverBubble.css.scss @@ -14,15 +14,15 @@ h2 { padding:6px 0px; text-align:center; - font-size:15px; - font-weight:200; + font-size:15px !important; + font-weight:200 !important; width:100%; background-color:#ed3618; } h3 { - font-weight:400; - font-size:16px; + font-weight:400 !important; + font-size:16px !important; color:#fff; } diff --git a/web/app/assets/stylesheets/web/audioWidgets.css.scss b/web/app/assets/stylesheets/web/audioWidgets.css.scss index 9803796b5..da7a933f1 100644 --- a/web/app/assets/stylesheets/web/audioWidgets.css.scss +++ b/web/app/assets/stylesheets/web/audioWidgets.css.scss @@ -238,7 +238,7 @@ font-size:12px; font-weight:bold; color:#ccc; - margin-bottom:10px; + margin-bottom:5px; overflow: hidden; white-space: nowrap; text-decoration: none; diff --git a/web/app/views/api_music_sessions/history_show.rabl b/web/app/views/api_music_sessions/history_show.rabl index d29de5af3..9d22fd4ab 100644 --- a/web/app/views/api_music_sessions/history_show.rabl +++ b/web/app/views/api_music_sessions/history_show.rabl @@ -1,6 +1,6 @@ object @history -attributes :id, :music_session_id, :description, :genres, :like_count, :comment_count, :created_at +attributes :id, :music_session_id, :description, :fan_access, :genres, :like_count, :comment_count, :created_at node :share_url do |history| unless history.share_token.nil? diff --git a/web/app/views/clients/_commentDialog.html.haml b/web/app/views/clients/_commentDialog.html.haml new file mode 100644 index 000000000..065ba4cc4 --- /dev/null +++ b/web/app/views/clients/_commentDialog.html.haml @@ -0,0 +1,29 @@ +.dialog.dialog-overlay-sm{layout: 'dialog', 'layout-id' => 'comment-dialog', id: 'comment-dialog'} + .content-head + %h1 + .dialog-inner + .right + %a.button-orange{id: 'dialog-close-button', 'layout-action' => 'close'} X CLOSE + %h2 Comments: + .avatar-small + = image_tag 'shared/avatar_generic.png', :alt => "" + .left.w80.p10 + %textarea.w100.p5.f15{id: 'txtComment', rows: '2', placeholder: 'Enter a comment...'} + %br/ + %br/ + .right + %a.button-orange{id: 'btn-add-comment'} ADD COMMENT + %br{clear: 'all'}/ + .dialog-comment-scroller + +%script{type: 'text/template', id: 'template-comments'} + .avatar-small.mr10{'user-id' => '{{data.user_id}}', 'hoveraction' => '{{data.hoverAction}}', 'profileaction' => '{{data.hoverAction}}'} + %a{'href' => '/client#/profile/{{data.user_id}}'} + %img{:'src' => '{{data.avatar_url}}', alt: ''} + .w80.left.p10.lightgrey.mt10.comment-text + %a{'user-id' => '{{data.user_id}}', 'hoveraction' => '{{data.hoverAction}}', 'profileaction' => '{{data.hoverAction}}'} {{data.name}} +  {{data.comment}} + %br/ + .f12.grey.mt5.comment-timestamp + {{data.timeago}} + %br{clear: 'all'}/ \ No newline at end of file diff --git a/web/app/views/clients/_hoverRecording.html.erb b/web/app/views/clients/_hoverRecording.html.erb index 50d75445e..214cf3df6 100644 --- a/web/app/views/clients/_hoverRecording.html.erb +++ b/web/app/views/clients/_hoverRecording.html.erb @@ -41,6 +41,7 @@
LIKE
SHARE
+
WEB PAGE


diff --git a/web/app/views/clients/_hoverSession.html.erb b/web/app/views/clients/_hoverSession.html.erb index 23ad5ae06..24af6b69a 100644 --- a/web/app/views/clients/_hoverSession.html.erb +++ b/web/app/views/clients/_hoverSession.html.erb @@ -35,6 +35,7 @@
LIKE
SHARE
+
WEB PAGE


diff --git a/web/app/views/clients/_recordingFinishedDialog.html.erb b/web/app/views/clients/_recordingFinishedDialog.html.erb index 8714ae77f..13fd40181 100644 --- a/web/app/views/clients/_recordingFinishedDialog.html.erb +++ b/web/app/views/clients/_recordingFinishedDialog.html.erb @@ -16,7 +16,7 @@

- +
diff --git a/web/app/views/clients/index.html.erb b/web/app/views/clients/index.html.erb index a573d1758..dd8d91baa 100644 --- a/web/app/views/clients/index.html.erb +++ b/web/app/views/clients/index.html.erb @@ -63,6 +63,8 @@ <%= render "clients/banners/disconnected" %> <%= render "overlay_small" %> <%= render "help" %> +<%= render "commentDialog" %> +
-<% end %> + <% content_for :extra_js do %> + + <% end %> + <% end %> \ No newline at end of file diff --git a/web/app/views/recordings/show.html.erb b/web/app/views/recordings/show.html.erb index 970cc0ad4..52839832d 100644 --- a/web/app/views/recordings/show.html.erb +++ b/web/app/views/recordings/show.html.erb @@ -18,6 +18,7 @@ <% end %>
+<% if @claimed_recording.is_public %>
<% unless @claimed_recording.recording.band.blank? %>
@@ -90,32 +91,40 @@ <%= render :partial => "shared/track_details", :locals => {:tracks => @claimed_recording.recording.grouped_tracks} %>

-
-<% if signed_in? %> - <% unless @claimed_recording.recording.band.nil? %> - <%= render :partial => "shared/landing_sidebar", :locals => {:user => @claimed_recording.recording.band, :recent_history => @claimed_recording.recording.band.recent_history} %> + <% else %> - <%= render :partial => "shared/landing_sidebar", :locals => {:user => @claimed_recording.recording.owner, :recent_history => @claimed_recording.recording.owner.recent_history} %> +
RECORDING NOT FOUND
+ <% end %> +
+ +<% if @claimed_recording.is_public %> + <% if signed_in? %> + <% unless @claimed_recording.recording.band.nil? %> + <%= render :partial => "shared/landing_sidebar", :locals => {:user => @claimed_recording.recording.band, :recent_history => @claimed_recording.recording.band.recent_history} %> + <% else %> + <%= render :partial => "shared/landing_sidebar", :locals => {:user => @claimed_recording.recording.owner, :recent_history => @claimed_recording.recording.owner.recent_history} %> + <% end %> + <% else %> + <%= render :partial => "shared/cta_sidebar" %> + <% end %> + + <% content_for :after_black_bar do %> +
+ <%= render :partial => "shared/comments", :locals => {:comments => @claimed_recording.recording.comments, :id => "txtRecordingComment"} %> + <% end %> + + + <% content_for :extra_dialogs do %> + <%= render :partial => "clients/shareDialog" %> + <% end %> + + <% content_for :extra_js do %> + <% end %> -<% else %> - <%= render :partial => "shared/cta_sidebar" %> -<% end %> - -<% content_for :after_black_bar do %> -
- <%= render :partial => "shared/comments", :locals => {:comments => @claimed_recording.recording.comments, :id => "txtRecordingComment"} %> -<% end %> - -<% content_for :extra_dialogs do %> - <%= render :partial => "clients/shareDialog" %> -<% end %> - -<% content_for :extra_js do %> - <% end %> diff --git a/web/app/views/users/_feed_music_session.html.haml b/web/app/views/users/_feed_music_session.html.haml index ff40d20d6..c1ea1ee33 100644 --- a/web/app/views/users/_feed_music_session.html.haml +++ b/web/app/views/users/_feed_music_session.html.haml @@ -4,7 +4,8 @@ = session_avatar(feed_item) / type and artist .left.ml20.w15 - .title{hoveraction: 'session', :'session-id' => feed_item.id } SESSION + .title{hoveraction: 'session', :'session-id' => feed_item.id } + %a{:href => "/sessions/#{feed_item.id}", :target => "_blank"} SESSION .artist = session_artist_name(feed_item) = timeago(feed_item.created_at, class: 'small created_at') @@ -31,18 +32,24 @@ .left.small = session_genre(feed_item) .right.small.feed-details + - if !feed_item.session_removed_at + %a{title: 'Share', class: 'btn-share'} + = image_tag 'content/icon_share.png', :height => "12", :width => "7" +   %span.play-count %span.plays = feed_item.play_count - = image_tag 'content/icon_arrow.png', :height => "12", :width => "7" + = image_tag 'content/icon_arrow.png', :height => "12", :width => "7", :title => 'Play' %span.comment-count %span.comments = feed_item.comment_count - = image_tag 'content/icon_comment.png', :height => "12", :width => "13" + %a{title: 'Comment', class: 'btn-comment'} + = image_tag 'content/icon_comment.png', :height => "12", :width => "13" %span.like-count %span.likes = feed_item.like_count - = image_tag 'content/icon_like.png', :height => "12", :width => "12" + %a{title: 'Like', class: 'btn-like'} + = image_tag 'content/icon_like.png', :height => "12", :width => "12" %a.details{:href => "#"} Details %a.details-arrow.arrow-down-orange{:href => "#"} %br/ diff --git a/web/app/views/users/_feed_music_session_ajax.html.haml b/web/app/views/users/_feed_music_session_ajax.html.haml index 51f461f2c..15f5cc6c5 100644 --- a/web/app/views/users/_feed_music_session_ajax.html.haml +++ b/web/app/views/users/_feed_music_session_ajax.html.haml @@ -2,13 +2,15 @@ .feed-entry.music-session-history-entry{'data-music-session' => '{{data.feed_item.id}}' } / avatar .avatar-small.ib - %img{ src: '{{data.feed_item.helpers.avatar}}' } + %a{:hoveraction => "{{data.feed_item.helpers.artist_hoveraction}}", :profileaction => "{{data.feed_item.helpers.artist_hoveraction}}", :"{{data.feed_item.helpers.artist_datakey}}" => "{{data.feed_item.helpers.artist_id}}"} + %img{ src: '{{data.feed_item.helpers.avatar}}' } / type and artist .left.ml20.w15 - .title{hoveraction: 'session', :'session-id' => '{{data.feed_item.id}}' } SESSION + .title{hoveraction: 'session', :'session-id' => '{{data.feed_item.id}}' } + %a{:href => "/sessions/{{data.feed_item.id}}", :rel => "external"} SESSION .artist - %a.artist{href: "#", :hoveraction => '{{data.feed_item.helpers.artist_hoveraction}}', :'{{data.feed_item.helpers.artist_datakey}}' => '{{data.feed_item.helpers.artist_id}}'} - = '{{data.feed_item.helpers.artist_name}}' + %a.artist{:hoveraction => '{{data.feed_item.helpers.artist_hoveraction}}', :profileaction => "{{data.feed_item.helpers.artist_hoveraction}}", :'{{data.feed_item.helpers.artist_datakey}}' => '{{data.feed_item.helpers.artist_id}}'} + = '{{data.feed_item.helpers.artist_name}}' %time.small.created_at.timeago{datetime: '{{data.feed_item.helpers.utc_created_at}}'}= '{{data.feed_item.created_at}}' / name and description .left.ml20.w30 @@ -34,18 +36,23 @@ / genre and social .left.small= '{{data.feed_item.helpers.genre}}' .right.small.feed-details + %a{title: 'Share', class: 'btn-share'} + = image_tag 'content/icon_share.png', :height => "12", :width => "7" +   %span.play-count %span.plays = '{{data.feed_item.play_count}}' - = image_tag 'content/icon_arrow.png', :height => "12", :width => "7" + = image_tag 'content/icon_arrow.png', :height => "12", :width => "7", :title => 'Play' %span.comment-count %span.comments = '{{data.feed_item.comment_count}}' - = image_tag 'content/icon_comment.png', :height => "12", :width => "13" + %a{title: 'Comment', class: 'btn-comment'} + = image_tag 'content/icon_comment.png', :height => "12", :width => "13" %span.like-count %span.likes - = '{{data.feed_item.comment_count}}' - = image_tag 'content/icon_like.png', :height => "12", :width => "12" + = '{{data.feed_item.like_count}}' + %a{title: 'Like', class: 'btn-like'} + = image_tag 'content/icon_like.png', :height => "12", :width => "12" %a.details{:href => "#"} Details %a.details-arrow.arrow-down-orange{:href => "#"} %br/ @@ -56,10 +63,10 @@ = '{% _.each(data.feed_item.participants, function(user) { %}' %tr %td{:width => "24"} - %a.avatar-tiny{:href => "#", :hoveraction => "musician", :'user-id' => '{{user.id}}'} + %a.avatar-tiny{:hoveraction => "musician", :profileaction => "musician", :'user-id' => '{{user.id}}'} %img{src: '{{user.helpers.avatar}}'} %td - %a.musician-name{:href => "#", :hoveraction => "musician", :'user-id' => '{{user.id}}'} + %a.musician-name{:hoveraction => "musician", :profileaction => "musician", :'user-id' => '{{user.id}}'} = '{{user.first_name}} {{user.last_name}}' %td .nowrap diff --git a/web/app/views/users/_feed_recording.html.haml b/web/app/views/users/_feed_recording.html.haml index dc4051602..d487821c2 100644 --- a/web/app/views/users/_feed_recording.html.haml +++ b/web/app/views/users/_feed_recording.html.haml @@ -7,7 +7,8 @@ = recording_avatar(feed_item) / type and artist .left.ml20.w15.feed-type-title - .title{hoveraction: 'recording', :'recording-id' => feed_item.candidate_claimed_recording.id } RECORDING + .title{hoveraction: 'recording', :'recording-id' => feed_item.candidate_claimed_recording.id } + %a{:href => "/recordings/#{feed_item.candidate_claimed_recording.id}", :target => "_blank"} RECORDING .artist = recording_artist_name(feed_item) = timeago(feed_item.created_at, class: 'small created_at') @@ -52,18 +53,23 @@ .left.small = recording_genre(feed_item) .right.small.feed-details + %a{title: 'Share', class: 'btn-share'} + = image_tag 'content/icon_share.png', :height => "12", :width => "7" +   %span.play-count %span.plays = feed_item.play_count - = image_tag 'content/icon_arrow.png', :height => "12", :width => "7" + = image_tag 'content/icon_arrow.png', :height => "12", :width => "7", :title => 'Play' %span.comment-count %span.comments = feed_item.comment_count - = image_tag 'content/icon_comment.png', :height => "12", :width => "13" + %a{title: 'Comment', class: 'btn-comment'} + = image_tag 'content/icon_comment.png', :height => "12", :width => "13" %span.like-count %span.likes = feed_item.like_count - = image_tag 'content/icon_like.png', :height => "12", :width => "12" + %a{title: 'Like', class: 'btn-like'} + = image_tag 'content/icon_like.png', :height => "12", :width => "12" %a.details{:href => "#"} Details %a.details-arrow.arrow-down-orange{:href => "#"} %br/ diff --git a/web/app/views/users/_feed_recording_ajax.html.haml b/web/app/views/users/_feed_recording_ajax.html.haml index ffe584099..25198edeb 100644 --- a/web/app/views/users/_feed_recording_ajax.html.haml +++ b/web/app/views/users/_feed_recording_ajax.html.haml @@ -2,13 +2,15 @@ .feed-entry.recording-entry{:'data-claimed-recording-id' => '{{data.candidate_claimed_recording.id}}' } / avatar .avatar-small.ib - %img{ src: '{{data.feed_item.helpers.avatar}}' } + %a{:hoveraction => "{{data.feed_item.helpers.artist_hoveraction}}", :profileaction => "{{data.feed_item.helpers.artist_hoveraction}}", :"{{data.feed_item.helpers.artist_datakey}}" => "{{data.feed_item.helpers.artist_id}}"} + %img{ src: '{{data.feed_item.helpers.avatar}}' } / type and artist .left.ml20.w15 - .title{hoveraction: 'recording', :'recording-id' => '{{data.candidate_claimed_recording.id}}' } RECORDING + .title{hoveraction: 'recording', :'recording-id' => '{{data.candidate_claimed_recording.id}}' } + %a{:href => "/recordings/{{data.candidate_claimed_recording.id}}", :rel => "external"} RECORDING .artist - %a.artist{href: "#", :hoveraction => '{{data.feed_item.helpers.artist_hoveraction}}', :'{{data.feed_item.helpers.artist_datakey}}' => '{{data.feed_item.helpers.artist_id}}'} - = '{{data.feed_item.helpers.artist_name}}' + %a.artist{:hoveraction => '{{data.feed_item.helpers.artist_hoveraction}}', :profileaction => "{{data.feed_item.helpers.artist_hoveraction}}", :'{{data.feed_item.helpers.artist_datakey}}' => '{{data.feed_item.helpers.artist_id}}'} + = '{{data.feed_item.helpers.artist_name}}' %time.small.created_at.timeago{datetime: '{{data.feed_item.helpers.utc_created_at}}'} = '{{data.feed_item.created_at}}' / name and description @@ -54,18 +56,23 @@ / genre and social .left.small= '{{data.feed_item.helpers.genre}}' .right.small.feed-details + %a{title: 'Share', class: 'btn-share'} + = image_tag 'content/icon_share.png', :height => "12", :width => "7" +   %span.play-count %span.plays = '{{data.feed_item.play_count}}' - = image_tag 'content/icon_arrow.png', :height => "12", :width => "7" + = image_tag 'content/icon_arrow.png', :height => "12", :width => "7", :title => 'Play' %span.comment-count %span.comments = '{{data.feed_item.comment_count}}' - = image_tag 'content/icon_comment.png', :height => "12", :width => "13" + %a{title: 'Comment', class: 'btn-comment'} + = image_tag 'content/icon_comment.png', :height => "12", :width => "13" %span.like-count %span.likes = '{{data.feed_item.like_count}}' - = image_tag 'content/icon_like.png', :height => "12", :width => "12" + %a{title: 'Like', class: 'btn-like'} + = image_tag 'content/icon_like.png', :height => "12", :width => "12" %a.details{:href => "#"} Details %a.details-arrow.arrow-down-orange{:href => "#"} %br/ @@ -76,10 +83,10 @@ = '{% _.each(data.feed_item.grouped_tracks, function(track) { %}' %tr %td{:width => "24"} - %a.avatar-tiny{:href => "#", :hoveraction => "musician", :"user-id" => '{{track.musician.id}}'} + %a.avatar-tiny{:hoveraction => "musician", :profileaction => "musician", :"user-id" => '{{track.musician.id}}'} %img{src: '{{track.musician.helpers.avatar}}'} %td - %a.musician-name{:href => "#", :hoveraction => "musician", :"user-id" => '{{track.musician.id}}'} + %a.musician-name{:hoveraction => "musician", :profileaction => "musician", :"user-id" => '{{track.musician.id}}'} = '{{track.musician.first_name}} {{track.musician.last_name}}' %td .nowrap diff --git a/web/app/views/users/welcome.html.haml b/web/app/views/users/welcome.html.haml index 6624039b7..dcad67dd0 100644 --- a/web/app/views/users/welcome.html.haml +++ b/web/app/views/users/welcome.html.haml @@ -25,3 +25,7 @@ $(function () { window.JK.WelcomePage(); }) + +- content_for :extra_dialogs do + = render :partial => "clients/shareDialog" + = render :partial => "clients/commentDialog" diff --git a/web/spec/features/feed_spec.rb b/web/spec/features/feed_spec.rb index d0005db7a..85620ae4f 100644 --- a/web/spec/features/feed_spec.rb +++ b/web/spec/features/feed_spec.rb @@ -13,19 +13,58 @@ describe "Feed", :js => true, :type => :feature, :capybara_feature => true do describe "sessions" do before(:each) do + MusicSessionHistory.delete_all create_session(creator: user) formal_leave_by(user) end # it "should render avatar" do + # it " and link to profile" do + # end + + # it " and render artist hover bubble" do + # end # end # it "should render description" do + # it " and link to session landing" do + # end + + # it " and render session hover bubble" do + # end # end - # it "should render stats" do + # it "should render artist name" do + # it " and link to profile" do + # end + + # it " and render artist hover bubble" # end + it "should render stats" do + visit "/client#/feed" + + # initial stats + find('span.plays').should have_content('0') + find('span.comments').should have_content('0') + find('span.likes').should have_content('0') + + # Comments + find('a.btn-comment').trigger(:click) + comment = 'this sounds great' + fill_in "txtComment", with: comment + find('#btn-add-comment').trigger(:click) + find('div.comment-text', text: comment) + find('#dialog-close-button', '[layout-id="comment-dialog"]').trigger(:click) + + find('#btn-refresh-feed').trigger(:click) + find('span.comments').should have_content('1') + + # Likes + find('a.btn-like').trigger(:click) + find('span.likes').should have_content('1') + end + it "should render details" do visit "/client#/feed" find('.feed-details a.details').trigger(:click) @@ -56,26 +95,78 @@ describe "Feed", :js => true, :type => :feature, :capybara_feature => true do before(:each) do MusicSessionHistory.delete_all + Recording.delete_all start_recording_with(user) stop_recording formal_leave_by(user) end # it "should render avatar" do + # it " and link to profile" do + # end + + # it " and render artist hover bubble" do + # end # end # it "should render description" do + # it " and link to recording landing" do + # end + + # it " and render recording hover bubble" do + # end # end - # it "should render stats" do + # it "should render artist name" do + # it " and link to profile" do + # end + + # it " and render artist hover bubble" # end + it "should render stats" do + visit "/client#/feed" + + # close recording finished dialog + claim_recording("my recording", "my recording description") + + MusicSessionHistory.delete_all + + find('#btn-refresh-feed').trigger(:click) + + # initial stats + find('span.plays').should have_content('0') + find('span.comments').should have_content('0') + find('span.likes').should have_content('0') + + # ensure Share icon exists + find('a.btn-share') + + # Comments + find('a.btn-comment').trigger(:click) + comment = 'this sounds great' + fill_in "txtComment", with: comment + find('#btn-add-comment').trigger(:click) + find('div.comment-text', text: comment) + find('#dialog-close-button', '[layout-id="comment-dialog"]').trigger(:click) + + find('#btn-refresh-feed').trigger(:click) + find('span.comments').should have_content('1') + + # Likes + find('a.btn-like').trigger(:click) + find('span.likes').should have_content('1') + end + it "should render details" do visit "/client#/feed" # close recording finished dialog - find('#recording-finished-dialog h1') - find('#discard-session-recording').trigger(:click) + claim_recording("my recording", "my recording description") + + MusicSessionHistory.delete_all + + find('#btn-refresh-feed').trigger(:click) find('.feed-details a.details').trigger(:click) @@ -94,7 +185,7 @@ describe "Feed", :js => true, :type => :feature, :capybara_feature => true do # confirm navigate to user profile page find(".avatar-tiny[user-id=\"#{user.id}\"][hoveraction=\"musician\"]").trigger(:click) - find("#user-profile h2[id=profile-username]", text: user.name) + find("#user-profile h2[id=profile-username]", text: user.name) end # it "should render play widget" do diff --git a/web/spec/features/home_spec.rb b/web/spec/features/home_spec.rb index 31abb2387..42cb8604c 100644 --- a/web/spec/features/home_spec.rb +++ b/web/spec/features/home_spec.rb @@ -14,7 +14,7 @@ describe "Home Screen", :js => true, :type => :feature, :capybara_feature => tru let(:user) { FactoryGirl.create(:user) } - share_examples_for :has_footer do + shared_examples_for :has_footer do it "should have footer elements" do should have_selector('#footer-links') find('#footer-links').should have_content('about') diff --git a/web/spec/support/utilities.rb b/web/spec/support/utilities.rb index 3040a535f..bfd7e150d 100644 --- a/web/spec/support/utilities.rb +++ b/web/spec/support/utilities.rb @@ -322,7 +322,7 @@ def claim_recording(name, description) fill_in "claim-recording-name", with: name fill_in "claim-recording-description", with: description find('#keep-session-recording').trigger(:click) - should have_no_selector('h1', text: 'recording finished') + page.should have_no_selector('h1', text: 'recording finished') end def set_session_as_private()