Angular support for IIIF and Mirador

package.json

@@ -19,6 +19,7 @@
     "serve": "ts-node --project ./tsconfig.ts-node.json scripts/serve.ts",
     "start:dev": "npm-run-all --parallel config:dev:watch serve",
     "start:prod": "yarn run build:prod && yarn run serve:ssr",
+    "start:mirador:prod": "yarn run build:mirador && yarn run start:prod",
     "analyze": "webpack-bundle-analyzer dist/browser/stats.json",
     "build": "ng build",
     "build:stats": "ng build --stats-json",
@@ -44,6 +45,7 @@
     "clean": "yarn run clean:prod && yarn run clean:env && yarn run clean:node",
     "clean:env": "rimraf src/environments/environment.ts",
     "sync-i18n": "yarn run config:dev && ts-node --project ./tsconfig.ts-node.json scripts/sync-i18n-files.ts",
+    "build:mirador": "webpack --config webpack/webpack.mirador.config.ts",
     "merge-i18n": "yarn run config:dev && ts-node --project ./tsconfig.ts-node.json scripts/merge-i18n-files.ts",
     "postinstall": "ngcc",
     "cypress:open": "cypress open",
@@ -106,6 +108,9 @@
     "jsonschema": "1.4.0",
     "jwt-decode": "^3.1.2",
     "klaro": "^0.7.10",
+    "mirador": "^3.0.0",
+    "mirador-dl-plugin": "^0.13.0",
+    "mirador-share-plugin": "^0.10.0",
     "moment": "^2.29.1",
     "morgan": "^1.10.0",
     "ng-mocks": "10.5.4",
@@ -118,6 +123,8 @@
     "nouislider": "^14.6.3",
     "pem": "1.14.4",
     "postcss-cli": "^8.3.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^6.6.3",
     "rxjs-spy": "^7.5.3",
@@ -157,6 +164,7 @@
     "deep-freeze": "0.0.1",
     "dotenv": "^8.2.0",
     "fork-ts-checker-webpack-plugin": "^6.0.3",
+    "html-loader": "^1.3.2",
     "html-webpack-plugin": "^4.5.0",
     "http-proxy-middleware": "^1.0.5",
     "jasmine-core": "^3.6.0",

server.ts

@@ -41,6 +41,8 @@ import { UIServerConfig } from './src/config/ui-server-config.interface';
  * Set path for the browser application's dist folder
  */
 const DIST_FOLDER = join(process.cwd(), 'dist/browser');
+// Set path fir IIIF viewer.
+const IIIF_VIEWER = join(process.cwd(), 'dist/iiif');
 
 const indexHtml = existsSync(join(DIST_FOLDER, 'index.html')) ? 'index.html' : 'index';
 
@@ -135,6 +137,10 @@ export function app() {
    * Serve static resources (images, i18n messages, …)
    */
   server.get('*.*', cacheControl, express.static(DIST_FOLDER, { index: false }));
+  /*
+  * Fallthrough to the IIIF viewer (must be included in the build).
+  */
+  server.use('/iiif', express.static(IIIF_VIEWER, {index:false}));
 
   // Register the ngApp callback function to handle incoming requests
   server.get('*', ngApp);

src/app/entity-groups/journal-entities/item-pages/journal/journal.component.spec.ts

@@ -28,6 +28,7 @@ import { createSuccessfulRemoteDataObject$ } from '../../../../shared/remote-dat
 import { TruncatableService } from '../../../../shared/truncatable/truncatable.service';
 import { TruncatePipe } from '../../../../shared/utils/truncate.pipe';
 import { JournalComponent } from './journal.component';
+import { RouteService } from '../../../../core/services/route.service';
 
 let comp: JournalComponent;
 let fixture: ComponentFixture<JournalComponent>;
@@ -86,6 +87,7 @@ describe('JournalComponent', () => {
         { provide: NotificationsService, useValue: {} },
         { provide: DefaultChangeAnalyzer, useValue: {} },
         { provide: BitstreamDataService, useValue: mockBitstreamDataService },
+        { provide: RouteService, useValue: {} }
       ],
 
       schemas: [NO_ERRORS_SCHEMA]

src/app/item-page/item-page.module.ts

@@ -12,7 +12,6 @@ import { ItemPageAbstractFieldComponent } from './simple/field-components/specif
 import { ItemPageUriFieldComponent } from './simple/field-components/specific-field/uri/item-page-uri-field.component';
 import { ItemPageTitleFieldComponent } from './simple/field-components/specific-field/title/item-page-title-field.component';
 import { ItemPageFieldComponent } from './simple/field-components/specific-field/item-page-field.component';
-import { FileSectionComponent } from './simple/field-components/file-section/file-section.component';
 import { CollectionsComponent } from './field-components/collections/collections.component';
 import { FullItemPageComponent } from './full/full-item-page.component';
 import { FullFileSectionComponent } from './full/field-components/file-section/full-file-section.component';
@@ -31,8 +30,10 @@ import { MediaViewerComponent } from './media-viewer/media-viewer.component';
 import { MediaViewerVideoComponent } from './media-viewer/media-viewer-video/media-viewer-video.component';
 import { MediaViewerImageComponent } from './media-viewer/media-viewer-image/media-viewer-image.component';
 import { NgxGalleryModule } from '@kolkov/ngx-gallery';
+import { MiradorViewerComponent } from './mirador-viewer/mirador-viewer.component';
 import { ThemedFileSectionComponent} from './simple/field-components/file-section/themed-file-section.component';
 
+
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
   PublicationComponent,
@@ -52,7 +53,6 @@ const DECLARATIONS = [
   ItemPageUriFieldComponent,
   ItemPageTitleFieldComponent,
   ItemPageFieldComponent,
-  FileSectionComponent,
   CollectionsComponent,
   FullFileSectionComponent,
   PublicationComponent,
@@ -62,7 +62,8 @@ const DECLARATIONS = [
   AbstractIncrementalListComponent,
   MediaViewerComponent,
   MediaViewerVideoComponent,
-  MediaViewerImageComponent
+  MediaViewerImageComponent,
+  MiradorViewerComponent
 ];
 
 @NgModule({
@@ -74,7 +75,7 @@ const DECLARATIONS = [
     StatisticsModule.forRoot(),
     JournalEntitiesModule.withEntryComponents(),
     ResearchEntitiesModule.withEntryComponents(),
-     NgxGalleryModule,
+    NgxGalleryModule,
   ],
   declarations: [
     ...DECLARATIONS

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

@@ -0,0 +1,4 @@
+<p class="full-text-op">{{'iiifviewer.fullscreen.notice' | translate}}</p>
+<p *ngIf="!isViewerAvailable" id="viewer-message">{{viewerMessage}}</p>
+<iframe title="Mirador Viewer" allowtransparency="true" *ngIf="isViewerAvailable" [src]="iframeViewerUrl | async" id="mirador-viewer"></iframe>
+

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

@@ -0,0 +1,13 @@
+#mirador-viewer {
+  border: 1px solid #dee2e6;
+  height: 660px;
+  width: 100%
+}
+.full-text-op {
+  text-align: right;
+  color: #333333;
+  font-size: 0.8em;
+}
+p.full-text-op {
+  margin-bottom: 0;
+}

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

@@ -0,0 +1,255 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { MiradorViewerComponent } from './mirador-viewer.component';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
+import { BitstreamDataService } from '../../core/data/bitstream-data.service';
+import { createRelationshipsObservable } from '../simple/item-types/shared/item.component.spec';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MetadataMap } from '../../core/shared/metadata.models';
+import { Item } from '../../core/shared/item.model';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { createPaginatedList } from '../../shared/testing/utils.test';
+import { of as observableOf } from 'rxjs';
+import { MiradorViewerService } from './mirador-viewer.service';
+import { HostWindowService } from '../../shared/host-window.service';
+
+
+function getItem(metadata: MetadataMap) {
+  return Object.assign(new Item(), {
+    bundles: createSuccessfulRemoteDataObject$(createPaginatedList([])),
+    metadata: metadata,
+    relationships: createRelationshipsObservable()
+  });
+}
+
+const noMetadata = new MetadataMap();
+
+const mockHostWindowService = {
+  // This isn't really testing mobile status, the return observable just allows the test to run.
+  widthCategory: observableOf(true),
+};
+
+describe('MiradorViewerComponent with search', () => {
+  let comp: MiradorViewerComponent;
+  let fixture: ComponentFixture<MiradorViewerComponent>;
+  const viewerService = jasmine.createSpyObj('MiradorViewerService', ['showEmbeddedViewer', 'getImageCount']);
+
+  beforeEach(waitForAsync(() => {
+    viewerService.showEmbeddedViewer.and.returnValue(true);
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot({
+        loader: {
+          provide: TranslateLoader,
+          useClass: TranslateLoaderMock
+        }
+      })],
+      declarations: [MiradorViewerComponent],
+      providers: [
+        { provide: BitstreamDataService, useValue: {} },
+        { provide: HostWindowService, useValue: mockHostWindowService }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).overrideComponent(MiradorViewerComponent, {
+      set: {
+        providers: [
+          { provide: MiradorViewerService, useValue: viewerService }
+        ]
+      }
+    }).compileComponents();
+  }));
+  describe('searchable item', () => {
+    beforeEach(waitForAsync(() => {
+      fixture = TestBed.createComponent(MiradorViewerComponent);
+      comp = fixture.componentInstance;
+      comp.object = getItem(noMetadata);
+      comp.searchable = true;
+      fixture.detectChanges();
+    }));
+
+    it('should set multi property to true', (() => {
+      expect(comp.multi).toBe(true);
+    }));
+
+    it('should set url "multi" param to true', (() => {
+      const value = fixture.debugElement
+        .nativeElement.querySelector('#mirador-viewer').src;
+      expect(value).toContain('multi=true');
+    }));
+
+    it('should set url "searchable" param to true', (() => {
+      const value = fixture.debugElement
+        .nativeElement.querySelector('#mirador-viewer').src;
+      expect(value).toContain('searchable=true');
+    }));
+
+    it('should not call mirador service image count', () => {
+      expect(viewerService.getImageCount).not.toHaveBeenCalled();
+    });
+
+  });
+});
+
+describe('MiradorViewerComponent with multiple images', () => {
+
+  let comp: MiradorViewerComponent;
+  let fixture: ComponentFixture<MiradorViewerComponent>;
+  const viewerService = jasmine.createSpyObj('MiradorViewerService', ['showEmbeddedViewer', 'getImageCount']);
+
+  beforeEach(waitForAsync(() => {
+    viewerService.showEmbeddedViewer.and.returnValue(true);
+    viewerService.getImageCount.and.returnValue(observableOf(2));
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot({
+        loader: {
+          provide: TranslateLoader,
+          useClass: TranslateLoaderMock
+        }
+      })],
+      declarations: [MiradorViewerComponent],
+      providers: [
+        { provide: BitstreamDataService, useValue: {} },
+        { provide: HostWindowService, useValue: mockHostWindowService  }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).overrideComponent(MiradorViewerComponent, {
+      set: {
+        providers: [
+          { provide: MiradorViewerService, useValue: viewerService }
+          ]
+      }
+    }).compileComponents();
+  }));
+
+  describe('non-searchable item with multiple images', () => {
+    beforeEach(waitForAsync(() => {
+      fixture = TestBed.createComponent(MiradorViewerComponent);
+      comp = fixture.componentInstance;
+      comp.object = getItem(noMetadata);
+      comp.searchable = false;
+      fixture.detectChanges();
+    }));
+
+    it('should set url "multi" param to true', (() => {
+      const value = fixture.debugElement
+        .nativeElement.querySelector('#mirador-viewer').src;
+      expect(value).toContain('multi=true');
+    }));
+
+    it('should call mirador service image count', () => {
+      expect(viewerService.getImageCount).toHaveBeenCalled();
+    });
+
+    it('should omit "searchable" param from url', (() => {
+      const value = fixture.debugElement
+        .nativeElement.querySelector('#mirador-viewer').src;
+      expect(value).not.toContain('searchable=true');
+    }));
+
+  });
+});
+
+
+describe('MiradorViewerComponent with a single image', () => {
+  let comp: MiradorViewerComponent;
+  let fixture: ComponentFixture<MiradorViewerComponent>;
+  const viewerService = jasmine.createSpyObj('MiradorViewerService', ['showEmbeddedViewer', 'getImageCount']);
+
+  beforeEach(waitForAsync(() => {
+    viewerService.showEmbeddedViewer.and.returnValue(true);
+    viewerService.getImageCount.and.returnValue(observableOf(1));
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot({
+        loader: {
+          provide: TranslateLoader,
+          useClass: TranslateLoaderMock
+        }
+      })],
+      declarations: [MiradorViewerComponent],
+      providers: [
+        { provide: BitstreamDataService, useValue: {} },
+        { provide: HostWindowService, useValue: mockHostWindowService }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).overrideComponent(MiradorViewerComponent, {
+      set: {
+        providers: [
+          { provide: MiradorViewerService, useValue: viewerService }
+        ]
+      }
+    }).compileComponents();
+  }));
+
+  describe('single image viewer', () => {
+    beforeEach(waitForAsync(() => {
+      fixture = TestBed.createComponent(MiradorViewerComponent);
+      comp = fixture.componentInstance;
+      comp.object = getItem(noMetadata);
+      fixture.detectChanges();
+    }));
+
+    it('should  omit "multi" param', (() => {
+      const value = fixture.debugElement
+        .nativeElement.querySelector('#mirador-viewer').src;
+      expect(value).not.toContain('multi=false');
+    }));
+
+    it('should call mirador service image count', () => {
+      expect(viewerService.getImageCount).toHaveBeenCalled();
+    });
+
+  });
+
+});
+
+describe('MiradorViewerComponent in development mode', () => {
+  let comp: MiradorViewerComponent;
+  let fixture: ComponentFixture<MiradorViewerComponent>;
+  const viewerService = jasmine.createSpyObj('MiradorViewerService', ['showEmbeddedViewer', 'getImageCount']);
+
+  beforeEach(waitForAsync(() => {
+    viewerService.showEmbeddedViewer.and.returnValue(false);
+    viewerService.getImageCount.and.returnValue(observableOf(1));
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot({
+        loader: {
+          provide: TranslateLoader,
+          useClass: TranslateLoaderMock
+        }
+      })],
+      declarations: [MiradorViewerComponent],
+      providers: [
+        { provide: BitstreamDataService, useValue: {} }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).overrideComponent(MiradorViewerComponent, {
+      set: {
+        providers: [
+          { provide: MiradorViewerService, useValue: viewerService },
+          { provide: HostWindowService, useValue: mockHostWindowService  }
+        ]
+      }
+    }).compileComponents();
+  }));
+
+  describe('embedded viewer', () => {
+    beforeEach(waitForAsync(() => {
+      fixture = TestBed.createComponent(MiradorViewerComponent);
+      comp = fixture.componentInstance;
+      comp.object = getItem(noMetadata);
+      fixture.detectChanges();
+    }));
+
+    it('should not embed the viewer', (() => {
+      const value = fixture.debugElement
+        .nativeElement.querySelector('#mirador-viewer');
+      expect(value).toBeNull();
+    }));
+
+    it('should show message', (() => {
+      const value = fixture.debugElement
+        .nativeElement.querySelector('#viewer-message');
+      expect(value).toBeDefined();
+    }));
+
+  });
+});