#855 fix tests and add angular 8 compatible gallery

package.json

@@ -66,6 +66,7 @@
     "@angular/platform-server": "~8.2.14",
     "@angular/router": "~8.2.14",
     "@angularclass/bootloader": "1.0.1",
+    "@kolkov/ngx-gallery": "^1.2.3",
     "@ng-bootstrap/ng-bootstrap": "5.2.1",
     "@ng-dynamic-forms/core": "8.1.1",
     "@ng-dynamic-forms/ui-ng-bootstrap": "8.1.1",
@@ -104,7 +105,6 @@
     "ng2-file-upload": "1.4.0",
     "ng2-nouislider": "^1.8.2",
     "ngx-bootstrap": "^5.3.2",
-    "ngx-gallery": "^5.10.0",
     "ngx-infinite-scroll": "6.0.1",
     "ngx-moment": "^3.4.0",
     "ngx-pagination": "3.0.3",

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

@@ -34,7 +34,7 @@ import { AbstractIncrementalListComponent } from './simple/abstract-incremental-
 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 'ngx-gallery';
+import { NgxGalleryModule } from '@kolkov/ngx-gallery';
 
 @NgModule({
   imports: [

src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.html

@@ -1 +1,7 @@
-<ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
+<ng-container>
+  <ngx-gallery
+    class="ngx-gallery"
+    [options]="galleryOptions"
+    [images]="galleryImages"
+  ></ngx-gallery>
+</ng-container>

src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.scss

@@ -0,0 +1 @@
+.ngx-gallery { display: inline-block; margin-bottom: 20px; }

src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.spec.ts

@@ -1,40 +1,40 @@
-import { DebugElement } from '@angular/core';
+import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { NgxGalleryImage, NgxGalleryOptions } from '@kolkov/ngx-gallery';
 
 import { MediaViewerImageComponent } from './media-viewer-image.component';
 
 describe('MediaViewerImageComponent', () => {
   let component: MediaViewerImageComponent;
   let fixture: ComponentFixture<MediaViewerImageComponent>;
-  let debugElement: DebugElement;
-  let htmlElement: HTMLElement;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [MediaViewerImageComponent],
-    }).compileComponents();
+      schemas: [NO_ERRORS_SCHEMA]
+  }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(MediaViewerImageComponent);
     component = fixture.componentInstance;
-    component.galleryOptions = [
+    component.galleryOptions = [new NgxGalleryOptions({})];
-      {
+    component.galleryImages = [
-        image: true,
+      new NgxGalleryImage({
-        imageSize: 'contain',
+        small: './assets/images/banner.jpg',
-        thumbnails: false,
+        medium: './assets/images/banner.jpg',
-        imageArrows: false,
+        big: './assets/images/banner.jpg',
-        width: '340px',
+      }),
-        height: '279px',
+      new NgxGalleryImage({
-      },
+        small: './assets/images/dspace-logo.png',
+        medium: './assets/images/2-medium.jpg',
+        big: './assets/images/2-big.jpg',
+      }),
     ];
-    debugElement = fixture.debugElement.query(By.css('ngx-gallery'));
-    htmlElement = debugElement.nativeElement;
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
 });

src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
-
+import { NgxGalleryImage, NgxGalleryOptions } from '@kolkov/ngx-gallery';
-import { NgxGalleryOptions, NgxGalleryImage } from 'ngx-gallery';
 import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model';
+import { NgxGalleryAnimation } from '@kolkov/ngx-gallery';
 
 @Component({
   selector: 'ds-media-viewer-image',
@@ -24,6 +24,8 @@ export class MediaViewerImageComponent implements OnInit {
         imageArrows: false,
         width: '340px',
         height: '279px',
+        startIndex: 0,
+        imageAnimation: NgxGalleryAnimation.Slide,
       },
     ];
     for (const image of this.images) {

src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.spec.ts

@@ -2,11 +2,14 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { of as observableOf } from 'rxjs';
+import { Bitstream } from '../../../core/shared/bitstream.model';
+import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model';
 import { TranslateLoaderMock } from '../../../shared/mocks/translate-loader.mock';
 import { FileSizePipe } from '../../../shared/utils/file-size-pipe';
 import { VarDirective } from '../../../shared/utils/var.directive';
 import { MetadataFieldWrapperComponent } from '../../field-components/metadata-field-wrapper/metadata-field-wrapper.component';
-
+import { MockBitstreamFormat1 } from '../../../shared/mocks/item.mock';
 import { MediaViewerVideoComponent } from './media-viewer-video.component';
 
 describe('MediaViewerVideoComponent', () => {
@@ -34,9 +37,47 @@ describe('MediaViewerVideoComponent', () => {
     }).compileComponents();
   }));
 
+  const mockBitstream: Bitstream = Object.assign(new Bitstream(), {
+    sizeBytes: 10201,
+    content:
+      'https://dspace7.4science.it/dspace-spring-rest/api/core/bitstreams/cf9b0c8e-a1eb-4b65-afd0-567366448713/content',
+    format: observableOf(MockBitstreamFormat1),
+    bundleName: 'ORIGINAL',
+    _links: {
+      self: {
+        href:
+          'https://dspace7.4science.it/dspace-spring-rest/api/core/bitstreams/cf9b0c8e-a1eb-4b65-afd0-567366448713',
+      },
+      content: {
+        href:
+          'https://dspace7.4science.it/dspace-spring-rest/api/core/bitstreams/cf9b0c8e-a1eb-4b65-afd0-567366448713/content',
+      },
+    },
+    id: 'cf9b0c8e-a1eb-4b65-afd0-567366448713',
+    uuid: 'cf9b0c8e-a1eb-4b65-afd0-567366448713',
+    type: 'bitstream',
+    metadata: {
+      'dc.title': [
+        {
+          language: null,
+          value: 'test_word.docx',
+        },
+      ],
+    },
+  });
+
+  const mockMediaViewerItems: MediaViewerItem[] = Object.assign(
+    new Array<MediaViewerItem>(),
+    [
+      { bitstream: mockBitstream, format: 'video', thumbnail: null },
+      { bitstream: mockBitstream, format: 'video', thumbnail: null },
+    ]
+  );
+
   beforeEach(() => {
     fixture = TestBed.createComponent(MediaViewerVideoComponent);
     component = fixture.componentInstance;
+    component.medias = mockMediaViewerItems;
     fixture.detectChanges();
   });
 

src/app/+item-page/media-viewer/media-viewer.component.spec.ts

@@ -15,6 +15,8 @@ import { MediaViewerItem } from '../../core/shared/media-viewer-item.model';
 import { VarDirective } from '../../shared/utils/var.directive';
 import { MetadataFieldWrapperComponent } from '../field-components/metadata-field-wrapper/metadata-field-wrapper.component';
 import { FileSizePipe } from '../../shared/utils/file-size-pipe';
+import { BitstreamFormat } from '../../core/shared/bitstream-format.model';
+import { BitstreamFormatDataService } from '../../core/data/bitstream-format-data.service';
 
 describe('MediaViewerComponent', () => {
   let comp: MediaViewerComponent;
@@ -26,6 +28,12 @@ describe('MediaViewerComponent', () => {
     ),
   });
 
+  const bitstreamFormatDataService = jasmine.createSpyObj('bitstreamFormatDataService', {
+    findByBitstream: createSuccessfulRemoteDataObject$(
+      new BitstreamFormat()
+    ),
+  });
+
   const mockBitstream: Bitstream = Object.assign(new Bitstream(), {
     sizeBytes: 10201,
     content:
@@ -79,6 +87,7 @@ describe('MediaViewerComponent', () => {
       ],
       providers: [
         { provide: BitstreamDataService, useValue: bitstreamDataService },
+        { provide: BitstreamFormatDataService, useValue: bitstreamFormatDataService },
       ],
 
       schemas: [NO_ERRORS_SCHEMA],

src/app/+item-page/media-viewer/media-viewer.component.ts

@@ -33,9 +33,7 @@ export class MediaViewerComponent implements OnInit {
     this.isLoading = true;
 
     this.loadRemoteData('ORIGINAL').subscribe((bitstreamsRD) => {
-      console.log(bitstreamsRD);
       this.loadRemoteData('THUMBNAIL').subscribe((thumbnailsRD) => {
-        console.log(bitstreamsRD,thumbnailsRD)
         for (let index = 0; index < bitstreamsRD.payload.page.length; index++) {
           this.bitstreamFormatDataService
             .findByBitstream(bitstreamsRD.payload.page[index])

yarn.lock

@@ -985,6 +985,11 @@
   resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.2.tgz#26520bf09abe4a5644cd5414e37125a8954241dd"
   integrity sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==
 
+"@kolkov/ngx-gallery@^1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@kolkov/ngx-gallery/-/ngx-gallery-1.2.3.tgz#bb15d4b64a5c03905677aa4ca741835aabe41f43"
+  integrity sha512-Dpnhwq3DGPSXrNt65gexo+/Smb2L0bne14A0WONN04+racETtcY33fqFvNWfRw5Nvk2Eza+sq95eEA0NbgF/6g==
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -6928,11 +6933,6 @@ ngx-bootstrap@^5.3.2:
   resolved "https://registry.yarnpkg.com/ngx-bootstrap/-/ngx-bootstrap-5.3.2.tgz#0668b01202610657e998b3ca87669645e0b31dc9"
   integrity sha512-gSMf8EXYl99Q3gqkq4RVhoTNSTYHz2Or6Cig2BJRbLJyqk15ZQE5qcq/ldHS8zzx/wgCA3HQeI63t2j2mEU9PA==
 
-ngx-gallery@^5.10.0:
-  version "5.10.0"
-  resolved "https://registry.yarnpkg.com/ngx-gallery/-/ngx-gallery-5.10.0.tgz#21f623cb788578dbb5a3625c869712de2b95258c"
-  integrity sha512-+2DnsBfkIzNQoReOHf6+OMf06+qyQQMyVVN4iQAtL0+KykjVqDZiBwLQtmwajDWMGph6O1HNKLrqTcmgqw+d2A==
-
 ngx-infinite-scroll@6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/ngx-infinite-scroll/-/ngx-infinite-scroll-6.0.1.tgz#571e54860ce32839451569bcf6e7a63cfae327bd"