Add pseudo progress bar update

This commit is contained in:
JonnyWong16 2017-11-01 20:11:40 -07:00
parent 0d54e9f2d6
commit 3f668ae5c6
3 changed files with 21 additions and 8 deletions

View file

@ -833,6 +833,7 @@ a .users-poster-face:hover {
background-color: #111; background-color: #111;
height: 100%; height: 100%;
width: 100%; width: 100%;
position: relative;
overflow: hidden; overflow: hidden;
} }
.dashboard-activity-progress .buffer-bar { .dashboard-activity-progress .buffer-bar {

View file

@ -307,7 +307,7 @@ DOCUMENTATION :: END
<div class="dashboard-activity-progress"> <div class="dashboard-activity-progress">
<div class="dashboard-activity-progress-bar"> <div class="dashboard-activity-progress-bar">
<div id="buffer-bar-${data['session_key']}" class="buffer-bar" style="width: ${data['transcode_progress']}%" data-toggle="tooltip" title="Transcoder Progress ${data['transcode_progress']}%">${data['transcode_progress']}%</div> <div id="buffer-bar-${data['session_key']}" class="buffer-bar" style="width: ${data['transcode_progress']}%" data-toggle="tooltip" title="Transcoder Progress ${data['transcode_progress']}%">${data['transcode_progress']}%</div>
<div id="progress-bar-${data['session_key']}" class="progress-bar" style="width: ${data['progress_percent']}%" data-toggle="tooltip" title="Stream Progress ${data['progress_percent']}%">${data['progress_percent']}%</div> <div id="progress-bar-${data['session_key']}" class="progress-bar" style="width: ${data['progress_percent']}%" data-last_view_offset="${data['view_offset']}" data-view_offset="${data['view_offset']}" data-stream_duration="${data['stream_duration']}" data-state="${data['state']}" data-toggle="tooltip" title="Stream Progress ${data['progress_percent']}%">${data['progress_percent']}%</div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -442,8 +442,10 @@
// Update the progress bars, percent - 3 because of 3px padding-right // Update the progress bars, percent - 3 because of 3px padding-right
$('#buffer-bar-' + key).width(parseInt(s.transcode_progress) - 3 + '%').html(s.transcode_progress + '%') $('#buffer-bar-' + key).width(parseInt(s.transcode_progress) - 3 + '%').html(s.transcode_progress + '%')
.attr('data-original-title', 'Transcoder Progress ' + s.transcode_progress + '%'); .attr('data-original-title', 'Transcoder Progress ' + s.transcode_progress + '%');
$('#progress-bar-' + key).width(parseInt(s.progress_percent) - 3 + '%').html(s.progress_percent + '%') $('#progress-bar-' + key).data('state', s.state);
.attr('data-original-title', 'Stream Progress ' + s.progress_percent + '%'); if ($('#progress-bar-' + key).data('last_view_offset') != s.view_offset) {
$('#progress-bar-' + key).data('last_view_offset', s.view_offset).data('view_offset', s.view_offset);
}
// Add temporary class so we know which instances are still active // Add temporary class so we know which instances are still active
instance.addClass('updated-temp'); instance.addClass('updated-temp');
@ -493,9 +495,19 @@
setInterval( function(){ setInterval( function(){
$('.progress_time_offset').each(function () { $('.progress_time_offset').each(function () {
if ($(this).data('state') === 'playing') { if ($(this).data('state') === 'playing') {
var ms = parseInt($(this).data('view_offset')); var view_offset = parseInt($(this).data('view_offset'));
var timestamp = millisecondsToMinutes(ms, false); var timestamp = millisecondsToMinutes(view_offset, false);
$(this).html(timestamp).data('view_offset', ms + 1000) $(this).html(timestamp).data('view_offset', view_offset + 1000)
}
});
$('.progress-bar').each(function () {
if ($(this).data('state') === 'playing') {
var view_offset = parseInt($(this).data('view_offset'));
var duration = parseInt($(this).data('stream_duration'));
var progress_percent = Math.trunc(view_offset / duration * 100)
$(this).width(progress_percent - 3 + '%').html(progress_percent + '%')
.attr('data-original-title', 'Stream Progress ' + progress_percent + '%')
.data('view_offset', view_offset + 1000);
} }
}); });
}, 1000); }, 1000);