diff --git a/package.json b/package.json
index ddbcf5d719..bff7c22daa 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/+item-page/item-page.module.ts b/src/app/+item-page/item-page.module.ts
index 06dd6a4262..e9744857d6 100644
--- a/src/app/+item-page/item-page.module.ts
+++ b/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: [
diff --git a/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.html b/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.html
index b0398830a8..63c7abe42e 100644
--- a/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.html
+++ b/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.html
@@ -1 +1,7 @@
-
+
+
+
diff --git a/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.scss b/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.scss
index e69de29bb2..a0c6fe3fd7 100644
--- a/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.scss
+++ b/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; }
diff --git a/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.spec.ts b/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.spec.ts
index 35a7835cd1..ea8bf3d874 100644
--- a/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.spec.ts
+++ b/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;
- 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 = [
- {
- image: true,
- imageSize: 'contain',
- thumbnails: false,
- imageArrows: false,
- width: '340px',
- height: '279px',
- },
+ component.galleryOptions = [new NgxGalleryOptions({})];
+ component.galleryImages = [
+ new NgxGalleryImage({
+ small: './assets/images/banner.jpg',
+ medium: './assets/images/banner.jpg',
+ big: './assets/images/banner.jpg',
+ }),
+ 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();
});
-
});
diff --git a/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts b/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts
index 06952fa4cd..05d7e824dd 100644
--- a/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts
+++ b/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 { NgxGalleryOptions, NgxGalleryImage } from 'ngx-gallery';
+import { NgxGalleryImage, NgxGalleryOptions } from '@kolkov/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) {
diff --git a/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.spec.ts b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.spec.ts
index 48935880de..45ce472db2 100644
--- a/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.spec.ts
+++ b/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(),
+ [
+ { 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();
});
diff --git a/src/app/+item-page/media-viewer/media-viewer.component.spec.ts b/src/app/+item-page/media-viewer/media-viewer.component.spec.ts
index c487facafd..8ab006f4fc 100644
--- a/src/app/+item-page/media-viewer/media-viewer.component.spec.ts
+++ b/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],
diff --git a/src/app/+item-page/media-viewer/media-viewer.component.ts b/src/app/+item-page/media-viewer/media-viewer.component.ts
index ee17f01110..3f12f73d6a 100644
--- a/src/app/+item-page/media-viewer/media-viewer.component.ts
+++ b/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])
diff --git a/yarn.lock b/yarn.lock
index 261651bb18..fa0109f53c 100644
--- a/yarn.lock
+++ b/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"