VRFS-1028 session / recording hover bubbles

This commit is contained in:
Brian Smith 2014-02-13 20:50:56 -05:00
parent eb15b1843b
commit f6aaa3dcbd
13 changed files with 50 additions and 37 deletions

View File

@ -111,7 +111,7 @@ module JamRuby
end
def self.save(music_session)
session_history = MusicSessionHistory.find_by_music_session_id(music_session.id)
session_history = MusicSessionHistory.find(music_session.id)
if session_history.nil?
session_history = MusicSessionHistory.new

View File

@ -47,7 +47,6 @@
var sessionDisplayStyle = 'none';
var sessionId = '';
console.log("here");
if (response.sessions !== undefined && response.sessions.length > 0) {
sessionDisplayStyle = 'block';
sessionId = response.sessions[0].id;

View File

@ -15,35 +15,42 @@
rest.getClaimedRecording(recordingId)
.done(function(response) {
var claimedRecording = response;
var recording = response.recording;
$(hoverSelector).html('');
// musicians
var musicianHtml = '';
$.each(response.musicians, function(index, val) {
$.each(recording.recorded_tracks, function(index, val) {
var instrumentHtml = '';
var musician = val.user;
musicianHtml += '<tr><td width="50"><a href="#" class="avatar-tiny"><img src="' + context.JK.resolveAvatarUrl(val.photo_url) + '" /></a></td>';
musicianHtml += '<td width="75"><a href="#">' + val.name + '</a></td>';
musicianHtml += '<tr><td width="50"><a href="#" class="avatar-tiny"><img src="' + context.JK.resolveAvatarUrl(musician.photo_url) + '" /></a></td>';
musicianHtml += '<td width="75"><a href="#">' + musician.name + '</a></td>';
instrumentHtml = '<td><div class="nowrap">';
$.each(val.instruments, function(index, instrument) {
instrumentHtml += '<img src="' + instrumentLogoMap[instrument.instrument_id] + '" width="24" height="24" />&nbsp;';
});
instrumentHtml += '<img src="' + instrumentLogoMap[val.instrument_id] + '" width="24" height="24" />&nbsp;';
instrumentHtml += '</div></td>';
musicianHtml += instrumentHtml;
musicianHtml += '</tr>';
});
var template = $('#template-hover-recording').html();
var creator = recording.band == null ? recording.owner : recording.band;
var recordingHtml = 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
name: claimedRecording.name,
genre: claimedRecording.genre_id.toUpperCase(),
created_at: context.JK.formatDateTime(recording.created_at),
description: response.description,
play_count: recording.play_count,
comment_count: recording.comment_count,
like_count: recording.like_count,
creator_avatar_url: recording.band === null ? context.JK.resolveAvatarUrl(creator.photo_url) : context.JK.resolveBandAvatarUrl(creator.photo_url),
creator_name: creator.name,
location: creator.location,
musicians: musicianHtml
});
$(hoverSelector).append('<h2>Recording Detail</h2>' + recordingHtml);

View File

@ -22,12 +22,13 @@
$.each(response.users, function(index, val) {
var instrumentHtml = '';
musicianHtml += '<tr><td width="50"><a href="#" class="avatar-tiny"><img src="' + context.JK.resolveAvatarUrl(val.photo_url) + '" /></a></td>';
musicianHtml += '<td width="75"><a href="#">' + val.name + '</a></td>';
musicianHtml += '<tr><td width="50"><a href="#" class="avatar-tiny"><img src="' + context.JK.resolveAvatarUrl(val.user.photo_url) + '" /></a></td>';
musicianHtml += '<td width="75"><a href="#">' + val.user.name + '</a></td>';
instrumentHtml = '<td><div class="nowrap">';
$.each(val.instruments, function(index, instrument) {
instrumentHtml += '<img src="' + instrumentLogoMap[instrument.instrument_id] + '" width="24" height="24" />&nbsp;';
var instruments = val.instruments.split("|");
$.each(instruments, function(index, instrument) {
instrumentHtml += '<img src="' + instrumentLogoMap[instrument] + '" width="24" height="24" />&nbsp;';
});
instrumentHtml += '</div></td>';
@ -39,6 +40,12 @@
var template = $('#template-hover-session').html();
var sessionHtml = context.JK.fillTemplate(template, {
description: response.description,
genre: response.genres.toUpperCase(),
comment_count: response.comment_count,
like_count: response.like_count,
created_at: context.JK.formatDateTime(response.created_at),
musicians: musicianHtml
});
$(hoverSelector).append('<h2>Session Detail</h2>' + sessionHtml);

View File

@ -342,7 +342,7 @@
context.JK.formatDateTime = function(dateString) {
var date = new Date(dateString);
return date.getFullYear() + "-" + context.JK.padString(date.getMonth()+1, 2) + "-" + context.JK.padString(date.getDate(), 2) + " @ " + date.toLocaleTimeString();
return context.JK.padString(date.getMonth()+1, 2) + "/" + context.JK.padString(date.getDate(), 2) + "/" + date.getFullYear() + " - " + date.toLocaleTimeString();
}
// returns Fri May 20, 2013

View File

@ -195,7 +195,7 @@ class ApiMusicSessionsController < ApiController
# example of using curl to access this API:
# curl -L -T some_file -X PUT http://localhost:3000/api/sessions/[SESSION_ID]/perf.json?client_id=[CLIENT_ID]
music_session_history = MusicSessionHistory.find_by_music_session_id(params[:id])
music_session_history = MusicSessionHistory.find(params[:id])
msuh = MusicSessionUserHistory.find_by_client_id(params[:client_id])
@perfdata = MusicSessionPerfData.new
@ -293,7 +293,7 @@ class ApiMusicSessionsController < ApiController
end
def history_show
@history = MusicSessionHistory.find_by_music_session_id(params[:id])
@history = MusicSessionHistory.find(params[:id])
end
def claimed_recording_start

View File

@ -554,7 +554,7 @@ class ApiUsersController < ApiController
def share_session
provider = params[:provider]
music_session_id = params[:music_session]
history = MusicSessionHistory.find_by_music_session_id!(music_session_id)
history = MusicSessionHistory.find!(music_session_id)
if provider == 'facebook'

View File

@ -3,7 +3,7 @@ class MusicSessionsController < ApplicationController
respond_to :html
def show
@music_session = MusicSessionHistory.find_by_music_session_id(params[:id])
@music_session = MusicSessionHistory.find(params[:id])
render :layout => "web"
end

View File

@ -16,11 +16,11 @@ child(:recording => :recording) {
attributes :id, :created_at, :duration, :comment_count, :like_count, :play_count
child(:band => :band) {
attributes :id, :name, :photo_url
attributes :id, :name, :location, :photo_url
}
child(:owner => :owner) {
attributes :id, :name, :photo_url
attributes :id, :name, :location, :photo_url
}
child(:mixes => :mixes) {
@ -31,7 +31,7 @@ child(:recording => :recording) {
attributes :id, :fully_uploaded, :url, :client_track_id, :client_id, :instrument_id
child(:user => :user) {
attributes :id, :first_name, :last_name, :name, :city, :state, :country, :photo_url
attributes :id, :first_name, :last_name, :name, :city, :state, :country, :location, :photo_url
}
}

View File

@ -1,6 +1,6 @@
object @history
attributes :music_session_id, :description, :genres, :created_at
attributes :id, :music_session_id, :description, :genres, :like_count, :comment_count, :created_at
node :share_url do |history|
unless history.share_token.nil?

View File

@ -4,7 +4,7 @@
<script type="text/template" id="template-hover-recording">
<div class="bubble-inner">
<h3>{title}</h3>
<h3>{name}</h3>
<div class="small left">{genre}</div>
<div class="small right">{created_at}</div>
<br clear="all" />
@ -15,13 +15,13 @@
{like_count} <img src="/assets/content/icon_like.png" width="12" height="12" align="absmiddle" />
</div>
<br /><br />
<a href="#" class="avatar_large left mr20"><img src="{avatar_url}" /></a>
<a href="#" class="avatar_large left mr20"><img src="{creator_avatar_url}" /></a>
<div class="left">
<h3>{creator_title}</h3>
<h3>{creator_name}</h3>
<small>{location}</small>
</div>
<br clear="all" /><br />
MUSICIANS:
MUSICIANS:<br /><br />
<table class="musicians" cellpadding="0" cellspacing="5">
{musicians}
</table>

View File

@ -9,11 +9,11 @@
<br clear="all" />
<div class="f11 mt5 mb5">{description}</div>
<div class="small">
{comment_count} <img src="/assets/content/icon_comment.png" width="13" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;
{like_count} <img src="/assets/content/icon_like.png" width="12" height="12" align="absmiddle" />
{comment_count} <img src="/assets/content/icon_comment.png" width="13" height="12" align="absmiddle" style="vertical-align:middle;" />&nbsp;&nbsp;&nbsp;
{like_count} <img src="/assets/content/icon_like.png" width="12" height="12" align="absmiddle" style="vertical-align:middle;" />
</div>
<br />
MUSICIANS:
MUSICIANS:<br /><br />
<table class="musicians" cellpadding="0" cellspacing="5">
{musicians}
</table>

View File

@ -10,7 +10,7 @@
</div>
<div class="f16">
<span class="orange"><strong>RECORDING:</strong></span>
<a href="/recordings/<%= history_record.recording_id %>" class="white">Test</a>
<a recording-id="<%= history_record.recording_id %>" hoveraction="recording" href="/recordings/<%= history_record.recording_id %>" class="white">Test</a>
</div>
<% elsif history_record.instance_of? MusicSessionHistory %>
@ -26,7 +26,7 @@
<div class="f16">
<span class="teal"><strong>SESSION:</strong></span>&nbsp;
<% if history_record.session_removed_at.blank? %>
<a href="/sessions/<%= history_record.music_session_id %>" class="white">Live Session in Progress</a>
<a session-id="<%= history_record.music_session_id %>" hoveraction="session" href="/sessions/<%= history_record.music_session_id %>" class="white">Live Session in Progress</a>
<% else %>
<span class="grey">Session Ended. Unavailable.</span>
<% end %>