@hmcts/media-viewer 4.2.0 → 4.2.4-exui-3994-f

package/projects/media-viewer/src/lib/media-viewer.component.spec.ts

@@ -0,0 +1,384 @@
+import { RpxTranslationModule } from 'rpx-xui-translation';
+import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { By } from '@angular/platform-browser';
+import { Store, StoreModule } from '@ngrx/store';
+import { Subject } from 'rxjs';
+
+import { MediaViewerComponent } from './media-viewer.component';
+import { ToolbarButtonVisibilityService, ToolbarModule } from './toolbar/toolbar.module';
+import { ToolbarEventService } from './toolbar/toolbar-event.service';
+import { AnnotationsModule } from './annotations/annotations.module';
+import { CUSTOM_ELEMENTS_SCHEMA, SimpleChange } from '@angular/core';
+import { ResponseType, ViewerException } from './viewers/viewer-exception.model';
+import {
+  defaultImageOptions,
+  defaultPdfOptions,
+  defaultUnsupportedOptions
+} from './toolbar/toolbar-button-visibility.service';
+import { AnnotationApiService } from './annotations/services/annotation-api/annotation-api.service';
+import { CommentService } from './annotations/comment-set/comment/comment.service';
+import { reducers } from './store/reducers/reducers';
+import * as fromRedactActions from './store/actions/redaction.actions';
+import * as fromAnnoActions from './store/actions/annotation.actions';
+
+describe('MediaViewerComponent', () => {
+  let component: MediaViewerComponent;
+  let fixture: ComponentFixture<MediaViewerComponent>;
+  const commentService = {
+    getUnsavedChanges: () => new Subject(),
+    resetCommentSet: () => { }
+  };
+
+  beforeEach(() => {
+    return TestBed.configureTestingModule({
+      declarations: [MediaViewerComponent],
+      providers: [
+        { provide: CommentService, useValue: commentService },
+        {
+          provide: AnnotationApiService,
+          useValue: {
+            api: null
+          }
+        },
+        ToolbarButtonVisibilityService,
+        ToolbarEventService,
+      ],
+      imports: [
+        ToolbarModule,
+        AnnotationsModule,
+        StoreModule.forRoot({}),
+        StoreModule.forFeature('media-viewer', reducers),
+        RouterTestingModule,
+        RpxTranslationModule.forRoot({
+          baseUrl: '',
+          debounceTimeMs: 300,
+          validity: {
+            days: 1
+          },
+          testMode: true
+        })
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MediaViewerComponent);
+    component = fixture.componentInstance;
+    component.contentType = 'pdf';
+    component.ngAfterContentInit();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set the default toolbar behaviour',
+    inject([ToolbarButtonVisibilityService], (toolbarButtons) => {
+      spyOn(toolbarButtons, 'setup').and.callThrough();
+      component.contentType = 'pdf';
+      component.url = 'url';
+
+      fixture.detectChanges();
+
+      expect(toolbarButtons.setup).toHaveBeenCalled();
+      expect(fixture.debugElement.query(By.css('.print')));
+    })
+  );
+
+  it('should support content', () => {
+    component.contentType = 'pdf';
+    expect(component.isSupported()).toBeTruthy();
+  });
+
+  it('should support multimedia content', () => {
+    component.contentType = 'mp3';
+    expect(component.isMultimedia()).toBeTruthy();
+  });
+
+  it('should not support content', () => {
+    component.contentType = 'unsupported';
+
+    expect(component.isSupported()).toBeFalsy();
+  });
+
+  it('should be convertible', () => {
+    component.contentType = 'excel';
+
+    expect(component.needsConverting()).toBeTruthy();
+  });
+
+  it('should not support content when content type is null', () => {
+    component.contentType = null;
+
+    expect(component.isSupported()).toBeFalsy();
+    expect(component.needsConverting()).toBeFalsy();
+  });
+
+  it('should reset the type exception when the url is changed', () => {
+    component.typeException = true;
+    component.contentType = 'pdf';
+    component.url = 'file.pdf';
+    component.ngOnChanges({ url: new SimpleChange('file.pdf', 'unsupported.txt', false) });
+
+    expect(component.typeException).toBeFalse();
+  });
+
+  it('should reset the event state when the url is changed', () => {
+    component.contentType = 'pdf';
+    component.url = 'file.pdf';
+    component.toolbarEvents.zoomValueSubject.next(2);
+    component.ngOnChanges({ url: new SimpleChange('file.pdf', 'text.pdf', false) });
+
+    expect(component.toolbarEvents.zoomValueSubject.value).toBe(1);
+  });
+
+  it('should set documentTitle to null if the content type is image', () => {
+    component.documentTitle = 'Document Title';
+    component.contentType = 'image';
+    component.url = 'file.jpg';
+    component.ngOnChanges({ url: new SimpleChange('file.jpg', 'text.jpg', false) });
+
+    expect(component.documentTitle).toBeNull();
+  });
+
+  it('should delete /documentsv2/ from documentId to test secure mode', () => {
+    component.url = '/documentsv2/test-url';
+    component.ngOnChanges({
+      url: new SimpleChange('/documentsv2/test-url', 'test-url', false),
+    });
+    expect(component.documentId).toEqual('test-url');
+  });
+
+  it('should not set annotations$ when annotations disabled', () => {
+    component.contentType = 'pdf';
+    component.annotationSet$ = null;
+
+    component.enableAnnotations = false;
+    component.ngOnChanges({
+      enableAnnotations: new SimpleChange(true, false, false)
+    });
+
+    expect(component.annotationSet$).toBe(null);
+  });
+
+  it('should not load annotations when playing multimedia', inject([Store], (store) => {
+    spyOn(store, 'dispatch');
+    component.url = 'new-url';
+    component.enableAnnotations = true;
+    component.multimediaContent = true;
+
+    component.ngOnChanges({
+      url: new SimpleChange('old-url', 'new-url', false)
+    });
+
+    expect(store.dispatch).not.toHaveBeenCalledWith(new fromAnnoActions.LoadAnnotationSet('new-url'));
+  }));
+
+  it('should load annotations when not playing multimedia', inject([Store], (store) => {
+    spyOn(store, 'dispatch');
+    component.url = 'new-url';
+    component.enableAnnotations = true;
+    component.multimediaContent = false;
+
+    component.ngOnChanges({
+      url: new SimpleChange('old-url', 'new-url', false)
+    });
+
+    expect(store.dispatch).toHaveBeenCalledWith(new fromAnnoActions.LoadAnnotationSet('new-url'));
+  }));
+
+  it('should not load redactions when playing multimedia', inject([Store], (store) => {
+    spyOn(store, 'dispatch');
+    component.url = 'new-url';
+    component.enableRedactions = true;
+    component.multimediaContent = true;
+
+    component.ngOnChanges({
+      url: new SimpleChange('old-url', 'new-url', false)
+    });
+
+    expect(store.dispatch).not.toHaveBeenCalledWith(new fromRedactActions.LoadRedactions('new-url'));
+  }));
+
+  it('should not load redactions when document id is empty', inject([Store], (store) => {
+    spyOn(store, 'dispatch');
+    component.url = 'new-url';
+    component.enableRedactions = true;
+    spyOn(component as any, 'extractDMStoreDocId').and.returnValue('');
+
+    component.ngOnChanges({
+      url: new SimpleChange('old-url', 'new-url', false)
+    });
+
+    expect(store.dispatch).not.toHaveBeenCalledWith(new fromRedactActions.LoadRedactions('new-url'));
+  }));
+
+  it('should load redactions when not playing multimedia', inject([Store], (store) => {
+    spyOn(store, 'dispatch');
+    component.url = 'new-url';
+    component.enableRedactions = true;
+    component.multimediaContent = false;
+
+    component.ngOnChanges({
+      url: new SimpleChange('old-url', 'new-url', false)
+    });
+
+    expect(store.dispatch).toHaveBeenCalledWith(new fromRedactActions.LoadRedactions('new-url'));
+  }));
+
+  it('should content variables on content changes', () => {
+    component.multimediaContent = true;
+    component.unsupportedContent = true;
+    component.convertibleContent = true;
+
+    component.ngOnChanges({
+      contentType: new SimpleChange('pdf', 'image', false)
+    });
+
+    expect(component.multimediaContent).toBeFalse();
+    expect(component.unsupportedContent).toBeFalse();
+    expect(component.multimediaContent).toBeFalse();
+  });
+
+  it('should set annotationApiUrl', () => {
+    const api = TestBed.inject(AnnotationApiService);
+    component.contentType = 'pdf';
+    const ANNOTATION_API_URL = 'annotation-api-url';
+    component.annotationApiUrl = ANNOTATION_API_URL;
+
+    component.ngOnChanges({
+      annotationApiUrl: new SimpleChange(true, false, false)
+    });
+
+    expect(api.annotationApiUrl).toBe(ANNOTATION_API_URL);
+  });
+
+  it('onMediaLoad should emit a ResponseType', () => {
+    spyOn(component.mediaLoadStatus, 'emit');
+    component.url = 'document-url';
+
+    component.onMediaLoad(ResponseType.SUCCESS);
+    expect(component.mediaLoadStatus.emit).toHaveBeenCalledTimes(1);
+  });
+
+  it('should set the default toolbar behaviour for convertible type', () => {
+    const toolbarButtonsSpy = spyOn(component.toolbarButtons, 'setup');
+    component.contentType = 'excel';
+    component.enableAnnotations = true;
+
+    component.setToolbarButtons();
+    expect(toolbarButtonsSpy).toHaveBeenCalledWith({ ...defaultPdfOptions, showHighlightButton: true, showDrawButton: false });
+  });
+
+  it('should set the default toolbar behaviour for pdf viewer', () => {
+    const toolbarButtonsSpy = spyOn(component.toolbarButtons, 'setup');
+    component.contentType = 'pdf';
+    component.enableAnnotations = true;
+
+    component.setToolbarButtons();
+    expect(toolbarButtonsSpy).toHaveBeenCalledWith({ ...defaultPdfOptions, showHighlightButton: true, showDrawButton: false });
+  });
+
+  it('should set the default toolbar behaviour for image viewer', () => {
+    const toolbarButtonsSpy = spyOn(component.toolbarButtons, 'setup');
+    component.contentType = 'image';
+    component.enableAnnotations = true;
+
+    component.setToolbarButtons();
+    expect(toolbarButtonsSpy).toHaveBeenCalledWith({ ...defaultImageOptions, showDrawButton: true });
+  });
+
+  it('should set the default toolbar behaviour for unsupported viewer', () => {
+    const toolbarButtonsSpy = spyOn(component.toolbarButtons, 'setup');
+    component.contentType = 'xxxxxx';
+
+    component.setToolbarButtons();
+    expect(toolbarButtonsSpy).toHaveBeenCalledWith({ ...defaultUnsupportedOptions });
+  });
+
+  it('onLoadException should emit a ViewerException', () => {
+    component.contentType = 'pdf';
+    const viewerException = new ViewerException();
+    const emitSpy = spyOn(component.viewerException, 'emit');
+
+    component.onLoadException(viewerException);
+    expect(emitSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('onLoadException should set type exception true', () => {
+    component.contentType = 'pdf';
+    component.typeException = false;
+    const viewerException = new ViewerException();
+    const toolbarButtonsSpy = spyOn(component.toolbarButtons, 'setup');
+
+    component.onLoadException(viewerException);
+    expect(component.typeException).toBeTrue();
+    expect(component.contentType).toBeNull();
+    expect(toolbarButtonsSpy).toHaveBeenCalledWith({ ...defaultUnsupportedOptions });
+  });
+
+  it('onLoadException should set type exception false', () => {
+    component.contentType = null;
+    component.typeException = true;
+    const viewerException = new ViewerException();
+
+    component.onLoadException(viewerException);
+    expect(component.typeException).toBeFalse();
+  });
+
+  it('onUnsavedChanges should emit a boolean value', () => {
+    const emitSpy = spyOn(component.unsavedChanges, 'emit');
+
+    component.onCommentChange(true);
+    expect(emitSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('onDocumentTitleChange should update the document title value', () => {
+    const newTitle = 'New Bundle';
+    component.documentTitle = 'Document Title for Evidence';
+
+    component.onDocumentTitleChange(newTitle);
+    expect(component.documentTitle).toEqual(newTitle);
+  });
+
+  describe('height param', () => {
+    it('should calc height when input value is not provided', () => {
+      component.height = undefined;
+      fixture.detectChanges();
+
+      expect(component.viewerHeight).toBeDefined();
+    });
+
+    it('should set height to input value', () => {
+      const mockHeight = 'calc(100vh - 25px)';
+      component.height = mockHeight;
+      fixture.detectChanges();
+
+      expect(component.viewerHeight).toEqual(mockHeight);
+    });
+
+    it('should set viewHeight to height when component moved', () => {
+      const mockHeight = 'calc(100vh - 25px)';
+      component.height = mockHeight;
+
+      const toolbarEvents = TestBed.inject(ToolbarEventService);
+      toolbarEvents.redactionMode.next(true);
+      fixture.detectChanges();
+
+      expect(component.viewerHeight).toEqual(mockHeight);
+    });
+
+    it('should re-calc viewHeight when component moved and height input param omitted', () => {
+      const viewerHeight = component.viewerHeight;
+      const toolbarEvents = TestBed.inject(ToolbarEventService);
+
+      toolbarEvents.redactionMode.next(true);
+      fixture.detectChanges();
+
+      expect(component.viewerHeight).not.toEqual(viewerHeight);
+    });
+  });
+});

package/projects/media-viewer/src/lib/media-viewer.component.ts

@@ -0,0 +1,261 @@
+import {
+  AfterContentInit, AfterViewChecked,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+import {
+  defaultImageOptions, defaultMultimediaOptions,
+  defaultPdfOptions,
+  defaultUnsupportedOptions,
+  ToolbarButtonVisibilityService
+} from './toolbar/toolbar-button-visibility.service';
+import { AnnotationSet } from './annotations/annotation-set/annotation-set.model';
+import { ToolbarEventService } from './toolbar/toolbar-event.service';
+import { AnnotationApiService } from './annotations/services/annotation-api/annotation-api.service';
+import { ResponseType, ViewerException } from './viewers/viewer-exception.model';
+import { CommentService } from './annotations/comment-set/comment/comment.service';
+import { select, Store } from '@ngrx/store';
+import * as fromStore from './store/reducers/reducers';
+import * as fromAnnoSelectors from './store/selectors/annotation.selectors';
+import * as fromDocumentsSelector from './store/selectors/document.selectors';
+import * as fromAnnoActions from './store/actions/annotation.actions';
+import * as fromRedactActions from './store/actions/redaction.actions';
+import * as fromDocumentActions from './store/actions/document.actions';
+import { IcpEventService } from './toolbar/icp-event.service';
+import { HtmlTemplatesHelper } from './shared/util/helpers/html-templates.helper';
+
+enum CoreContentTypes {
+  PDF = 'pdf',
+  IMAGE = 'image'
+}
+
+enum MultimediaContentTypes {
+  MP4 = 'mp4',
+  MP3 = 'mp3',
+}
+
+enum ConvertibleContentTypes {
+  EXCEL = 'excel',
+  WORD = 'word',
+  POWERPOINT = 'powerpoint',
+  TXT = 'txt',
+  RTF = 'rtf'
+}
+
+@Component({
+    selector: 'mv-media-viewer',
+    templateUrl: './media-viewer.component.html',
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
+})
+export class MediaViewerComponent implements OnChanges, OnDestroy, AfterContentInit, AfterViewChecked {
+
+  @ViewChild('viewerRef', {static: false}) viewerRef: ElementRef;
+
+  @Input() url;
+  @Input() downloadFileName: string;
+  @Input() contentType: string;
+
+  @Input() showToolbar = true;
+  @Input() toolbarButtonOverrides: any = {};
+
+  @Input()
+  public height: string;
+  public viewerHeight: string;
+
+  @Input() width = '100%';
+
+  @Output() mediaLoadStatus = new EventEmitter<ResponseType>();
+  @Output() viewerException = new EventEmitter<ViewerException>();
+  @Output() toolbarEventsOutput = new EventEmitter<ToolbarEventService>();
+  @Output() unsavedChanges = new EventEmitter<boolean>();
+
+  @Input() enableAnnotations = false;
+  @Input() annotationApiUrl;
+
+  @Input() enableRedactions = false;
+  @Input() enableICP = false;
+  @Input() multimediaPlayerEnabled = false;
+  @Input() enableRedactSearch = false;
+
+
+  @Input() caseId: string;
+
+  multimediaContent = false;
+  convertibleContent = false;
+  unsupportedContent = false;
+
+  documentTitle: string;
+  showCommentSummary: boolean;
+  annotationSet$: Observable<AnnotationSet | {}>;
+  hasScrollBar: boolean;
+  typeException = false;
+  hasDifferentPageSize$: Observable<boolean>;
+  documentId: string;
+
+  private $subscriptions: Subscription;
+  private prevOffset: number;
+
+  constructor(
+    private store: Store<fromStore.AnnotationSetState>,
+    public readonly toolbarButtons: ToolbarButtonVisibilityService,
+    public readonly toolbarEvents: ToolbarEventService,
+    private readonly api: AnnotationApiService,
+    private readonly commentService: CommentService,
+    private elRef: ElementRef,
+    private cdr: ChangeDetectorRef,
+    public icpEventService: IcpEventService
+  ) {
+    if (this.annotationApiUrl) {
+      api.annotationApiUrl = this.annotationApiUrl;
+    }
+  }
+
+  ngAfterContentInit() {
+    this.annotationSet$ = this.store.pipe(select(fromAnnoSelectors.getAnnotationSet));
+    this.hasDifferentPageSize$ = this.store.pipe(select(fromDocumentsSelector.getPageDifference));
+    this.setToolbarButtons();
+    this.toolbarEventsOutput.emit(this.toolbarEvents);
+    this.$subscriptions = this.commentService.getUnsavedChanges()
+      .subscribe(changes => this.onCommentChange(changes));
+    this.$subscriptions.add(this.toolbarEvents.getShowCommentSummary()
+      .subscribe(changes => this.showCommentSummary = changes));
+  }
+
+  ngAfterViewChecked(): void {
+    if (this.height && this.viewerHeight !== this.height) {
+      this.viewerHeight = this.height;
+      this.cdr.detectChanges();
+      return;
+    }
+
+    if (!this.height) {
+      const compOffsetTop = HtmlTemplatesHelper.getAdjustedBoundingRect(this.elRef.nativeElement).top;
+      const viewerOffsetTop = this.viewerRef.nativeElement.offsetTop;
+      const offset = compOffsetTop + viewerOffsetTop;
+
+      if (this.prevOffset !== offset) {
+        this.viewerHeight = `calc(100vh - ${offset}px)`;
+        this.prevOffset = offset;
+        this.cdr.detectChanges();
+      }
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.annotationApiUrl) {
+      this.api.annotationApiUrl = this.annotationApiUrl;
+    }
+
+    if (changes.contentType) {
+      this.convertibleContent = this.needsConverting();
+      this.multimediaContent = this.isMultimedia();
+      this.unsupportedContent = !this.isSupported();
+    }
+
+    if (changes.url) {
+      this.toolbarEvents.reset();
+      this.commentService.resetCommentSet();
+      this.documentId = this.extractDMStoreDocId(this.url);
+      this.store.dispatch(new fromDocumentActions.SetDocumentId(this.documentId));
+      if (this.enableAnnotations && !(this.multimediaContent || this.unsupportedContent)) {
+        this.store.dispatch(new fromAnnoActions.LoadAnnotationSet(this.documentId));
+      }
+      if (this.enableRedactions && !(this.multimediaContent || this.unsupportedContent) && this.documentId) {
+        this.store.dispatch(new fromRedactActions.LoadRedactions(this.documentId));
+      }
+      if (this.contentType === 'image') {
+        this.documentTitle = null;
+      }
+    }
+
+    this.setToolbarButtons();
+    this.detectOs();
+    this.typeException = false;
+  }
+
+  ngOnDestroy() {
+    this.$subscriptions.unsubscribe();
+  }
+
+  needsConverting(): boolean {
+    return this.contentType !== null && Object.keys(ConvertibleContentTypes).includes(this.contentType.toUpperCase());
+  }
+
+  isMultimedia(): boolean {
+    return this.contentType !== null && Object.keys(MultimediaContentTypes).includes(this.contentType.toUpperCase());
+  }
+
+  isSupported(): boolean {
+    const supportedTypes = Object.assign({}, MultimediaContentTypes, ConvertibleContentTypes, CoreContentTypes);
+    return this.contentType !== null && Object.keys(supportedTypes).includes(this.contentType.toUpperCase());
+  }
+
+  onMediaLoad(status: ResponseType) {
+    this.mediaLoadStatus.emit(status);
+  }
+
+  setToolbarButtons() {
+    if (this.contentType === CoreContentTypes.PDF || this.needsConverting()) {
+      this.toolbarButtons.setup({
+        ...defaultPdfOptions, showHighlightButton: this.enableAnnotations, showDrawButton: false,
+        ...this.toolbarButtonOverrides
+      });
+    } else if (this.contentType === CoreContentTypes.IMAGE) {
+      this.toolbarButtons.setup({
+        ...defaultImageOptions, showDrawButton: this.enableAnnotations,
+        ...this.toolbarButtonOverrides
+      });
+    } else if (this.isMultimedia()) {
+      this.toolbarButtons.setup({
+        ...defaultMultimediaOptions,
+        ...this.toolbarButtonOverrides
+      });
+    } else {
+      this.toolbarButtons.setup({
+        ...defaultUnsupportedOptions,
+        ...this.toolbarButtonOverrides
+      });
+    }
+  }
+
+  onLoadException(exception: ViewerException) {
+    this.viewerException.emit(exception);
+    if (!this.isSupported()) {
+      this.typeException = false;
+    } else {
+      this.typeException = true;
+      this.contentType = null;
+      this.setToolbarButtons();
+    }
+  }
+
+  onCommentChange(changes: boolean) {
+    this.unsavedChanges.emit(changes);
+  }
+
+  onDocumentTitleChange(title: string) {
+    this.documentTitle = title;
+  }
+
+  // If secure mode is enabled (which adds "documentsv2" to the documentId), get rid of it
+  private extractDMStoreDocId(url: string): string {
+    url = url.includes('/documents/') ? url.split('/documents/')[1] : url;
+    url = url.includes('/documentsv2/') ? url.split('/documentsv2/')[1] : url;
+    return url.replace('/binary', '');
+  }
+
+  detectOs() {
+    this.hasScrollBar = window.navigator.userAgent.indexOf('Win') !== -1;
+  }
+}