Merge branch 'dev' of https://github.com/redmatrix/hubzilla into dev_merge

include/attach.php

@@ -74,6 +74,7 @@ function z_mime_content_type($filename) {
 //	'webm' => 'audio/webm',
 	'mp4' => 'video/mp4',
 //	'mp4' => 'audio/mp4',
+	'mkv' => 'video/x-matroska',
 
 	// adobe
 	'pdf' => 'application/pdf',

include/text.php

@@ -2608,32 +2608,33 @@ function getIconFromType($type) {
 		'application/octet-stream' => 'fa-file-o',
 		//Text
 		'text/plain' => 'fa-file-text-o',
-		'application/msword' => 'fa-file-text-o',
+		'application/msword' => 'fa-file-word-o',
-		'application/pdf' => 'fa-file-text-o',
+		'application/pdf' => 'fa-file-pdf-o',
-		'application/vnd.oasis.opendocument.text' => 'fa-file-text-o',
+		'application/vnd.oasis.opendocument.text' => 'fa-file-word-o',
 		'application/epub+zip' => 'fa-book',
 		//Spreadsheet
-		'application/vnd.oasis.opendocument.spreadsheet' => 'fa-table',
+		'application/vnd.oasis.opendocument.spreadsheet' => 'fa-file-excel-o',
-		'application/vnd.ms-excel' => 'fa-table',
+		'application/vnd.ms-excel' => 'fa-file-excel-o',
 		//Image
 		'image/jpeg' => 'fa-picture-o',
 		'image/png' => 'fa-picture-o',
 		'image/gif' => 'fa-picture-o',
 		'image/svg+xml' => 'fa-picture-o',
 		//Archive
-		'application/zip' => 'fa-archive',
+		'application/zip' => 'fa-file-archive-o',
-		'application/x-rar-compressed' => 'fa-archive',
+		'application/x-rar-compressed' => 'fa-file-archive-o',
 		//Audio
-		'audio/mpeg' => 'fa-music',
+		'audio/mpeg' => 'fa-file-audio-o',
-		'audio/wav' => 'fa-music',
+		'audio/wav' => 'fa-file-audio-o',
-		'application/ogg' => 'fa-music',
+		'application/ogg' => 'fa-file-audio-o',
-		'audio/ogg' => 'fa-music',
+		'audio/ogg' => 'fa-file-audio-o',
-		'audio/webm' => 'fa-music',
+		'audio/webm' => 'fa-file-audio-o',
-		'audio/mp4' => 'fa-music',
+		'audio/mp4' => 'fa-file-audio-o',
 		//Video
-		'video/quicktime' => 'fa-film',
+		'video/quicktime' => 'fa-file-video-o',
-		'video/webm' => 'fa-film',
+		'video/webm' => 'fa-file-video-o',
-		'video/mp4' => 'fa-film'
+		'video/mp4' => 'fa-file-video-o',
+		'video/x-matroska' => 'fa-file-video-o'
 	);
 
 	$iconFromType = 'fa-file-o';

view/css/conversation.css

@@ -43,7 +43,7 @@
 #profile-jot-text.hover {
 	background-color: aliceblue;
 	opacity: 0.5;
-        box-shadow: inset 0 3px 4px #888;
+	box-shadow: inset 0 0px 7px #5cb85c;
 }
 
 .jot-attachment {

view/css/mod_cloud.css

@@ -47,3 +47,10 @@
 	opacity: 0.5;
 	box-shadow: inset 0 0px 7px #5cb85c;
 }
+
+.upload-progress-bar {
+	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOM2RFTDwAE2QHxFMHIIwAAAABJRU5ErkJggg==') repeat-y;
+	background-size: 0px;
+	padding: 0px !important;
+	height: 3px;
+}

view/js/mod_cloud.js

@@ -22,6 +22,7 @@ function UploadInit() {
 	if (xhr.upload) {
 
 		// file select
+		fileselect.attr("multiple", 'multiple');
 		fileselect.on("change", UploadFileSelectHandler);
 
 		// file submit
@@ -64,30 +65,37 @@ function DragDropUploadFileSelectHandler(e) {
 // file selection via input
 function UploadFileSelectHandler(e) {
 	// fetch FileList object
-	if(e.type === 'click') {
+	if(e.target.id === 'upload-submit') {
 		e.preventDefault();
 		var files = e.data[0].files;
 	}
-	else {
+	if(e.target.id === 'files-upload') {
+		$('.new-upload').remove();
 		var files = e.target.files;
 	}
 
-	$('.new-upload').remove();
-
 	// process all File objects
 	for (var i = 0, f; f = files[i]; i++) {
+		if(e.target.id === 'files-upload')
 			prepareHtml(f, i);
-		if(e.type === 'click')
+		if(e.target.id === 'upload-submit') {
 			UploadFile(f, i);
 		}
+	}
 }
 
 function prepareHtml(f, i) {
-	$("#cloud-index").prepend(
+	var num = i - 1;
-		"<tr class='new-upload'>" + "<td id='upload-progress-" + i + "'></td><td>" + f.name +
+	$('#cloud-index #new-upload-progress-bar-' + num.toString()).after(
-		"</td><td>" + f.type +
+		'<tr id="new-upload-' + i + '" class="new-upload">' +
-		"</td><td></td><td></td><td></td><td></td><td>" + formatSizeUnits(f.size) +
+		'<td><i class="fa ' + getIconFromType(f.type) + '" title="' + f.type + '"></i></td>' +
-		"</td><td></td></tr>"
+		'<td>' + f.name + '</td>' +
+		'<td id="upload-progress-' + i + '"></td><td></td><td></td><td></td><td></td>' +
+		'<td class="hidden-xs">' + formatSizeUnits(f.size) + '</td><td class="hidden-xs"></td>' +
+		'</tr>' +
+		'<tr id="new-upload-progress-bar-' + i + '" class="new-upload">' +
+		'<td id="upload-progress-bar-' + i + '" colspan="9" class="upload-progress-bar"></td>' +
+		'</tr>'
 	);
 }
 
@@ -101,6 +109,52 @@ function formatSizeUnits(bytes){
         return bytes;
 }
 
+// this is basically a js port of include/text.php getIconFromType() function
+function getIconFromType(type) {
+	var map = {
+		//Common file
+		'application/octet-stream': 'fa-file-o',
+		//Text
+		'text/plain': 'fa-file-text-o',
+		'application/msword': 'fa-file-word-o',
+		'application/pdf': 'fa-file-pdf-o',
+		'application/vnd.oasis.opendocument.text': 'fa-file-word-o',
+		'application/epub+zip': 'fa-book',
+		//Spreadsheet
+		'application/vnd.oasis.opendocument.spreadsheet': 'fa-file-excel-o',
+		'application/vnd.ms-excel': 'fa-file-excel-o',
+		//Image
+		'image/jpeg': 'fa-picture-o',
+		'image/png': 'fa-picture-o',
+		'image/gif': 'fa-picture-o',
+		'image/svg+xml': 'fa-picture-o',
+		//Archive
+		'application/zip': 'fa-file-archive-o',
+		'application/x-rar-compressed': 'fa-file-archive-o',
+		//Audio
+		'audio/mpeg': 'fa-file-audio-o',
+		'audio/mp3': 'fa-file-audio-o', //webkit browsers need that
+		'audio/wav': 'fa-file-audio-o',
+		'application/ogg': 'fa-file-audio-o',
+		'audio/ogg': 'fa-file-audio-o',
+		'audio/webm': 'fa-file-audio-o',
+		'audio/mp4': 'fa-file-audio-o',
+		//Video
+		'video/quicktime': 'fa-file-video-o',
+		'video/webm': 'fa-file-video-o',
+		'video/mp4': 'fa-file-video-o',
+		'video/x-matroska': 'fa-file-video-o'
+	};
+
+	var iconFromType = 'fa-file-o';
+
+	if (type in map) {
+		iconFromType = map[type];
+	}
+
+	return iconFromType;
+}
+
 // upload  files
 function UploadFile(file, idx) {
 
@@ -111,19 +165,30 @@ function UploadFile(file, idx) {
 	xhr.withCredentials = true;   // Include the SESSION cookie info for authentication
 
 	(xhr.upload || xhr).addEventListener('progress', function (e) {
+
 		var done = e.position || e.loaded;
 		var total = e.totalSize || e.total;
 		// Dynamically update the percentage complete displayed in the file upload list
 		$('#upload-progress-' + idx).html(Math.round(done / total * 100) + '%');
+		$('#upload-progress-bar-' + idx).css('background-size', Math.round(done / total * 100) + '%');
+
+		if(done == total) {
+			$('#upload-progress-' + idx).html('Processing...');
+		}
+
 	});
 
+
 	xhr.addEventListener('load', function (e) {
+		//we could possibly turn the filenames to real links here and add the delete and edit buttons to avoid page reload...
+		$('#upload-progress-' + idx).html('Ready!');
 
 		//console.log('xhr upload complete', e);
 		window.fileUploadsCompleted = window.fileUploadsCompleted + 1;
 
 		// When all the uploads have completed, refresh the page
 		if (window.filesToUpload > 0 && window.fileUploadsCompleted === window.filesToUpload) {
+
 			window.fileUploadsCompleted = window.filesToUpload = 0;
 
 			// After uploads complete, refresh browser window to display new files
@@ -131,11 +196,20 @@ function UploadFile(file, idx) {
 		}
 	});
 
+
+	xhr.addEventListener('error', function (e) {
+		$('#upload-progress-' + idx).html('<span style="color: red;">ERROR</span>');
+	});
+
 	// POST to the entire cloud path 
 	xhr.open('post', window.location.pathname, true);
 
-	var data = new FormData(document.getElementById("ajax-upload-files"));
+	var formfields = $("#ajax-upload-files").serializeArray();
 
+	var data = new FormData();
+	$.each(formfields, function(i, field) {
+		data.append(field.name, field.value);
+	});
 	data.append('file', file);
 
 	xhr.send(data);

view/tpl/cloud_actionspanel.tpl

@@ -13,7 +13,7 @@
     <input type="hidden" name="sabreAction" value="put">
     <label for="files-upload">{{$upload_header}}</label>
     <div class="clear"></div>
-    <input class="form-group pull-left" id="files-upload" type="file" name="file" multiple>
+    <input class="form-group pull-left" id="files-upload" type="file" name="file">
     <button id="upload-submit" class="btn btn-primary btn-sm pull-right" type="submit" value="{{$upload_submit}}">{{$upload_submit}}</button>
   </form>
   <div class="clear"></div>

view/tpl/cloud_directory.tpl

@@ -18,6 +18,7 @@
 			<td class="hidden-xs"></td>
 		</tr>
 	{{/if}}
+		<tr id="new-upload-progress-bar--1"></tr> {{* this is needed to append the upload files in the right order *}}
 	{{foreach $entries as $item}}
 		<tr id="cloud-index-{{$item.attachId}}">
 			<td><i class="fa {{$item.iconFromType}}" title="{{$item.type}}"></i></td>
@@ -38,6 +39,7 @@
 		<tr id="cloud-tools-{{$item.attachId}}">
 			<td id="perms-panel-{{$item.attachId}}" colspan="9"></td>
 		</tr>
+
 	{{/foreach}}
 	</table>
 </div>

view/tpl/jot-header.tpl

@@ -511,10 +511,10 @@ function enableOnUser(){
       xhr.addEventListener('load', function (e) {
         //console.log('xhr upload complete', e);
         window.fileUploadsCompleted = window.fileUploadsCompleted + 1;
-        // When all the uploads have completed, refresh the page
-        if (window.filesToUpload > 0 && window.fileUploadsCompleted === window.filesToUpload) {
 		addeditortext(xhr.responseText);
 		$('#jot-media').val($('#jot-media').val() + xhr.responseText);
+        // When all the uploads have completed, refresh the page
+        if (window.filesToUpload > 0 && window.fileUploadsCompleted === window.filesToUpload) {  
           $('#profile-rotator').spin(false);
           window.fileUploadsCompleted = window.filesToUpload = 0;
         }