Merge pull request #642 from threema-ch/640-mediabox

Clear mediabox data on state transitions

src/directives/mediabox.ts

@@ -17,16 +17,17 @@
 
 import {saveAs} from 'file-saver';
 
+import {bufferToUrl, logAdapter} from '../helpers';
 import {MediaboxService} from '../services/mediabox';
 
 export default [
     '$rootScope',
-    '$filter',
     '$document',
+    '$log',
     'MediaboxService',
     function($rootScope: ng.IRootScopeService,
-             $filter: ng.IFilterService,
              $document: ng.IDocumentService,
+             $log: ng.ILogService,
              mediaboxService: MediaboxService) {
         return {
             restrict: 'E',
@@ -34,6 +35,8 @@ export default [
             bindToController: {},
             controllerAs: 'ctrl',
             controller: [function() {
+                this.logTag = '[MediaboxDirective]';
+
                 // Data attributes
                 this.imageDataUrl = null;
                 this.caption = '';
@@ -55,12 +58,18 @@ export default [
                 };
 
                 // Listen to Mediabox service events
-                const bufferToUrl = $filter('bufferToUrl') as
-                    (buffer: ArrayBuffer, mimeType: string, trust: boolean) => string;
                 mediaboxService.evtMediaChanged.attach((dataAvailable: boolean) => {
                     $rootScope.$apply(() => {
-                        this.imageDataUrl = bufferToUrl(mediaboxService.data, mediaboxService.mimetype, true);
-                        this.caption = mediaboxService.caption || mediaboxService.filename;
+                        if (dataAvailable) {
+                            this.imageDataUrl = bufferToUrl(
+                                mediaboxService.data,
+                                mediaboxService.mimetype,
+                                logAdapter($log.debug, this.logTag),
+                            );
+                            this.caption = mediaboxService.caption || mediaboxService.filename;
+                        } else {
+                            this.close();
+                        }
                     });
                 });
             }],

src/directives/message_media.ts

@@ -15,6 +15,7 @@
  * along with Threema Web. If not, see <http://www.gnu.org/licenses/>.
  */
 
+import {Transition as UiTransition, TransitionService as UiTransitionService} from '@uirouter/angularjs';
 import {saveAs} from 'file-saver';
 
 import {bufferToUrl, hasValue, logAdapter} from '../helpers';
@@ -69,6 +70,7 @@ export default [
     '$rootScope',
     '$mdDialog',
     '$timeout',
+    '$transitions',
     '$translate',
     '$log',
     '$filter',
@@ -80,6 +82,7 @@ export default [
              $rootScope: ng.IRootScopeService,
              $mdDialog: ng.material.IDialogService,
              $timeout: ng.ITimeoutService,
+             $transitions: UiTransitionService,
              $translate: ng.translate.ITranslateService,
              $log: ng.ILogService,
              $filter: ng.IFilterService,
@@ -96,6 +99,11 @@ export default [
             controller: [function() {
                 this.logTag = '[MessageMedia]';
 
+                // On state transitions, clear mediabox
+                $transitions.onStart({}, function(trans: UiTransition) {
+                    mediaboxService.clearMedia();
+                });
+
                 this.$onInit = function() {
                     this.type = this.message.type;