diff --git a/docs/core/components/viewer.component.md b/docs/core/components/viewer.component.md index 47b2504c04..4a4efb98df 100644 --- a/docs/core/components/viewer.component.md +++ b/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)`` | 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 diff --git a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html index 3dc32a9443..aa55fa8125 100644 --- a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html +++ b/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" diff --git a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts index 3d2a07862d..f1bb3ecc57 100644 --- a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts +++ b/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'); }); }); diff --git a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts index 99a56d33af..cd675b105e 100644 --- a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts +++ b/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 { 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; diff --git a/lib/core/src/lib/viewer/components/viewer.component.spec.ts b/lib/core/src/lib/viewer/components/viewer.component.spec.ts index bf423fd62b..97c93c427c 100644 --- a/lib/core/src/lib/viewer/components/viewer.component.spec.ts +++ b/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', () => { diff --git a/lib/core/src/lib/viewer/components/viewer.component.ts b/lib/core/src/lib/viewer/components/viewer.component.ts index 1becfddf80..d7bb0a5254 100644 --- a/lib/core/src/lib/viewer/components/viewer.component.ts +++ b/lib/core/src/lib/viewer/components/viewer.component.ts @@ -244,6 +244,10 @@ export class ViewerComponent 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 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 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 {