Show downloading indicator on downloading a message via menu (#335)

Fixes #334

src/directives/message.html

@@ -24,7 +24,8 @@
             ng-if="ctrl.showMedia"
             class="message-media"
             eee-message="ctrl.message"
-            eee-receiver="ctrl.receiver">
+            eee-receiver="ctrl.receiver"
+            eee-show-downloading="ctrl.isDownloading">
         </eee-message-media>
 
         <eee-message-voip-status

src/directives/message.ts

@@ -106,10 +106,11 @@ export default [
                 };
 
                 this.download = (ev) => {
+                    this.downloading = true;
                     webClientService.requestBlob(this.message.id, this.receiver)
                         .then((buffer: ArrayBuffer) => {
                             $rootScope.$apply(() => {
-                                // this.downloading = false;
+                                this.downloading = false;
                                 // this.downloaded = true;
 
                                 switch (this.message.type) {
@@ -126,10 +127,14 @@ export default [
                         })
                         .catch((error) => {
                             $log.error('error downloading blob ', error);
-                            // this.downloading = false;
+                            this.downloading = false;
                             // this.downloaded = true;
                         });
                 };
+
+                this.isDownloading = () => {
+                    return this.downloading;
+                };
             }],
             link: function(scope: any, element: ng.IAugmentedJQuery, attrs) {
                 // Prevent status messages from being draggable

src/directives/message_media.html

@@ -13,16 +13,16 @@
     <div ng-if="ctrl.showThumbnail" class="thumbnail {{ ctrl.type }}" ng-click="ctrl.download()" ng-style="ctrl.thumbnailStyle">
 
         <!-- Loading indicator -->
-        <div class="loading-wrapper" ng-class="{active: ctrl.downloading || ctrl.thumbnailDownloading}">
+        <div class="loading-wrapper" ng-class="{active: ctrl.isDownloading()}">
             <div class="loading"></div>
             <div class="loading-text" translate>messenger.DOWNLOADING</div>
         </div>
 
         <!-- Thumbnail overlays for videos and GIFs -->
-        <div class="overlay video" ng-if="ctrl.type === 'video' && !ctrl.downloading">
+        <div class="overlay video" ng-if="ctrl.type === 'video' && !ctrl.isDownloading()">
             <i class="material-icons md-light">play_circle_outline</i>
         </div>
-        <div class="overlay gif" ng-if="ctrl.type === 'file' && ctrl.message.file.type === 'image/gif' && !ctrl.downloading">
+        <div class="overlay gif" ng-if="ctrl.type === 'file' && ctrl.message.file.type === 'image/gif' && !ctrl.isDownloading()">
             <i class="material-icons md-light">play_circle_outline</i>
         </div>
 
@@ -41,10 +41,10 @@
     <div class="file-message" ng-if="ctrl.type === 'audio'" ng-click="ctrl.download()">
         <!-- Loading indicator -->
         <div class="circle"
-             ng-class="{active: !ctrl.downloading}"
+             ng-class="{active: !ctrl.isDownloading()}"
              ng-if="!ctrl.downloaded">
             <i class="material-icons md-24">file_download</i>
-            <div class="loading" ng-class="{active: ctrl.downloading}"></div>
+            <div class="loading" ng-class="{active: ctrl.isDownloading()}"></div>
         </div>
         <!-- Play Indicator -->
         <div class="circle" ng-click="ctrl.download()" ng-if="ctrl.downloaded">
@@ -63,11 +63,11 @@
 
         <!-- Loading indicator -->
         <div class="circle"
-             ng-class="{active: !ctrl.downloading}"
+             ng-class="{active: !ctrl.isDownloading()}"
              ng-if="!ctrl.downloaded"
              ng-style="{'background-image': 'url({{ctrl.message.thumbnail.preview | bufferToUrl: 'image/png'}})' }">
             <i class="material-icons md-24">file_download</i>
-            <div class="loading" ng-class="{active: ctrl.downloading}"></div>
+            <div class="loading" ng-class="{active: ctrl.isDownloading()}"></div>
         </div>
 
         <!-- File type indicator -->

src/directives/message_media.ts

@@ -44,6 +44,7 @@ export default [
             bindToController: {
                 message: '=eeeMessage',
                 receiver: '=eeeReceiver',
+                showDownloading: '=eeeShowDownloading',
             },
             controllerAs: 'ctrl',
             controller: [function() {
@@ -204,6 +205,12 @@ export default [
                             this.downloaded = true;
                         });
                 };
+
+                this.isDownloading = () => {
+                    return this.downloading
+                        || this.thumbnailDownloading
+                        || (this.showDownloading && this.showDownloading());
+                };
             }],
             templateUrl: 'directives/message_media.html',
         };