Fix Thumbnail preview (#1689)

* Fix Thumbnail preview

* Fix thumbnail unit test

* Remove the fix prexif

ng2-components/ng2-activiti-form/src/components/activiti-content.component.html

@@ -14,9 +14,9 @@
             <button (click)="openViewer(content)" class="mdl-button mdl-js-button mdl-button--icon">
                 <i class="material-icons">zoom_in</i>
             </button>
-            <a (click)="download($event)" [href]="content.contentRawUrl" target="_blank" [download]='content.name' class="mdl-button mdl-js-button mdl-button--icon">
+            <div (click)="download(content)" class="mdl-button mdl-js-button mdl-button--icon">
                 <i class="material-icons">file_download</i>
-            </a>
+            </div>
         </div>
     </div>
 </div>

ng2-components/ng2-activiti-form/src/components/activiti-content.component.ts

@@ -78,6 +78,7 @@ export class ActivitiContent implements OnChanges {
     }
 
     loadThumbnailUrl(content: ContentLinkModel) {
+        if (this.content.isThumbnailSupported()) {
             if (this.content.isTypeImage()) {
                 this.formService.getFileRawContent(content.id).subscribe(
                     (response: Blob) => {
@@ -87,9 +88,16 @@ export class ActivitiContent implements OnChanges {
                         this.logService.error(error);
                     }
                 );
-        } else if (this.content.isThumbnailSupported()) {
+            } else {
-            this.content.contentRawUrl = this.formService.getFileRawContentUrl(content.id);
+                this.formService.getContentThumbnailUrl(content.id).subscribe(
-            this.content.thumbnailUrl = this.formService.getContentThumbnailUrl(content.id);
+                    (response: Blob) => {
+                        this.content.thumbnailUrl = this.createUrlPreview(response);
+                    },
+                    error => {
+                        this.logService.error(error);
+                    }
+                );
+            }
         }
     }
 
@@ -101,12 +109,31 @@ export class ActivitiContent implements OnChanges {
     /**
      * Download file opening it in a new window
      */
-    download($event) {
+    download(content) {
-        $event.stopPropagation();
+        this.formService.getFileRawContent(content.id).subscribe(
+            (response: Blob) => {
+                let thumbnailUrl = this.createUrlPreview(response);
+                this.createDownloadElement(thumbnailUrl, content.name);
+            },
+            error => {
+                this.logService.error(error);
+            }
+        );
+    }
+
+    createDownloadElement(url: string, name: string) {
+        let downloadElement = window.document.createElement('a');
+        downloadElement.setAttribute('id', 'export-download');
+        downloadElement.setAttribute('href', url);
+        downloadElement.setAttribute('download', name);
+        downloadElement.setAttribute('target', '_blank');
+        window.document.body.appendChild(downloadElement);
+        downloadElement.click();
+        window.document.body.removeChild(downloadElement);
     }
 
     private sanitizeUrl(url: string) {
-        return this.sanitizer.bypassSecurityTrustUrl(url);
+        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
     }
 
     private createUrlPreview(blob: Blob) {

ng2-components/ng2-activiti-form/src/services/form.service.spec.ts

@@ -16,6 +16,7 @@
  */
 
 import { TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Rx';
 import { CoreModule, AlfrescoApiService, LogService, LogServiceMock } from 'ng2-alfresco-core';
 import { FormService } from './form.service';
 import { EcmModelService } from './ecm-model.service';
@@ -32,6 +33,17 @@ describe('FormService', () => {
     let logService: LogService;
     let bpmCli: any;
 
+    function createFakeBlob() {
+        let data = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
+
+        let bytes = new Uint8Array(data.length / 2);
+
+        for (let i = 0; i < data.length; i += 2) {
+            bytes[i / 2] = parseInt(data.substring(i, i + 2), /* base = */ 16);
+        }
+        return new Blob([bytes], {type: 'image/png'});
+    }
+
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [
@@ -444,11 +456,18 @@ describe('FormService', () => {
         expect(contentRawUrl).toEqual(`${bpmCli.basePath}/api/enterprise/content/${contentId}/raw`);
     });
 
-    it('should return the thumbnail URL', () => {
+    it('should return a Blob as thumbnail', (done) => {
         let contentId: number = 999;
 
-        let contentRawUrl = service.getContentThumbnailUrl(contentId);
+        let blob = createFakeBlob();
-        expect(contentRawUrl).toEqual(`${bpmCli.basePath}/app/rest/content/${contentId}/rendition/thumbnail`);
+        spyOn(service, 'getContentThumbnailUrl').and.returnValue(Observable.of(blob));
+
+        service.getContentThumbnailUrl(contentId).subscribe(result => {
+            expect(result).toEqual(jasmine.any(Blob));
+            expect(result.size).toEqual(48);
+            expect(result.type).toEqual('image/png');
+            done();
+        });
     });
 
     it('should create a Form form a Node', (done) => {

ng2-components/ng2-activiti-form/src/services/form.service.ts

@@ -267,9 +267,9 @@ export class FormService {
         return alfrescoApi.activiti.contentApi.getRawContentUrl(contentId);
     }
 
-    getContentThumbnailUrl(contentId: number): string {
+    getContentThumbnailUrl(contentId: number): Observable<any> {
         let alfrescoApi = this.apiService.getInstance();
-        return alfrescoApi.activiti.contentApi.getContentThumbnailUrl(contentId);
+        return Observable.fromPromise(alfrescoApi.activiti.contentApi.getContentThumbnailUrl(contentId));
     }
 
     getRestFieldValues(taskId: string, field: string): Observable<any> {