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

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

@@ -0,0 +1,52 @@
+import {Component, Input, ViewEncapsulation} from '@angular/core';
+import {TagsModel} from '../models/tags.model';
+import {TagsServices} from '../services/tags/tags.services';
+import {UntypedFormControl} from '@angular/forms';
+import {Observable} from 'rxjs';
+
+@Component({
+    selector: 'mv-tags',
+    templateUrl: './tags.component.html',
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
+})
+export class TagsComponent {
+  @Input() tagItems: TagsModel[];
+  @Input() userId: string;
+  @Input() editable: boolean;
+  @Input() annoId: string;
+
+  public validators = [this.minLength, this.maxLength20];
+  public errorMessages: {[id: string]: string} = {
+    'minLength': 'Minimum of 2 characters',
+    'maxLength20': 'Maximum of 20 characters'
+  };
+
+  constructor(private tagsServices: TagsServices) {}
+
+  onUpdateTags(value) {
+    this.tagsServices.updateTagItems(value, this.annoId);
+  }
+
+  public requestAutocompleteItems = (text: string): Observable<any[]> => {
+    return this.tagsServices.getAllTags(this.userId);
+  }
+
+  private minLength(control: UntypedFormControl) {
+    if (control.value.length < 2) {
+      return {
+        'minLength': true
+      };
+    }
+    return null;
+  }
+
+  private maxLength20(control: UntypedFormControl) {
+    if (control.value.length >= 20) {
+      return {
+        'maxLength20': true
+      };
+    }
+    return null;
+  }
+}

package/projects/media-viewer/src/lib/bookmark/components/bookmark-icons.component.html

@@ -0,0 +1,19 @@
+<div class="pageContainer">
+  <div *ngFor="let bookmarks of (bookmarksPerPage$ | async);  index as i"
+       class="pageContainer__page"
+       [ngStyle]="{
+         'width.px': bookmarks.styles.width,
+         'height.px': bookmarks.styles.height
+       }">
+    <div class="pageContainer__page-item">
+      <ng-container *ngFor="let bMrk of bookmarks.bookmark">
+        <div class="bookmark__here"
+           [style.width]="16 * zoom + 'px'"
+           [style.height]="24 * zoom + 'px'"
+           [style.top]="bMrk.yCoordinate * zoom + 'px'"
+           [title]="bMrk.name">
+        </div>
+      </ng-container>
+    </div>
+  </div>
+</div>

package/projects/media-viewer/src/lib/bookmark/components/bookmark-icons.component.ts

@@ -0,0 +1,27 @@
+import {Bookmark, BookmarksPerPage} from '../../viewers/pdf-viewer/side-bar/bookmarks/bookmarks.interfaces';
+import {Component, Input, OnInit} from '@angular/core';
+import { select, Store } from '@ngrx/store';
+import * as fromStore from '../../store/reducers/reducers';
+import * as fromSelectors from '../../store/selectors/bookmark.selectors';
+import { Observable } from 'rxjs';
+
+@Component({
+    selector: 'mv-bookmark-icons',
+    templateUrl: './bookmark-icons.component.html',
+    standalone: false
+})
+export class BookmarkIconsComponent implements OnInit {
+
+  @Input() zoom: number;
+  @Input() rotate: number;
+  bookmarksPerPage$: Observable<BookmarksPerPage[]>;
+  bookmarks: Bookmark[];
+  documentId: string;
+
+  constructor(private store: Store<fromStore.State>) {}
+
+  ngOnInit(): void {
+    this.bookmarksPerPage$ = this.store.pipe(select(fromSelectors.getBookmarksPerPage));
+  }
+
+}

package/projects/media-viewer/src/lib/icp/confirm-exit/confirm-action-dialog.component.html

@@ -0,0 +1,16 @@
+<div id="modal-background" class="modal" (click)="onCancel()">
+  <div id="modal" 
+    class="modal-content govuk-width-container clearfix"
+    (click)="$event.stopPropagation()"
+    #modalContainer
+    tabIndex="-1"
+    role="dialog"
+    aria-modal="true"
+  >
+    <h2 class="govuk-heading-s">Are you sure you want to leave the presentation?</h2>
+    <div class="button-container">
+      <button id="modal-close-button" (click)="onConfirm()" class="govuk-button">Confirm</button>
+      <button (click)="onCancel()" class="govuk-button govuk-button--secondary">Cancel</button>
+    </div>
+  </div>
+</div>

package/projects/media-viewer/src/lib/icp/confirm-exit/confirm-action-dialog.component.spec.ts

@@ -0,0 +1,124 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ConfirmActionDialogComponent } from './confirm-action-dialog.component';
+import { IcpEventService } from '../../toolbar/icp-event.service';
+
+describe('ConfirmActionDialogComponent', () => {
+  let component: ConfirmActionDialogComponent;
+  let fixture: ComponentFixture<ConfirmActionDialogComponent>;
+  let icpEventService: IcpEventService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ConfirmActionDialogComponent ],
+      providers: [{
+        provide: IcpEventService,
+        useValue: {
+          confirmExit: () => {},
+          leavingSession: {
+            next: (a: boolean) => {}
+          }
+        }
+      }]
+    });
+
+    icpEventService = TestBed.inject(IcpEventService);
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfirmActionDialogComponent);
+    component = fixture.componentInstance;
+
+    fixture.detectChanges();
+  });
+
+  it('should emit new leavingSession event on cancel', () => {
+    spyOn(icpEventService.leavingSession, 'next').and.callThrough();
+    component.onCancel();
+
+    expect(icpEventService.leavingSession.next).toHaveBeenCalledWith(false);
+  });
+
+  it('should call confirmExit and emit a new leavingSession event', () => {
+    spyOn(icpEventService, 'confirmExit').and.callThrough();
+    spyOn(icpEventService.leavingSession, 'next').and.callThrough();
+    component.onConfirm();
+
+    expect(icpEventService.confirmExit).toHaveBeenCalled();
+    expect(icpEventService.leavingSession.next).toHaveBeenCalledWith(false);
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have onCancel method defined', () => {
+    expect(component.onCancel).toBeDefined();
+  });
+
+  it('should have onConfirm method defined', () => {
+    expect(component.onConfirm).toBeDefined();
+  });
+
+  it('should call confirmExit when onConfirm is called', () => {
+    spyOn(icpEventService, 'confirmExit').and.callThrough();
+    component.onConfirm();
+    expect(icpEventService.confirmExit).toHaveBeenCalled();
+  });
+
+  it('should emit leavingSession event with false when onCancel is called', () => {
+    spyOn(icpEventService.leavingSession, 'next').and.callThrough();
+    component.onCancel();
+    expect(icpEventService.leavingSession.next).toHaveBeenCalledWith(false);
+  });
+
+  it('should emit leavingSession event with false when onConfirm is called', () => {
+    spyOn(icpEventService.leavingSession, 'next').and.callThrough();
+    component.onConfirm();
+    expect(icpEventService.leavingSession.next).toHaveBeenCalledWith(false);
+  });
+
+  it('should not call confirmExit when onCancel is called', () => {
+    spyOn(icpEventService, 'confirmExit').and.callThrough();
+    component.onCancel();
+    expect(icpEventService.confirmExit).not.toHaveBeenCalled();
+  });
+
+  it('should call leavingSession.next with true when onConfirm is called', () => {
+    spyOn(icpEventService.leavingSession, 'next').and.callThrough();
+    component.onConfirm();
+    expect(icpEventService.leavingSession.next).toHaveBeenCalledWith(false);
+  });
+
+  it('should not call leavingSession.next with true when onCancel is called', () => {
+    spyOn(icpEventService.leavingSession, 'next').and.callThrough();
+    component.onCancel();
+    expect(icpEventService.leavingSession.next).not.toHaveBeenCalledWith(true);
+  });
+
+  describe('Focus functionality', () => {
+    it('should have modalContainer ViewChild defined after view initialization', () => {
+      expect(component.modalContainer).toBeDefined();
+      expect(component.modalContainer.nativeElement).toBeTruthy();
+    });
+
+    it('should set focus to the modal element when ngAfterViewInit is called', () => {
+      const focusSpy = spyOn(component.modalContainer.nativeElement, 'focus');
+
+      component.ngAfterViewInit();
+
+      expect(focusSpy).toHaveBeenCalled();
+    });
+
+    it('should not throw error if modalContainer is undefined', () => {
+      component.modalContainer = undefined;
+
+      expect(() => component.ngAfterViewInit()).not.toThrow();
+    });
+
+    it('should have tabindex attribute set to -1 on modal dialog', () => {
+      const modalElement = fixture.nativeElement.querySelector('#modal');
+
+      expect(modalElement.getAttribute('tabindex')).toBe('-1');
+    });
+  });
+});

package/projects/media-viewer/src/lib/icp/confirm-exit/confirm-action-dialog.component.ts

@@ -0,0 +1,28 @@
+import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
+import { IcpEventService } from '../../toolbar/icp-event.service';
+
+@Component({
+    selector: 'mv-confirm-action',
+    templateUrl: './confirm-action-dialog.component.html',
+    standalone: false
+})
+export class ConfirmActionDialogComponent implements AfterViewInit {
+  @ViewChild('modalContainer') modalContainer: ElementRef;
+
+  constructor(private icpEventService: IcpEventService) {}
+
+  ngAfterViewInit(): void {
+    if (this.modalContainer) {
+      this.modalContainer.nativeElement.focus();
+    }
+  }
+
+  onCancel() {
+    this.icpEventService.leavingSession.next(false);
+  }
+
+  onConfirm() {
+    this.icpEventService.confirmExit();
+    this.icpEventService.leavingSession.next(false);
+  }
+}

package/projects/media-viewer/src/lib/icp/icp-follower.service.spec.ts

@@ -0,0 +1,80 @@
+import { fakeAsync, inject, TestBed } from '@angular/core/testing';
+import { Store, StoreModule } from '@ngrx/store';
+import { PdfPosition, reducers } from '../store/reducers/reducers';
+import { IcpUpdateService } from './icp-update.service';
+import { IcpFollowerService } from './icp-follower.service';
+import { ViewerEventService } from '../viewers/viewer-event.service';
+import { ToolbarEventService } from '../toolbar/toolbar-event.service';
+import { PdfPositionUpdate } from '../store/actions/document.actions';
+
+describe('Icp Follower Service', () => {
+
+  let followerService: IcpFollowerService;
+  const mockUpdateService = {
+    newParticipantJoined: () => { },
+    updateScreen: () => { },
+    updatePresenter: () => { },
+    screenUpdated: () => { }
+  } as any;
+
+  const pdfPosition: PdfPosition = {
+    pageNumber: 1,
+    top: 1,
+    left: 1,
+    rotation: 270,
+    scale: 1
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        StoreModule.forFeature('media-viewer', reducers),
+        StoreModule.forRoot({})
+      ],
+      providers: [IcpFollowerService,
+        { provide: IcpUpdateService, useValue: mockUpdateService }]
+    });
+
+    followerService = TestBed.inject(IcpFollowerService);
+  });
+
+  it('should be created', () => {
+    expect(followerService).toBeTruthy();
+  });
+
+  it('should call subscribe if client is follower', () => {
+    spyOn(followerService, 'subscribe');
+
+    followerService.update(true);
+
+    expect(followerService.subscribe).toHaveBeenCalled();
+  });
+
+  it('should call unsubscribe if client is not follower', () => {
+    spyOn(followerService, 'unsubscribe');
+
+    followerService.update(false);
+
+    expect(followerService.unsubscribe).toHaveBeenCalled();
+  });
+
+  it('should should set subscription to undefined', () => {
+    followerService.unsubscribe();
+
+    expect(followerService.$subscription).toEqual(undefined);
+  });
+
+  it('should follow screen updates',
+    inject([Store, ViewerEventService, ToolbarEventService], fakeAsync((store, viewerEvents, toolbarEvents) => {
+      spyOn(viewerEvents, 'goToDestinationICP');
+      spyOn(toolbarEvents, 'rotate');
+
+      store.dispatch(new PdfPositionUpdate({ ...pdfPosition, rotation: 0 }));
+
+      followerService.followScreenUpdate({ pdfPosition });
+
+      expect(viewerEvents.goToDestinationICP).toHaveBeenCalled();
+      expect(toolbarEvents.rotate).toHaveBeenCalled();
+    }))
+  );
+});

package/projects/media-viewer/src/lib/icp/icp-follower.service.ts

@@ -0,0 +1,69 @@
+import { Injectable } from '@angular/core';
+import { ToolbarEventService } from '../toolbar/toolbar-event.service';
+import { select, Store } from '@ngrx/store';
+import { Subscription } from 'rxjs';
+import { IcpUpdateService } from './icp-update.service';
+import { ViewerEventService } from '../viewers/viewer-event.service';
+import { distinctUntilChanged, take } from 'rxjs/operators';
+import { IcpState, IcpSession } from './icp.interfaces';
+import * as fromDocSelectors from '../store/selectors/document.selectors';
+
+@Injectable({ providedIn: 'root' })
+export class IcpFollowerService {
+
+  session: IcpSession;
+  private previousRotation: number|null = null;
+  $subscription: Subscription;
+
+  constructor(private readonly toolbarEvents: ToolbarEventService,
+    private readonly viewerEvents: ViewerEventService,
+    private readonly socketService: IcpUpdateService,
+    private store: Store<IcpState>) { }
+
+
+  update(isFollower: boolean) {
+    if (isFollower) {
+      this.subscribe();
+    } else {
+      this.unsubscribe();
+    }
+  }
+
+  subscribe() {
+    if (!this.$subscription) {
+      this.$subscription = this.socketService.screenUpdated()
+        .subscribe(screen => this.followScreenUpdate(screen));
+    }
+  }
+
+  unsubscribe() {
+    if (this.$subscription) {
+      this.$subscription.unsubscribe();
+      this.$subscription = undefined;
+    }
+  }
+
+  followScreenUpdate({ pdfPosition }) {
+    if (pdfPosition) {
+      this.viewerEvents.goToDestinationICP([
+        pdfPosition.pageNumber - 1,
+        { 'name': 'XYZ' },
+        pdfPosition.left,
+        pdfPosition.top
+      ]);
+    }
+    this.store.pipe(
+      select(fromDocSelectors.getPdfPosition), 
+      take(1), 
+      distinctUntilChanged(undefined, a => a.rotation))
+      .subscribe(position => {
+        if (this.previousRotation === pdfPosition.rotation) {
+          return;
+        }
+        const rotationDelta = (pdfPosition.rotation - position.rotation) % 360;
+        if (rotationDelta && rotationDelta !== 0) {
+          this.toolbarEvents.rotate(rotationDelta);
+        }
+      });
+  }
+}

package/projects/media-viewer/src/lib/icp/icp-presenter.service.spec.ts

@@ -0,0 +1,119 @@
+import { fakeAsync, inject, TestBed } from '@angular/core/testing';
+import { IcpPresenterService } from './icp-presenter.service';
+import { IcpUpdateService } from './icp-update.service';
+import { Store, StoreModule } from '@ngrx/store';
+import { PdfPosition, reducers } from '../store/reducers/reducers';
+import { IcpSocketSessionJoined } from '../store/actions/icp.actions';
+import { PdfPositionUpdate } from '../store/actions/document.actions';
+import { IcpParticipant, IcpSession } from './icp.interfaces';
+import { of } from 'rxjs';
+
+describe('Icp Presenter Service', () => {
+
+  let presenterService: IcpPresenterService;
+  let updateService: IcpUpdateService;
+  const mockUpdateService = {
+    newParticipantJoined: () => of('client'),
+    updateScreen: () => { },
+    updatePresenter: () => { },
+    screenUpdated: () => { }
+  } as any;
+
+  const session: IcpSession = {
+    caseId: 'caseId',
+    documentId: 'documentId',
+    sessionId: 'sessionId',
+    dateOfHearing: new Date(),
+    connectionUrl: ''
+  };
+  const participant: IcpParticipant = {
+    id: 'id',
+    username: 'name'
+  };
+  const pdfPosition: PdfPosition = {
+    pageNumber: 1,
+    top: 1,
+    left: 1,
+    rotation: 90,
+    scale: 1
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        StoreModule.forFeature('media-viewer', reducers),
+        StoreModule.forRoot({})
+      ],
+      providers: [IcpPresenterService,
+        { provide: IcpUpdateService, useValue: mockUpdateService }]
+    });
+
+    presenterService = TestBed.inject(IcpPresenterService);
+    updateService = TestBed.inject(IcpUpdateService);
+  });
+
+  it('should be created', () => {
+    expect(presenterService).toBeTruthy();
+  });
+
+  it('should call subscribe if client is presenter', () => {
+    spyOn(presenterService, 'subscribe');
+
+    presenterService.update(true);
+
+    expect(presenterService.subscribe).toHaveBeenCalled();
+  });
+
+  it('should call unsubscribe if client is not presenter', () => {
+    spyOn(presenterService, 'unsubscribe');
+
+    presenterService.update(false);
+
+    expect(presenterService.unsubscribe).toHaveBeenCalled();
+  });
+
+  it('should set up subscriptions',
+    inject([Store], fakeAsync((store) => {
+      spyOn(presenterService, 'onNewParticipantJoined');
+      spyOn(presenterService, 'onPositionUpdate');
+
+      presenterService.subscribe();
+
+      const joinedPayload = { session: session, participantInfo: { client: participant, presenter: participant } };
+      store.dispatch(new IcpSocketSessionJoined(joinedPayload));
+      store.dispatch(new PdfPositionUpdate(pdfPosition));
+      mockUpdateService.newParticipantJoined();
+
+      expect(presenterService.presenter).toEqual(participant);
+      expect(presenterService.pdfPosition).toEqual(pdfPosition);
+      expect(presenterService.onPositionUpdate).toHaveBeenCalledWith(pdfPosition);
+      expect(presenterService.onNewParticipantJoined).toHaveBeenCalled();
+    }))
+  );
+
+  it('should should set subscription to undefined', () => {
+    presenterService.unsubscribe();
+
+    expect(presenterService.$subscription).toEqual(undefined);
+  });
+
+  it('should call service to update screen position', () => {
+    spyOn(updateService, 'updateScreen');
+
+    presenterService.onPositionUpdate(pdfPosition);
+
+    expect(updateService.updateScreen).toHaveBeenCalledWith({ pdfPosition, document: undefined });
+  });
+
+  it('should call service to update presenter', () => {
+    spyOn(presenterService, 'onPositionUpdate');
+    spyOn(updateService, 'updatePresenter');
+
+    presenterService.pdfPosition = pdfPosition;
+    presenterService.presenter = participant;
+    presenterService.onNewParticipantJoined();
+
+    expect(presenterService.onPositionUpdate).toHaveBeenCalledWith(pdfPosition);
+    expect(updateService.updatePresenter).toHaveBeenCalledWith(participant);
+  });
+});

package/projects/media-viewer/src/lib/icp/icp-presenter.service.ts

@@ -0,0 +1,61 @@
+import { Injectable } from '@angular/core';
+import { ToolbarEventService } from '../toolbar/toolbar-event.service';
+import { select, Store } from '@ngrx/store';
+import * as fromDocSelectors from '../store/selectors/document.selectors';
+import { distinctUntilChanged, Subscription, take } from 'rxjs';
+import { IcpUpdateService } from './icp-update.service';
+import { IcpState, IcpScreenUpdate, IcpSession, IcpParticipant } from './icp.interfaces';
+import * as fromIcpSelectors from '../store/selectors/icp.selectors';
+import { PdfPosition } from '../store/reducers/document.reducer';
+
+@Injectable({ providedIn: 'root' })
+export class IcpPresenterService {
+
+  session: IcpSession;
+  presenter: IcpParticipant;
+  pdfPosition: PdfPosition;
+
+  $subscription: Subscription;
+
+  constructor(private readonly toolbarEvents: ToolbarEventService,
+              private readonly socketService: IcpUpdateService,
+              private store: Store<IcpState>) {}
+
+  update(isPresenter: boolean) {
+    if (isPresenter) {
+      this.subscribe();
+    } else {
+      this.unsubscribe();
+    }
+  }
+
+  subscribe() {
+    if (!this.$subscription) {
+      this.$subscription = this.store.pipe(select(fromDocSelectors.getPdfPosition)).subscribe(pdfPosition => {
+          this.pdfPosition = pdfPosition;
+          this.onPositionUpdate(pdfPosition);
+        });
+      this.$subscription.add(this.store.pipe(select(fromIcpSelectors.getPresenter)).subscribe(presenter => {
+        this.presenter = presenter;
+      }));
+      this.$subscription.add(this.socketService.newParticipantJoined().subscribe(() => this.onNewParticipantJoined()));
+    }
+  }
+
+  unsubscribe() {
+    if (this.$subscription) {
+      this.$subscription.unsubscribe();
+      this.$subscription = undefined;
+    }
+  }
+
+  onPositionUpdate(pdfPosition: PdfPosition) {
+    const screen: IcpScreenUpdate = { pdfPosition, document: undefined };
+    this.socketService.updateScreen(screen);
+  }
+
+  onNewParticipantJoined() {
+    this.onPositionUpdate(this.pdfPosition);
+    this.socketService.updatePresenter(this.presenter);
+  }
+}

package/projects/media-viewer/src/lib/icp/icp-session-api.service.spec.ts

@@ -0,0 +1,52 @@
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { IcpSessionApiService } from './icp-session-api.service';
+import { IcpSession } from './icp.interfaces';
+import { fakeAsync, inject, TestBed } from '@angular/core/testing';
+
+describe('IcpSessionApiService', () => {
+
+  let httpMock: HttpTestingController;
+  let api: IcpSessionApiService;
+
+  const caseId = 'caseId';
+  const documentId = 'documentId';
+  const session: IcpSession = {
+    caseId: 'caseId',
+    documentId: documentId,
+    sessionId: 'sessionId',
+    dateOfHearing: new Date(),
+    connectionUrl: ''
+  };
+  const username = 'name';
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        IcpSessionApiService
+      ],
+      imports: [
+        HttpClientTestingModule
+      ]
+    });
+
+    api = TestBed.inject(IcpSessionApiService);
+    api.ICP_SESSION_API = '/my-context-path';
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  it('should be created', inject([IcpSessionApiService], (service: IcpSessionApiService) => {
+    expect(service).toBeTruthy();
+  }));
+
+  it('load icp session', fakeAsync((done) => {
+    api.loadSession({ caseId: 'caseId', documentId: 'documentId' })
+      .subscribe(response => {
+        expect(response.username).toBe(username);
+        expect(response.session).toBe(session);
+      }, error => done(error));
+
+    const req = httpMock.expectOne(`/my-context-path/${caseId}/${documentId}`);
+    expect(req.request.method).toBe('GET');
+    req.flush({ session, username });
+  }));
+});

package/projects/media-viewer/src/lib/icp/icp-session-api.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { map } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { IcpSession } from './icp.interfaces';
+
+@Injectable({ providedIn: 'root' })
+export class IcpSessionApiService {
+
+  public ICP_SESSION_API = '/icp/sessions';
+
+  constructor(private readonly httpClient: HttpClient) { }
+
+  public loadSession(payload: { caseId: string, documentId: string }): Observable<any> {
+    return this.httpClient
+      .get<{ username: string, session: IcpSession }>(`${this.ICP_SESSION_API}/${payload.caseId}/${payload.documentId}`,
+        { observe: 'response', withCredentials: true })
+      .pipe(map(response => {
+        const token = response.headers.get('X-Access-Token');
+        return { 
+          ...response.body, 
+          token
+        };
+      }));
+  }
+}