improving controls, implementing playback

Author: bpatrik

backend/model/threading/DiskMangerWorker.ts

@@ -52,14 +52,7 @@ export class DiskMangerWorker {
             });
 
             try {
-              const exif_obj = exif_parser.create(data);
-
-              exif_obj.enableTagNames(true);
-              exif_obj.enableImageSize(true);
-              exif_obj.enableReturnTags(true);
-              const exif = exif_obj.parse();
-
-              Logger.debug(LOG_TAG, "exif data", exif);
+              const exif = exif_parser.create(data).parse();
               metadata.cameraData = <CameraMetadata> {
                 ISO: exif.tags.ISO,
                 model: exif.tags.Model,

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

@@ -81,7 +81,7 @@ <h1>Info</h1>
       [disableDefaultUI]="true"
       [zoomControl]="false"
       [streetViewControl]="false"
-      [zoom]="5"
+      [zoom]="6"
       [latitude]="photo.metadata.positionData.GPSData.latitude"
       [longitude]="photo.metadata.positionData.GPSData.longitude">
       <agm-marker

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

@@ -29,12 +29,12 @@ gallery-lightbox-photo {
 
 .navigation-arrow {
   width: 30%;
-  height: 100%;
+  height: calc(100% - 75px);
   position: static;
   display: inline-block;
   padding: 15px;
   cursor: pointer;
-  font-size: x-large;
+  font-size: xx-large;
 }
 
 .navigation-arrow span {
@@ -47,34 +47,53 @@ gallery-lightbox-photo {
   height: 100%;
   left: 0;
   top: 0;
+  opacity: 1.0;
   position: fixed;
   color: white;
-  transition: all 0.3s ease-in-out;
+  transition: width 0.3s ease-in-out, opacity 1s;
+}
+
+#controllers-container.dim-controls {
+  opacity: 0.1;
 }
 
 #rightArrow {
   float: right;
   text-align: right;
 }
 
-#controls {
-  top: 0;
+.controls {
   height: initial;
   text-align: right;
   width: 100%;
   padding: 5px;
   font-size: large;
 }
 
-#controls span {
+.controls .control-button {
   margin-left: 6px;
   margin-right: 6px;
   color: white;
   cursor: pointer;
 }
 
+.controls .button-disabled {
+  color: #888;
+}
+
+.controls-top {
+  top: 0;
+
+}
+
+.controls-playback {
+  padding-right: 15px;
+  bottom: 0;
+  position: absolute;
+}
+
 .highlight {
-  opacity: 0.4;
+  opacity: 0.5;
   transition: opacity .2s ease-out;
   -moz-transition: opacity .2s ease-out;
   -webkit-transition: opacity .2s ease-out;
@@ -85,6 +104,25 @@ gallery-lightbox-photo {
   opacity: 1.0;
 }
 
+@-webkit-keyframes blink {
+  0% {
+    opacity: 0.5;
+  }
+  25% {
+    opacity: 1.0;
+  }
+  75% {
+    opacity: 1.0;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}
+
+.button-active {
+  animation: blink 3s ease-in-out infinite;
+}
+
 info-panel {
   z-index: 1100; /* Sit on top */
   position: fixed;

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

@@ -10,43 +10,54 @@
     </gallery-lightbox-photo>
   </div>
 
-  <!--
-  [@photoState]="{value:visible?'active':'inactive',
-                              params:{
-                              startWidth:startPhotoDimension.width,
-                              startHeight:startPhotoDimension.height,
-                              startTop:startPhotoDimension.top,
-                              startLeft:startPhotoDimension.left,
-                              endWidth:photoDimension.width,
-                              endHeight:photoDimension.height,
-                              endTop:photoDimension.top,
-                              endLeft:photoDimension.left}}"
-  -->
-  <div id="controllers-container" #controls
-       [style.width.px]="getScreenWidth()">
-    <div id="controls">
+  <div
+    *ngIf="controllersVisible"
+    id="controllers-container" #controls [style.width.px]="getScreenWidth()"
+    [ngClass]="!controllersDimmed ? 'dim-controls':  ''">
+    <div class="controls controls-top">
       <a *ngIf="activePhoto" [href]="activePhoto.gridPhoto.getPhotoPath()"
-         [download]="activePhoto.gridPhoto.photo.name"><span class="glyphicon glyphicon-download-alt highlight"
-                                                             title="download"></span></a>
-      <span class="glyphicon glyphicon-info-sign highlight" (click)="toggleInfoPanel()" title="info"></span>
+         [download]="activePhoto.gridPhoto.photo.name">
+        <span class="glyphicon glyphicon-download-alt highlight control-button"
+              title="download"></span>
+      </a>
+      <span class="glyphicon glyphicon-info-sign highlight control-button" (click)="toggleInfoPanel()"
+            title="info"></span>
 
-      <span class=" glyphicon glyphicon-resize-small highlight"
+      <span class=" glyphicon glyphicon-resize-small highlight control-button"
             *ngIf="fullScreenService.isFullScreenEnabled()"
             (click)="fullScreenService.exitFullScreen()" title="toggle fullscreen"></span>
 
-      <span class="glyphicon glyphicon-fullscreen highlight"
+      <span class="glyphicon glyphicon-fullscreen highlight control-button"
             *ngIf="!fullScreenService.isFullScreenEnabled()"
             (click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen"></span>
 
       <span class="glyphicon glyphicon-remove highlight" (click)="hide()" title="close"></span>
     </div>
 
-    <div class="navigation-arrow highlight" *ngIf="navigation.hasPrev" title="key: left arrow" id="leftArrow"
+    <div class="navigation-arrow highlight"
+         *ngIf="navigation.hasPrev" title="key: left arrow" id="leftArrow"
          (click)="prevImage()"><span
       class="glyphicon glyphicon-chevron-left"></span></div>
-    <div class="navigation-arrow highlight" *ngIf="navigation.hasNext" title="key: right arrow" id="rightArrow"
+    <div class="navigation-arrow highlight"
+         *ngIf="navigation.hasNext" title="key: right arrow" id="rightArrow"
          (click)="nextImage()"><span
       class="glyphicon glyphicon-chevron-right"></span></div>
+
+    <div class="controls controls-playback">
+      <span class="glyphicon glyphicon-pause highlight control-button"
+            [ngClass]="playBackState == 0 ? 'button-disabled':''"
+            (click)="pause()"
+            title="pause"></span>
+      <span
+        class="glyphicon glyphicon-play highlight control-button"
+        [ngClass]="playBackState == 1 ? 'button-active':''"
+        (click)="play()"
+        title="auto play"></span>
+      <span class="glyphicon glyphicon-forward highlight control-button"
+            [ngClass]="playBackState == 2 ? 'button-active':''"
+            (click)="fastForward()"
+            title="fast auto play"></span>
+    </div>
   </div>
   <info-panel *ngIf="activePhoto && infoPanelVisible"
               id="info-panel"

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

@@ -17,6 +17,7 @@ import {OverlayService} from "../overlay.service";
 import {Subscription} from "rxjs";
 import {animate, AnimationBuilder, style} from "@angular/animations";
 import {GalleryLightboxPhotoComponent} from "./photo/photo.lightbox.gallery.component";
+import {Observable} from "rxjs/Observable";
 
 @Component({
   selector: 'gallery-lightbox',
@@ -37,7 +38,11 @@ export class GalleryLightboxComponent implements OnDestroy {
 
   public visible = false;
   private changeSubscription: Subscription = null;
-
+  private timer: Observable<number>;
+  private timerSub: Subscription;
+  public playBackState: number = 0;
+  public controllersDimmed = true;
+  public controllersVisible = true;
 
   public infoPanelVisible = false;
   public infoPanelWidth = 0;
@@ -48,8 +53,12 @@ export class GalleryLightboxComponent implements OnDestroy {
               private _builder: AnimationBuilder) {
   }
 
+  ngOnInit(): void {
+    this.timer = Observable.timer(1000, 2000);
+  }
 
   ngOnDestroy(): void {
+    this.pause();
     if (this.changeSubscription != null) {
       this.changeSubscription.unsubscribe();
     }
@@ -76,6 +85,7 @@ export class GalleryLightboxComponent implements OnDestroy {
   }
 
   public prevImage() {
+    this.pause();
     if (this.activePhotoId > 0) {
       this.showPhoto(this.activePhotoId - 1);
       return;
@@ -87,6 +97,7 @@ export class GalleryLightboxComponent implements OnDestroy {
   activePhotoId: number = null;
 
   private showPhoto(photoIndex: number, resize: boolean = true) {
+    console.log("showing photo");
     this.activePhoto = null;
     this.changeDetector.detectChanges();
     this.updateActivePhoto(photoIndex, resize);
@@ -120,6 +131,8 @@ export class GalleryLightboxComponent implements OnDestroy {
   startPhotoDimension: Dimension = <Dimension>{top: 0, left: 0, width: 0, height: 0};
 
   public show(photo: PhotoDTO) {
+    this.controllersVisible = true;
+    this.showControls();
     console.log(this.photoElement);
     this.visible = true;
     let selectedPhoto = this.findPhotoComponent(photo);
@@ -149,6 +162,7 @@ export class GalleryLightboxComponent implements OnDestroy {
   }
 
   public hide() {
+    this.controllersVisible = false;
     this.fullScreenService.exitFullScreen();
 
     const lightboxDimension = this.activePhoto.getDimension();
@@ -343,5 +357,58 @@ export class GalleryLightboxComponent implements OnDestroy {
 
     return <Dimension>{top: top, left: left, width: width, height: height};
   }
+
+  visibilityTimer = null;
+
+  @HostListener('mousemove')
+  onMousemove() {
+    this.showControls();
+  }
+
+  private showControls() {
+    this.controllersDimmed = true;
+    if (this.visibilityTimer != null) {
+      clearTimeout(this.visibilityTimer);
+    }
+    this.visibilityTimer = setTimeout(this.hideControls, 2000);
+  }
+
+  private hideControls = () => {
+
+    this.controllersDimmed = false;
+  };
+
+  public pause() {
+    if (this.timerSub != null) {
+      this.timerSub.unsubscribe();
+    }
+    this.playBackState = 0;
+  }
+
+  public play() {
+    console.log("play");
+    this.pause();
+    this.timerSub = this.timer.filter(t => t % 2 == 0).subscribe(() => {
+      if (this.navigation.hasNext) {
+        this.nextImage();
+      } else {
+        this.showPhoto(0);
+      }
+    });
+    this.playBackState = 1;
+  }
+
+  public fastForward() {
+    console.log("fastForward");
+    this.pause();
+    this.timerSub = this.timer.subscribe(() => {
+      if (this.navigation.hasNext) {
+        this.nextImage();
+      } else {
+        this.showPhoto(0);
+      }
+    });
+    this.playBackState = 2;
+  }
 }