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

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

@@ -0,0 +1,42 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ParticipantsListComponent } from './participants-list.component';
+import { ToolbarEventService } from '../../toolbar/toolbar-event.service';
+import { StoreModule } from '@ngrx/store';
+import { reducers } from '../../store/reducers/reducers';
+import { BehaviorSubject } from 'rxjs';
+
+describe('ParticipantsListComponent', () => {
+  let component: ParticipantsListComponent;
+  let fixture: ComponentFixture<ParticipantsListComponent>;
+  let toolbarEvents: ToolbarEventService;
+  const toolbarEventsMock = {
+    icp: {
+      participantsListVisible: new BehaviorSubject(false),
+    },
+    toggleParticipantsList: () => {},
+    commentsPanelVisible: new BehaviorSubject(false)
+  };
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ParticipantsListComponent ],
+      imports: [
+        StoreModule.forFeature('media-viewer', reducers),
+        StoreModule.forRoot({})
+      ],
+      providers: [{ provide: ToolbarEventService, useValue: toolbarEventsMock }]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ParticipantsListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    toolbarEvents = TestBed.inject(ToolbarEventService);
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/media-viewer/src/lib/icp/participants-list/participants-list.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+import { ToolbarEventService } from '../../toolbar/toolbar-event.service';
+import { IcpParticipant, IcpState } from '../icp.interfaces';
+import { select, Store } from '@ngrx/store';
+import * as fromSelectors from '../../store/selectors/icp.selectors';
+import { IcpEventService } from '../../toolbar/icp-event.service';
+
+@Component({
+    selector: 'mv-participants-list',
+    templateUrl: './participants-list.component.html',
+    standalone: false
+})
+export class ParticipantsListComponent implements OnInit, OnDestroy {
+
+  subscription: Subscription;
+  participants$: Observable<IcpParticipant[]>;
+  presenter$: Observable<IcpParticipant>;
+  isPresenter$: Observable<boolean>;
+
+  showParticipantsList = false;
+
+  constructor(private readonly toolbarEvents: ToolbarEventService,
+              private store: Store<IcpState>,
+              private readonly icpEventService: IcpEventService) {}
+
+  ngOnInit() {
+    this.participants$ = this.store.pipe(select(fromSelectors.getParticipants));
+    this.presenter$ = this.store.pipe(select(fromSelectors.getPresenter));
+    this.isPresenter$ = this.store.pipe(select(fromSelectors.isPresenter));
+
+    this.subscription = this.icpEventService.participantsListVisible.subscribe(isVisible => this.showParticipantsList = isVisible);
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+}

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

@@ -0,0 +1,139 @@
+import { SocketService } from './socket.service';
+import { Observable, of } from 'rxjs';
+import { IcpEvents } from './icp.events';
+
+describe('SocketService', () => {
+
+  let socketService: SocketService;
+
+  const mockSocketClient: any = {
+    readyState: WebSocket.OPEN,
+    onclose: () => { },
+    onerror: () => { },
+    onmessage: () => { },
+    onopen: () => { },
+    send: (data: any) => { },
+  };
+
+  beforeEach(() => {
+    socketService = new SocketService();
+    spyOn(socketService, 'getSocketClient').and.returnValue(of(mockSocketClient));
+    spyOnAllFunctions(mockSocketClient);
+    socketService.connect('http://testurl.com', {
+      sessionId: 'dummy-session-id',
+      documentId: 'dummy-document-id',
+      caseId: 'dummy-case-id',
+      dateOfHearing: undefined,
+      connectionUrl: 'dummy-connection-url'
+    });
+  });
+
+  it('should join', () => {
+    spyOn(socketService, 'emit');
+    socketService.join({});
+    expect(socketService.emit).toHaveBeenCalledWith('IcpClientJoinSession', {});
+  });
+
+  it('should leave', () => {
+    socketService.subscription = { unsubscribe: () => { } } as any;
+    spyOn(socketService.subscription, 'unsubscribe');
+    spyOn(socketService, 'emit');
+    socketService.leave({});
+
+    expect(socketService.emit).toHaveBeenCalledWith('IcpClientLeaveSession', {});
+    expect(socketService.subscription.unsubscribe).toHaveBeenCalled();
+  });
+
+  it('should emit', () => {
+    socketService['socket'] = mockSocketClient;
+    socketService.emit('event', {});
+    expect(mockSocketClient.send).toHaveBeenCalledWith('{"type":"event","event":"event","data":{}}');
+  });
+
+
+  it('should listen', function () {
+    const observable = socketService.listen(IcpEvents.PARTICIPANTS_UPDATED);
+    expect(observable).toEqual(jasmine.any(Observable));
+  });
+
+  it('should unsubscribe', () => {
+    socketService.subscription = { unsubscribe: () => { } } as any;
+    spyOn(socketService.subscription, 'unsubscribe');
+    socketService.ngOnDestroy();
+    expect(socketService.subscription.unsubscribe).toHaveBeenCalled();
+  });
+
+  it('message event handler should call session joined', () => {
+    const nextSpy = spyOn(socketService.sessionJoined$, 'next');
+    socketService.messageEventHandller('IcpClientJoinedSession', { test: 'hello' });
+    expect(nextSpy).toHaveBeenCalled();
+  });
+
+  it('message event handler should call presenter updated', () => {
+    const nextSpy = spyOn(socketService.presenterUpdated$, 'next');
+    socketService.messageEventHandller('IcpPresenterUpdated', { test: 'hello' });
+    expect(nextSpy).toHaveBeenCalled();
+  });
+
+  it('message event handler should call client disconnected', () => {
+    const nextSpy = spyOn(socketService.clientDisconnected$, 'next');
+    socketService.messageEventHandller('IcpClientDisconnectedFromSession', { test: 'hello' });
+    expect(nextSpy).toHaveBeenCalled();
+  });
+
+  it('message event handler should call participant updated', () => {
+    const nextSpy = spyOn(socketService.participantUpdated$, 'next');
+    socketService.messageEventHandller('IcpParticipantsListUpdated', { test: 'hello' });
+    expect(nextSpy).toHaveBeenCalled();
+  });
+
+  it('message event handler should call new participant joined', () => {
+    const nextSpy = spyOn(socketService.newParticipantJoined$, 'next');
+    socketService.messageEventHandller('IcpNewParticipantJoinedSession', { test: 'hello' });
+    expect(nextSpy).toHaveBeenCalled();
+  });
+
+  it('message event handler should call screen updated', () => {
+    const nextSpy = spyOn(socketService.screenUpdated$, 'next');
+    socketService.messageEventHandller('IcpScreenUpdated', { test: 'hello' });
+    expect(nextSpy).toHaveBeenCalled();
+  });
+
+  it('listen should call session joined', () => {
+    const nextSpy = spyOn(socketService.sessionJoined$, 'asObservable');
+    socketService.listen(IcpEvents.SESSION_JOINED);
+    expect(nextSpy).toHaveBeenCalled();
+  });
+
+  it('listen should call presenter updated', () => {
+    const nextSpy = spyOn(socketService.presenterUpdated$, 'asObservable');
+    socketService.listen(IcpEvents.PRESENTER_UPDATED);
+    expect(nextSpy).toHaveBeenCalled();
+  });
+
+  it('listen should call client disconnected', () => {
+    const nextSpy = spyOn(socketService.clientDisconnected$, 'asObservable');
+    socketService.listen(IcpEvents.CLIENT_DISCONNECTED);
+    expect(nextSpy).toHaveBeenCalled();
+  });
+
+  it('listen should call new participant joined', () => {
+    const nextSpy = spyOn(socketService.newParticipantJoined$, 'asObservable');
+    socketService.listen(IcpEvents.NEW_PARTICIPANT_JOINED);
+    expect(nextSpy).toHaveBeenCalled();
+  });
+
+  it('listen should call screen updated', () => {
+    const nextSpy = spyOn(socketService.screenUpdated$, 'asObservable');
+    socketService.listen(IcpEvents.SCREEN_UPDATED);
+    expect(nextSpy).toHaveBeenCalled();
+  });
+
+  it('connected should be observable', () => {
+    const nextSpy = spyOn(socketService.connected$, 'asObservable');
+    socketService.connected();
+    expect(nextSpy).toHaveBeenCalled();
+  });
+
+});
+

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

@@ -0,0 +1,138 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import { BehaviorSubject, from, Observable, of, Subject, Subscription } from 'rxjs';
+import { IcpEvents } from './icp.events';
+import { IcpParticipant, IcpSession } from './icp.interfaces';
+
+@Injectable({ providedIn: 'root' })
+export class SocketService implements OnDestroy {
+
+  private socket: WebSocket;
+  subscription: Subscription;
+  connected$ = new BehaviorSubject<boolean>(false);
+  sessionJoined$ = new Subject<void>();
+  presenterUpdated$ = new Subject<void>();
+  clientDisconnected$ = new Subject<void>();
+  participantUpdated$ = new Subject<void>();
+  newParticipantJoined$ = new Subject<void>();
+  screenUpdated$ = new Subject<void>();
+
+  constructor() { }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+
+  connect(url: string, session: IcpSession) {
+    const socketUrl = new URL(url);
+    socketUrl.searchParams.append('sessionId', `${session.sessionId}`);
+    socketUrl.searchParams.append('caseId', `${session.caseId}`);
+    socketUrl.searchParams.append('documentId', `${session.documentId}`);
+    this.subscription = this.getSocketClient(socketUrl.toString()).subscribe((socket: WebSocket) => {
+
+      socket.onopen = (event: Event) => {
+        this.connected$.next(true);
+      };
+
+      socket.onmessage = (event: MessageEvent) => {
+        console.log('onmessage');
+        const eventData = JSON.parse(event.data);
+        if (eventData.data && eventData.data.eventName) {
+          this.messageEventHandller(eventData.data.eventName, eventData.data.data);
+        }
+      };
+
+      socket.onerror = (event: Event) => {
+        console.log('onerror');
+      };
+
+      socket.onclose = (event: CloseEvent) => {
+        console.log('onclose');
+      };
+    });
+  }
+
+  connected(): Observable<boolean> {
+    return this.connected$.asObservable();
+  }
+
+  join(session) {
+    this.emit(IcpEvents.SESSION_JOIN, session);
+  }
+
+  leave(session) {
+    this.emit(IcpEvents.SESSION_LEAVE, session);
+    this.subscription.unsubscribe();
+  }
+
+  emit(event: string, data: any) {
+    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+      this.socket.send(JSON.stringify({
+        type: 'event',
+        event,
+        data
+      }));
+    } else {
+      console.warn('WebSocket is not open. Ready state is:', this.socket ? this.socket.readyState : 'no socket');
+    }
+  }
+
+  listen(event: IcpEvents): Observable<any> {
+    switch (event) {
+      case IcpEvents.SESSION_JOINED: {
+        return this.sessionJoined$.asObservable();
+      }
+      case IcpEvents.PRESENTER_UPDATED: {
+        return this.presenterUpdated$.asObservable();
+      }
+      case IcpEvents.CLIENT_DISCONNECTED: {
+        return this.clientDisconnected$.asObservable();
+      }
+      case IcpEvents.PARTICIPANTS_UPDATED: {
+        return this.participantUpdated$.asObservable();
+      }
+      case IcpEvents.NEW_PARTICIPANT_JOINED: {
+        return this.newParticipantJoined$.asObservable();
+      }
+      case IcpEvents.SCREEN_UPDATED: {
+        return this.screenUpdated$.asObservable();
+      }
+      default: {
+        break;
+      }
+    }
+  }
+
+  messageEventHandller(eventName: string, data: any) {
+    switch (eventName) {
+      case IcpEvents.SESSION_JOINED: {
+        this.sessionJoined$.next(data);
+        break;
+      }
+      case IcpEvents.PRESENTER_UPDATED: {
+        this.presenterUpdated$.next(data);
+        break;
+      }
+      case IcpEvents.CLIENT_DISCONNECTED: {
+        this.clientDisconnected$.next();
+        break;
+      }
+      case IcpEvents.PARTICIPANTS_UPDATED: {
+        this.participantUpdated$.next(data);
+        break;
+      }
+      case IcpEvents.NEW_PARTICIPANT_JOINED: {
+        this.newParticipantJoined$.next();
+        break;
+      }
+      case IcpEvents.SCREEN_UPDATED: {
+        this.screenUpdated$.next(data);
+        break;
+      }
+    }
+  }
+
+  getSocketClient(url: string): Observable<WebSocket> {
+    this.socket = new WebSocket(url, 'json.webpubsub.azure.v1');
+    return of(this.socket);
+  }
+}

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

@@ -0,0 +1,105 @@
+<div
+  id="outerContainer"
+  [ngClass]="{
+    'has-redact-bar': toolbarEvents.redactionMode | async,
+    'icp-mode': icpEventService.enabled | async,
+    'is-redaction-preview': toolbarEvents.redactionPreview | async,
+    sidebarOpen: toolbarEvents.sidebarOpen | async,
+    'has-scroll-bar': hasScrollBar,
+    'has-different-page-size': hasDifferentPageSize$ | async
+  }"
+  [ngStyle]="{ width: width }"
+>
+  <mv-comments-summary
+    *ngIf="showCommentSummary"
+    [title]="documentTitle || 'Comment Summary'"
+    [contentType]="contentType"
+  >
+  </mv-comments-summary>
+
+  <mv-confirm-action
+    *ngIf="icpEventService.leavingSession | async"
+  ></mv-confirm-action>
+
+  <div id="mainContainer">
+    <mv-main-toolbar
+      *ngIf="showToolbar"
+      [enableAnnotations]="enableAnnotations"
+      [enableICP]="enableICP"
+      [enableRedactions]="enableRedactions"
+      [contentType]="contentType"
+    >
+    </mv-main-toolbar>
+    <mv-redaction-toolbar
+      [showRedactSearch]="enableRedactSearch"
+      *ngIf="toolbarEvents.redactionMode | async"
+    ></mv-redaction-toolbar>
+    <mv-highlight-toolbar
+      *ngIf="toolbarEvents.highlightToolbarSubject | async"
+    ></mv-highlight-toolbar>
+    <mv-icp-toolbar *ngIf="icpEventService.enabled | async"></mv-icp-toolbar>
+
+    <div #viewerRef>
+      <mv-conversion-viewer
+        *ngIf="convertibleContent"
+        (documentTitle)="onDocumentTitleChange($event)"
+        (mediaLoadStatus)="onMediaLoad($event)"
+        (viewerException)="onLoadException($event)"
+        [enableAnnotations]="enableAnnotations"
+        [enableRedactions]="enableRedactions"
+        [annotationSet]="enableAnnotations ? (annotationSet$ | async) : null"
+        [originalUrl]="url"
+        [downloadFileName]="downloadFileName"
+        [height]="viewerHeight"
+        mvRotationPersist
+      >
+      </mv-conversion-viewer>
+      <mv-pdf-viewer
+        *ngIf="contentType === 'pdf'"
+        #pdfViewer
+        (mediaLoadStatus)="onMediaLoad($event)"
+        (pdfViewerException)="onLoadException($event)"
+        (documentTitle)="onDocumentTitleChange($event)"
+        [url]="url"
+        [enableAnnotations]="enableAnnotations"
+        [enableRedactions]="enableRedactions"
+        [enableICP]="enableICP"
+        [annotationSet]="enableAnnotations ? (annotationSet$ | async) : null"
+        [downloadFileName]="downloadFileName"
+        [height]="viewerHeight"
+        [caseId]="caseId"
+        mvRotationPersist
+      >
+      </mv-pdf-viewer>
+      <mv-image-viewer
+        *ngIf="contentType === 'image'"
+        (mediaLoadStatus)="onMediaLoad($event)"
+        (imageViewerException)="onLoadException($event)"
+        [url]="url"
+        [enableAnnotations]="enableAnnotations"
+        [annotationSet]="enableAnnotations ? (annotationSet$ | async) : null"
+        [downloadFileName]="downloadFileName"
+        [height]="viewerHeight"
+        mvRotationPersist
+      >
+      </mv-image-viewer>
+      <mv-multimedia-player
+        *ngIf="multimediaContent"
+        [multimediaOn]="multimediaPlayerEnabled"
+        [url]="url"
+        [downloadFileName]="downloadFileName"
+        (loadStatus)="onMediaLoad($event)"
+      >
+      </mv-multimedia-player>
+      <mv-unsupported-viewer
+        *ngIf="unsupportedContent"
+        [url]="url"
+        [typeException]="typeException"
+        [downloadFileName]="downloadFileName"
+        (loadStatus)="onMediaLoad($event)"
+        (unsupportedViewerException)="onLoadException($event)"
+      >
+      </mv-unsupported-viewer>
+    </div>
+  </div>
+</div>