adding face box to lightbox

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

@@ -2,6 +2,7 @@
   width: 30px;
   min-width: 60px;
   height: 100px;
+  z-index: 3;
   position: absolute;
   top: calc(50% - 50px);
   display: inline-block;
@@ -40,7 +41,10 @@
 }
 
 #swipeable-container {
+  z-index: 2;
+  position: absolute;
   height: 100%;
+  width: 100%;
 }
 
 #rightArrow {
@@ -72,6 +76,8 @@
 }
 
 .controls-top {
+  position: absolute;
+  z-index: 4;
   top: 0;
 }
 
@@ -89,6 +95,7 @@
 .controls-playback {
   padding-right: 15px;
   bottom: 0;
+  z-index: 3;
   position: absolute;
 }
 
@@ -193,3 +200,35 @@ input[type="range"].zoom-progress::-moz-range-track {
 .controls-zoom .oi {
   cursor: pointer;
 }
+
+
+.faces-container {
+  z-index: 1;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.face {
+  opacity: 0.5;
+  position: absolute;
+  transition: opacity 0.5s;
+}
+
+.face-name {
+  white-space: nowrap;
+  color: white;
+}
+
+.face-box {
+  height: 100%;
+  border: 2px solid #FFF;
+  border-radius: 5px !important;
+}
+
+.face:hover {
+  opacity: 1.0;
+  text-decoration: none;
+}
+

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

@@ -1,4 +1,6 @@
-<div id="controllers-container" #root>
+<div id="controllers-container"
+     [ngClass]="(controllersDimmed && !controllersAlwaysOn) ? (activePhoto && activePhoto.gridPhoto.isVideo() ? 'dim-controls-video' :'dim-controls'):  ''"
+     #root>
   <div class="controls-caption" *ngIf="Title">{{Title}}</div>
   <div class="controls controls-top">
     <a class="highlight control-button"
@@ -32,7 +34,7 @@
     </div>
 
     <div class="highlight control-button"
-         (click)="closed.emit()"
+         (click)="closeLightbox()"
          title="close, key: Escape" i18n-title>
         <span class="oi oi-x">
 
@@ -48,6 +50,26 @@
        (wheel)="wheel($event)"
        (click)="mediaElement.playPause()">
 
+    <div class="faces-container"
+         [style.top.px]="photoFrameDim.height/2"
+         [style.left.px]="photoFrameDim.width/2"
+         [style.width.px]="faceContainerDim.width"
+         [style.height.px]="faceContainerDim.height"
+         *ngIf="activePhoto && zoom == 1">
+      <a
+        class="face"
+        [routerLink]="['/search', face.name, {type: SearchTypes[SearchTypes.person]}]"
+        [style.top.%]="face.box.top / activePhoto.gridPhoto.Photo.metadata.size.height*100"
+        [style.left.%]="face.box.left / activePhoto.gridPhoto.Photo.metadata.size.width*100"
+        [style.height.%]="face.box.height / activePhoto.gridPhoto.Photo.metadata.size.height*100"
+        [style.width.%]="face.box.width / activePhoto.gridPhoto.Photo.metadata.size.width*100"
+        *ngFor="let face of activePhoto.gridPhoto.Photo.metadata.faces">
+        <div class="face-box"></div>
+        <span class="face-name">{{face.name}}</span>
+      </a>
+    </div>
+
+
   </div>
 
   <div class="navigation-arrow highlight"
@@ -109,17 +131,6 @@
            [(ngModel)]="mediaElement.VideoVolume" min="0" max="1" step="0.1"
            value="1" class="col-2 col-md-1 volume">
   </div>
- <!-- <div class="faces"
-       *ngIf="activePhoto">
-    <div
-      [style.top.%]="face.box.top / activePhoto.gridPhoto.Photo.metadata.size.height*100"
-      [style.left.%]="face.box.left / activePhoto.gridPhoto.Photo.metadata.size.width*100"
-      [style.height.%]="face.box.height / activePhoto.gridPhoto.Photo.metadata.size.height*100"
-      [style.width.%]="face.box.width / activePhoto.gridPhoto.Photo.metadata.size.width*100"
-      style="background-color: red"
-      *ngFor="let face of activePhoto.gridPhoto.Photo.metadata.faces">
 
-    </div>
-  </div> -->
 
 </div>

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

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';
 import {MediaDTO} from '../../../../../../common/entities/MediaDTO';
 import {FullScreenService} from '../../fullscreen.service';
 import {GalleryPhotoComponent} from '../../grid/photo/photo.grid.gallery.component';
@@ -6,6 +6,7 @@ import {Observable, Subscription, timer} from 'rxjs';
 import {filter} from 'rxjs/operators';
 import {PhotoDTO} from '../../../../../../common/entities/PhotoDTO';
 import {GalleryLightboxMediaComponent} from '../media/media.lightbox.gallery.component';
+import {SearchTypes} from '../../../../../../common/entities/AutoCompleteItem';
 
 export enum PlayBackStates {
   Paused = 1,
@@ -18,10 +19,12 @@ export enum PlayBackStates {
   styleUrls: ['./controls.lightbox.gallery.component.css', './inputrange.css'],
   templateUrl: './controls.lightbox.gallery.component.html',
 })
-export class ControlsLightboxComponent implements OnDestroy, OnInit {
+export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
 
   readonly MAX_ZOOM = 10;
 
+  @ViewChild('root', {static: false}) root: ElementRef;
+
   @Output() closed = new EventEmitter();
   @Output() toggleInfoPanel = new EventEmitter();
   @Output() toggleFullScreen = new EventEmitter();
@@ -46,6 +49,9 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit {
   private timerSub: Subscription;
   private prevDrag = {x: 0, y: 0};
   private prevZoom = 1;
+  private faceContainerDim = {width: 0, height: 0};
+
+  public SearchTypes = SearchTypes;
 
   constructor(public fullScreenService: FullScreenService) {
   }
@@ -83,6 +89,16 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit {
     return (<PhotoDTO>this.activePhoto.gridPhoto.media).metadata.caption;
   }
 
+  public containerWidth() {
+    console.log(this.photoFrameDim);
+    return this.root.nativeElement.width;
+  }
+
+  public containerHeight() {
+    console.log(this.photoFrameDim);
+    return this.root.nativeElement.height;
+  }
+
   ngOnInit(): void {
     this.timer = timer(1000, 2000);
   }
@@ -95,6 +111,10 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit {
     }
   }
 
+  ngOnChanges(): void {
+    this.updateFaceContainerDim();
+  }
+
 
   pan($event: { deltaY: number, deltaX: number, isFinal: boolean }) {
     if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) {
@@ -272,6 +292,11 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit {
     this.checkZoomAndDrag();
   }
 
+  public closeLightbox() {
+    this.hideControls();
+    this.closed.emit();
+  }
+
   private checkZoomAndDrag() {
     const fixDrag = (drag: { x: number, y: number }) => {
       if (this.zoom === 1) {
@@ -337,5 +362,23 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit {
   private hideControls = () => {
     this.controllersDimmed = true;
   };
+
+  private updateFaceContainerDim() {
+    if (!this.activePhoto) {
+      return;
+    }
+
+
+    const photoAspect = MediaDTO.calcRotatedAspectRatio(this.activePhoto.gridPhoto.media);
+
+    if (photoAspect < this.photoFrameDim.aspect) {
+      this.faceContainerDim.height = this.photoFrameDim.height;
+      this.faceContainerDim.width = this.photoFrameDim.height * photoAspect;
+    } else {
+      this.faceContainerDim.height = this.photoFrameDim.width / photoAspect;
+      this.faceContainerDim.width = this.photoFrameDim.width;
+    }
+  }
+
 }
 

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

@@ -28,7 +28,7 @@ export enum LightboxStates {
 })
 export class GalleryLightboxComponent implements OnDestroy, OnInit {
 
-  @ViewChild('photo', {static: false}) mediaElement: GalleryLightboxMediaComponent;
+  @ViewChild('photo', {static: true}) mediaElement: GalleryLightboxMediaComponent;
   @ViewChild('controls', {static: false}) controls: ControlsLightboxComponent;
   @ViewChild('lightbox', {static: false}) lightboxElement: ElementRef;
   @ViewChild('root', {static: false}) root: ElementRef;

frontend/app/ui/settings/_abstract/abstract.settings.component.ts

@@ -17,7 +17,7 @@ export abstract class SettingsComponent<T extends { [key: string]: any }, S exte
   @Input()
   public simplifiedMode = true;
 
-  @ViewChild('settingsForm', {static: false})
+  @ViewChild('settingsForm', {static: true})
   form: HTMLFormElement;
 
   @Output()