From 0a94f73d085d386fe5e059db12456e19ca059361 Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Wed, 12 Feb 2014 23:40:41 -0500 Subject: [PATCH] VRFS-1028 add hover bubbles throughout app --- web/app/assets/javascripts/hoverBand.js | 2 +- web/app/assets/javascripts/hoverFan.js | 80 +- web/app/assets/javascripts/hoverMusician.js | 159 +- web/app/assets/javascripts/searchResults.js | 450 ++-- web/app/assets/javascripts/sidebar.js | 1885 +++++++++-------- web/app/assets/javascripts/utils.js | 10 +- web/app/assets/javascripts/web/web.js | 5 + .../stylesheets/client/hoverBubble.css.scss | 19 + web/app/views/api_users/friend_index.rabl | 2 +- web/app/views/api_users/show.rabl | 46 +- web/app/views/clients/_bands.html.erb | 2 +- web/app/views/clients/_hoverFan.html.erb | 67 +- web/app/views/clients/_searchResults.html.erb | 53 +- web/app/views/clients/_sidebar.html.erb | 25 +- web/app/views/layouts/web.erb | 8 + web/app/views/shared/_comments.html.erb | 5 +- web/app/views/shared/_track_details.html.erb | 4 +- 17 files changed, 1465 insertions(+), 1357 deletions(-) diff --git a/web/app/assets/javascripts/hoverBand.js b/web/app/assets/javascripts/hoverBand.js index ea408da91..ecdfaa860 100644 --- a/web/app/assets/javascripts/hoverBand.js +++ b/web/app/assets/javascripts/hoverBand.js @@ -10,7 +10,7 @@ var hoverSelector = "#band-hover"; this.showBubble = function() { - $(hoverSelector).css({left: position.left, top: position.top+200}); + $(hoverSelector).css({left: position.left-100, top: position.top}); $(hoverSelector).fadeIn(500); rest.getBand(bandId) diff --git a/web/app/assets/javascripts/hoverFan.js b/web/app/assets/javascripts/hoverFan.js index aac8914f5..69af6ee01 100644 --- a/web/app/assets/javascripts/hoverFan.js +++ b/web/app/assets/javascripts/hoverFan.js @@ -1,14 +1,76 @@ (function(context,$) { - "use strict"; - context.JK = context.JK || {}; - context.JK.FanHoverBubble = function(app) { + "use strict"; + context.JK = context.JK || {}; + context.JK.FanHoverBubble = function(userId, position) { - function initialize() { + var logger = context.JK.logger; + var rest = context.JK.Rest(); + var instrumentLogoMap = context.JK.getInstrumentIconMap24(); + var hoverSelector = "#fan-hover"; - } - - this.initialize = initialize; - this.showBubble = showBubble; - } + this.showBubble = function() { + $(hoverSelector).css({left: position.left-100, top: position.top}); + $(hoverSelector).fadeIn(500); + + rest.getUserDetail({id: userId}) + .done(function(response) { + $(hoverSelector).html(''); + + // followings + var followingHtml = ''; + $.each(response.followings, function(index, val) { + if (index < 4) { // display max of 4 followings (NOTE: this only displays USER followings, not BAND followings) + if (index % 2 === 0) { + followingHtml += ''; + } + + followingHtml += ''; + followingHtml += '' + val.name + ''; + + if (index % 2 > 0) { + followingHtml += ''; + } + } + }); + + var template = $('#template-hover-fan').html(); + if (response.biography == null) { + response.biography = 'No Biography Available'; + } + + var fanHtml = context.JK.fillTemplate(template, { + avatar_url: context.JK.resolveAvatarUrl(response.photo_url), + name: response.name, + location: response.location, + friend_count: response.friend_count, + follower_count: response.follower_count, + biography: response.biography, + followings: response.followings && response.followings.length > 0 ? followingHtml : "N/A", + profile_url: "/client#/profile/" + response.id + }); + + $(hoverSelector).append('

Fan Detail

' + fanHtml); + }) + .fail(function(xhr) { + if(xhr.status >= 500) { + context.JK.fetchUserNetworkOrServerFailure(); + } + else if(xhr.status == 404) { + context.JK.entityNotFound("User"); + } + else { + context.JK.app.ajaxError(arguments); + } + }); + }; + + this.hideBubble = function() { + $(hoverSelector).hide(); + }; + + this.id = function() { + return hoverSelector; + }; + } })(window,jQuery); \ No newline at end of file diff --git a/web/app/assets/javascripts/hoverMusician.js b/web/app/assets/javascripts/hoverMusician.js index 26fe6b2a3..d4ac48b67 100644 --- a/web/app/assets/javascripts/hoverMusician.js +++ b/web/app/assets/javascripts/hoverMusician.js @@ -1,94 +1,95 @@ (function(context,$) { - "use strict"; - context.JK = context.JK || {}; - context.JK.MusicianHoverBubble = function(userId, position) { + "use strict"; + context.JK = context.JK || {}; + context.JK.MusicianHoverBubble = function(userId, position) { - var logger = context.JK.logger; - var rest = context.JK.Rest(); - var instrumentLogoMap = context.JK.getInstrumentIconMap24(); - var hoverSelector = "#musician-hover"; + var logger = context.JK.logger; + var rest = context.JK.Rest(); + var instrumentLogoMap = context.JK.getInstrumentIconMap24(); + var hoverSelector = "#musician-hover"; - this.showBubble = function() { - $(hoverSelector).css({left: position.left, top: position.top+200}); - $(hoverSelector).fadeIn(500); + this.showBubble = function() { + $(hoverSelector).css({left: position.left-100, top: position.top}); + $(hoverSelector).fadeIn(500); - rest.getUserDetail({id: userId}) - .done(function(response) { - $(hoverSelector).html(''); + rest.getUserDetail({id: userId}) + .done(function(response) { + $(hoverSelector).html(''); - // instruments - var instrumentHtml = ''; - $.each(response.instruments, function(index, val) { - instrumentHtml += '
'; - }); + // instruments + var instrumentHtml = ''; + $.each(response.instruments, function(index, val) { + instrumentHtml += '
'; + }); - // followings - var followingHtml = ''; - $.each(response.followings, function(index, val) { - if (index < 4) { // display max of 4 followings (NOTE: this only displays USER followings, not BAND followings) - if (index % 2 === 0) { - followingHtml += ''; - } - - followingHtml += ''; - followingHtml += '' + val.name + ''; - - if (index % 2 > 0) { - followingHtml += ''; - } + // followings + var followingHtml = ''; + $.each(response.followings, function(index, val) { + if (index < 4) { // display max of 4 followings (NOTE: this only displays USER followings, not BAND followings) + if (index % 2 === 0) { + followingHtml += ''; } - }); - var template = $('#template-hover-musician').html(); - if (response.biography == null) { - response.biography = 'No Biography Available'; - } + followingHtml += ''; + followingHtml += '' + val.name + ''; - var sessionDisplayStyle = 'none'; - var sessionId = ''; - if (response.sessions !== undefined && response.sessions.length > 0) { - sessionDisplayStyle = 'block'; - sessionId = response.sessions[0].id; - } - - var musicianHtml = context.JK.fillTemplate(template, { - avatar_url: context.JK.resolveAvatarUrl(response.photo_url), - name: response.name, - location: response.location, - instruments: instrumentHtml, - friend_count: response.friend_count, - follower_count: response.follower_count, - recording_count: response.recording_count, - session_count: response.session_count, - session_display: sessionDisplayStyle, - session_id: sessionId, - biography: response.biography, - followings: followingHtml, - profile_url: "/client#/profile/" + response.id - }); - - $(hoverSelector).append('

Musician Detail

' + musicianHtml); - }) - .fail(function(xhr) { - if(xhr.status >= 500) { - context.JK.fetchUserNetworkOrServerFailure(); - } - else if(xhr.status == 404) { - context.JK.entityNotFound("User"); - } - else { - context.JK.app.ajaxError(arguments); + if (index % 2 > 0) { + followingHtml += ''; + } } }); - }; - this.hideBubble = function() { - $(hoverSelector).hide(); - }; + var template = $('#template-hover-musician').html(); + if (response.biography == null) { + response.biography = 'No Biography Available'; + } - this.id = function() { - return hoverSelector; - }; - } + var sessionDisplayStyle = 'none'; + var sessionId = ''; + console.log("here"); + if (response.sessions !== undefined && response.sessions.length > 0) { + sessionDisplayStyle = 'block'; + sessionId = response.sessions[0].id; + } + + var musicianHtml = context.JK.fillTemplate(template, { + avatar_url: context.JK.resolveAvatarUrl(response.photo_url), + name: response.name, + location: response.location, + instruments: instrumentHtml, + friend_count: response.friend_count, + follower_count: response.follower_count, + recording_count: response.recording_count, + session_count: response.session_count, + session_display: sessionDisplayStyle, + session_id: sessionId, + biography: response.biography, + followings: response.followings && response.followings.length > 0 ? followingHtml : "N/A", + profile_url: "/client#/profile/" + response.id + }); + + $(hoverSelector).append('

Musician Detail

' + musicianHtml); + }) + .fail(function(xhr) { + if(xhr.status >= 500) { + context.JK.fetchUserNetworkOrServerFailure(); + } + else if(xhr.status == 404) { + context.JK.entityNotFound("User"); + } + else { + context.JK.app.ajaxError(arguments); + } + }); + }; + + this.hideBubble = function() { + $(hoverSelector).hide(); + }; + + this.id = function() { + return hoverSelector; + }; + } })(window,jQuery); \ No newline at end of file diff --git a/web/app/assets/javascripts/searchResults.js b/web/app/assets/javascripts/searchResults.js index 9144d9943..bf58f118d 100644 --- a/web/app/assets/javascripts/searchResults.js +++ b/web/app/assets/javascripts/searchResults.js @@ -1,236 +1,254 @@ (function(context,$) { - "use strict"; + "use strict"; - context.JK = context.JK || {}; - context.JK.SearchResultScreen = function(app) { - var logger = context.JK.logger; + context.JK = context.JK || {}; + context.JK.SearchResultScreen = function(app) { + var logger = context.JK.logger; + var instrument_logo_map = context.JK.getInstrumentIconMap24(); - var instrument_logo_map = context.JK.getInstrumentIconMap24(); + function initializeSearchNavLinks() { + $('.search-nav').click(function() { + $('.search-nav.active').removeClass('active'); + $(this).addClass('active'); + setTimeout(search, 100); + context.JK.Sidebar.searchTypeSelection($(this).data('search_text_type')); + }); + } - function initializeSearchNavLinks() { - $('.search-nav').click(function() { - $('.search-nav.active').removeClass('active'); - $(this).addClass('active'); - setTimeout(search, 100); - context.JK.Sidebar.searchTypeSelection($(this).data('search_text_type')); - }); - } + context.JK.SearchResultScreen.searchTypeSelection = function(typeSelection) { + $('.search-nav.active').removeClass('active'); + $('.search-result-header a[data-search_text_type='+typeSelection+']').addClass('active'); + } - context.JK.SearchResultScreen.searchTypeSelection = function(typeSelection) { - $('.search-nav.active').removeClass('active'); - $('.search-result-header a[data-search_text_type='+typeSelection+']').addClass('active'); - } + function beforeShow(data) { + var query = data.query; + } - function beforeShow(data) { - var query = data.query; - } + function afterShow(data) { + } - function afterShow(data) { - } + function selectedSearchType() { + var srchtype = $('.search-nav.active').data('search_text_type'); + if (srchtype === undefined) { + srchtype = $('#search_text_type').val(); + } + return srchtype; + } - function selectedSearchType() { - var srchtype = $('.search-nav.active').data('search_text_type'); - if (srchtype === undefined) { - srchtype = $('#search_text_type').val(); - } - return srchtype; - } + function search(evt) { + if (evt) { + evt.stopPropagation(); + } + + $('#search-results').empty(); + + var query = $('#search-input').val(); + if (query) { + context.location = '/client#/searchResults/:' + query; + } + else { + query = $('#query').html(); + } - function search(evt) { - if (evt) { - evt.stopPropagation(); - } - $('#search-results').empty(); - var query = $('#search-input').val(); - if (query) { - context.location = '/client#/searchResults/:' + query; - } else { - query = $('#query').html(); - } + if (query !== '') { + $('#query').html(query); + query += '&search_text_type='+selectedSearchType(); + context.JK.search(query, app, context.JK.SearchResultScreen.onSearchSuccess); + } + else { + $('#result-count').html(''); + $('#query').html(''); + } - if (query !== '') { - $('#query').html(query); - query += '&search_text_type='+selectedSearchType(); - context.JK.search(query, app, context.JK.SearchResultScreen.onSearchSuccess); - } else { - $('#result-count').html(''); - $('#query').html(''); + return false; + } + + function resultDivVisibility(val, isSidebar) { + if (isSidebar) { + $('div[layout=sidebar user-id=' + val.id + '].sidebar-search-connected').hide(); + $('div[layout=sidebar user-id=' + val.id + '].sidebar-search-result').show(); + } + else { + $('div[user-id=' + val.id + '].search-connected').hide(); + $('div[user-id=' + val.id + '].search-result').show(); + } + } + + context.JK.SearchResultScreen.onSearchSuccess = function(response) { + searchResults(response, true); + searchResults(response, false); + context.JK.bindHoverEvents(); + } + + function searchResults(response, isSidebar) { + var resultCount=0; + var selector, template_name; + selector = isSidebar ? '#sidebar-search-results' : '#search-results'; + $(selector).html(''); + + if (response.search_type === 'musicians') { + resultCount = response.musicians.length; + // TODO: generalize this for each search result type (band, musician, et. al.) + template_name = isSidebar ? "#template-musicians-sidebar-search-result" : "#template-musicians-search-result"; + + $.each(response.musicians, function(index, val) { + // fill in template for Connect pre-click + var args = { + userId: val.id, + avatar_url: context.JK.resolveAvatarUrl(val.photo_url), + profile_url: "/client#/profile/" + val.id, + userName: val.name, + location: val.location, + instruments: getInstrumentHtml(val.instruments) + }; + selector = isSidebar ? '#sidebar-search-results' : '#search-results'; + $(selector).append(context.JK.fillTemplate($(template_name).html(), args)); + + // fill in template for Connect post-click + selector = isSidebar ? '#template-sidebar-invitation-sent' : '#template-invitation-sent'; + var invitationSentHtml = context.JK.fillTemplate($(selector).html(), { + userId: val.id, + first_name: val.first_name, + profile_url: "/client#/profile/" + val.id + }); + + selector = isSidebar ? '#sidebar-search-results' : '#search-results'; + $(selector).append(invitationSentHtml); + + // wire up button click handler if search result is not a friend or the current use + if (isSidebar) { + var $sidebar = $('div[layout=sidebar] div[user-id=' + val.id + ']'); + if (!val.is_friend && val.id !== context.JK.currentUserId) { + $sidebar.find('.btn-connect-friend').click(sendFriendRequest); } - - return false; - } - - function resultDivVisibility(val, isSidebar) { - if (isSidebar) { - $('div[layout=sidebar user-id=' + val.id + '].sidebar-search-connected').hide(); - $('div[layout=sidebar user-id=' + val.id + '].sidebar-search-result').show(); - } else { - $('div[user-id=' + val.id + '].search-connected').hide(); - $('div[user-id=' + val.id + '].search-result').show(); - } - } - - context.JK.SearchResultScreen.onSearchSuccess = function(response) { - searchResults(response, true); - searchResults(response, false); - } - - function searchResults(response, isSidebar) { - var resultCount=0; - var selector, template_name; - selector = isSidebar ? '#sidebar-search-results' : '#search-results'; - $(selector).html(''); - - if (response.search_type === 'musicians') { - resultCount = response.musicians.length; - // TODO: generalize this for each search result type (band, musician, et. al.) - template_name = isSidebar ? "#template-musicians-sidebar-search-result" : "#template-musicians-search-result"; - $.each(response.musicians, function(index, val) { - // fill in template for Connect pre-click - var args = { - userId: val.id, - avatar_url: context.JK.resolveAvatarUrl(val.photo_url), - profile_url: "/client#/profile/" + val.id, - userName: val.name, - location: val.location, - instruments: getInstrumentHtml(val.instruments) - }; - selector = isSidebar ? '#sidebar-search-results' : '#search-results'; - $(selector).append(context.JK.fillTemplate($(template_name).html(), args)); - - // fill in template for Connect post-click - selector = isSidebar ? '#template-sidebar-invitation-sent' : '#template-invitation-sent'; - var invitationSentHtml = context.JK.fillTemplate($(selector).html(), { - userId: val.id, - first_name: val.first_name, - profile_url: "/client#/profile/" + val.id - }); - - selector = isSidebar ? '#sidebar-search-results' : '#search-results'; - $(selector).append(invitationSentHtml); - - // wire up button click handler if search result is not a friend or the current use - if (isSidebar) { - var $sidebar = $('div[layout=sidebar] div[user-id=' + val.id + ']'); - if (!val.is_friend && val.id !== context.JK.currentUserId) { - $sidebar.find('.btn-connect-friend').click(sendFriendRequest); - } else { - // hide the button if the search result is already a friend - $sidebar.find('.btn-connect-friend').hide(); - } - } else { - if (!val.is_friend && val.id !== context.JK.currentUserId) { - $('div[user-id=' + val.id + ']').find('.btn-connect-friend').click(sendFriendRequest); - } else { - $('div[user-id=' + val.id + ']').find('.btn-connect-friend').hide(); - } - } - resultDivVisibility(val, isSidebar); - }); - - } else if (response.search_type === 'bands') { - resultCount = response.bands.length; - template_name = isSidebar ? "#template-bands-sidebar-search-result" : "#template-bands-search-result"; - $.each(response.bands, function(index, val) { - // fill in template for Connect pre-click - var searchResultHtml = context.JK.fillTemplate($(template_name).html(), { - bandId: val.id, - avatar_url: context.JK.resolveAvatarUrl(val.photo_url), - band_url: val.website, - bandName: val.name, - location: val.location - }); - selector = isSidebar ? '#sidebar-search-results' : '#search-results'; - $(selector).append(searchResultHtml); - resultDivVisibility(val, isSidebar); - }); - - } else if (response.search_type === 'fans') { - resultCount = response.fans.length; - template_name = isSidebar ? "#template-fans-sidebar-search-result" : "#template-fans-search-result"; - $.each(response.fans, function(index, val) { - // fill in template for Connect pre-click - var searchResultHtml = context.JK.fillTemplate($(template_name).html(), { - userId: val.id, - avatar_url: context.JK.resolveAvatarUrl(val.photo_url), - profile_url: "/client#/profile/" + val.id, - userName: val.name, - location: val.location - }); - selector = isSidebar ? '#sidebar-search-results' : '#search-results'; - $(selector).append(searchResultHtml); - resultDivVisibility(val, isSidebar); - }); + else { + // hide the button if the search result is already a friend + $sidebar.find('.btn-connect-friend').hide(); } - if (isSidebar) { - // show header - $('#sidebar-search-header').show(); - // hide panels - $('[layout-panel="contents"]').hide(); - $('[layout-panel="contents"]').css({"height": "1px"}); - // resize search results area - $('#sidebar-search-results').height(context.JK.Sidebar.getHeight() + 'px'); - } else { - $('#result-count').html(resultCount); - if (resultCount === 1) { - $('#result-count').append(" Result for: "); - } else { - $('#result-count').append(" Results for: "); - } - } - }; - - function friendRequestCallbackSidebar(userId) { - // toggle the pre-click and post-click divs - $('div[layout=sidebar] div[user-id=' + userId + '].sidebar-search-connected').show(); - $('div[layout=sidebar] div[user-id=' + userId + '].sidebar-search-result').hide(); - } - - function friendRequestCallbackSearchResults(userId) { - // toggle the pre-click and post-click divs - $('div[user-id=' + userId + '].search-connected').show(); - $('div[user-id=' + userId + '].search-result').hide(); - } - - function sendFriendRequest(evt) { - evt.stopPropagation(); - var userId = $(this).parent().attr('user-id'); - if ($(this).closest('#sidebar-search-results')) { - context.JK.sendFriendRequest(app, userId, friendRequestCallbackSidebar); - } else { - context.JK.sendFriendRequest(app, userId, friendRequestCallbackSearchResults); - } - } - - function getInstrumentHtml(instruments) { - var instrumentLogoHtml = ''; - if (instruments !== undefined) { - for (var i=0; i < instruments.length; i++) { - var inst = '../assets/content/icon_instrument_default24.png'; - if (instruments[i].instrument_id in instrument_logo_map) { - inst = instrument_logo_map[instruments[i].instrument_id]; - instrumentLogoHtml += ' '; - } - } + } + else { + if (!val.is_friend && val.id !== context.JK.currentUserId) { + $('div[user-id=' + val.id + ']').find('.btn-connect-friend').click(sendFriendRequest); } - return instrumentLogoHtml; + else { + $('div[user-id=' + val.id + ']').find('.btn-connect-friend').hide(); + } + } + resultDivVisibility(val, isSidebar); + }); + } + + else if (response.search_type === 'bands') { + resultCount = response.bands.length; + template_name = isSidebar ? "#template-bands-sidebar-search-result" : "#template-bands-search-result"; + + $.each(response.bands, function(index, val) { + // fill in template for Connect pre-click + var searchResultHtml = context.JK.fillTemplate($(template_name).html(), { + bandId: val.id, + avatar_url: context.JK.resolveAvatarUrl(val.photo_url), + band_url: val.website, + bandName: val.name, + location: val.location + }); + + selector = isSidebar ? '#sidebar-search-results' : '#search-results'; + $(selector).append(searchResultHtml); + resultDivVisibility(val, isSidebar); + }); + } + + else if (response.search_type === 'fans') { + resultCount = response.fans.length; + template_name = isSidebar ? "#template-fans-sidebar-search-result" : "#template-fans-search-result"; + + $.each(response.fans, function(index, val) { + // fill in template for Connect pre-click + var searchResultHtml = context.JK.fillTemplate($(template_name).html(), { + userId: val.id, + avatar_url: context.JK.resolveAvatarUrl(val.photo_url), + profile_url: "/client#/profile/" + val.id, + userName: val.name, + location: val.location + }); + selector = isSidebar ? '#sidebar-search-results' : '#search-results'; + $(selector).append(searchResultHtml); + resultDivVisibility(val, isSidebar); + }); + } + + if (isSidebar) { + // show header + $('#sidebar-search-header').show(); + // hide panels + $('[layout-panel="contents"]').hide(); + $('[layout-panel="contents"]').css({"height": "1px"}); + // resize search results area + $('#sidebar-search-results').height(context.JK.Sidebar.getHeight() + 'px'); + } + else { + $('#result-count').html(resultCount); + if (resultCount === 1) { + $('#result-count').append(" Result for: "); } - - function events() { - $('#searchForm').submit(search); + else { + $('#result-count').append(" Results for: "); } + } + } - this.initialize = function() { - var screenBindings = { - 'beforeShow': beforeShow, - 'afterShow': afterShow - }; - app.bindScreen('searchResults', screenBindings); - events(); - initializeSearchNavLinks(); - }; + function friendRequestCallbackSidebar(userId) { + // toggle the pre-click and post-click divs + $('div[layout=sidebar] div[user-id=' + userId + '].sidebar-search-connected').show(); + $('div[layout=sidebar] div[user-id=' + userId + '].sidebar-search-result').hide(); + } + function friendRequestCallbackSearchResults(userId) { + // toggle the pre-click and post-click divs + $('div[user-id=' + userId + '].search-connected').show(); + $('div[user-id=' + userId + '].search-result').hide(); + } + + function sendFriendRequest(evt) { + evt.stopPropagation(); + var userId = $(this).parent().attr('user-id'); + + if ($(this).closest('#sidebar-search-results')) { + context.JK.sendFriendRequest(app, userId, friendRequestCallbackSidebar); + } + else { + context.JK.sendFriendRequest(app, userId, friendRequestCallbackSearchResults); + } + } + + function getInstrumentHtml(instruments) { + var instrumentLogoHtml = ''; + if (instruments !== undefined) { + for (var i=0; i < instruments.length; i++) { + var inst = '../assets/content/icon_instrument_default24.png'; + if (instruments[i].instrument_id in instrument_logo_map) { + inst = instrument_logo_map[instruments[i].instrument_id]; + instrumentLogoHtml += ' '; + } + } + } + return instrumentLogoHtml; + } + + function events() { + $('#searchForm').submit(search); + } + + this.initialize = function() { + var screenBindings = { + 'beforeShow': beforeShow, + 'afterShow': afterShow + }; + + app.bindScreen('searchResults', screenBindings); + events(); + initializeSearchNavLinks(); }; - + } })(window,jQuery); \ No newline at end of file diff --git a/web/app/assets/javascripts/sidebar.js b/web/app/assets/javascripts/sidebar.js index fd95d09e0..32e91cea1 100644 --- a/web/app/assets/javascripts/sidebar.js +++ b/web/app/assets/javascripts/sidebar.js @@ -4,996 +4,999 @@ context.JK = context.JK || {}; context.JK.Sidebar = function(app) { - var logger = context.JK.logger; - var friends = []; - var rest = context.JK.Rest(); - var invitationDialog = null; + var logger = context.JK.logger; + var friends = []; + var rest = context.JK.Rest(); + var invitationDialog = null; - function initializeSearchPanel() { - $('#search_text_type').change(function() { - searchForInput(); - context.JK.SearchResultScreen.searchTypeSelection($('#search_text_type').val()); - }); - } + function initializeSearchPanel() { + $('#search_text_type').change(function() { + searchForInput(); + context.JK.SearchResultScreen.searchTypeSelection($('#search_text_type').val()); + }); + } - context.JK.Sidebar.searchTypeSelection = function(typeSelection) { - $('#search_text_type').val(typeSelection); - emptySearchResults(); - } + context.JK.Sidebar.searchTypeSelection = function(typeSelection) { + $('#search_text_type').val(typeSelection); + emptySearchResults(); + } - function initializeFriendsPanel() { + function initializeFriendsPanel() { - ///////////////////////////////////////////////////////////// - // THIS IS TEST CODE TO GENERATE BACK TO BACK NOTIFICATIONS - // app.notify({ - // "title": "TEST 1", - // "text": "Test 1", - // "icon_url": context.JK.resolveAvatarUrl("") - // }); + ///////////////////////////////////////////////////////////// + // THIS IS TEST CODE TO GENERATE BACK TO BACK NOTIFICATIONS + // app.notify({ + // "title": "TEST 1", + // "text": "Test 1", + // "icon_url": context.JK.resolveAvatarUrl("") + // }); - // app.notify({ - // "title": "TEST 2", - // "text": "Test 2", - // "icon_url": context.JK.resolveAvatarUrl("") - // }); + // app.notify({ + // "title": "TEST 2", + // "text": "Test 2", + // "icon_url": context.JK.resolveAvatarUrl("") + // }); - // app.notify({ - // "title": "TEST 3", - // "text": "Test 3", - // "icon_url": context.JK.resolveAvatarUrl("") - // }); - ///////////////////////////////////////////////////////////// + // app.notify({ + // "title": "TEST 3", + // "text": "Test 3", + // "icon_url": context.JK.resolveAvatarUrl("") + // }); + ///////////////////////////////////////////////////////////// - $('#sidebar-search-header').hide(); + $('#sidebar-search-header').hide(); - var url = "/api/users/" + context.JK.currentUserId + "/friends" - $.ajax({ - type: "GET", - dataType: "json", - contentType: 'application/json', - url: url, - processData: false, - success: function(response) { + var url = "/api/users/" + context.JK.currentUserId + "/friends" + $.ajax({ + type: "GET", + dataType: "json", + contentType: 'application/json', + url: url, + processData: false, + success: function(response) { + friends = response; + updateFriendList(response); - friends = response; - updateFriendList(response); + // set friend count + $('#sidebar-friend-count').html(response.length); + }, + error: app.ajaxError + }); - // set friend count - $('#sidebar-friend-count').html(response.length); - }, - error: app.ajaxError - }); + return false; + } - return false; + function updateFriendList(response) { + $('#sidebar-friend-list li:not(.invite-friend-row)').remove(); + + // show online friends first (sort by first name within online/offline groups) + response.sort(function(a, b) { + + var a_online = a.online; + var b_online = b.online; + + var a_firstname = a.first_name.toLowerCase(); + var b_firstname = b.first_name.toLowerCase(); + + if (b_online != a_online) { + if (b_online < a_online) return -1; + if (b_online > a_online) return 1; + return 0; + } + + if (a_firstname < b_firstname) return -1; + if (a_firstname > b_firstname) return 1; + return 0; + }); + + $.each(response, function(index, val) { + + var css = val.online ? '' : 'offline'; + + friends[val.id] = val; + + // fill in template for Connect pre-click + var template = $('#template-friend-panel').html(); + var searchResultHtml = context.JK.fillTemplate(template, { + userId: val.id, + cssClass: css, + avatar_url: context.JK.resolveAvatarUrl(val.photo_url), + userName: val.name, + status: val.online ? 'Available' : 'Offline', + extra_info: '', + hoverAction: val.musician ? "musician" : "fan", + info_image_url: '' + }); + + $('#sidebar-friend-list li.invite-friend-row').before(searchResultHtml); + }); + + context.JK.bindHoverEvents(); + } + + function initializeNotificationsPanel() { + // retrieve pending notifications for this user + var url = "/api/users/" + context.JK.currentUserId + "/notifications" + $.ajax({ + type: "GET", + dataType: "json", + contentType: 'application/json', + url: url, + processData: false, + success: function(response) { + + updateNotificationList(response); + + // set notification count + $('#sidebar-notification-count').html(response.length); + }, + error: app.ajaxError + }); + } + + function updateNotificationList(response) { + $('#sidebar-notification-list').empty(); + + $.each(response, function(index, val) { + + // fill in template for Connect pre-click + var template = $('#template-notification-panel').html(); + var notificationHtml = context.JK.fillTemplate(template, { + notificationId: val.notification_id, + avatar_url: context.JK.resolveAvatarUrl(val.photo_url), + text: val.formatted_msg, + date: context.JK.formatDateTime(val.created_at) + }); + + $('#sidebar-notification-list').append(notificationHtml); + + // val.description contains the notification record's description value from the DB (i.e., type) + initializeActions(val, val.description); + }); + } + + function initializeActions(payload, type) { + + var $notification = $('li[notification-id=' + payload.notification_id + ']'); + + // wire up "x" button to delete notification + $notification.find('#img-delete-notification').click(deleteNotificationHandler); + + // customize action buttons based on notification type + if (type === context.JK.MessageType.FRIEND_REQUEST) { + var $action_btn = $notification.find('#btn-notification-action'); + $action_btn.text('ACCEPT'); + $action_btn.click(function() { + acceptFriendRequest({ "friend_request_id": payload.friend_request_id, "notification_id": payload.notification_id }); + }); + } + + else if (type === context.JK.MessageType.FRIEND_REQUEST_ACCEPTED) { + $notification.find('#div-actions').hide(); + } + + else if (type === context.JK.MessageType.NEW_USER_FOLLOWER || type === context.JK.MessageType.NEW_BAND_FOLLOWER) { + $notification.find('#div-actions').hide(); + } + + else if (type === context.JK.MessageType.SESSION_INVITATION) { + var $action_btn = $notification.find('#btn-notification-action'); + $action_btn.text('JOIN'); + $action_btn.click(function() { + openTerms({ "session_id": payload.session_id, "notification_id": payload.notification_id }); + }); + } + + else if (type === context.JK.MessageType.JOIN_REQUEST) { + var $action_btn = $notification.find('#btn-notification-action'); + $action_btn.text('APPROVE'); + $action_btn.click(function() { + approveJoinRequest({ "join_request_id": payload.join_request_id, "notification_id": payload.notification_id }); + }); + } + + else if (type === context.JK.MessageType.JOIN_REQUEST_APPROVED) { + var $action_btn = $notification.find('#btn-notification-action'); + $action_btn.text('JOIN'); + $action_btn.click(function() { + openTerms({ "session_id": payload.session_id, "notification_id": payload.notification_id }); + }); + } + + else if (type === context.JK.MessageType.JOIN_REQUEST_REJECTED) { + $notification.find('#div-actions').hide(); + } + + else if (type === context.JK.MessageType.MUSICIAN_SESSION_JOIN || type === context.JK.MessageType.BAND_SESSION_JOIN) { + var $action_btn = $notification.find('#btn-notification-action'); + $action_btn.text('LISTEN'); + $action_btn.click(function() { + listenToSession({ "session_id": payload.session_id, "notification_id": payload.notification_id }); + }); + } + + else if (type === context.JK.MessageType.MUSICIAN_RECORDING_SAVED || type === context.JK.MessageType.BAND_RECORDING_SAVED) { + var $action_btn = $notification.find('#btn-notification-action'); + $action_btn.text('LISTEN'); + $action_btn.click(function() { + listenToRecording({ "recording_id": payload.recording_id, "notification_id": payload.notification_id }); + }); + } + + else if (type === context.JK.MessageType.RECORDING_MASTER_MIX_COMPLETE) { + $notification.find('#div-actions').hide(); + context.jamClient.OnDownloadAvailable(); // poke backend, letting it know a download is available + } + + else if (type === context.JK.MessageType.BAND_INVITATION) { + var $action_btn = $notification.find('#btn-notification-action'); + $action_btn.text('ACCEPT'); + $action_btn.click(function() { + acceptBandInvitation({ "band_invitation_id": payload.band_invitation_id, "band_id": payload.band_id, "notification_id": payload.notification_id }); + }); + } + else if (type === context.JK.MessageType.BAND_INVITATION_ACCEPTED) { + $notification.find('#div-actions').hide(); + } + } + + function deleteNotificationHandler(evt) { + evt.stopPropagation(); + var notificationId = $(this).attr('notification-id'); + deleteNotification(notificationId); + } + + function deleteNotification(notificationId) { + var url = "/api/users/" + context.JK.currentUserId + "/notifications/" + notificationId; + $.ajax({ + type: "DELETE", + dataType: "json", + contentType: 'application/json', + url: url, + processData: false, + success: function(response) { + $('li[notification-id=' + notificationId + ']').hide(); + decrementNotificationCount(); + }, + error: app.ajaxError + }); + } + + function initializeChatPanel() { + } + + function search(query) { + logger.debug('query=' + query); + if (query !== '') { + context.JK.search(query, app, context.JK.SearchResultScreen.onSearchSuccess); + } + } + + context.JK.Sidebar.getHeight = function() { + // TODO: refactor this - copied from layout.js + var sidebarHeight = $(context).height() - 75 - 2 * 60 + $('[layout-sidebar-expander]').height(); + var combinedHeaderHeight = $('[layout-panel="contents"]').length * 36; + var searchHeight = $('.sidebar .search').first().height(); + var expanderHeight = $('[layout-sidebar-expander]').height(); + var expandedPanelHeight = sidebarHeight - (combinedHeaderHeight + expanderHeight + searchHeight); + return expandedPanelHeight; + } + + function showFriendsPanel() { + + var $expandedPanelContents = $('[layout-id="panelFriends"] [layout-panel="contents"]'); + var expandedPanelHeight = context.JK.Sidebar.getHeight(); + + // hide all other contents + $('[layout-panel="contents"]').hide(); + $('[layout-panel="contents"]').css({"height": "1px"}); + + // show the appropriate contens + $expandedPanelContents.show(); + $expandedPanelContents.animate({"height": expandedPanelHeight + "px"}, 400); + } + + function hideSearchResults() { + emptySearchResults(); + $('#search-input').val(''); + $('#sidebar-search-header').hide(); + showFriendsPanel(); + } + + function emptySearchResults() { + $('#sidebar-search-results').empty(); + $('#sidebar-search-results').height('0px'); + } + + function incrementNotificationCount() { + var count = parseInt($('#sidebar-notification-count').html()); + $('#sidebar-notification-count').html(count + 1); + } + + function decrementNotificationCount() { + var count = parseInt($('#sidebar-notification-count').html()); + if (count === 0) { + $('#sidebar-notification-count').html(0); + } + else { + $('#sidebar-notification-count').html(count - 1); + } + } + + // default handler for incoming notification + function handleNotification(payload, type) { + var sidebarText; + sidebarText = payload.msg; + + // increment displayed notification count + incrementNotificationCount(); + + // add notification to sidebar + var template = $("#template-notification-panel").html(); + var notificationHtml = context.JK.fillTemplate(template, { + notificationId: payload.notification_id, + avatar_url: context.JK.resolveAvatarUrl(payload.photo_url), + text: sidebarText, + date: context.JK.formatDateTime(payload.created_at) + }); + + $('#sidebar-notification-list').prepend(notificationHtml); + + initializeActions(payload, type); + } + + var delay = (function(){ + var timer = 0; + return function(callback, ms) { + clearTimeout(timer); + timer = setTimeout(callback, ms); + }; + })(); + + + function inviteHoverIn() { + $('.invitation-button-holder').slideDown(); + } + + function inviteHoverOut() { + $('.invitation-button-holder').slideUp(); + } + + function searchForInput() { + var query = $('#search-input').val(); + // logger.debug("query=" + query); + if (query === '') { + return hideSearchResults(); } + + if (query.length > 2) { + // FIXME: this is in searchResults + $('#query').html(query); + query += '&search_text_type='+$('#search_text_type').val(); + emptySearchResults(); + search(query); + } + } - function updateFriendList(response) { - $('#sidebar-friend-list li:not(.invite-friend-row)').remove(); + function events() { + $('#search-input').keyup(function(evt) { + delay(function() { + // ENTER KEY + if (evt.which === 13) { + return hideSearchResults(); + } + // ESCAPE KEY + if (evt.which === 27) { + return hideSearchResults(); + } + searchForInput(); + }, 500); + }); - // show online friends first (sort by first name within online/offline groups) - response.sort(function(a, b) { + $('#sidebar-search-expand').click(function(evt) { + $('#searchForm').submit(); + hideSearchResults(); + }); - var a_online = a.online; - var b_online = b.online; + $('.sidebar .invite-friend-row').hoverIntent(inviteHoverIn, inviteHoverOut); - var a_firstname = a.first_name.toLowerCase(); - var b_firstname = b.first_name.toLowerCase(); + // friend notifications + registerFriendUpdate(); + registerFriendRequest(); + registerFriendRequestAccepted(); + registerNewUserFollower(); + registerNewBandFollower(); - if (b_online != a_online) { - if (b_online < a_online) return -1; - if (b_online > a_online) return 1; - return 0; + // session invitations + registerSessionInvitation(); + registerSessionEnded(); + registerJoinRequest(); + registerJoinRequestApproved(); + registerJoinRequestRejected(); + registerSessionJoin(); + registerSessionDepart(); + registerMusicianSessionJoin(); + registerBandSessionJoin(); + + // recording notifications + registerMusicianRecordingSaved(); + registerBandRecordingSaved(); + registerRecordingStarted(); + registerRecordingEnded(); + registerRecordingMasterMixComplete(); + + // band notifications + registerBandInvitation(); + registerBandInvitationAccepted(); + + // broadcast notifications + registerSourceUpRequested(); + registerSourceDownRequested(); + registerSourceUp(); + registerSourceDown(); + + // watch for Invite More Users events + $('#sidebar-div .btn-email-invitation').click(function() { + invitationDialog.showEmailDialog(); + return false; + }); + + $('#sidebar-div .btn-gmail-invitation').click(function() { + invitationDialog.showGoogleDialog(); + return false; + }); + + $('#sidebar-div .btn-facebook-invitation').click(function(evt) { + invitationDialog.showFacebookDialog(evt); + return false; + }); + } + + function registerFriendUpdate() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.FRIEND_UPDATE, function(header, payload) { + logger.debug("Handling FRIEND_UPDATE msg " + JSON.stringify(payload)); + + friends[payload.user_id].online = payload.online; + updateFriendList(friends); + + var online_text = payload.online ? "online" : "offline"; + app.notify({ + "title": "Friend is now " + online_text, + "text": payload.msg, + "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) + }); + }); + } + + function registerFriendRequest() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.FRIEND_REQUEST, function(header, payload) { + logger.debug("Handling FRIEND_REQUEST msg " + JSON.stringify(payload)); + + handleNotification(payload, header.type); + + app.notify({ + "title": "New Friend Request", + "text": payload.msg, + "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) + }, { + "ok_text": "ACCEPT", + "ok_callback": acceptFriendRequest, + "ok_callback_args": { "friend_request_id": payload.friend_request_id, "notification_id": payload.notification_id } + }); + }); + } + + function acceptFriendRequest(args) { + + rest.acceptFriendRequest({ + status : 'accept', + friend_request_id : args.friend_request_id + }).done(function(response) { + deleteNotification(args.notification_id); // delete notification corresponding to this friend request + initializeFriendsPanel(); // refresh friends panel when request is accepted + }).error(app.ajaxError); + } + + function registerFriendRequestAccepted() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.FRIEND_REQUEST_ACCEPTED, function(header, payload) { + logger.debug("Handling FRIEND_REQUEST_ACCEPTED msg " + JSON.stringify(payload)); + + handleNotification(payload, header.type); + + initializeFriendsPanel(); + + app.notify({ + "title": "Friend Request Accepted", + "text": payload.msg, + "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) + }); + }); + } + + function registerNewUserFollower() { + + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.NEW_USER_FOLLOWER, function(header, payload) { + logger.debug("Handling NEW_USER_FOLLOWER msg " + JSON.stringify(payload)); + + handleNotification(payload, header.type); + + app.notify({ + "title": "New Follower", + "text": payload.msg, + "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) + }); + }); + } + + function registerNewBandFollower() { + + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.NEW_BAND_FOLLOWER, function(header, payload) { + logger.debug("Handling NEW_BAND_FOLLOWER msg " + JSON.stringify(payload)); + + handleNotification(payload, header.type); + + app.notify({ + "title": "New Band Follower", + "text": payload.msg, + "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) + }); + }); + + } + + function registerSessionInvitation() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.SESSION_INVITATION, function(header, payload) { + logger.debug("Handling SESSION_INVITATION msg " + JSON.stringify(payload)); + + handleNotification(payload, header.type); + + var participants = []; + rest.getSession(payload.session_id).done(function(response) { + $.each(response.participants, function(index, val) { + logger.debug(val.user.photo_url + "," + val.user.name); + participants.push({"photo_url": val.user.photo_url, "name": val.user.name}); + }); + }).error(app.ajaxError); + + var participantHtml = "You have been invited to join a session with:

"; + participantHtml += ""; + + $.each(participants, function(index, val) { + if (index < 4) { + participantHtml += ""; + } + }); + + participantHtml += "
" + val.name + "
"; + + app.notify({ + "title": "Session Invitation", + "text": participantHtml + }, { + "ok_text": "JOIN SESSION", + "ok_callback": openTerms, + "ok_callback_args": { "session_id": payload.session_id, "notification_id": payload.notification_id } + }); + }); + } + + function openTerms(args) { + var termsDialog = new context.JK.TermsDialog(app, args, onTermsAccepted); + termsDialog.initialize(); + app.layout.showDialog('terms'); + } + + function onTermsAccepted(args) { + deleteNotification(args.notification_id); + context.location = '/client#/session/' + args.session_id; + } + + function registerSessionEnded() { + // TODO: this should clean up all notifications related to this session + } + + function registerJoinRequest() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.JOIN_REQUEST, function(header, payload) { + logger.debug("Handling JOIN_REQUEST msg " + JSON.stringify(payload)); + + handleNotification(payload, header.type); + + app.notify({ + "title": "New Join Request", + "text": payload.msg, + "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) + }, { + "ok_text": "APPROVE", + "ok_callback": approveJoinRequest, + "ok_callback_args": { "join_request_id": payload.join_request_id, "notification_id": payload.notification_id }, + "cancel_text": "REJECT", + "cancel_callback": rejectJoinRequest, + "cancel_callback_args": { "join_request_id": payload.join_request_id, "notification_id": payload.notification_id } + }); + }); + } + + function approveJoinRequest(args) { + rest.updateJoinRequest(args.join_request_id, true) + .done(function(response) { + deleteNotification(args.notification_id); + }).error(app.ajaxError); + } + + function rejectJoinRequest(args) { + rest.updateJoinRequest(args.join_request_id, false) + .done(function(response) { + deleteNotification(args.notification_id); + }).error(app.ajaxError); + } + + function registerJoinRequestApproved() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.JOIN_REQUEST_APPROVED, function(header, payload) { + logger.debug("Handling JOIN_REQUEST_APPROVED msg " + JSON.stringify(payload)); + + handleNotification(payload, header.type); + + app.notify({ + "title": "Join Request Approved", + "text": payload.msg, + "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) + }, { + "ok_text": "JOIN SESSION", + "ok_callback": openTerms, + "ok_callback_args": { "session_id": payload.session_id, "notification_id": payload.notification_id } + }); + }); + } + + function registerJoinRequestRejected() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.JOIN_REQUEST_REJECTED, function(header, payload) { + logger.debug("Handling JOIN_REQUEST_REJECTED msg " + JSON.stringify(payload)); + + handleNotification(payload, header.type); + + app.notify({ + "title": "Join Request Rejected", + "text": payload.msg, + "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) + }); + }); + } + + function registerSessionJoin() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.SESSION_JOIN, function(header, payload) { + logger.debug("Handling SESSION_JOIN msg " + JSON.stringify(payload)); + + // display notification + app.notify({ + "title": "New Session Participant", + "text": payload.msg, + "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) + }); + }); + } + + function registerSessionDepart() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.SESSION_DEPART, function(header, payload) { + logger.debug("Handling SESSION_DEPART msg " + JSON.stringify(payload)); + + var recordingId = payload.recording_id; + + if(recordingId&& context.JK.CurrentSessionModel.recordingModel.isRecording(recordingId)) { + context.JK.CurrentSessionModel.recordingModel.onServerStopRecording(recordingId); + /**app.notify({ + "title": "Recording Stopped", + "text": payload.username + " has left the session.", + "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) + }); */ + } + else { + app.notify({ + "title": "Musician Left Session", + "text": payload.msg, + "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) + }); + } + }); + } + + function registerMusicianSessionJoin() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.MUSICIAN_SESSION_JOIN, function(header, payload) { + logger.debug("Handling MUSICIAN_SESSION_JOIN msg " + JSON.stringify(payload)); + + handleNotification(payload, header.type); + + app.notify({ + "title": "Musician Joined Session", + "text": payload.msg, + "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) + }, { + "ok_text": "LISTEN", + "ok_callback": listenToSession, + "ok_callback_args": { + "session_id": payload.session_id + } + }); + }); + } + + function registerBandSessionJoin() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.BAND_SESSION_JOIN, function(header, payload) { + logger.debug("Handling BAND_SESSION_JOIN msg " + JSON.stringify(payload)); + + handleNotification(payload, header.type); + + // TODO: add LISTEN button linking to session + app.notify({ + "title": "Band Joined Session", + "text": payload.msg, + "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) + }, { + "ok_text": "LISTEN", + "ok_callback": listenToSession, + "ok_callback_args": { + "session_id": payload.session_id + } + }); + }); + } + + function listenToSession(args) { + deleteNotification(args.notification_id); + context.location = '/client#/session/' + args.session_id; + } + + function registerMusicianRecordingSaved() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.MUSICIAN_RECORDING_SAVED, function(header, payload) { + logger.debug("Handling MUSICIAN_RECORDING_SAVED msg " + JSON.stringify(payload)); + + handleNotification(payload, header.type); + + app.notify({ + "title": "Musician Recording Saved", + "text": payload.msg, + "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) + }, { + "ok_text": "LISTEN", + "ok_callback": listenToRecording, + "ok_callback_args": { + "recording_id": payload.recording_id + } + }); + }); + + } + + function registerBandRecordingSaved() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.BAND_RECORDING_SAVED, function(header, payload) { + logger.debug("Handling BAND_RECORDING_SAVED msg " + JSON.stringify(payload)); + + handleNotification(payload, header.type); + + app.notify({ + "title": "Band Recording Saved", + "text": payload.msg, + "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) + }, { + "ok_text": "LISTEN", + "ok_callback": listenToRecording, + "ok_callback_args": { + "recording_id": payload.recording_id + } + }); + }); + } + + function listenToRecording(args) { + deleteNotification(args.notification_id); + context.location = '/client#/recording/' + args.recording_id; + } + + function registerRecordingStarted() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.RECORDING_STARTED, function(header, payload) { + logger.debug("Handling RECORDING_STARTED msg " + JSON.stringify(payload)); + + app.notify({ + "title": "Recording Started", + "text": payload.msg, + "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) + }); + }); + } + + function registerRecordingEnded() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.RECORDING_ENDED, function(header, payload) { + logger.debug("Handling RECORDING_ENDED msg " + JSON.stringify(payload)); + + app.notify({ + "title": "Recording Ended", + "text": payload.msg, + "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) + }); + }); + } + + function registerRecordingMasterMixComplete() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.RECORDING_MASTER_MIX_COMPLETE, function(header, payload) { + logger.debug("Handling RECORDING_MASTER_MIX_COMPLETE msg " + JSON.stringify(payload)); + + handleNotification(payload, header.type); + + app.notify({ + "title": "Recording Master Mix Complete", + "text": payload.msg, + "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) + }, { + "ok_text": "SHARE", + "ok_callback": shareRecording, + "ok_callback_args": { + "recording_id": payload.recording_id + } + }); + }); + } + + function shareRecording(args) { + var recordingId = args.recording_id; + } + + function registerBandInvitation() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.BAND_INVITATION, function(header, payload) { + logger.debug("Handling BAND_INVITATION msg " + JSON.stringify(payload)); + + handleNotification(payload, header.type); + + app.notify({ + "title": "Band Invitation", + "text": payload.msg, + "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) + }, { + "ok_text": "ACCEPT", + "ok_callback": acceptBandInvitation, + "ok_callback_args": { + "band_invitation_id": payload.band_invitation_id, + "band_id": payload.band_id, + "notification_id": payload.notification_id + } + }); + }); + } + + function acceptBandInvitation(args) { + rest.updateBandInvitation( + args.band_id, + args.band_invitation_id, + true + ).done(function(response) { + deleteNotification(args.notification_id); // delete notification corresponding to this friend request + }).error(app.ajaxError); + } + + function registerBandInvitationAccepted() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.BAND_INVITATION_ACCEPTED, function(header, payload) { + logger.debug("Handling BAND_INVITATION_ACCEPTED msg " + JSON.stringify(payload)); + + handleNotification(payload, header.type); + + app.notify({ + "title": "Band Invitation Accepted", + "text": payload.msg, + "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) + }); + }); + } + + function registerSourceUpRequested() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.SOURCE_UP_REQUESTED, function(header, payload) { + + logger.debug("Handling SOURCE_UP_REQUESTED msg " + JSON.stringify(payload)); + + var current_session_id = context.JK.CurrentSessionModel.id(); + + if (!current_session_id) { + // we are not in a session + var last_session = context.JK.CurrentSessionModel.getCurrentOrLastSession(); + if(last_session && last_session.id == payload.music_session) { + // the last session we were in was responsible for this message. not that odd at all + logger.debug("SOURCE_UP_REQUESTED came in for session_id" + payload.music_session + ", but was dropped because we have left that session") + } + else { + // this means we aren't in a session, and, what's worse, + // the last session we were in does not match the specified music_session id + throw "SOURCE_UP_REQUESTED came in for session_id:" + payload.music_session + ", but we are not in a session and the last session ID did not match the one specified"; } - - if (a_firstname < b_firstname) return -1; - if (a_firstname > b_firstname) return 1; - return 0; - }); - - $.each(response, function(index, val) { - - var css = val.online ? '' : 'offline'; - - friends[val.id] = val; - - // fill in template for Connect pre-click - var template = $('#template-friend-panel').html(); - var searchResultHtml = context.JK.fillTemplate(template, { - userId: val.id, - cssClass: css, - avatar_url: context.JK.resolveAvatarUrl(val.photo_url), - userName: val.name, - status: val.online ? 'Available' : 'Offline', - extra_info: '', - info_image_url: '' - }); - - $('#sidebar-friend-list li.invite-friend-row').before(searchResultHtml); - }); - } - - function initializeNotificationsPanel() { - // retrieve pending notifications for this user - var url = "/api/users/" + context.JK.currentUserId + "/notifications" - $.ajax({ - type: "GET", - dataType: "json", - contentType: 'application/json', - url: url, - processData: false, - success: function(response) { - - updateNotificationList(response); - - // set notification count - $('#sidebar-notification-count').html(response.length); - }, - error: app.ajaxError - }); - } - - function updateNotificationList(response) { - $('#sidebar-notification-list').empty(); - - $.each(response, function(index, val) { - - // fill in template for Connect pre-click - var template = $('#template-notification-panel').html(); - var notificationHtml = context.JK.fillTemplate(template, { - notificationId: val.notification_id, - avatar_url: context.JK.resolveAvatarUrl(val.photo_url), - text: val.formatted_msg, - date: context.JK.formatDateTime(val.created_at) - }); - - $('#sidebar-notification-list').append(notificationHtml); - - // val.description contains the notification record's description value from the DB (i.e., type) - initializeActions(val, val.description); - }); - } - - function initializeActions(payload, type) { - - var $notification = $('li[notification-id=' + payload.notification_id + ']'); - - // wire up "x" button to delete notification - $notification.find('#img-delete-notification').click(deleteNotificationHandler); - - // customize action buttons based on notification type - if (type === context.JK.MessageType.FRIEND_REQUEST) { - var $action_btn = $notification.find('#btn-notification-action'); - $action_btn.text('ACCEPT'); - $action_btn.click(function() { - acceptFriendRequest({ "friend_request_id": payload.friend_request_id, "notification_id": payload.notification_id }); - }); - } - - else if (type === context.JK.MessageType.FRIEND_REQUEST_ACCEPTED) { - $notification.find('#div-actions').hide(); - } - - else if (type === context.JK.MessageType.NEW_USER_FOLLOWER || type === context.JK.MessageType.NEW_BAND_FOLLOWER) { - $notification.find('#div-actions').hide(); - } - - else if (type === context.JK.MessageType.SESSION_INVITATION) { - var $action_btn = $notification.find('#btn-notification-action'); - $action_btn.text('JOIN'); - $action_btn.click(function() { - openTerms({ "session_id": payload.session_id, "notification_id": payload.notification_id }); - }); - } - - else if (type === context.JK.MessageType.JOIN_REQUEST) { - var $action_btn = $notification.find('#btn-notification-action'); - $action_btn.text('APPROVE'); - $action_btn.click(function() { - approveJoinRequest({ "join_request_id": payload.join_request_id, "notification_id": payload.notification_id }); - }); - } - - else if (type === context.JK.MessageType.JOIN_REQUEST_APPROVED) { - var $action_btn = $notification.find('#btn-notification-action'); - $action_btn.text('JOIN'); - $action_btn.click(function() { - openTerms({ "session_id": payload.session_id, "notification_id": payload.notification_id }); - }); - } - - else if (type === context.JK.MessageType.JOIN_REQUEST_REJECTED) { - $notification.find('#div-actions').hide(); - } - - else if (type === context.JK.MessageType.MUSICIAN_SESSION_JOIN || type === context.JK.MessageType.BAND_SESSION_JOIN) { - var $action_btn = $notification.find('#btn-notification-action'); - $action_btn.text('LISTEN'); - $action_btn.click(function() { - listenToSession({ "session_id": payload.session_id, "notification_id": payload.notification_id }); - }); - } - - else if (type === context.JK.MessageType.MUSICIAN_RECORDING_SAVED || type === context.JK.MessageType.BAND_RECORDING_SAVED) { - var $action_btn = $notification.find('#btn-notification-action'); - $action_btn.text('LISTEN'); - $action_btn.click(function() { - listenToRecording({ "recording_id": payload.recording_id, "notification_id": payload.notification_id }); - }); - } - - else if (type === context.JK.MessageType.RECORDING_MASTER_MIX_COMPLETE) { - $notification.find('#div-actions').hide(); - context.jamClient.OnDownloadAvailable(); // poke backend, letting it know a download is available - } - - else if (type === context.JK.MessageType.BAND_INVITATION) { - var $action_btn = $notification.find('#btn-notification-action'); - $action_btn.text('ACCEPT'); - $action_btn.click(function() { - acceptBandInvitation({ "band_invitation_id": payload.band_invitation_id, "band_id": payload.band_id, "notification_id": payload.notification_id }); - }); - } - else if (type === context.JK.MessageType.BAND_INVITATION_ACCEPTED) { - $notification.find('#div-actions').hide(); - } - } - - function deleteNotificationHandler(evt) { - evt.stopPropagation(); - var notificationId = $(this).attr('notification-id'); - deleteNotification(notificationId); - } - - function deleteNotification(notificationId) { - var url = "/api/users/" + context.JK.currentUserId + "/notifications/" + notificationId; - $.ajax({ - type: "DELETE", - dataType: "json", - contentType: 'application/json', - url: url, - processData: false, - success: function(response) { - $('li[notification-id=' + notificationId + ']').hide(); - decrementNotificationCount(); - }, - error: app.ajaxError - }); - } - - function initializeChatPanel() { - } - - function search(query) { - logger.debug('query=' + query); - if (query !== '') { - context.JK.search(query, app, context.JK.SearchResultScreen.onSearchSuccess); - } - } - - context.JK.Sidebar.getHeight = function() { - // TODO: refactor this - copied from layout.js - var sidebarHeight = $(context).height() - 75 - 2 * 60 + $('[layout-sidebar-expander]').height(); - var combinedHeaderHeight = $('[layout-panel="contents"]').length * 36; - var searchHeight = $('.sidebar .search').first().height(); - var expanderHeight = $('[layout-sidebar-expander]').height(); - var expandedPanelHeight = sidebarHeight - (combinedHeaderHeight + expanderHeight + searchHeight); - return expandedPanelHeight; - } - - function showFriendsPanel() { - - var $expandedPanelContents = $('[layout-id="panelFriends"] [layout-panel="contents"]'); - var expandedPanelHeight = context.JK.Sidebar.getHeight(); - - // hide all other contents - $('[layout-panel="contents"]').hide(); - $('[layout-panel="contents"]').css({"height": "1px"}); - - // show the appropriate contens - $expandedPanelContents.show(); - $expandedPanelContents.animate({"height": expandedPanelHeight + "px"}, 400); - } - - function hideSearchResults() { - emptySearchResults(); - $('#search-input').val(''); - $('#sidebar-search-header').hide(); - showFriendsPanel(); - } - - function emptySearchResults() { - $('#sidebar-search-results').empty(); - $('#sidebar-search-results').height('0px'); - } - - function incrementNotificationCount() { - var count = parseInt($('#sidebar-notification-count').html()); - $('#sidebar-notification-count').html(count + 1); - } - - function decrementNotificationCount() { - var count = parseInt($('#sidebar-notification-count').html()); - if (count === 0) { - $('#sidebar-notification-count').html(0); } else { - $('#sidebar-notification-count').html(count - 1); - } - } - - // default handler for incoming notification - function handleNotification(payload, type) { - var sidebarText; - sidebarText = payload.msg; - - // increment displayed notification count - incrementNotificationCount(); - - // add notification to sidebar - var template = $("#template-notification-panel").html(); - var notificationHtml = context.JK.fillTemplate(template, { - notificationId: payload.notification_id, - avatar_url: context.JK.resolveAvatarUrl(payload.photo_url), - text: sidebarText, - date: context.JK.formatDateTime(payload.created_at) - }); - - $('#sidebar-notification-list').prepend(notificationHtml); - - initializeActions(payload, type); - } - - var delay = (function(){ - var timer = 0; - return function(callback, ms) { - clearTimeout(timer); - timer = setTimeout(callback, ms); - }; - })(); - - - function inviteHoverIn() { - $('.invitation-button-holder').slideDown(); - } - - function inviteHoverOut() { - $('.invitation-button-holder').slideUp(); - } - - function searchForInput() { - var query = $('#search-input').val(); - // logger.debug("query=" + query); - if (query === '') { - return hideSearchResults(); - } - if (query.length > 2) { - // FIXME: this is in searchResults - $('#query').html(query); - query += '&search_text_type='+$('#search_text_type').val(); - emptySearchResults(); - search(query); - } - } - - function events() { - $('#search-input').keyup(function(evt) { - delay(function() { - // ENTER KEY - if (evt.which === 13) { - return hideSearchResults(); - } - // ESCAPE KEY - if (evt.which === 27) { - return hideSearchResults(); - } - searchForInput(); - }, 500); - }); - - $('#sidebar-search-expand').click(function(evt) { - $('#searchForm').submit(); - hideSearchResults(); - }); - - $('.sidebar .invite-friend-row').hoverIntent(inviteHoverIn, inviteHoverOut); - - // friend notifications - registerFriendUpdate(); - registerFriendRequest(); - registerFriendRequestAccepted(); - registerNewUserFollower(); - registerNewBandFollower(); - - // session invitations - registerSessionInvitation(); - registerSessionEnded(); - registerJoinRequest(); - registerJoinRequestApproved(); - registerJoinRequestRejected(); - registerSessionJoin(); - registerSessionDepart(); - registerMusicianSessionJoin(); - registerBandSessionJoin(); - - // recording notifications - registerMusicianRecordingSaved(); - registerBandRecordingSaved(); - registerRecordingStarted(); - registerRecordingEnded(); - registerRecordingMasterMixComplete(); - - // band notifications - registerBandInvitation(); - registerBandInvitationAccepted(); - - // broadcast notifications - registerSourceUpRequested(); - registerSourceDownRequested(); - registerSourceUp(); - registerSourceDown(); - - // watch for Invite More Users events - $('#sidebar-div .btn-email-invitation').click(function() { - invitationDialog.showEmailDialog(); - return false; - }); - - $('#sidebar-div .btn-gmail-invitation').click(function() { - invitationDialog.showGoogleDialog(); - return false; - }); - - $('#sidebar-div .btn-facebook-invitation').click(function(evt) { - invitationDialog.showFacebookDialog(evt); - return false; - }); - } - - function registerFriendUpdate() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.FRIEND_UPDATE, function(header, payload) { - logger.debug("Handling FRIEND_UPDATE msg " + JSON.stringify(payload)); - - friends[payload.user_id].online = payload.online; - updateFriendList(friends); - - var online_text = payload.online ? "online" : "offline"; - app.notify({ - "title": "Friend is now " + online_text, - "text": payload.msg, - "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) - }); - }); - } - - function registerFriendRequest() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.FRIEND_REQUEST, function(header, payload) { - logger.debug("Handling FRIEND_REQUEST msg " + JSON.stringify(payload)); - - handleNotification(payload, header.type); - - app.notify({ - "title": "New Friend Request", - "text": payload.msg, - "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) - }, { - "ok_text": "ACCEPT", - "ok_callback": acceptFriendRequest, - "ok_callback_args": { "friend_request_id": payload.friend_request_id, "notification_id": payload.notification_id } - }); - }); - } - - function acceptFriendRequest(args) { - - rest.acceptFriendRequest({ - status : 'accept', - friend_request_id : args.friend_request_id - }).done(function(response) { - deleteNotification(args.notification_id); // delete notification corresponding to this friend request - initializeFriendsPanel(); // refresh friends panel when request is accepted - }).error(app.ajaxError); - } - - function registerFriendRequestAccepted() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.FRIEND_REQUEST_ACCEPTED, function(header, payload) { - logger.debug("Handling FRIEND_REQUEST_ACCEPTED msg " + JSON.stringify(payload)); - - handleNotification(payload, header.type); - - initializeFriendsPanel(); - - app.notify({ - "title": "Friend Request Accepted", - "text": payload.msg, - "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) - }); - }); - } - - function registerNewUserFollower() { - - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.NEW_USER_FOLLOWER, function(header, payload) { - logger.debug("Handling NEW_USER_FOLLOWER msg " + JSON.stringify(payload)); - - handleNotification(payload, header.type); - - app.notify({ - "title": "New Follower", - "text": payload.msg, - "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) - }); - }); - } - - function registerNewBandFollower() { - - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.NEW_BAND_FOLLOWER, function(header, payload) { - logger.debug("Handling NEW_BAND_FOLLOWER msg " + JSON.stringify(payload)); - - handleNotification(payload, header.type); - - app.notify({ - "title": "New Band Follower", - "text": payload.msg, - "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) - }); - }); - - } - - function registerSessionInvitation() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.SESSION_INVITATION, function(header, payload) { - logger.debug("Handling SESSION_INVITATION msg " + JSON.stringify(payload)); - - handleNotification(payload, header.type); - - var participants = []; - rest.getSession(payload.session_id).done(function(response) { - $.each(response.participants, function(index, val) { - logger.debug(val.user.photo_url + "," + val.user.name); - participants.push({"photo_url": val.user.photo_url, "name": val.user.name}); - }); - }).error(app.ajaxError); - - var participantHtml = "You have been invited to join a session with:

"; - participantHtml += ""; - - $.each(participants, function(index, val) { - if (index < 4) { - participantHtml += ""; - } - }); - - participantHtml += "
" + val.name + "
"; - - app.notify({ - "title": "Session Invitation", - "text": participantHtml - }, { - "ok_text": "JOIN SESSION", - "ok_callback": openTerms, - "ok_callback_args": { "session_id": payload.session_id, "notification_id": payload.notification_id } - }); - }); - } - - function openTerms(args) { - var termsDialog = new context.JK.TermsDialog(app, args, onTermsAccepted); - termsDialog.initialize(); - app.layout.showDialog('terms'); - } - - function onTermsAccepted(args) { - deleteNotification(args.notification_id); - context.location = '/client#/session/' + args.session_id; - } - - function registerSessionEnded() { - // TODO: this should clean up all notifications related to this session - } - - function registerJoinRequest() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.JOIN_REQUEST, function(header, payload) { - logger.debug("Handling JOIN_REQUEST msg " + JSON.stringify(payload)); - - handleNotification(payload, header.type); - - app.notify({ - "title": "New Join Request", - "text": payload.msg, - "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) - }, { - "ok_text": "APPROVE", - "ok_callback": approveJoinRequest, - "ok_callback_args": { "join_request_id": payload.join_request_id, "notification_id": payload.notification_id }, - "cancel_text": "REJECT", - "cancel_callback": rejectJoinRequest, - "cancel_callback_args": { "join_request_id": payload.join_request_id, "notification_id": payload.notification_id } - }); - }); - } - - function approveJoinRequest(args) { - rest.updateJoinRequest(args.join_request_id, true) - .done(function(response) { - deleteNotification(args.notification_id); - }).error(app.ajaxError); - } - - function rejectJoinRequest(args) { - rest.updateJoinRequest(args.join_request_id, false) - .done(function(response) { - deleteNotification(args.notification_id); - }).error(app.ajaxError); - } - - function registerJoinRequestApproved() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.JOIN_REQUEST_APPROVED, function(header, payload) { - logger.debug("Handling JOIN_REQUEST_APPROVED msg " + JSON.stringify(payload)); - - handleNotification(payload, header.type); - - app.notify({ - "title": "Join Request Approved", - "text": payload.msg, - "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) - }, { - "ok_text": "JOIN SESSION", - "ok_callback": openTerms, - "ok_callback_args": { "session_id": payload.session_id, "notification_id": payload.notification_id } - }); - }); - } - - function registerJoinRequestRejected() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.JOIN_REQUEST_REJECTED, function(header, payload) { - logger.debug("Handling JOIN_REQUEST_REJECTED msg " + JSON.stringify(payload)); - - handleNotification(payload, header.type); - - app.notify({ - "title": "Join Request Rejected", - "text": payload.msg, - "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) - }); - }); - } - - function registerSessionJoin() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.SESSION_JOIN, function(header, payload) { - logger.debug("Handling SESSION_JOIN msg " + JSON.stringify(payload)); - - // display notification - app.notify({ - "title": "New Session Participant", - "text": payload.msg, - "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) - }); - }); - } - - function registerSessionDepart() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.SESSION_DEPART, function(header, payload) { - logger.debug("Handling SESSION_DEPART msg " + JSON.stringify(payload)); - - var recordingId = payload.recording_id; - - if(recordingId&& context.JK.CurrentSessionModel.recordingModel.isRecording(recordingId)) { - context.JK.CurrentSessionModel.recordingModel.onServerStopRecording(recordingId); - /**app.notify({ - "title": "Recording Stopped", - "text": payload.username + " has left the session.", - "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) - }); */ + // we are in a session + if(current_session_id == payload.music_session) { + context.jamClient.SessionLiveBroadcastStart(payload.host, payload.port, payload.mount, + payload.source_user, payload.source_pass, + '', payload.bitrate) } else { - app.notify({ - "title": "Musician Left Session", - "text": payload.msg, - "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) - }); - } - }); - } - - function registerMusicianSessionJoin() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.MUSICIAN_SESSION_JOIN, function(header, payload) { - logger.debug("Handling MUSICIAN_SESSION_JOIN msg " + JSON.stringify(payload)); - - handleNotification(payload, header.type); - - app.notify({ - "title": "Musician Joined Session", - "text": payload.msg, - "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) - }, { - "ok_text": "LISTEN", - "ok_callback": listenToSession, - "ok_callback_args": { - "session_id": payload.session_id - } - }); - }); - } - - function registerBandSessionJoin() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.BAND_SESSION_JOIN, function(header, payload) { - logger.debug("Handling BAND_SESSION_JOIN msg " + JSON.stringify(payload)); - - handleNotification(payload, header.type); - - // TODO: add LISTEN button linking to session - app.notify({ - "title": "Band Joined Session", - "text": payload.msg, - "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) - }, { - "ok_text": "LISTEN", - "ok_callback": listenToSession, - "ok_callback_args": { - "session_id": payload.session_id - } - }); - }); - } - - function listenToSession(args) { - deleteNotification(args.notification_id); - context.location = '/client#/session/' + args.session_id; - } - - function registerMusicianRecordingSaved() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.MUSICIAN_RECORDING_SAVED, function(header, payload) { - logger.debug("Handling MUSICIAN_RECORDING_SAVED msg " + JSON.stringify(payload)); - - handleNotification(payload, header.type); - - app.notify({ - "title": "Musician Recording Saved", - "text": payload.msg, - "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) - }, { - "ok_text": "LISTEN", - "ok_callback": listenToRecording, - "ok_callback_args": { - "recording_id": payload.recording_id - } - }); - }); - - } - - function registerBandRecordingSaved() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.BAND_RECORDING_SAVED, function(header, payload) { - logger.debug("Handling BAND_RECORDING_SAVED msg " + JSON.stringify(payload)); - - handleNotification(payload, header.type); - - app.notify({ - "title": "Band Recording Saved", - "text": payload.msg, - "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) - }, { - "ok_text": "LISTEN", - "ok_callback": listenToRecording, - "ok_callback_args": { - "recording_id": payload.recording_id - } - }); - }); - } - - function listenToRecording(args) { - deleteNotification(args.notification_id); - context.location = '/client#/recording/' + args.recording_id; - } - - function registerRecordingStarted() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.RECORDING_STARTED, function(header, payload) { - logger.debug("Handling RECORDING_STARTED msg " + JSON.stringify(payload)); - - app.notify({ - "title": "Recording Started", - "text": payload.msg, - "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) - }); - }); - } - - function registerRecordingEnded() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.RECORDING_ENDED, function(header, payload) { - logger.debug("Handling RECORDING_ENDED msg " + JSON.stringify(payload)); - - app.notify({ - "title": "Recording Ended", - "text": payload.msg, - "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) - }); - }); - } - - function registerRecordingMasterMixComplete() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.RECORDING_MASTER_MIX_COMPLETE, function(header, payload) { - logger.debug("Handling RECORDING_MASTER_MIX_COMPLETE msg " + JSON.stringify(payload)); - - handleNotification(payload, header.type); - - app.notify({ - "title": "Recording Master Mix Complete", - "text": payload.msg, - "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) - }, { - "ok_text": "SHARE", - "ok_callback": shareRecording, - "ok_callback_args": { - "recording_id": payload.recording_id - } - }); - }); - } - - function shareRecording(args) { - var recordingId = args.recording_id; - } - - function registerBandInvitation() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.BAND_INVITATION, function(header, payload) { - logger.debug("Handling BAND_INVITATION msg " + JSON.stringify(payload)); - - handleNotification(payload, header.type); - - app.notify({ - "title": "Band Invitation", - "text": payload.msg, - "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) - }, { - "ok_text": "ACCEPT", - "ok_callback": acceptBandInvitation, - "ok_callback_args": { - "band_invitation_id": payload.band_invitation_id, - "band_id": payload.band_id, - "notification_id": payload.notification_id - } - }); - }); - } - - function acceptBandInvitation(args) { - rest.updateBandInvitation( - args.band_id, - args.band_invitation_id, - true - ).done(function(response) { - deleteNotification(args.notification_id); // delete notification corresponding to this friend request - }).error(app.ajaxError); - } - - function registerBandInvitationAccepted() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.BAND_INVITATION_ACCEPTED, function(header, payload) { - logger.debug("Handling BAND_INVITATION_ACCEPTED msg " + JSON.stringify(payload)); - - handleNotification(payload, header.type); - - app.notify({ - "title": "Band Invitation Accepted", - "text": payload.msg, - "icon_url": context.JK.resolveAvatarUrl(payload.photo_url) - }); - }); - } - - function registerSourceUpRequested() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.SOURCE_UP_REQUESTED, function(header, payload) { - - logger.debug("Handling SOURCE_UP_REQUESTED msg " + JSON.stringify(payload)); - - var current_session_id = context.JK.CurrentSessionModel.id(); - - if (!current_session_id) { - // we are not in a session var last_session = context.JK.CurrentSessionModel.getCurrentOrLastSession(); if(last_session && last_session.id == payload.music_session) { // the last session we were in was responsible for this message. not that odd at all - logger.debug("SOURCE_UP_REQUESTED came in for session_id" + payload.music_session + ", but was dropped because we have left that session") + logger.debug("SOURCE_UP_REQUESTED came in for session_id" + payload.music_session + ", but was dropped because we have left that session and are in a new one") } else { // this means we aren't in a session, and, what's worse, // the last session we were in does not match the specified music_session id - throw "SOURCE_UP_REQUESTED came in for session_id:" + payload.music_session + ", but we are not in a session and the last session ID did not match the one specified"; + throw "SOURCE_UP_REQUESTED came in for session_id:" + payload.music_session + ", but we are in a session and the last session ID did not match the one specified"; } } + } + }); + } + + function registerSourceDownRequested() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.SOURCE_DOWN_REQUESTED, function(header, payload) { + logger.debug("Handling SOURCE_DOWN_REQUESTED msg " + JSON.stringify(payload)); + var current_session_id = context.JK.CurrentSessionModel.id(); + + if (!current_session_id) { + // we are not in a session + var last_session = context.JK.CurrentSessionModel.getCurrentOrLastSession(); + if(last_session && last_session.id == payload.music_session) { + // the last session we were in was responsible for this message. not that odd at all + logger.debug("SOURCE_DOWN_REQUESTED came in for session_id" + payload.music_session + ", but was dropped because we have left that session") + } else { - // we are in a session - if(current_session_id == payload.music_session) { - context.jamClient.SessionLiveBroadcastStart(payload.host, payload.port, payload.mount, - payload.source_user, payload.source_pass, - '', payload.bitrate) - } - else { - var last_session = context.JK.CurrentSessionModel.getCurrentOrLastSession(); - if(last_session && last_session.id == payload.music_session) { - // the last session we were in was responsible for this message. not that odd at all - logger.debug("SOURCE_UP_REQUESTED came in for session_id" + payload.music_session + ", but was dropped because we have left that session and are in a new one") - } - else { - // this means we aren't in a session, and, what's worse, - // the last session we were in does not match the specified music_session id - throw "SOURCE_UP_REQUESTED came in for session_id:" + payload.music_session + ", but we are in a session and the last session ID did not match the one specified"; - } - } + // this means we aren't in a session, and, what's worse, + // the last session we were in does not match the specified music_session id + throw "SOURCE_DOWN_REQUESTED came in for session_id:" + payload.music_session + ", but we are not in a session and the last session ID did not match the one specified"; } - }); - } - - function registerSourceDownRequested() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.SOURCE_DOWN_REQUESTED, function(header, payload) { - logger.debug("Handling SOURCE_DOWN_REQUESTED msg " + JSON.stringify(payload)); - var current_session_id = context.JK.CurrentSessionModel.id(); - - if (!current_session_id) { - // we are not in a session + } + else { + // we are in a session + if(current_session_id == payload.music_session) { + context.jamClient.SessionLiveBroadcastStop(); + } + else { var last_session = context.JK.CurrentSessionModel.getCurrentOrLastSession(); if(last_session && last_session.id == payload.music_session) { // the last session we were in was responsible for this message. not that odd at all - logger.debug("SOURCE_DOWN_REQUESTED came in for session_id" + payload.music_session + ", but was dropped because we have left that session") + logger.debug("SOURCE_DOWN_REQUESTED came in for session_id" + payload.music_session + ", but was dropped because we have left that session and are in a new one") } else { // this means we aren't in a session, and, what's worse, // the last session we were in does not match the specified music_session id - throw "SOURCE_DOWN_REQUESTED came in for session_id:" + payload.music_session + ", but we are not in a session and the last session ID did not match the one specified"; + throw "SOURCE_DOWN_REQUESTED came in for session_id:" + payload.music_session + ", but we are in a session and the last session ID did not match the one specified"; } } - else { - // we are in a session - if(current_session_id == payload.music_session) { - context.jamClient.SessionLiveBroadcastStop(); - } - else { - var last_session = context.JK.CurrentSessionModel.getCurrentOrLastSession(); - if(last_session && last_session.id == payload.music_session) { - // the last session we were in was responsible for this message. not that odd at all - logger.debug("SOURCE_DOWN_REQUESTED came in for session_id" + payload.music_session + ", but was dropped because we have left that session and are in a new one") - } - else { - // this means we aren't in a session, and, what's worse, - // the last session we were in does not match the specified music_session id - throw "SOURCE_DOWN_REQUESTED came in for session_id:" + payload.music_session + ", but we are in a session and the last session ID did not match the one specified"; - } - } - } - }); - } + } + }); + } - function registerSourceUp() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.SOURCE_UP, function(header, payload) { - logger.debug("Handling SOURCE_UP msg " + JSON.stringify(payload)); + function registerSourceUp() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.SOURCE_UP, function(header, payload) { + logger.debug("Handling SOURCE_UP msg " + JSON.stringify(payload)); - logger.debug("session %o is now being broadcasted", payload.music_session); - app.notify({ - "title": "Now Broadcasting", - "text": "This session is now being broadcasted." - }); - }); - } + logger.debug("session %o is now being broadcasted", payload.music_session); + app.notify({ + "title": "Now Broadcasting", + "text": "This session is now being broadcasted." + }); + }); + } - function registerSourceDown() { - context.JK.JamServer.registerMessageCallback(context.JK.MessageType.SOURCE_DOWN, function(header, payload) { - logger.debug("Handling SOURCE_DOWN msg " + JSON.stringify(payload)); - logger.debug("session %o is no longer being broadcasted", payload.music_session); - app.notify({ - "title": "No Longer Broadcasting", - "text": "This session is no longer being broadcasted." - }); - }); - } + function registerSourceDown() { + context.JK.JamServer.registerMessageCallback(context.JK.MessageType.SOURCE_DOWN, function(header, payload) { + logger.debug("Handling SOURCE_DOWN msg " + JSON.stringify(payload)); + logger.debug("session %o is no longer being broadcasted", payload.music_session); + app.notify({ + "title": "No Longer Broadcasting", + "text": "This session is no longer being broadcasted." + }); + }); + } - this.initialize = function(invitationDialogInstance) { + this.initialize = function(invitationDialogInstance) { events(); - initializeSearchPanel(); + initializeSearchPanel(); initializeFriendsPanel(); initializeChatPanel(); initializeNotificationsPanel(); invitationDialog = invitationDialogInstance; - }; - }; + }; + } })(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 84dc04b0a..0f201e145 100644 --- a/web/app/assets/javascripts/utils.js +++ b/web/app/assets/javascripts/utils.js @@ -164,7 +164,7 @@ // MUSICIAN $("[hoveraction='musician']").hoverIntent({ over: function() { - var bubble = new JK.MusicianHoverBubble($(this).attr('user-id'), $(this).position()); + var bubble = new JK.MusicianHoverBubble($(this).attr('user-id'), $(this).offset()); showBubble(bubble, $(this)); }, out: function() { // this registers for leaving the hoverable element @@ -176,7 +176,7 @@ // FAN $("[hoveraction='fan']").hover( function() { - var bubble = new JK.FanHoverBubble($(this).attr('user-id'), $(this).position()); + var bubble = new JK.FanHoverBubble($(this).attr('user-id'), $(this).offset()); showBubble(bubble, $(this)); }, function() { // this registers for leaving the hoverable element @@ -187,7 +187,7 @@ // BAND $("[hoveraction='band']").hoverIntent({ over: function() { - var bubble = new JK.BandHoverBubble($(this).attr('band-id'), $(this).position()); + var bubble = new JK.BandHoverBubble($(this).attr('band-id'), $(this).offset()); showBubble(bubble, $(this)); }, out: function() { // this registers for leaving the hoverable element @@ -199,7 +199,7 @@ // SESSION $("[hoveraction='session']").hover( function() { - var bubble = new JK.SessionHoverBubble($(this).attr('session-id'), $(this).position()); + var bubble = new JK.SessionHoverBubble($(this).attr('session-id'), $(this).offset()); showBubble(bubble, $(this)); }, function() { // this registers for leaving the hoverable element @@ -210,7 +210,7 @@ // RECORDING $("[hoveraction='recording']").hover( function() { - var bubble = new JK.RecordingHoverBubble($(this).attr('recording-id'), $(this).position()); + var bubble = new JK.RecordingHoverBubble($(this).attr('recording-id'), $(this).offset()); showBubble(bubble, $(this)); }, function() { // this registers for leaving the hoverable element diff --git a/web/app/assets/javascripts/web/web.js b/web/app/assets/javascripts/web/web.js index 6ddfb5acb..c53dabda8 100644 --- a/web/app/assets/javascripts/web/web.js +++ b/web/app/assets/javascripts/web/web.js @@ -11,6 +11,11 @@ //= require web/signupDialog //= require web/signinDialog //= require invitationDialog +//= require hoverMusician +//= require hoverFan +//= require hoverBand +//= require hoverSession +//= require hoverRecording //= require shareDialog //= require layout //= require user_dropdown diff --git a/web/app/assets/stylesheets/client/hoverBubble.css.scss b/web/app/assets/stylesheets/client/hoverBubble.css.scss index 761ea0258..d86b87595 100644 --- a/web/app/assets/stylesheets/client/hoverBubble.css.scss +++ b/web/app/assets/stylesheets/client/hoverBubble.css.scss @@ -50,4 +50,23 @@ strong { .musicians a { color:#fff; text-decoration:none; +} + +.avatar-tiny { + float:left; + padding:1px; + width:24px; + height:24px; + background-color:#ed3618; + -webkit-border-radius:12px; + -moz-border-radius:12px; + border-radius:12px; +} + +.avatar-tiny img { + width: 24px; + height: 24px; + -webkit-border-radius:12px; + -moz-border-radius:12px; + border-radius:12px; } \ No newline at end of file diff --git a/web/app/views/api_users/friend_index.rabl b/web/app/views/api_users/friend_index.rabl index 40eb8fd7c..5c227c971 100644 --- a/web/app/views/api_users/friend_index.rabl +++ b/web/app/views/api_users/friend_index.rabl @@ -1,3 +1,3 @@ object @user.friends -attributes :id, :first_name, :last_name, :name, :location, :city, :state, :country, :email, :online, :photo_url \ No newline at end of file +attributes :id, :first_name, :last_name, :name, :location, :city, :state, :country, :musician, :email, :online, :photo_url \ No newline at end of file diff --git a/web/app/views/api_users/show.rabl b/web/app/views/api_users/show.rabl index 45e28fb9b..7e7f1b3a1 100644 --- a/web/app/views/api_users/show.rabl +++ b/web/app/views/api_users/show.rabl @@ -21,37 +21,27 @@ elsif current_user end end -unless @user.friends.blank? - child :friends => :friends do - attributes :id, :first_name, :last_name, :name, :online, :photo_url +child :friends => :friends do + attributes :id, :first_name, :last_name, :name, :online, :photo_url +end + +child :followings => :followings do + attributes :id, :first_name, :last_name, :name, :online, :photo_url +end + +child :band_musicians => :bands do + attributes :id, :name, :admin, :photo_url, :logo_url + + child :genres => :genres do + attributes :id, :description + #partial('api_genres/index', :object => @user.bands.genres) end end -unless @user.followings.blank? - child :followings => :followings do - attributes :id, :first_name, :last_name, :name, :online, :photo_url - end +child :musician_instruments => :instruments do + attributes :description, :proficiency_level, :priority, :instrument_id end -unless @user.bands.blank? - child :band_musicians => :bands do - attributes :id, :name, :admin, :photo_url, :logo_url - - child :genres => :genres do - attributes :id, :description - #partial('api_genres/index', :object => @user.bands.genres) - end - end -end - -unless @user.instruments.blank? - child :musician_instruments => :instruments do - attributes :description, :proficiency_level, :priority, :instrument_id - end -end - -unless @user.music_sessions.blank? - child :music_sessions => :sessions do - attributes :id, :description, :musician_access, :approval_required, :fan_access - end +child :music_sessions => :sessions do + attributes :id, :description, :musician_access, :approval_required, :fan_access end diff --git a/web/app/views/clients/_bands.html.erb b/web/app/views/clients/_bands.html.erb index 9418ae00a..72e77733c 100644 --- a/web/app/views/clients/_bands.html.erb +++ b/web/app/views/clients/_bands.html.erb @@ -25,7 +25,7 @@
-
+
{band_player_template}
diff --git a/web/app/views/clients/_hoverFan.html.erb b/web/app/views/clients/_hoverFan.html.erb index 321c0e24e..8f2b70ff4 100644 --- a/web/app/views/clients/_hoverFan.html.erb +++ b/web/app/views/clients/_hoverFan.html.erb @@ -1,46 +1,27 @@ - -