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

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

@@ -1,202 +0,0 @@
-import {
-  Component,
-  ElementRef,
-  EventEmitter,
-  HostListener,
-  Input,
-  OnChanges,
-  OnDestroy,
-  OnInit,
-  Output,
-  SimpleChanges,
-  ViewChild,
-} from '@angular/core';
-import { Subscription } from 'rxjs';
-import { PrintService } from '../../print.service';
-import { AnnotationSet } from '../../annotations/annotation-set/annotation-set.model';
-import { ToolbarEventService } from '../../toolbar/toolbar-event.service';
-import { ResponseType, ViewerException } from '../viewer-exception.model';
-import { ViewerUtilService } from '../viewer-util.service';
-import { ToolbarButtonVisibilityService } from '../../toolbar/toolbar-button-visibility.service';
-import { Store } from '@ngrx/store';
-import * as fromStore from '../../store/reducers/reducers';
-import * as fromDocument from '../../store/actions/document.actions';
-import * as fromAnnotationActions from '../../store/actions/annotation.actions';
-import { ViewerEventService } from '../viewer-event.service';
-
-@Component({
-    selector: 'mv-image-viewer',
-    templateUrl: './image-viewer.component.html',
-    standalone: false
-})
-export class ImageViewerComponent implements OnInit, OnDestroy, OnChanges {
-
-  @Input() url: string;
-  @Input() downloadFileName: string;
-
-  @Input() enableAnnotations: boolean;
-  @Input() annotationSet: AnnotationSet | null;
-
-  @Input() height: string;
-
-  @Output() mediaLoadStatus = new EventEmitter<ResponseType>();
-  @Output() imageViewerException = new EventEmitter<ViewerException>();
-
-  errorMessage: string;
-
-  @ViewChild('img', {static: false}) img: ElementRef;
-  rotation = 0;
-  zoom = 1;
-
-  private subscriptions: Subscription[] = [];
-  private viewerException: ViewerException;
-  private response: Subscription;
-
-  showCommentsPanel: boolean;
-  enableGrabNDrag = false;
-  imageHeight: number;
-  imageWidth: number;
-  imageLeft: number;
-  imageTop: number;
-
-  constructor(
-    private store: Store<fromStore.AnnotationSetState>,
-    private readonly printService: PrintService,
-    private readonly viewerUtilService: ViewerUtilService,
-    public readonly toolbarEvents: ToolbarEventService,
-    public readonly toolbarButtons: ToolbarButtonVisibilityService,
-    private viewerEvents: ViewerEventService
-  ) { }
-
-  ngOnInit(): void {
-    this.subscriptions.push(
-      this.toolbarEvents.rotateSubject.subscribe(rotation => this.rotateImage(rotation)),
-      this.toolbarEvents.zoomSubject.subscribe(zoom => this.setZoom(zoom)),
-      this.toolbarEvents.stepZoomSubject.subscribe(zoom => this.stepZoom(zoom)),
-      this.toolbarEvents.printSubject.subscribe(() => this.printService.printDocumentNatively(this.url)),
-      this.toolbarEvents.downloadSubject.subscribe(() => this.download()),
-      this.toolbarEvents.grabNDrag.subscribe(grabNDrag => this.enableGrabNDrag = grabNDrag),
-      this.toolbarEvents.commentsPanelVisible.subscribe(toggle => this.showCommentsPanel = toggle)
-    );
-  }
-
-  @HostListener('mousedown', ['$event'])
-  onImageViewerClick(event: MouseEvent) {
-    const classNme = (event.target as Element).className;
-    if (classNme.startsWith('pageContainer')) {
-      this.store.dispatch(
-        new fromAnnotationActions.SelectedAnnotation({
-          annotationId: '',
-          selected: false,
-          editable: false,
-        })
-      );
-      this.viewerEvents.clearCtxToolbar();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.subscriptions.filter(subscription => !subscription.closed)
-      .forEach(subscription => subscription.unsubscribe());
-    if (this.response) {
-      this.response.unsubscribe();
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.url) {
-      this.errorMessage = null;
-      this.toolbarEvents.reset();
-    }
-  }
-
-  private rotateImage(rotation: number) {
-    this.rotation = (this.rotation + rotation) % 360;
-    this.initAnnoPage(this.img.nativeElement);
-  }
-
-  private async setZoom(zoomFactor: number) {
-    if (!isNaN(zoomFactor)) {
-      await this.setZoomValue(this.calculateZoomValue(zoomFactor));
-      this.img.nativeElement.width = this.img.nativeElement.naturalWidth * this.zoom;
-      this.initAnnoPage(this.img.nativeElement);
-    }
-  }
-
-  private async stepZoom(zoomFactor: number) {
-    if (!isNaN(zoomFactor)) {
-      await this.setZoomValue(this.calculateZoomValue(this.zoom, zoomFactor));
-      this.img.nativeElement.width = this.img.nativeElement.naturalWidth * this.zoom;
-      this.initAnnoPage(this.img.nativeElement);
-    }
-  }
-
-  private download() {
-    const a = document.createElement('a');
-    document.body.appendChild(a);
-    a.setAttribute('style', 'display: none');
-    a.href = this.url;
-    a.download = this.downloadFileName;
-    a.click();
-    a.remove();
-  }
-
-  // the returned promise is a work-around
-  setZoomValue(zoomValue) {
-    return new Promise((resolve) => {
-      this.zoom = zoomValue;
-      this.toolbarEvents.zoomValueSubject.next(zoomValue);
-      resolve(true);
-    });
-  }
-
-  calculateZoomValue(zoomValue, increment = 0) {
-    const newZoomValue = zoomValue + increment;
-    if (newZoomValue > 5) { return 5; }
-    if (newZoomValue < 0.1) { return 0.1; }
-    return +newZoomValue.toFixed(2);
-  }
-
-  onLoadError(url) {
-    this.response = this.viewerUtilService.validateFile(url)
-      .subscribe(
-        next => next,
-        error => {
-          this.viewerException = new ViewerException(error.name,
-            { httpResponseCode: error.status, message: error.message });
-        });
-
-    this.errorMessage = `Could not load the image "${this.url}"`;
-    this.mediaLoadStatus.emit(ResponseType.FAILURE);
-    this.imageViewerException.emit(this.viewerException);
-  }
-
-  onLoad(img: any) {
-    this.mediaLoadStatus.emit(ResponseType.SUCCESS);
-    this.initAnnoPage(img);
-  }
-
-  initAnnoPage(img: any) {
-    this.imageHeight = this.rotation % 180 !== 0 ? img.offsetWidth : img.offsetHeight;
-    this.imageWidth = this.rotation % 180 !== 0 ? img.offsetHeight : img.offsetWidth;
-    this.imageLeft = this.rotation % 180 !== 0 ? img.offsetTop : img.offsetLeft;
-    this.imageTop = this.rotation % 180 !== 0 ? img.offsetLeft : img.offsetTop;
-    const payload: any = [{
-      div: {
-        scrollHeight: this.imageHeight,
-        scrollWidth: this.imageWidth,
-        offsetLeft: this.imageLeft,
-      },
-      pageNumber: 1,
-      scale: this.zoom,
-      rotation: this.rotation,
-      id: 1
-    }];
-
-    this.store.dispatch(new fromDocument.AddPages(payload));
-  }
-
-  toggleCommentsSummary() {
-    this.toolbarEvents.toggleCommentsSummary(!this.toolbarEvents.showCommentSummary.getValue());
-  }
-}

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

@@ -1,53 +0,0 @@
-<div class="govuk-width-container">
-  <div class="govuk-notification-banner__content">
-    <p>
-      <span *ngIf="multimediaOn && playbackMsg === 'loading'">{{
-        "Loading multimedia content ..." | rpxTranslate
-      }}</span>
-      <span *ngIf="!multimediaOn"
-        >{{ "Multimedia playback is not enabled, " | rpxTranslate }}
-      </span>
-      <span *ngIf="multimediaOn && playbackMsg === 'success'"
-        >{{ "Use the player to play to the file or" | rpxTranslate }}
-      </span>
-      <span *ngIf="multimediaOn && playbackMsg === 'error'"
-        >{{ "Mime type not supported." | rpxTranslate }}
-      </span>
-      <a
-        *ngIf="!multimediaOn || playbackMsg !== 'loading'"
-        #downloadLink
-        [href]="url"
-        [download]="downloadFileName"
-        >{{ "Click here to download" | rpxTranslate }}</a
-      >
-    </p>
-    <video
-      #videoPlayer
-      *ngIf="multimediaOn"
-      width="100%"
-      height="100%"
-      preload="auto"
-      (canplay)="onSuccess()"
-      controls
-    >
-      <source (error)="onError()" [src]="url" type="video/mp4" />
-      <source
-        (error)="onError()"
-        [src]="url"
-        type="video/mp4; codecs='avc1, av01, hvc1, hev1, mp4v, mp4a.40.2, opus'"
-      />
-      <source (error)="onError()" [src]="url" type="video/ogg" />
-      <source
-        (error)="onError()"
-        [src]="url"
-        type="video/ogg; codecs='theora, vp8, vp9, flac, opus, vorbis'"
-      />
-      <source (error)="onError()" [src]="url" type="video/webm" />
-      <source
-        (error)="onError()"
-        [src]="url"
-        type="video/webm; codecs='vp8, vp9, vorbis, opus'"
-      />
-    </video>
-  </div>
-</div>

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

@@ -1,77 +0,0 @@
-import { RpxTranslationModule } from 'rpx-xui-translation';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MultimediaPlayerComponent } from './multimedia-player.component';
-import { ToolbarEventService } from '../../toolbar/toolbar-event.service';
-import { ViewerUtilService } from '../viewer-util.service';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { SimpleChange } from '@angular/core';
-
-describe('MultimediaPlayerComponent', () => {
-  let component: MultimediaPlayerComponent;
-  let fixture: ComponentFixture<MultimediaPlayerComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [MultimediaPlayerComponent],
-      providers: [ToolbarEventService, ViewerUtilService],
-      imports: [HttpClientTestingModule, RpxTranslationModule.forRoot({
-        baseUrl: '',
-        debounceTimeMs: 300,
-        validity: {
-          days: 1
-        },
-        testMode: true
-      })]
-    })
-      .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MultimediaPlayerComponent);
-    component = fixture.componentInstance;
-    component.url = 'document-url';
-    component.multimediaOn = true;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should click download button', () => {
-    component.playbackMsg = 'success';
-    fixture.detectChanges();
-    const clickSpy = spyOn(component.downloadLink.nativeElement, 'click');
-
-    component.toolbarEvents.downloadSubject.next();
-    fixture.detectChanges();
-
-    expect(clickSpy).toHaveBeenCalledWith();
-  });
-
-  it('should reload video on changes', () => {
-    const loadSpy = spyOn(component.videoPlayer.nativeElement, 'load');
-    component.playbackMsg = 'something';
-
-    component.ngOnChanges({
-      url: new SimpleChange('old-url', 'new-url', false)
-    });
-
-    expect(loadSpy).toHaveBeenCalledWith();
-    expect(component.playbackMsg).toEqual('loading');
-  });
-
-  it('should confirm mime type is supported', () => {
-    component.playbackMsg = 'loading';
-
-    component.onSuccess();
-
-    expect(component.playbackMsg).toEqual('success');
-  });
-
-  it('should confirm mime type is not supported', () => {
-    component.onError();
-
-    expect(component.playbackMsg).toEqual('error');
-  });
-});

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

@@ -1,71 +0,0 @@
-import {
-  Component,
-  ElementRef,
-  Input,
-  OnInit,
-  ViewChild,
-  OnDestroy,
-  Output,
-  EventEmitter,
-  OnChanges,
-  SimpleChanges
-} from '@angular/core';
-import { ToolbarEventService } from '../../toolbar/toolbar-event.service';
-import { Subscription } from 'rxjs';
-import { ResponseType } from '../viewer-exception.model';
-
-@Component({
-    selector: 'mv-multimedia-player',
-    templateUrl: './multimedia-player.component.html',
-    standalone: false
-})
-export class MultimediaPlayerComponent implements OnInit, OnChanges, OnDestroy {
-
-  @Input() url: string;
-  @Input() downloadFileName: string;
-  @Input() multimediaOn: boolean;
-
-  @Output() loadStatus = new EventEmitter<ResponseType>();
-
-  @ViewChild('downloadLink', {static: false}) downloadLink: ElementRef;
-  @ViewChild('videoPlayer', {static: false}) videoPlayer: ElementRef;
-
-  playbackMsg = 'loading';
-
-  private subscription: Subscription;
-
-  constructor(
-    public readonly toolbarEvents: ToolbarEventService,
-  ) {}
-
-  public ngOnInit(): void {
-    this.subscription = this.toolbarEvents.downloadSubject
-      .subscribe(() => this.downloadLink.nativeElement.click());
-    this.loadStatus.emit(ResponseType.SUCCESS);
-  }
-
-  public ngOnChanges(changes: SimpleChanges) {
-    if (changes.url) {
-      this.reloadVideo();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.subscription.unsubscribe();
-  }
-
-  reloadVideo() {
-    if (this.videoPlayer) {
-      this.playbackMsg = 'loading';
-      this.videoPlayer.nativeElement.load();
-    }
-  }
-
-  onSuccess() {
-    this.playbackMsg = 'success';
-  }
-
-  onError() {
-    this.playbackMsg = 'error';
-  }
-}

package/projects/media-viewer/src/lib/viewers/pdf-viewer/pdf-js/pdf-js-wrapper.provider.spec.ts

@@ -1,25 +0,0 @@
-import { PdfJsWrapperFactory } from './pdf-js-wrapper.provider';
-import { Subject } from 'rxjs';
-import { ToolbarEventService } from '../../../toolbar/toolbar-event.service';
-
-describe('PdfJsWrapperFactory', () => {
-  const icpEventService = jasmine.createSpyObj('IcpEventService', ['confirmExit', 'leavingSession']);
-
-  it('creates a wrapper', () => {
-    const elementRef = {
-      nativeElement: document.createElement('div')
-    }
-    elementRef.nativeElement.appendChild(document.createElement('div'));
-    const factory = new PdfJsWrapperFactory(new ToolbarEventService(icpEventService));
-    const wrapper = factory.create(elementRef);
-
-    expect(wrapper).not.toBeNull();
-    expect(wrapper.documentLoadInit).toBeInstanceOf(Subject);
-    expect(wrapper.documentLoadProgress).toBeInstanceOf(Subject);
-    expect(wrapper.documentLoaded).toBeInstanceOf(Subject);
-    expect(wrapper.outlineLoaded).toBeInstanceOf(Subject);
-    expect(wrapper.documentLoadFailed).toBeInstanceOf(Subject);
-    expect(wrapper.pageRendered).toBeInstanceOf(Subject);
-    expect(wrapper.positionUpdated).toBeInstanceOf(Subject);
-  });
-});

package/projects/media-viewer/src/lib/viewers/pdf-viewer/pdf-js/pdf-js-wrapper.provider.ts

@@ -1,57 +0,0 @@
-import 'pdfjs-dist/build/pdf.mjs';
-import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer.mjs';
-import { ElementRef, Injectable } from '@angular/core';
-import { DocumentLoadProgress, PageEvent, PdfJsWrapper } from './pdf-js-wrapper';
-import { Subject } from 'rxjs';
-import { ToolbarEventService } from '../../../toolbar/toolbar-event.service';
-import { Outline } from '../side-bar/outline-item/outline.model';
-import { PdfPosition } from '../../../store/reducers/document.reducer';
-
-@Injectable({ providedIn: 'root' })
-export class PdfJsWrapperFactory {
-
-  private linkService: pdfjsViewer.PDFLinkService;
-  private eventBus: pdfjsViewer.EventBus;
-  private pdfJsWrapper: PdfJsWrapper;
-
-  constructor(private readonly toolbarEvents: ToolbarEventService) {
-    this.linkService = new pdfjsViewer.PDFLinkService();
-    this.eventBus = new pdfjsViewer.EventBus();
-  }
-
-  public create(container: ElementRef): PdfJsWrapper {
-    const pdfFindController = new pdfjsViewer.PDFFindController({
-      linkService: this.linkService,
-      eventBus: this.eventBus
-    });
-
-    const pdfViewer = new pdfjsViewer.PDFViewer({
-      container: container.nativeElement,
-      linkService: this.linkService,
-      findController: pdfFindController,
-      eventBus: this.eventBus,
-      imageResourcesPath: '/assets/images/',
-    });
-
-    this.linkService.setViewer(pdfViewer);
-
-    this.pdfJsWrapper = new PdfJsWrapper(
-      pdfViewer,
-      new pdfjsViewer.DownloadManager(),
-      this.toolbarEvents,
-      new Subject<string>(),
-      new Subject<DocumentLoadProgress>(),
-      new Subject<any>(),
-      new Subject<Outline[]>(),
-      new Subject(),
-      new Subject<PageEvent[]>(),
-      new Subject<{ location: PdfPosition }>()
-    );
-
-    return this.pdfJsWrapper;
-  }
-
-  pdfWrapper() {
-    return this.pdfJsWrapper;
-  }
-}