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

package/projects/media-viewer/src/lib/viewers/pdf-viewer/side-bar/side-bar.component.html

@@ -0,0 +1,66 @@
+<div id="toolbarSidebar">
+  <div
+    *ngIf="annotationsEnabled && selectedView === 'bookmarks'"
+    class="splitToolbarButton toggled"
+  >
+    <button
+      id="sortBookmarkPosition"
+      class="splitToolbarButton left bookmark__sort__position"
+      (click)="bookmarks.sort(bookmarks.positionSort)"
+      title="Order by place in document"
+      aria-pressed="true"
+    ></button>
+    <button
+      id="sortBookmarkCustom"
+      class="splitToolbarButton left bookmark__sort__custom"
+      (click)="bookmarks.sort(bookmarks.customSort)"
+      title="Order manually"
+      aria-pressed="true"
+    ></button>
+  </div>
+  <div class="splitToolbarButtonSeparator"></div>
+  <div
+    *ngIf="annotationsEnabled && selectedView === 'bookmarks'"
+    class="splitToolbarButton right"
+  >
+    <button
+      id="addBookmark"
+      class="toolbarButton addBookmark"
+      (click)="bookmarks.onAddBookmarkClick()"
+      title="Add bookmark"
+      tabindex="3"
+      data-l10n-id="addBookmark"
+    >
+      <span data-l10n-id="addBookmark_label">{{
+        "Add bookmark" | rpxTranslate
+      }}</span>
+    </button>
+  </div>
+</div>
+<div #sidebar id="sidebarContent" cdkScrollable (scroll)="onScroll($event)" [hidden]="!sidebarOpen">
+  <div id="outlineView" class="outlineWithDeepNesting">
+    <div class="outlineItem" *ngIf="selectedView === 'outline'">
+      <mv-outline-item
+        *ngFor="let outlineItem of outline; index as i"
+        [outline]="outlineItem"
+        [currentPageNumber]="currentPageNumber"
+        [isCurrentSection]="isViewedItem(outlineItem, outline[i + 1])"
+        [endPage]="findEndPage(outline[i + 1])"
+        (navigationEvent)="goToDestination($event)"
+      ></mv-outline-item>
+    </div>
+    <div
+      *ngIf="annotationsEnabled && selectedView === 'bookmarks'"
+      id="bookmarkContainer"
+    >
+      <mv-bookmarks
+        [bookmarkNodes]="bookmarkNodes$ | async"
+        [zoom]="zoom"
+        [rotate]="rotate"
+        [parentScrollTop]="scrollTop"
+        (goToDestination)="goToDestination($event)"
+        (treeHasChanged)="hasTreeChanged($event)"
+      ></mv-bookmarks>
+    </div>
+  </div>
+</div>

package/projects/media-viewer/src/lib/viewers/pdf-viewer/side-bar/side-bar.component.spec.ts

@@ -0,0 +1,126 @@
+import { SimpleChange, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing';
+import { Store, StoreModule } from '@ngrx/store';
+
+import { SideBarComponent } from './side-bar.component';
+import { OutlineItemComponent } from './outline-item/outline-item.component';
+import { reducers } from '../../../store/reducers/reducers';
+import { PdfJsWrapperFactory } from '../pdf-js/pdf-js-wrapper.provider';
+import { ViewerEventService } from '../../viewer-event.service';
+import { LoadBookmarks } from '../../../store/actions/bookmark.actions';
+import { Outline } from './outline-item/outline.model';
+
+describe('SideBarComponent', () => {
+  let component: SideBarComponent;
+  let fixture: ComponentFixture<SideBarComponent>;
+  const mockPdfWrapper = {
+    navigateTo: () => { },
+    getLocation: () => { }
+  };
+  const mockPdfWrapperProvider = {
+    pdfWrapper: () => mockPdfWrapper
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SideBarComponent, OutlineItemComponent],
+      imports: [
+        StoreModule.forFeature('media-viewer', reducers),
+        StoreModule.forRoot({})
+      ],
+      providers: [{ provide: PdfJsWrapperFactory, useValue: mockPdfWrapperProvider }],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SideBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should trigger goToDestination event on viewerEvents',
+    inject([ViewerEventService], (viewerEvents) => {
+      spyOn(viewerEvents, 'goToDestination');
+
+      component.goToDestination([]);
+
+      expect(viewerEvents.goToDestination).toHaveBeenCalledWith([]);
+    }));
+
+  it('should toggle sidebar view', () => {
+    component.selectedView = 'bookmarks';
+
+    component.toggleSidebarView('outline');
+
+    expect(component.selectedView).toBe('outline');
+  });
+
+  it('should dispatch LoadBookmarks action on change',
+    inject([Store], (store: Store<{}>) => {
+      const dispatchSpy = spyOn(store, 'dispatch');
+      component.url = 'prev-url';
+
+      component.ngOnChanges({
+        url: new SimpleChange('prev-url', 'new-url', false)
+      });
+
+      expect(dispatchSpy).toHaveBeenCalledWith(new LoadBookmarks());
+    })
+  );
+
+  it('should identify if currently viewed item', () => {
+    const outline = <Outline>{};
+    outline.pageNumber = 1;
+    component.currentPageNumber = 1;
+    expect(component.isViewedItem(outline, undefined)).toBe(true);
+    component.currentPageNumber = 2;
+    expect(component.isViewedItem(outline, undefined)).toBe(true);
+    component.currentPageNumber = 0;
+    expect(component.isViewedItem(outline, undefined)).toBe(false);
+
+    const nextOutline = <Outline>{};
+    nextOutline.pageNumber = 2;
+    component.currentPageNumber = 1;
+    expect(component.isViewedItem(outline, nextOutline)).toBe(true);
+    component.currentPageNumber = 2;
+    expect(component.isViewedItem(outline, nextOutline)).toBe(false);
+  });
+
+  it('should find the ending page number', () => {
+    expect(component.findEndPage(undefined)).toBe(Number.MAX_SAFE_INTEGER);
+    const nextOutline = <Outline>{};
+    nextOutline.pageNumber = Math.floor(Math.random() * 10000);
+    expect(component.findEndPage(nextOutline)).toBe(nextOutline.pageNumber);
+  });
+
+  it('should set scrollTop if the treeChanged is false', () => {
+    component.treeChanged = false
+    component.scrollTop = 200;
+    const expectedScrollTop = 195;
+    const mockEvent = jasmine.createSpyObj('Event', [], { 'srcElement': { 'scrollTop': expectedScrollTop } })
+    component.onScroll(mockEvent)
+    expect(component.scrollTop).toEqual(expectedScrollTop);
+    expect(component.treeChanged).toEqual(false)
+  });
+
+  it('should not set scrollTop if the treeChanged is true', () => {
+    component.treeChanged = true
+    component.scrollTop = 200;
+    const expectedScrollTop = 195;
+    const mockEvent = jasmine.createSpyObj('Event', [], { 'srcElement': { 'scrollTop': expectedScrollTop } })
+    component.onScroll(mockEvent)
+    expect(component.scrollTop).toEqual(200)
+  });
+
+  it('should set hasTreeChanged', () => {
+    component.treeChanged = true
+    component.hasTreeChanged(false);
+    expect(component.treeChanged).toEqual(false)
+  });
+});

package/projects/media-viewer/src/lib/viewers/pdf-viewer/side-bar/side-bar.component.ts

@@ -0,0 +1,106 @@
+import { AfterViewInit, Component, ElementRef, HostListener, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
+import { Outline } from './outline-item/outline.model';
+import { Observable, Subscription } from 'rxjs';
+import { select, Store } from '@ngrx/store';
+import * as bookmarksSelectors from '../../../store/selectors/bookmark.selectors';
+import { BookmarkNode } from '../../../store/models/bookmarks.interface';
+import { CreateBookmark, LoadBookmarks } from '../../../store/actions/bookmark.actions';
+import { take } from 'rxjs/operators';
+import { v4 as uuid } from 'uuid';
+import { ViewerEventService } from '../../viewer-event.service';
+import { BookmarksState } from '../../../store/reducers/bookmarks.reducer';
+import { ToolbarEventService } from '../../../toolbar/toolbar-event.service';
+import { BookmarksComponent } from './bookmarks/bookmarks.component';
+
+@Component({
+    selector: 'mv-side-bar',
+    templateUrl: './side-bar.component.html',
+    standalone: false
+})
+export class SideBarComponent implements OnInit, OnChanges, OnDestroy {
+
+  @Input() annotationsEnabled: boolean;
+  @Input() outline: Outline;
+  @Input() url: string;
+  @Input() zoom: number;
+  @Input() rotate: number;
+  @Input() currentPageNumber: number;
+
+  @ViewChild(BookmarksComponent)
+  bookmarks: BookmarksComponent;
+  treeChanged: boolean = false;
+  selectedView = 'outline';
+  bookmarkNodes$: Observable<BookmarkNode[]>;
+  scrollTop: any;
+  sidebarOpen: any;
+
+  private subscriptions: Subscription[] = [];
+  @ViewChild('sidebar') sidebarDiv;
+
+  constructor(private viewerEvents: ViewerEventService,
+    private store: Store<BookmarksState>,
+    private readonly toolbarEvents: ToolbarEventService,
+  ) { }
+
+  ngOnInit(): void {
+    this.bookmarkNodes$ = this.store.pipe(select(bookmarksSelectors.getBookmarkNodes));
+    this.subscriptions.push(this.store.pipe(select(bookmarksSelectors.getEditableBookmark))
+      .subscribe(editable => this.selectedView = editable ? 'bookmarks' : this.selectedView));
+    this.subscriptions.push(
+      this.toolbarEvents.sidebarOutlineView.subscribe(toggle => {
+        this.selectedView = toggle ? 'outline' : 'bookmarks';
+      }),
+      this.toolbarEvents.sidebarOpen.subscribe(toggle => {
+        this.sidebarOpen = toggle;
+      })
+    );
+    this.subscriptions.push(this.store.pipe(select(bookmarksSelectors.getScrollTop)).subscribe(scrollTopValue => {
+      if (this.sidebarDiv?.nativeElement) {
+        this.sidebarDiv.nativeElement.scrollTop = scrollTopValue
+      }
+    }));
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.url && this.url) {
+      this.store.dispatch(new LoadBookmarks());
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.subscriptions.length > 0) {
+      this.subscriptions.forEach(subscription => subscription.unsubscribe());
+    }
+  }
+
+  public onScroll(event: any): void {
+    if (!this.treeChanged) {
+      this.scrollTop = event.srcElement.scrollTop;
+    }
+    this.treeChanged = false;
+  }
+
+  goToDestination(destination: any[]) {
+    this.viewerEvents.goToDestination(destination);
+  }
+
+  hasTreeChanged(value: boolean) {
+    this.treeChanged = value;
+  }
+
+  toggleSidebarView(sidebarView: string) {
+    this.selectedView = sidebarView;
+  }
+
+  isViewedItem(current: Outline, next: Outline): boolean {
+    if (current.pageNumber === this.currentPageNumber) {
+      return true;
+    }
+    return next === undefined ? current.pageNumber <= this.currentPageNumber :
+      current.pageNumber <= this.currentPageNumber && (next.pageNumber > this.currentPageNumber);
+  }
+
+  findEndPage(next: Outline): number {
+    return next === undefined ? Number.MAX_SAFE_INTEGER : next.pageNumber;
+  }
+}

package/projects/media-viewer/src/lib/viewers/rotation-persist/rotation-api.service.spec.ts

@@ -0,0 +1,41 @@
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { fakeAsync, TestBed } from '@angular/core/testing';
+import { RotationApiService } from './rotation-api.service';
+
+describe('RotationApiService', () => {
+  let httpMock: HttpTestingController;
+  let api: RotationApiService;
+  const rotation = { documentId: 'document-id', rotationAngle: 90 };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [RotationApiService],
+      imports: [HttpClientTestingModule]
+    });
+    api = TestBed.inject(RotationApiService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  it('should get rotation', fakeAsync((done) => {
+    api.getRotation('document-id')
+      .subscribe((response) => {
+        expect(response.body.rotationAngle).toBe(90);
+        }, error => done(error));
+
+    const req = httpMock.expectOne('/em-anno/metadata/document-id');
+    expect(req.request.method).toBe('GET');
+    req.flush(rotation);
+  }));
+
+  it('should save rotation', fakeAsync((done) => {
+    api.saveRotation(rotation).subscribe((response) => {
+      expect(response.body.rotationAngle).toEqual(90);
+    }, error => done(error));
+
+    const req = httpMock.expectOne('/em-anno/metadata/');
+    expect(req.request.method).toBe('POST');
+    expect(req.request.body.documentId).toBe('document-id');
+    expect(req.request.body.rotationAngle).toBe(90);
+    req.flush(rotation);
+  }));
+});

package/projects/media-viewer/src/lib/viewers/rotation-persist/rotation-api.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpResponse } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
+import { Rotation } from './rotation.model';
+
+@Injectable()
+export class RotationApiService {
+
+  public rotationApiUrl = '/em-anno/metadata';
+
+  constructor(
+    private readonly httpClient: HttpClient
+  ) {}
+
+  public getRotation(documentId: string): Observable<HttpResponse<Rotation>> {
+    const fixedUrl = `${this.rotationApiUrl}/${documentId}`;
+    return this.httpClient
+      .get<Rotation>(fixedUrl, { observe: 'response' , withCredentials: true });
+  }
+
+  public saveRotation(payload: Rotation): Observable<HttpResponse<Rotation>> {
+    const fixedUrl = `${this.rotationApiUrl}/`;
+    return this.httpClient
+      .post<any>(fixedUrl, payload, { observe: 'response' , withCredentials: true })
+      .pipe(
+        map(response => response),
+        catchError(() => [])
+      );
+  }
+
+}

package/projects/media-viewer/src/lib/viewers/rotation-persist/rotation-persist.directive.spec.ts

@@ -0,0 +1,55 @@
+import { ElementRef } from '@angular/core';
+import { RotationPersistDirective } from './rotation-persist.directive';
+import * as fromDocumentActions from '../../store/actions/document.actions';
+import { of, Subject } from 'rxjs';
+
+describe('RotationPersistDirective', () => {
+  let directive: RotationPersistDirective;
+  const toolbarEvents = { rotateSubject: new Subject(), saveRotationSubject: new Subject() } as any;
+  const toolbarButtons = { showSaveRotationButton: undefined } as any;
+  const store = { dispatch: () => {}, pipe: () => {} } as any;
+  const hostElement = document.createElement('div');
+  const elementRef = new ElementRef<HTMLElement>(hostElement);
+
+  beforeEach(() => {
+    directive = new RotationPersistDirective(elementRef, store, toolbarButtons, toolbarEvents);
+  });
+
+  it('should set initial rotation on media load', () => {
+    directive.documentId = 'document-id';
+    directive.savedRotation = 90;
+    spyOn(store, 'pipe').and.returnValue(of(true));
+    spyOn(store, 'dispatch');
+    spyOn(toolbarEvents.rotateSubject, 'next');
+
+    directive.onMediaLoad({} as any);
+
+    expect(store.dispatch).toHaveBeenCalledWith(new fromDocumentActions.LoadRotation('document-id'));
+    expect(toolbarEvents.rotateSubject.next).toHaveBeenCalledWith(90);
+  });
+
+  it('should set rotation and toggle save button', () => {
+    directive.rotation = 90;
+    directive.savedRotation = 90;
+    spyOn(store, 'pipe').and.returnValue(of(null));
+
+    directive.ngOnInit();
+    toolbarEvents.rotateSubject.next(90);
+
+    expect(directive.rotation).toBe(180);
+    expect(toolbarButtons.showSaveRotationButton).toBeTrue();
+  });
+
+  it('should save rotation', () => {
+    directive.documentId = 'document-id';
+    directive.rotation = 90;
+    spyOn(store, 'pipe').and.returnValue(of('document-id'));
+    spyOn(store, 'dispatch');
+
+    directive.ngOnInit();
+    toolbarEvents.saveRotationSubject.next();
+
+    const action = new fromDocumentActions.SaveRotation({ documentId: 'document-id', rotationAngle: 90 });
+    expect(store.dispatch).toHaveBeenCalledWith(action);
+  });
+});

package/projects/media-viewer/src/lib/viewers/rotation-persist/rotation-persist.directive.ts

@@ -0,0 +1,70 @@
+import { Directive, ElementRef, HostListener, OnDestroy, OnInit } from '@angular/core';
+import * as fromDocumentActions from '../../store/actions/document.actions';
+import { select, Store } from '@ngrx/store';
+import * as fromDocuments from '../../store/selectors/document.selectors';
+import { distinctUntilChanged, filter, take } from 'rxjs/operators';
+import { Rotation } from './rotation.model';
+import { ResponseType } from '../viewer-exception.model';
+import { ToolbarEventService } from '../../toolbar/toolbar-event.service';
+import * as fromStore from '../../store/reducers/reducers';
+import { ToolbarButtonVisibilityService } from '../../toolbar/toolbar-button-visibility.service';
+import { Subscription } from 'rxjs';
+
+
+@Directive({
+    selector: '[mvRotationPersist]',
+    standalone: false
+})
+export class RotationPersistDirective implements OnInit, OnDestroy {
+
+  documentId: string;
+  rotation = 0;
+  savedRotation = 0;
+
+  $subscriptions: Subscription;
+
+  constructor(private el: ElementRef,
+    private store: Store<fromStore.DocumentState>,
+    public readonly toolbarButtons: ToolbarButtonVisibilityService,
+    private toolbarEvents: ToolbarEventService) {
+  }
+
+  ngOnInit() {
+    this.$subscriptions = this.toolbarEvents.rotateSubject.pipe(distinctUntilChanged()).subscribe(rotation => this.onRotate(rotation));
+
+    this.$subscriptions.add(this.toolbarEvents.saveRotationSubject.subscribe(() => this.saveRotation()));
+    this.$subscriptions.add(this.store.pipe(select(fromDocuments.getRotation)).subscribe(rotation => this.savedRotation = rotation));
+    this.$subscriptions.add(this.store.pipe(select(fromDocuments.getDocumentId)).subscribe(documentId => this.documentId = documentId));
+  }
+
+  ngOnDestroy() {
+    this.$subscriptions.unsubscribe();
+  }
+
+  @HostListener('mediaLoadStatus', ['$event'])
+  onMediaLoad(status: ResponseType) {
+    this.rotation = 0;
+    this.store.dispatch(new fromDocumentActions.LoadRotation(this.documentId));
+    this.store.pipe(select(fromDocuments.rotationLoaded),
+      filter(value => !!value),
+      take(1))
+      .subscribe(() => {
+        if (this.savedRotation) {
+          this.toolbarEvents.rotateSubject.next(this.savedRotation);
+        }
+      });
+  }
+
+  private onRotate(rotation: number) {
+    this.rotation = (this.rotation + rotation) % 360;
+    this.toolbarButtons.showSaveRotationButton = this.savedRotation !== this.rotation;
+  }
+
+  private saveRotation() {
+    const payload: Rotation = {
+      documentId: this.documentId,
+      rotationAngle: this.rotation
+    };
+    this.store.dispatch(new fromDocumentActions.SaveRotation(payload));
+  }
+}

package/projects/media-viewer/src/lib/viewers/rotation-persist/rotation.model.ts

@@ -0,0 +1,4 @@
+export interface Rotation {
+  documentId: string;
+  rotationAngle: number;
+}

package/projects/media-viewer/src/lib/viewers/unsupported-viewer/unsupported-viewer.component.html

@@ -0,0 +1,11 @@
+<div class="govuk-width-container">
+  <div class="govuk-notification-banner__content">
+    <p>
+      <span *ngIf="typeException, else unsupported">The document could not be displayed, or the file type is unsupported.</span>
+      Please <a #downloadLink [href]="url" [download]="downloadFileName">click here to download</a>.
+    </p>
+    <ng-template #unsupported>
+      <span>This file type is not supported by this viewer.</span>
+    </ng-template>
+  </div>
+</div>

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

@@ -0,0 +1,54 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { UnsupportedViewerComponent } from './unsupported-viewer.component';
+import { ToolbarEventService } from '../../toolbar/toolbar-event.service';
+import { ViewerUtilService } from '../viewer-util.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+
+describe('UnsupportedViewerComponent', () => {
+  let component: UnsupportedViewerComponent;
+  let fixture: ComponentFixture<UnsupportedViewerComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UnsupportedViewerComponent ],
+      providers: [ ToolbarEventService, ViewerUtilService ],
+      imports: [ HttpClientTestingModule ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UnsupportedViewerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should click download button', () => {
+    const clickSpy = spyOn(component.downloadLink.nativeElement, 'click');
+
+    component.toolbarEvents.downloadSubject.next();
+    fixture.detectChanges();
+
+    expect(clickSpy).toHaveBeenCalledWith();
+  });
+
+  it('ngOnInit should emit a ViewerException for type exception is false', () => {
+    component.typeException = false;
+    const emitSpy = spyOn(component.unsupportedViewerException, 'emit');
+
+    component.ngOnInit();
+    expect(emitSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('ngOnInit should not emit a ViewerException for type exception is true', () => {
+    component.typeException = true;
+    const emitSpy = spyOn(component.unsupportedViewerException, 'emit');
+
+    component.ngOnInit();
+    expect(emitSpy).toHaveBeenCalledTimes(0);
+  });
+});

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

@@ -0,0 +1,56 @@
+import { Component, ElementRef, Input, OnInit, ViewChild, OnDestroy, Output, EventEmitter } from '@angular/core';
+import { ToolbarEventService } from '../../toolbar/toolbar-event.service';
+import { Subscription } from 'rxjs';
+import { ResponseType, ViewerException } from '../viewer-exception.model';
+import { ViewerUtilService } from '../viewer-util.service';
+
+@Component({
+    selector: 'mv-unsupported-viewer',
+    templateUrl: './unsupported-viewer.component.html',
+    standalone: false
+})
+export class UnsupportedViewerComponent implements OnInit, OnDestroy {
+
+  @Input() url: string;
+  @Input() downloadFileName: string;
+  @Input() typeException: boolean;
+
+  @Output() loadStatus = new EventEmitter<ResponseType>();
+  @Output() unsupportedViewerException = new EventEmitter<ViewerException>();
+
+  @ViewChild('downloadLink', {static: false}) downloadLink: ElementRef;
+
+  private subscriptions: Subscription[] = [];
+  private viewerException: ViewerException;
+
+  constructor(
+    public readonly toolbarEvents: ToolbarEventService,
+    private readonly viewerUtilService: ViewerUtilService,
+  ) {}
+
+  public ngOnInit(): void {
+    this.subscriptions.push(
+      this.toolbarEvents.downloadSubject.subscribe(() => this.downloadLink.nativeElement.click()),
+      this.viewerUtilService.validateFile(this.url).subscribe(
+        next => next,
+        error => {
+          this.viewerException = new ViewerException(error.name,
+            { httpResponseCode: error.status, message: error.message });
+        }
+      )
+    );
+
+    this.loadStatus.emit(ResponseType.UNSUPPORTED);
+
+    if (!this.typeException) {
+      this.unsupportedViewerException.emit(this.viewerException);
+    }
+  }
+
+  ngOnDestroy(): void {
+    for (const subscription of this.subscriptions) {
+      subscription.unsubscribe();
+    }
+  }
+
+}

package/projects/media-viewer/src/lib/viewers/viewer-event.service.spec.ts

@@ -0,0 +1,39 @@
+import {ViewerEventService} from './viewer-event.service';
+
+describe('Viewer Events Service', () => {
+  let service: ViewerEventService;
+
+  const mockHighLight: any = {
+    page : 2
+  };
+
+  beforeEach(() => {
+    service = new ViewerEventService();
+  });
+
+  it('should create', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should select the text', () => {
+    const textSelectSpy = spyOn(service.textHighlight, 'next');
+    service.textSelected(mockHighLight);
+
+    expect(textSelectSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should select the Shape', () => {
+    const shapeSelectSpy = spyOn(service.boxHighlight, 'next');
+    service.boxSelected(mockHighLight);
+
+    expect(shapeSelectSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should clear the context toolbar', () => {
+    spyOn(service.ctxToolbarCleared, 'next');
+
+    service.clearCtxToolbar();
+
+    expect(service.ctxToolbarCleared.next).toHaveBeenCalled();
+  });
+});