diff --git a/web/app/assets/javascripts/web/recordings.js b/web/app/assets/javascripts/web/recordings.js index cea7ffcfd..d573716da 100644 --- a/web/app/assets/javascripts/web/recordings.js +++ b/web/app/assets/javascripts/web/recordings.js @@ -1,11 +1,53 @@ (function(context, $) { context.JK.ShowRecording = function(app) { - var logger = context.JK.logger; - var rest = new JK.Rest(); - var recordingId = null; + var logger = context.JK.logger; + var rest = new JK.Rest(); + var recordingId = null; var claimedRecordingId = null; - var $scope = $(".landing-details"); + var $scope = $(".landing-details"); + var $controls = $('.recording-controls'); + var $sliderBar = $('.recording-position'); + var $statusBar = $('.recording-status'); + var $currentTime = $('.recording-current'); + var $status = $('.status-text'); + var $playButton = $('.play-button'); + var $playIcon = $('#imgPlayPause'); + var playing = false; + + function startPlay() { + $playIcon.attr('src', '/assets/content/icon_pausebutton.png'); + $controls.trigger('play.listenRecording'); + playing = true; + } + + function stopPlay() { + $playIcon.attr('src', '/assets/content/icon_playbutton.png'); + $controls.trigger('pause.listenRecording'); + playing = false; + } + + function togglePlay() { + + if(playing) { + stopPlay(); + } + else { + startPlay(); + } + return false; + } + + function stateChange(e, data) { + if(data.isEnd) stopPlay(); + if(data.isError) { + $sliderBar.hide(); + $playButton.hide(); + $currentTime.hide(); + $statusBar.show(); + $status.text(data.displayText); + } + } function like() { rest.addRecordingLike(recordingId, claimedRecordingId, JK.currentUserId) @@ -45,6 +87,12 @@ recordingId = _recordingId; claimedRecordingId = _claimedRecordingId; + $('.timeago').timeago(); + $playButton.click(togglePlay); + $controls.bind('statechange.listenRecording', stateChange); + + $controls.listenRecording({sliderSelector:'.recording-slider', sliderBarSelector: '.recording-playback', currentTimeSelector:'.recording-current'}); + if (JK.currentUserId) { var shareDialog = new JK.ShareDialog(JK.app, claimedRecordingId, "recording"); shareDialog.initialize(JK.FacebookHelperInstance); diff --git a/web/app/assets/javascripts/web/sessions.js b/web/app/assets/javascripts/web/sessions.js index 3e1aabbf4..71e3f8e57 100644 --- a/web/app/assets/javascripts/web/sessions.js +++ b/web/app/assets/javascripts/web/sessions.js @@ -114,6 +114,7 @@ } $("#btnLike").click(like); + } this.initialize = initialize; diff --git a/web/app/assets/javascripts/web/welcome.js b/web/app/assets/javascripts/web/welcome.js index 8ea3141a3..5922a2220 100644 --- a/web/app/assets/javascripts/web/welcome.js +++ b/web/app/assets/javascripts/web/welcome.js @@ -19,25 +19,21 @@ $('#signin').click(function (e) { if (context.JK.currentUserId) { - rest.getUserDetail() + rest.getUserDetail({id:context.JK.currentUserId}) .done(function () { e.preventDefault(); window.location = '/client'; - return false; }) .fail(function () { context.JK.app.layout.showDialog('signin-dialog'); - e.preventDefault(); - return false; }) } else { // don't bother checking if no context.JK.currentUserId context.JK.app.layout.showDialog('signin-dialog'); - e.preventDefault(); - return false; } - + e.preventDefault(); + return false; }); $('.carousel').carousel({ diff --git a/web/app/assets/stylesheets/web/audioWidgets.css.scss b/web/app/assets/stylesheets/web/audioWidgets.css.scss index 3c4ea267c..091b8b9b4 100644 --- a/web/app/assets/stylesheets/web/audioWidgets.css.scss +++ b/web/app/assets/stylesheets/web/audioWidgets.css.scss @@ -11,7 +11,6 @@ text-align: center; @include border_box_sizing; height: 36px; - } @@ -40,6 +39,10 @@ right:4px; } + .recording-slider { + cursor:pointer; + } + &.has-mix { .recording-status { diff --git a/web/app/assets/stylesheets/web/recordings.css.scss b/web/app/assets/stylesheets/web/recordings.css.scss index fb6bdd7e7..bf15d9ce6 100644 --- a/web/app/assets/stylesheets/web/recordings.css.scss +++ b/web/app/assets/stylesheets/web/recordings.css.scss @@ -23,7 +23,7 @@ } .recording-position { - display:inline-block; + display:inline; width:80%; margin-left:-20px; font-family:Arial, Helvetica, sans-serif; diff --git a/web/app/views/music_sessions/show.html.erb b/web/app/views/music_sessions/show.html.erb index 9fdbad9ae..a43ca4a53 100644 --- a/web/app/views/music_sessions/show.html.erb +++ b/web/app/views/music_sessions/show.html.erb @@ -40,7 +40,7 @@
SESSION
-
<%= @music_session.created_at.strftime("%b %e %Y, %l:%M %p") %>
+
<%= timeago(@music_session.recording.created_at) %>


<%= @music_session.description %>

<% if @music_session.session_removed_at.blank? %> diff --git a/web/app/views/recordings/show.html.erb b/web/app/views/recordings/show.html.erb index fc5eed80b..0a18d8021 100644 --- a/web/app/views/recordings/show.html.erb +++ b/web/app/views/recordings/show.html.erb @@ -41,7 +41,7 @@
RECORDING
-
<%= @claimed_recording.recording.created_at.strftime("%b %e %Y, %l:%M %p") %>
+
<%= timeago(@claimed_recording.recording.created_at) %>


<%= @claimed_recording.name %>

@@ -50,12 +50,22 @@

<%= @claimed_recording.description %>

-
- <% if @claimed_recording.has_mix? %> - - <%= image_tag "content/icon_playbutton.png", {:id => "imgPlayPause", :width => 20, :height => 20, :alt => ""} %> - - <% end %> +
+ + <%= image_tag "content/icon_playbutton.png", {:id => "imgPlayPause", :width => 20, :height => 20, :alt => ""} %> + <% if @claimed_recording.has_mix? %> + + <% end %> + +
+ STILL MIXING +
+ <%= recording_duration(@claimed_recording.recording) %> +
+
0:00
@@ -64,17 +74,8 @@
0:00
- - <% if !@claimed_recording.has_mix? %> -
No audio available
- <% end %>
-
<%= @claimed_recording.genre_id.capitalize %>
+
<%= recording_genre(@claimed_recording.recording) %>
<%= @claimed_recording.recording.play_count %> <%= image_tag "content/icon_arrow.png", {:width => 7, :height => 12, :align => "absmiddle", :alt => ""} %>     @@ -126,7 +127,7 @@ function formatTime(time) { var minutes = Math.floor(time / 60); var seconds = Math.floor(time % 60); - return minutes.toString() + ":" + (seconds > 9 ? seconds.toString() : '0' + seconds.toString()); + return minutes.toString() + ":" + (seconds > 9 ? seconds.toString() : '0' + seconds.toString()); } // this sets the slider to the appropriate position and updates the current play time