Added remaining time displaying, moved Information to tooltip, removed now unneeded speed div
This commit is contained in:
parent
45aa28c139
commit
159747117f
|
@ -69,11 +69,11 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
#uploadprogressbar .label {
|
#uploadprogressbar .label {
|
||||||
font-weight: bold;
|
|
||||||
top: 6px;
|
top: 6px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
#uploadprogressbar .label.inner {
|
#uploadprogressbar .label.inner {
|
||||||
color:white;
|
color:white;
|
||||||
|
@ -85,18 +85,6 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
#uploadprogresswrapper .speed{
|
|
||||||
margin-left: 3px;
|
|
||||||
font-size: 13px;
|
|
||||||
display:inline-block;
|
|
||||||
float: left;
|
|
||||||
width: 5em;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
top: 7px;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
#uploadprogressbar .desktop {
|
#uploadprogressbar .desktop {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
|
@ -181,7 +181,6 @@ OC.Upload = {
|
||||||
|
|
||||||
_hideProgressBar: function() {
|
_hideProgressBar: function() {
|
||||||
$('#uploadprogresswrapper input.stop').fadeOut();
|
$('#uploadprogresswrapper input.stop').fadeOut();
|
||||||
$('#uploadprogresswrapper .speed').fadeOut();
|
|
||||||
$('#uploadprogressbar').fadeOut(function() {
|
$('#uploadprogressbar').fadeOut(function() {
|
||||||
$('#file_upload_start').trigger(new $.Event('resized'));
|
$('#file_upload_start').trigger(new $.Event('resized'));
|
||||||
});
|
});
|
||||||
|
@ -442,7 +441,13 @@ OC.Upload = {
|
||||||
window.file_upload_param = fileupload;
|
window.file_upload_param = fileupload;
|
||||||
|
|
||||||
if (supportAjaxUploadWithProgress()) {
|
if (supportAjaxUploadWithProgress()) {
|
||||||
|
//remaining time
|
||||||
|
var lastUpdate = new Date().getMilliseconds();
|
||||||
|
var lastSize = 0;
|
||||||
|
var bufferSize = 10;
|
||||||
|
var buffer = new Array();// = new Array(bufferSize);
|
||||||
|
var bufferIndex = 0;
|
||||||
|
var bufferTotal = 0;
|
||||||
// add progress handlers
|
// add progress handlers
|
||||||
fileupload.on('fileuploadadd', function(e, data) {
|
fileupload.on('fileuploadadd', function(e, data) {
|
||||||
OC.Upload.log('progress handle fileuploadadd', e, data);
|
OC.Upload.log('progress handle fileuploadadd', e, data);
|
||||||
|
@ -455,10 +460,10 @@ OC.Upload = {
|
||||||
fileupload.on('fileuploadstart', function(e, data) {
|
fileupload.on('fileuploadstart', function(e, data) {
|
||||||
OC.Upload.log('progress handle fileuploadstart', e, data);
|
OC.Upload.log('progress handle fileuploadstart', e, data);
|
||||||
$('#uploadprogresswrapper input.stop').show();
|
$('#uploadprogresswrapper input.stop').show();
|
||||||
$('#uploadprogresswrapper .speed').show();
|
|
||||||
$('#uploadprogresswrapper .label').show();
|
$('#uploadprogresswrapper .label').show();
|
||||||
$('#uploadprogressbar').progressbar({value: 0});
|
$('#uploadprogressbar').progressbar({value: 0});
|
||||||
$('#uploadprogressbar .ui-progressbar-value').html('<em class="label inner"><span class="desktop">' + t('files', 'Uploading...') + '</span><span class="mobile">' + t('files', '...') + '</span></em>');
|
$('#uploadprogressbar .ui-progressbar-value').html('<em class="label inner"><span class="desktop">' + t('files', 'Uploading...') + '</span><span class="mobile">' + t('files', '...') + '</span></em>');
|
||||||
|
$('#uploadprogressbar').tipsy({gravity:'n', fade:true, live:true});
|
||||||
OC.Upload._showProgressBar();
|
OC.Upload._showProgressBar();
|
||||||
});
|
});
|
||||||
fileupload.on('fileuploadprogress', function(e, data) {
|
fileupload.on('fileuploadprogress', function(e, data) {
|
||||||
|
@ -468,9 +473,26 @@ OC.Upload = {
|
||||||
fileupload.on('fileuploadprogressall', function(e, data) {
|
fileupload.on('fileuploadprogressall', function(e, data) {
|
||||||
OC.Upload.log('progress handle fileuploadprogressall', e, data);
|
OC.Upload.log('progress handle fileuploadprogressall', e, data);
|
||||||
var progress = (data.loaded / data.total) * 100;
|
var progress = (data.loaded / data.total) * 100;
|
||||||
|
var thisUpdate = new Date().getMilliseconds();
|
||||||
|
var diffUpdate = (thisUpdate - lastUpdate)/1000; // eg. 2s
|
||||||
|
lastUpdate = thisUpdate;
|
||||||
|
var diffSize = data.loaded - lastSize;
|
||||||
|
lastSize = data.loaded;
|
||||||
|
diffSize = diffSize / diffUpdate; // apply timing factor, eg. 1mb/2s = 0.5mb/s
|
||||||
|
var remainingSeconds = ((data.total - data.loaded) / diffSize);
|
||||||
|
if(remainingSeconds>0){ //buffer to make it smoother
|
||||||
|
bufferTotal = bufferTotal - (buffer[bufferIndex]||0) + remainingSeconds;
|
||||||
|
buffer[bufferIndex] = remainingSeconds;
|
||||||
|
bufferIndex = (bufferIndex + 1) % bufferSize;
|
||||||
|
}
|
||||||
|
var smoothRemaining = (bufferTotal/bufferSize);
|
||||||
|
var date = new Date(smoothRemaining * 1000);
|
||||||
|
var stringRemaining = (date.getUTCHours() > 0 ? ('0' + date.getUTCHours()).slice(-2) + ':':'') +
|
||||||
|
('0' + date.getUTCMinutes()).slice(-2) + ':' +
|
||||||
|
('0' + date.getUTCSeconds()).slice(-2);
|
||||||
$('#uploadprogressbar .label .mobile').text(t('files', '{loadedSize}', {loadedSize: humanFileSize(data.loaded)}));
|
$('#uploadprogressbar .label .mobile').text(t('files', '{loadedSize}', {loadedSize: humanFileSize(data.loaded)}));
|
||||||
$('#uploadprogressbar .label .desktop').text(t('files', '{loadedSize} of {totalSize}', {loadedSize: humanFileSize(data.loaded), totalSize: humanFileSize(data.total)}));
|
$('#uploadprogressbar .label .desktop').text(t('files', '{loadedSize} of {totalSize}', {loadedSize: humanFileSize(data.loaded), totalSize: humanFileSize(data.total)}));
|
||||||
$('#uploadprogresswrapper .speed').text(t('files', '{bitrate}/s', {bitrate: humanFileSize(data.bitrate)}));
|
$('#uploadprogressbar').attr('title', t('files', '{bitrate}. {timeRemaining} seconds remaining.', {timeRemaining: stringRemaining, bitrate: humanFileSize(data.bitrate) + '/s'}));
|
||||||
$('#uploadprogressbar').progressbar('value', progress);
|
$('#uploadprogressbar').progressbar('value', progress);
|
||||||
});
|
});
|
||||||
fileupload.on('fileuploadstop', function(e, data) {
|
fileupload.on('fileuploadstop', function(e, data) {
|
||||||
|
|
|
@ -40,7 +40,6 @@
|
||||||
<div id="uploadprogressbar">
|
<div id="uploadprogressbar">
|
||||||
<em class="label outer" style="display:none"><span class="desktop"><?php p($l->t('Uploading...'));?></span><span class="mobile"><?php p($l->t('...'));?></span></em>
|
<em class="label outer" style="display:none"><span class="desktop"><?php p($l->t('Uploading...'));?></span><span class="mobile"><?php p($l->t('...'));?></span></em>
|
||||||
</div>
|
</div>
|
||||||
<div style="display:none" class="speed"></div>
|
|
||||||
<input type="button" class="stop icon-close" style="display:none" value="" />
|
<input type="button" class="stop icon-close" style="display:none" value="" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue