* VRFS-1264 and VRFS-1047
This commit is contained in:
parent
1c2585ba92
commit
104bf40a49
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -114,6 +114,7 @@
|
|||
}
|
||||
|
||||
$("#btnLike").click(like);
|
||||
|
||||
}
|
||||
|
||||
this.initialize = initialize;
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
}
|
||||
|
||||
.recording-position {
|
||||
display:inline-block;
|
||||
display:inline;
|
||||
width:80%;
|
||||
margin-left:-20px;
|
||||
font-family:Arial, Helvetica, sans-serif;
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
<div class="landing-details">
|
||||
<div class="left f20 teal"><strong>SESSION</strong></div>
|
||||
<div class="right f14 grey"><%= @music_session.created_at.strftime("%b %e %Y, %l:%M %p") %></div>
|
||||
<div class="right f14 grey"><%= timeago(@music_session.recording.created_at) %></div>
|
||||
<br clear="all" /><br />
|
||||
<div class="left w70"><%= @music_session.description %><br /><br /></div>
|
||||
<% if @music_session.session_removed_at.blank? %>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
<div class="landing-details">
|
||||
<div class="left f20 orange"><strong>RECORDING</strong></div>
|
||||
<div class="right f14 grey"><%= @claimed_recording.recording.created_at.strftime("%b %e %Y, %l:%M %p") %></div>
|
||||
<div class="right f14 grey"><%= timeago(@claimed_recording.recording.created_at) %></div>
|
||||
<br clear="all" /><br />
|
||||
<h2 class="left"><%= @claimed_recording.name %></h2>
|
||||
<div class="right">
|
||||
|
|
@ -50,12 +50,22 @@
|
|||
</div>
|
||||
<br clear="all" /><%= @claimed_recording.description %><br /><br />
|
||||
<div class="w100">
|
||||
<div class="recording-controls">
|
||||
<% if @claimed_recording.has_mix? %>
|
||||
<a id="btnPlayPause" class="left">
|
||||
<%= image_tag "content/icon_playbutton.png", {:id => "imgPlayPause", :width => 20, :height => 20, :alt => ""} %>
|
||||
</a>
|
||||
<% end %>
|
||||
<div class="recording-controls <%= @claimed_recording.has_mix? ? 'has-mix' : 'no-mix' %>">
|
||||
<a class="play-button left">
|
||||
<%= image_tag "content/icon_playbutton.png", {:id => "imgPlayPause", :width => 20, :height => 20, :alt => ""} %>
|
||||
<% if @claimed_recording.has_mix? %>
|
||||
<audio controls preload="none" style="display:none;">
|
||||
<source src="<%= claimed_recording_download_url(@claimed_recording.id, 'mp3') %>" type="audio/mpeg">
|
||||
<source src="<%= claimed_recording_download_url(@claimed_recording.id, 'ogg') %>" type="audio/ogg">
|
||||
</audio>
|
||||
<% end %>
|
||||
</a>
|
||||
<div class="recording-status">
|
||||
<span class="status-text">STILL MIXING</span>
|
||||
<div class="recording-duration">
|
||||
<%= recording_duration(@claimed_recording.recording) %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recording-position">
|
||||
<div class="recording-time">0:00</div>
|
||||
<div class="recording-playback">
|
||||
|
|
@ -64,17 +74,8 @@
|
|||
<div id="recordingDuration" class="recording-time"></div>
|
||||
</div>
|
||||
<div class="recording-current">0:00</div>
|
||||
<audio controls preload="none" style="display:none;">
|
||||
<% if @claimed_recording.has_mix? %>
|
||||
<source src="<%= claimed_recording_download_url(@claimed_recording.id, 'mp3') %>" type="audio/mpeg">
|
||||
<source src="<%= claimed_recording_download_url(@claimed_recording.id, 'ogg') %>" type="audio/ogg">
|
||||
<% end %>
|
||||
</audio>
|
||||
<% if !@claimed_recording.has_mix? %>
|
||||
<div>No audio available</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="left white"><%= @claimed_recording.genre_id.capitalize %></div>
|
||||
<div class="left white"><%= recording_genre(@claimed_recording.recording) %></div>
|
||||
<div class="right white">
|
||||
<span id="spnPlayCount"><%= @claimed_recording.recording.play_count %></span>
|
||||
<%= 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
|
||||
|
|
|
|||
Loading…
Reference in New Issue