@hmcts/media-viewer 4.1.0-viewport-debug → 4.1.1

package/fesm2022/hmcts-media-viewer.mjs

@@ -2173,9 +2173,9 @@ class IcpUpdateService {
     constructor(socket) {
         this.socket = socket;
     }
-    joinSession(username, session) {
+    joinSession(username, session, token) {
         this.session = session;
-        this.socket.connect(session.connectionUrl);
+        this.socket.connect(`${session.connectionUrl}?access_token=${token}`);
         this.socket.connected().subscribe(isConnected => {
             if (isConnected) {
                 this.socket.join({ ...this.session, username });
@@ -2511,35 +2511,6 @@ const defaultUnsupportedOptions = {
     showPrint: true
 };
 
-/**
- * Helper Class
- * Used for dynamic templates manipulation
- * */
-class HtmlTemplatesHelper {
-    static setDescribedBy(errorMessage, config) {
-        if (!errorMessage) {
-            return config.hint ? `${config.id}-hint` : null;
-        }
-        else if (errorMessage && errorMessage.isInvalid) {
-            return config.hint ? `${config.id}-hint ${config.id}-error` : `${config.id}-error`;
-        }
-        else {
-            return config.hint ? `${config.id}-hint` : null;
-        }
-    }
-    static getAdjustedBoundingRect(element) {
-        const viewportX = window.visualViewport.offsetLeft;
-        const viewportY = window.visualViewport.offsetTop;
-        const viewportScale = window.visualViewport.scale;
-        const viewportPageX = window.visualViewport.pageLeft;
-        const viewportPageY = window.visualViewport.pageTop;
-        if (viewportX || viewportY || viewportScale || viewportPageX || viewportPageY) {
-            console.log(`Viewport X: ${viewportX}, Y: ${viewportY}, Scale: ${viewportScale}, PageX: ${viewportPageX}, PageY: ${viewportPageY}`);
-        }
-        return element.getBoundingClientRect();
-    }
-}
-
 const getTagsRootState = createSelector(getMVState, (state) => state.tags);
 const getTagEntities = createSelector(getTagsRootState, getTagNameEnt);
 const getTagFilters = createSelector(getTagsRootState, getFilters);
@@ -2901,7 +2872,7 @@ class RedactionSearchBarComponent {
                 const range = selection.getRangeAt(0).cloneRange();
                 const clientRects = range.getClientRects();
                 if (clientRects) {
-                    const parentRect = HtmlTemplatesHelper.getAdjustedBoundingRect(selectedHighLightedElements[0]?.parentElement?.parentElement);
+                    const parentRect = selectedHighLightedElements[0].parentElement.parentElement.getBoundingClientRect();
                     const selectionRectangles = [];
                     for (let i = 0; i < clientRects.length; i++) {
                         const selectionRectangle = this.createTextRectangle(clientRects[i], parentRect);
@@ -3027,7 +2998,7 @@ class CommentSetRenderService {
         }
     }
     height(element) {
-        return HtmlTemplatesHelper.getAdjustedBoundingRect(element.form.nativeElement)?.height | 0;
+        return element.form.nativeElement.getBoundingClientRect().height;
     }
     difference(a, b) { return Math.abs(a - b); }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CommentSetRenderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -3343,7 +3314,7 @@ class CommentComponent {
         return this.totalPrevPagesHeight + (this.rectTop * this.zoom);
     }
     get height() {
-        return HtmlTemplatesHelper.getAdjustedBoundingRect(this.form.nativeElement).height / this.zoom;
+        return this.form.nativeElement.getBoundingClientRect().height / this.zoom;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CommentComponent, deps: [{ token: i1.Store }, { token: CommentService }, { token: TagsServices }], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CommentComponent, selector: "mv-anno-comment", inputs: { rotate: "rotate", zoom: "zoom", index: "index", page: "page", comment: "comment", annotation: "annotation" }, outputs: { commentClick: "commentClick", renderComments: "renderComments", delete: "delete", updated: "updated", changes: "changes" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "editableComment", first: true, predicate: ["editableComment"], descendants: true }], ngImport: i0, template: "<div\n  #form\n  (click)=\"onCommentClick()\"\n  class=\"aui-comment\"\n  [ngClass]=\"{ stylestoggle: (marginToComment$ | async) }\"\n  [style.top.px]=\"commentTop\"\n  [style.zIndex]=\"selected ? 100 : 0\"\n>\n  <div id=\"detailsWrapper {{ index }}\" class=\"aui-comment__header\">\n    <span *ngIf=\"author && !editor\" class=\"aui-comment__author\">\n      {{ author.forename }} {{ author.surname }}\n    </span>\n    <span *ngIf=\"editor\" class=\"aui-comment__author\">\n      {{ editor.forename }} {{ editor.surname }}\n    </span>\n    <time [hidden]=\"!selected && !this.editable\" class=\"aui-comment__meta\">\n      {{ lastUpdate | momentDate : \"d MMMM y h:mm a\" }}\n    </time>\n  </div>\n  <mv-tags\n    [tagItems]=\"tagItems\"\n    [userId]=\"createdBy\"\n    [editable]=\"editable\"\n    [annoId]=\"_comment.annotationId\"\n  >\n  </mv-tags>\n  <textarea\n    *ngIf=\"selected && editable\"\n    #editableComment\n    mvTextAreaAutoExpand\n    type=\"text\"\n    required\n    name=\"content\"\n    [maxlength]=\"CHAR_LIMIT\"\n    class=\"aui-comment__content form-control mimic-focus edit-mode expanded\"\n    [ngModel]=\"fullComment\"\n    (ngModelChange)=\"fullComment = $event; reRenderComments(); onCommentChange($event)\"\n    aria-label=\"comment\"\n  >\n  </textarea>\n  <p\n    *ngIf=\"!editable\"\n    mvTextHighlight\n    class=\"commentText\"\n    [textToHighlight]=\"searchString\"\n  >\n    {{ fullComment }}\n  </p>\n  <div\n    *ngIf=\"\n      selected ||\n      this.editable ||\n      (!fullComment.length && tagItems && !tagItems.length)\n    \"\n    class=\"aui-comment__footer commentBtns\"\n  >\n    <button\n      class=\"govuk-button\"\n      type=\"button\"\n      role=\"button\"\n      (click)=\"editOrSave()\"\n    >\n      {{ !editable ? (\"Edit\" | rpxTranslate) : (\"Save\" | rpxTranslate) }}\n    </button>\n    <button\n      type=\"button\"\n      role=\"button\"\n      class=\"govuk-button govuk-button--secondary\"\n      (click)=\"deleteOrCancel()\"\n    >\n      {{ !editable ? (\"Delete\" | rpxTranslate) : (\"Cancel\" | rpxTranslate) }}\n    </button>\n  </div>\n  <span class=\"aui-comment__private\">{{ \"private\" | rpxTranslate }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TextHighlightDirective, selector: "[mvTextHighlight]", inputs: ["textToHighlight"] }, { kind: "directive", type: TextareaAutoExpandDirective, selector: "[mvTextAreaAutoExpand]" }, { kind: "component", type: TagsComponent, selector: "mv-tags", inputs: ["tagItems", "userId", "editable", "annoId"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.RpxTranslatePipe, name: "rpxTranslate" }, { kind: "pipe", type: MomentDatePipe, name: "momentDate" }] }); }
@@ -3836,7 +3807,7 @@ class BoxHighlightCreateComponent {
             this.highlightPage();
             return;
         }
-        const rect = HtmlTemplatesHelper.getAdjustedBoundingRect(event.target), offsetX = event.clientX - rect.left, offsetY = event.clientY - rect.top;
+        const rect = event.target.getBoundingClientRect(), offsetX = event.clientX - rect.left, offsetY = event.clientY - rect.top;
         console.log(`initHighlight: rect=${JSON.stringify(rect)}, clientX=${event.clientX}, clientY=${event.clientY}, offsetX=${offsetX}, offsetY=${offsetY}`);
         this.position = 'absolute';
         this.backgroundColor = 'yellow';
@@ -3861,7 +3832,8 @@ class BoxHighlightCreateComponent {
         }
     }
     updateHighlight(event) {
-        const rect = HtmlTemplatesHelper.getAdjustedBoundingRect(event.target), offsetX = event.clientX - rect.left, offsetY = event.clientY - rect.top;
+        const rect = event.target.getBoundingClientRect(), offsetX = event.clientX - rect.left, offsetY = event.clientY - rect.top;
+        console.log(`updateHighlight: rect=${JSON.stringify(rect)}, clientX=${event.clientX}, clientY=${event.clientY}, offsetX=${offsetX}, offsetY=${offsetY}`);
         if (this.drawStartX > 0 && this.drawStartY > 0) {
             this.height = Math.abs(offsetY - this.drawStartY);
             this.width = Math.abs(offsetX - this.drawStartX);
@@ -3874,7 +3846,6 @@ class BoxHighlightCreateComponent {
             let rectangle = this.highlightService
                 .applyRotation(this.pageHeight, this.pageWidth, this.height, this.width, this.top, this.left, this.rotate, this.zoom);
             rectangle = { id: v4(), ...rectangle };
-            console.log(`createHighlight: rectangle=${JSON.stringify(rectangle)}`);
             this.saveSelection.emit({ rectangles: [rectangle], page: this.page });
             this.resetHighlight();
         }
@@ -4064,11 +4035,10 @@ class CtxToolbarComponent {
     addOrEditComment() {
         this.addOrEditCommentEvent.emit();
         setTimeout(() => {
-            // This hack to wait until the element is rendered seems to be unreliable,
             if (!location.hash) {
-                document.getElementById('viewerContainer')?.scrollBy(0, 1);
+                document.getElementById('viewerContainer').scrollBy(0, 1);
             }
-        }, 20);
+        }, 10);
     }
     createBookmark() {
         this.createBookmarkEvent.emit(this.rectangle);
@@ -4947,8 +4917,7 @@ class HighlightCreateDirective {
                 const range = selection.getRangeAt(0).cloneRange();
                 const clientRects = range.getClientRects();
                 if (clientRects) {
-                    const parentRect = HtmlTemplatesHelper
-                        .getAdjustedBoundingRect(localElement.closest(".textLayer"));
+                    const parentRect = localElement.closest(".textLayer").getBoundingClientRect();
                     const selectionRectangles = [];
                     for (let i = 0; i < clientRects.length; i++) {
                         const selectionRectangle = this.createTextRectangle(clientRects[i], parentRect);
@@ -5787,8 +5756,8 @@ class MainToolbarComponent {
         }
     }
     ngAfterViewInit() {
-        Array.from(this.mvToolbarMain.nativeElement.children).forEach((button) => {
-            this.allButtonsWidth += HtmlTemplatesHelper.getAdjustedBoundingRect(button).width;
+        Array.from(this.mvToolbarMain.nativeElement.children).forEach(button => {
+            this.allButtonsWidth += button.getBoundingClientRect().width;
             this.widthRequiredForBtn[button.id] = this.allButtonsWidth;
         });
         this.cdr.detectChanges();
@@ -6089,6 +6058,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Helper Class
+ * Used for dynamic templates manipulation
+ * */
+class HtmlTemplatesHelper {
+    static setDescribedBy(errorMessage, config) {
+        if (!errorMessage) {
+            return config.hint ? `${config.id}-hint` : null;
+        }
+        else if (errorMessage && errorMessage.isInvalid) {
+            return config.hint ? `${config.id}-hint ${config.id}-error` : `${config.id}-error`;
+        }
+        else {
+            return config.hint ? `${config.id}-hint` : null;
+        }
+    }
+}
+
 /*
 * Gov Uk Fieldset Component
 * Used to wrap group fieldset elements
@@ -6571,7 +6558,7 @@ class MediaViewerComponent {
             return;
         }
         if (!this.height) {
-            const compOffsetTop = HtmlTemplatesHelper.getAdjustedBoundingRect(this.elRef.nativeElement).top;
+            const compOffsetTop = this.elRef.nativeElement.getBoundingClientRect().top;
             const viewerOffsetTop = this.viewerRef.nativeElement.offsetTop;
             const offset = compOffsetTop + viewerOffsetTop;
             if (this.prevOffset !== offset) {
@@ -7252,7 +7239,13 @@ class IcpSessionApiService {
     loadSession(payload) {
         return this.httpClient
             .get(`${this.ICP_SESSION_API}/${payload.caseId}/${payload.documentId}`, { observe: 'response', withCredentials: true })
-            .pipe(map(response => response.body));
+            .pipe(map(response => {
+            const token = response.headers.get('X-Access-Token');
+            return {
+                ...response.body,
+                token
+            };
+        }));
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IcpSessionApiService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IcpSessionApiService, providedIn: 'root' }); }
@@ -7269,7 +7262,7 @@ class IcpEffects {
         this.icpUpdateService = icpUpdateService;
         this.loadIcpSession$ = createEffect(() => this.actions$.pipe(ofType(LOAD_ICP_SESSION), map((action) => action.payload), exhaustMap((payload) => this.icpApiService.loadSession(payload)
             .pipe(map(res => new JoinIcpSocketSession(res)), catchError(error => of(new LoadIcpSessionFailure(error)))))));
-        this.joinIcpSocketSession$ = createEffect(() => this.actions$.pipe(ofType(JOIN_ICP_SOCKET_SESSION), map((action) => action.payload), switchMap((res) => this.icpUpdateService.joinSession(res.username, res.session)
+        this.joinIcpSocketSession$ = createEffect(() => this.actions$.pipe(ofType(JOIN_ICP_SOCKET_SESSION), map((action) => action.payload), switchMap((res) => this.icpUpdateService.joinSession(res.username, res.session, res.token)
             .pipe(map(participants => new IcpSocketSessionJoined({ session: res.session, participantInfo: participants }))))));
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IcpEffects, deps: [{ token: i1$2.Actions }, { token: IcpSessionApiService }, { token: IcpUpdateService }], target: i0.ɵɵFactoryTarget.Injectable }); }