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

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

@@ -1,384 +0,0 @@
-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

@@ -1,261 +0,0 @@
-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;
-  }
-}