hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 10:04:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

#885 add enviroment variable for media viewer

Browse Source
This commit is contained in:
Dániel Péter Sipos
2020-11-06 11:05:20 +01:00
parent ae079f06ed
commit af79945fd8
12 changed files with 76 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.editorconfig
View File

@@ -12,3 +12,6 @@ trim_trailing_whitespace = true
[*.md] [*.md]
insert_final_newline = false insert_final_newline = false
trim_trailing_whitespace = false trim_trailing_whitespace = false
[*.ts]
quote_type = single

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

@@ -12,6 +12,7 @@ import { NgxGalleryAnimation } from '@kolkov/ngx-gallery';
}) })
export class MediaViewerImageComponent implements OnInit { export class MediaViewerImageComponent implements OnInit {
@Input() images: MediaViewerItem[]; @Input() images: MediaViewerItem[];
@Input() preview?: boolean;
@Input() image?: string; @Input() image?: string;
galleryOptions: NgxGalleryOptions[]; galleryOptions: NgxGalleryOptions[];
@@ -21,8 +22,10 @@ export class MediaViewerImageComponent implements OnInit {
* Thi method sets up the gallery settings and data * Thi method sets up the gallery settings and data
*/ */
ngOnInit(): void { ngOnInit(): void {
console.log(this.preview);
this.galleryOptions = [ this.galleryOptions = [
{ {
preview: this.preview !== undefined ? this.preview : true,
image: true, image: true,
imageSize: 'contain', imageSize: 'contain',
thumbnails: false, thumbnails: false,
@@ -31,6 +34,10 @@ export class MediaViewerImageComponent implements OnInit {
height: '279px', height: '279px',
startIndex: 0, startIndex: 0,
imageAnimation: NgxGalleryAnimation.Slide, imageAnimation: NgxGalleryAnimation.Slide,
previewCloseOnEsc: true,
previewZoom: true,
previewRotate: true,
previewFullscreen: true,
}, },
]; ];

6
src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.html
View File

@@ -12,15 +12,15 @@
></video> ></video>
<div class="buttons" *ngIf="medias?.length > 1"> <div class="buttons" *ngIf="medias?.length > 1">
<button <button
class="btn btn-primary previus" class="btn btn-primary previous"
[disabled]="currentIndex === 0" [disabled]="currentIndex === 0"
(click)="prevMedia()" (click)="prevMedia()"
> >
{{ "media-viewer.previus" | translate }} {{ "media-viewer.previous" | translate }}
</button> </button>
<button <button
class="btn btn-primary next " class="btn btn-primary next"
[disabled]="currentIndex === medias.length - 1" [disabled]="currentIndex === medias.length - 1"
(click)="nextMedia()" (click)="nextMedia()"
> >

31
src/app/+item-page/media-viewer/media-viewer.component.html
View File

@@ -5,24 +5,31 @@
[showMessage]="false" [showMessage]="false"
></ds-loading> ></ds-loading>
<div class="media-viewer" *ngIf="mediaList.length > 0"> <div class="media-viewer" *ngIf="mediaList.length > 0">
<ng-container <ng-container *ngIf="options.video">
*ngIf=" <ng-container
mediaList[0]?.format === 'video' || mediaList[0]?.format === 'audio' *ngIf="
" mediaList[0]?.format === 'video' || mediaList[0]?.format === 'audio'
> "
<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 *ngIf="mediaList[0]?.format === 'image'"> <ng-container *ngIf="options.image">
<ds-media-viewer-image [images]="mediaList"></ds-media-viewer-image> <ng-container *ngIf="mediaList[0]?.format === 'image'">
<ds-media-viewer-image [images]="mediaList"></ds-media-viewer-image>
</ng-container>
</ng-container> </ng-container>
<ng-container <ng-container
*ngIf=" *ngIf="
mediaList[0]?.format !== 'image' && (!options.image || mediaList[0]?.format !== 'image') &&
mediaList[0]?.format !== 'video' && (!options.video || mediaList[0]?.format !== 'video') &&
mediaList[0]?.format !== 'audio' (!options.video || mediaList[0]?.format !== 'audio')
" "
> >
<ds-media-viewer-image [image]="mediaList[0]?.thumbnail || thumbnailPlaceholder"></ds-media-viewer-image> <ds-media-viewer-image
[image]="mediaList[0]?.thumbnail || thumbnailPlaceholder"
[preview]="false"
></ds-media-viewer-image>
</ng-container> </ng-container>
</div> </div>
</ng-container> </ng-container>

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

@@ -1,6 +1,7 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs'; import { BehaviorSubject, Observable } from 'rxjs';
import { filter, take } from 'rxjs/operators'; import { filter, take } from 'rxjs/operators';
import { MediaViewerConfig } from '../../../config/media-viewer-config.interface';
import { BitstreamDataService } from '../../core/data/bitstream-data.service'; import { BitstreamDataService } from '../../core/data/bitstream-data.service';
import { PaginatedList } from '../../core/data/paginated-list'; import { PaginatedList } from '../../core/data/paginated-list';
import { RemoteData } from '../../core/data/remote-data'; import { RemoteData } from '../../core/data/remote-data';
@@ -23,6 +24,7 @@ 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;
mediaList$: BehaviorSubject<MediaViewerItem[]>; mediaList$: BehaviorSubject<MediaViewerItem[]>;
@@ -30,9 +32,7 @@ export class MediaViewerComponent implements OnInit {
thumbnailPlaceholder = './assets/images/replacement_document.svg'; thumbnailPlaceholder = './assets/images/replacement_document.svg';
constructor( constructor(protected bitstreamDataService: BitstreamDataService) {}
protected bitstreamDataService: BitstreamDataService,
) {}
/** /**
* This metod loads all the Bitstreams and Thumbnails and contert it to media item * This metod loads all the Bitstreams and Thumbnails and contert it to media item
@@ -44,7 +44,7 @@ export class MediaViewerComponent implements OnInit {
this.loadRemoteData('THUMBNAIL').subscribe((thumbnailsRD) => { this.loadRemoteData('THUMBNAIL').subscribe((thumbnailsRD) => {
for (let index = 0; index < bitstreamsRD.payload.page.length; index++) { for (let index = 0; index < bitstreamsRD.payload.page.length; index++) {
bitstreamsRD.payload.page[index].format bitstreamsRD.payload.page[index].format
.pipe(getFirstSucceededRemoteDataPayload()) .pipe(getFirstSucceededRemoteDataPayload())
.subscribe((format) => { .subscribe((format) => {
const current = this.mediaList$.getValue(); const current = this.mediaList$.getValue();
const mediaItem = this.createMediaViewerItem( const mediaItem = this.createMediaViewerItem(
@@ -68,7 +68,12 @@ export class MediaViewerComponent implements OnInit {
bundleName: string bundleName: string
): Observable<RemoteData<PaginatedList<Bitstream>>> { ): Observable<RemoteData<PaginatedList<Bitstream>>> {
return this.bitstreamDataService return this.bitstreamDataService
.findAllByItemAndBundleName(this.item, bundleName, {}, followLink('format')) .findAllByItemAndBundleName(
this.item,
bundleName,
{},
followLink('format')
)
.pipe( .pipe(
filter( filter(
(bitstreamsRD: RemoteData<PaginatedList<Bitstream>>) => (bitstreamsRD: RemoteData<PaginatedList<Bitstream>>) =>

13
src/app/+item-page/simple/item-types/publication/publication.component.html
View File

@@ -3,10 +3,15 @@
</h2> </h2>
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-4"> <div class="col-xs-12 col-md-4">
<!-- <ds-metadata-field-wrapper> <ng-container *ngIf="!mediaViewer.enable">
<ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
</ds-metadata-field-wrapper> --> <ds-metadata-field-wrapper>
<ds-media-viewer [item]="object"></ds-media-viewer> <ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
</ds-metadata-field-wrapper>
</ng-container>
<ng-container *ngIf="mediaViewer.enable">
<ds-media-viewer [item]="object" [options]="mediaViewer"></ds-media-viewer>
</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>
<ds-item-page-author-field [item]="object"></ds-item-page-author-field> <ds-item-page-author-field [item]="object"></ds-item-page-author-field>

3
src/app/+item-page/simple/item-types/shared/item.component.ts
View File

@@ -1,5 +1,6 @@
import { Component, Input } from '@angular/core'; import { Component, Input } from '@angular/core';
import { Observable } from 'rxjs/internal/Observable'; import { Observable } from 'rxjs/internal/Observable';
import { environment } from '../../../../../environments/environment';
import { BitstreamDataService } from '../../../../core/data/bitstream-data.service'; import { BitstreamDataService } from '../../../../core/data/bitstream-data.service';
import { Bitstream } from '../../../../core/shared/bitstream.model'; import { Bitstream } from '../../../../core/shared/bitstream.model';
import { Item } from '../../../../core/shared/item.model'; import { Item } from '../../../../core/shared/item.model';
@@ -15,6 +16,8 @@ import { getFirstSucceededRemoteDataPayload } from '../../../../core/shared/oper
export class ItemComponent { export class ItemComponent {
@Input() object: Item; @Input() object: Item;
mediaViewer = environment.mediaViewer
constructor(protected bitstreamDataService: BitstreamDataService) { constructor(protected bitstreamDataService: BitstreamDataService) {
} }

5
src/app/app.component.scss
View File

@@ -39,11 +39,16 @@ body {
margin: 0; margin: 0;
} }
ds-header-navbar-wrapper {
z-index: none;
}
ds-admin-sidebar { ds-admin-sidebar {
position: fixed; position: fixed;
z-index: $sidebar-z-index; z-index: $sidebar-z-index;
} }
.ds-full-screen-loader { .ds-full-screen-loader {
height: 100vh; height: 100vh;
} }

2
src/assets/i18n/en.json5
View File

@@ -2464,7 +2464,7 @@
"media-viewer.next": "Next", "media-viewer.next": "Next",
"media-viewer.previus": "Previus", "media-viewer.previous": "Previous",
"media-viewer.playlist": "Playlist", "media-viewer.playlist": "Playlist",

6
src/config/global-config.interface.ts
View File

@@ -5,12 +5,13 @@ import { UniversalConfig } from './universal-config.interface';
import { INotificationBoardOptions } from './notifications-config.interfaces'; import { INotificationBoardOptions } from './notifications-config.interfaces';
import { SubmissionConfig } from './submission-config.interface'; import { SubmissionConfig } from './submission-config.interface';
import { FormConfig } from './form-config.interfaces'; import { FormConfig } from './form-config.interfaces';
import {LangConfig} from './lang-config.interface'; import { LangConfig } from './lang-config.interface';
import { BrowseByConfig } from './browse-by-config.interface'; import { BrowseByConfig } from './browse-by-config.interface';
import { ItemPageConfig } from './item-page-config.interface'; import { ItemPageConfig } from './item-page-config.interface';
import { CollectionPageConfig } from './collection-page-config.interface'; import { CollectionPageConfig } from './collection-page-config.interface';
import { Theme } from './theme.inferface'; import { Theme } from './theme.inferface';
import {AuthConfig} from './auth-config.interfaces'; import { AuthConfig } from './auth-config.interfaces';
import { MediaViewerConfig } from './media-viewer-config.interface';
export interface GlobalConfig extends Config { export interface GlobalConfig extends Config {
ui: ServerConfig; ui: ServerConfig;
@@ -32,4 +33,5 @@ export interface GlobalConfig extends Config {
collection: CollectionPageConfig; collection: CollectionPageConfig;
theme: Theme; theme: Theme;
rewriteDownloadUrls: boolean; rewriteDownloadUrls: boolean;
mediaViewer: MediaViewerConfig;
} }

7
src/config/media-viewer-config.interface.ts Normal file
View File

@@ -0,0 +1,7 @@
import { Config } from './config.interface';
export interface MediaViewerConfig extends Config {
enable: boolean;
image: boolean;
video: boolean;
}

5
src/environments/environment.common.ts
View File

@@ -217,4 +217,9 @@ export const environment: GlobalConfig = {
}, },
// Whether the UI should rewrite file download URLs to match its domain. Only necessary to enable when running UI and REST API on separate domains // Whether the UI should rewrite file download URLs to match its domain. Only necessary to enable when running UI and REST API on separate domains
rewriteDownloadUrls: false, rewriteDownloadUrls: false,
mediaViewer: {
enable: true,
image: true,
video: true,
},
}; };