Merge pull request #1966 from pixelfed/staging

Update StoryCompose component, add upload progress

CHANGELOG.md

@@ -18,6 +18,7 @@
 - Updated StoryController, orientate story media and strip exif ([07a13fcf](https://github.com/pixelfed/pixelfed/commit/07a13fcf))
 - Updated admin reports, fixed 404 bug ([dbd5c4cf](https://github.com/pixelfed/pixelfed/commit/dbd5c4cf))
 - Updated AdminController, abstracted dashboard stats to AdminStatsService ([41abe9d2](https://github.com/pixelfed/pixelfed/commit/41abe9d2))
+- Updated StoryCompose component, added upload progress page ([2de3c56f](https://github.com/pixelfed/pixelfed/commit/2de3c56f))
 
 ### Changed
 

public/mix-manifest.json

@@ -23,7 +23,7 @@
     "/js/quill.js": "/js/quill.js?id=9b15ab0ae830e7293390",
     "/js/search.js": "/js/search.js?id=22e8bccee621e57963d9",
     "/js/status.js": "/js/status.js?id=c0058d6c5fecb0bc96c0",
-    "/js/story-compose.js": "/js/story-compose.js?id=df582bf83d8c0d0bc3de",
+    "/js/story-compose.js": "/js/story-compose.js?id=0a2ac08ac4dbc66b105f",
     "/js/theme-monokai.js": "/js/theme-monokai.js?id=39b089458f249e8717ad",
     "/js/timeline.js": "/js/timeline.js?id=1db81ef37e38304aba79"
 }

resources/assets/js/components/StoryCompose.vue

@@ -79,6 +79,12 @@
 				</p>
 			</div>
 
+			<!-- UPLOADING -->
+			<div v-if="page == 'uploading'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center align-items-center" style="height: 90vh;">
+				<p v-if="uploadProgress != 100" class="display-4 mb-0">Uploading {{uploadProgress}}%</p>
+				<p v-else class="display-4 mb-0">Publishing Story</p>
+			</div>
+
 			<div v-if="page == 'edit'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center" style="height: 90vh;">
 				<div class="text-center flex-fill mt-5 pt-5">
 					<img src="/img/pixelfed-icon-grey.svg" width="60px" height="60px">
@@ -152,10 +158,11 @@
 					'crop',
 					'edit',
 					'confirm',
-					'error'
+					'error',
+					'uploading'
 				],
 				uploading: false,
-				uploadProgress: 100,
+				uploadProgress: 0,
 				cropper: {
 					aspectRatio: 9/16,
 					viewMode: 1,
@@ -192,6 +199,7 @@
 				let self = this;
 				self.uploading = true;
 				let io = document.querySelector('#pf-dz');
+				self.page = 'uploading';
 				Array.prototype.forEach.call(io.files, function(io, i) {
 					if(self.media && self.media.length + i >= self.config.uploader.album_limit) {
 						swal('Error', 'You can only upload ' + self.config.uploader.album_limit + ' photos per album', 'error');
@@ -213,7 +221,7 @@
 
 					let xhrConfig = {
 						onUploadProgress: function(e) {
-							let progress = Math.round( (e.loaded * 100) / e.total );
+							let progress = Math.floor( (e.loaded * 100) / e.total );
 							self.uploadProgress = progress;
 						}
 					};