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

package/projects/media-viewer/src/lib/store/reducers/document.reducer.spec.ts

@@ -0,0 +1,119 @@
+import * as fromDocument from './document.reducer';
+import * as fromActions from '../actions/document.actions';
+import { ClearConvertDocUrl, ConvertFailure, ConvertSuccess } from '../actions/document.actions';
+import { DocumentState } from './document.reducer';
+
+describe('DocumentReducer', () => {
+
+  const documentState: DocumentState = {
+    convertedDocument: { url: 'url', error: undefined },
+    documentId: '',
+    pdfPosition: undefined,
+    rotation: undefined,
+    rotationLoaded: undefined,
+    pages: undefined,
+    hasDifferentPageSize: false,
+    loaded: true,
+    loading: false
+  };
+
+  it('should return the default state', () => {
+    const { initialDocumentState } = fromDocument;
+    const action = {} as any;
+    const state = fromDocument.docReducer(undefined, action);
+
+    expect(state).toBe(initialDocumentState);
+  });
+
+  it('should set pages after ADD PAGE action', () => {
+    const payload = [
+      {
+        div: {},
+        scale: 1,
+        rotation: 0,
+        id: '1',
+        viewportScale: 1.33333
+      }];
+    const { initialDocumentState } = fromDocument;
+    const action = new fromActions.AddPages(payload);
+    const state = fromDocument.docReducer(initialDocumentState, action);
+    const pages: any = {
+      '1' : {
+        styles: {
+          left: undefined,
+          height: undefined,
+          width: undefined
+        },
+        scaleRotation: {
+          scale: 1,
+          rotation: 0
+        },
+        viewportScale: 1.33333
+      }
+    };
+    expect(state.pages).toEqual(pages);
+  });
+
+  it('should set pages after ADD PAGE action with computed styles', () => {
+    const payload = [
+      {
+        div: {
+          attributes: {
+            style: {
+              value: 'width: round(down, var(--scale-factor) * 595.303937007874px, var(--scale-round-x, 1px));height: round(down, var(--scale-factor) * 841.889763779528px, var(--scale-round-y, 1px));--scale-round-x: 5px;--scale-round-y: 5px;'
+            }
+          }
+        },
+        scale: 1,
+        rotation: 0,
+        id: '1',
+        viewportScale: 1.33333
+      }];
+    const { initialDocumentState } = fromDocument;
+    const action = new fromActions.AddPages(payload);
+    const state = fromDocument.docReducer(initialDocumentState, action);
+    const pages: any = {
+      '1' : {
+        styles: {
+          left: undefined,
+          height: 1120,
+          width: 790
+        },
+        scaleRotation: {
+          scale: 1,
+          rotation: 0
+        },
+        viewportScale: 1.33333
+      }
+    };
+    expect(state.pages).toEqual(pages);
+  });
+
+  it('should convert document', function () {
+    const url = 'new url';
+
+    const state = fromDocument.docReducer(documentState, new ConvertSuccess(url));
+
+    expect(state.convertedDocument).toEqual({ url: url, error: undefined });
+    expect(state.loaded).toBeTrue();
+    expect(state.loading).toBeFalse();
+  });
+
+  it('should fail to convert document', function () {
+    const error = 'error';
+
+    const state = fromDocument.docReducer(documentState, new ConvertFailure(error));
+
+    expect(state.convertedDocument).toEqual({ url: undefined, error: error });
+    expect(state.loaded).toBeTrue();
+    expect(state.loading).toBeFalse();
+  });
+
+  it('should clear doc url', function () {
+    const state = fromDocument.docReducer(documentState, new ClearConvertDocUrl());
+
+    expect(state.convertedDocument).toEqual(undefined);
+    expect(state.loaded).toBeTrue();
+    expect(state.loading).toBeFalse();
+  });
+});

package/projects/media-viewer/src/lib/store/reducers/document.reducer.ts

@@ -0,0 +1,205 @@
+import * as fromActions from '../actions/document.actions';
+
+export interface DocumentState {
+  convertedDocument: {
+    url: string;
+    error: string;
+  };
+  documentId: string;
+  pdfPosition: PdfPosition;
+  pages: {[id: string]: DocumentPages};
+  hasDifferentPageSize: boolean;
+  rotation: number;
+  rotationLoaded: boolean;
+  loaded: boolean;
+  loading: boolean;
+}
+
+export interface DocumentPages {
+ numberOfPages: number;
+ styles: { left: number, height: number, width: number };
+ scaleRotation: { scale: string; rotation: string };
+ viewportScale: number;
+}
+
+export interface PdfPosition {
+  pageNumber: number;
+  scale: number;
+  top: number;
+  left: number;
+  rotation: number;
+}
+
+export const initialDocumentState: DocumentState = {
+  convertedDocument: undefined,
+  documentId: undefined,
+  pdfPosition: undefined,
+  pages: {},
+  hasDifferentPageSize: false,
+  rotation: undefined,
+  rotationLoaded: false,
+  loading: false,
+  loaded: false
+};
+
+export function docReducer (state = initialDocumentState,
+                            action: fromActions.DocumentActions): DocumentState {
+
+  switch (action.type) {
+
+    case fromActions.CONVERT_SUCCESS: {
+      const convertedDocument = {
+        url: action.payload,
+        error: undefined
+      };
+      return {
+        ...state,
+        convertedDocument
+      };
+    }
+
+    case fromActions.CONVERT_FAIL: {
+      const convertedDocument = {
+        url: undefined,
+        error: action.payload
+      };
+      return {
+        ...state,
+        convertedDocument
+      };
+    }
+
+    case fromActions.CLEAR_CONVERT_DOC_URL: {
+      const convertedDocument = undefined;
+      return {
+        ...state,
+        convertedDocument
+      };
+    }
+
+    case fromActions.LOAD_ROTATION: {
+      return {
+        ...state,
+        rotationLoaded: false
+      };
+    }
+
+    case fromActions.LOAD_ROTATION_SUCCESS: {
+      const metadata = action.payload;
+      const rotation = metadata ? metadata.rotationAngle : 0;
+      return {
+        ...state,
+        rotation,
+        rotationLoaded: true
+      };
+    }
+
+    case fromActions.LOAD_ROTATION_FAIL: {
+      return {
+        ...state,
+        rotation: 0,
+        rotationLoaded: true
+      };
+    }
+
+    case fromActions.SAVE_ROTATION_SUCCESS: {
+      const metadata = action.payload;
+      const rotation = metadata.rotationAngle;
+      return {
+        ...state,
+        rotation
+      };
+    }
+
+    case fromActions.SET_DOCUMENT_ID : {
+      return {
+        ...state,
+        documentId: action.payload
+      };
+    }
+
+    case fromActions.ADD_PAGES: {
+      const payload = action.payload;
+      let pages = {};
+      let pageHeight;
+      let pageWidth;
+      let hasDifferentPageSize = state.hasDifferentPageSize;
+      const pageNumberInput = document.getElementById('pageNumber') as HTMLInputElement;
+      const pageIndex = pageNumberInput?.value ? parseInt(pageNumberInput.value, 10) - 1 : 0;
+      const loadedPage = payload[pageIndex]?.div['attributes']?.style?.value ?? '';
+      payload.forEach(page => {
+        const sizingValue = page.div?.['attributes']?.style?.value ?? '';
+        const widthMatch  = sizingValue.match(/width:\s*round\(down,\s*var\(--scale-factor\)\s*\*\s*([\d.]+)([a-z%]+)?,.*var\(--scale-round-x, ([\d.]+)([a-z%]+)?\)\)/);
+        const heightMatch = sizingValue.match(/height:\s*round\(down,\s*var\(--scale-factor\)\s*\*\s*([\d.]+)([a-z%]+)?,.*var\(--scale-round-y, ([\d.]+)([a-z%]+)?\)\)/);
+        const scaleRoundXMatch = loadedPage.match(/--scale-round-x:\s*([\d.]+)([a-z%]+)?/);
+        const scaleRoundYMatch = loadedPage.match(/--scale-round-y:\s*([\d.]+)([a-z%]+)?/);
+        // You can now use widthUnit, heightUnit, scaleRoundXUnit, scaleRoundYUnit as needed
+        const scaleFactor = page.viewportScale ?? 1;
+        const scaleRoundX = scaleRoundXMatch ? parseFloat(scaleRoundXMatch[1]) : 1;
+        const scaleRoundY = scaleRoundYMatch ? parseFloat(scaleRoundYMatch[1]) : 1;
+        const baseWidth = widthMatch ? parseFloat(widthMatch[1]) : undefined;
+        const baseHeight = heightMatch ? parseFloat(heightMatch[1]) : undefined;
+        function roundDown(value: number, step: number): number {
+          return Math.floor(value / step) * step;
+        }
+        const computedWidth = baseWidth !== undefined
+          ? roundDown(scaleFactor * baseWidth, scaleRoundX)
+          : page.div['clientWidth'];
+        const computedHeight = baseHeight !== undefined
+          ? roundDown(scaleFactor * baseHeight, scaleRoundY)
+          : page.div['clientHeight'];
+
+        if (!hasDifferentPageSize && pageHeight && pageWidth &&
+          (pageHeight !== computedHeight || pageWidth !== computedWidth)) {
+          hasDifferentPageSize = true;
+        } else {
+          pageHeight = computedHeight;
+          pageWidth = computedWidth;
+        }
+        const styles = {
+          left: page.div['offsetLeft'],
+          height: computedHeight,
+          width: computedWidth
+        };
+
+        const scaleRotation = {
+          scale: page.scale,
+          rotation: page.rotation
+        };
+
+        const p = {
+          styles,
+          scaleRotation,
+          viewportScale: page.viewportScale
+        };
+
+        pages = {
+          ...pages,
+          [page.id]: p
+        };
+
+      });
+      return {
+        ...state,
+        pages,
+        hasDifferentPageSize
+      };
+    }
+
+    case fromActions.POSITION_UPDATED: {
+      const pdfPosition = action.payload;
+      return {
+        ...state,
+        pdfPosition
+      };
+    }
+  }
+  return state;
+}
+export const getDocPages = (state: DocumentState) => state.pages;
+export const getDocId = (state: DocumentState) => state.documentId;
+export const getPdfPos = (state: DocumentState) => state.pdfPosition;
+export const getHasDifferentPageSizes = (state: DocumentState) => state.hasDifferentPageSize;
+export const getRotation = (state: DocumentState) => state.rotation;
+export const rotationLoaded = (state: DocumentState) => state.rotationLoaded;
+export const getConvertedDocument = (state: DocumentState) => state.convertedDocument;

package/projects/media-viewer/src/lib/store/reducers/icp.reducer.spec.ts

@@ -0,0 +1,70 @@
+import * as fromIcp from './icp.reducer';
+import { initialIcpSessionState } from './icp.reducer';
+import {
+  IcpParticipantListUpdated,
+  IcpPresenterUpdated,
+  IcpSocketSessionJoined,
+  LeaveIcpSocketSession,
+  LoadIcpSession,
+  SetCaseId
+} from '../actions/icp.actions';
+
+const icpState = {
+  session: {
+    sessionId: 'sessionId',
+    documentId: 'documentId',
+    caseId: 'caseId',
+    dateOfHearing: new Date(),
+    connectionUrl: 'url-connectionstring'
+  },
+  client: { id: 'clientId', username: 'name' },
+  presenter: { id: 'presenterId', username: 'name' },
+  participants: [{ id: 'participantId', username: 'name' }]
+};
+
+describe('IcpReducer', () => {
+
+  it('should start loading icp state', function () {
+    const state = fromIcp.icpReducer(initialIcpSessionState, new LoadIcpSession({ caseId: 'caseId', documentId: 'documentId' }));
+    expect(state.session).toEqual(null);
+    expect(state.client).toEqual(null);
+    expect(state.presenter).toEqual(null);
+    expect(state.participants).toEqual([]);
+  });
+
+  it('should set case id', function () {
+    const state = fromIcp.icpReducer(initialIcpSessionState, new SetCaseId(icpState.session.caseId));
+    expect(state.session.caseId).toEqual(icpState.session.caseId);
+  });
+
+  it('should join session', function () {
+    const session = icpState.session;
+    const participantInfo = {
+      client: icpState.client,
+      presenter: icpState.presenter
+    };
+    const state = fromIcp.icpReducer(initialIcpSessionState, new IcpSocketSessionJoined({ session, participantInfo }));
+    expect(state.client).toEqual(participantInfo.client);
+    expect(state.presenter).toEqual(participantInfo.presenter);
+    expect(state.session).toEqual(session);
+  });
+
+  it('should update presenter', function () {
+    const updatedPresenter = { id: 'newPresenterId', username: 'newPresenterName' };
+    const state = fromIcp.icpReducer(icpState, new IcpPresenterUpdated(updatedPresenter));
+    expect(state.presenter).toEqual(updatedPresenter);
+  });
+
+  it('leave icp session', function () {
+    const state = fromIcp.icpReducer(icpState, new LeaveIcpSocketSession());
+    expect(state.presenter).toEqual(null);
+    expect(state.client).toEqual(null);
+    expect(state.session).toEqual(null);
+  });
+
+  it('should update participants list', function () {
+    const updatedParticipantsList = { 'participantId': 'name' };
+    const state = fromIcp.icpReducer(initialIcpSessionState, new IcpParticipantListUpdated(updatedParticipantsList));
+    expect(state.participants).toEqual(icpState.participants);
+  });
+});

package/projects/media-viewer/src/lib/store/reducers/icp.reducer.ts

@@ -0,0 +1,66 @@
+import * as fromIcpActions from '../actions/icp.actions';
+import { IcpSession, IcpState } from '../../icp/icp.interfaces';
+
+export const initialIcpSessionState: IcpState = {
+  session: null,
+  presenter: null,
+  client: null,
+  participants: []
+};
+
+export function icpReducer (state = initialIcpSessionState,
+                                  action: fromIcpActions.IcpActions): IcpState {
+
+  switch (action.type) {
+
+    case fromIcpActions.SET_CASE_ID: {
+      const caseId = action.payload;
+      const session = {...state.session, caseId};
+      return {
+        ...state,
+        session
+      };
+    }
+
+    case fromIcpActions.ICP_SOCKET_SESSION_JOINED: {
+      const session: IcpSession = action.payload.session;
+      const participantInfo = action.payload.participantInfo;
+      return {
+        ...state,
+        session,
+        client: participantInfo.client,
+        presenter: participantInfo.presenter,
+      };
+    }
+
+    case fromIcpActions.ICP_PARTICIPANT_LIST_UPDATED: {
+      const updatedParticipants: any = action.payload;
+      const participants = Object.keys(updatedParticipants)
+        .map(id => ({ id: id, username: updatedParticipants[id] }));
+      return {
+        ...state,
+        participants
+      };
+    }
+
+    case fromIcpActions.ICP_PRESENTER_UPDATED: {
+      const presenter = action.payload;
+      return {
+        ...state, presenter
+      };
+    }
+
+    case fromIcpActions.LEAVE_ICP_SOCKET_SESSION: {
+      return {
+        ...state,
+        ...initialIcpSessionState
+      };
+    }
+  }
+  return state;
+}
+
+export const getIcpSession = (state: IcpState) => state.session;
+export const getPresenter = (state: IcpState) => state.presenter;
+export const getClient = (state: IcpState) => state.client;
+export const getParticipants = (state: IcpState) => state.participants;

package/projects/media-viewer/src/lib/store/reducers/redaction.reducer.spec.ts

@@ -0,0 +1,86 @@
+import * as fromRedaction from './redaction.reducer';
+import { initialRedactionState } from './redaction.reducer';
+import {
+  DeleteRedactionSuccess,
+  LoadRedactions,
+  LoadRedactionSuccess,
+  RedactSuccess,
+  ResetRedactedDocument,
+  SaveRedactionSuccess,
+  SelectRedaction,
+  UnmarkAllSuccess
+} from '../actions/redaction.actions';
+
+describe('DocumentReducer', () => {
+
+  const redaction = { redactionId: 'redaction-id', documentId: 'document-id', page: 1, rectangles: [] };
+  const redactionState = {
+    redactionEntities: { 'redaction-id': redaction },
+  redactionPageEntities: undefined,
+  selectedRedaction: undefined,
+  redactedDocumentInfo: undefined,
+  documentId: 'document-id'
+};
+
+  it('should return the default state', () => {
+    const initRedactionState = fromRedaction.initialRedactionState;
+    const action = new LoadRedactions('document-id');
+    const state = fromRedaction.redactionReducer(undefined, action);
+
+    expect(state).toEqual(initRedactionState);
+  });
+
+  it('should set loaded redactions in the state', () => {
+    const state = fromRedaction.redactionReducer({ ...redactionState }, new LoadRedactionSuccess([redaction]));
+
+    expect(state.redactionEntities).toEqual({ 'redaction-id': redaction });
+    expect(state.redactionPageEntities).toEqual({ '1': [redaction] });
+  });
+
+  it('should set saved redactions in the state', () => {
+    const savedRedaction = { redactionId: 'redactionID', documentId: 'documentID', page: 2, rectangles: [] };
+    const state = fromRedaction.redactionReducer({ ...redactionState }, new SaveRedactionSuccess(savedRedaction));
+
+    expect(state.redactionEntities).toEqual({ 'redaction-id': redaction, 'redactionID': savedRedaction });
+    expect(state.redactionPageEntities).toEqual({ '1': [redaction], '2': [savedRedaction] });
+  });
+
+  it('should set the selected redaction', () => {
+    const selected = { annotationId: 'annotationId', editable: true, selected: true };
+    const state = fromRedaction.redactionReducer({ ...redactionState }, new SelectRedaction(selected));
+
+    expect(state.selectedRedaction).toEqual(selected);
+  });
+
+  it('should remove deleted redaction', () => {
+    const action = new LoadRedactionSuccess([redaction]);
+    let state = fromRedaction.redactionReducer({ ...redactionState }, action);
+    state = fromRedaction.redactionReducer({ ...state }, new DeleteRedactionSuccess(redaction));
+
+    expect(state.redactionEntities).toEqual({});
+    expect(state.redactionPageEntities).toEqual({ '1': []});
+  });
+
+  it('should set redacted document info', () => {
+    const payload = { blob: 'blob' as any, filename: 'file-name' };
+    const state = fromRedaction.redactionReducer({ ...redactionState }, new RedactSuccess(payload));
+
+    expect(state.redactedDocumentInfo).toEqual(payload);
+  });
+
+  it('should set redacted document info', () => {
+    const payload = { blob: 'blob' as any, filename: 'file-name' };
+    let state = fromRedaction.redactionReducer({ ...redactionState }, new RedactSuccess(payload));
+    state = fromRedaction.redactionReducer({ ...state }, new ResetRedactedDocument());
+
+    expect(state.redactedDocumentInfo).toBeUndefined();
+  });
+
+  it('should delete all marked redactions', () => {
+    const payload = { blob: 'blob' as any, filename: 'file-name' };
+    let state = fromRedaction.redactionReducer({ ...redactionState }, new RedactSuccess(payload));
+    state = fromRedaction.redactionReducer({ ...state }, new UnmarkAllSuccess());
+
+    expect(state).toEqual(initialRedactionState);
+  });
+});

package/projects/media-viewer/src/lib/store/reducers/redaction.reducer.ts

@@ -0,0 +1,143 @@
+import { map } from 'rxjs/operators';
+import * as fromRedaction from '../actions/redaction.actions';
+import * as fromAnnotations from '../actions/annotation.actions';
+import { StoreUtils } from '../store-utils';
+import { SelectionAnnotation } from '../../annotations/models/event-select.model';
+import { Redaction } from '../../redaction/services/redaction.model'; // todo rename
+
+
+export interface RedactionState {
+  redactionEntities: { [id: string]: Redaction };
+  redactionPageEntities: { [id: string]: any };
+  selectedRedaction: SelectionAnnotation | {};
+  redactedDocumentInfo: { blob: Blob, filename: string };
+  documentId: string;
+}
+
+export const initialRedactionState: RedactionState = {
+  redactionEntities: {},
+  redactionPageEntities: {},
+  selectedRedaction: {},
+  redactedDocumentInfo: undefined,
+  documentId: undefined
+};
+
+export function redactionReducer(
+  state = initialRedactionState,
+  action: fromRedaction.RedactionActions | fromAnnotations.AnnotationsActions
+): RedactionState {
+  switch (action.type) {
+
+    case fromRedaction.LOAD_REDACTIONS: {
+      return {
+        ...state,
+        ...initialRedactionState
+      };
+    }
+
+    case fromRedaction.LOAD_REDACTION_SUCCESS: {
+      const payload = action.payload;
+      if (payload) {
+        const redactionEntities = StoreUtils.generateRedactionEntities(payload);
+        const redactionPageEntities = StoreUtils.groupByKeyEntities(payload, 'page');
+        return {
+          ...state,
+          redactionEntities,
+          redactionPageEntities
+        };
+      }
+      return {
+        ...state
+      };
+    }
+
+    case fromRedaction.SAVE_REDACTION_SUCCESS: {
+      const { payload } = action;
+      const redactionEntities = {
+        ...state.redactionEntities,
+        [payload.redactionId]: payload
+      };
+      const redactionArray = Object.keys(redactionEntities).map(key => redactionEntities[key]);
+      const redactionPageEntities = StoreUtils.groupByKeyEntities(redactionArray, 'page');
+      return {
+        ...state,
+        redactionEntities,
+        redactionPageEntities
+      };
+    }
+    case fromRedaction.SAVE_BULK_REDACTION_SUCCESS: {
+      const payloadResult = Object.assign({}, ...action.payload.searchRedactions.map((x) => ({ [x.redactionId]: x })));
+      const redactionEntities = {
+        ...state.redactionEntities,
+        ...payloadResult
+      };
+      const redactionArray = Object.keys(redactionEntities).map(key => redactionEntities[key]);
+      const redactionPageEntities = StoreUtils.groupByKeyEntities(redactionArray, 'page');
+      return {
+        ...state,
+        redactionEntities,
+        redactionPageEntities
+      };
+    }
+    case fromRedaction.SELECT_REDACTION:
+    case fromAnnotations.SELECT_ANNOTATION: {
+      return {
+        ...state,
+        selectedRedaction: action.payload
+      };
+    }
+
+    case fromRedaction.DELETE_REDACTION_SUCCESS: {
+      const page = action.payload.page;
+      const id = action.payload.redactionId;
+      const redactionEntities = {
+        ...state.redactionEntities
+      };
+      delete redactionEntities[id];
+      const pageRedactionRemoved = [
+        ...state.redactionPageEntities[page].filter(redaction => redaction.redactionId !== id)
+      ];
+      const redactionPageEntities = {
+        ...state.redactionPageEntities,
+        [page]: pageRedactionRemoved
+      };
+
+      return {
+        ...state,
+        redactionPageEntities,
+        redactionEntities,
+      };
+    }
+
+    case fromRedaction.REDACT_SUCCESS: {
+      const redactedDocumentInfo = action.payload;
+      return {
+        ...state,
+        ...initialRedactionState,
+        redactedDocumentInfo
+      };
+    }
+
+    case fromRedaction.RESET_REDACTED_DOCUMENT: {
+      return {
+        ...state,
+        redactedDocumentInfo: undefined
+      };
+    }
+
+    case fromRedaction.UNMARK_ALL_SUCCESS: {
+      return {
+        ...state,
+        ...initialRedactionState
+      };
+    }
+  }
+
+  return state;
+}
+
+
+export const getRedactionEnt = (state: RedactionState) => state.redactionEntities;
+export const getPageEnt = (state: RedactionState) => state.redactionPageEntities;
+export const getSelectedRedaction = (state: RedactionState) => state.selectedRedaction;
+export const getRedactedDocInfo = (state: RedactionState) => state.redactedDocumentInfo;