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

package/projects/media-viewer/src/lib/media-viewer.module.ts

@@ -0,0 +1,91 @@
+import { RpxTranslationModule } from 'rpx-xui-translation';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+import { PdfViewerComponent } from './viewers/pdf-viewer/pdf-viewer.component';
+import { ImageViewerComponent } from './viewers/image-viewer/image-viewer.component';
+import { UnsupportedViewerComponent } from './viewers/unsupported-viewer/unsupported-viewer.component';
+import { MediaViewerComponent } from './media-viewer.component';
+import { ToolbarModule } from './toolbar/toolbar.module';
+import { PdfJsWrapperFactory } from './viewers/pdf-viewer/pdf-js/pdf-js-wrapper.provider';
+import { AnnotationsModule } from './annotations/annotations.module';
+import { CommentService } from './annotations/comment-set/comment/comment.service';
+import { GrabNDragDirective } from './viewers/grab-n-drag.directive';
+import { SideBarComponent } from './viewers/pdf-viewer/side-bar/side-bar.component';
+import { OutlineItemComponent } from './viewers/pdf-viewer/side-bar/outline-item/outline-item.component';
+import { TagInputModule } from 'ngx-chips';
+import { RouterModule } from '@angular/router';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreModule } from '@ngrx/store';
+import { RedactionComponent } from './redaction/components/redaction.component';
+import { IcpSessionApiService } from './icp/icp-session-api.service';
+import { IcpUpdateService } from './icp/icp-update.service';
+import { IcpService } from './icp/icp.service';
+import { SocketService } from './icp/socket.service';
+import { reducers } from './store/reducers/reducers';
+import { effects } from './store/effects/index';
+import { BookmarksComponent } from './viewers/pdf-viewer/side-bar/bookmarks/bookmarks.component';
+import { RedactionApiService } from './redaction/services/redaction-api.service';
+import { MutableDivModule } from 'mutable-div';
+import { ConvertibleContentViewerComponent } from './viewers/convertible-content-viewer/convertible-content-viewer.component';
+import { DocumentConversionApiService } from './viewers/convertible-content-viewer/document-conversion-api.service';
+import { IcpPresenterService } from './icp/icp-presenter.service';
+import { IcpFollowerService } from './icp/icp-follower.service';
+import { ConfirmActionDialogComponent } from './icp/confirm-exit/confirm-action-dialog.component';
+import { BookmarkIconsComponent } from './bookmark/components/bookmark-icons.component';
+import { RotationApiService } from './viewers/rotation-persist/rotation-api.service';
+import { RotationPersistDirective } from './viewers/rotation-persist/rotation-persist.directive';
+import { ParticipantsListComponent } from './icp/participants-list/participants-list.component';
+import { HighlightCreateDirective } from './annotations/annotation-set/annotation-create/highlight-create/highlight-create.directive';
+import { MultimediaPlayerComponent } from './viewers/multimedia-player/multimedia-player.component';
+import { CdkTreeModule } from '@angular/cdk/tree';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    HttpClientModule,
+    ToolbarModule,
+    AnnotationsModule,
+    TagInputModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RouterModule,
+    StoreModule.forFeature('media-viewer', reducers),
+    EffectsModule.forFeature(effects),
+    MutableDivModule,
+    CdkTreeModule,
+    DragDropModule,
+    RpxTranslationModule.forChild()
+  ],
+  declarations: [
+    PdfViewerComponent,
+    SideBarComponent,
+    BookmarksComponent,
+    OutlineItemComponent,
+    ImageViewerComponent,
+    UnsupportedViewerComponent,
+    MultimediaPlayerComponent,
+    MediaViewerComponent,
+    ConvertibleContentViewerComponent,
+    GrabNDragDirective,
+    RotationPersistDirective,
+    HighlightCreateDirective,
+    ConfirmActionDialogComponent,
+    RedactionComponent,
+    BookmarkIconsComponent,
+    ParticipantsListComponent
+  ],
+  providers: [
+    PdfJsWrapperFactory,
+    CommentService,
+    RedactionApiService,
+    DocumentConversionApiService,
+    RotationApiService,
+  ],
+  exports: [
+    MediaViewerComponent
+  ]
+})
+export class MediaViewerModule { }

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

@@ -0,0 +1,59 @@
+import { fakeAsync, inject, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { PrintService } from './print.service';
+
+describe('PrintService', () => {
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [PrintService]
+    });
+  });
+
+  it('should be created', inject([PrintService], (service: PrintService) => {
+    expect(service).toBeTruthy();
+  }));
+
+  it('should trigger native document print', fakeAsync(inject([PrintService], (service: PrintService) => {
+    const windowMock = { print: () => { }, focus, close, onafterprint } as Window;
+    const windowSpy = spyOn(window, 'open').and.returnValue(windowMock);
+    const focusSpy = spyOn(windowMock, 'focus');
+    const printSpy = spyOn(windowMock, 'print');
+    const closeSpy = spyOn(windowMock, 'close');
+    const onafterprintSpy = spyOn(windowMock, 'onafterprint');
+    service.printDocumentNatively('url');
+    tick(3000);
+
+    expect(windowSpy).toHaveBeenCalledWith('url');
+    expect(focusSpy).toHaveBeenCalled();
+    expect(printSpy).toHaveBeenCalled();
+  })));
+
+  it('should print an element in a new window', inject([PrintService], (service: PrintService) => {
+    const windowMock = {
+      print: () => { },
+      focus: () => { },
+      close: () => { },
+      document: {
+        close: () => { },
+        write: () => { },
+        body: {
+          appendChild: () => { }
+        }
+      }
+    } as unknown as Window;
+
+    const windowSpy = spyOn(window, 'open').and.returnValue(windowMock);
+    const printSpy = spyOn(windowMock, 'print');
+    const writeSpy = spyOn(windowMock.document.body, 'appendChild');
+    const element = document.createElement('p');
+    element.innerText = 'Hello';
+
+    service.printElementNatively(element, 100, 100);
+
+    expect(windowSpy).toHaveBeenCalledWith('', '', `left=0,top=0,width=100,height=100,toolbar=0,scrollbars=0,status=0`);
+    expect(printSpy).toHaveBeenCalled();
+    expect(writeSpy).toHaveBeenCalledWith(element);
+  }));
+
+});
+

package/projects/media-viewer/src/lib/print.service.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PrintService {
+
+  printDocumentNatively(url: string): void {
+
+    const printWindow = window.open(url);
+    printWindow.focus();
+
+    setTimeout((printer) => {
+      printer.print();
+    }, 3000, printWindow);
+  }
+
+  printElementNatively(element: HTMLElement, width: number, height: number): void {
+    const printWindow = window.open('', '', `left=0,top=0,width=${width},height=${height},toolbar=0,scrollbars=0,status=0`);
+    const documentHead = document.head;
+    printWindow.document.body.appendChild(documentHead.cloneNode(true));
+    printWindow.document.body.appendChild(element.cloneNode(true));
+    printWindow.document.close();
+    printWindow.focus();
+    printWindow.print();
+    setTimeout((printer) => {
+      printer.close();
+    }, 1000, printWindow);
+  }
+}

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

@@ -0,0 +1,34 @@
+<div class="pageContainer">
+  <div *ngFor="let redaction of (redactionsPerPage$ | async);  index as i"
+       class="pageContainer__page"
+       [ngStyle]="{
+       'width.px': redaction.styles.width,
+       'height.px': redaction.styles.height
+       }"
+      [attr.redaction-page-num]="i+1"
+       [ngClass]="{ 'pageContainer__page--draw' : drawMode }">
+    <mv-box-highlight-create
+      [page]="i + 1"
+      [pageHeight]="redaction.styles.height"
+      [pageWidth]="redaction.styles.width"
+      [rotate]="rotate"
+      [zoom]="zoom"
+      (saveSelection)="markBoxRedaction($event)">
+    </mv-box-highlight-create>
+    <div class="pageContainer__page-item">
+      <ng-container *ngFor="let anno of redaction.anno">
+        <!--  TODO rename this to selection -->
+        <mv-annotation [annotation]="anno"
+                       [zoom]="zoom"
+                       [rotate]="rotate"
+                       [selectedAnnoId]="selectedRedaction$ | async"
+                       [pageHeight]="redaction.styles.height"
+                       [pageWidth]="redaction.styles.width"
+                       (update)="onMarkerUpdate($event)"
+                       (delete)="onMarkerDelete($event)"
+                       (annotationClick)="selectRedaction($event)">
+        </mv-annotation>
+      </ng-container>
+    </div>
+  </div>
+</div>

package/projects/media-viewer/src/lib/redaction/components/redaction.component.spec.ts

@@ -0,0 +1,129 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
+import { RedactionComponent } from './redaction.component';
+import { Store, StoreModule } from '@ngrx/store';
+import { Subscription } from 'rxjs';
+
+import * as fromActions from '../../store/actions/redaction.actions';
+import { ViewerEventService } from '../../viewers/viewer-event.service';
+import { ToolbarEventService } from '../../toolbar/toolbar-event.service';
+import { reducers } from '../../store/reducers/reducers';
+import any = jasmine.any;
+
+describe('RedactionComponent', () => {
+  let component: RedactionComponent;
+  let fixture: ComponentFixture<RedactionComponent>;
+  const highlightService = { getRectangles: () => {} };
+  const viewerEvents = { textHighlight: { subscribe: () => new Subscription() } };
+  const toolbarEvents = {
+    drawModeSubject: { subscribe: () => new Subscription(), next: () => {}, },
+    highlightModeSubject: { subscribe: () => new Subscription(), next: () => {}, },
+    applyRedactToDocument: { subscribe: () => new Subscription(), next: () => {}, },
+    clearAllRedactMarkers: { subscribe: () => new Subscription(), next: () => {}, },
+  };
+
+  beforeEach(() => {
+    return TestBed.configureTestingModule({
+      declarations: [RedactionComponent],
+      providers: [
+        { provide: ViewerEventService, useValue: viewerEvents },
+        { provide: ToolbarEventService, useValue: toolbarEvents }
+      ],
+      imports: [
+        StoreModule.forFeature('media-viewer', reducers),
+        StoreModule.forRoot({})
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RedactionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should mark Text for Redaction',
+    inject([Store], (store) => {
+      spyOn(toolbarEvents.highlightModeSubject, 'next');
+      spyOn(store, 'dispatch');
+      component.documentId = 'documentId';
+      const redactionId = any(String) as any;
+
+      component.markTextRedaction({ page: 1, rectangles: ['highlight'] });
+
+      expect(store.dispatch).toHaveBeenCalledWith(new fromActions.SaveRedaction({
+        page: 1, rectangles: ['highlight' as any], documentId: 'documentId', redactionId
+      }));
+    })
+  );
+
+  it('should dispatch DeleteRedaction', inject([Store], (store) => {
+    spyOn(store, 'dispatch');
+
+    component.onMarkerDelete({});
+
+    expect(store.dispatch).toHaveBeenCalledWith(new fromActions.DeleteRedaction({} as any));
+  }));
+
+  it('should select redaction', inject([Store], (store) => {
+    spyOn(store, 'dispatch');
+
+    component.selectRedaction({});
+
+    expect(store.dispatch).toHaveBeenCalledWith(new fromActions.SelectRedaction({} as any));
+  }));
+
+  it('should save redaction',
+    inject([Store, ToolbarEventService], (store, toolbarEventService) => {
+      spyOn(store, 'dispatch');
+      spyOn(toolbarEventService.drawModeSubject, 'next');
+      component.documentId = 'documentId';
+      const redactionId = any(String) as any;
+      const rectangles = ['rectangle' as any];
+
+      component.markBoxRedaction({ rectangles, page: 1 });
+
+      expect(store.dispatch).toHaveBeenCalledWith(new fromActions.SaveRedaction({
+        page: 1, rectangles, redactionId, documentId: 'documentId'
+      }));
+      expect(toolbarEventService.drawModeSubject.next).toHaveBeenCalledWith(false);
+    })
+  );
+
+  it('should update marker', inject([Store], (store) => {
+    spyOn(store, 'dispatch');
+
+    component.onMarkerUpdate({});
+
+    expect(store.dispatch).toHaveBeenCalledWith(new fromActions.SaveRedaction({}));
+  }));
+
+  it('should download redacted document', inject([Store], (store) => {
+    const anchor = {
+      setAttribute: () => {}, click: () => {}, remove: () => {}, href: undefined, download: undefined
+    } as any;
+    spyOn(anchor, 'click');
+    spyOn(anchor, 'remove');
+    spyOn(store, 'dispatch');
+    spyOn(URL, 'createObjectURL').and.returnValue('url');
+    spyOn(URL, 'revokeObjectURL');
+    spyOn(document.body, 'appendChild');
+    spyOn(document, 'createElement').and.returnValue(anchor);
+
+    const blob: Blob = new Blob();
+
+    component.downloadDocument({ blob: blob, filename: 'filename'});
+
+    expect(URL.createObjectURL).toHaveBeenCalledWith(blob);
+    expect(URL.revokeObjectURL).toHaveBeenCalled();
+    expect(anchor.click).toHaveBeenCalled();
+    expect(anchor.remove).toHaveBeenCalled();
+    expect(store.dispatch).toHaveBeenCalledWith(new fromActions.ResetRedactedDocument());
+  }));
+});

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

@@ -0,0 +1,106 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+import { select, Store } from '@ngrx/store';
+import { v4 as uuid } from 'uuid';
+import { filter, take } from 'rxjs/operators';
+
+import { Rectangle } from '../../annotations/annotation-set/annotation-view/rectangle/rectangle.model';
+import * as fromStore from '../../store/reducers/reducers';
+import * as fromSelectors from '../../store/selectors/redaction.selectors';
+import * as fromRedaSelectors from '../../store/selectors/redaction.selectors';
+import * as fromDocument from '../../store/selectors/document.selectors';
+import * as fromActions from '../../store/actions/redaction.actions';
+import * as fromRedactionActions from '../../store/actions/redaction.actions';
+import * as fromRedaActions from '../../store/actions/redaction.actions';
+import { SelectionAnnotation } from '../../annotations/models/event-select.model';
+import { ViewerEventService } from '../../viewers/viewer-event.service';
+import { Redaction } from '../services/redaction.model';
+import { ToolbarEventService } from '../../toolbar/toolbar-event.service';
+
+@Component({
+    selector: 'mv-redactions',
+    templateUrl: './redaction.component.html',
+    standalone: false
+})
+export class RedactionComponent implements OnInit, OnDestroy {
+
+  @Input() zoom: number;
+  @Input() rotate: number;
+
+  redactionsPerPage$: Observable<any>; // todo add type
+  selectedRedaction$: Observable<SelectionAnnotation | {}>;
+  rectangles: Rectangle[];
+  drawMode: boolean;
+  documentId: string;
+
+  private $subscription: Subscription;
+
+  constructor(private store: Store<fromStore.State>,
+    private readonly viewerEvents: ViewerEventService,
+    private toolbarEvents: ToolbarEventService) { }
+
+  ngOnInit(): void {
+    this.redactionsPerPage$ = this.store.pipe(select(fromSelectors.getRedactionsPerPage));
+    this.selectedRedaction$ = this.store.pipe(select(fromSelectors.getSelected));
+    this.$subscription = this.toolbarEvents.drawModeSubject.subscribe(drawMode => this.drawMode = drawMode);
+    this.$subscription.add(this.store.pipe(select(fromSelectors.getRedactedDocumentInfo), filter(value => !!value))
+      .subscribe(redactedDocInfo => this.downloadDocument(redactedDocInfo)));
+    this.$subscription.add(this.store.pipe(select(fromDocument.getDocumentId)).subscribe(docId => this.documentId = docId));
+    this.$subscription.add(this.viewerEvents.textHighlight.subscribe(highlight => this.markTextRedaction(highlight)));
+    this.toolbarEvents.applyRedactToDocument.subscribe(() => {
+      this.store.pipe(select(fromRedaSelectors.getRedactionArray), take(1)).subscribe(redactions => {
+        this.store.dispatch(new fromRedaActions.Redact(redactions));
+      });
+    });
+    this.toolbarEvents.clearAllRedactMarkers.subscribe(() => {
+      this.store.dispatch(new fromRedaActions.UnmarkAll(this.documentId));
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.$subscription.unsubscribe();
+  }
+
+  markTextRedaction(highlight) {
+    const redactionHighlight = highlight.rectangles;
+    if (redactionHighlight && redactionHighlight.length) {
+      this.saveRedaction(highlight.page, [...redactionHighlight]);
+    }
+    this.toolbarEvents.highlightModeSubject.next(false);
+  }
+
+  markBoxRedaction({ rectangles, page }) {
+    this.saveRedaction(page, rectangles);
+    this.toolbarEvents.drawModeSubject.next(false);
+  }
+
+  saveRedaction(page: number, rectangles: Rectangle[]) {
+    const redaction = { page, rectangles, redactionId: uuid(), documentId: this.documentId };
+    this.store.dispatch(new fromRedactionActions.SaveRedaction(redaction));
+  }
+
+  onMarkerDelete(event) {
+    this.store.dispatch(new fromActions.DeleteRedaction(event));
+  }
+
+  selectRedaction(event) {
+    this.store.dispatch(new fromActions.SelectRedaction(event));
+  }
+
+  onMarkerUpdate(redaction: Redaction) {
+    this.store.dispatch(new fromActions.SaveRedaction(redaction));
+  }
+
+  downloadDocument({ blob, filename }) {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    document.body.appendChild(a);
+    a.setAttribute('style', 'display: none');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+    this.store.dispatch(new fromRedactionActions.ResetRedactedDocument());
+  }
+}

package/projects/media-viewer/src/lib/redaction/services/redaction-api.service.spec.ts

@@ -0,0 +1,91 @@
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { fakeAsync, TestBed } from '@angular/core/testing';
+import { RedactionApiService } from './redaction-api.service';
+import { BulkRedaction } from './redaction.model';
+
+describe('RedactionApiService', () => {
+  let httpMock: HttpTestingController;
+  let api: RedactionApiService;
+  const redaction = { redactionId: 'redaction-id', documentId: 'document-id', page: 1, rectangles: [] };
+  const bulkRedaction: BulkRedaction = { searchRedactions: [redaction] };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [RedactionApiService],
+      imports: [HttpClientTestingModule]
+    });
+    api = TestBed.inject(RedactionApiService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  it('get redaction markups', fakeAsync((done) => {
+    api.getRedactions('document-id')
+      .subscribe((response) => {
+        expect(response.body[0].documentId).toBe('document-id');
+      }, error => done(error));
+
+    const req = httpMock.expectOne('/api/markups/document-id');
+    expect(req.request.method).toBe('GET');
+    req.flush([redaction]);
+  }));
+
+  it('should save redaction markup', fakeAsync((done) => {
+    api.saveRedaction(redaction).subscribe((response) => {
+      expect(response.documentId).toEqual('document-id');
+    }, error => done(error));
+
+    const req = httpMock.expectOne('/api/markups');
+    expect(req.request.method).toBe('POST');
+    expect(req.request.body.documentId).toBe('document-id');
+    expect(req.request.body.redactionId).toBe('redaction-id');
+    expect(req.request.body.page).toBe(1);
+    req.flush(redaction);
+  }));
+
+  it('should delete redaction markup', fakeAsync((done) => {
+    api.deleteRedaction(redaction).subscribe((response) => {
+      expect(response).toEqual(null);
+    }, error => done(error));
+
+    const req = httpMock.expectOne('/api/markups/document-id/redaction-id');
+    expect(req.request.method).toBe('DELETE');
+    req.flush(null);
+  }));
+
+  it('should delete all markers', fakeAsync((done) => {
+    api.deleteAllMarkers('document-id').subscribe((response) => {
+      expect(response).toEqual(null);
+    }, error => done(error));
+
+    const req = httpMock.expectOne('/api/markups/document-id');
+    expect(req.request.method).toBe('DELETE');
+    req.flush(null);
+  }));
+
+  it('should apply redactions', fakeAsync((done) => {
+    const blobResp = new Blob(['blob'], { type: 'application/json' });
+    const redactPaylod = { redactions: [redaction], documentId: 'document-id' };
+    api.redact(redactPaylod).subscribe((response) => {
+      expect(response.body).toEqual(blobResp);
+    }, error => done(error));
+
+    const req = httpMock.expectOne('/api/redaction');
+    expect(req.request.method).toBe('POST');
+    expect(req.request.body.documentId).toBe('document-id');
+    expect(req.request.body).toBe(redactPaylod);
+    req.flush(blobResp);
+  }));
+
+  it('should save bulk redaction markup', fakeAsync((done) => {
+    api.saveBulkRedaction(bulkRedaction).subscribe((response) => {
+      expect(response).toEqual(bulkRedaction);
+    }, error => done(error));
+
+    const req = httpMock.expectOne('/api/markups/search');
+    expect(req.request.method).toBe('POST');
+    expect(req.request.body.searchRedactions[0].documentId).toBe('document-id');
+    expect(req.request.body.searchRedactions[0].redactionId).toBe('redaction-id');
+    expect(req.request.body.searchRedactions[0].page).toBe(1);
+    req.flush(bulkRedaction);
+  }));
+});

package/projects/media-viewer/src/lib/redaction/services/redaction-api.service.ts

@@ -0,0 +1,65 @@
+import { Observable } from 'rxjs';
+import { HttpClient, HttpResponse } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { catchError, map } from 'rxjs/operators';
+import { BulkRedaction, Redaction } from './redaction.model';
+
+@Injectable()
+export class RedactionApiService {
+
+  private markupsApiUrl = '/api/markups';
+  private redactApiUrl = '/api/redaction';
+  private markupsSearchApiUrl = '/api/markups/search';
+  constructor(
+    private readonly httpClient: HttpClient
+  ) { }
+
+  public getRedactions(documentId: string): Observable<HttpResponse<Redaction[]>> {
+    const fixedUrl = `${this.markupsApiUrl}/${documentId}`;
+    return this.httpClient
+      .get<Redaction[]>(fixedUrl, { observe: 'response', withCredentials: true });
+  }
+
+  public saveRedaction(body): Observable<Redaction> {
+    return this.httpClient
+      .post<Redaction>(this.markupsApiUrl, body, { observe: 'response', withCredentials: true })
+      .pipe(
+        map(response => response.body),
+        catchError(() => [])
+      );
+  }
+
+  public saveBulkRedaction(body): Observable<BulkRedaction> {
+    return this.httpClient
+      .post<BulkRedaction>(this.markupsSearchApiUrl, body, { observe: 'response', withCredentials: true })
+      .pipe(
+        map(response => response.body),
+        catchError(() => [])
+      );
+  }
+
+  public deleteRedaction(payload): Observable<null> {
+    const url = `${this.markupsApiUrl}/${payload.documentId}/${payload.redactionId}`;
+    return this.httpClient
+      .delete<null>(url, { observe: 'response', withCredentials: true })
+      .pipe(map(response => response.body));
+  }
+
+  public deleteAllMarkers(documentId): Observable<null> {
+    const url = `${this.markupsApiUrl}/${documentId}`;
+
+    return this.httpClient
+      .delete<null>(url, { observe: 'response', withCredentials: true })
+      .pipe(map(response => response.body));
+  }
+
+  public redact(payload): Observable<HttpResponse<Blob>> {
+    return this.httpClient
+      .post<Blob>(this.redactApiUrl, payload, { observe: 'response', withCredentials: true, responseType: 'blob' as 'json' })
+      .pipe(
+        map(response => response),
+        catchError(() => [])
+      );
+  }
+
+}

package/projects/media-viewer/src/lib/redaction/services/redaction.model.ts

@@ -0,0 +1,12 @@
+import { Rectangle } from '../../annotations/annotation-set/annotation-view/rectangle/rectangle.model';
+
+export interface Redaction {
+  redactionId?: string;
+  documentId?: string;
+  page?: number;
+  rectangles?: Rectangle[];
+}
+
+export interface BulkRedaction {
+  searchRedactions: Redaction[];
+}