diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
index 9c9370bbe..6d6558445 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
@@ -58,11 +58,13 @@
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
index 9e95e7712..78622fce5 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, HostListener, NgZone, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ManualRedactionEntry, ReanalysisControllerService } from '@redaction/red-ui-http';
import { AppStateService } from '../../../state/app-state.service';
@@ -272,4 +272,36 @@ export class FilePreviewScreenComponent implements OnInit {
public isManuallyAddedAnnotation(annotation: Annotations.Annotation) {
return annotation.Id.indexOf('request:') >= 0;
}
+
+ @HostListener('window:keyup', ['$event'])
+ handleKeyEvent($event: KeyboardEvent) {
+ $event.preventDefault();
+
+ if (!this.selectedAnnotation) {
+ this.selectAnnotation(this.displayedAnnotations[this.displayedPages[0]].annotations[0]);
+ } else {
+ const page = this.selectedAnnotation.getPageNumber();
+ const pageIdx = this.displayedPages.indexOf(page);
+ const annotationsOnPage = this.displayedAnnotations[page].annotations;
+ const idx = annotationsOnPage.indexOf(this.selectedAnnotation);
+
+ if ($event.key === 'ArrowDown') {
+ if (idx + 1 !== annotationsOnPage.length) { // If not last item in page
+ this.selectAnnotation(annotationsOnPage[idx + 1]);
+ } else if (pageIdx + 1 < this.displayedPages.length) { // If not last page
+ const nextPageAnnotations = this.displayedAnnotations[this.displayedPages[pageIdx + 1]].annotations;
+ this.selectAnnotation(nextPageAnnotations[0]);
+ }
+ }
+
+ if ($event.key === 'ArrowUp') {
+ if (idx !== 0) { // If not first item in page
+ this.selectAnnotation(annotationsOnPage[idx - 1]);
+ } else if (pageIdx) { // If not first page
+ const prevPageAnnotations = this.displayedAnnotations[this.displayedPages[pageIdx - 1]].annotations;
+ this.selectAnnotation(prevPageAnnotations[prevPageAnnotations.length - 1]);
+ }
+ }
+ }
+ }
}
diff --git a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
index 37d024de8..799acf2fc 100644
--- a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
+++ b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
@@ -33,6 +33,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
@Output() annotationSelected = new EventEmitter();
@Output() manualAnnotationRequested = new EventEmitter();
@Output() pageChanged = new EventEmitter();
+ @Output() keyUp = new EventEmitter();
@ViewChild('viewer', { static: true }) viewer: ElementRef;
wvInstance: WebViewerInstance;
@@ -93,6 +94,19 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
});
instance.docViewer.on('documentLoaded', this.wvDocumentLoadedHandler);
+
+ instance.docViewer.on('keyDown', ($event) => {
+ if ($event.key.startsWith('Arrow')) {
+ $event.preventDefault();
+ }
+ })
+
+ instance.docViewer.on('keyUp', ($event) => {
+ if ($event.key.startsWith('Arrow')) {
+ this.keyUp.emit($event);
+ }
+ })
+
instance.loadDocument(pdfBlob, { filename: this.fileStatus ? this.fileStatus.filename : 'document.pdf' });
});
}