[UXP-87] port canvasId implementation from [IIIF-110]

Author: FrancescoMolinaro

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-render/types/iiif-toolbar/iiif-toolbar.component.ts

@@ -43,6 +43,11 @@ import { NotificationsService } from '../../../../../../../../../../../shared/no
   standalone: true,
 })
 export class IIIFToolbarComponent implements OnInit {
+  private readonly MD_CANVASID = 'bitstream.iiif.canvasid';
+  private readonly MD_BITSTREAMS_MAP = [{
+    param: 'canvasId',
+    metadata: this.MD_CANVASID
+  }];
 
   @Input()
     item: Item;
@@ -61,6 +66,9 @@ export class IIIFToolbarComponent implements OnInit {
 
   isAuthorized$ = of(false);
 
+  queryParams: {[key: string]: string};
+
+
   getObjectUrl() {
     return isNotEmpty(this.bitstream) ? this.bitstream.self : undefined;
   }
@@ -78,13 +86,14 @@ export class IIIFToolbarComponent implements OnInit {
     this.manifestUrl = environment.rest.baseUrl + '/iiif/' + this.item.id + '/manifest';
     this.isAuthorized$ = this.authorizationService.isAuthorized(FeatureID.CanDownload, this.getObjectUrl());
     this.iiifEnabled = this.isIIIFEnabled();
+    this.queryParams = this.getQueryParams();
   }
 
   async openMiradorViewer() {
     if (environment.advancedAttachmentRendering.showViewerOnSameItemPage) {
-      await this.router.navigate([ getItemViewerDetailsPath(this.item, 'iiif', this.tabName) ], { fragment: 'viewer' });
+      await this.router.navigate([ getItemViewerDetailsPath(this.item, 'iiif', this.tabName) ], { fragment: 'viewer', queryParams: this.queryParams });
     } else {
-      await this.router.navigate([ getItemViewerPath(this.item, 'iiif') ]);
+      await this.router.navigate([ getItemViewerPath(this.item, 'iiif') ], {queryParams: this.queryParams});
     }
   }
 
@@ -108,4 +117,11 @@ export class IIIFToolbarComponent implements OnInit {
     return regexIIIFItem.test(this.item.firstMetadataValue('dspace.iiif.enabled'));
   }
 
+  private getQueryParams() {
+    return this.MD_BITSTREAMS_MAP
+      .filter(({metadata}) => this.bitstream?.metadata[`${metadata}`]?.length > 0)
+      .map(({param,  metadata}) => ({ [`${param}`]: this.bitstream?.metadata[`${metadata}`][0]?.value }))
+      .reduce((acc, curr) => ({ ...acc, ...curr }), {});
+  }
+
 }

src/app/item-page/mirador-viewer/mirador-viewer.component.ts

@@ -122,12 +122,12 @@ export class MiradorViewerComponent implements OnInit {
     if (this.notMobile) {
       viewerPath += '&notMobile=true';
     }
-    if (environment.mirador.enableDownloadPlugin) {
-      viewerPath += '&enableDownloadPlugin=true';
-    }
     if (this.canvasId) {
       viewerPath += `&canvasId=${this.canvasId}`;
     }
+    if (environment.mirador.enableDownloadPlugin) {
+      viewerPath += '&enableDownloadPlugin=true';
+    }
 
     // TODO: Should the query term be trusted here?
     return this.sanitizer.bypassSecurityTrustResourceUrl(viewerPath);

src/app/item-page/viewer-provider/viewers/item-viewers/iiif-item-viewer/iiif-item-viewer.component.html

@@ -4,5 +4,6 @@
     [object]="item$ | async"
     [searchable]="isSearchable$ | async"
     [query]="query$ | async"
+    [canvasId]="canvasId$ | async"
   ></ds-mirador-viewer>
 </div>

src/app/item-page/viewer-provider/viewers/item-viewers/iiif-item-viewer/iiif-item-viewer.component.ts

@@ -3,7 +3,7 @@ import {
   Component,
   OnInit,
 } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Observable, OperatorFunction } from 'rxjs';
 import {
   filter,
   map,
@@ -18,6 +18,7 @@ import {
   isIiifSearchEnabled,
 } from '../../../shared/viewer-provider.utils';
 import { BaseItemViewerComponent } from '../base-item-viewer.component';
+import { ActivatedRoute, ParamMap } from "@angular/router";
 
 @Component({
   selector: 'ds-iiif-item-viewer',
@@ -31,24 +32,37 @@ import { BaseItemViewerComponent } from '../base-item-viewer.component';
 })
 export class IIIFItemViewerComponent extends BaseItemViewerComponent implements OnInit {
 
+  private readonly CANVAS_PARAM: string = 'canvasId';
+  private readonly QUERY_PARAM: string = 'query';
+
   isSearchable$: Observable<boolean>;
   query$: Observable<string>;
+  canvasId$: Observable<string>;
 
   constructor(
     private readonly routeService: RouteService,
+    private route: ActivatedRoute
   ) {
     super();
   }
 
   ngOnInit(): void {
+    const queryParams$ = this.route.queryParamMap.pipe(
+      filter(queryMap => queryMap != null),
+    );
+    this.canvasId$ = queryParams$.pipe(
+      this.extractParam(queryMap => queryMap.get(this.CANVAS_PARAM))
+    );
     this.isSearchable$ = this.item$.pipe(
       map((item) => isIiifSearchEnabled(item)),
     );
-    this.query$ = this.item$.pipe(
-      withLatestFrom(this.isSearchable$),
-      filter(([, isSearchable]) => !!isSearchable),
-      switchMap(([item]) => getDSpaceQuery(item, this.routeService)),
+    this.query$ = this.isSearchable$.pipe(
+      filter((isSearchable) => !!isSearchable),
+      switchMap(() => queryParams$.pipe(this.extractParam(queryMap => queryMap.get(this.QUERY_PARAM))))
     );
   }
 
+  private extractParam<T>(mapper: (queryMap: ParamMap) => T): OperatorFunction<ParamMap, T> {
+    return map(mapper);
+  }
 }