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

package/src/app/media-viewer-wrapper/media-viewer-wrapper.component.html

@@ -0,0 +1,226 @@
+<div class="media-viewer-wrapper-container">
+  <div class="govuk-width-container">
+    <div class="govuk-grid-row">
+      <a
+        class="govuk-tag govuk-tag--grey"
+        style="cursor: pointer"
+        (click)="toggleHeader()"
+        >Media Viewer Demo</a
+      >
+    </div>
+    <ng-container *ngIf="showHeader">
+      <div class="govuk-grid-row">
+        <app-toolbar-toggles
+          [showToolbar]="showToolbar"
+          [showCustomToolbar]="showCustomToolbar"
+          (toggleAnnotations)="toggleAnnotations($event)"
+          (toggleRedaction)="toggleRedaction($event)"
+          (toggleICP)="toggleICP($event)"
+          (toggleMultimediaPlayer)="toggleMultimediaPlayer($event)"
+          (toggleToolbar)="toggleToolbar($event)"
+          (toggleToolbarBtns)="toggleToolbarBtns($event)"
+          (toggleCustomToolbar)="toggleCustomToolbar($event)"
+          (showCommentSummary)="toggleCustomToolbar($event)"
+          (toggleSearchRedact)="toggleSearchRedact($event)"
+        ></app-toolbar-toggles>
+      </div>
+      <div class="govuk-grid-row">
+        <details class="govuk-details">
+          <summary class="govuk-details__summary">
+            <span class="govuk-details__summary-text"
+              >Change document details</span
+            >
+          </summary>
+          <form #form="ngForm">
+            <div class="govuk-form-group">
+              <fieldset
+                class="govuk-fieldset"
+                role="group"
+                aria-describedby="url-and-type-group"
+              >
+                <div class="govuk-date-input" id="url-and-type">
+                  <div class="govuk-date-input__item">
+                    <div class="govuk-form-group">
+                      <label
+                        class="govuk-label govuk-date-input__label"
+                        for="documentUrl"
+                      >
+                        Url
+                      </label>
+                      <input
+                        class="govuk-input"
+                        id="documentUrl"
+                        name="documentUrl"
+                        type="text"
+                        aria-label="document url"
+                        [ngModel]="url"
+                      />
+                    </div>
+                  </div>
+                  <div class="govuk-date-input__item">
+                    <div class="govuk-form-group">
+                      <label
+                        class="govuk-label govuk-date-input__label"
+                        for="documentType"
+                      >
+                        Content type
+                      </label>
+                      <input
+                        class="govuk-input govuk-input--width-4"
+                        id="documentType"
+                        name="documentType"
+                        type="text"
+                        aria-label="document type"
+                        ngModel
+                        [ngModel]="documentType"
+                      />
+                    </div>
+                  </div>
+                  <div class="govuk-date-input__item">
+                    <div class="govuk-form-group">
+                      <label
+                        class="govuk-label govuk-date-input__label"
+                        for="documentType"
+                      >
+                        Case ID
+                      </label>
+                      <input
+                        class="govuk-input"
+                        id="caseId"
+                        name="caseId"
+                        type="text"
+                        aria-label="case id"
+                        ngModel
+                        [ngModel]="caseId"
+                      />
+                    </div>
+                  </div>
+                  <div class="govuk-date-input__item">
+                    <div class="govuk-form-group">
+                      <button
+                        class="govuk-button"
+                        style="vertical-align: unset"
+                        type="submit"
+                        (click)="setFormData(form.value)"
+                      >
+                        Load document
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </fieldset>
+            </div>
+          </form>
+        </details>
+      </div>
+      <div class="govuk-grid-row">
+        <div
+          *ngIf="mediaLoadStatus && mediaLoadStatus === 'SUCCESS'"
+          class="govuk-panel--confirmation"
+        >
+          <div class="govuk-panel__body">
+            Document load result: <strong>{{ mediaLoadStatus }}</strong>
+          </div>
+        </div>
+        <div
+          *ngIf="
+            mediaLoadStatus &&
+            ['FAILURE', 'UNSUPPORTED'].includes(mediaLoadStatus)
+          "
+          class="govuk-error-summary"
+          aria-labelledby="error-summary-title"
+          role="alert"
+          tabindex="-1"
+          data-module="error-summary"
+        >
+          <div class="govuk-error-summary__body">
+            <ul class="govuk-list govuk-error-summary__list">
+              <li>
+                <a href="#"
+                  >Document load result:
+                  <strong>{{ mediaLoadStatus }}</strong></a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div *ngIf="unsavedChanges" class="hmcts-banner hmcts-banner--warning">
+        <svg class="hmcts-banner__icon" height="25" width="25">
+          <path
+            d="M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z"
+          ></path>
+        </svg>
+        <div class="hmcts-banner__message">
+          <span class="hmcts-banner__assistive">Warning</span>
+          You have unsaved comments. Please save before closing the document.
+        </div>
+      </div>
+      <div class="govuk-grid-row govuk-!-width-two-thirds">
+        <div class="govuk-grid-column-two-thirds">
+          <button
+            class="govuk-button govuk-!-margin-left-2 govuk-!-width-one-quarter"
+            data-module="govuk-button"
+            [ngClass]="{ 'govuk-button--secondary': documentType !== 'pdf' }"
+            id="pdf-button"
+            (click)="setDocumentType('pdf')"
+          >
+            PDF
+          </button>
+          <button
+            class="govuk-button govuk-!-margin-left-2 govuk-!-width-one-third"
+            [ngClass]="{ 'govuk-button--secondary': documentType !== 'image' }"
+            id="image-button"
+            data-module="govuk-button"
+            (click)="setDocumentType('image')"
+          >
+            Image
+          </button>
+          <button
+            class="govuk-button govuk-!-margin-left-2 govuk-!-width-one-third"
+            data-module="govuk-button"
+            id="multimedia-button"
+            [ngClass]="{
+              'govuk-button--secondary': !documentType?.startsWith('mp')
+            }"
+            (click)="setDocumentType('mp4')"
+          >
+            Multimedia
+          </button>
+        </div>
+        <div class="govuk-grid-column-one-third">
+          <button
+            class="govuk-button govuk-!-full-width"
+            data-module="govuk-button"
+            id="unsupported-button"
+            [ngClass]="{ 'govuk-button--secondary': documentType !== null }"
+            (click)="setDocumentType('unsupported')"
+          >
+            Unsupported
+          </button>
+        </div>
+      </div>
+    </ng-container>
+  </div>
+  <app-custom-toolbar
+    *ngIf="showCustomToolbar"
+    [toolbarEvents]="toolbarEvents"
+    [contentType]="documentType"
+  ></app-custom-toolbar>
+  <mv-media-viewer
+    [url]="url"
+    [caseId]="caseId"
+    [downloadFileName]="filename"
+    [contentType]="documentType"
+    [enableAnnotations]="enableAnnotations"
+    [enableRedactions]="enableRedactions"
+    [enableICP]="enableICP"
+    [enableRedactSearch]="enableRedactSearch"
+    [multimediaPlayerEnabled]="enableMultimediaPlayer"
+    [showToolbar]="showToolbar"
+    [toolbarButtonOverrides]="toolbarButtonOverrides"
+    (mediaLoadStatus)="onMediaLoad($event)"
+    (toolbarEventsOutput)="getToolbarFunctions($event)"
+    (unsavedChanges)="onUnsavedChanges($event)"
+  ></mv-media-viewer>
+</div>

package/src/app/media-viewer-wrapper/media-viewer-wrapper.component.ts

@@ -0,0 +1,120 @@
+import { Observable } from 'rxjs';
+import { AfterContentInit, Component, ViewEncapsulation } from '@angular/core';
+import { Comment } from '../../../projects/media-viewer/src/lib/annotations/comment-set/comment/comment.model';
+import { ToolbarEventService } from '../../../projects/media-viewer/src/lib/toolbar/toolbar-event.service';
+
+@Component({
+    selector: 'media-viewer-wrapper',
+    templateUrl: './media-viewer-wrapper.component.html',
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
+})
+export class MediaViewerWrapperComponent implements AfterContentInit {
+
+  pdfUrl = '04666097-eb32-4b2b-9bec-8e9ce8057560';
+  imageUrl = '69fb7313-5338-42c4-b94d-0ceb3b6ed18b';
+  multimediaUrl = 'assets/multimedia/movie.mp4';
+  unsupportedUrl = 'assets/unsupported.txt';
+  filename = 'filename';
+  caseId = 'dummyCaseId';
+
+  documentType = 'pdf';
+  url;
+  comments: Observable<Comment[]>;
+
+  mediaLoadStatus: string;
+  unsavedChanges: boolean;
+
+  showToolbar = true;
+  showCustomToolbar = false;
+  toolbarEvents;
+  enableAnnotations = false;
+  enableRedactions = false;
+  enableICP = false;
+  enableMultimediaPlayer = false;
+  toolbarButtonOverrides: {};
+  showHeader = true;
+  enableRedactSearch = false;
+
+  ngAfterContentInit() {
+    this.setDocumentType(this.documentType);
+  }
+
+  setDocumentType(newTab: string) {
+    this.documentType = newTab;
+    if (newTab === 'pdf') {
+      this.setDocumentUrl(this.pdfUrl);
+    } else if (newTab === 'image') {
+      this.setDocumentUrl(this.imageUrl);
+    } else if (newTab.startsWith('mp')) {
+      this.setDocumentUrl(this.multimediaUrl);
+    } else {
+      this.setDocumentUrl(this.unsupportedUrl);
+    }
+  }
+
+  setDocumentUrl(newUrl: string) {
+    this.url = newUrl;
+  }
+
+  setFormData({ documentType, documentUrl, caseId }) {
+    this.documentType = documentType;
+    this.url = documentUrl;
+    this.caseId = caseId;
+  }
+
+  toggleToolbar(showToolbar: boolean) {
+    this.showToolbar = showToolbar;
+    if (showToolbar) {
+      this.showCustomToolbar = false;
+    }
+  }
+
+  toggleCustomToolbar(showCustomToolbar: boolean) {
+    this.showCustomToolbar = showCustomToolbar;
+    if (showCustomToolbar) {
+      this.showToolbar = false;
+    }
+  }
+
+  toggleAnnotations(showAnnotations: boolean) {
+    this.enableAnnotations = showAnnotations;
+  }
+
+  toggleRedaction(showRedaction: boolean) {
+    this.enableRedactions = showRedaction;
+  }
+
+  toggleICP(showICP: boolean) {
+    this.enableICP = showICP;
+  }
+
+  toggleMultimediaPlayer(showMultimediaPlayer: boolean) {
+    this.enableMultimediaPlayer = showMultimediaPlayer;
+  }
+
+  onMediaLoad(loadStatus: ResponseType) {
+    this.mediaLoadStatus = loadStatus;
+    setTimeout(() => this.mediaLoadStatus = undefined, 2000);
+  }
+
+  onUnsavedChanges(changes: boolean) {
+    this.unsavedChanges = changes;
+  }
+
+  toggleToolbarBtns(toolbarButtonOverrides: any) {
+    this.toolbarButtonOverrides = { ...toolbarButtonOverrides };
+  }
+
+  getToolbarFunctions(toolbarEvent: ToolbarEventService) {
+    this.toolbarEvents = toolbarEvent;
+  }
+
+  toggleHeader() {
+    this.showHeader = !this.showHeader;
+  }
+
+  toggleSearchRedact(showRedactSearch: boolean) {
+    this.enableRedactSearch = showRedactSearch;
+  }
+}

package/src/app/media-viewer-wrapper/toolbar-toggles/toggle/toggle.component.html

@@ -0,0 +1,13 @@
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-full">
+    <span class="govuk-!-font-weight-bold">{{ label | titlecase }}</span>
+  </div>
+  <div class="govuk-grid-column-full">
+    <label [for]="label+'-btn-toggle'" class="switch govuk-!-margin-right-2 mv-tooltip" [attr.data-tooltip]="'Toggle ' + label">
+      <span class="visuallyHidden">Toggle {{ label }}</span>
+      <input type="checkbox" [id]="label+'-btn-toggle'"
+             (change)="toggleButtonOverrides.emit($event.target.checked)">
+      <span class="slider round"></span>
+    </label>
+  </div>
+</div>

package/src/app/media-viewer-wrapper/toolbar-toggles/toggle/toggle.component.ts

@@ -0,0 +1,12 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+    selector: 'app-toggle',
+    templateUrl: './toggle.component.html',
+    styleUrls: ['../toolbar-toggles.component.scss'],
+    standalone: false
+})
+export class ToggleComponent {
+  @Input() label: string;
+  @Output() toggleButtonOverrides = new EventEmitter();
+}

package/src/app/media-viewer-wrapper/toolbar-toggles/toolbar-toggles.component.html

@@ -0,0 +1,151 @@
+<table style="float: right; margin-top: 15px">
+  <tr>
+    <ng-container *ngIf="toggleToolbar.getValue()">
+      <td>
+        <app-toggle
+          [label]="'search'"
+          (toggleButtonOverrides)="
+            toggleButtonOverrides('showSearchBar', $event)
+          "
+        ></app-toggle>
+      </td>
+      <td>
+        <app-toggle
+          [label]="'navigate'"
+          (toggleButtonOverrides)="
+            toggleButtonOverrides('showNavigation', $event)
+          "
+        ></app-toggle>
+      </td>
+      <td>
+        <app-toggle
+          [label]="'rotate'"
+          (toggleButtonOverrides)="toggleButtonOverrides('showRotate', $event)"
+        ></app-toggle>
+      </td>
+      <td>
+        <app-toggle
+          [label]="'zoom'"
+          (toggleButtonOverrides)="toggleButtonOverrides('showZoom', $event)"
+        ></app-toggle>
+      </td>
+      <td>
+        <app-toggle
+          [label]="'print'"
+          (toggleButtonOverrides)="toggleButtonOverrides('showPrint', $event)"
+        ></app-toggle>
+      </td>
+      <td>
+        <app-toggle
+          [label]="'download'"
+          (toggleButtonOverrides)="
+            toggleButtonOverrides('showDownload', $event)
+          "
+        ></app-toggle>
+      </td>
+      <td>
+        <app-toggle
+          [label]="'comments'"
+          (toggleButtonOverrides)="
+            toggleButtonOverrides('showCommentSummary', $event)
+          "
+        ></app-toggle>
+      </td>
+    </ng-container>
+    <td>
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-full">
+          <span class="govuk-!-font-weight-bold">{{ 'Annotate' | rpxTranslate }}</span>
+        </div>
+        <div class="govuk-grid-column-full">
+          <label for="toggleAnnotations" class="switch govuk-!-margin-right-2 mv-tooltip" [attr.data-tooltip]="'Toggle annotate' | rpxTranslate">
+            <span class="visuallyHidden">{{ 'Toggle annotate' | rpxTranslate }}</span>
+            <input
+              type="checkbox"
+              id="toggleAnnotations"
+              [checked]="toggleAnnotations.getValue()"
+              (change)="toggleAnnotations.next($event.target.checked)"
+            />
+            <span class="slider round"></span>
+          </label>
+        </div>
+      </div>
+    </td>
+    <td>
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-full">
+          <span class="govuk-!-font-weight-bold">{{ 'Redact' | rpxTranslate }}</span>
+        </div>
+        <div class="govuk-grid-column-full">
+          <label for="toggleRedact" class="switch govuk-!-margin-right-2 mv-tooltip" [attr.data-tooltip]="'Toggle redact' | rpxTranslate">
+            <span class="visuallyHidden">{{ 'Toggle redact' | rpxTranslate }}</span>
+            <input
+              type="checkbox"
+              id="toggleRedact"
+              [checked]="toggleRedaction.getValue()"
+              (change)="toggleRedaction.next($event.target.checked)"
+            />
+            <span class="slider round"></span>
+          </label>
+        </div>
+      </div>
+    </td>
+    <td>
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-full">
+          <span class="govuk-!-font-weight-bold">{{ 'ICP' | rpxTranslate }}</span>
+        </div>
+        <div class="govuk-grid-column-full">
+          <label for="toggleICP" class="switch govuk-!-margin-right-2 mv-tooltip" [attr.data-tooltip]="'Toggle ICP' | rpxTranslate">
+            <span class="visuallyHidden">{{ 'Toggle ICP' | rpxTranslate }}</span>
+            <input
+              type="checkbox"
+              id="toggleICP"
+              [checked]="toggleICP.getValue()"
+              (change)="toggleICP.next($event.target.checked)"
+            />
+            <span class="slider round"></span>
+          </label>
+        </div>
+      </div>
+    </td>
+    <td>
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-full">
+          <span class="govuk-!-font-weight-bold">{{ 'Multimedia' | rpxTranslate }}</span>
+        </div>
+        <div class="govuk-grid-column-full">
+          <label for="toggleMultimedia" class="switch govuk-!-margin-right-2 mv-tooltip" [attr.data-tooltip]="'Toggle multimedia' | rpxTranslate">
+            <span class="visuallyHidden">{{ 'Toggle multimedia' | rpxTranslate }}</span>
+            <input
+              type="checkbox"
+              id="toggleMultimedia"
+              [checked]="toggleMultimediaPlayer.getValue()"
+              (change)="toggleMultimediaPlayer.next($event.target.checked)"
+            />
+            <span class="slider round"></span>
+          </label>
+        </div>
+      </div>
+    </td>
+    <td>
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-full">
+          <span class="govuk-!-font-weight-bold">{{ 'Search Redact' | rpxTranslate }}</span>
+        </div>
+        <div class="govuk-grid-column-full">
+          <label for="toggleRedactSearch" class="switch govuk-!-margin-right-2 mv-tooltip" [attr.data-tooltip]="'Toggle search redact' | rpxTranslate">
+            <span class="visuallyHidden">{{ 'Toggle search redact' | rpxTranslate }}</span>
+            <input
+              type="checkbox"
+              id="toggleRedactSearch"
+              [checked]="toggleSearchRedact.getValue()"
+              (change)="toggleSearchRedact.next($event.target.checked)"
+            />
+            <span class="slider round"></span>
+          </label>
+        </div>
+      </div>
+    </td>
+  </tr>
+</table>

package/src/app/media-viewer-wrapper/toolbar-toggles/toolbar-toggles.component.scss

@@ -0,0 +1,62 @@
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 24px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 20px;
+  width: 20px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #404040;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #005ea5;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(18px);
+  -ms-transform: translateX(18px);
+  transform: translateX(18px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

package/src/app/media-viewer-wrapper/toolbar-toggles/toolbar-toggles.component.ts

@@ -0,0 +1,31 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Component({
+    selector: 'app-toolbar-toggles',
+    templateUrl: './toolbar-toggles.component.html',
+    styleUrls: ['./toolbar-toggles.component.scss'],
+    standalone: false
+})
+export class ToolbarTogglesComponent {
+
+  @Input() showToolbar: boolean;
+  @Input() showCustomToolbar: boolean;
+
+  @Output() toggleToolbar = new BehaviorSubject(true);
+  @Output() toggleToolbarBtns = new EventEmitter();
+  @Output() toggleCustomToolbar = new BehaviorSubject(false);
+  @Output() toggleAnnotations = new BehaviorSubject(true);
+  @Output() toggleRedaction = new BehaviorSubject(true);
+  @Output() toggleICP = new BehaviorSubject(true);
+  @Output() toggleMultimediaPlayer = new BehaviorSubject(true);
+  @Output() showCommentSummary = new BehaviorSubject(false);
+  @Output() toggleSearchRedact = new BehaviorSubject(true);
+
+  toolbarButtonOverrides = {};
+
+  toggleButtonOverrides(key: string, value: boolean) {
+    this.toolbarButtonOverrides[key] = value;
+    this.toggleToolbarBtns.emit(this.toolbarButtonOverrides);
+  }
+}

package/src/app/routing.module.ts

@@ -0,0 +1,45 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+import { MediaViewerWrapperComponent } from './media-viewer-wrapper/media-viewer-wrapper.component';
+import { MediaViewerModule } from '../../projects/media-viewer/src/lib/media-viewer.module';
+import { ToolbarModule } from '../../projects/media-viewer/src/lib/toolbar/toolbar.module';
+import { ToolbarTogglesComponent } from './media-viewer-wrapper/toolbar-toggles/toolbar-toggles.component';
+import { ToggleComponent } from './media-viewer-wrapper/toolbar-toggles/toggle/toggle.component';
+import { CustomToolbarModule } from './media-viewer-wrapper/custom-toolbar/custom-toolbar.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RpxTranslationModule } from 'rpx-xui-translation';
+
+const routes: Routes = [{
+    path: '',
+    component: MediaViewerWrapperComponent
+}];
+
+@NgModule({
+  declarations: [
+    MediaViewerWrapperComponent,
+    ToolbarTogglesComponent,
+    ToggleComponent
+  ],
+  imports: [
+    CommonModule,
+    BrowserAnimationsModule,
+    RouterModule.forRoot(routes, {
+    scrollPositionRestoration: 'enabled',
+    anchorScrolling: 'enabled'
+}),
+    HttpClientModule,
+    ReactiveFormsModule,
+    MediaViewerModule,
+    ToolbarModule,
+    FormsModule,
+    CustomToolbarModule,
+    RpxTranslationModule.forChild()
+  ],
+  exports: [RouterModule]
+})
+
+export class RoutingModule {
+}