[ACS-5600] AlfrescoViewerComponent shows the original mimetype

docs/core/components/viewer.component.md

@@ -70,6 +70,7 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
 | canNavigateNext | `boolean` | true | Toggles the next (">") button. Requires `allowNavigate` to be enabled. |
 | fileName | `string` |  | Override Content filename. |
 | mimeType | `string` |  | Overload mimeType |
+| originalMimeType | `string` |  | Overload originalMimeType |
 | overlayMode | `boolean` | false | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div. |
 | readOnly | `boolean` | true | Enable when where is possible the editing functionalities |
 | showLeftSidebar | `boolean` | false | Toggles left sidebar visibility. Requires `allowLeftSidebar` to be set to `true`. |
@@ -113,6 +114,7 @@ You can provide custom file parameters, for example a value for the `mimeType` o
     [fileName]="fileName"
     [allowGoBack]="false"
     [mimeType]="mimeType"
+    [originalMimeType]="originalMimeType"
     [urlFile]="fileUrl">
 </adf-viewer>
 ```

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

@@ -18,6 +18,7 @@
     [sidebarLeftTemplateContext]="sidebarLeftTemplateContext"
     [fileName]="fileName"
     [mimeType]="mimeType"
+    [originalMimeType]="originalMimeType"
     [urlFile]="urlFileContent"
     [tracks]="tracks"
     [readOnly]="readOnly"

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

@@ -476,6 +476,42 @@ describe('AlfrescoViewerComponent', () => {
         //
     });
 
+    describe('originalMimeType', () => {
+        it('should set originalMimeType based on nodeData content', async () => {
+            const defaultNode: Node = {
+                id: 'mock-id',
+                name: 'Mock Node',
+                nodeType: 'cm:content',
+                isFolder: false,
+                isFile: true,
+                modifiedAt: new Date(),
+                modifiedByUser: { id: 'user123', displayName: 'John Doe' },
+                createdAt: new Date(),
+                createdByUser: { id: 'user456', displayName: 'Jane Doe' },
+                properties: { 'cm:versionLabel': 'mock-version-label' }
+            };
+            component.nodeEntry = { entry: defaultNode };
+            component.nodeId = '123';
+            spyOn(renditionService, 'getNodeRendition').and.returnValue(
+                Promise.resolve({
+                    url: '',
+                    mimeType: ''
+                })
+            );
+
+            fixture.detectChanges();
+            nodesApiService.nodeUpdated.next({
+                id: '123',
+                name: 'file2',
+                content: {
+                    mimeType: 'application/msWord'
+                }
+            } as any);
+            await fixture.whenStable();
+            expect(component.originalMimeType).toEqual('application/msWord');
+        });
+    });
+
     describe('Toolbar', () => {
         it('should show only next file button', async () => {
             component.allowNavigate = true;

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

@@ -192,6 +192,7 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit, OnDestroy {
     urlFileContent: string;
     fileName: string;
     mimeType: string;
+    originalMimeType: string;
     nodeEntry: NodeEntry;
     tracks: Track[] = [];
     readOnly: boolean = true;
@@ -328,6 +329,7 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit, OnDestroy {
             if (nodeRendition) {
                 urlFileContent = nodeRendition.url;
                 mimeType = nodeRendition.mimeType;
+                this.originalMimeType = nodeData?.content?.mimeType;
             }
         } else if (viewerType === 'media') {
             this.tracks = await this.renditionService.generateMediaTracksRendition(this.nodeId);

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

@@ -44,8 +44,8 @@
                         <mat-icon>navigate_before</mat-icon>
                     </button>
                     <img class="adf-viewer__mimeicon"
-                         [alt]="mimeType"
-                         [src]="mimeType | adfMimeTypeIcon"
+                         [alt]="originalMimeType || mimeType"
+                         [src]="(originalMimeType || mimeType) | adfMimeTypeIcon"
                          data-automation-id="adf-file-thumbnail">
                     <span class="adf-viewer__display-name"
                           id="adf-viewer-display-name">{{ fileName }}</span>

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

@@ -115,6 +115,38 @@ describe('ViewerComponent', () => {
 
     });
 
+    describe('originalMimeType', () => {
+        const getMimeTypeIconElement = () => fixture.nativeElement.querySelector('.adf-viewer__mimeicon');
+
+        it('should set alt attribute to originalMimeType when originalMimeType is provided', () => {
+            component.originalMimeType = 'image/png';
+            fixture.detectChanges();
+            const altAttribute: string = getMimeTypeIconElement().getAttribute('alt');
+            expect(altAttribute).toBe('image/png');
+        });
+
+        it('should set src attribute based on originalMimeType when originalMimeType is provided', () => {
+            component.originalMimeType = 'image';
+            fixture.detectChanges();
+            const srcAttribute: string = getMimeTypeIconElement().getAttribute('src');
+            expect(srcAttribute).toContain('image');
+        });
+
+        it('should set alt attribute to mimeType when originalMimeType is not provided', () => {
+            component.mimeType = 'application/pdf';
+            fixture.detectChanges();
+            const altAttribute: string = getMimeTypeIconElement().getAttribute('alt');
+            expect(altAttribute).toBe('application/pdf');
+        });
+
+        it('should set src attribute based on mimeType when originalMimeType is not provided', () => {
+            component.mimeType = 'image';
+            fixture.detectChanges();
+            const srcAttribute: string = getMimeTypeIconElement().getAttribute('src');
+            expect(srcAttribute).toContain('image');
+        });
+    });
+
     describe('File Name Test', () => {
 
         it('should fileName be set by urlFile input if the fileName is not provided as Input', () => {

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

@@ -160,6 +160,10 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
     @Input()
     mimeType: string;
 
+    /** Overload originalMimeType*/
+    @Input()
+    originalMimeType: string;
+
     /**
      * Context object available for binding by the local sidebarRightTemplate with let declarations.
      */