implementing infobox for videos

backend/middlewares/GalleryMWs.ts

@@ -11,6 +11,8 @@ import {ProjectPath} from '../ProjectPath';
 import {Config} from '../../common/config/private/Config';
 import {UserDTO} from '../../common/entities/UserDTO';
 import {RandomQuery} from '../model/interfaces/IGalleryManager';
+import {MediaDTO} from '../../common/entities/MediaDTO';
+import {VideoDTO} from '../../common/entities/VideoDTO';
 
 
 const LOG_TAG = '[GalleryMWs]';
@@ -71,8 +73,28 @@ export class GalleryMWs {
 
     };
 
+    const cleanUpMedia = (media: MediaDTO[]) => {
+      media.forEach(m => {
+        if (MediaDTO.isPhoto(m)) {
+          delete (<VideoDTO>m).metadata.bitRate;
+          delete (<VideoDTO>m).metadata.duration;
+        } else if (MediaDTO.isVideo(m)) {
+          delete (<PhotoDTO>m).metadata.cameraData;
+          delete (<PhotoDTO>m).metadata.orientation;
+          delete (<PhotoDTO>m).metadata.orientation;
+          delete (<PhotoDTO>m).metadata.keywords;
+          delete (<PhotoDTO>m).metadata.positionData;
+        }
+      });
+    };
+
     if (cw.directory) {
       removeDirs(cw.directory);
+      // TODO: remove when typeorm inheritance is fixed
+      cleanUpMedia(cw.directory.media);
+    }
+    if (cw.searchResult) {
+      cleanUpMedia(cw.searchResult.media);
     }
 
 

common/Utils.ts

@@ -5,6 +5,11 @@ export class Utils {
     return JSON.parse(JSON.stringify(object));
   }
 
+  static zeroPrefix(value, length: number) {
+    const ret = '00000' + value;
+    return ret.substr(ret.length - length);
+  }
+
   static equalsFilter(object: any, filter: any): boolean {
     if (typeof filter !== 'object' || filter == null) {
       return object === filter;

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

@@ -15,8 +15,8 @@
       </div>
       <div class="details-sub row">
         <div class="col-4">{{media.metadata.size.width}} x {{media.metadata.size.height}}</div>
-        <div class="col-4">{{calcMpx()}}MP</div>
+        <div class="col-4" *ngIf="isPhoto()">{{calcMpx()}}MP</div>
-        <div class="col-4" *ngIf="media.metadata.fileSize">{{calcFileSize()}}</div>
+        <div class="col-4" *ngIf="media.metadata.fileSize">{{calcSize(media.metadata.fileSize)}}</div>
       </div>
     </div>
   </div>
@@ -35,6 +35,22 @@
     </div>
   </div>
 
+
+  <div class="row" *ngIf="VideoData">
+    <div class="col-2">
+      <span class="details-icon oi oi-video"></span>
+    </div>
+    <div class="col-10">
+      <div class="details-main">
+        {{"Video"}}
+      </div>
+      <div class="details-sub row">
+        <div class="col-6" *ngIf="VideoData.duration">length: {{renderDuration(VideoData.duration)}}</div>
+        <div class="col-6" *ngIf="VideoData.bitRate">bit rate: {{calcSize(VideoData.bitRate)}}/s</div>
+      </div>
+    </div>
+  </div>
+
   <div class="row" *ngIf="CameraData">
     <div class="col-2">
       <span class="details-icon oi oi-camera-slr"></span>
@@ -67,8 +83,8 @@
       </div>
       <div class="details-sub row" *ngIf="hasGPS()">
         <div class="col-12">
-          {{media.metadata.positionData.GPSData.latitude.toFixed(3)}},
+          {{PositionData.GPSData.latitude.toFixed(3)}},
-          {{media.metadata.positionData.GPSData.longitude.toFixed(3)}}
+          {{PositionData.GPSData.longitude.toFixed(3)}}
         </div>
       </div>
     </div>
@@ -80,11 +96,11 @@
       [zoomControl]="false"
       [streetViewControl]="false"
       [zoom]="10"
-      [latitude]="media.metadata.positionData.GPSData.latitude"
+      [latitude]="PositionData.GPSData.latitude"
-      [longitude]="media.metadata.positionData.GPSData.longitude">
+      [longitude]="PositionData.GPSData.longitude">
       <agm-marker
-        [latitude]="media.metadata.positionData.GPSData.latitude"
+        [latitude]="PositionData.GPSData.latitude"
-        [longitude]="media.metadata.positionData.GPSData.longitude">
+        [longitude]="PositionData.GPSData.longitude">
       </agm-marker>
     </agm-map>
   </div>

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

@@ -1,7 +1,9 @@
 import {Component, ElementRef, EventEmitter, Input, Output} from '@angular/core';
-import {CameraMetadata, PhotoDTO} from '../../../../../common/entities/PhotoDTO';
+import {CameraMetadata, PhotoDTO, PositionMetaData} from '../../../../../common/entities/PhotoDTO';
 import {Config} from '../../../../../common/config/public/Config';
 import {MediaDTO} from '../../../../../common/entities/MediaDTO';
+import {VideoDTO, VideoMetadata} from '../../../../../common/entities/VideoDTO';
+import {Utils} from '../../../../../common/Utils';
 
 @Component({
   selector: 'app-info-panel',
@@ -18,14 +20,26 @@ export class InfoPanelLightboxComponent {
     this.mapEnabled = Config.Client.Map.enabled;
   }
 
+  isPhoto() {
+    return this.media && MediaDTO.isPhoto(this.media);
+  }
+
   calcMpx() {
     return (this.media.metadata.size.width * this.media.metadata.size.height / 1000000).toFixed(2);
   }
 
-  calcFileSize() {
+  renderDuration(time: number) {
+    const h = Math.floor(time / 1000 / 60 / 60);
+    time %= 1000 * 60 * 60;
+    const m = Math.floor(time / 1000 / 60);
+    time %= 1000 * 60;
+    const s = Math.floor(time / 1000);
+    return Utils.zeroPrefix(h, 2) + ':' + Utils.zeroPrefix(m, 2) + ':' + Utils.zeroPrefix(s, 2);
+  }
+
+  calcSize(size: number) {
     const postFixes = ['B', 'KB', 'MB', 'GB', 'TB'];
     let index = 0;
-    let size = this.media.metadata.fileSize;
     while (size > 1000 && index < postFixes.length - 1) {
       size /= 1000;
       index++;
@@ -52,8 +66,18 @@ export class InfoPanelLightboxComponent {
     return '1/' + (1 / f);
   }
 
+  get VideoData(): VideoMetadata {
+    if (typeof (<VideoDTO>this.media).metadata.bitRate === 'undefined') {
+      return null;
+    }
+    return (<VideoDTO>this.media).metadata;
+  }
+
   hasPositionData(): boolean {
-    return MediaDTO.hasPositionData(this.media);
+    return !!(<PhotoDTO>this.media).metadata.positionData &&
+      !!((<PhotoDTO>this.media).metadata.positionData.city ||
+        (<PhotoDTO>this.media).metadata.positionData.state ||
+        (<PhotoDTO>this.media).metadata.positionData.country);
   }
 
   hasGPS() {
@@ -61,6 +85,10 @@ export class InfoPanelLightboxComponent {
       (<PhotoDTO>this.media).metadata.positionData.GPSData.latitude && (<PhotoDTO>this.media).metadata.positionData.GPSData.longitude;
   }
 
+  get PositionData(): PositionMetaData {
+    return (<PhotoDTO>this.media).metadata.positionData;
+  }
+
   getPositionText(): string {
     if (!(<PhotoDTO>this.media).metadata.positionData) {
       return '';

frontend/app/gallery/lightbox/inputrange.css

@@ -17,7 +17,7 @@ input[type="range"]::-webkit-slider-runnable-track {
  */
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
-  width: 10px; /* 1 */
+  width: 1px; /* 1 */
   height: 10px;
   background: #fff;
   box-shadow: -100vw 0 0 100vw white;
@@ -31,7 +31,7 @@ input[type="range"]::-moz-range-track {
 input[type="range"]::-moz-range-thumb {
   background: #fff;
   height: 10px;
-  width: 10px;
+  width: 1px;
   box-shadow: -100vw 0 0 100vw white;
   box-sizing: border-box;
 }
@@ -43,7 +43,7 @@ input[type="range"]::-ms-fill-lower {
 input[type="range"]::-ms-thumb {
   background: #fff;
   height: 10px;
-  width: 10px;
+  width: 1px;
   box-sizing: border-box;
 }
 

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

@@ -64,6 +64,10 @@ app-gallery-lightbox-photo {
   opacity: 0.1;
 }
 
+#controllers-container.dim-controls-video {
+  opacity: 0;
+}
+
 #swipeable-container{
   height: 100%;
 }

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

@@ -16,52 +16,53 @@
     id="controllers-container"
     #controls
     [style.width.px]="getPhotoFrameWidth()"
-    [ngClass]="!controllersDimmed ? 'dim-controls':  ''">
+    [ngClass]="!controllersDimmed ? (activePhoto && activePhoto.gridPhoto.isVideo() ? 'dim-controls-video' :'dim-controls'):  ''">
+
+    <div class="controls controls-top">
+      <a *ngIf="activePhoto"
+         class="highlight control-button"
+         [href]="activePhoto.gridPhoto.getPhotoPath()"
+         [download]="activePhoto.gridPhoto.media.name">
+        <span class="oi oi-data-transfer-download"
+              title="download" i18n-title></span>
+      </a>
+
+      <div class=" highlight control-button" (click)="toggleInfoPanel()"
+           title="info" i18n-title>
+        <span class="oi oi-info"></span>
+      </div>
+
+      <div *ngIf="fullScreenService.isFullScreenEnabled()"
+           class=" highlight control-button"
+           (click)="fullScreenService.exitFullScreen()"
+           title="toggle fullscreen" i18n-title>
+        <span class="oi oi-fullscreen-exit">
+
+        </span>
+      </div>
+
+      <div *ngIf="!fullScreenService.isFullScreenEnabled()"
+           class="highlight control-button"
+           (click)="fullScreenService.showFullScreen(root)"
+           title="toggle fullscreen" i18n-title>
+        <span class="oi oi-fullscreen-enter">
+        </span>
+      </div>
+
+      <div class="highlight control-button"
+           (click)="hide()"
+           title="close" i18n-title>
+        <span class="oi oi-x">
+
+        </span>
+      </div>
+    </div>
     <div id="swipeable-container"
          (swipeleft)="nextImage()"
          (swiperight)="prevImage()"
          (swipeup)="hide()"
          (click)="photo.playPause()">
 
-      <div class="controls controls-top">
-        <a *ngIf="activePhoto"
-           class="highlight control-button"
-           [href]="activePhoto.gridPhoto.getPhotoPath()"
-           [download]="activePhoto.gridPhoto.media.name">
-        <span class="oi oi-data-transfer-download"
-              title="download" i18n-title></span>
-        </a>
-
-        <div class=" highlight control-button" (click)="toggleInfoPanel()"
-             title="info" i18n-title>
-          <span class="oi oi-info"></span>
-        </div>
-
-        <div *ngIf="fullScreenService.isFullScreenEnabled()"
-             class=" highlight control-button"
-             (click)="fullScreenService.exitFullScreen()"
-             title="toggle fullscreen" i18n-title>
-        <span class="oi oi-fullscreen-exit">
-
-        </span>
-        </div>
-
-        <div *ngIf="!fullScreenService.isFullScreenEnabled()"
-             class="highlight control-button"
-             (click)="fullScreenService.showFullScreen(root)"
-             title="toggle fullscreen" i18n-title>
-        <span class="oi oi-fullscreen-enter">
-        </span>
-        </div>
-
-        <div class="highlight control-button"
-             (click)="hide()"
-             title="close" i18n-title>
-        <span class="oi oi-x">
-
-        </span>
-        </div>
-      </div>
 
       <div class="navigation-arrow highlight"
            *ngIf="navigation.hasPrev" title="key: left arrow" id="leftArrow" i18n-title
@@ -72,7 +73,7 @@
            (click)="nextImage()"><span
         class="oi oi-chevron-right"></span></div>
 
-      <div class="controls controls-playback"  *ngIf="activePhoto && activePhoto.gridPhoto.isPhoto()">
+      <div class="controls controls-playback" *ngIf="activePhoto && activePhoto.gridPhoto.isPhoto()">
       <span class="oi oi-media-pause highlight control-button"
             [ngClass]="playBackState == 0 ? 'button-disabled':''"
             (click)="pause()"
@@ -109,7 +110,7 @@
   <app-info-panel *ngIf="activePhoto && infoPanelVisible"
                   id="info-panel"
                   [style.width.px]="infoPanelWidth"
-                  [media]="activePhoto.gridPhoto.photo"
+                  [media]="activePhoto.gridPhoto.media"
                   (closed)="hideInfoPanel()">
 
   </app-info-panel>

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

@@ -62,7 +62,7 @@ export class GalleryLightboxMediaComponent implements OnChanges {
 
   public get VideoVolume(): number {
     if (!this.video) {
-      return 100;
+      return 1;
     }
     return this.video.nativeElement.volume;
   }
@@ -88,7 +88,7 @@ export class GalleryLightboxMediaComponent implements OnChanges {
 
   public get Muted(): boolean {
     if (!this.video) {
-      return true;
+      return false;
     }
     return this.video.nativeElement.muted;
   }