Show progress while presentation is being downloaded.

src/styles/components/_presentation.scss

@@ -30,10 +30,25 @@
 .presentation-target {
   width: 100%;
   font-size: 10em;
-  text-align: center;
   margin-top: 30px;
 }
 
+.presentationpane .welcome div {
+  text-align: center;
+}
+
+.presentationpane .welcome .progress span {
+  text-shadow: none;
+}
+
+.presentationpane .welcome .progress .download-info {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  color: $text-color;
+  text-shadow: 1px 1px 1px white;
+}
+
 .mainPresentation #presentation {
   display: block;
 }

static/js/directives/presentation.js

@@ -26,6 +26,7 @@ define(['jquery', 'underscore', 'text!partials/presentation.html'], function($,
 
 			var presentationsCount = 0;
 			var pane = $element.find(".presentationpane");
+			var downloadProgressBar = $element.find(".progress-bar")[0];
 
 			$scope.layout.presentation = false;
 			$scope.isPresenter = false;
@@ -35,6 +36,9 @@ define(['jquery', 'underscore', 'text!partials/presentation.html'], function($,
 			$scope.currentFileInfo = null;
 			$scope.currentPage = null;
 			$scope.receivedPage = null;
+			$scope.downloading = false;
+			$scope.downloadSize = 0;
+			$scope.downloadProgress = 0;
 
 			$scope.resetProperties = function() {
 				$scope.isPresenter = false;
@@ -45,6 +49,7 @@ define(['jquery', 'underscore', 'text!partials/presentation.html'], function($,
 			};
 
 			$scope.$on("pdfLoaded", function(event, source, doc) {
+				$scope.downloading = false;
 				if ($scope.isPresenter) {
 					$scope.$emit("showPdfPage", 1);
 				} else if ($scope.pendingPageRequest !== null) {
@@ -57,8 +62,15 @@ define(['jquery', 'underscore', 'text!partials/presentation.html'], function($,
 			});
 
 			var downloadScope = $scope.$new();
+			downloadScope.$on("downloadedChunk", function(event, idx, byteLength, downloaded, total) {
+				var percentage = Math.ceil((downloaded / total) * 100);
+				$scope.downloadProgress = percentage;
+				downloadProgressBar.style.width = percentage + '%';
+			});
 			downloadScope.$on("downloadComplete", function(event) {
 				event.stopPropagation();
+				$scope.downloadProgress = 100;
+				downloadProgressBar.style.width = '100%';
 				finishDownloadPresentation();
 			});
 
@@ -87,6 +99,10 @@ define(['jquery', 'underscore', 'text!partials/presentation.html'], function($,
 				var token = fileInfo.id;
 				$scope.presentationLoaded = false;
 				$scope.pendingPageRequest = null;
+				downloadProgressBar.style.width = '0%';
+				$scope.downloadProgress = 0;
+				$scope.downloadSize = fileInfo.size;
+				$scope.downloading = true;
 				downloadScope.info = fileInfo;
 				downloadScope.handler = mediaStream.tokens.on(token, function(event, currenttoken, to, data, type, to2, from, xfer) {
 					//console.log("Presentation token request", currenttoken, data, type);

static/partials/presentation.html

@@ -1,10 +1,17 @@
 <div class="presentation">
 	<div class="presentationpane nicescroll">
-		<pdfcanvas ng-hide="maxPageNumber === -1" />
+		<div class="welcome container-fluid" ng-show="downloading">
-		<div class="welcome container-fluid" ng-hide="maxPageNumber !== -1">
+			<h1>{{_('Downloading presentation...')}}</h1>
+			<div class="progress">
+				<span class="download-info">{{downloadSize|humanizeFilesize}} <span ng-show="downloading">/ {{downloadProgress}}%</span></span>
+				<div class="progress-bar progress-bar-success"></div>
+			</div>
+		</div>
+		<div class="welcome container-fluid" ng-hide="maxPageNumber !== -1 || downloading">
 			<h1>{{_('Please drop a PDF document here to present it to the other participants.')}}</h1>
 			<div class="presentation-target fa fa-file-pdf-o"></div>
 		</div>
+		<pdfcanvas ng-hide="maxPageNumber === -1 || downloading" />
 	</div>
 	<div class="overlaybar form-horizontal" ng-class="{notvisible: hideControlsBar}">
 		<a class="overlaybar-button" ng-model="hideControlsBar" btn-checkbox btn-checkbox btn-checkbox-true="0" btn-checkbox-false="1" title="{{_('Presentation controls')}}"><i class="fa fa-cogs"></i></a>