Make image format of avatar and thumbnail configurable by the app.

src/directives/avatar.ts

@@ -79,7 +79,8 @@ export default [
                     if (data === null || data === undefined) {
                         return '';
                     }
-                    return ($filter('bufferToUrl') as (data: ArrayBuffer, mime: string) => string)(data, 'image/png');
+                    const filter = $filter('bufferToUrl') as (data: ArrayBuffer, mime: string) => string;
+                    return filter(data, webClientService.appCapabilities.imageFormat.avatar);
                 };
 
                 /**

src/directives/avatar_area.ts

@@ -17,6 +17,8 @@
 
 // tslint:disable:max-line-length
 
+import {WebClientService} from '../services/webclient';
+
 /**
  * Support uploading and resizing avatar
  */
@@ -27,12 +29,14 @@ export default [
     '$timeout',
     '$translate',
     '$mdDialog',
+    'WebClientService',
     function($rootScope: ng.IRootScopeService,
              $log: ng.ILogService,
              $window: ng.IWindowService,
              $timeout: ng.ITimeoutService,
              $translate: ng.translate.ITranslateService,
-             $mdDialog: ng.material.IDialogService) {
+             $mdDialog: ng.material.IDialogService,
+             webClientService: WebClientService) {
         return {
             restrict: 'EA',
             scope: true,
@@ -82,6 +86,7 @@ export default [
                         controllerAs: 'ctrl',
                         controller: function() {
                             this.avatar = null;
+                            this.avatarFormat = webClientService.appCapabilities.imageFormat.avatar;
 
                             this.apply = () => {
                                 $mdDialog.hide(this.avatar);
@@ -142,7 +147,7 @@ export default [
                                     md-diameter="96"></md-progress-circular>
 
                         </div>
-                        <img ng-src="{{ ctrl.avatar | bufferToUrl:'image/png' }}" ng-if="ctrl.avatar !== null" />
+                        <img ng-src="{{ ctrl.avatar | bufferToUrl:avatarFormat }}" ng-if="ctrl.avatar !== null" />
                     </div>
                     <div class="avatar-area-navigation"  layout="row" layout-wrap layout-margin layout-align="center">
 

src/directives/avatar_editor.ts

@@ -71,7 +71,8 @@ export default [
                                     type: 'blob',
                                     // max allowed size on device
                                     size: [512, 512],
-                                    circle: 'false',
+                                    circle: false,
+                                    format: 'png',
                                 })
                                     .then((blob: Blob) => {
                                         const fileReader = new FileReader();

src/directives/message_media.html

@@ -29,7 +29,7 @@
         <span class="in-view-indicator" ng-if="ctrl.type !== 'location'" in-view="ctrl.thumbnailInView($inview)"></span>
         <img ng-if="ctrl.thumbnail" ng-src="{{ctrl.thumbnail}}">
         <div ng-if="ctrl.message.thumbnail && !ctrl.thumbnail" class="thumbnail-loader">
-            <img ng-src="{{ ctrl.message.thumbnail.preview | bufferToUrl: 'image/png' }}">
+            <img ng-src="{{ ctrl.message.thumbnail.preview | bufferToUrl:ctrl.thumbnailFormat }}">
         </div>
 
     </div>
@@ -65,7 +65,7 @@
         <div class="circle"
              ng-class="{active: !ctrl.isDownloading()}"
              ng-if="!ctrl.downloaded"
-             ng-style="{'background-image': 'url({{ctrl.message.thumbnail.preview | bufferToUrl: 'image/png'}})' }">
+             ng-style="{'background-image': 'url({{ ctrl.message.thumbnail.preview | bufferToUrl:ctrl.thumbnailFormat }})' }">
             <i class="material-icons md-24">file_download</i>
             <div class="loading" ng-class="{active: ctrl.isDownloading()}"></div>
         </div>
@@ -73,7 +73,7 @@
         <!-- File type indicator -->
         <div class="circle"
              ng-if="ctrl.downloaded && ctrl.message.thumbnail.preview !== undefined"
-             ng-style="{'background-image': 'url({{ctrl.message.thumbnail.preview | bufferToUrl: 'image/png'}})' }">
+             ng-style="{'background-image': 'url({{ ctrl.message.thumbnail.preview | bufferToUrl:ctrl.thumbnailFormat }})' }">
         </div>
         <div class="circle"
              ng-if="ctrl.downloaded && ctrl.message.thumbnail.preview == undefined">

src/directives/message_media.ts

@@ -68,6 +68,7 @@ export default [
                         || this.isAnimGif);
 
                 this.thumbnail = null;
+                this.thumbnailFormat = webClientService.appCapabilities.imageFormat.thumbnail;
 
                 if (this.message.thumbnail !== undefined) {
                     this.thumbnailStyle = {
@@ -92,8 +93,12 @@ export default [
                         this.thumbnail = null;
                     } else {
                         if (this.thumbnail === null) {
+                            const bufferToUrl = $filter<any>('bufferToUrl');
                             if (this.message.thumbnail.img !== undefined) {
-                                this.thumbnail = $filter<any>('bufferToUrl')(this.message.thumbnail.img, 'image/png');
+                                this.thumbnail = bufferToUrl(
+                                    this.message.thumbnail.img,
+                                    webClientService.appCapabilities.imageFormat.thumbnail,
+                                );
                                 return;
                             } else {
                                 this.thumbnailDownloading = true;
@@ -102,7 +107,10 @@ export default [
                                         this.receiver,
                                         this.message).then((img) => {
                                         $timeout(() => {
-                                            this.thumbnail = $filter<any>('bufferToUrl')(img, 'image/png');
+                                            this.thumbnail = bufferToUrl(
+                                                img,
+                                                webClientService.appCapabilities.imageFormat.thumbnail,
+                                            );
                                             this.thumbnailDownloading = false;
                                         });
                                     });
@@ -180,6 +188,7 @@ export default [
                                         mediaboxService.setMedia(
                                             blobInfo.buffer,
                                             blobInfo.filename,
+                                            blobInfo.mimetype,
                                             caption,
                                         );
                                         break;

src/services/webclient.ts

@@ -2339,6 +2339,7 @@ export class WebClientService {
                 maxGroupSize: getOrDefault<number>(data.capabilities.maxGroupSize, 50),
                 maxFileSize: getOrDefault<number>(data.capabilities.maxFileSize, 50 * 1024 * 1024),
                 distributionLists: getOrDefault<boolean>(data.capabilities.distributionLists, true),
+                imageFormat: data.capabilities.imageFormat,
                 mdm: data.capabilities.mdm,
             },
         };

src/threema.d.ts

@@ -682,9 +682,18 @@ declare namespace threema {
         maxGroupSize: number;
         maxFileSize: number;
         distributionLists: boolean;
+        imageFormat: ImageFormat;
         mdm?: MdmRestrictions;
     }
 
+    /**
+     * MIME types for the images exchanged between app and browser.
+     */
+    interface ImageFormat {
+        avatar: string;
+        thumbnail: string;
+    }
+
     interface MdmRestrictions {
         disableAddContact?: boolean;
         disableCreateGroup?: boolean;