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

package/e2e/src/step_definitions/multimedia.ts

@@ -0,0 +1,30 @@
+import {browser} from 'protractor';
+import {Then, When} from 'cucumber';
+import {MultimediaPage} from '../pages/multimedia.po';
+import {GenericMethods} from '../utils/genericMethods';
+
+const genericMethods = new GenericMethods();
+const multimediaPage = new MultimediaPage();
+
+When('I select the multimedia option', async () => {
+  await multimediaPage.clickMultimedia();
+  await genericMethods.sleep(5000);
+});
+
+When('I click {string} option', async (text: string) => {
+  await multimediaPage.clickPlayButton();
+});
+
+Then('I should see {string} in play mode', async function (text: string)  {
+  await genericMethods.sleep(5000);
+  const screenshots = await browser.takeScreenshot();
+  this.attach(screenshots, 'image/png');
+});
+
+Then('I should see {string} in {string} mode', async function (text: string, text1: string) {
+  await genericMethods.sleep(5000);
+  await multimediaPage.clickPlayButton();
+  await genericMethods.sleep(5000);
+  const screenshots = await browser.takeScreenshot();
+  this.attach(screenshots, 'image/png');
+});

package/e2e/src/step_definitions/redact.ts

@@ -0,0 +1,81 @@
+import {Given, Then, When} from 'cucumber';
+import {RedactPage} from '../pages/redact.po';
+import {GenericMethods} from '../utils/genericMethods';
+import * as mediaviewer from './media-viewer';
+
+const genericMethods = new GenericMethods();
+const redactPage: RedactPage = new RedactPage();
+
+When('I click on the Redact button', async () => {
+  await redactPage.clickMoreOptionsButton();
+  await genericMethods.sleep(5000);
+  await redactPage.clickRedact();
+});
+
+Then('I can remove the redaction', async function () {
+  await redactPage.removeRedactionMethod();
+});
+
+When('I can ensure the area has been redacted', async function () {
+  await redactPage.visibleRedaction();
+});
+
+Then('I can ensure the redaction has been removed', async function () {
+  await genericMethods.sleep(5000);
+  await redactPage.visibleRedaction();
+});
+
+
+Given('I click on redact text', async function () {
+  await redactPage.clickText();
+});
+
+Given('I click on draw a box', async function () {
+  await redactPage.clickBox();
+});
+
+Given('that I have change the document to a dm-store document and', async function () {
+  await redactPage.changeToDocStoreDoc();
+});
+
+Given('that I have created both a text and box redaction', async function () {
+  await redactPage.clickBox();
+  await mediaviewer.drawOnPdf(950, 950);
+  await genericMethods.sleep(500);
+  await redactPage.visibleRedaction();
+
+  await redactPage.clickText();
+  await mediaviewer.highLightTextInPdf();
+  await genericMethods.sleep(500);
+  await redactPage.visibleRedaction();
+});
+
+Given('that I have created a box redaction', mediaviewer.highLightOnImage);
+
+
+When('I clear all the redactions using the clear all button', async function () {
+  await redactPage.clearAll();
+});
+
+Then('all the redactions should be cleared', async function () {
+  await genericMethods.sleep(2000);
+  await redactPage.checkAllRedactionsCleared();
+  await genericMethods.sleep(1000);
+});
+
+Then('I preview the document with the redactions', async function () {
+  await redactPage.preview();
+});
+
+Then('I ensure the preview is correct', async function () {
+  await redactPage.checkPreview();
+  await genericMethods.sleep(1000);
+});
+
+Then('I switch back from the preview view', async function () {
+  await redactPage.preview();
+});
+
+When('I save the document with the redactions', async function () {
+  await redactPage.save();
+});

package/e2e/src/step_definitions/timeout.ts

@@ -0,0 +1,2 @@
+const {setDefaultTimeout} = require('cucumber');
+setDefaultTimeout(240 *  1000);

package/e2e/src/utils/genericMethods.ts

@@ -0,0 +1,39 @@
+import {browser, by, element} from 'protractor';
+
+export class GenericMethods {
+
+  async sleep(time: number) {
+    await browser.sleep(time);
+  }
+
+  async switchToParentWindow() {
+    browser.getAllWindowHandles().then(async function (handles: string[]) {
+      const tabs = await browser.getAllWindowHandles();
+      await expect(tabs.length).toEqual(2);
+      await browser.driver.switchTo().window(handles[1]);
+      await browser.driver.close();
+      await browser.driver.switchTo().window(handles[0]);
+    });
+  }
+
+  async scrollDown() {
+    await browser.executeScript('window.scrollTo(0,10000);').then(async function () {
+      console.log('SCROLLED Down');
+    });
+  }
+
+  async scrollUp() {
+    await browser.executeScript('window.scrollTo(0,0);').then(async function () {
+      console.log('SCROLLED UP...');
+    });
+  }
+
+  async clickAction(key: string) {
+    const elementsList = element.all(by.id(key)).filter(function (elm) {
+      return elm.isDisplayed().then(function (isDisplayed) {
+        return isDisplayed;
+      });
+    }).last();
+    elementsList.click();
+  }
+}

package/e2e/supportedBrowsers.js

@@ -0,0 +1,78 @@
+const LATEST_MAC = 'macOS 10.15';
+const LATEST_WINDOWS = 'Windows 10';
+
+module.exports = {
+  multiCapabilities: [
+    {
+      browserName: 'chrome',
+      version: 'latest',
+      platform: LATEST_MAC,
+      screenResolution: '1600x1200',
+      name: 'Media Viewer Tests:Mac Chrome',
+      tunnelIdentifier: process.env.TUNNEL_IDENTIFIER || 'reformtunnel',
+      extendedDebugging: true,
+      capturePerformance: true,
+      sharedTestFiles: true,
+      maxInstances: 1
+    },
+    // {
+    //   browserName: 'firefox',
+    //   version: 'latest',
+    //   platform: LATEST_MAC,
+    //   name: 'Media Viewer Tests:Mac Firefox',
+    //   tunnelIdentifier: process.env.TUNNEL_IDENTIFIER || 'reformtunnel',
+    //   extendedDebugging: true,
+    //   capturePerformance: true,
+    //   sharedTestFiles: false,
+    //   maxInstances: 1
+    // },
+    {
+      browserName: 'chrome',
+      version: 'latest',
+      platform: LATEST_WINDOWS,
+      screenResolution: '1600x1200',
+      name: 'Media Viewer Tests:Windows Chrome',
+      tunnelIdentifier: process.env.TUNNEL_IDENTIFIER || 'reformtunnel',
+      extendedDebugging: true,
+      capturePerformance: true,
+      sharedTestFiles: false,
+      maxInstances: 1
+    },
+    {
+      browserName: 'firefox',
+      version: 'latest',
+      platform: LATEST_WINDOWS,
+      screenResolution: '1600x1200',
+      name: 'Media Viewer Tests:Windows Firefox',
+      tunnelIdentifier: process.env.TUNNEL_IDENTIFIER || 'reformtunnel',
+      extendedDebugging: true,
+      capturePerformance: true,
+      sharedTestFiles: false,
+      maxInstances: 1
+    },
+    {
+      browserName: 'safari',
+      platform: LATEST_MAC,
+      version: 'latest',
+      name: 'Media Viewer Tests:Mac Safari',
+      tunnelIdentifier: process.env.TUNNEL_IDENTIFIER || 'reformtunnel',
+      seleniumVersion: '3.141.59',
+      screenResolution: '1400x1050',
+      extendedDebugging: true,
+      capturePerformance: true,
+      sharedTestFiles: false,
+      maxInstances: 1,
+    },
+    // {
+    //   browserName: 'MicrosoftEdge',
+    //   version: 'latest',
+    //   platform: LATEST_WINDOWS,
+    //   name: 'Media Viewer Tests Windows Edge',
+    //   tunnelIdentifier: process.env.TUNNEL_IDENTIFIER || 'reformtunnel',
+    //   extendedDebugging: true,
+    //   capturePerformance: true,
+    //   sharedTestFiles: false,
+    //   maxInstances: 1
+    // },
+  ],
+};

package/e2e/tsconfig.e2e.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "module": "commonjs",
+    "target": "es2020",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node",
+      "cucumber"
+    ]
+  }
+}

package/karma.conf.js

@@ -0,0 +1,40 @@
+// 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: {
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage'),
+      subdir: '.',
+      reporters: [
+        { type: 'html', subdir: 'html-report' },
+        { type: 'lcov', subdir: 'lcov-report' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['ChromeHeadless'],
+    singleRun: true,
+    restartOnFileChange: true
+  });
+};

package/package.json

@@ -1,52 +1,216 @@
 {
   "name": "@hmcts/media-viewer",
-  "version": "4.2.0",
-  "description": "Media Viewer",
-  "keywords": [
-    "Angular",
-    "PDF",
-    "Annotation"
-  ],
-  "homepage": "https://github.com/hmcts/rpa-annotation-ui-demo",
-  "license": "SEE LICENSE IN LICENSE",
+  "version": "4.2.4-exui-3994-f",
   "repository": {
     "type": "git",
-    "url": "https://github.com/hmcts/media-viewer"
+    "url": "https://github.com/hmcts/em-media-viewer"
   },
-  "publishConfig": {
-    "access": "public"
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "makefile": "yarn package && yarn start:ng;",
+    "start:ng": "ng serve --proxy-config proxy.config.js",
+    "start:api": "node ./dist/api/server.js",
+    "setup": "yarn setup:api && yarn setup:demo",
+    "setup:api": "cross-env NODE_PATH=. rm -rf ./dist/api && tsc -p ./api --outDir dist/api",
+    "setup:demo": "yarn build && yarn copy:demo-files",
+    "package": "yarn build:lib && yarn copy:lib-files && yarn npm-pack",
+    "package:local": "rm -rf ./dist/media-viewer && yarn build:lib && yarn copy:lib-files && yarn npm-pack && cd ./dist/media-viewer && yarn install --no-immutable",
+    "build": "yarn build:lib && yarn build:demo",
+    "build:lib": "cd projects/media-viewer && yarn install && ng build --configuration production",
+    "build:demo": "ng build media-viewer-demo-app --configuration production",
+    "copy:lib-files": "yarn copy:lib-js-dependencies && yarn copy:lib-assets && yarn copy:docs",
+    "copy:demo-files": "yarn copy:demo-js-dependencies && yarn copy:demo-assets",
+    "copy:lib-js-dependencies": "cross-env NODE_PATH=. rsync -r projects/media-viewer/node_modules/pdfjs-dist/build dist/media-viewer/assets",
+    "copy:demo-js-dependencies": "cross-env NODE_PATH=. rsync -r projects/media-viewer/node_modules/pdfjs-dist/build dist/demo-app/assets",
+    "copy:lib-assets": "cross-env NODE_PATH=. rsync -r projects/media-viewer/src/assets/* dist/media-viewer/assets/",
+    "copy:demo-assets": "cross-env NODE_PATH=. rsync -r projects/media-viewer/src/assets/* dist/demo-app/assets/",
+    "copy:docs": "yarn copy:readme && yarn copy:licence",
+    "copy:licence": "cross-env NODE_PATH=. cp ./README.md dist/media-viewer",
+    "copy:readme": "cross-env NODE_PATH=. cp ./LICENCE dist/media-viewer",
+    "publish:dist": "yarn package && cd dist/media-viewer && yarn install --no-immutable && yarn npm publish",
+    "npm-pack": "cd dist/media-viewer && touch yarn.lock && yarn pack",
+    "test": "cd projects/media-viewer; ng test",
+    "test:coverage": "echo test:coverage",
+    "test:a11y": "echo test:a11y",
+    "test:smoke": "NODE_PATH=. node ./node_modules/codeceptjs/bin/codecept.js run -c ./test/end-to-end/codecept.smoke.conf.js --grep @smoke --steps --reporter mocha-multi",
+    "test:fullfunctional": "yarn e2e:fullfunctional",
+    "test:functional": "yarn e2e:fullfunctional",
+    "test:crossbrowser_PT": "protractor e2e/saucelabs.conf.js",
+    "test:coveralls-upload": "cross-env NODE_PATH=. cat ./reports/tests/coverage/ng/lcov.info | coveralls",
+    "test:codecov-upload": "codecov -f ./reports/tests/coverage/ng/lcov.info",
+    "test:pa11y": "pa11y-ci",
+    "lint": "ng lint",
+    "clean": "rimraf reports",
+    "stub:annotations": "node api/annotation-stubs.js &",
+    "webdriver:update": "webdriver-manager update --versions.chrome 2.44",
+    "e2e": "protractor --webdriverUpdate=false",
+    "e2e:local": "yarn webdriver:update && protractor e2e/local.protractor.conf.js",
+    "e2e:fullfunctional_PT": "yarn webdriver:update && protractor e2e/ci.protractor.conf.js",
+    "e2e:fullfunctional": "NODE_PATH=. node ./node_modules/codeceptjs/bin/codecept.js run -c ./test/end-to-end/ --grep @ci --steps --reporter mocha-multi",
+    "sonar-scan": "node_modules/sonar-scanner/bin/sonar-scanner",
+    "rebuild-node-sass": "yarn add node-sass@^4.14.1",
+    "test:crossbrowser": "NODE_PATH=. codeceptjs run-multiple ${BROWSER_GROUP:-'--all'} -c test/end-to-end/saucelabs.conf.js --plugins retryFailedStep --steps --grep '@xb' --reporter mocha-multi"
   },
   "dependencies": {
-    "@swimlane/ngx-datatable": "^20.0.0",
-    "mutable-div": "^2.0.0",
-    "pdfjs-dist": "^4.10.38",
-    "socket.io-client": "^4.8.0",
-    "tslib": "^2.3.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-eslint/utils": "20.3.0",
+    "@angular/animations": "20",
+    "@angular/cdk": "^17.3.8",
+    "@angular/common": "20",
+    "@angular/compiler": "20",
+    "@angular/core": "20",
+    "@angular/forms": "20",
     "@angular/material": "^17.3.8",
-    "@angular/platform-browser": "^20.0.0",
+    "@angular/platform-browser": "20",
+    "@angular/platform-browser-dynamic": "20",
+    "@angular/platform-server": "20",
+    "@angular/router": "20",
+    "@angular/ssr": "20",
+    "@hmcts/nodejs-healthcheck": "^1.8.5",
+    "@hmcts/nodejs-logging": "4.0.4",
+    "@hmcts/properties-volume": "^1.1.0",
     "@ngrx/effects": "^20",
     "@ngrx/router-store": "^20",
     "@ngrx/store": "^20",
-    "@ngrx/store-devtools": "^20"
+    "@ngrx/store-devtools": "^20",
+    "@swimlane/ngx-datatable": "^20.0.0",
+    "axios": "^1.12.0",
+    "body-parser": "^1.20.3",
+    "config": "^3.3.9",
+    "core-js": "^2.6.5",
+    "glob": "^11.1.0",
+    "govuk-frontend": "^4.9.0",
+    "ini": "4.1.3",
+    "moment-timezone": "^0.5.28",
+    "mutable-div": "2.0.0",
+    "ngx-chips": "3.0.0",
+    "nodemon": "^3.1.0",
+    "nunjucks": "^3.2.4",
+    "otp": "^0.1.3",
+    "pdfjs-dist": "^4.10.38",
+    "require-directory": "2.1.1",
+    "rpx-xui-translation": "1.1.2-CME-780-9",
+    "rxjs": "^7.8.1",
+    "sass": "^1.64.1",
+    "scss-bundle": "~3.1.2",
+    "session-file-store": "^1.2.0",
+    "socket.io-client": "^4.8.0",
+    "uuid": "^11.0.3",
+    "ws": "^7.5.10",
+    "xmlhttprequest-ssl": "^1.6.2",
+    "zone.js": "0.14.10"
+  },
+  "resolutions": {
+    "glob-parent": "^6.0.0",
+    "hosted-git-info": "^7.0.0",
+    "ini": "4.1.3",
+    "minimist": "^1.2.3",
+    "npm-registry-fetch": "^10.1.1",
+    "serialize-javascript": "^5.0.1",
+    "ssri": "^8.0.1",
+    "trim-newlines": "^4.0.1",
+    "ws": "^7.5.10",
+    "xmlhttprequest-ssl": "^1.6.2",
+    "@xmldom/xmldom": "^0.9.0",
+    "yargs-parser": "^20.2.7",
+    "lodash": "^4.17.21",
+    "xml2j": "^0.5.0",
+    "axios": "^1.12.0",
+    "got": "^14.0.0",
+    "body-parser": "^1.20.3",
+    "cross-spawn": "^7.0.6",
+    "nanoid": "^3.3.11",
+    "formidable": "^3.5.3",
+    "form-data@^4.0.0": "4.0.4",
+    "form-data@~2.3.2": "2.5.5",
+    "form-data@^2.5.0": "2.5.5",
+    "brace-expansion@^1.1.7": "1.1.12",
+    "brace-expansion@^2.0.1": "2.0.2",
+    "tmp": "0.2.5",
+    "jws": "^4.0.1"
   },
-  "packageManager": "yarn@4.5.0",
-  "module": "fesm2022/hmcts-media-viewer.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/hmcts-media-viewer.mjs"
-    }
+  "devDependencies": {
+    "@angular-devkit/build-angular": "20",
+    "@angular-devkit/core": "20",
+    "@angular-eslint/builder": "20.3.0",
+    "@angular-eslint/eslint-plugin": "20.3.0",
+    "@angular-eslint/eslint-plugin-template": "20.3.0",
+    "@angular-eslint/schematics": "20.3.0",
+    "@angular-eslint/template-parser": "20.3.0",
+    "@angular/cli": "20",
+    "@angular/compiler-cli": "20",
+    "@angular/language-service": "^19.2.15",
+    "@ngrx/schematics": "^20",
+    "@types/chai": "4.3.20",
+    "@types/chai-as-promised": "^7.1.3",
+    "@types/cucumber": "^6",
+    "@types/jasmine": "~5.1.0",
+    "@types/jasminewd2": "^2.0.8",
+    "@types/lodash": "4.17.10",
+    "@types/mocha": "^8.2.1",
+    "@types/node": "^18.19.33",
+    "@typescript-eslint/eslint-plugin": "7.16.0",
+    "@typescript-eslint/parser": "7.16.0",
+    "chai": "^4.3.0",
+    "chai-as-promised": "^7.1.1",
+    "chai-http": "^5.0.0",
+    "circular-dependency-plugin": "^5.0.2",
+    "codeceptjs": "3.6.7",
+    "codecov": "^3.7.1",
+    "codelyzer": "^6.0.0",
+    "coveralls": "^3.0.3",
+    "cross-env": "^7.0.3",
+    "cucumber": "^6",
+    "cucumber-html-report": "0.6.5",
+    "cucumber-html-reporter": "^4.0.5",
+    "cucumber-pretty": "1.5.2",
+    "cucumberjs-allure-reporter": "1.0.3",
+    "eslint": "^8.57.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.19.1",
+    "eslint-plugin-n": "^17.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-standard": "^5.0.0",
+    "jasmine": "^5.0.0",
+    "jasmine-core": "~5.2.0",
+    "jasmine-marbles": "^0.9.1",
+    "jasmine-reporters": "^2.3.2",
+    "jasmine-spec-reporter": "~7.0.0",
+    "karma": "^6.4.2",
+    "karma-chrome-launcher": "3.2.0",
+    "karma-coverage": "^2.2.1",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^2.0.0",
+    "karma-phantomjs-launcher": "^1.0.4",
+    "mocha": "9.2.2",
+    "mocha-jenkins-reporter": "0.4.8",
+    "mocha-junit-reporter": "2.2.1",
+    "mocha-multi": "1.1.7",
+    "mochawesome": "7.1.3",
+    "ng-packagr": "20",
+    "ngrx-store-freeze": "^0.2.4",
+    "nock": "13.5.5",
+    "nsp": "3.2.1",
+    "pa11y-ci": "^2.4.0",
+    "protractor": "^7.0.0",
+    "protractor-cucumber-framework": "^6.1.1",
+    "protractor-multiple-cucumber-html-reporter-plugin": "1.8.1",
+    "proxyquire": "2.1.3",
+    "puppeteer": "^22.0.0",
+    "selenium-standalone": "8.3.0",
+    "sonar-scanner": "^3.1.0",
+    "totp-generator": "^0.0.14",
+    "ts-node": "^8.1.0",
+    "tsickle": "^0.46.0",
+    "tslib": "^2.0.0",
+    "tslint": "^6.1.3",
+    "typescript": "5.8.2",
+    "typescript-string-operations": "^1.3.1",
+    "watch": "1.0.2",
+    "webdriver-manager": "^12.1.7",
+    "webdriverio": "7.36.0",
+    "when": "3.7.8",
+    "yarn-audit-fix": "^10.0.7"
   },
-  "sideEffects": false
-}
+  "packageManager": "yarn@4.5.0"
+}

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

@@ -0,0 +1,46 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*",
+    "node_modules/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "projects/media-viewer/tsconfig.lib.json",
+          "projects/media-viewer/tsconfig.spec.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "mv",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "mv",
+            "style": "kebab-case"
+          }
+        ],
+        "@typescript-eslint/no-require-imports": "off"
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {}
+    }
+  ]
+}