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

package/projects/media-viewer/src/lib/toolbar/icp-toolbar/icp-toolbar.component.ts

@@ -0,0 +1,51 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ToolbarEventService } from '../toolbar-event.service';
+import { select, Store } from '@ngrx/store';
+import * as fromIcpSelectors from '../../store/selectors/icp.selectors';
+import { Subscription } from 'rxjs';
+import { IcpState } from '../../icp/icp.interfaces';
+import { IcpEventService } from '../icp-event.service';
+
+@Component({
+    selector: 'mv-icp-toolbar',
+    templateUrl: './icp-toolbar.component.html',
+    standalone: false
+})
+export class IcpToolbarComponent implements OnInit, OnDestroy {
+
+  presenterName: string;
+  isPresenter: boolean;
+
+  private $subscription: Subscription;
+
+  constructor(public readonly toolbarEventService: ToolbarEventService,
+              private store: Store<IcpState>, 
+              public readonly icpEventService:IcpEventService) {}
+
+  ngOnInit() {
+    this.$subscription = this.store.pipe(select(fromIcpSelectors.isPresenter))
+      .subscribe(isPresenter => this.isPresenter = isPresenter);
+    this.$subscription.add(this.store.pipe(select(fromIcpSelectors.getPresenterName))
+      .subscribe(name => this.presenterName = name));
+  }
+
+  ngOnDestroy() {
+    this.$subscription.unsubscribe();
+  }
+
+  present() {
+    this.icpEventService.becomePresenter();
+  }
+
+  stopPresenting() {
+    this.icpEventService.stopPresenting();
+  }
+
+  leaveIcpSession() {
+    this.icpEventService.leaveSession();
+  }
+
+  showParticipantsList() {
+    this.toolbarEventService.toggleParticipantsList(!this.icpEventService.participantsListVisible.getValue());
+  }
+}

package/projects/media-viewer/src/lib/toolbar/main-toolbar/main-toolbar.component.html

@@ -0,0 +1,428 @@
+<div class="toolbar">
+  <div id="toolbarContainer">
+    <div class="mv-toolbar__container">
+      <div #mvToolbar class="mv-toolbar" [class.notSupported]="!contentType">
+        <!-- The mvToolbarMain div contains all toolbar buttons except the "More options" button. This allows for calculation of the available space to display buttons -->
+        <div id="mvToolbarMain" class="mv-toolbar-main" #mvToolbarMain>
+          <ng-container *ngTemplateOutlet="menuItems"></ng-container>
+        </div>
+        <!-- The mvToolbarMoreOptions div contains the "More options" toolbar button (and the overlay template for the dropdown menu).
+            The space occupied by the button (if visible) is excluded from the toolbar space available calculation -->
+        <div id="mvToolbarMoreOptions" class="mv-toolbar-more-options">
+          <button
+            id="mvMoreOptionsBtn"
+            class="mv-button mv-toolbar__menu-button--more-options mv-tooltip"
+            [class.mv-toolbar__menu-button--more-options__hidden]="
+              mvToolbar.offsetWidth >= allButtonsWidth
+            "
+            [attr.aria-expanded]="isDropdownMenuOpen"
+            [attr.data-tooltip]="'More options' | rpxTranslate"
+            (click)="toggleMoreOptions()"
+            cdkOverlayOrigin
+            #trigger="cdkOverlayOrigin"
+            [disabled]="redactAllInProgress"
+          >
+            <span>{{ "More options" | rpxTranslate }}</span>
+          </button>
+          <!-- This template displays the overlay content for the dropdown menu and is connected to the "More options" button -->
+          <ng-template
+            cdkConnectedOverlay
+            [cdkConnectedOverlayOrigin]="trigger"
+            [cdkConnectedOverlayOpen]="isDropdownMenuOpen"
+            [cdkConnectedOverlayPositions]="dropdownMenuPositions"
+          >
+            <div class="dropdown-menu" #dropdownMenu tabindex="0">
+              <ng-container *ngTemplateOutlet="menuItems"></ng-container>
+            </div>
+          </ng-template>
+        </div>
+      </div>
+      <div id="mvMenuItems" #mvMenuItems>
+        <ng-template #menuItems>
+          <button
+            *ngIf="toolbarButtons.showSidebar"
+            id="mvIndexBtn"
+            data-l10n-id="index"
+            [attr.data-tooltip]="'Index' | rpxTranslate"
+            #mvIndexBtn
+            class="mv-button mv-toolbar__menu-button--index mv-tooltip"
+            [class.button-hidden-on-toolbar]="
+              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvIndexBtn']
+            "
+            [class.button-hidden-on-dropdown]="
+              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvIndexBtn']
+            "
+            [attr.aria-expanded]="isIndexOpen"
+            [disabled]="redactAllInProgress"
+            (click)="toggleIndexSideBar(); isDropdownMenuOpen = false"
+          >
+            <span>{{ "Index" | rpxTranslate }}</span>
+          </button>
+
+          <button
+            *ngIf="toolbarButtons.showSidebar"
+            id="mvBookmarksBtn"
+            data-l10n-id="bookmarks"
+            [attr.data-tooltip]="'Bookmarks' | rpxTranslate"
+            #mvBookmarksBtn
+            [ngClass]="{
+              'mv-button mv-tooltip mv-toolbar__menu-button--bookmarks': true,
+              'button-hidden-on-toolbar':
+                mvToolbarMain.offsetWidth <
+                widthRequiredForBtn['mvBookmarksBtn'],
+              'button-hidden-on-dropdown':
+                mvToolbarMain.offsetWidth >=
+                widthRequiredForBtn['mvBookmarksBtn']
+            }"
+            [attr.aria-expanded]="isBookmarksOpen"
+            [disabled]="redactAllInProgress"
+            (click)="toggleBookmarksSideBar(); isDropdownMenuOpen = false"
+          >
+            <span>{{ "Bookmarks" | rpxTranslate }}</span>
+          </button>
+
+          <button
+            *ngIf="toolbarButtons.showDrawButton"
+            [disabled]="icpEnabled || redactionEnabled"
+            id="mvDrawBtn"
+            #mvDrawBtn
+            class="mv-button mv-toolbar__menu-button--draw mv-tooltip"
+            [attr.data-tooltip]="'Draw a box' | rpxTranslate"
+            [class.button-hidden-on-toolbar]="
+              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDrawBtn']
+            "
+            [class.button-hidden-on-dropdown]="
+              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDrawBtn']
+            "
+            [class.toggled]="toolbarEvents.drawModeSubject | async"
+            aria-pressed="false"
+            data-l10n-id="toggleDrawButton"
+            (click)="onClickDrawToggle(); isDropdownMenuOpen = false"
+          >
+            <span data-l10n-id="draw_label">{{
+              "Draw a box" | rpxTranslate
+            }}</span>
+          </button>
+
+          <button
+            *ngIf="toolbarButtons.showHighlightButton"
+            [disabled]="icpEnabled || redactionEnabled"
+            id="mvHighlightBtn"
+            #mvHighlightBtn
+            class="mv-button mv-toolbar__menu-button--highlight mv-tooltip"
+            [attr.data-tooltip]="'Highlight' | rpxTranslate"
+            [class.button-hidden-on-toolbar]="
+              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvHighlightBtn']
+            "
+            [class.button-hidden-on-dropdown]="
+              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvHighlightBtn']
+            "
+            [class.toggled]="toolbarEvents.highlightToolbarSubject | async"
+            aria-pressed="false"
+            (click)="onClickHighlightToggle(); isDropdownMenuOpen = false"
+            data-l10n-id="toggleHighlightButton"
+          >
+            <span data-l10n-id="highlight_label">{{
+              "Highlight" | rpxTranslate
+            }}</span>
+          </button>
+
+          <ng-container *ngIf="toolbarButtons.showNavigation">
+            <div
+              id="mvPageBtn"
+              #mvPageBtn
+              class="mv-toolbar__menu-button--page"
+              [attr.data-tooltip]="'Page' | rpxTranslate"
+              [class.button-hidden-on-toolbar]="
+                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPageBtn']
+              "
+              [class.button-hidden-on-dropdown]="
+                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPageBtn']
+              "
+            >
+              <span>{{ "Page" | rpxTranslate }}</span>
+
+              <button
+                id="mvUpBtn"
+                [disabled]="pageNumber === 1 || redactAllInProgress"
+                [attr.data-tooltip]="'Previous page' | rpxTranslate"
+                [attr.aria-label]="'Previous page' | rpxTranslate"
+                class="mv-toolbar__menu-button--up button-image mv-tooltip"
+                data-l10n-id="previous"
+                (click)="decreasePageNumber()"
+                [disabled]="redactAllInProgress"
+              >
+                <span></span>
+              </button>
+              <button
+                id="mvDownBtn"
+                [disabled]="pageNumber === pageCount || redactAllInProgress"
+                [attr.data-tooltip]="'Next page' | rpxTranslate"
+                [attr.aria-label]="'Next page' | rpxTranslate"
+                class="mv-toolbar__menu-button--down button-image mv-tooltip"
+                data-l10n-id="next"
+                (click)="increasePageNumber()"
+              >
+                <span></span>
+              </button>
+
+              <span class="mv-tooltip" [attr.data-tooltip]="'Page number' | rpxTranslate">
+                <input
+                  type="number"
+                  id="pageNumber"
+                  class="hmcts-toolbar-input govuk-input--width-2"
+                  [attr.aria-label]="'Page number' | rpxTranslate"
+                  value="1"
+                  size="4"
+                  min="1"
+                  [value]="pageNumber"
+                  tabindex="0"
+                  data-l10n-id="page"
+                  (change)="onPageNumberInputChange(pageNumberInput.value)"
+                  [disabled]="redactAllInProgress"
+                  #pageNumberInput
+                />
+              </span>
+              <span id="numPages" class="toolbarLabel">/ {{ pageCount }}</span>
+            </div>
+          </ng-container>
+
+          <ng-container *ngIf="toolbarButtons.showZoom">
+            <div
+              id="mvZoomBtn"
+              #mvZoomBtn
+              class="mv-toolbar__menu-button--zoom"
+              aria-pressed="false"
+              [class.button-hidden-on-toolbar]="
+                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvZoomBtn']
+              "
+              [class.button-hidden-on-dropdown]="
+                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvZoomBtn']
+              "
+            >
+              <button
+                [disabled]="
+                  toolbarEvents.zoomValueSubject.value === 0.1 ||
+                  redactAllInProgress
+                "
+                id="mvMinusBtn"
+                class="mv-toolbar__menu-button--zoom-out button-image mv-tooltip"
+                [attr.data-tooltip]="'Zoom out' | rpxTranslate"
+                data-l10n-id="zoom_out"
+                (click)="stepZoom(-0.1)"
+              >
+                <span class="mv-toolbar__menu-button--zoom-out-text">{{
+                  "Zoom Out" | rpxTranslate
+                }}</span>
+              </button>
+              <span class="mv-tooltip" [attr.data-tooltip]="'Zoom' | rpxTranslate"> 
+                <select
+                  id="scaleSelect"
+                  class="hmcts-toolbar-select"
+                  data-l10n-id="zoom"
+                  (change)="zoom($event.target.value)"
+                  tabindex="0"
+                  [disabled]="redactAllInProgress"
+                >
+                  <option
+                    #zoomSelect
+                    id="customScaleOption"
+                    title=""
+                    [value]="toolbarEvents.zoomValueSubject.value"
+                  >
+                    {{
+                      toolbarEvents.zoomValueSubject.value * 100
+                        | number : "1.0-0"
+                    }}%
+                  </option>
+                  <option
+                    *ngFor="let zoomScale of zoomScales"
+                    title=""
+                    [value]="zoomScale"
+                    [attr.data-l10n-id]="'page_scale_percent_' + zoomScale * 100"
+                  >
+                    {{ zoomScale * 100 }}%
+                  </option>
+                </select>
+              </span>
+              <button
+                [disabled]="
+                  toolbarEvents.zoomValueSubject.value === 5 ||
+                  redactAllInProgress
+                "
+                id="mvPlusBtn"
+                class="mv-toolbar__menu-button--zoom-in button-image mv-tooltip"
+                (click)="stepZoom(0.1)"
+                [attr.data-tooltip]="'Zoom in' | rpxTranslate"
+                data-l10n-id="zoom_in"
+              >
+                <span class="mv-toolbar__menu-button--zoom-out-text">{{
+                  "Zoom In" | rpxTranslate
+                }}</span>
+              </button>
+            </div>
+          </ng-container>
+
+          <div
+            *ngIf="toolbarButtons.showRotate"
+            id="mvRotateBtn"
+            #mvRotateBtn
+            class="mv-toolbar__menu-button--rotate"
+            [class.button-hidden-on-toolbar]="
+              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRotateBtn']
+            "
+            [class.button-hidden-on-dropdown]="
+              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRotateBtn']
+            "
+          >
+            <button
+              id="mvRotateLeftBtn"
+              class="mv-toolbar__menu-button--rotate_left button-image mv-tooltip"
+              [attr.aria-label]="'Rotate counterclockwise' | rpxTranslate"
+              [attr.data-tooltip]="'Rotate counterclockwise' | rpxTranslate"
+              data-l10n-id="page_rotate_ccw"
+              (click)="rotate(270)"
+              [disabled]="redactAllInProgress"
+            >
+              <span></span>
+            </button>
+            <button
+              id="mvRotateRightBtn"
+              class="mv-toolbar__menu-button--rotate_right button-image mv-tooltip"
+              [attr.aria-label]="'Rotate clockwise' | rpxTranslate"
+              [attr.data-tooltip]="'Rotate clockwise' | rpxTranslate"
+              data-l10n-id="page_rotate_cw"
+              (click)="rotate(90)"
+              [disabled]="redactAllInProgress"
+            >
+              <span></span>
+            </button>
+            <span>{{ "Rotate" | rpxTranslate }}</span>
+          </div>
+
+          <button
+            *ngIf="toolbarButtons.showSearchBar"
+            [disabled]="icpEnabled || redactAllInProgress"
+            id="mvSearchBtn"
+            #mvSearchBtn
+            [attr.data-tooltip]="'Search' | rpxTranslate"
+            data-l10n-id="searchbar"
+            class="mv-button mv-toolbar__menu-button--search mv-tooltip"
+            [class.button-hidden-on-toolbar]="
+              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvSearchBtn']
+            "
+            [class.button-hidden-on-dropdown]="
+              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvSearchBtn']
+            "
+            aria-pressed="false"
+            (click)="toggleSearchBar(); isDropdownMenuOpen = false"
+          >
+            <span>{{ "Search" | rpxTranslate }}</span>
+          </button>
+          <mv-search-bar
+            *ngIf="!toolbarEvents.searchBarHidden.getValue()"
+          ></mv-search-bar>
+
+          <button
+            *ngIf="enableICP && toolbarButtons.showPresentationMode && isPdf()"
+            [disabled]="icpEnabled || !contentType || redactionEnabled"
+            id="mvPresentBtn"
+            #mvPresentBtn
+            class="mv-button mv-toolbar__menu-button--present mv-tooltip"
+            [attr.data-tooltip]="'In-Court presentation mode' | rpxTranslate"
+            data-l10n-id="icpMode_label"
+            [ngClass]="onToolBarOffSetChange('mvPresentBtn')"
+            aria-pressed="false"
+            (click)="togglePresentBar(); isDropdownMenuOpen = false"
+          >
+            <span data-l10n-id="icpMode_label">{{
+              "Present" | rpxTranslate
+            }}</span>
+          </button>
+
+          <button
+            *ngIf="enableRedactions && toolbarButtons.showRedact"
+            [disabled]="icpEnabled || redactAllInProgress"
+            id="mvRedactBtn"
+            #mvRedactBtn
+            [attr.data-tooltip]="'Redact' | rpxTranslate"
+            data-l10n-id="redact"
+            class="mv-button mv-toolbar__menu-button--redact mv-tooltip"
+            [ngClass]="onToolBarOffSetChange('mvRedactBtn')"
+            [attr.aria-expanded]="isRedactOpen"
+            (click)="toggleRedactBar(); isDropdownMenuOpen = false"
+          >
+            <span>{{ "Redact" | rpxTranslate }}</span>
+          </button>
+
+          <button
+            *ngIf="toolbarButtons.showGrabNDragButton"
+            [disabled]="icpEnabled || redactAllInProgress"
+            id="mvGrabBtn"
+            #mvGrabBtn
+            class="mv-button mv-toolbar__menu-button--grab mv-tooltip"
+            data-tooltip="Grab and drag"
+            [ngClass]="onToolBarOffSetChange('mvGrabBtn')"
+            aria-pressed="false"
+            (click)="toggleGrabNDrag(); isDropdownMenuOpen = false"
+          >
+            <span>{{ "Grab and drag" | rpxTranslate }}</span>
+          </button>
+
+          <button
+            *ngIf="toolbarButtons.showDownload"
+            [disabled]="icpEnabled || redactionEnabled"
+            id="mvDownloadBtn"
+            #mvDownloadBtn
+            class="mv-button mv-toolbar__menu-button--download mv-tooltip"
+            [attr.data-tooltip]="'Download' | rpxTranslate"
+            data-l10n-id="download"
+            [ngClass]="onToolBarOffSetChange('mvDownloadBtn')"
+            aria-pressed="false"
+            (click)="downloadFile(); isDropdownMenuOpen = false"
+          >
+            <span>{{ "Download" | rpxTranslate }}</span>
+          </button>
+
+          <button
+            *ngIf="toolbarButtons.showPrint"
+            [disabled]="icpEnabled || redactionEnabled"
+            id="mvPrintBtn"
+            #mvPrintBtn
+            data-l10n-id="print"
+            aria-label="Print"
+            [attr.data-tooltip]="'Print' | rpxTranslate"
+            data-l10n-id="print"
+            class="mv-button mv-toolbar__menu-button--print mv-tooltip"
+            [ngClass]="onToolBarOffSetChange('mvPrintBtn')"
+            aria-pressed="false"
+            (click)="printFile(); isDropdownMenuOpen = false"
+          >
+            <span>{{ "Print" | rpxTranslate }}</span>
+          </button>
+
+          <button
+            *ngIf="enableAnnotations && toolbarButtons.showCommentSummary"
+            [disabled]="redactionEnabled"
+            id="mvCommentsBtn"
+            #mvCommentsBtn
+            class="mv-button mv-toolbar__menu-button--comments mv-tooltip"
+            [attr.data-tooltip]="'Comments' | rpxTranslate"
+            data-l10n-id="comments"
+            [ngClass]="onToolBarOffSetChange('mvCommentsBtn')"
+            [attr.aria-expanded]="isCommentsOpen"
+            (click)="toggleCommentsPanel(); isDropdownMenuOpen = false"
+          >
+            <span>{{ "Comments" | rpxTranslate }}</span>
+          </button>
+        </ng-template>
+      </div>
+    </div>
+
+    <div id="loadingBar">
+      <div class="progress">
+        <div class="glimmer"></div>
+      </div>
+    </div>
+  </div>
+</div>