Luckydonald superduper progressbar branch thingie

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;
+}
+
+}

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;
 }

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('<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();
 				});
 				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) {

apps/files/templates/list.php

@@ -1,12 +1,10 @@
 <div id="controls">
 		<div class="actions creatable hidden">
 			<div id="uploadprogresswrapper">
-				<div id="uploadprogressbar"></div>
-				<button class="stop icon-close" style="display:none">
-					<span class="hidden-visually">
-						<?php p($l->t('Cancel upload'))?>
-					</span>
-				</button>
+				<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>
+				</div>
+				<input type="button" class="stop icon-close" style="display:none" value="" />
 			</div>
 		</div>
 		<div id="file_action_panel"></div>