From a157552a13033ad2bf6f721511e0bb8b26b4fe30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1niel=20P=C3=A9ter=20Sipos?= Date: Thu, 8 Oct 2020 14:15:16 +0200 Subject: [PATCH 01/41] #885 add media viewer --- package.json | 1 + src/app/+item-page/item-page.module.ts | 21 ++-- .../media-viewer-image.component.html | 1 + .../media-viewer-image.component.scss | 0 .../media-viewer-image.component.spec.ts | 41 +++++++ .../media-viewer-image.component.ts | 43 +++++++ .../media-viewer-video.component.html | 48 ++++++++ .../media-viewer-video.component.scss | 4 + .../media-viewer-video.component.spec.ts | 46 ++++++++ .../media-viewer-video.component.ts | 38 +++++++ .../media-viewer/media-viewer.component.html | 19 ++++ .../media-viewer/media-viewer.component.scss | 0 .../media-viewer.component.spec.ts | 106 ++++++++++++++++++ .../media-viewer/media-viewer.component.ts | 76 +++++++++++++ .../publication/publication.component.html | 5 +- .../core/shared/media-viewer-item.model.ts | 21 ++++ src/assets/i18n/en.json5 | 7 ++ src/assets/images/replacement_audio.svg | 9 ++ src/assets/images/replacement_document.svg | 9 ++ src/assets/images/replacement_image.svg | 9 ++ src/assets/images/replacement_video.svg | 9 ++ src/environments/environment.common.ts | 6 +- yarn.lock | 5 + 23 files changed, 511 insertions(+), 13 deletions(-) create mode 100644 src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.html create mode 100644 src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.scss create mode 100644 src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.spec.ts create mode 100644 src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts create mode 100644 src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.html create mode 100644 src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.scss create mode 100644 src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.spec.ts create mode 100644 src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts create mode 100644 src/app/+item-page/media-viewer/media-viewer.component.html create mode 100644 src/app/+item-page/media-viewer/media-viewer.component.scss create mode 100644 src/app/+item-page/media-viewer/media-viewer.component.spec.ts create mode 100644 src/app/+item-page/media-viewer/media-viewer.component.ts create mode 100644 src/app/core/shared/media-viewer-item.model.ts create mode 100644 src/assets/images/replacement_audio.svg create mode 100644 src/assets/images/replacement_document.svg create mode 100644 src/assets/images/replacement_image.svg create mode 100644 src/assets/images/replacement_video.svg diff --git a/package.json b/package.json index ae4abd2e41..ddbcf5d719 100644 --- a/package.json +++ b/package.json @@ -104,6 +104,7 @@ "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 4c3a64e117..06dd6a4262 100644 --- a/src/app/+item-page/item-page.module.ts +++ b/src/app/+item-page/item-page.module.ts @@ -31,6 +31,11 @@ import { TabbedRelatedEntitiesSearchComponent } from './simple/related-entities/ import { StatisticsModule } from '../statistics/statistics.module'; import { AbstractIncrementalListComponent } from './simple/abstract-incremental-list/abstract-incremental-list.component'; +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'; + @NgModule({ imports: [ CommonModule, @@ -38,7 +43,8 @@ import { AbstractIncrementalListComponent } from './simple/abstract-incremental- ItemPageRoutingModule, EditItemPageModule, SearchPageModule, - StatisticsModule.forRoot() + StatisticsModule.forRoot(), + NgxGalleryModule, ], declarations: [ ItemPageComponent, @@ -62,6 +68,9 @@ import { AbstractIncrementalListComponent } from './simple/abstract-incremental- UploadBitstreamComponent, TabbedRelatedEntitiesSearchComponent, AbstractIncrementalListComponent, + MediaViewerComponent, + MediaViewerVideoComponent, + MediaViewerImageComponent, ], exports: [ ItemComponent, @@ -72,12 +81,8 @@ import { AbstractIncrementalListComponent } from './simple/abstract-incremental- RelatedItemsComponent, MetadataRepresentationListComponent, ItemPageTitleFieldComponent, - TabbedRelatedEntitiesSearchComponent + TabbedRelatedEntitiesSearchComponent, ], - entryComponents: [ - PublicationComponent - ] + entryComponents: [PublicationComponent], }) -export class ItemPageModule { - -} +export class ItemPageModule {} 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 new file mode 100644 index 0000000000..b0398830a8 --- /dev/null +++ b/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.html @@ -0,0 +1 @@ + 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 new file mode 100644 index 0000000000..e69de29bb2 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 new file mode 100644 index 0000000000..2cc02bd2ac --- /dev/null +++ b/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.spec.ts @@ -0,0 +1,41 @@ +import { DebugElement } from '@angular/core'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; + +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(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MediaViewerImageComponent); + component = fixture.componentInstance; + component.galleryOptions = [ + { + image: true, + imageSize: 'contain', + thumbnails: false, + imageArrows: false, + width: '340px', + height: '279px', + }, + ]; + debugElement = fixture.debugElement.query(By.css('ngx-gallery')); + htmlElement = debugElement.nativeElement; + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + describe; +}); 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 new file mode 100644 index 0000000000..78fef69765 --- /dev/null +++ b/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts @@ -0,0 +1,43 @@ +import { Component, Input, OnInit } from '@angular/core'; + +import { NgxGalleryOptions, NgxGalleryImage } from 'ngx-gallery'; +import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model'; + +@Component({ + selector: 'ds-media-viewer-image', + templateUrl: './media-viewer-image.component.html', + styleUrls: ['./media-viewer-image.component.scss'], +}) +export class MediaViewerImageComponent implements OnInit { + @Input() images: MediaViewerItem[]; + constructor() {} + + galleryOptions: NgxGalleryOptions[]; + galleryImages: NgxGalleryImage[]; + + ngOnInit(): void { + this.galleryImages = new Array(); + this.galleryOptions = [ + { + image: true, + imageSize: 'contain', + thumbnails: false, + imageArrows: false, + width: '340px', + height: '279px', + }, + ]; + for (const image of this.images) { + this.galleryImages = [ + ...this.galleryImages, + { + small: image.thumbnail + ? image.thumbnail + : './assets/images/replacements_image.svg', + medium: image.bitstream._links.content.href, + big: image.bitstream._links.content.href, + }, + ]; + } + } +} diff --git a/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.html b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.html new file mode 100644 index 0000000000..ec813a3116 --- /dev/null +++ b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.html @@ -0,0 +1,48 @@ + + +
+ + + +
+ +
+ +
+
+
+ diff --git a/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.scss b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.scss new file mode 100644 index 0000000000..7702da7361 --- /dev/null +++ b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.scss @@ -0,0 +1,4 @@ +video { + width: 340px; + height: 279px; +} 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 new file mode 100644 index 0000000000..48935880de --- /dev/null +++ b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.spec.ts @@ -0,0 +1,46 @@ +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 { 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 { MediaViewerVideoComponent } from './media-viewer-video.component'; + +describe('MediaViewerVideoComponent', () => { + let component: MediaViewerVideoComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useClass: TranslateLoaderMock, + }, + }), + BrowserAnimationsModule, + ], + declarations: [ + MediaViewerVideoComponent, + VarDirective, + FileSizePipe, + MetadataFieldWrapperComponent, + ], + schemas: [NO_ERRORS_SCHEMA], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MediaViewerVideoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts new file mode 100644 index 0000000000..12a55979bf --- /dev/null +++ b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts @@ -0,0 +1,38 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model'; + +@Component({ + selector: 'ds-media-viewer-video', + templateUrl: './media-viewer-video.component.html', + styleUrls: ['./media-viewer-video.component.scss'], +}) +export class MediaViewerVideoComponent implements OnInit { + @Input() medias: MediaViewerItem[]; + + isCollapsed: boolean; + currentIndex = 0; + + replacements = { + video: './assets/images/replacement_video.svg', + audio: './assets/images/replacement_audio.svg', + document: './assets/images/replacement_document.svg', + }; + + replacementThumbnail: string; + constructor() {} + + ngOnInit() { + this.isCollapsed = false; + } + + selectedMedia(index: number) { + console.log(index); + this.currentIndex = index; + } + nextMedia() { + this.currentIndex++; + } + prevMedia() { + this.currentIndex--; + } +} diff --git a/src/app/+item-page/media-viewer/media-viewer.component.html b/src/app/+item-page/media-viewer/media-viewer.component.html new file mode 100644 index 0000000000..dd901e2230 --- /dev/null +++ b/src/app/+item-page/media-viewer/media-viewer.component.html @@ -0,0 +1,19 @@ + + +
+ + + + + + +
+ diff --git a/src/app/+item-page/media-viewer/media-viewer.component.scss b/src/app/+item-page/media-viewer/media-viewer.component.scss new file mode 100644 index 0000000000..e69de29bb2 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 new file mode 100644 index 0000000000..c487facafd --- /dev/null +++ b/src/app/+item-page/media-viewer/media-viewer.component.spec.ts @@ -0,0 +1,106 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { Bitstream } from '../../core/shared/bitstream.model'; +import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils'; +import { createPaginatedList } from '../../shared/testing/utils.test'; +import { of as observableOf } from 'rxjs'; +import { By } from '@angular/platform-browser'; +import { MediaViewerComponent } from './media-viewer.component'; +import { MockBitstreamFormat1 } from '../../shared/mocks/item.mock'; +import { TranslateLoader, TranslateModule } from '@ngx-translate/core'; +import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { BitstreamDataService } from '../../core/data/bitstream-data.service'; +import { NO_ERRORS_SCHEMA } from '@angular/core'; +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'; + +describe('MediaViewerComponent', () => { + let comp: MediaViewerComponent; + let fixture: ComponentFixture; + + const bitstreamDataService = jasmine.createSpyObj('bitstreamDataService', { + findAllByItemAndBundleName: createSuccessfulRemoteDataObject$( + createPaginatedList([]) + ), + }); + + 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 mockMediaViewerItem: MediaViewerItem = Object.assign( + new MediaViewerItem(), + { bitstream: mockBitstream, format: 'image', thumbnail: null } + ); + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useClass: TranslateLoaderMock, + }, + }), + BrowserAnimationsModule, + ], + declarations: [ + MediaViewerComponent, + VarDirective, + FileSizePipe, + MetadataFieldWrapperComponent, + ], + providers: [ + { provide: BitstreamDataService, useValue: bitstreamDataService }, + ], + + schemas: [NO_ERRORS_SCHEMA], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MediaViewerComponent); + comp = fixture.componentInstance; + fixture.detectChanges(); + }); + + describe('when the bitstreams are loading', () => { + beforeEach(() => { + comp.mediaList$.next([mockMediaViewerItem]); + comp.isLoading = true; + fixture.detectChanges(); + }); + + it('should display a loading component', () => { + const loading = fixture.debugElement.query(By.css('ds-loading')); + expect(loading.nativeElement).toBeDefined(); + }); + }); +}); diff --git a/src/app/+item-page/media-viewer/media-viewer.component.ts b/src/app/+item-page/media-viewer/media-viewer.component.ts new file mode 100644 index 0000000000..c6c336826a --- /dev/null +++ b/src/app/+item-page/media-viewer/media-viewer.component.ts @@ -0,0 +1,76 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { BehaviorSubject, Observable } from 'rxjs'; +import { filter, takeWhile } from 'rxjs/operators'; +import { BitstreamDataService } from '../../core/data/bitstream-data.service'; +import { BitstreamFormatDataService } from '../../core/data/bitstream-format-data.service'; +import { PaginatedList } from '../../core/data/paginated-list'; +import { RemoteData } from '../../core/data/remote-data'; +import { Bitstream } from '../../core/shared/bitstream.model'; +import { Item } from '../../core/shared/item.model'; +import { MediaViewerItem } from '../../core/shared/media-viewer-item.model'; +import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators'; +import { hasNoValue, hasValue } from '../../shared/empty.util'; + +@Component({ + selector: 'ds-media-viewer', + templateUrl: './media-viewer.component.html', + styleUrls: ['./media-viewer.component.scss'], +}) +export class MediaViewerComponent implements OnInit { + @Input() item: Item; + + mediaList$: BehaviorSubject; + + isLoading: boolean; + + constructor( + protected bitstreamDataService: BitstreamDataService, + protected bitstreamFormatDataService: BitstreamFormatDataService + ) {} + + ngOnInit(): void { + this.mediaList$ = new BehaviorSubject([]); + this.isLoading = true; + + this.loadRemoteData('ORIGINAL').subscribe((bitstreamsRD) => { + console.log(bitstreamsRD); + this.loadRemoteData('THUMBNAIL').subscribe((thumbnailsRD) => { + for (let index = 0; index < bitstreamsRD.payload.page.length; index++) { + this.bitstreamFormatDataService + .findByBitstream(bitstreamsRD.payload.page[index]) + .pipe(getFirstSucceededRemoteDataPayload()) + .subscribe((format) => { + const current = this.mediaList$.getValue(); + const mediaItem = new MediaViewerItem(); + mediaItem.bitstream = bitstreamsRD.payload.page[index]; + mediaItem.format = format.mimetype.split('/')[0]; + mediaItem.thumbnail = + thumbnailsRD.payload && thumbnailsRD.payload.page[index] + ? thumbnailsRD.payload.page[index]._links.content.href + : null; + this.mediaList$.next([...current, mediaItem]); + }); + } + this.isLoading = false; + }); + }); + } + + loadRemoteData( + bundleName: string + ): Observable>> { + return this.bitstreamDataService + .findAllByItemAndBundleName(this.item, bundleName) + .pipe( + filter((bitstreamsRD: RemoteData>) => + hasValue(bitstreamsRD) + ), + takeWhile( + (bitstreamsRD_1: RemoteData>) => + hasNoValue(bitstreamsRD_1.payload) && + hasNoValue(bitstreamsRD_1.error), + true + ) + ); + } +} diff --git a/src/app/+item-page/simple/item-types/publication/publication.component.html b/src/app/+item-page/simple/item-types/publication/publication.component.html index 9eb704b9e9..4b802ac583 100644 --- a/src/app/+item-page/simple/item-types/publication/publication.component.html +++ b/src/app/+item-page/simple/item-types/publication/publication.component.html @@ -3,9 +3,10 @@
- + + diff --git a/src/app/core/shared/media-viewer-item.model.ts b/src/app/core/shared/media-viewer-item.model.ts new file mode 100644 index 0000000000..cd3a31bd0b --- /dev/null +++ b/src/app/core/shared/media-viewer-item.model.ts @@ -0,0 +1,21 @@ +import { Bitstream } from './bitstream.model'; + +/** + * Model representing a media viewer item + */ +export class MediaViewerItem { + /** + * Incoming Bitsream + */ + bitstream: Bitstream; + + /** + * Incoming Bitsream format type + */ + format: string; + + /** + * Incoming Bitsream thumbnail + */ + thumbnail: string; +} diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index 369d3e0e63..b9ef252fe3 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -2449,6 +2449,13 @@ "publication.search.results.head": "Publication Search Results", "publication.search.title": "DSpace Angular :: Publication Search", + + + "media-viewer.next": "Next", + + "media-viewer.previus": "Previus", + + "media-viewer.playlist": "Playlist", "register-email.title": "New user registration", diff --git a/src/assets/images/replacement_audio.svg b/src/assets/images/replacement_audio.svg new file mode 100644 index 0000000000..03899914c9 --- /dev/null +++ b/src/assets/images/replacement_audio.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/replacement_document.svg b/src/assets/images/replacement_document.svg new file mode 100644 index 0000000000..f684ca9597 --- /dev/null +++ b/src/assets/images/replacement_document.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/replacement_image.svg b/src/assets/images/replacement_image.svg new file mode 100644 index 0000000000..b6817cf7fc --- /dev/null +++ b/src/assets/images/replacement_image.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/replacement_video.svg b/src/assets/images/replacement_video.svg new file mode 100644 index 0000000000..1972b25eca --- /dev/null +++ b/src/assets/images/replacement_video.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/environments/environment.common.ts b/src/environments/environment.common.ts index 4f73339690..58a8443b6c 100644 --- a/src/environments/environment.common.ts +++ b/src/environments/environment.common.ts @@ -17,9 +17,9 @@ export const environment: GlobalConfig = { // The REST API server settings. // NOTE: these must be "synced" with the 'dspace.server.url' setting in your backend's local.cfg. rest: { - ssl: true, - host: 'dspace7.4science.cloud', - port: 443, + ssl: false, + host: 'localhost', + port: 8080, // NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript nameSpace: '/server', }, diff --git a/yarn.lock b/yarn.lock index d44182cc51..261651bb18 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6928,6 +6928,11 @@ 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" From a740453e887f2a54f0dbfbb8fc1c2c116beea2fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1niel=20P=C3=A9ter=20Sipos?= Date: Thu, 8 Oct 2020 14:45:37 +0200 Subject: [PATCH 02/41] #885 fix gallery --- src/app/app.component.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/app/app.component.scss b/src/app/app.component.scss index b18e7e1402..327998923f 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -39,10 +39,6 @@ body { margin: 0; } -ds-header-navbar-wrapper { - z-index: $nav-z-index; -} - ds-admin-sidebar { position: fixed; z-index: $sidebar-z-index; @@ -51,3 +47,8 @@ ds-admin-sidebar { .ds-full-screen-loader { height: 100vh; } + +.sticky-top{ + z-index: 0; +} + From 55cca0538a494adf6df852148266138fab84c24c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1niel=20P=C3=A9ter=20Sipos?= Date: Thu, 8 Oct 2020 15:43:31 +0200 Subject: [PATCH 03/41] #885 fix for linter --- .../media-viewer-image.component.spec.ts | 1 - .../media-viewer-image.component.ts | 1 - .../media-viewer-video.component.ts | 1 - .../media-viewer/media-viewer.component.ts | 18 ++++++++---------- 4 files changed, 8 insertions(+), 13 deletions(-) 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 2cc02bd2ac..35a7835cd1 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 @@ -37,5 +37,4 @@ describe('MediaViewerImageComponent', () => { expect(component).toBeTruthy(); }); - describe; }); 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 78fef69765..06952fa4cd 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 @@ -10,7 +10,6 @@ import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model'; }) export class MediaViewerImageComponent implements OnInit { @Input() images: MediaViewerItem[]; - constructor() {} galleryOptions: NgxGalleryOptions[]; galleryImages: NgxGalleryImage[]; diff --git a/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts index 12a55979bf..0cf2decc67 100644 --- a/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts +++ b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts @@ -19,7 +19,6 @@ export class MediaViewerVideoComponent implements OnInit { }; replacementThumbnail: string; - constructor() {} ngOnInit() { this.isCollapsed = false; 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 c6c336826a..ee17f01110 100644 --- a/src/app/+item-page/media-viewer/media-viewer.component.ts +++ b/src/app/+item-page/media-viewer/media-viewer.component.ts @@ -1,6 +1,6 @@ import { Component, Input, OnInit } from '@angular/core'; import { BehaviorSubject, Observable } from 'rxjs'; -import { filter, takeWhile } from 'rxjs/operators'; +import { filter, take } from 'rxjs/operators'; import { BitstreamDataService } from '../../core/data/bitstream-data.service'; import { BitstreamFormatDataService } from '../../core/data/bitstream-format-data.service'; import { PaginatedList } from '../../core/data/paginated-list'; @@ -9,7 +9,7 @@ import { Bitstream } from '../../core/shared/bitstream.model'; import { Item } from '../../core/shared/item.model'; import { MediaViewerItem } from '../../core/shared/media-viewer-item.model'; import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators'; -import { hasNoValue, hasValue } from '../../shared/empty.util'; +import { hasValue } from '../../shared/empty.util'; @Component({ selector: 'ds-media-viewer', @@ -35,6 +35,7 @@ export class MediaViewerComponent implements OnInit { 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]) @@ -62,15 +63,12 @@ export class MediaViewerComponent implements OnInit { return this.bitstreamDataService .findAllByItemAndBundleName(this.item, bundleName) .pipe( - filter((bitstreamsRD: RemoteData>) => - hasValue(bitstreamsRD) + filter( + (bitstreamsRD: RemoteData>) => + hasValue(bitstreamsRD) && + (hasValue(bitstreamsRD.error) || hasValue(bitstreamsRD.payload)) ), - takeWhile( - (bitstreamsRD_1: RemoteData>) => - hasNoValue(bitstreamsRD_1.payload) && - hasNoValue(bitstreamsRD_1.error), - true - ) + take(1) ); } } From cfe6eb6e61094d32514b4e66023f3aeb3121d6d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1niel=20P=C3=A9ter=20Sipos?= Date: Thu, 8 Oct 2020 15:46:59 +0200 Subject: [PATCH 04/41] #885 fix enviroment --- src/environments/environment.common.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/environments/environment.common.ts b/src/environments/environment.common.ts index 58a8443b6c..4f73339690 100644 --- a/src/environments/environment.common.ts +++ b/src/environments/environment.common.ts @@ -17,9 +17,9 @@ export const environment: GlobalConfig = { // The REST API server settings. // NOTE: these must be "synced" with the 'dspace.server.url' setting in your backend's local.cfg. rest: { - ssl: false, - host: 'localhost', - port: 8080, + ssl: true, + host: 'dspace7.4science.cloud', + port: 443, // NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript nameSpace: '/server', }, From 88a64b1bd70fbf21c65d85ca94b897a42f3c8528 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1niel=20P=C3=A9ter=20Sipos?= Date: Fri, 9 Oct 2020 14:25:44 +0200 Subject: [PATCH 05/41] #855 fix tests and add angular 8 compatible gallery --- package.json | 2 +- src/app/+item-page/item-page.module.ts | 2 +- .../media-viewer-image.component.html | 8 +++- .../media-viewer-image.component.scss | 1 + .../media-viewer-image.component.spec.ts | 32 +++++++------- .../media-viewer-image.component.ts | 6 ++- .../media-viewer-video.component.spec.ts | 43 ++++++++++++++++++- .../media-viewer.component.spec.ts | 9 ++++ .../media-viewer/media-viewer.component.ts | 2 - yarn.lock | 10 ++--- 10 files changed, 86 insertions(+), 29 deletions(-) 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" From c044f458e1dc35ca5348a19bd5171f0cd4efb3c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1niel=20P=C3=A9ter=20Sipos?= Date: Fri, 9 Oct 2020 14:28:24 +0200 Subject: [PATCH 06/41] #885 fix lint --- .../media-viewer-image.component.spec.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) 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 ea8bf3d874..623d98b6c3 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,6 +1,5 @@ -import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core'; +import { 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'; @@ -12,8 +11,8 @@ describe('MediaViewerImageComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [MediaViewerImageComponent], - schemas: [NO_ERRORS_SCHEMA] - }).compileComponents(); + schemas: [NO_ERRORS_SCHEMA], + }).compileComponents(); })); beforeEach(() => { From f46c8ef7b3b2ecc2ea72b984278e5a703f96913e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1niel=20P=C3=A9ter=20Sipos?= Date: Mon, 12 Oct 2020 11:02:21 +0200 Subject: [PATCH 07/41] QREPO-110 add commnets --- .../media-viewer-image.component.ts | 7 ++- .../media-viewer-video.component.html | 6 +-- .../media-viewer-video.component.spec.ts | 45 ++++++++++++++++++- .../media-viewer-video.component.ts | 15 +++++++ .../media-viewer/media-viewer.component.ts | 14 ++++++ 5 files changed, 82 insertions(+), 5 deletions(-) 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 05d7e824dd..455c452cc6 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 @@ -2,7 +2,9 @@ import { Component, Input, OnInit } from '@angular/core'; import { NgxGalleryImage, NgxGalleryOptions } from '@kolkov/ngx-gallery'; import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model'; import { NgxGalleryAnimation } from '@kolkov/ngx-gallery'; - +/** + * This componenet render an image gallery for the image viewer + */ @Component({ selector: 'ds-media-viewer-image', templateUrl: './media-viewer-image.component.html', @@ -14,6 +16,9 @@ export class MediaViewerImageComponent implements OnInit { galleryOptions: NgxGalleryOptions[]; galleryImages: NgxGalleryImage[]; + /** + * Thi method sets up the gallery settings and data + */ ngOnInit(): void { this.galleryImages = new Array(); this.galleryOptions = [ diff --git a/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.html b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.html index ec813a3116..3fd09a5d5b 100644 --- a/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.html +++ b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.html @@ -12,7 +12,7 @@ >
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 811445b864..866b0cb1cf 100644 --- a/src/app/+item-page/media-viewer/media-viewer.component.ts +++ b/src/app/+item-page/media-viewer/media-viewer.component.ts @@ -28,6 +28,8 @@ export class MediaViewerComponent implements OnInit { isLoading: boolean; + thumbnailPlaceholder = './assets/images/replacement_document.svg'; + constructor( protected bitstreamDataService: BitstreamDataService, protected bitstreamFormatDataService: BitstreamFormatDataService @@ -84,7 +86,6 @@ export class MediaViewerComponent implements OnInit { format: BitstreamFormat, thumbnail: Bitstream ): MediaViewerItem { - console.log(original, format, thumbnail); const mediaItem = new MediaViewerItem(); mediaItem.bitstream = original; mediaItem.format = format.mimetype.split('/')[0]; From 401bbf3a8ea0ca75c587bcd50a797b7ccd589800 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1niel=20P=C3=A9ter=20Sipos?= Date: Tue, 13 Oct 2020 13:38:30 +0200 Subject: [PATCH 12/41] #885 fix default tumbnail --- src/app/+item-page/media-viewer/media-viewer.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/+item-page/media-viewer/media-viewer.component.html b/src/app/+item-page/media-viewer/media-viewer.component.html index 8f6d5ffa8c..60af6887ae 100644 --- a/src/app/+item-page/media-viewer/media-viewer.component.html +++ b/src/app/+item-page/media-viewer/media-viewer.component.html @@ -17,8 +17,8 @@ From 4312776b2d0b8fdff67e6b48673ce18ca62662fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1niel=20P=C3=A9ter=20Sipos?= Date: Tue, 3 Nov 2020 10:59:31 +0100 Subject: [PATCH 13/41] #885 fix loading bitstream format --- .../media-viewer-image.component.ts | 4 +++- .../media-viewer/media-viewer.component.scss | 4 ++++ .../media-viewer/media-viewer.component.spec.ts | 13 ------------- .../media-viewer/media-viewer.component.ts | 10 ++++------ 4 files changed, 11 insertions(+), 20 deletions(-) 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 b66ab791c8..7dbef894cd 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 @@ -46,7 +46,9 @@ export class MediaViewerImageComponent implements OnInit { small: image.thumbnail ? image.thumbnail : './assets/images/replacement_image.svg', - medium: image.bitstream._links.content.href, + medium: image.thumbnail + ? image.thumbnail + : './assets/images/replacement_image.svg', big: image.bitstream._links.content.href, }); } diff --git a/src/app/+item-page/media-viewer/media-viewer.component.scss b/src/app/+item-page/media-viewer/media-viewer.component.scss index e69de29bb2..84259b424d 100644 --- a/src/app/+item-page/media-viewer/media-viewer.component.scss +++ b/src/app/+item-page/media-viewer/media-viewer.component.scss @@ -0,0 +1,4 @@ +.media-viewer{ + width: 340px; + height: 279px; +} 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 7bf31db965..1f3d410f3e 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,8 +15,6 @@ 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; @@ -57,13 +55,6 @@ describe('MediaViewerComponent', () => { ), }); - const bitstreamFormatDataService = jasmine.createSpyObj( - 'bitstreamFormatDataService', - { - findByBitstream: createSuccessfulRemoteDataObject$(new BitstreamFormat()), - } - ); - const mockMediaViewerItem: MediaViewerItem = Object.assign( new MediaViewerItem(), { bitstream: mockBitstream, format: 'image', thumbnail: null } @@ -88,10 +79,6 @@ 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 866b0cb1cf..938ad6c2d6 100644 --- a/src/app/+item-page/media-viewer/media-viewer.component.ts +++ b/src/app/+item-page/media-viewer/media-viewer.component.ts @@ -2,7 +2,6 @@ import { Component, Input, OnInit } from '@angular/core'; import { BehaviorSubject, Observable } from 'rxjs'; import { filter, take } from 'rxjs/operators'; import { BitstreamDataService } from '../../core/data/bitstream-data.service'; -import { BitstreamFormatDataService } from '../../core/data/bitstream-format-data.service'; import { PaginatedList } from '../../core/data/paginated-list'; import { RemoteData } from '../../core/data/remote-data'; import { BitstreamFormat } from '../../core/shared/bitstream-format.model'; @@ -11,6 +10,7 @@ import { Item } from '../../core/shared/item.model'; import { MediaViewerItem } from '../../core/shared/media-viewer-item.model'; import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators'; import { hasValue } from '../../shared/empty.util'; +import { followLink } from '../../shared/utils/follow-link-config.model'; /** * This componenet renders the media viewers @@ -32,7 +32,6 @@ export class MediaViewerComponent implements OnInit { constructor( protected bitstreamDataService: BitstreamDataService, - protected bitstreamFormatDataService: BitstreamFormatDataService ) {} /** @@ -44,9 +43,8 @@ export class MediaViewerComponent implements OnInit { this.loadRemoteData('ORIGINAL').subscribe((bitstreamsRD) => { this.loadRemoteData('THUMBNAIL').subscribe((thumbnailsRD) => { for (let index = 0; index < bitstreamsRD.payload.page.length; index++) { - this.bitstreamFormatDataService - .findByBitstream(bitstreamsRD.payload.page[index]) - .pipe(getFirstSucceededRemoteDataPayload()) + bitstreamsRD.payload.page[index].format + .pipe(getFirstSucceededRemoteDataPayload()) .subscribe((format) => { const current = this.mediaList$.getValue(); const mediaItem = this.createMediaViewerItem( @@ -70,7 +68,7 @@ export class MediaViewerComponent implements OnInit { bundleName: string ): Observable>> { return this.bitstreamDataService - .findAllByItemAndBundleName(this.item, bundleName) + .findAllByItemAndBundleName(this.item, bundleName, {}, followLink('format')) .pipe( filter( (bitstreamsRD: RemoteData>) => From 66f0b5f77d9ec4556618b0f36c8453e14667dfd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1niel=20P=C3=A9ter=20Sipos?= Date: Tue, 3 Nov 2020 11:15:16 +0100 Subject: [PATCH 14/41] #885 fix thumbnail size --- src/app/+item-page/media-viewer/media-viewer.component.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/app/+item-page/media-viewer/media-viewer.component.scss b/src/app/+item-page/media-viewer/media-viewer.component.scss index 84259b424d..c2b7823e6c 100644 --- a/src/app/+item-page/media-viewer/media-viewer.component.scss +++ b/src/app/+item-page/media-viewer/media-viewer.component.scss @@ -1,4 +1,8 @@ .media-viewer{ width: 340px; height: 279px; + img{ + width: 100%; + height: 100%; + } } From 263c12e8f23fb9aa68a8260f7febddcfda41bfd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1niel=20P=C3=A9ter=20Sipos?= Date: Tue, 3 Nov 2020 13:27:17 +0100 Subject: [PATCH 15/41] #885 fix other thumbnail --- .../media-viewer-image.component.ts | 14 +++++++++++++- .../media-viewer/media-viewer.component.html | 2 +- .../media-viewer/media-viewer.component.scss | 9 +-------- 3 files changed, 15 insertions(+), 10 deletions(-) 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 7dbef894cd..ae9dc7b927 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 @@ -12,6 +12,7 @@ import { NgxGalleryAnimation } from '@kolkov/ngx-gallery'; }) export class MediaViewerImageComponent implements OnInit { @Input() images: MediaViewerItem[]; + @Input() image: string; galleryOptions: NgxGalleryOptions[]; galleryImages: NgxGalleryImage[]; @@ -32,7 +33,18 @@ export class MediaViewerImageComponent implements OnInit { imageAnimation: NgxGalleryAnimation.Slide, }, ]; - this.galleryImages = this.convertToGalleryImage(this.images); + + if (this.image) { + this.galleryImages = [ + { + small: this.image, + medium: this.image, + big: this.image, + }, + ]; + } else { + this.galleryImages = this.convertToGalleryImage(this.images); + } } /** diff --git a/src/app/+item-page/media-viewer/media-viewer.component.html b/src/app/+item-page/media-viewer/media-viewer.component.html index 60af6887ae..c6f0468e85 100644 --- a/src/app/+item-page/media-viewer/media-viewer.component.html +++ b/src/app/+item-page/media-viewer/media-viewer.component.html @@ -22,7 +22,7 @@ mediaList[0]?.format !== 'audio' " > - +
diff --git a/src/app/+item-page/media-viewer/media-viewer.component.scss b/src/app/+item-page/media-viewer/media-viewer.component.scss index c2b7823e6c..8b13789179 100644 --- a/src/app/+item-page/media-viewer/media-viewer.component.scss +++ b/src/app/+item-page/media-viewer/media-viewer.component.scss @@ -1,8 +1 @@ -.media-viewer{ - width: 340px; - height: 279px; - img{ - width: 100%; - height: 100%; - } -} + From ae079f06ed3753452b75a092ca80baadf2d341b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1niel=20P=C3=A9ter=20Sipos?= Date: Tue, 3 Nov 2020 16:09:34 +0100 Subject: [PATCH 16/41] #885 quick fix --- .../media-viewer-image/media-viewer-image.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 ae9dc7b927..b3993d2805 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 @@ -12,7 +12,7 @@ import { NgxGalleryAnimation } from '@kolkov/ngx-gallery'; }) export class MediaViewerImageComponent implements OnInit { @Input() images: MediaViewerItem[]; - @Input() image: string; + @Input() image?: string; galleryOptions: NgxGalleryOptions[]; galleryImages: NgxGalleryImage[]; From af79945fd865be08e027f065942e412da6770563 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1niel=20P=C3=A9ter=20Sipos?= Date: Fri, 6 Nov 2020 11:05:20 +0100 Subject: [PATCH 17/41] #885 add enviroment variable for media viewer --- .editorconfig | 3 ++ .../media-viewer-image.component.ts | 7 +++++ .../media-viewer-video.component.html | 6 ++-- .../media-viewer/media-viewer.component.html | 31 ++++++++++++------- .../media-viewer/media-viewer.component.ts | 15 ++++++--- .../publication/publication.component.html | 13 +++++--- .../item-types/shared/item.component.ts | 3 ++ src/app/app.component.scss | 5 +++ src/assets/i18n/en.json5 | 2 +- src/config/global-config.interface.ts | 6 ++-- src/config/media-viewer-config.interface.ts | 7 +++++ src/environments/environment.common.ts | 5 +++ 12 files changed, 76 insertions(+), 27 deletions(-) create mode 100644 src/config/media-viewer-config.interface.ts diff --git a/.editorconfig b/.editorconfig index 70ce43b68e..15d4c87b14 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,3 +12,6 @@ trim_trailing_whitespace = true [*.md] insert_final_newline = false trim_trailing_whitespace = false + +[*.ts] +quote_type = single 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 b3993d2805..9069658d86 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 @@ -12,6 +12,7 @@ import { NgxGalleryAnimation } from '@kolkov/ngx-gallery'; }) export class MediaViewerImageComponent implements OnInit { @Input() images: MediaViewerItem[]; + @Input() preview?: boolean; @Input() image?: string; galleryOptions: NgxGalleryOptions[]; @@ -21,8 +22,10 @@ export class MediaViewerImageComponent implements OnInit { * Thi method sets up the gallery settings and data */ ngOnInit(): void { + console.log(this.preview); this.galleryOptions = [ { + preview: this.preview !== undefined ? this.preview : true, image: true, imageSize: 'contain', thumbnails: false, @@ -31,6 +34,10 @@ export class MediaViewerImageComponent implements OnInit { height: '279px', startIndex: 0, imageAnimation: NgxGalleryAnimation.Slide, + previewCloseOnEsc: true, + previewZoom: true, + previewRotate: true, + previewFullscreen: true, }, ]; diff --git a/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.html b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.html index e190475e84..9fb02c445a 100644 --- a/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.html +++ b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.html @@ -12,15 +12,15 @@ >
+ +
+ + +
-
+
-
- -
- +
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 337a358c3e..397f9d66e4 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,6 +1,6 @@ -@import '../styles/helpers/font_awesome_imports.scss'; -@import '../../node_modules/bootstrap/scss/bootstrap.scss'; -@import '../../node_modules/nouislider/distribute/nouislider.min'; +@import "../styles/helpers/font_awesome_imports.scss"; +@import "../../node_modules/bootstrap/scss/bootstrap.scss"; +@import "../../node_modules/nouislider/distribute/nouislider.min"; html { position: relative; @@ -48,12 +48,19 @@ ds-admin-sidebar { z-index: $sidebar-z-index; } - .ds-full-screen-loader { height: 100vh; } -.sticky-top{ +.sticky-top { z-index: 0; } +.media-viewer + .change-gallery + .ngx-gallery + ngx-gallery-preview.ngx-gallery-active { + right: 0; + left: auto; + width: 96%; +} From d17b8741562056ee28a949d6d23c904f732ef829 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1niel=20P=C3=A9ter=20Sipos?= Date: Fri, 6 Nov 2020 13:40:28 +0100 Subject: [PATCH 19/41] #885 remove auto play and filter unsupported media types --- .../media-viewer-image.component.ts | 20 ++++++++++--------- .../media-viewer-video.component.html | 14 ++++++------- .../media-viewer-video.component.ts | 5 +++++ 3 files changed, 23 insertions(+), 16 deletions(-) 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 f0a5962e1f..9d7b3da45a 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 @@ -73,15 +73,17 @@ export class MediaViewerImageComponent implements OnInit { convertToGalleryImage(medias: MediaViewerItem[]): NgxGalleryImage[] { const mappadImages = []; for (const image of medias) { - mappadImages.push({ - small: image.thumbnail - ? image.thumbnail - : './assets/images/replacement_image.svg', - medium: image.thumbnail - ? image.thumbnail - : './assets/images/replacement_image.svg', - big: image.bitstream._links.content.href, - }); + if (image.format === 'image') { + mappadImages.push({ + small: image.thumbnail + ? image.thumbnail + : './assets/images/replacement_image.svg', + medium: image.thumbnail + ? image.thumbnail + : './assets/images/replacement_image.svg', + big: image.bitstream._links.content.href, + }); + } } return mappadImages; } diff --git a/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.html b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.html index 1288af99b1..27d36c8a1b 100644 --- a/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.html +++ b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.html @@ -1,15 +1,15 @@ -
+
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 3681846aaa..3f9de8ed3e 100644 --- a/src/app/+item-page/media-viewer/media-viewer.component.ts +++ b/src/app/+item-page/media-viewer/media-viewer.component.ts @@ -97,7 +97,7 @@ export class MediaViewerComponent implements OnInit { /** * This method create MediaViewerItem from incoming bitstreams * @param original original remote data bitstream - * @param format original bitstream format + * @param format original bitstream format * @param thumbnail trunbnail remote data bitstream */ createMediaViewerItem( From 0488cd6b45b8796b738d98689b73f07554e5bdf6 Mon Sep 17 00:00:00 2001 From: lotte Date: Tue, 16 Mar 2021 18:01:47 +0100 Subject: [PATCH 35/41] Solved lgtm and regex sanitization issues --- src/app/core/auth/auth.interceptor.ts | 2 +- src/app/core/shared/metadata.utils.spec.ts | 8 ++++++++ src/app/core/shared/metadata.utils.ts | 2 +- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/app/core/auth/auth.interceptor.ts b/src/app/core/auth/auth.interceptor.ts index 31de304665..7b9a08de92 100644 --- a/src/app/core/auth/auth.interceptor.ts +++ b/src/app/core/auth/auth.interceptor.ts @@ -102,7 +102,7 @@ export class AuthInterceptor implements HttpInterceptor { private parseLocation(header: string): string { let location = header.trim(); location = location.replace('location="', ''); - location = location.replace('"', ''); + location = location.replace('"', ''); /* lgtm [js/incomplete-sanitization] */ let re = /%3A%2F%2F/g; location = location.replace(re, '://'); re = /%3A/g; diff --git a/src/app/core/shared/metadata.utils.spec.ts b/src/app/core/shared/metadata.utils.spec.ts index ec0b3dd3ba..d9068dd900 100644 --- a/src/app/core/shared/metadata.utils.spec.ts +++ b/src/app/core/shared/metadata.utils.spec.ts @@ -20,6 +20,7 @@ const dcTitle0 = mdValue('Title 0'); const dcTitle1 = mdValue('Title 1'); const dcTitle2 = mdValue('Title 2', 'en_US'); const bar = mdValue('Bar'); +const test = mdValue('Test'); const singleMap = { 'dc.title': [dcTitle0] }; @@ -30,6 +31,10 @@ const multiMap = { 'foo': [bar] }; +const regexTestMap = { + 'foolbar.baz': [test] +}; + const multiViewModelList = [ { key: 'dc.description', ...dcDescription, order: 0 }, { key: 'dc.description.abstract', ...dcAbstract, order: 0 }, @@ -98,6 +103,9 @@ describe('Metadata', () => { testAll([multiMap, singleMap], 'dc.*', [dcDescription, dcAbstract, dcTitle1, dcTitle2]); testAll([multiMap, singleMap], ['dc.title', 'dc.*'], [dcTitle1, dcTitle2, dcDescription, dcAbstract]); }); + describe('with regexTestMap', () => { + testAll(regexTestMap, 'foo.bar.*', []); + }); }); describe('allValues method', () => { diff --git a/src/app/core/shared/metadata.utils.ts b/src/app/core/shared/metadata.utils.ts index 612fba1d4a..6e69109dd7 100644 --- a/src/app/core/shared/metadata.utils.ts +++ b/src/app/core/shared/metadata.utils.ts @@ -156,7 +156,7 @@ export class Metadata { const outputKeys: string[] = []; for (const inputKey of inputKeys) { if (inputKey.includes('*')) { - const inputKeyRegex = new RegExp('^' + inputKey.replace('.', '\.').replace('*', '.*') + '$'); + const inputKeyRegex = new RegExp('^' + inputKey.replace('.', '\\.').replace('*', '.*') + '$'); for (const mapKey of Object.keys(mdMap)) { if (!outputKeys.includes(mapKey) && inputKeyRegex.test(mapKey)) { outputKeys.push(mapKey); From 0c99557010b5f8ce9762fc5c8418f1fcc63e7eb0 Mon Sep 17 00:00:00 2001 From: Samuel Date: Wed, 24 Mar 2021 16:46:05 +0100 Subject: [PATCH 36/41] fix #1067 UI sends wrong request when creating new metadata field without qualifier --- .../core/registry/registry.service.spec.ts | 38 +++++++++++++++++++ src/app/core/registry/registry.service.ts | 6 +++ 2 files changed, 44 insertions(+) diff --git a/src/app/core/registry/registry.service.spec.ts b/src/app/core/registry/registry.service.spec.ts index fdfe1c9fac..5f2f123f01 100644 --- a/src/app/core/registry/registry.service.spec.ts +++ b/src/app/core/registry/registry.service.spec.ts @@ -326,6 +326,25 @@ describe('RegistryService', () => { }); }); + describe('when createMetadataField is called with a blank qualifier', () => { + let result: Observable; + let metadataField: MetadataField; + + beforeEach(() => { + metadataField = mockFieldsList[0]; + metadataField.qualifier = ''; + result = registryService.createMetadataField(metadataField, mockSchemasList[0]); + }); + + it('should return the created metadata field with a null qualifier', (done) => { + metadataField.qualifier = null; + result.subscribe((field: MetadataField) => { + expect(field).toEqual(metadataField); + done(); + }); + }); + }); + describe('when updateMetadataField is called', () => { let result: Observable; @@ -341,6 +360,25 @@ describe('RegistryService', () => { }); }); + describe('when updateMetadataField is called with a blank qualifier', () => { + let result: Observable; + let metadataField: MetadataField; + + beforeEach(() => { + metadataField = mockFieldsList[0]; + metadataField.qualifier = ''; + result = registryService.updateMetadataField(metadataField); + }); + + it('should return the updated metadata field with a null qualifier', (done) => { + metadataField.qualifier = null; + result.subscribe((field: MetadataField) => { + expect(field).toEqual(metadataField); + done(); + }); + }); + }); + describe('when deleteMetadataSchema is called', () => { let result: Observable>; diff --git a/src/app/core/registry/registry.service.ts b/src/app/core/registry/registry.service.ts index 9ac849bdd3..b7b35c6a5a 100644 --- a/src/app/core/registry/registry.service.ts +++ b/src/app/core/registry/registry.service.ts @@ -245,6 +245,9 @@ export class RegistryService { * @param schema The MetadataSchema to create the field in */ public createMetadataField(field: MetadataField, schema: MetadataSchema): Observable { + if (!field.qualifier) { + field.qualifier = null; + } return this.metadataFieldService.create(field, new RequestParam('schemaId', schema.id)).pipe( getFirstSucceededRemoteDataPayload(), hasValueOperator(), @@ -260,6 +263,9 @@ export class RegistryService { * @param field The MetadataField to update */ public updateMetadataField(field: MetadataField): Observable { + if (!field.qualifier) { + field.qualifier = null; + } return this.metadataFieldService.put(field).pipe( getFirstSucceededRemoteDataPayload(), hasValueOperator(), From 064c43a763a9f267741cbb8ed67cbcbe2c5a627e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1niel=20P=C3=A9ter=20Sipos?= Date: Fri, 26 Mar 2021 18:01:12 +0100 Subject: [PATCH 37/41] #885 fix merge conflict --- src/app/+item-page/item-page.module.ts | 7 +++++++ src/styles/_global-styles.scss | 11 ++++++++++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/app/+item-page/item-page.module.ts b/src/app/+item-page/item-page.module.ts index fe326ddcf7..1c6cd83e9c 100644 --- a/src/app/+item-page/item-page.module.ts +++ b/src/app/+item-page/item-page.module.ts @@ -27,6 +27,10 @@ import { JournalEntitiesModule } from '../entity-groups/journal-entities/journal import { ResearchEntitiesModule } from '../entity-groups/research-entities/research-entities.module'; import { ThemedItemPageComponent } from './simple/themed-item-page.component'; import { ThemedFullItemPageComponent } from './full/themed-full-item-page.component'; +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'; const ENTRY_COMPONENTS = [ // put only entry components that use custom decorator @@ -54,6 +58,9 @@ const DECLARATIONS = [ ItemComponent, UploadBitstreamComponent, AbstractIncrementalListComponent, + MediaViewerComponent, + MediaViewerVideoComponent, + MediaViewerImageComponent ]; @NgModule({ diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss index b79cf52fbb..07eadee391 100644 --- a/src/styles/_global-styles.scss +++ b/src/styles/_global-styles.scss @@ -36,7 +36,7 @@ body { } ds-header-navbar-wrapper { - z-index: var(--ds-nav-z-index); + z-index: 0; } ds-admin-sidebar { @@ -47,3 +47,12 @@ ds-admin-sidebar { .ds-full-screen-loader { height: 100vh; } + +.media-viewer + .change-gallery + .ngx-gallery + ngx-gallery-preview.ngx-gallery-active { + right: 0; + left: auto; + width: 96%; +} From 35773353990dd2ea867885ca2c1ad525ac9f5911 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1niel=20P=C3=A9ter=20Sipos?= Date: Tue, 30 Mar 2021 13:48:03 +0200 Subject: [PATCH 38/41] #885 revert and fix width --- src/styles/_global-styles.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss index 07eadee391..dcf75227ce 100644 --- a/src/styles/_global-styles.scss +++ b/src/styles/_global-styles.scss @@ -36,7 +36,7 @@ body { } ds-header-navbar-wrapper { - z-index: 0; + z-index: var(--ds-nav-z-index); } ds-admin-sidebar { @@ -54,5 +54,5 @@ ds-admin-sidebar { ngx-gallery-preview.ngx-gallery-active { right: 0; left: auto; - width: 96%; + width: calc(100% - 53px); } From ff8ff7f4968428c441a8c2e4fd60b5c646e0c140 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1niel=20P=C3=A9ter=20Sipos?= Date: Wed, 31 Mar 2021 13:21:33 +0200 Subject: [PATCH 39/41] #885 fix media image viewer --- src/styles/_global-styles.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss index dcf75227ce..bf8efeca8b 100644 --- a/src/styles/_global-styles.scss +++ b/src/styles/_global-styles.scss @@ -35,10 +35,6 @@ body { margin: 0; } -ds-header-navbar-wrapper { - z-index: var(--ds-nav-z-index); -} - ds-admin-sidebar { position: fixed; z-index: var(--ds-sidebar-z-index); @@ -48,6 +44,10 @@ ds-admin-sidebar { height: 100vh; } +.sticky-top { + z-index: 0; +} + .media-viewer .change-gallery .ngx-gallery From 7afcebfd119df4b6a36c0273701d256449eab4a1 Mon Sep 17 00:00:00 2001 From: lotte Date: Wed, 31 Mar 2021 13:51:40 +0200 Subject: [PATCH 40/41] changed replace to global replace --- src/app/core/shared/metadata.utils.spec.ts | 3 ++- src/app/core/shared/metadata.utils.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/core/shared/metadata.utils.spec.ts b/src/app/core/shared/metadata.utils.spec.ts index d9068dd900..bc91d0585e 100644 --- a/src/app/core/shared/metadata.utils.spec.ts +++ b/src/app/core/shared/metadata.utils.spec.ts @@ -32,7 +32,8 @@ const multiMap = { }; const regexTestMap = { - 'foolbar.baz': [test] + 'foolbar.baz': [test], + 'foo.bard': [test], }; const multiViewModelList = [ diff --git a/src/app/core/shared/metadata.utils.ts b/src/app/core/shared/metadata.utils.ts index 6e69109dd7..777b71b872 100644 --- a/src/app/core/shared/metadata.utils.ts +++ b/src/app/core/shared/metadata.utils.ts @@ -156,7 +156,7 @@ export class Metadata { const outputKeys: string[] = []; for (const inputKey of inputKeys) { if (inputKey.includes('*')) { - const inputKeyRegex = new RegExp('^' + inputKey.replace('.', '\\.').replace('*', '.*') + '$'); + const inputKeyRegex = new RegExp('^' + inputKey.replace(/\./g, '\\.').replace('*', '.*') + '$'); for (const mapKey of Object.keys(mdMap)) { if (!outputKeys.includes(mapKey) && inputKeyRegex.test(mapKey)) { outputKeys.push(mapKey); From 947d792f2702ba79e7034df2e9da38c3b1b500f3 Mon Sep 17 00:00:00 2001 From: Raf Ponsaerts Date: Wed, 31 Mar 2021 14:49:32 +0200 Subject: [PATCH 41/41] Fixed * replace all --- src/app/core/shared/metadata.utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/core/shared/metadata.utils.ts b/src/app/core/shared/metadata.utils.ts index 777b71b872..3fbeb205d2 100644 --- a/src/app/core/shared/metadata.utils.ts +++ b/src/app/core/shared/metadata.utils.ts @@ -156,7 +156,7 @@ export class Metadata { const outputKeys: string[] = []; for (const inputKey of inputKeys) { if (inputKey.includes('*')) { - const inputKeyRegex = new RegExp('^' + inputKey.replace(/\./g, '\\.').replace('*', '.*') + '$'); + const inputKeyRegex = new RegExp('^' + inputKey.replace(/\./g, '\\.').replace(/\*/g, '.*') + '$'); for (const mapKey of Object.keys(mdMap)) { if (!outputKeys.includes(mapKey) && inputKeyRegex.test(mapKey)) { outputKeys.push(mapKey);