improving video support (adding partial ogg,ogv,webm support)

README.md

@@ -138,6 +138,7 @@ apt-get install build-essential  libkrb5-dev gcc g++
  * Random photo url
    * You can generate an url that returns a random photo from your gallery. You can use this feature to develop 3rd party applications, like: changing desktop background
  * video support
+   * fully supports *.mp4 files and partially (might have errors with safari and IE) supports *.ogg, *.ogv, *.webm files
    * uses ffmpeg and ffprobe to generate video thumbnails
  * **Markdown based blogging support** - `future plan`
    * you can write some note in the blog.md for every directory

backend/model/threading/DiskMangerWorker.ts

@@ -35,7 +35,10 @@ export class DiskMangerWorker {
 
   private static isVideo(fullPath: string) {
     const extensions = [
-      '.mp4'
+      '.mp4',
+      '.webm',
+      '.ogv',
+      '.ogg'
     ];
 
     const extension = path.extname(fullPath).toLowerCase();
@@ -112,8 +115,8 @@ export class DiskMangerWorker {
     return new Promise<VideoMetadata>((resolve, reject) => {
       const metadata: VideoMetadata = <VideoMetadata>{
         size: {
-          width: 0,
+          width: 1,
-          height: 0
+          height: 1
         },
         bitRate: 0,
         duration: 0,
@@ -135,15 +138,18 @@ export class DiskMangerWorker {
         }
 
         try {
+          for (let i = 0; i < data.streams.length; i++) {
+            if (data.streams[i].width) {
+              metadata.size.width = data.streams[i].width;
+              metadata.size.height = data.streams[i].height;
 
-          metadata.size = {
+              metadata.duration = Math.floor(data.streams[i].duration * 1000);
-            width: data.streams[0].width,
+              metadata.bitRate = parseInt(data.streams[i].bit_rate, 10) || null;
-            height: data.streams[0].height
+              metadata.creationDate = Date.parse(data.streams[i].tags.creation_time);
-          };
+              break;
+            }
+          }
 
-          metadata.duration = Math.floor(data.streams[0].duration * 1000);
-          metadata.bitRate = data.streams[0].bit_rate;
-          metadata.creationDate = Date.parse(data.streams[0].tags.creation_time);
         } catch (err) {
         }
 

backend/model/threading/ThumbnailWorker.ts

@@ -62,7 +62,20 @@ export class VideoRendererFactory {
           if (!!err || data === null) {
             return reject(err.toString());
           }
-          const ratio = data.streams[0].height / data.streams[0].width;
+         /// console.log(data);
+          let width = null;
+          let height = null;
+          for (let i = 0; i < data.streams.length; i++) {
+            if (data.streams[i].width) {
+              width = data.streams[i].width;
+              height = data.streams[i].height;
+              break;
+            }
+          }
+          if (!width || !height) {
+            return reject('Can not read video dimension');
+          }
+          const ratio = height / width;
           const command: FfmpegCommand = ffmpeg(input.mediaPath);
           const fileName = path.basename(input.thPath);
           const folder = path.dirname(input.thPath);

backend/routes/GalleryRouter.ts

@@ -43,7 +43,7 @@ export class GalleryRouter {
   }
 
   private static addGetVideo(app) {
-    app.get(['/api/gallery/content/:mediaPath(*\.(mp4))'],
+    app.get(['/api/gallery/content/:mediaPath(*\.(mp4|ogg|ogv|webm))'],
       AuthenticationMWs.authenticate,
       // TODO: authorize path
       GalleryMWs.loadMedia,
@@ -73,7 +73,7 @@ export class GalleryRouter {
   }
 
   private static addGetVideoThumbnail(app) {
-    app.get('/api/gallery/content/:mediaPath(*\.(mp4))/thumbnail/:size?',
+    app.get('/api/gallery/content/:mediaPath(*\.(mp4|ogg|ogv|webm))/thumbnail/:size?',
       AuthenticationMWs.authenticate,
       // TODO: authorize path
       GalleryMWs.loadMedia,

frontend/app/gallery/MediaIcon.ts

@@ -12,6 +12,10 @@ export class MediaIcon {
 
   }
 
+  getExtension(): string {
+    return this.media.name.substr(this.media.name.lastIndexOf('.') + 1);
+  }
+
   iconLoaded() {
     this.media.readyIcon = true;
   }

frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html

@@ -21,7 +21,7 @@
     </div>
   </div>
 
-  <div class="row">
+  <div class="row" *ngIf="media.metadata.creationDate">
     <div class="col-2">
       <span class="details-icon oi oi-calendar"></span>
     </div>
@@ -36,7 +36,7 @@
   </div>
 
 
-  <div class="row" *ngIf="VideoData">
+  <div class="row" *ngIf="VideoData && (VideoData.duration || VideoData.bitRate)">
     <div class="col-2">
       <span class="details-icon oi oi-video"></span>
     </div>

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

@@ -19,7 +19,7 @@
          autoplay
          (error)="onImageError()"
           (timeupdate)="onVideoProgress()" >
-    <source [src]="gridMedia.getPhotoPath()" type="video/mp4">
+    <source [src]="gridMedia.getPhotoPath()" type="{{getVideoType()}}">
   </video>
 
 </div>

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

@@ -119,6 +119,18 @@ export class GalleryLightboxMediaComponent implements OnChanges {
     return this.video.nativeElement.paused;
   }
 
+  public getVideoType(): string {
+    switch (this.gridMedia.getExtension().toLowerCase()) {
+      case 'webm':
+        return 'video/webm';
+      case 'ogv':
+      case 'ogg':
+        return 'video/ogg';
+      default:
+        return 'video/mp4';
+    }
+  }
+
   onImageError() {
     // TODO:handle error
     this.imageLoadFinished = true;