(function(context,$) { "use strict"; context.JK = context.JK || {}; context.JK.Sidebar = function(app) { 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()); }); } context.JK.Sidebar.searchTypeSelection = function(typeSelection) { $('#search_text_type').val(typeSelection); emptySearchResults(); } 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("") // }); // 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("") // }); ///////////////////////////////////////////////////////////// $('#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) { friends = response; updateFriendList(response); // set friend count $('#sidebar-friend-count').html(response.length); }, error: app.ajaxError }); 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: '', 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(); // 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; }); } 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 = '#/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 = '#/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 = '#/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) }); }); } this.initialize = function(invitationDialogInstance) { events(); initializeSearchPanel(); initializeFriendsPanel(); initializeChatPanel(); initializeNotificationsPanel(); invitationDialog = invitationDialogInstance; }; }; })(window,jQuery);