Add save button to media box

src/directives/mediabox.ts

@@ -36,7 +36,7 @@ export default [
                 this.imageDataUrl = null;
                 this.caption = '';
 
-                // Close method
+                // Close and save
                 this.close = ($event?: Event) => {
                     if ($event !== undefined) {
                         // If this was triggered by a click event, only close the box
@@ -48,13 +48,16 @@ export default [
                         this.imageDataUrl = null;
                     }
                 };
+                this.save = () => {
+                    saveAs(new Blob([mediaboxService.data]), mediaboxService.filename || 'image.jpg');
+                };
 
                 // Listen to Mediabox service events
                 const filter = $filter('bufferToUrl') as (buffer: ArrayBuffer, mimeType: string) => string;
                 mediaboxService.evtMediaChanged.attach((dataAvailable: boolean) => {
                     $rootScope.$apply(() => {
                         this.imageDataUrl = filter(mediaboxService.data, 'image/jpeg');
-                        this.caption = mediaboxService.caption;
+                        this.caption = mediaboxService.caption || mediaboxService.filename;
                     });
                 });
             }],
@@ -70,7 +73,8 @@ export default [
             // tslint:disable:max-line-length
             template: `
                 <div class="box" ng-if="ctrl.imageDataUrl !== null">
-                    <md-icon class="close material-icons md-24" ng-click="ctrl.close()" aria-label="Close" translate-attr="{'aria-label': 'common.CLOSE'}">close</md-icon>
+                    <md-icon class="save material-icons md-24" ng-click="ctrl.save()" aria-label="Save" translate-attr="{'aria-label': 'common.SAVE', 'title': 'common.SAVE'}">save</md-icon>
+                    <md-icon class="close material-icons md-24" ng-click="ctrl.close()" aria-label="Close" translate-attr="{'aria-label': 'common.CLOSE', 'title': 'common.CLOSE'}">close</md-icon>
                     <div class="inner" ng-click="ctrl.close($event)">
                         <img ng-src="{{ ctrl.imageDataUrl }}">
                         <div class="caption">

src/directives/message_media.ts

@@ -166,13 +166,8 @@ export default [
 
                                 switch (this.message.type) {
                                     case 'image':
-                                        let caption;
-                                        if (message.caption) {
-                                            caption = message.caption;
-                                        } else {
-                                            caption = messageService.getFileName(message);
-                                        }
-                                        mediaboxService.setMedia(buffer, caption);
+                                        const caption = message.caption || '';
+                                        mediaboxService.setMedia(buffer, messageService.getFileName(message), caption);
                                         break;
                                     case 'video':
                                         saveAs(new Blob([buffer]), messageService.getFileName(message));

src/sass/components/_mediabox.scss

@@ -40,13 +40,14 @@ mediabox {
             }
         }
 
-        .close {
-            height: 24px;
-            width: 24px;
+
+        md-icon {
             display: block;
+            box-sizing: border-box;
             position: absolute;
+            height: 28px;
+            width: 28px;
             top: 24px;
-            right: 24px;
             color: rgba(255, 255, 255, 0.8);
             background-color: rgba(0, 0, 0, 0.7);
             border: 2px solid rgba(255, 255, 255, 0.8);
@@ -58,6 +59,16 @@ mediabox {
                 color: rgba(255, 255, 255, 1.0);
                 border: 2px solid rgba(255, 255, 255, 1.0);
             }
+
+            &.save {
+                right: 60px;
+                font-size: 20px;
+                padding: 2px;
+            }
+
+            &.close {
+                right: 24px;
+            }
         }
 
         .inner {

src/services/mediabox.ts

@@ -38,6 +38,7 @@ export class MediaboxService {
      */
     public data: ArrayBuffer | null = null;
     public caption: string = '';
+    public filename: string = '';
 
     public static $inject = ['$log'];
     constructor($log: ng.ILogService) {
@@ -47,9 +48,10 @@ export class MediaboxService {
     /**
      * Update media data.
      */
-    public setMedia(data: ArrayBuffer, caption: string) {
+    public setMedia(data: ArrayBuffer, filename: string, caption: string) {
         this.$log.debug(this.logTag, 'Media data updated');
         this.data = data;
+        this.filename = filename;
         this.caption = caption;
         this.evtMediaChanged.post(data !== null);
     }
@@ -60,6 +62,7 @@ export class MediaboxService {
     public clearMedia() {
         this.$log.debug(this.logTag, 'Media data cleared');
         this.data = null;
+        this.filename = '';
         this.caption = '';
         this.evtMediaChanged.post(false);
     }