This commit is contained in:
Dániel Péter Sipos
2020-11-09 12:41:03 +01:00
parent 1913094bdf
commit 337ecca4a3
8 changed files with 60 additions and 19 deletions

View File

@@ -1,8 +1,4 @@
<div <div [class.change-gallery]="isAuthenticated$ | async">
[ngClass]="{
'change-gallery': (isAuthenticated$ | async)
}"
>
<ngx-gallery <ngx-gallery
class="ngx-gallery" class="ngx-gallery"
[options]="galleryOptions" [options]="galleryOptions"

View File

@@ -1,4 +1,4 @@
import { NO_ERRORS_SCHEMA } from '@angular/core'; import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NgxGalleryOptions } from '@kolkov/ngx-gallery'; import { NgxGalleryOptions } from '@kolkov/ngx-gallery';
import { Bitstream } from '../../../core/shared/bitstream.model'; import { Bitstream } from '../../../core/shared/bitstream.model';
@@ -8,11 +8,16 @@ import { MockBitstreamFormat1 } from '../../../shared/mocks/item.mock';
import { MediaViewerImageComponent } from './media-viewer-image.component'; import { MediaViewerImageComponent } from './media-viewer-image.component';
import { of as observableOf } from 'rxjs'; import { of as observableOf } from 'rxjs';
import { AuthService } from '../../../core/auth/auth.service';
describe('MediaViewerImageComponent', () => { describe('MediaViewerImageComponent', () => {
let component: MediaViewerImageComponent; let component: MediaViewerImageComponent;
let fixture: ComponentFixture<MediaViewerImageComponent>; let fixture: ComponentFixture<MediaViewerImageComponent>;
const authService = jasmine.createSpyObj('authService', {
isAuthenticated: observableOf(false)
});
const mockBitstream: Bitstream = Object.assign(new Bitstream(), { const mockBitstream: Bitstream = Object.assign(new Bitstream(), {
sizeBytes: 10201, sizeBytes: 10201,
content: content:
@@ -52,8 +57,12 @@ describe('MediaViewerImageComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
imports:[],
declarations: [MediaViewerImageComponent], declarations: [MediaViewerImageComponent],
schemas: [NO_ERRORS_SCHEMA], schemas: [NO_ERRORS_SCHEMA],
providers: [
{ provide: AuthService, useValue: authService },
],
}).compileComponents(); }).compileComponents();
})); }));

View File

@@ -83,6 +83,7 @@ describe('MediaViewerVideoComponent', () => {
fixture = TestBed.createComponent(MediaViewerVideoComponent); fixture = TestBed.createComponent(MediaViewerVideoComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
component.medias = mockMediaViewerItem; component.medias = mockMediaViewerItem;
component.filteredMedias = mockMediaViewerItem;
fixture.detectChanges(); fixture.detectChanges();
}); });
@@ -93,6 +94,7 @@ describe('MediaViewerVideoComponent', () => {
describe('should show controller buttons when the having mode then one video', () => { describe('should show controller buttons when the having mode then one video', () => {
beforeEach(() => { beforeEach(() => {
component.medias = mockMediaViewerItems; component.medias = mockMediaViewerItems;
component.filteredMedias = mockMediaViewerItems;
fixture.detectChanges(); fixture.detectChanges();
}); });
@@ -107,21 +109,21 @@ describe('MediaViewerVideoComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
}); });
it('should increase the the index', () => { it('should increase the index', () => {
const viewMore = fixture.debugElement.query(By.css('.next')); const viewMore = fixture.debugElement.query(By.css('.next'));
viewMore.triggerEventHandler('click', null); viewMore.triggerEventHandler('click', null);
expect(component.currentIndex).toBe(1); expect(component.currentIndex).toBe(1);
}); });
}); });
describe('when the "Previus" button is clicked', () => { describe('when the "Previous" button is clicked', () => {
beforeEach(() => { beforeEach(() => {
component.currentIndex = 1; component.currentIndex = 1;
fixture.detectChanges(); fixture.detectChanges();
}); });
it('should increase the the index', () => { it('should decrease the index', () => {
const viewMore = fixture.debugElement.query(By.css('.previus')); const viewMore = fixture.debugElement.query(By.css('.previous'));
viewMore.triggerEventHandler('click', null); viewMore.triggerEventHandler('click', null);
expect(component.currentIndex).toBe(0); expect(component.currentIndex).toBe(0);
}); });
@@ -133,7 +135,7 @@ describe('MediaViewerVideoComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
}); });
it('should set the the index with teh selected one', () => { it('should set the the index with the selected one', () => {
const viewMore = fixture.debugElement.query(By.css('.list-element')); const viewMore = fixture.debugElement.query(By.css('.list-element'));
viewMore.triggerEventHandler('click', null); viewMore.triggerEventHandler('click', null);
expect(component.currentIndex).toBe(0); expect(component.currentIndex).toBe(0);

View File

@@ -6,7 +6,7 @@
></ds-loading> ></ds-loading>
<div class="media-viewer" *ngIf="!isLoading"> <div class="media-viewer" *ngIf="!isLoading">
<ng-container *ngIf="mediaList.length > 0"> <ng-container *ngIf="mediaList.length > 0">
<ng-container *ngIf="options.video"> <ng-container *ngIf="videoOptions">
<ng-container <ng-container
*ngIf=" *ngIf="
mediaList[0]?.format === 'video' || mediaList[0]?.format === 'audio' mediaList[0]?.format === 'video' || mediaList[0]?.format === 'audio'
@@ -15,7 +15,7 @@
<ds-media-viewer-video [medias]="mediaList"></ds-media-viewer-video> <ds-media-viewer-video [medias]="mediaList"></ds-media-viewer-video>
</ng-container> </ng-container>
</ng-container> </ng-container>
<ng-container *ngIf="options.image"> <ng-container *ngIf="imageOptions">
<ng-container *ngIf="mediaList[0]?.format === 'image'"> <ng-container *ngIf="mediaList[0]?.format === 'image'">
<ds-media-viewer-image [images]="mediaList"></ds-media-viewer-image> <ds-media-viewer-image [images]="mediaList"></ds-media-viewer-image>
</ng-container> </ng-container>
@@ -23,9 +23,9 @@
</ng-container> </ng-container>
<ng-container <ng-container
*ngIf=" *ngIf="
((!options.image || mediaList[0]?.format !== 'image') && ((!imageOptions || mediaList[0]?.format !== 'image') &&
(!options.video || mediaList[0]?.format !== 'video') && (!videoOptions || mediaList[0]?.format !== 'video') &&
(!options.video || mediaList[0]?.format !== 'audio')) || (!videoOptions || mediaList[0]?.format !== 'audio')) ||
mediaList.length === 0 mediaList.length === 0
" "
> >

View File

@@ -51,7 +51,7 @@ describe('MediaViewerComponent', () => {
const bitstreamDataService = jasmine.createSpyObj('bitstreamDataService', { const bitstreamDataService = jasmine.createSpyObj('bitstreamDataService', {
findAllByItemAndBundleName: createSuccessfulRemoteDataObject$( findAllByItemAndBundleName: createSuccessfulRemoteDataObject$(
createPaginatedList([]) createPaginatedList([mockBitstream])
), ),
}); });
@@ -94,6 +94,8 @@ describe('MediaViewerComponent', () => {
describe('when the bitstreams are loading', () => { describe('when the bitstreams are loading', () => {
beforeEach(() => { beforeEach(() => {
comp.mediaList$.next([mockMediaViewerItem]); comp.mediaList$.next([mockMediaViewerItem]);
comp.imageOptions = true;
comp.videoOptions = true;
comp.isLoading = true; comp.isLoading = true;
fixture.detectChanges(); fixture.detectChanges();
}); });
@@ -114,4 +116,30 @@ describe('MediaViewerComponent', () => {
}); });
}); });
describe('when the bitstreams loading is failed', () => {
beforeEach(() => {
comp.mediaList$.next([]);
comp.imageOptions = true;
comp.videoOptions = true;
comp.isLoading = false;
fixture.detectChanges();
});
it('should call the createMediaViewerItem', () => {
const mediaItem = comp.createMediaViewerItem(
mockBitstream,
MockBitstreamFormat1,
undefined
);
expect(mediaItem).toBeTruthy();
expect(mediaItem.thumbnail).toBe(null);
});
it('should display a default, thumbnail', () => {
const defaultThumbnail = fixture.debugElement.query(
By.css('ds-media-viewer-image')
);
expect(defaultThumbnail.nativeElement).toBeDefined();
});
});
}); });

View File

@@ -24,7 +24,8 @@ import { followLink } from '../../shared/utils/follow-link-config.model';
}) })
export class MediaViewerComponent implements OnInit { export class MediaViewerComponent implements OnInit {
@Input() item: Item; @Input() item: Item;
@Input() options: MediaViewerConfig; @Input() imageOptions: boolean;
@Input() videoOptions: boolean;
mediaList$: BehaviorSubject<MediaViewerItem[]>; mediaList$: BehaviorSubject<MediaViewerItem[]>;

View File

@@ -10,7 +10,7 @@
</ds-metadata-field-wrapper> </ds-metadata-field-wrapper>
</ng-container> </ng-container>
<ng-container *ngIf="mediaViewer.enable"> <ng-container *ngIf="mediaViewer.enable">
<ds-media-viewer [item]="object" [options]="mediaViewer"></ds-media-viewer> <ds-media-viewer [item]="object" [imageOptions]="mediaViewer.image" [videoOptions]="mediaViewer.video"></ds-media-viewer>
</ng-container> </ng-container>
<ds-item-page-file-section [item]="object"></ds-item-page-file-section> <ds-item-page-file-section [item]="object"></ds-item-page-file-section>
<ds-item-page-date-field [item]="object"></ds-item-page-date-field> <ds-item-page-date-field [item]="object"></ds-item-page-date-field>

View File

@@ -196,4 +196,9 @@ export const environment: Partial<GlobalConfig> = {
theme: { theme: {
name: 'default', name: 'default',
}, },
mediaViewer: {
enable: true,
image: true,
video: true,
},
}; };