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

package/projects/media-viewer/.yarnrc.yml

@@ -1,5 +0,0 @@
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
-
-yarnPath: .yarn/releases/yarn-3.8.5.cjs

package/projects/media-viewer/css-bundle.ts

@@ -1,28 +0,0 @@
-import { relative } from 'path';
-import { Bundler } from 'scss-bundle';
-import { writeFile } from 'fs-extra';
-
-/** Bundles all SCSS files into a single file */
-async function bundleScss() {
-  const { found, bundledContent, imports } = await new Bundler()
-    .Bundle('./src/_theme.scss', ['./src/**/*.scss']);
-
-  if (imports) {
-    const cwd = process.cwd();
-
-    const filesNotFound = imports
-      .filter(x => !x.found)
-      .map(x => relative(cwd, x.filePath));
-
-    if (filesNotFound.length) {
-      console.error(`SCSS imports failed \n\n${filesNotFound.join('\n - ')}\n`);
-      throw new Error('One or more SCSS imports failed');
-    }
-  }
-
-  if (found) {
-    await writeFile('./dist/_theme.scss', bundledContent);
-  }
-}
-
-bundleScss();

package/projects/media-viewer/karma.conf.js

@@ -1,52 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-    config.set({
-      basePath: '',
-      frameworks: ['jasmine', '@angular-devkit/build-angular'],
-      plugins: [
-        require('karma-jasmine'),
-        require('karma-chrome-launcher'),
-        require('karma-jasmine-html-reporter'),
-        require('karma-coverage'),
-        require('@angular-devkit/build-angular/plugins/karma')
-      ],
-      client: {
-        jasmine:{
-          random: false,
-        },
-        clearContext: false, // leave Jasmine Spec Runner output visible in browser
-      },
-      jasmineHtmlReporter: {
-        suppressAll: true // removes the duplicated traces
-      },
-      coverageReporter: {
-        dir: require('path').join(__dirname, '../../coverage/media-viewer'),
-        subdir: '.',
-        reporters: [
-          { type: 'html', subdir: 'html-report' },
-          { type: 'lcov', subdir: 'lcov-report' }
-        ],
-        fixWebpackSourcePaths: true
-      },
-      defaultTimeoutInterval: 60000,
-      browserNoActivityTimeout: 60000,
-      browserDisconnectTimeout: 60000,
-      reporters: ['progress', 'coverage'],
-      port: 9876,
-      colors: true,
-      logLevel: config.LOG_INFO,
-      autoWatch: true,
-      browsers: ['ChromeHeadless'],
-      customLaunchers: {
-        ChromeHeadlessCI: {
-          base: 'ChromeHeadless',
-          flags: ['--no-sandbox']
-        }
-      },
-      singleRun: true,
-      restartOnFileChange: true
-    });
-  };
-  

package/projects/media-viewer/ng-package.json

@@ -1,15 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/media-viewer",
-  "deleteDestPath": false,
-  "lib": {
-    "entryFile": "src/public_api.ts"
-  },
-  "allowedNonPeerDependencies": [
-    "@swimlane/ngx-datatable",
-    "pdfjs-dist",
-    "uuid",
-    "mutable-div",
-    "socket.io-client"
-  ]
-}

package/projects/media-viewer/ng-package.prod.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/media-viewer",
-  "lib": {
-    "entryFile": "src/public_api.ts"
-  },
-  "allowedNonPeerDependencies": [
-    "@swimlane/ngx-datatable",
-    "pdfjs-dist",
-    "uuid",
-    "mutable-div",
-    "socket.io-client"
-  ]
-}

package/projects/media-viewer/package.json

@@ -1,43 +0,0 @@
-{
-  "name": "@hmcts/media-viewer",
-  "version": "4.2.4-exui-3994-f",
-  "description": "Media Viewer",
-  "keywords": [
-    "Angular",
-    "PDF",
-    "Annotation"
-  ],
-  "homepage": "https://github.com/hmcts/rpa-annotation-ui-demo",
-  "license": "SEE LICENSE IN LICENSE",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/hmcts/em-media-viewer"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@swimlane/ngx-datatable": "^20.0.0",
-    "mutable-div": "^2.0.0",
-    "pdfjs-dist": "^4.10.38",
-    "socket.io-client": "^4.8.0",
-    "uuid": "^11.0.3"
-  },
-  "peerDependencies": {
-    "@angular/animations": "^20.0.0",
-    "@angular/common": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "@angular/forms": "^20.0.0",
-    "@angular/material": "^17.3.8",
-    "@angular/platform-browser": "^20.0.0",
-    "@ngrx/effects": "^20",
-    "@ngrx/router-store": "^20",
-    "@ngrx/store": "^20",
-    "@ngrx/store-devtools": "^20"
-  },
-  "devDependencies": {
-    "@types/uuid": "^10.0.0",
-    "pdfjs-dist": "^4.10.38"
-  },
-  "packageManager": "yarn@4.5.0"
-}

package/projects/media-viewer/src/lib/annotations/annotation-set/annotation-create/box-highlight-create/box-highlight-create.component.html

@@ -1,16 +0,0 @@
-<div [style.height]="defaultHeight"
-     [style.width]="defaultWidth"
-     (mousedown)="initHighlight($event)"
-     (mousemove)="updateHighlight($event)"
-     (mouseup)="createHighlight()">
-  <div #boxHighlight
-     class="box-highlight"
-     [style.display]="display"
-     [style.position]="position"
-     [style.background-color]="backgroundColor"
-     [style.height]="height ? height + 'px' : '100%'"
-     [style.width]="width ? width + 'px' : '100%'"
-     [style.top]="top + 'px'"
-     [style.left]="left + 'px'">
-  </div>
-</div>

package/projects/media-viewer/src/lib/annotations/annotation-set/annotation-create/box-highlight-create/box-highlight-create.component.spec.ts

@@ -1,366 +0,0 @@
-import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { Subscription, BehaviorSubject, Subject } from 'rxjs';
-
-import { ToolbarEventService } from '../../../../toolbar/toolbar-event.service';
-import { HighlightCreateService } from '../highlight-create/highlight-create.service';
-import { BoxHighlightCreateComponent } from './box-highlight-create.component';
-
-describe('BoxHighlightCreateComponent', () => {
-  let component: BoxHighlightCreateComponent;
-  let fixture: ComponentFixture<BoxHighlightCreateComponent>;
-  let nativeElement: HTMLElement;
-  const mockHighlightService = { saveAnnotation: () => {}, applyRotation: () => {} };
-  const drawModeSubject$: BehaviorSubject<boolean> = new BehaviorSubject(false);
-  const redactWholePageSubject$ = new Subject<void>();
-
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
-      declarations: [BoxHighlightCreateComponent],
-      providers: [
-        {
-          provide: ToolbarEventService,
-          useValue: {
-            drawModeSubject: drawModeSubject$.asObservable(),
-            redactWholePage: redactWholePageSubject$.asObservable()
-          }
-        },
-        {
-          provide: HighlightCreateService,
-          useValue: mockHighlightService
-        }
-      ]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(BoxHighlightCreateComponent);
-    nativeElement = fixture.debugElement.query(By.css('div.box-highlight')).nativeElement;
-    component = fixture.componentInstance;
-    component.rotate = 0;
-    component.zoom = 1;
-    component.pageHeight = 400;
-    component.pageWidth = 200;
-    component.container = { top: 100, left: 200 };
-    fixture.detectChanges();
-  });
-
-  it('should create the component', () => {
-    expect(component).toBeTruthy();
-  });
-
-  describe('ngOnInit', () => {
-    it('should set defaultWidth and defaultHeight to 0px',
-      inject([ToolbarEventService], (toolbarEvents: ToolbarEventService) => {
-        drawModeSubject$.next(false);
-        component.ngOnInit();
-
-        expect(component.defaultHeight).toBe('0px');
-        expect(component.defaultWidth).toBe('0px');
-      })
-    );
-
-    it('should set defaultWidth and defaultHeight to 100%',
-      inject([ToolbarEventService], (toolbarEvents: ToolbarEventService) => {
-        drawModeSubject$.next(true);
-        component.ngOnInit();
-
-        expect(component.defaultHeight).toBe('100%');
-        expect(component.defaultWidth).toBe('100%');
-      })
-    );
-
-    it('should set whole page',
-      inject([ToolbarEventService], (toolbarEvents: ToolbarEventService) => {
-        redactWholePageSubject$.next();
-        component.ngOnInit();
-
-        expect(component.wholePage).toBe(true);
-      })
-    );
-  });
-
-
-  it('should destroy subscriptions',
-    inject([ToolbarEventService], (toolbarEvents) => {
-      const mockSubscription = { unsubscribe: () => {} };
-      spyOn(toolbarEvents.drawModeSubject, 'subscribe').and.returnValue(mockSubscription);
-      spyOn(mockSubscription, 'unsubscribe');
-
-      component.ngOnInit();
-      component.ngOnDestroy();
-
-      expect(mockSubscription.unsubscribe).toHaveBeenCalled();
-    })
-  );
-
-  describe('initHighlight', () => {
-    it('should initialise the box highlight creator without ratation', () => {
-      const mockTarget = document.createElement('div');
-      spyOn(mockTarget, 'getBoundingClientRect').and.returnValue({
-        top: 0,
-        left: 0,
-        right: 100,
-        bottom: 100,
-        width: 100,
-        height: 100,
-        x: 100,
-        y: 100,
-
-        toJSON: () => {}
-      });
-      const event = { clientX: 100, clientY: 200, target: mockTarget } as unknown as MouseEvent;
-
-      component.initHighlight(event);
-
-      expect(component.display).toBe('block');
-      expect(component.backgroundColor).toEqual('yellow');
-      expect(component.height).toBe(50);
-      expect(component.width).toBe(50);
-      expect(component.top).toBe(200);
-      expect(component.left).toBe(100);
-    });
-
-    it('should initialise the box highlight creator with ratation on 90deg', () => {
-      const mockTarget = document.createElement('div');
-      const event = { clientX: 100, clientY: 200, target: mockTarget } as unknown as MouseEvent;
-      spyOn(mockTarget, 'getBoundingClientRect').and.returnValue({
-        top: 0,
-        left: 0,
-        right: 100,
-        bottom: 100,
-        width: 100,
-        height: 100,
-        x: 0,
-        y: 0,
-        toJSON: () => {}
-      });
-      component.rotate = 90;
-      fixture.detectChanges();
-
-      component.initHighlight(event);
-
-      expect(component.height).toBe(50);
-      expect(component.width).toBe(50);
-      expect(component.top).toBe(150);
-      expect(component.left).toBe(100);
-    });
-
-    it('should initialise the box highlight creator with ratation on 180deg', () => {
-      const mockTarget = document.createElement('div');
-      const event = { clientX: 100, clientY: 200, target: mockTarget } as unknown as MouseEvent;
-      spyOn(mockTarget, 'getBoundingClientRect').and.returnValue({
-        top: 0,
-        left: 0,
-        right: 100,
-        bottom: 100,
-        width: 100,
-        height: 100,
-        x: 0,
-        y: 0,
-        toJSON: () => {}
-      });
-      component.rotate = 180;
-      fixture.detectChanges();
-
-      component.initHighlight(event);
-
-      expect(component.height).toBe(50);
-      expect(component.width).toBe(50);
-      expect(component.top).toBe(150);
-      expect(component.left).toBe(50);
-    });
-
-    it('should initialise the box highlight creator with ratation on 270deg', () => {
-
-      const mockTarget = document.createElement('div');
-      const event = { clientX: 100, clientY: 200, target: mockTarget } as unknown as MouseEvent;
-      spyOn(mockTarget, 'getBoundingClientRect').and.returnValue({
-        top: 0,
-        left: 0,
-        right: 100,
-        bottom: 100,
-        width: 100,
-        height: 100,
-        x: 0,
-        y: 0,
-        toJSON: () => {}
-      });
-
-      component.rotate = 270;
-      fixture.detectChanges();
-
-      component.initHighlight(event);
-
-      expect(component.height).toBe(50);
-      expect(component.width).toBe(50);
-      expect(component.top).toBe(200);
-      expect(component.left).toBe(50);
-    });
-  });
-
-  describe('updateHighlight', () => {
-    it('should update the box highlight creator', () => {
-      const updateHighlightSpy = spyOn(component, 'updateHighlight').and.callThrough();
-      const nativeElementDiv = fixture.debugElement.query(By.css('div')).nativeElement;
-      spyOn(nativeElementDiv as any, 'getBoundingClientRect').and.returnValue({top: 0, left: 0});
-
-      const updateEvent = new MouseEvent('mousemove', { clientX: 100, clientY: 100 });
-      component.drawStartX = 60;
-      component.drawStartY = 50;
-      fixture.detectChanges();
-
-      nativeElementDiv.dispatchEvent(updateEvent);
-
-      expect(updateHighlightSpy).toHaveBeenCalled();
-
-      expect(component.width).toBe(40);
-      expect(component.height).toBe(50);
-      expect(component.top).toBe(50);
-      expect(component.left).toBe(60);
-    });
-
-    it('should not update the box highlight when offsetX is 0', () => {
-      const updateHighlightSpy = spyOn(component, 'updateHighlight').and.callThrough();
-      const nativeElementDiv = fixture.debugElement.query(By.css('div')).nativeElement;
-      spyOn(nativeElementDiv as any, 'getBoundingClientRect').and.returnValue({top: 0, left: 0});
-
-      const updateEvent = new MouseEvent('mousemove', { clientX: 0, clientY: 100 });
-      component.width = 100;
-      component.height = 150;
-      component.top = 50;
-      component.left = 350;
-      fixture.detectChanges();
-      nativeElementDiv.dispatchEvent(updateEvent);
-
-      expect(updateHighlightSpy).toHaveBeenCalled();
-
-      expect(component.width).toBe(100);
-      expect(component.height).toBe(150);
-      expect(component.top).toBe(50);
-      expect(component.left).toBe(350);
-    });
-
-    it('should not update the box highlight when offsetY is 0', () => {
-      const updateHighlightSpy = spyOn(component, 'updateHighlight').and.callThrough();
-      const nativeElementDiv = fixture.debugElement.query(By.css('div')).nativeElement;
-      spyOn(nativeElementDiv as any, 'getBoundingClientRect').and.returnValue({top: 0, left: 0});
-
-      const updateEvent = new MouseEvent('mousemove', { clientX: 100, clientY: 0 });
-      component.width = 100;
-      component.height = 150;
-      component.top = 50;
-      component.left = 350;
-      fixture.detectChanges();
-
-      nativeElementDiv.dispatchEvent(updateEvent);
-
-      expect(updateHighlightSpy).toHaveBeenCalled();
-
-      expect(component.width).toBe(100);
-      expect(component.height).toBe(150);
-      expect(component.top).toBe(50);
-      expect(component.left).toBe(350);
-    });
-  });
-
-  describe('createHighlight', () => {
-    it('should create the highlight when height is zoomed',
-      inject([HighlightCreateService], (highlightService: HighlightCreateService) => {
-        component.height = 20;
-        component.zoom = 2;
-        fixture.detectChanges();
-
-        spyOn(component.saveSelection, 'emit');
-        spyOn(highlightService, 'applyRotation');
-
-        component.createHighlight();
-
-        expect(component.saveSelection.emit).toHaveBeenCalled();
-        expect(component.drawStartX).toBe(-1);
-        expect(component.drawStartY).toBe(-1);
-        expect(component.display).toBe('none');
-        expect(component.width).toBe(0);
-        expect(component.height).toBe(0);
-      })
-    );
-
-    it('should create the highlight when width is zoomed',
-      inject([HighlightCreateService], (highlightService: HighlightCreateService) => {
-        component.width = 30;
-        component.zoom = 4;
-        fixture.detectChanges();
-
-        spyOn(component.saveSelection, 'emit');
-        spyOn(highlightService, 'applyRotation');
-
-        component.createHighlight();
-
-        expect(component.saveSelection.emit).toHaveBeenCalled();
-        expect(component.drawStartX).toBe(-1);
-        expect(component.drawStartY).toBe(-1);
-        expect(component.display).toBe('none');
-        expect(component.width).toBe(0);
-        expect(component.height).toBe(0);
-      })
-    );
-
-    it('should not create the highlight when height nor width is zoomed',
-      inject([HighlightCreateService], (highlightService: HighlightCreateService) => {
-        component.height = 20;
-        component.width = 10;
-        component.zoom = 5;
-        fixture.detectChanges();
-
-        spyOn(component.saveSelection, 'emit');
-        spyOn(highlightService, 'applyRotation');
-
-        component.createHighlight();
-
-        expect(component.saveSelection.emit).not.toHaveBeenCalled();
-        expect(component.drawStartX).toBe(-1);
-        expect(component.drawStartY).toBe(-1);
-        expect(component.display).toBeUndefined();
-        expect(component.width).toBe(10);
-        expect(component.height).toBe(20);
-      })
-    );
-
-    it('should create whole page highlight',
-    inject([HighlightCreateService], (highlightService: HighlightCreateService) => {
-      const mockTarget = document.createElement('div');
-
-      const event = { offsetX: 200, offsetY: 300, target: mockTarget } as unknown as MouseEvent;
-      spyOn(mockTarget, 'getBoundingClientRect').and.returnValue({
-        top: 0,
-        left: 0,
-        right: 100,
-        bottom: 100,
-        width: 100,
-        height: 100,
-        x: 0,
-        y: 0,
-        toJSON: () => {}
-      });
-      component.wholePage = true;
-      fixture.detectChanges();
-
-        spyOn(component.saveSelection, 'emit');
-        spyOn(highlightService, 'applyRotation');
-
-        component.initHighlight(event);
-
-        expect(highlightService.applyRotation).toHaveBeenCalledWith(400, 200, 400, 200, 0, 0, 0, 1);
-
-        expect(component.saveSelection.emit).toHaveBeenCalled();
-        expect(component.drawStartX).toBe(-1);
-        expect(component.drawStartY).toBe(-1);
-        expect(component.display).toBe('none');
-        expect(component.width).toBe(0);
-        expect(component.height).toBe(0);
-        expect(component.wholePage).toBe(false);
-    })
-  );
-  });
-});

package/projects/media-viewer/src/lib/annotations/annotation-set/annotation-create/box-highlight-create/box-highlight-create.component.ts

@@ -1,140 +0,0 @@
-import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
-import { v4 as uuid } from 'uuid';
-import { Subscription } from 'rxjs';
-import { Rectangle } from '../../annotation-view/rectangle/rectangle.model';
-import { HighlightCreateService } from '../highlight-create/highlight-create.service';
-import { ToolbarEventService } from '../../../../toolbar/toolbar-event.service';
-import { HtmlTemplatesHelper } from '../../../../shared/util/helpers/html-templates.helper';
-@Component({
-    selector: 'mv-box-highlight-create',
-    templateUrl: './box-highlight-create.component.html',
-    standalone: false
-})
-export class BoxHighlightCreateComponent implements OnInit, OnDestroy {
-
-  @Input() page: number;
-  @Input() pageHeight: number;
-  @Input() pageWidth: number;
-  @Input() rotate: number;
-  @Input() zoom: number;
-  @Input() container: { top: number, left: number };
-
-  @Output() saveSelection = new EventEmitter<{ rectangles: Rectangle[], page: number }>();
-
-  @ViewChild('boxHighlight', { static: false }) highlight: ElementRef;
-
-  drawStartX = -1;
-  drawStartY = -1;
-  top: number;
-  left: number;
-  height: number;
-  width: number;
-  display: string;
-  drawMode: boolean;
-  defaultHeight: string;
-  defaultWidth: string;
-  position: string;
-  backgroundColor = 'none';
-  wholePage: boolean;
-
-  private subscriptions: Subscription[] = [];
-
-  constructor(private readonly toolbarEvents: ToolbarEventService,
-    private readonly highlightService: HighlightCreateService) { }
-
-  ngOnInit(): void {
-    this.subscriptions = [
-      this.toolbarEvents.drawModeSubject.subscribe(drawMode => {
-        this.defaultHeight = drawMode ? '100%' : '0px';
-        this.defaultWidth = drawMode ? '100%' : '0px';
-      }),
-      this.toolbarEvents.redactWholePage.subscribe(() => {
-        this.wholePage = true;
-      })
-    ];
-  }
-
-  ngOnDestroy(): void {
-    this.subscriptions.forEach(subscription => {
-      subscription.unsubscribe();
-    });
-  }
-
-  initHighlight(event: MouseEvent) {
-    if (this.wholePage) {
-      this.highlightPage();
-      return;
-    }
-
-    const rect = HtmlTemplatesHelper.getAdjustedBoundingRect((event.target as HTMLElement)),
-    offsetX = event.clientX - rect.left,
-    offsetY = event.clientY - rect.top;
-    console.log(`initHighlight: rect=${JSON.stringify(rect)}, clientX=${event.clientX}, clientY=${event.clientY}, offsetX=${offsetX}, offsetY=${offsetY}`);
-
-    this.position = 'absolute';
-    this.backgroundColor = 'yellow';
-    this.drawStartX = offsetX;
-    this.drawStartY = offsetY;
-
-    this.display = 'block';
-    this.height = 50;
-    this.width = 50;
-    this.top = this.drawStartY;
-    this.left = this.drawStartX;
-
-    switch (this.rotate) {
-      case 90:
-        this.top = this.drawStartY - this.height;
-        break;
-      case 180:
-        this.top = this.drawStartY - this.height;
-        this.left = this.drawStartX - this.width;
-        break;
-      case 270:
-        this.left = this.drawStartX - this.width;
-        break;
-    }
-  }
-
-  updateHighlight(event: MouseEvent) {
-    const rect = HtmlTemplatesHelper.getAdjustedBoundingRect(event.target as HTMLElement, false),
-      offsetX = event.clientX - rect.left,
-      offsetY = event.clientY - rect.top;
-    if (this.drawStartX > 0 && this.drawStartY > 0) {
-      this.height = Math.abs(offsetY - this.drawStartY);
-      this.width = Math.abs(offsetX - this.drawStartX);
-      this.top = Math.min(offsetY, this.drawStartY);
-      this.left = Math.min(offsetX, this.drawStartX);
-    }
-  }
-
-  createHighlight() {
-    if (this.height / this.zoom > 5 || this.width / this.zoom > 5) {
-      let rectangle = this.highlightService
-        .applyRotation(this.pageHeight, this.pageWidth, this.height, this.width, this.top, this.left, this.rotate, this.zoom);
-      rectangle = { id: uuid(), ...rectangle } as any;
-      console.log(`createHighlight: rectangle=${JSON.stringify(rectangle)}`);
-      this.saveSelection.emit({ rectangles: [rectangle], page: this.page });
-      this.resetHighlight();
-    }
-  }
-
-  private resetHighlight() {
-    this.drawStartX = -1;
-    this.drawStartY = -1;
-    this.display = 'none';
-    this.width = 0;
-    this.height = 0;
-    this.backgroundColor = 'none';
-    this.position = 'initial';
-    this.wholePage = false;
-  }
-
-  private highlightPage() {
-    this.height = this.pageHeight;
-    this.width = this.pageWidth;
-    this.top = 0;
-    this.left = 0;
-    this.createHighlight();
-  }
-}