diff --git a/apps/files/css/mobile.css b/apps/files/css/mobile.css index 0641304d21..bb20c8c3f7 100644 --- a/apps/files/css/mobile.css +++ b/apps/files/css/mobile.css @@ -67,7 +67,15 @@ table td.filename .nametext .innernametext { } /* shorten elements for mobile */ -#uploadprogressbar { +#uploadprogressbar, #uploadprogressbar .label.inner { width: 50px; } +/* hide desktop-only parts */ +#uploadprogressbar .desktop { + display: none !important; } +#uploadprogressbar .mobile { + display: block !important; +} + +} \ No newline at end of file diff --git a/apps/files/css/upload.css b/apps/files/css/upload.css index 07b788b937..f0ffb9ac99 100644 --- a/apps/files/css/upload.css +++ b/apps/files/css/upload.css @@ -47,7 +47,39 @@ width: 200px; height: 36px; display:inline-block; + text-align: center; } +#uploadprogressbar .ui-progressbar-value.ui-widget-header.ui-corner-left { + height: 100%; + top: 0px; + left: 0px; + position: absolute; + overflow: hidden; +} +#uploadprogressbar .label { + top: 6px; + opacity: 1; + overflow: hidden; + white-space: nowrap; + font-weight: normal; +} +#uploadprogressbar .label.inner { + color:white; + position: absolute; + display: block; + width: 200px; +} +#uploadprogressbar .label.outer { + position: relative; + color: black; +} +#uploadprogressbar .desktop { + display: block; +} +#uploadprogressbar .mobile { + display: none; +} + #uploadprogressbar + stop { font-size: 13px; } diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index b88a7031db..3257ded7b8 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -557,7 +557,16 @@ OC.Upload = { window.file_upload_param = fileupload; if (supportAjaxUploadWithProgress()) { - + //remaining time + var lastUpdate = new Date().getMilliseconds(); + var lastSize = 0; + var bufferSize = 20; + var buffer = []; + var bufferIndex = 0; + var bufferTotal = 0; + for(var i = 0; i < bufferSize;i++){ + buffer[i] = 0; + } // add progress handlers fileupload.on('fileuploadadd', function(e, data) { OC.Upload.log('progress handle fileuploadadd', e, data); @@ -570,7 +579,15 @@ OC.Upload = { fileupload.on('fileuploadstart', function(e, data) { OC.Upload.log('progress handle fileuploadstart', e, data); $('#uploadprogresswrapper .stop').show(); + $('#uploadprogresswrapper .label').show(); $('#uploadprogressbar').progressbar({value: 0}); + $('#uploadprogressbar .ui-progressbar-value'). + html('' + + t('files', 'Uploading...') + + '' + + t('files', '...') + + ''); + $('#uploadprogressbar').tipsy({gravity:'n', fade:true, live:true}); OC.Upload._showProgressBar(); }); fileupload.on('fileuploadprogress', function(e, data) { @@ -580,11 +597,67 @@ OC.Upload = { fileupload.on('fileuploadprogressall', function(e, data) { OC.Upload.log('progress handle fileuploadprogressall', e, data); 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) { + bufferTotal = bufferTotal - (buffer[bufferIndex]) + remainingSeconds; + buffer[bufferIndex] = remainingSeconds; //buffer to make it smoother + bufferIndex = (bufferIndex + 1) % bufferSize; + } + var smoothRemainingSeconds = (bufferTotal / bufferSize); //seconds + var date = new Date(smoothRemainingSeconds * 1000); + var timeStringDesktop = ""; + var timeStringMobile = ""; + if(date.getUTCHours() > 0){ + timeStringDesktop = t('files', '{hours}:{minutes}:{seconds} hour{plural_s} left' , { + hours:date.getUTCHours(), + minutes: ('0' + date.getUTCMinutes()).slice(-2), + seconds: ('0' + date.getUTCSeconds()).slice(-2), + plural_s: ( smoothRemainingSeconds === 3600 ? "": "s") // 1 hour = 1*60m*60s = 3600s + }); + timeStringMobile = t('files', '{hours}:{minutes}h' , { + hours:date.getUTCHours(), + minutes: ('0' + date.getUTCMinutes()).slice(-2), + seconds: ('0' + date.getUTCSeconds()).slice(-2) + }); + } else if(date.getUTCMinutes() > 0){ + timeStringDesktop = t('files', '{minutes}:{seconds} minute{plural_s} left' , { + minutes: date.getUTCMinutes(), + seconds: ('0' + date.getUTCSeconds()).slice(-2), + plural_s: (smoothRemainingSeconds === 60 ? "": "s") // 1 minute = 1*60s = 60s + }); + timeStringMobile = t('files', '{minutes}:{seconds}m' , { + minutes: date.getUTCMinutes(), + seconds: ('0' + date.getUTCSeconds()).slice(-2) + }); + } else if(date.getUTCSeconds() > 0){ + timeStringDesktop = t('files', '{seconds} second{plural_s} left' , { + seconds: date.getUTCSeconds(), + plural_s: (smoothRemainingSeconds === 1 ? "": "s") // 1 second = 1s = 1s + }); + timeStringMobile = t('files', '{seconds}s' , {seconds: date.getUTCSeconds()}); + } else { + timeStringDesktop = t('files', 'Any moment now...'); + timeStringMobile = t('files', 'Soon...'); + } + $('#uploadprogressbar .label .mobile').text(timeStringMobile); + $('#uploadprogressbar .label .desktop').text(timeStringDesktop); + $('#uploadprogressbar').attr('original-title', + t('files', '{loadedSize} of {totalSize} ({bitrate})' , { + loadedSize: humanFileSize(data.loaded), + totalSize: humanFileSize(data.total), + bitrate: humanFileSize(data.bitrate) + '/s' + }) + ); $('#uploadprogressbar').progressbar('value', progress); }); fileupload.on('fileuploadstop', function(e, data) { OC.Upload.log('progress handle fileuploadstop', e, data); - OC.Upload._hideProgressBar(); }); fileupload.on('fileuploadfail', function(e, data) { diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php index 29769bcd82..dda7a1814a 100644 --- a/apps/files/templates/list.php +++ b/apps/files/templates/list.php @@ -1,12 +1,10 @@