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

package/projects/media-viewer/src/lib/toolbar/search-bar/search-bar.component.ts

@@ -0,0 +1,119 @@
+import { Component, ElementRef, HostListener, OnInit, ViewChild, OnDestroy, AfterViewInit } from '@angular/core';
+import { ToolbarButtonVisibilityService } from '../toolbar-button-visibility.service';
+import { SearchResultsCount, ToolbarEventService } from '../toolbar-event.service';
+import { Subscription } from 'rxjs';
+
+@Component({
+    selector: 'mv-search-bar',
+    templateUrl: './search-bar.component.html',
+    standalone: false
+})
+export class SearchBarComponent implements OnInit, OnDestroy, AfterViewInit {
+
+  @ViewChild('findInput', { static: true }) findInput: ElementRef<HTMLInputElement>;
+  @ViewChild('findNext', { static: false }) findNext: ElementRef<HTMLAnchorElement>;
+
+  highlightAll = true;
+  matchCase = false;
+  wholeWord = false;
+  resultsText = '';
+  searchText = '';
+  resultCount = 0;
+
+  private subscriptions: Subscription[] = [];
+
+  public advancedSearchVisible = false;
+
+  constructor(
+    public readonly toolbarButtons: ToolbarButtonVisibilityService,
+    public readonly toolbarEvents: ToolbarEventService
+  ) { }
+
+  public ngOnInit(): void {
+    this.subscriptions.push(
+      this.toolbarEvents.searchResultsCountSubject.subscribe(results => this.setSearchResultsCount(results))
+    );
+  }
+
+  ngAfterViewInit(): void {
+    this.findInput.nativeElement.focus();
+  }
+
+  ngOnDestroy(): void {
+    for (const subscription of this.subscriptions) {
+      subscription.unsubscribe();
+    }
+  }
+
+  @HostListener('window:keydown', ['$event'])
+  public onWindowKeyDown(e: KeyboardEvent): void {
+    if (e.code === 'F3' || (e.ctrlKey && e.code === 'KeyF')) {
+      e.preventDefault();
+
+      this.toolbarEvents.searchBarHidden.next(false);
+      setTimeout(() => this.findInput.nativeElement.focus(), 200);
+    }
+  }
+
+  public searchNext(): void {
+    this.toolbarEvents.search({
+      searchTerm: this.searchText,
+      highlightAll: this.highlightAll,
+      matchCase: this.matchCase,
+      wholeWord: this.wholeWord,
+      previous: false,
+      reset: false
+    });
+  }
+
+  public searchPrev(): void {
+    this.toolbarEvents.search({
+      searchTerm: this.searchText,
+      highlightAll: this.highlightAll,
+      matchCase: this.matchCase,
+      wholeWord: this.wholeWord,
+      previous: true,
+      reset: false
+    });
+  }
+
+  public search(): void {
+    this.toolbarEvents.search({
+      searchTerm: this.searchText,
+      highlightAll: this.highlightAll,
+      matchCase: this.matchCase,
+      wholeWord: this.wholeWord,
+      previous: false,
+      reset: true
+    });
+  }
+
+  private setSearchResultsCount(results: SearchResultsCount): void {
+    this.resultCount = results.total;
+    this.resultsText = this.resultCount > 0
+      ? `Found ${results.current} of ${results.total}`
+      : 'No results found';
+    if (this.resultCount && this.resultCount > 0 && !results.isPrevious) {
+      setTimeout(() => {
+        this.findNext.nativeElement.focus();
+      }, 1000);
+    }
+  }
+
+  public onEscapeKeyPress(e: KeyboardEvent): void {
+    this.toolbarEvents.searchBarHidden.next(true);
+  }
+
+  public onEnterKeyPress(e: KeyboardEvent): void {
+    this.search();
+  }
+
+
+  public toggleAdvancedSearch(): void {
+    this.advancedSearchVisible = !this.advancedSearchVisible;
+  }
+
+  public toggleSearchBar() {
+    this.toolbarEvents.searchBarHidden.next(!this.toolbarEvents.searchBarHidden.getValue());
+  }
+}

package/projects/media-viewer/src/lib/toolbar/toolbar-button-visibility.service.spec.ts

@@ -0,0 +1,39 @@
+import { ToolbarButtonVisibilityService } from './toolbar-button-visibility.service';
+
+describe('Toolbar Button Visibility Service', () => {
+  let service: ToolbarButtonVisibilityService;
+  beforeEach(() => {
+    service = new ToolbarButtonVisibilityService();
+  });
+
+  it('setup with values', () => {
+    const newValues = {
+      showPrint: true,
+      showDownload: true
+    };
+
+    service.setup(newValues);
+
+    expect(service.showPrint).toBeTruthy();
+    expect(service.showDownload).toBeTruthy();
+  });
+
+  it('unset other options', () => {
+    const oldValues = {
+      showPrint: true,
+      showDownload: true
+    };
+
+    service.setup(oldValues);
+
+    const newValues = {
+      showBookmark: true
+    };
+
+    service.setup(newValues);
+
+    expect(service.showPrint).toBeFalsy();
+    expect(service.showDownload).toBeFalsy();
+  });
+
+});

package/projects/media-viewer/src/lib/toolbar/toolbar-button-visibility.service.ts

@@ -0,0 +1,94 @@
+import { BehaviorSubject } from 'rxjs';
+import { Injectable } from '@angular/core';
+
+@Injectable({providedIn: 'root'})
+export class ToolbarButtonVisibilityService {
+
+  public showPrint = false;
+  public showDownload = false;
+  public showNavigation = false;
+  public showZoom = false;
+  public showRotate = false;
+  public showPresentationMode = false;
+  public showRedact = false;
+  public showOpenFile = false;
+  public showBookmark = false;
+  public showHighlightButton = false;
+  public showDrawButton = false;
+  public showSearchBar = false;
+  public showSidebar = false;
+  public showCommentSummary = false;
+  public showGrabNDragButton = false;
+  public showSaveRotationButton = false;
+
+  /**
+   * Reset the visibility of all buttons to false then set the value from the options
+   */
+  public setup(options: Partial<ToolbarButtonVisibilityService>): void {
+    this.showPrint = false;
+    this.showDownload = false;
+    this.showNavigation = false;
+    this.showZoom = false;
+    this.showRotate = false;
+    this.showPresentationMode = false;
+    this.showRedact = false;
+    this.showOpenFile = false;
+    this.showBookmark = false;
+    this.showHighlightButton = false;
+    this.showDrawButton = false;
+    this.showSearchBar = false;
+    this.showSidebar = false;
+    this.showCommentSummary = false;
+    this.showGrabNDragButton = false;
+    this.showSaveRotationButton = false;
+
+    for (const key in options) {
+      this[key] = options[key];
+    }
+  }
+}
+
+/**
+ * Default toolbar state for the PDF viewer
+ */
+export const defaultPdfOptions = {
+  showPrint: true,
+  showDownload: true,
+  showNavigation: true,
+  showZoom: true,
+  showRotate: true,
+  showSearchBar: true,
+  showSidebar: true,
+  showGrabNDragButton: true,
+  showCommentSummary: true,
+  showPresentationMode: true,
+  showRedact: true
+};
+
+/**
+ * Default toolbar state for the image viewer
+ */
+export const defaultImageOptions = {
+  showPrint: true,
+  showDownload: true,
+  showZoom: true,
+  showRotate: true,
+  showGrabNDragButton: true,
+  showCommentSummary: true,
+  showRedact: true
+};
+
+/**
+ * Default toolbar state for multimedia
+ */
+export const defaultMultimediaOptions = {
+  showDownload: true
+};
+
+/**
+ * Default toolbar state for unsupported media
+ */
+export const defaultUnsupportedOptions = {
+  showDownload: true,
+  showPrint: true
+};

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

@@ -0,0 +1,203 @@
+import { ToolbarEventService } from './toolbar-event.service';
+import { IcpEventService } from './icp-event.service';
+
+
+  describe('Toolbar Event Service', () => {
+    let service: ToolbarEventService;
+    let icpEventService: IcpEventService;
+
+    beforeEach(() => {
+      icpEventService = new IcpEventService();
+      service = new ToolbarEventService(icpEventService);
+      service.drawModeSubject.next(false);
+      service.highlightModeSubject.next(false);
+    });
+
+    afterEach(() => {
+      service = null;
+    });
+
+    it('should create', () => {
+      expect(service).toBeTruthy();
+    });
+
+    it('should turn off drawMode if HighlightMode is toggled on', () => {
+      service.highlightModeSubject.next(false);
+      service.drawModeSubject.next(true);
+      service.toggleHighlightMode();
+      expect(service.drawModeSubject.getValue()).toBeFalsy();
+    });
+
+    it('should turn off drawMode if drawMode is toggled off', () => {
+      service.drawModeSubject.next(true);
+      service.toggleDrawMode();
+      expect(service.drawModeSubject.getValue()).toBeFalsy();
+    });
+
+    it('should turn off HighlightMode if HighlightMode is toggled off', () => {
+      service.highlightModeSubject.next(true);
+      service.toggleHighlightMode();
+      expect(service.highlightModeSubject.getValue()).toBeFalsy();
+    });
+
+    it('should turn off highlightMode if drawMode is toggled on', () => {
+      service.highlightModeSubject.next(true);
+      service.drawModeSubject.next(false);
+      service.toggleDrawMode();
+      expect(service.highlightModeSubject.getValue()).toBeFalsy();
+      expect(service.grabNDrag.getValue()).toBeFalsy();
+    });
+
+    it('should set toggleCommentsSummary to true if comment summary is toggled off', () => {
+      service.showCommentSummary.next(false);
+      service.toggleCommentsSummary(true);
+      expect(service.showCommentSummary.getValue()).toBeTruthy();
+    });
+
+    it('should set toggleCommentsSummary to false if comment summary is toggled on', () => {
+      service.showCommentSummary.next(true);
+      service.toggleCommentsSummary(false);
+      expect(service.showCommentSummary.getValue()).toBeFalsy();
+    });
+
+    it('should reset', () => {
+      service.zoomValueSubject.next(2);
+      service.drawModeSubject.next(true);
+      service.reset();
+      expect(service.zoomValueSubject.getValue()).toBe(1);
+      expect(service.drawModeSubject.getValue()).toBeFalsy();
+      expect(service.grabNDrag.getValue()).toBeFalsy();
+    });
+
+    it('should toggle comments panel', () => {
+      const commentsToggleSpy = spyOn(service.commentsPanelVisible, 'next');
+      service.toggleCommentsPanel(false);
+      expect(commentsToggleSpy).toHaveBeenCalledWith(false);
+    });
+
+    it('should hide comments panel when participants list shows', () => {
+      const commentsToggleSpy = spyOn(service.commentsPanelVisible, 'next');
+      service.toggleParticipantsList(true);
+      expect(commentsToggleSpy).toHaveBeenCalledWith(false);
+    });
+
+    it('should hide participants list when comments panel shows', () => {
+      const commentsToggleSpy = spyOn(icpEventService.participantsListVisible, 'next');
+      service.toggleCommentsPanel(true);
+      expect(commentsToggleSpy).toHaveBeenCalledWith(false);
+    });
+
+    it('should toggle redaction mode off', () => {
+      service.redactionMode.next(false);
+      service.toggleRedactionMode();
+      expect(service.drawModeSubject.getValue()).toBeFalsy();
+      expect(service.grabNDrag.getValue()).toBeFalsy();
+      expect(service.redactionMode.getValue()).toBeTruthy();
+    });
+
+    it('should toggle redaction mode on', () => {
+      service.redactionMode.next(true);
+      service.toggleRedactionMode();
+      expect(service.redactionMode.getValue()).toBeFalsy();
+    });
+
+    it('should toggle grab and drag mode', () => {
+      service.grabNDrag.next(false);
+      service.toggleGrabNDrag();
+      expect(service.grabNDrag.getValue()).toBeTruthy();
+      service.toggleGrabNDrag();
+      expect(service.grabNDrag.getValue()).toBeFalsy();
+    });
+
+    it('should toggle sidebar', () => {
+      service.sidebarOpen.next(false);
+      service.toggleSideBar(true);
+      expect(service.sidebarOpen.getValue()).toBeTruthy();
+      service.toggleSideBar(false);
+      expect(service.sidebarOpen.getValue()).toBeFalsy();
+    });
+
+    it('should toggle sidebar view', () => {
+      service.sidebarOutlineView.next(true);
+      service.toggleSideBarView(false);
+      expect(service.sidebarOutlineView.getValue()).toBeFalsy();
+      service.toggleSideBarView(true);
+      expect(service.sidebarOutlineView.getValue()).toBeTruthy();
+    });
+
+    it('should toggle highlight toolbar', () => {
+      service.highlightToolbarSubject.next(false);
+      service.toggleHighlightToolbar();
+      expect(service.highlightToolbarSubject.getValue()).toBeTruthy();
+      service.toggleHighlightToolbar();
+      expect(service.highlightToolbarSubject.getValue()).toBeFalsy();
+    });
+
+    it('should rotate', () => {
+      const rotateSpy = spyOn(service.rotateSubject, 'next');
+      service.rotate(90);
+      expect(rotateSpy).toHaveBeenCalledWith(90);
+    });
+
+    it('should search', () => {
+      const searchSpy = spyOn(service.searchSubject, 'next');
+      const searchOperation = {
+        searchTerm: 'test',
+        highlightAll: true,
+        matchCase: false,
+        wholeWord: false,
+        previous: false,
+        reset: false,
+      };
+      service.search(searchOperation);
+      expect(searchSpy).toHaveBeenCalledWith(searchOperation);
+    });
+
+    it('should step zoom', () => {
+      const stepZoomSpy = spyOn(service.stepZoomSubject, 'next');
+      service.stepZoom(1);
+      expect(stepZoomSpy).toHaveBeenCalledWith(1);
+    });
+
+    it('should set page', () => {
+      const setPageSpy = spyOn(service.setCurrentPageSubject, 'next');
+      service.setPage(2);
+      expect(setPageSpy).toHaveBeenCalledWith(2);
+    });
+
+    it('should increment page', () => {
+      const incrementPageSpy = spyOn(service.changePageByDeltaSubject, 'next');
+      service.incrementPage(1);
+      expect(incrementPageSpy).toHaveBeenCalledWith(1);
+    });
+
+    it('should save rotation', () => {
+      const saveRotationSpy = spyOn(service.saveRotationSubject, 'next');
+      service.saveRotation();
+      expect(saveRotationSpy).toHaveBeenCalled();
+    });
+
+    it('should apply redaction to document', () => {
+      const applyRedactionSpy = spyOn(service.applyRedactToDocument, 'next');
+      service.applyRedactionToDocument();
+      expect(applyRedactionSpy).toHaveBeenCalled();
+    });
+
+    it('should redact page', () => {
+      const redactPageSpy = spyOn(service.redactWholePage, 'next');
+      service.redactPage();
+      expect(redactPageSpy).toHaveBeenCalled();
+    });
+
+    it('should unmark all redactions', () => {
+      const unmarkAllSpy = spyOn(service.clearAllRedactMarkers, 'next');
+      service.unmarkAll();
+      expect(unmarkAllSpy).toHaveBeenCalled();
+    });
+
+    it('should toggle redaction preview', () => {
+      const redactionPreviewSpy = spyOn(service.redactionPreview, 'next');
+      service.toggleRedactionPreview(true);
+      expect(redactionPreviewSpy).toHaveBeenCalledWith(true);
+    });
+  });

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

@@ -0,0 +1,227 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
+// import * as icpEvents from './icp-event.service';
+// import { participantsListVisible } from './icp-event.service';
+import { RedactionSearch } from './redaction-search-bar/redaction-search.model';
+import { IcpEventService } from './icp-event.service';
+
+// Toolbar Custom-Event Types
+export type HighlightMode = boolean;
+export type DrawMode = boolean;
+export interface SearchOperation {
+  searchTerm: string;
+  highlightAll: boolean;
+  matchCase: boolean;
+  wholeWord: boolean;
+  previous: boolean;
+  reset: boolean;
+}
+export interface SearchResultsCount {
+  current: number;
+  total: number;
+  isPrevious: boolean;
+}
+
+export enum SearchType {
+  Redact = 'Redact',
+  Highlight = 'Highlight',
+}
+
+export interface SearchMode {
+  modeType: SearchType;
+  isOpen: boolean;
+}
+
+@Injectable({ providedIn: 'root' })
+export class ToolbarEventService {
+
+  constructor(private icpEventService: IcpEventService) {}
+
+  public readonly highlightModeSubject = new BehaviorSubject<HighlightMode>(false);
+  public readonly highlightToolbarSubject = new BehaviorSubject<HighlightMode>(false);
+  public readonly drawModeSubject = new BehaviorSubject<DrawMode>(false);
+  public readonly rotateSubject = new Subject<number>();
+  public readonly searchSubject = new Subject<SearchOperation>();
+  public readonly searchResultsCountSubject = new Subject<SearchResultsCount>();
+  public readonly zoomSubject = new Subject<number>();
+  public readonly stepZoomSubject = new Subject<number>();
+  public readonly zoomValueSubject = new BehaviorSubject<number>(1);
+  public readonly pageCountSubject = new Subject<number>();
+  public readonly printSubject = new Subject<void>();
+  public readonly downloadSubject = new Subject<void>();
+  public readonly setCurrentPageSubject = new Subject<number>();
+  public readonly setCurrentPageInputValueSubject = new Subject<number>();
+  public readonly changePageByDeltaSubject = new Subject<number>();
+  public readonly showCommentSummary = new BehaviorSubject<boolean>(false);
+  public readonly grabNDrag = new BehaviorSubject<boolean>(false);
+  public readonly saveRotationSubject = new Subject<void>();
+
+  public readonly redactionMode = new BehaviorSubject(false);
+  public readonly redactionPreview = new Subject<boolean>();
+  public readonly applyRedactToDocument = new Subject<void>();
+
+  public readonly clearAllRedactMarkers = new Subject<void>();
+  public readonly redactWholePage = new Subject<void>();
+  public readonly redactionSerachSubject = new Subject<RedactionSearch>();
+  public readonly redactAllInProgressSubject = new BehaviorSubject(false);
+  public readonly openRedactionSearch = new BehaviorSubject<SearchMode | null>(null);
+
+  public readonly sidebarOpen = new BehaviorSubject(false);
+  public readonly sidebarOutlineView = new BehaviorSubject(true);
+
+  public readonly searchBarHidden = new BehaviorSubject(true);
+  public readonly commentsPanelVisible = new BehaviorSubject(false);
+
+  /**
+   * Reset the stateful behaviour subjects
+   */
+  public reset(): void {
+    this.setCurrentPageSubject.next(1);
+    this.zoomValueSubject.next(1);
+    this.highlightModeSubject.next(false);
+    this.highlightToolbarSubject.next(false);
+    this.drawModeSubject.next(false);
+    this.showCommentSummary.next(false);
+    this.grabNDrag.next(false);
+  }
+
+  // Function to inform Observers that highlightMode has been enabled
+  public toggleHighlightMode(): void {
+    // Highlight and Draw states are mutually exclusive
+    if (this.highlightModeSubject.getValue() === false) {
+      this.drawModeSubject.next(false);
+      this.grabNDrag.next(false);
+      this.highlightModeSubject.next(true);
+    } else {
+      this.highlightModeSubject.next(false);
+    }
+  }
+
+  // Function to inform Observers that ToggleMode has been enabled
+  public toggleDrawMode(): void {
+    if (this.drawModeSubject.getValue() === false) {
+      this.highlightModeSubject.next(false);
+      this.grabNDrag.next(false);
+      this.drawModeSubject.next(true);
+    } else {
+      this.drawModeSubject.next(false);
+    }
+  }
+
+  public toggleHighlightToolbar(): void {
+    this.highlightToolbarSubject.next(!this.highlightToolbarSubject.getValue());
+  }
+
+  public rotate(angle: number): void {
+    this.rotateSubject.next(angle);
+  }
+
+  public search(phrase: SearchOperation): void {
+    this.searchSubject.next(phrase);
+  }
+
+  public getSearchResultsCount(): Observable<SearchResultsCount> {
+    return this.searchResultsCountSubject.asObservable();
+  }
+
+  public zoom(value: number): void {
+    this.zoomSubject.next(value);
+  }
+
+  public stepZoom(value: number): void {
+    this.stepZoomSubject.next(value);
+  }
+
+  public getZoomValue(): Observable<number> {
+    return this.zoomValueSubject.asObservable();
+  }
+
+  public getPageCount(): Observable<number> {
+    return this.pageCountSubject.asObservable();
+  }
+
+  public print(): void {
+    this.printSubject.next();
+  }
+
+  public download(): void {
+    this.downloadSubject.next();
+  }
+
+  public setPage(value: number): void {
+    this.setCurrentPageSubject.next(value);
+  }
+
+  public incrementPage(value: number): void {
+    this.changePageByDeltaSubject.next(value);
+  }
+
+  public getCurrentPageNumber(): Observable<number> {
+    return this.setCurrentPageInputValueSubject.asObservable();
+  }
+
+  public getShowCommentSummary(): Observable<boolean> {
+    return this.showCommentSummary.asObservable();
+  }
+
+  public toggleCommentsSummary(value: boolean): void {
+    this.showCommentSummary.next(value);
+  }
+
+  public saveRotation(): void {
+    this.saveRotationSubject.next();
+  }
+
+  public toggleGrabNDrag(): void {
+    this.grabNDrag.next(!this.grabNDrag.getValue());
+  }
+
+  toggleSideBar(toggle: boolean) {
+    this.sidebarOpen.next(toggle);
+  }
+
+  toggleSideBarView(toggle: boolean) {
+    this.sidebarOutlineView.next(toggle);
+  }
+
+  public toggleRedactionMode(): void {
+    if (this.redactionMode.getValue() === false) {
+      this.drawModeSubject.next(false);
+      this.grabNDrag.next(false);
+      this.redactionMode.next(true);
+    } else {
+      this.redactionMode.next(false);
+    }
+    this.openRedactionSearch.next({ modeType: SearchType.Redact, isOpen: false });
+  }
+
+  public toggleRedactionPreview(viewMode: boolean): void {
+    this.redactionPreview.next(viewMode);
+  }
+
+  public unmarkAll(): void {
+    this.clearAllRedactMarkers.next();
+  }
+
+  public applyRedactionToDocument(): void {
+    this.applyRedactToDocument.next();
+  }
+
+  public redactPage(): void {
+    this.redactWholePage.next();
+  }
+
+  public toggleCommentsPanel(isVisible: boolean) {
+    if (isVisible) {
+      this.toggleParticipantsList(!isVisible);
+    }
+    this.commentsPanelVisible.next(isVisible);
+  }
+
+  public toggleParticipantsList(isVisible: boolean) {
+    if (isVisible) {
+      this.toggleCommentsPanel(!isVisible);
+    }
+    this.icpEventService.participantsListVisible.next(isVisible);
+  }
+}