@ministryofjustice/hmpps-connect-dps-shared-items 5.1.0 → 5.2.0

package/dist/assets/dps/components/webcam-capture/index.ts

@@ -0,0 +1,165 @@
+function hmppsWebcamCapture(component: HTMLElement): Promise<void> {
+  const video = document.getElementById('hmpps-webcam__webcam') as HTMLVideoElement
+  const captureBtn = document.getElementById('hmpps-webcam__captureImageButton') as HTMLButtonElement
+  const clearImageBtn = document.getElementById('hmpps-webcam__clearImageButton') as HTMLButtonElement
+  const snapshot = document.getElementById('hmpps-webcam__snapshot') as HTMLImageElement
+  const webcamImageFileInput = document.getElementById('hmpps-webcam__webcam-image-input') as HTMLInputElement
+  const webcamSelect = document.getElementById('hmpps-webcam__select-webcam') as HTMLSelectElement
+  const webcamSelectFormGroup = document.getElementById('hmpps-webcam__webcam-select-form-group') as HTMLDivElement
+  const webcamSubmit = document.getElementById('hmpps-webcam__webcam-submit') as HTMLButtonElement
+  const webcamPlaceholder = document.getElementById('hmpps-webcam__webcam-placeholder') as HTMLDivElement
+  const fileName = component.dataset.fileName ?? 'webcam-capture'
+  const enableReporting = component.dataset.reportErrors === 'true'
+
+  // Permissions
+  const permissionRequested = document.getElementById('hmpps-webcam__permission-requested') as HTMLParagraphElement
+  const permissionGranted = document.getElementById('hmpps-webcam__permission-granted') as HTMLDivElement
+
+  // Preview elements
+  const photoPreviewContainer = document.getElementById('hmpps-webcam__photo-preview-container') as HTMLDivElement
+  const photoCaptureContainer = document.getElementById('hmpps-webcam__photo-capture-container') as HTMLDivElement
+  const photoCaptureErrorContainer = document.getElementById(
+    'hmpps-webcam__photo-capture-container__error',
+  ) as HTMLDivElement
+
+  const mimetype = 'image/jpeg'
+
+  let stream: MediaStream | null = null
+
+  function updateWebcamList(activeDeviceId: string): void {
+    webcamSelect.querySelectorAll('option').forEach(option => {
+      if (option.value === activeDeviceId && option.label.indexOf('- Active') === -1) {
+        // eslint-disable-next-line no-param-reassign
+        option.label = `${option.label} - Active`
+      } else if (option.value !== activeDeviceId && option.label.indexOf('- Active') > -1) {
+        // eslint-disable-next-line no-param-reassign
+        option.label = option.label.replace(' - Active', '')
+      }
+    })
+  }
+
+  async function getWebcamList(): Promise<void> {
+    // get camera permissions
+    try {
+      permissionRequested.style.display = 'block'
+      await navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+
+      navigator.mediaDevices.enumerateDevices().then(devices => {
+        const videoDevices = devices.filter(device => device.kind === 'videoinput')
+
+        videoDevices.forEach((device, index) => {
+          const option = document.createElement('option')
+          option.value = device.deviceId
+          option.text = device.label || `Camera ${index + 1}`
+          webcamSelect.appendChild(option)
+        })
+
+        if (videoDevices.length < 2) {
+          webcamSelectFormGroup.style.display = 'none'
+        }
+
+        if (videoDevices.length > 0) {
+          startWebcam(videoDevices[0].deviceId)
+        }
+      })
+    } catch (e) {
+      photoCaptureContainer.style.display = 'none'
+      photoCaptureErrorContainer.style.display = 'block'
+      if (enableReporting) {
+        // @ts-expect-error error type is not known
+        const error = 'name' in e ? e.name : e.message
+        // eslint-disable-next-line no-restricted-globals
+        await fetch(`/api/report-error?pageUrl=${encodeURIComponent(location.href)}&error=${error}`, {
+          method: 'GET',
+        })
+      }
+    }
+  }
+
+  function stopWebcam(): void {
+    if (stream) {
+      stream.getTracks().forEach(track => track.stop())
+    }
+  }
+
+  async function startWebcam(deviceId: string): Promise<void> {
+    try {
+      stopWebcam()
+      stream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          deviceId: { exact: deviceId },
+        },
+      })
+      video.srcObject = stream
+      permissionRequested.style.display = 'none'
+      permissionGranted.style.display = 'block'
+      webcamPlaceholder.style.display = 'none'
+      video.style.display = 'block'
+      captureBtn.disabled = false
+      updateWebcamList(deviceId)
+    } catch (error) {
+      permissionRequested.style.display = 'none'
+      photoCaptureContainer.style.display = 'none'
+      photoCaptureErrorContainer.style.display = 'block'
+      // eslint-disable-next-line no-console
+      console.error('Webcam error:', error)
+    }
+  }
+
+  webcamSelect.addEventListener('change', (): void => {
+    startWebcam(webcamSelect.value)
+  })
+
+  clearImageBtn.addEventListener('click', (): void => {
+    snapshot.src = ''
+
+    photoPreviewContainer.style.display = 'none'
+    photoCaptureContainer.style.display = 'block'
+    webcamSubmit.disabled = true
+  })
+
+  captureBtn.addEventListener('click', (): void => {
+    const canvas = document.createElement('canvas')
+    canvas.width = video.videoWidth
+    canvas.height = video.videoHeight
+    const ctx = canvas.getContext('2d')!
+
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
+
+    snapshot.src = canvas.toDataURL(mimetype)
+
+    canvas.toBlob(
+      blob => {
+        if (!blob) return
+
+        const file = new File([blob], `${fileName}.jpg`, { type: mimetype })
+
+        const dataTransfer = new DataTransfer()
+        dataTransfer.items.add(file)
+        webcamImageFileInput.files = dataTransfer.files
+      },
+      mimetype,
+      0.92,
+    )
+
+    photoPreviewContainer.style.display = 'block'
+    photoCaptureContainer.style.display = 'none'
+    webcamSubmit.disabled = false
+  })
+
+  function pageInit(): Promise<void> {
+    photoPreviewContainer.style.display = 'none'
+    photoCaptureContainer.style.display = 'block'
+    return getWebcamList()
+  }
+
+  return pageInit()
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export function init(): void {
+  const webcamContainer = document.getElementById('hmpps-webcam-capture-component')
+  if (webcamContainer) {
+    hmppsWebcamCapture(webcamContainer)
+  }
+}

package/dist/assets/js/all.d.ts

@@ -0,0 +1 @@
+export declare function initAll(): void;

package/dist/assets/js/all.ts

@@ -0,0 +1,10 @@
+import * as addressAutosuggest from '../dps/components/address-autosuggest'
+import { Modal } from '../dps/components/modal'
+import * as webcamCapture from '../dps/components/webcam-capture'
+
+// eslint-disable-next-line import/prefer-default-export
+export function initAll() {
+  addressAutosuggest.init()
+  Modal.init()
+  webcamCapture.init()
+}

package/dist/assets/scss/all.css

@@ -4,11 +4,33 @@
     border: 3px solid;
     padding: 5px 10px;
     height: initial;
-    font-size: 16px;
     text-align: center;
     line-height: 1;
     user-select: none;
     border-radius: 5px;
+    font-family: "GDS Transport", arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  /*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */ /* stylelint-disable-line scss/comment-no-loud  */
+  @font-face {
+    font-family: "GDS Transport";
+    font-style: normal;
+    font-weight: normal;
+    font-display: fallback;
+    src: url("/assets/fonts/light-94a07e06a1-v2.woff2") format("woff2"), url("/assets/fonts/light-f591b13f7d-v2.woff") format("woff");
+  }
+  @font-face {
+    font-family: "GDS Transport";
+    font-style: normal;
+    font-weight: bold;
+    font-display: fallback;
+    src: url("/assets/fonts/bold-b542beb274-v2.woff2") format("woff2"), url("/assets/fonts/bold-affa96571d-v2.woff") format("woff");
+  }
+  .dps-alert-status {
+    font-weight: 400;
+    font-size: 1rem;
+    line-height: 1.25;
   }
 }
 @media print {
@@ -497,6 +519,9 @@ a.dps-alert-status--visor:focus {
   position: relative;
   max-width: 630px;
 }
+.hmpps-address-autosuggest .hmpps-display-none {
+  display: none;
+}
 .hmpps-address-autosuggest .govuk-form-group {
   margin-bottom: 10px;
 }
@@ -517,6 +542,25 @@ a.dps-alert-status--visor:focus {
   background: #f3f3f3;
   border-bottom: 1px solid var(--govuk-border-colour, #cecece);
   padding: 0.25rem 0.5rem;
+  font-family: "GDS Transport", arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+@media print {
+  .hmpps-address-autosuggest__results-title {
+    font-family: sans-serif;
+  }
+}
+.hmpps-address-autosuggest__results-title {
+  font-weight: 400;
+  font-size: 1.1875rem;
+  line-height: 1.3157894737;
+}
+@media print {
+  .hmpps-address-autosuggest__results-title {
+    font-size: 14pt;
+    line-height: 1.15;
+  }
 }
 .hmpps-address-autosuggest__listbox {
   background: #ffffff;
@@ -527,6 +571,27 @@ a.dps-alert-status--visor:focus {
 .hmpps-address-autosuggest__listbox:focus {
   outline: none;
 }
+.hmpps-address-autosuggest__listbox {
+  font-family: "GDS Transport", arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+@media print {
+  .hmpps-address-autosuggest__listbox {
+    font-family: sans-serif;
+  }
+}
+.hmpps-address-autosuggest__listbox {
+  font-weight: 400;
+  font-size: 1.1875rem;
+  line-height: 1.3157894737;
+}
+@media print {
+  .hmpps-address-autosuggest__listbox {
+    font-size: 14pt;
+    line-height: 1.15;
+  }
+}
 .hmpps-address-autosuggest__option {
   cursor: pointer;
   margin: 0;
@@ -620,21 +685,6 @@ a.dps-alert-status--visor:focus {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-/*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */ /* stylelint-disable-line scss/comment-no-loud  */
-@font-face {
-  font-family: "GDS Transport";
-  font-style: normal;
-  font-weight: normal;
-  font-display: fallback;
-  src: url("/assets/fonts/light-94a07e06a1-v2.woff2") format("woff2"), url("/assets/fonts/light-f591b13f7d-v2.woff") format("woff");
-}
-@font-face {
-  font-family: "GDS Transport";
-  font-style: normal;
-  font-weight: bold;
-  font-display: fallback;
-  src: url("/assets/fonts/bold-b542beb274-v2.woff2") format("woff2"), url("/assets/fonts/bold-affa96571d-v2.woff") format("woff");
-}
 @media print {
   .hmpps-modal__dialogue-box header h1 {
     font-family: sans-serif;

package/dist/index.d.ts

@@ -19,6 +19,15 @@ interface OsAddress {
     uprn?: number;
 }
 
+/** The JSON payload expected by the Address Autosuggest component when loading suggestions */
+type AddressAutosuggestResponse = {
+    status: number;
+    results: OsAddress[];
+} | {
+    status: number;
+    error: string;
+};
+
 interface OsPlacesQueryResponse {
     header: OsPlacesResponseHeader;
     results: OsPlacesQueryResult[];
@@ -279,4 +288,4 @@ declare const alertFlagLabels: AlertFlagLabel[];
 declare function getAlertFlagLabelsForAlerts(prisonerAlerts: Alert[]): AlertFlagLabel[];
 
 export { AlertType, OsPlacesAddressService, OsPlacesApiClient, alertFlagLabels, getAlertFlagCssClasses, getAlertFlagLabelsForAlerts, getAlertTypeForCode };
-export type { Alert, AlertFlagLabel, AlertsServiceAlert, BasicAlert, ConnectDpsComponentLogger, OsAddress, OsPlacesDeliveryPointAddress, OsPlacesLandPropertyIdentifier, OsPlacesQueryResponse, OsPlacesQueryResult, OsPlacesResponseHeader, PrisonApiAlert };
+export type { AddressAutosuggestResponse, Alert, AlertFlagLabel, AlertsServiceAlert, BasicAlert, ConnectDpsComponentLogger, OsAddress, OsPlacesDeliveryPointAddress, OsPlacesLandPropertyIdentifier, OsPlacesQueryResponse, OsPlacesQueryResult, OsPlacesResponseHeader, PrisonApiAlert };

package/dist/types/public/addressAutosuggest/addressAutosuggestResponse.d.ts

@@ -0,0 +1,9 @@
+import type { OsAddress } from './osAddress';
+/** The JSON payload expected by the Address Autosuggest component when loading suggestions */
+export type AddressAutosuggestResponse = {
+    status: number;
+    results: OsAddress[];
+} | {
+    status: number;
+    error: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ministryofjustice/hmpps-connect-dps-shared-items",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "A package to share Connect DPS functionality across applications",
   "main": "./dist/index.cjs",
   "module": "./dist/index.esm.js",
@@ -26,7 +26,7 @@
     "precommit:lint": "lint-staged",
     "precommit:verify": "npm run typecheck && npm test",
     "setup": "npm ci && hmpps-npm-script-run-allowlist",
-    "start": "node --experimental-strip-types preview/preview.mts"
+    "start": "node --experimental-strip-types preview/server.mts"
   },
   "lint-staged": {
     "*.{ts,css}": [
@@ -67,11 +67,11 @@
     "lint-staged": "^17.2.0",
     "nock": "14.0.17",
     "nunjucks": "3.2.4",
-    "rollup": "4.62.4",
+    "rollup": "4.62.5",
     "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-dts": "6.5.1",
     "rollup-plugin-scss": "4.0.1",
-    "sass": "1.102.0",
+    "sass": "1.103.1",
     "ts-jest": "29.4.12",
     "tslib": "^2.8.1",
     "typescript": "6.0.3"