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
[ngClass]="{
'change-gallery': (isAuthenticated$ | async)
}"
>
<div [class.change-gallery]="isAuthenticated$ | async">
<ngx-gallery
class="ngx-gallery"
[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 { NgxGalleryOptions } from '@kolkov/ngx-gallery';
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 { of as observableOf } from 'rxjs';
import { AuthService } from '../../../core/auth/auth.service';
describe('MediaViewerImageComponent', () => {
let component: MediaViewerImageComponent;
let fixture: ComponentFixture<MediaViewerImageComponent>;
const authService = jasmine.createSpyObj('authService', {
isAuthenticated: observableOf(false)
});
const mockBitstream: Bitstream = Object.assign(new Bitstream(), {
sizeBytes: 10201,
content:
@@ -52,8 +57,12 @@ describe('MediaViewerImageComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports:[],
declarations: [MediaViewerImageComponent],
schemas: [NO_ERRORS_SCHEMA],
providers: [
{ provide: AuthService, useValue: authService },
],
}).compileComponents();
}));

View File

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

View File

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

View File

@@ -51,7 +51,7 @@ describe('MediaViewerComponent', () => {
const bitstreamDataService = jasmine.createSpyObj('bitstreamDataService', {
findAllByItemAndBundleName: createSuccessfulRemoteDataObject$(
createPaginatedList([])
createPaginatedList([mockBitstream])
),
});
@@ -94,6 +94,8 @@ describe('MediaViewerComponent', () => {
describe('when the bitstreams are loading', () => {
beforeEach(() => {
comp.mediaList$.next([mockMediaViewerItem]);
comp.imageOptions = true;
comp.videoOptions = true;
comp.isLoading = true;
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 {
@Input() item: Item;
@Input() options: MediaViewerConfig;
@Input() imageOptions: boolean;
@Input() videoOptions: boolean;
mediaList$: BehaviorSubject<MediaViewerItem[]>;

View File

@@ -10,7 +10,7 @@
</ds-metadata-field-wrapper>
</ng-container>
<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>
<ds-item-page-file-section [item]="object"></ds-item-page-file-section>
<ds-item-page-date-field [item]="object"></ds-item-page-date-field>

View File

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