self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2025-01-12 04:23:09 +02:00
Code Issues Releases Activity

adding not support video format warning

Browse Source
This commit is contained in:
Patrik J. Braun 2019-12-10 12:50:02 +01:00
parent 1685f4ed28
commit 00d3ae55e7
14 changed files with 249 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/common/SupportedFormats.ts
View File

@ -29,11 +29,18 @@ export const SupportedFormats = {
Photos: <string[]>[],
Videos: <string[]>[],
MetaFiles: <string[]>[],
TranscodeNeed: {
Photos: <string[]>[],
Videos: <string[]>[],
}
}
};
SupportedFormats.Photos = SupportedFormats.Photos.concat(SupportedFormats.TranscodeNeed.Photos);
SupportedFormats.Videos = SupportedFormats.Videos.concat(SupportedFormats.TranscodeNeed.Videos);
SupportedFormats.WithDots.Photos = SupportedFormats.Photos.map(f => '.' + f);
SupportedFormats.WithDots.Videos = SupportedFormats.Videos.map(f => '.' + f);
SupportedFormats.WithDots.MetaFiles = SupportedFormats.MetaFiles.map(f => '.' + f);
SupportedFormats.WithDots.TranscodeNeed.Photos = SupportedFormats.TranscodeNeed.Photos.map(f => '.' + f);
SupportedFormats.WithDots.TranscodeNeed.Videos = SupportedFormats.TranscodeNeed.Videos.map(f => '.' + f);

12
src/common/entities/MediaDTO.ts
View File

@ -11,6 +11,7 @@ export interface MediaDTO extends FileDTO {
metadata: MediaMetadata;
readyThumbnails: Array<number>;
readyIcon: boolean;
}
@ -64,6 +65,17 @@ export module MediaDTO {
return false;
};
export const isVideoTranscodingNeeded = (media: MediaDTO): boolean => {
const lower = media.name.toLowerCase();
for (const ext of SupportedFormats.WithDots.TranscodeNeed.Videos) {
if (lower.endsWith(ext)) {
return true;
}
}
return false;
};
export const getRotatedSize = (photo: MediaDTO): MediaDimension => {
if (isSideWay(photo)) {
// noinspection JSSuspiciousNameCombination

17
src/frontend/app/ui/gallery/grid/GridMedia.ts
View File

@ -15,6 +15,14 @@ export class GridMedia extends Media {
return (<PhotoDTO>this.media).metadata.orientation || OrientationTypes.TOP_LEFT;
}
get Video(): VideoDTO {
return <VideoDTO>this.media;
}
get Photo(): PhotoDTO {
return <PhotoDTO>this.media;
}
isPhoto(): boolean {
return MediaDTO.isPhoto(this.media);
}
@ -23,12 +31,7 @@ export class GridMedia extends Media {
return MediaDTO.isVideo(this.media);
}
get Video(): VideoDTO {
return <VideoDTO>this.media;
public isVideoTranscodingNeeded() {
return MediaDTO.isVideoTranscodingNeeded(this.media);
}
get Photo(): PhotoDTO {
return <PhotoDTO>this.media;
}
}

1
src/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.css
View File

@ -41,3 +41,4 @@ app-info-panel {
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}

20
src/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.html
View File

@ -10,8 +10,28 @@
[zoom]="controls ? controls.Zoom : 1"
[drag]="controls ? controls.drag : {x:0,y:0}"
[windowAspect]="photoFrameDim.aspect"
(videoSourceError)="onVideoSourceError()"
#photo>
</app-gallery-lightbox-media>
<div class="container h-100 flex-column" *ngIf="videoSourceError && activePhoto">
<div class="row justify-content-center align-items-center h-100">
<div class="col-md-8 text-white text-center">
<span class="oi oi-warning h2 mr-2"></span><span class="h2" i18n>Error during loading the video.</span>
<br/>
<ng-container *ngIf="activePhoto.gridMedia.isVideoTranscodingNeeded()" i18n>
Most likely the video is not transcoded.
It can be done in the settings.
You need to transcode these videos to watch them online:
</ng-container>
<ng-container *ngFor="let ext of transcodeNeedVideos;let last = last">*.{{ext}}
<ng-container *ngIf="!last">,&nbsp;</ng-container>
</ng-container>
</div>
</div>
</div>
<app-lightbox-controls
*ngIf="isOpen()"
#controls

10
src/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.ts
View File

@ -14,6 +14,7 @@ import {QueryParams} from '../../../../../common/QueryParams';
import {GalleryService} from '../gallery.service';
import {PhotoDTO} from '../../../../../common/entities/PhotoDTO';
import {ControlsLightboxComponent} from './controls/controls.lightbox.gallery.component';
import {SupportedFormats} from '../../../../../common/SupportedFormats';
export enum LightboxStates {
Open = 1,
@ -41,6 +42,8 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
public infoPanelWidth = 0;
public animating = false;
public photoFrameDim = {width: 1, height: 1, aspect: 1};
public videoSourceError = false;
public transcodeNeedVideos = SupportedFormats.TranscodeNeed.Videos;
private startPhotoDimension: Dimension = <Dimension>{top: 0, left: 0, width: 0, height: 0};
private iPvisibilityTimer: number = null;
private visibilityTimer: number = null;
@ -55,7 +58,6 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
route: null
};
constructor(public fullScreenService: FullScreenService,
private changeDetector: ChangeDetectorRef,
private overlayService: OverlayService,
@ -325,10 +327,14 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
public isVisible(): boolean {
return this.status !== LightboxStates.Closed;
}
public isOpen(): boolean {
return this.status === LightboxStates.Open;
}
onVideoSourceError() {
this.videoSourceError = true;
}
private updatePhotoFrameDim = () => {
this.photoFrameDim.width = Math.max(window.innerWidth - this.infoPanelWidth, 0);
@ -389,6 +395,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
if (photoIndex < 0 || photoIndex > this.gridPhotoQL.length) {
throw new Error('Can\'t find the media');
}
this.videoSourceError = false;
this.activePhotoId = photoIndex;
this.activePhoto = pcList[photoIndex];
@ -407,7 +414,6 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
}
private findPhotoComponent(media: MediaDTO): GalleryPhotoComponent {
const galleryPhotoComponents = this.gridPhotoQL.toArray();
for (let i = 0; i < galleryPhotoComponents.length; i++) {

1
src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.css
View File

@ -6,4 +6,3 @@
transform: translate(-50%, -50%);
}

4
src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.html
View File

@ -22,9 +22,11 @@
(error)="onImageError()"
(timeupdate)="onVideoProgress()"
#video>
<source [src]="gridMedia.getBestFitMediaPath()">
<source [src]="gridMedia.getBestFitMediaPath()" (error)="onSourceError($event)">
Something went wrong.
</video>
</div>

135
src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.ts
View File

@ -1,8 +1,9 @@
import {Component, ElementRef, Input, Output, OnChanges, ViewChild} from '@angular/core';
import {Component, ElementRef, EventEmitter, Input, OnChanges, Output, ViewChild} from '@angular/core';
import {GridMedia} from '../../grid/GridMedia';
import {FixOrientationPipe} from '../../../../pipes/FixOrientationPipe';
import {MediaDTO} from '../../../../../../common/entities/MediaDTO';
import {DomSanitizer, SafeStyle} from '@angular/platform-browser';
import {SupportedFormats} from '../../../../../../common/SupportedFormats';
@Component({
selector: 'app-gallery-lightbox-media',
@ -16,18 +17,18 @@ export class GalleryLightboxMediaComponent implements OnChanges {
@Input() windowAspect = 1;
@Input() zoom = 1;
@Input() drag = {x: 0, y: 0};
@Output() videoSourceError = new EventEmitter();
@ViewChild('video', {static: false}) video: ElementRef<HTMLVideoElement>;
prevGirdPhoto: GridMedia = null;
public imageSize = {width: 'auto', height: '100'};
private imageLoaded = false;
public imageLoadFinished = false;
thumbnailSrc: string = null;
photoSrc: string = null;
public transcodeNeedVideos = SupportedFormats.TranscodeNeed.Videos;
private mediaLoaded = false;
private videoProgress = 0;
constructor(public elementRef: ElementRef,
@ -40,35 +41,19 @@ export class GalleryLightboxMediaComponent implements OnChanges {
-50 / this.zoom + '% + ' + this.drag.y / this.zoom + 'px))');
}
ngOnChanges() {
if (this.prevGirdPhoto !== this.gridMedia) {
this.prevGirdPhoto = this.gridMedia;
this.thumbnailSrc = null;
this.photoSrc = null;
this.imageLoaded = false;
this.imageLoadFinished = false;
this.setImageSize();
}
if (this.thumbnailSrc == null && this.gridMedia && this.ThumbnailUrl !== null) {
FixOrientationPipe.transform(this.ThumbnailUrl, this.gridMedia.Orientation)
.then((src) => this.thumbnailSrc = src);
}
if (this.photoSrc == null && this.gridMedia && this.loadMedia) {
FixOrientationPipe.transform(this.gridMedia.getMediaPath(), this.gridMedia.Orientation)
.then((src) => this.photoSrc = src);
}
}
/** Video **/
private onVideoProgress() {
this.videoProgress = (100 / this.video.nativeElement.duration) * this.video.nativeElement.currentTime;
}
public get VideoProgress(): number {
return this.videoProgress;
}
public set VideoProgress(value: number) {
if (!this.video && value === null && typeof value === 'undefined') {
return;
}
this.video.nativeElement.currentTime = this.video.nativeElement.duration * (value / 100);
if (this.video.nativeElement.paused) {
this.video.nativeElement.play().catch(console.error);
}
}
public get VideoVolume(): number {
if (!this.video) {
@ -85,17 +70,6 @@ export class GalleryLightboxMediaComponent implements OnChanges {
this.video.nativeElement.volume = value;
}
public set VideoProgress(value: number) {
if (!this.video && value === null && typeof value === 'undefined') {
return;
}
this.video.nativeElement.currentTime = this.video.nativeElement.duration * (value / 100);
if (this.video.nativeElement.paused) {
this.video.nativeElement.play().catch(console.error);
}
}
public get Muted(): boolean {
if (!this.video) {
return false;
@ -103,6 +77,48 @@ export class GalleryLightboxMediaComponent implements OnChanges {
return this.video.nativeElement.muted;
}
public get Paused(): boolean {
if (!this.video) {
return true;
}
return this.video.nativeElement.paused;
}
public get PhotoSrc(): string {
return this.gridMedia.getMediaPath();
}
private get ThumbnailUrl(): string {
if (this.gridMedia.isThumbnailAvailable() === true) {
return this.gridMedia.getThumbnailPath();
}
if (this.gridMedia.isReplacementThumbnailAvailable() === true) {
return this.gridMedia.getReplacementThumbnailPath();
}
return null;
}
ngOnChanges() {
if (this.prevGirdPhoto !== this.gridMedia) {
this.prevGirdPhoto = this.gridMedia;
this.thumbnailSrc = null;
this.photoSrc = null;
this.mediaLoaded = false;
this.imageLoadFinished = false;
this.setImageSize();
}
if (this.thumbnailSrc == null && this.gridMedia && this.ThumbnailUrl !== null) {
FixOrientationPipe.transform(this.ThumbnailUrl, this.gridMedia.Orientation)
.then((src) => this.thumbnailSrc = src);
}
if (this.photoSrc == null && this.gridMedia && this.loadMedia) {
FixOrientationPipe.transform(this.gridMedia.getMediaPath(), this.gridMedia.Orientation)
.then((src) => this.photoSrc = src);
}
}
public mute() {
if (!this.video) {
return;
@ -122,48 +138,34 @@ export class GalleryLightboxMediaComponent implements OnChanges {
}
}
public get Paused(): boolean {
if (!this.video) {
return true;
}
return this.video.nativeElement.paused;
}
onImageError() {
// TODO:handle error
this.imageLoadFinished = true;
console.error('Error: cannot load media for lightbox url: ' + this.gridMedia.getMediaPath());
}
onImageLoad() {
this.imageLoadFinished = true;
this.imageLoaded = true;
}
private get ThumbnailUrl(): string {
if (this.gridMedia.isThumbnailAvailable() === true) {
return this.gridMedia.getThumbnailPath();
}
if (this.gridMedia.isReplacementThumbnailAvailable() === true) {
return this.gridMedia.getReplacementThumbnailPath();
}
return null;
}
public get PhotoSrc(): string {
return this.gridMedia.getMediaPath();
this.mediaLoaded = true;
}
public showThumbnail(): boolean {
return this.gridMedia &&
!this.imageLoaded &&
!this.mediaLoaded &&
this.thumbnailSrc !== null &&
(this.gridMedia.isThumbnailAvailable() || this.gridMedia.isReplacementThumbnailAvailable());
}
onSourceError($event: any) {
this.mediaLoaded = false;
this.videoSourceError.emit();
}
/** Video **/
private onVideoProgress() {
this.videoProgress = (100 / this.video.nativeElement.duration) * this.video.nativeElement.currentTime;
}
private setImageSize() {
if (!this.gridMedia) {
return;
@ -180,6 +182,5 @@ export class GalleryLightboxMediaComponent implements OnChanges {
this.imageSize.width = '100';
}
}
}

24
src/frontend/translate/messages.en.xlf
View File

@ -180,6 +180,30 @@
</context-group>
<target>Zoom in, key: '+'</target>
</trans-unit>
<trans-unit id="19654bbc78ebdc3916d5912faafcf20b4ff74069" datatype="html">
<source>Error during loading the video.</source>
<context-group purpose="location">
<context context-type="sourcefile">app/ui/gallery/lightbox/lightbox.gallery.component.html</context>
<context context-type="linenumber">20</context>
</context-group>
<target>Error during loading the video.</target>
</trans-unit>
<trans-unit id="2e8bc19dbafcdd19549c005b6a5fbd506d16317b" datatype="html">
<source>
Most likely the video is not transcoded.
It can be done in the settings.
You need to transcode these videos to watch them online:
</source>
<context-group purpose="location">
<context context-type="sourcefile">app/ui/gallery/lightbox/lightbox.gallery.component.html</context>
<context context-type="linenumber">22</context>
</context-group>
<target>
Most likely the video is not transcoded.
It can be done in the settings.
You need to transcode these videos to watch them online:
</target>
</trans-unit>
<trans-unit id="f3cda2936c4e70d5b920b2c243ec634222743ba1" datatype="html">
<source>Link availability</source>
<context-group purpose="location">

24
src/frontend/translate/messages.fr.xlf
View File

@ -180,6 +180,30 @@
</context-group>
<target>Zoom avant, touche : '+'</target>
</trans-unit>
<trans-unit id="19654bbc78ebdc3916d5912faafcf20b4ff74069" datatype="html">
<source>Error during loading the video.</source>
<context-group purpose="location">
<context context-type="sourcefile">app/ui/gallery/lightbox/lightbox.gallery.component.html</context>
<context context-type="linenumber">20</context>
</context-group>
<target>Error during loading the video.</target>
</trans-unit>
<trans-unit id="2e8bc19dbafcdd19549c005b6a5fbd506d16317b" datatype="html">
<source>
Most likely the video is not transcoded.
It can be done in the settings.
You need to transcode these videos to watch them online:
</source>
<context-group purpose="location">
<context context-type="sourcefile">app/ui/gallery/lightbox/lightbox.gallery.component.html</context>
<context context-type="linenumber">22</context>
</context-group>
<target>
Most likely the video is not transcoded.
It can be done in the settings.
You need to transcode these videos to watch them online:
</target>
</trans-unit>
<trans-unit id="f3cda2936c4e70d5b920b2c243ec634222743ba1" datatype="html">
<source>Link availability</source>
<context-group purpose="location">

23
src/frontend/translate/messages.hu.xlf
View File

@ -180,6 +180,29 @@
</context-group>
<target>Nagyítás, gyorsgomb: '+'</target>
</trans-unit>
<trans-unit id="19654bbc78ebdc3916d5912faafcf20b4ff74069" datatype="html">
<source>Error during loading the video.</source>
<context-group purpose="location">
<context context-type="sourcefile">app/ui/gallery/lightbox/lightbox.gallery.component.html</context>
<context context-type="linenumber">20</context>
</context-group>
<target>Hiba a videó betöltése közben.</target>
</trans-unit>
<trans-unit id="2e8bc19dbafcdd19549c005b6a5fbd506d16317b" datatype="html">
<source>
Most likely the video is not transcoded.
It can be done in the settings.
You need to transcode these videos to watch them online:
</source>
<context-group purpose="location">
<context context-type="sourcefile">app/ui/gallery/lightbox/lightbox.gallery.component.html</context>
<context context-type="linenumber">22</context>
</context-group>
<target>
Valószínűleg a videó nincs átkonvertálva. Ezt a beállításokban megteheted.
Ezek a videó formátumok csak átkonvertálás után játszhatók le:
</target>
</trans-unit>
<trans-unit id="f3cda2936c4e70d5b920b2c243ec634222743ba1" datatype="html">
<source>Link availability</source>
<context-group purpose="location">

24
src/frontend/translate/messages.ro.xlf
View File

@ -180,6 +180,30 @@
</context-group>
<target>Mărește, tasta: '+'</target>
</trans-unit>
<trans-unit id="19654bbc78ebdc3916d5912faafcf20b4ff74069" datatype="html">
<source>Error during loading the video.</source>
<context-group purpose="location">
<context context-type="sourcefile">app/ui/gallery/lightbox/lightbox.gallery.component.html</context>
<context context-type="linenumber">20</context>
</context-group>
<target>Error during loading the video.</target>
</trans-unit>
<trans-unit id="2e8bc19dbafcdd19549c005b6a5fbd506d16317b" datatype="html">
<source>
Most likely the video is not transcoded.
It can be done in the settings.
You need to transcode these videos to watch them online:
</source>
<context-group purpose="location">
<context context-type="sourcefile">app/ui/gallery/lightbox/lightbox.gallery.component.html</context>
<context context-type="linenumber">22</context>
</context-group>
<target>
Most likely the video is not transcoded.
It can be done in the settings.
You need to transcode these videos to watch them online:
</target>
</trans-unit>
<trans-unit id="f3cda2936c4e70d5b920b2c243ec634222743ba1" datatype="html">
<source>Link availability</source>
<context-group purpose="location">

24
src/frontend/translate/messages.ru.xlf
View File

@ -180,6 +180,30 @@
</context-group>
<target>Увеличить, клавиша: '+'</target>
</trans-unit>
<trans-unit id="19654bbc78ebdc3916d5912faafcf20b4ff74069" datatype="html">
<source>Error during loading the video.</source>
<context-group purpose="location">
<context context-type="sourcefile">app/ui/gallery/lightbox/lightbox.gallery.component.html</context>
<context context-type="linenumber">20</context>
</context-group>
<target>Error during loading the video.</target>
</trans-unit>
<trans-unit id="2e8bc19dbafcdd19549c005b6a5fbd506d16317b" datatype="html">
<source>
Most likely the video is not transcoded.
It can be done in the settings.
You need to transcode these videos to watch them online:
</source>
<context-group purpose="location">
<context context-type="sourcefile">app/ui/gallery/lightbox/lightbox.gallery.component.html</context>
<context context-type="linenumber">22</context>
</context-group>
<target>
Most likely the video is not transcoded.
It can be done in the settings.
You need to transcode these videos to watch them online:
</target>
</trans-unit>
<trans-unit id="f3cda2936c4e70d5b920b2c243ec634222743ba1" datatype="html">
<source>Link availability</source>
<context-group purpose="location">