adding not support video format warning

src/common/SupportedFormats.ts

@@ -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);
 

src/common/entities/MediaDTO.ts

@@ -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

src/frontend/app/ui/gallery/grid/GridMedia.ts

@@ -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 {
+  public isVideoTranscodingNeeded() {
-    return <VideoDTO>this.media;
+    return MediaDTO.isVideoTranscodingNeeded(this.media);
   }
-  get Photo(): PhotoDTO {
-    return <PhotoDTO>this.media;
-  }
-
-
 }

src/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.css

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

src/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.html

@@ -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

src/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.ts

@@ -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++) {

src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.css

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

src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.html

@@ -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>
 
 

src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.ts

@@ -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;
+    this.mediaLoaded = 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();
   }
 
   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';
     }
   }
-
 }
 

src/frontend/translate/messages.en.xlf

@@ -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">

src/frontend/translate/messages.fr.xlf

@@ -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">

src/frontend/translate/messages.hu.xlf

@@ -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">
@@ -2480,4 +2503,4 @@
       </trans-unit>
     </body>
   </file>
-</xliff>
+</xliff>

src/frontend/translate/messages.ro.xlf

@@ -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">

src/frontend/translate/messages.ru.xlf

@@ -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">