[ACS-8863] Add nodeMimeType to keep proper file icon when renditions are generated (#10508)

* [ACS-8863] Add nodeMimeType to keep proper file icon when renditions are generated

* [ACS-8863] Small fix

docs/core/components/viewer.component.md

@@ -89,6 +89,7 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
 | urlFile | `string` | "" | If you want to load an external file that does not come from ACS you can use this URL to specify where to load the file from. |
 | viewerExtensions | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | Template containing ViewerExtensionDirective instances providing different viewer extensions based on supported file extension. |
 | nodeId | `string` | null | Identifier of a node opened by a viewer. |
+| nodeMimeType | `string` | undefined | Original node mime type, should be provided when renditiona mime type is different. |
 
 ### Events
 

lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html

@@ -20,6 +20,7 @@
     [hideInfoButton]="hideInfoButton"
     [fileName]="fileName"
     [mimeType]="mimeType"
+    [nodeMimeType]="nodeMimeType"
     [urlFile]="urlFileContent"
     [tracks]="tracks"
     [readOnly]="readOnly"

lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts

@@ -466,7 +466,7 @@ describe('AlfrescoViewerComponent', () => {
     });
 
     describe('mimeType', () => {
-        it('should set mime type based on renditionMimeType rather then nodeData', async () => {
+        it('should set mime type based on renditionMimeType rather then nodeData and keep proper nodeMimeType', async () => {
             const defaultNode: Node = {
                 id: 'mock-id',
                 name: 'Mock Node',
@@ -499,6 +499,7 @@ describe('AlfrescoViewerComponent', () => {
 
             await fixture.whenStable();
             expect(component.mimeType).toEqual('application/pdf');
+            expect(component.nodeMimeType).toEqual('application/msWord');
         });
     });
 

lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts

@@ -211,6 +211,7 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit {
     urlFileContent: string;
     fileName: string;
     mimeType: string;
+    nodeMimeType: string;
     nodeEntry: NodeEntry;
     tracks: Track[] = [];
     readOnly: boolean = true;
@@ -317,6 +318,7 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit {
     private async setUpNodeFile(nodeData: Node, versionData?: Version): Promise<void> {
         this.readOnly = !this.contentService.hasAllowableOperations(nodeData, 'update');
         let mimeType: string;
+        let nodeMimeType: string;
         let urlFileContent: string;
 
         if (versionData?.content) {
@@ -324,6 +326,7 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit {
         } else if (nodeData.content) {
             mimeType = nodeData.content.mimeType;
         }
+        nodeMimeType = mimeType;
 
         const currentFileVersion = this.nodeEntry?.entry?.properties?.['cm:versionLabel']
             ? encodeURI(this.nodeEntry?.entry?.properties['cm:versionLabel'])
@@ -333,7 +336,6 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit {
         urlFileContent = urlFileContent + '&' + currentFileVersion;
 
         const fileExtension = this.viewUtilService.getFileExtension(versionData ? versionData.name : nodeData.name);
-        this.fileName = versionData ? versionData.name : nodeData.name;
         const viewerType = this.viewUtilService.getViewerType(fileExtension, mimeType);
 
         if (viewerType === 'unknown') {
@@ -346,7 +348,7 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit {
             if (nodeRendition) {
                 urlFileContent = nodeRendition.url;
 
-                const nodeMimeType = nodeData?.content?.mimeType;
+                nodeMimeType = nodeData?.content?.mimeType;
                 const renditionMimeType = nodeRendition.mimeType;
                 mimeType = renditionMimeType || nodeMimeType;
             }
@@ -355,6 +357,8 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit {
         }
 
         this.mimeType = mimeType;
+        this.nodeMimeType = nodeMimeType;
+        this.fileName = versionData ? versionData.name : nodeData.name;
         this.urlFileContent = urlFileContent + (this.cacheBusterNumber ? '&' + this.cacheBusterNumber : '');
         this.sidebarRightTemplateContext.node = nodeData;
         this.sidebarLeftTemplateContext.node = nodeData;

lib/core/src/lib/viewer/components/viewer.component.spec.ts

@@ -35,6 +35,7 @@ import { ViewerWithCustomSidebarComponent } from './mock/adf-viewer-container-si
 import { ViewerWithCustomToolbarActionsComponent } from './mock/adf-viewer-container-toolbar-actions.component.mock';
 import { ViewerWithCustomToolbarComponent } from './mock/adf-viewer-container-toolbar.component.mock';
 import { ViewerComponent } from './viewer.component';
+import { ThumbnailService } from '@alfresco/adf-core';
 
 @Component({
     selector: 'adf-dialog-dummy',
@@ -49,6 +50,7 @@ describe('ViewerComponent', () => {
     let dialog: MatDialog;
     let viewUtilService: ViewUtilService;
     let appConfigService: AppConfigService;
+    let thumbnailService: ThumbnailService;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -72,6 +74,7 @@ describe('ViewerComponent', () => {
         dialog = TestBed.inject(MatDialog);
         viewUtilService = TestBed.inject(ViewUtilService);
         appConfigService = TestBed.inject(AppConfigService);
+        thumbnailService = TestBed.inject(ThumbnailService);
         component.fileName = 'test-file.pdf';
 
         appConfigService.config = {
@@ -97,6 +100,27 @@ describe('ViewerComponent', () => {
 
             expect(component.mimeType).toBe('image/png');
         });
+
+        it('should set mimeTypeIconUrl when mimeType changes and no nodeMimeType is provided', () => {
+            spyOn(thumbnailService, 'getMimeTypeIcon').and.returnValue('image/png');
+            const mockSimpleChanges: any = { mimeType: { currentValue: 'image/png' }, nodeMimeType: undefined };
+
+            component.ngOnChanges(mockSimpleChanges);
+
+            expect(thumbnailService.getMimeTypeIcon).toHaveBeenCalledWith('image/png');
+            expect(component.mimeTypeIconUrl).toBe('image/png');
+        });
+
+        it('should set mimeTypeIconUrl when nodeMimeType changes', () => {
+            spyOn(thumbnailService, 'getMimeTypeIcon').and.returnValue('application/pdf');
+            const mockSimpleChanges: any = { mimeType: { currentValue: 'image/png' }, nodeMimeType: { currentValue: 'application/pdf' } };
+
+            component.ngOnChanges(mockSimpleChanges);
+            fixture.detectChanges();
+
+            expect(thumbnailService.getMimeTypeIcon).toHaveBeenCalledWith('application/pdf');
+            expect(component.mimeTypeIconUrl).toBe('application/pdf');
+        });
     });
 
     describe('File Name Test', () => {

lib/core/src/lib/viewer/components/viewer.component.ts

@@ -244,6 +244,10 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
     @Input()
     nodeId: string = null;
 
+    /** Original node mime type, should be provided when renditiona mime type is different. */
+    @Input()
+    nodeMimeType: string = undefined;
+
     /**
      * Enable dialog box to allow user to download the previewed file, in case the preview is not responding for a set period of time.
      */
@@ -303,7 +307,7 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
     ) {}
 
     ngOnChanges(changes: SimpleChanges) {
-        const { blobFile, urlFile, mimeType } = changes;
+        const { blobFile, urlFile, mimeType, nodeMimeType } = changes;
 
         if (blobFile?.currentValue) {
             this.mimeType = blobFile.currentValue.type;
@@ -314,9 +318,13 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
             this.fileName ||= this.viewUtilsService.getFilenameFromUrl(urlFile.currentValue);
         }
 
-        if (mimeType?.currentValue) {
+        if (mimeType?.currentValue && !nodeMimeType?.currentValue) {
             this.mimeTypeIconUrl = this.thumbnailService.getMimeTypeIcon(mimeType.currentValue);
         }
+
+        if (nodeMimeType?.currentValue) {
+            this.mimeTypeIconUrl = this.thumbnailService.getMimeTypeIcon(nodeMimeType.currentValue);
+        }
     }
 
     ngOnInit(): void {