seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

* VRFS-3098 - pause button added to jamtrack

This commit is contained in:
Seth Call 2015-04-28 08:58:34 -05:00
parent 34b2614600
commit 1ad86b1d80
8 changed files with 82 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
web/app/assets/images/content/icon_stopbutton.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 365 B

6
web/app/assets/javascripts/dialog/recordingFinishedDialog.js
View File

@ -246,6 +246,11 @@
}
function onPause() {
logger.debug("calling jamClient.SessionPausePlay");
context.jamClient.SessionPausePlay();
}
function onStop() {
logger.debug("calling jamClient.SessionStopPlay");
context.jamClient.SessionStopPlay();
}
@ -264,6 +269,7 @@
registerClaimRecordingHandlers(true);
registerDiscardRecordingHandlers(true);
$(playbackControls)
.on('stop', onStop)
.on('pause', onPause)
.on('play', onPlay)
.on('change-position', onChangePlayPosition);

52
web/app/assets/javascripts/playbackControls.js
View File

@ -29,6 +29,7 @@
var $playButton = $('.play-button img.playbutton', $parentElement);
var $pauseButton = $('.play-button img.pausebutton', $parentElement);
var $stopButton = $('.stop-button img.stopbutton', $parentElement);
var $currentTime = $('.recording-current', $parentElement);
var $duration = $('.duration-time', $parentElement);
var $sliderBar = $('.recording-playback', $parentElement);
@ -42,6 +43,7 @@
var playbackDurationMs = 0;
var playbackPositionMs = 0;
var durationChanged = false;
var seenActivity = false;
var endReached = false;
var dragging = false;
@ -53,6 +55,7 @@
var playbackMonitorMode = PLAYBACK_MONITOR_MODE.MEDIA_FILE;
function startPlay() {
seenActivity = false;
updateIsPlaying(true);
if(endReached) {
update(0, playbackDurationMs, playbackPlaying);
@ -68,7 +71,12 @@
function stopPlay(endReached) {
updateIsPlaying(false);
$self.triggerHandler('pause', {playbackMode: playbackMode, playbackMonitorMode: playbackMonitorMode, endReached : endReached});
$self.triggerHandler('stop', {playbackMode: playbackMode, playbackMonitorMode: playbackMonitorMode, endReached : endReached});
}
function pausePlay(endReached) {
updateIsPlaying(false);
$self.triggerHandler('pause', {playbackMode: playbackMode, playbackMonitorMode: playbackMonitorMode, endReached : endReached});
}
function updateOffsetBasedOnPosition(offsetLeft) {
@ -127,6 +135,17 @@
// return false;
//}
pausePlay();
return false;
});
$stopButton.on('click', function(e) {
var sessionModel = context.JK.CurrentSessionModel || null;
//if(sessionModel && sessionModel.areControlsLockedForJamTrackRecording() && $parentElement.closest('.session-track').data('track_data').type == 'jam_track') {
// context.JK.prodBubble($pauseButton, 'jamtrack-controls-disabled', {}, {positions:['top'], offsetParent: $pauseButton})
// return false;
//}
stopPlay();
return false;
});
@ -202,18 +221,11 @@
positionMs = 0;
}
if(playbackMonitorMode == PLAYBACK_MONITOR_MODE.JAMTRACK) {
if(isPlaying) {
$jamTrackGetReady.attr('data-current-time', positionMs)
}
else {
// this is so the jamtrack 'Get Ready!' stays hidden when it's not playing
$jamTrackGetReady.attr('data-current-time', -1)
}
if(positionMs > 0) {
seenActivity = true;
}
if(playbackMonitorMode == PLAYBACK_MONITOR_MODE.METRONOME) {
updateIsPlaying(isPlaying);
}
@ -221,6 +233,17 @@
update(positionMs, durationMs, isPlaying);
}
if(playbackMonitorMode == PLAYBACK_MONITOR_MODE.JAMTRACK) {
if(playbackPlaying) {
$jamTrackGetReady.attr('data-current-time', positionMs)
}
else {
// this is so the jamtrack 'Get Ready!' stays hidden when it's not playing
$jamTrackGetReady.attr('data-current-time', -1)
}
}
monitorPlaybackTimeout = setTimeout(monitorRecordingPlayback, 500);
}
@ -232,9 +255,9 @@
}
// at the end of the play, the duration sets to 0, as does currentTime. but isPlaying does not reset to
logger.debug("currentTimeMs, durationTimeMs, mode", currentTimeMs, durationTimeMs, playbackMonitorMode);
if(currentTimeMs == 0 && durationTimeMs == 0) {
if(isPlaying) {
//logger.debug("currentTimeMs, durationTimeMs, mode", currentTimeMs, durationTimeMs, playbackMonitorMode);
if(currentTimeMs == 0 && seenActivity) {
if(playbackPlaying) {
isPlaying = false;
durationTimeMs = playbackDurationMs;
currentTimeMs = playbackDurationMs;
@ -298,6 +321,7 @@
$pauseButton.hide();
}
logger.debug("updating is playing: " + isPlaying)
playbackPlaying = isPlaying;
}
}

20
web/app/assets/javascripts/session.js
View File

@ -3007,18 +3007,31 @@
}
function onPause(e, data) {
logger.debug("calling jamClient.SessionStopPlay. endReached:", data.endReached);
logger.debug("calling jamClient.SessionPausePlay. endReached:", data.endReached);
// if a JamTrack is open, and the user hits 'pause', we need to automatically stop the recording
// if a JamTrack is open, and the user hits 'pause' or 'stop', we need to automatically stop the recording
if(sessionModel.jamTracks() && sessionModel.recordingModel.isRecording()) {
startStopRecording();
}
if(!data.endReached) {
context.jamClient.SessionStopPlay();
context.jamClient.SessionPausePlay();
}
}
function onStop(e, data) {
logger.debug("calling jamClient.SessionStopPlay. endReached:", data.endReached);
// if a JamTrack is open, and the user hits 'pause' or 'stop', we need to automatically stop the recording
if(sessionModel.jamTracks() && sessionModel.recordingModel.isRecording()) {
startStopRecording();
}
if(!data.endReached) {
context.jamClient.SessionStopPlay();
}
}
function onPlay(e, data) {
logger.debug("calling jamClient.SessionStartPlay");
context.jamClient.SessionStartPlay(data.playbackMode);
@ -3179,6 +3192,7 @@
$closePlaybackRecording.on('click', closeOpenMedia);
$(playbackControls)
.on('pause', onPause)
.on('stop', onStop)
.on('play', onPlay)
.on('change-position', onChangePlayPosition);
$(friendInput).focus(function() { $(this).val(''); })

6
web/app/assets/stylesheets/client/session.css.scss
View File

@ -56,11 +56,11 @@
.recording-position {
display:inline-block;
width:calc(100% - 27px - 47px); // 27 accounts for play arrow, 47px acconts for the total time (0:00)
width:calc(100% - 127px); // 27 accounts for play arrow, 20 for stop, 47px acconts for the total time (0:00), and then some extra
position:absolute;
left:0;
margin-left:27px;
margin-left:55px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
@ -78,7 +78,7 @@
bottom: 0;
height: 25px;
.play-button {
.play-buttons {
top:2px;
}
.recording-current {

2
web/app/assets/stylesheets/dialogs/recordingFinishedDialog.css.scss
View File

@ -11,7 +11,7 @@
}
.recording-position {
margin: 5px 0 0 -15px;
margin: 5px 0 0 11px;
width: 95%;
display:inline-block;
}

7
web/app/assets/stylesheets/web/audioWidgets.css.scss
View File

@ -90,12 +90,17 @@
display:none;
}
.play-button {
.play-buttons {
display:inline-block;
outline: 0;
// the following 3 properties were to make safari on iOS not wrap text after the .play-button float:left was preferred
position:absolute;
left:5px;
top:7px;
a {
outline: 0;
}
}
&.no-mount{

15
web/app/views/clients/_play_controls.html.erb
View File

@ -6,10 +6,17 @@
<span>Get Ready!</span>
</div>
<!-- play button -->
<a class="left play-button" href="#">
<%= image_tag "content/icon_playbutton.png", {:height => 20, :width => 20, :class=> "playbutton"} %>
<%= image_tag "content/icon_pausebutton.png", {:height => 20, :width => 20, :class=> "pausebutton"} %>
</a>
<div class="left play-buttons">
<a class="play-button" href="#">
<%= image_tag "content/icon_playbutton.png", {:height => 20, :width => 20, :class=> "playbutton"} %>
<%= image_tag "content/icon_pausebutton.png", {:height => 20, :width => 20, :class=> "pausebutton"} %>
</a>
<a class="stop-button" href="#">
<%= image_tag "content/icon_stopbutton.png", {:height => 20, :width => 20, :class=> "stopbutton"} %>
</a>
</div>
<!-- playback position -->
<div class="recording-position">