adding tags list to the infobar. Fixes: #171

src/backend/middlewares/thumbnail/PhotoConverterMWs.ts

@@ -17,7 +17,7 @@ export class PhotoConverterMWs {
 
     const convertedVideo = PhotoProcessing.generateConvertedPath(fullMediaPath, Config.Server.Media.Photo.Converting.resolution);
 
-    // check if transcoded video exist
+    // check if converted photo exist
     if (fs.existsSync(convertedVideo) === true) {
       req.resultPipe = convertedVideo;
       return next();

src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.ts

@@ -24,13 +24,12 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
   infoBarVisible = false;
   animationTimer: number = null;
 
-  readonly SearchTypes: typeof SearchTypes;
+  readonly SearchTypes: typeof SearchTypes = SearchTypes;
   searchEnabled = true;
 
   wasInView: boolean = null;
 
   constructor(private thumbnailService: ThumbnailManagerService) {
-    this.SearchTypes = SearchTypes;
     this.searchEnabled = Config.Client.Search.enabled;
   }
 

src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.css

@@ -56,3 +56,16 @@
 .modal-header {
   padding: 0.4rem 1rem;
 }
+
+
+.keywords a {
+  color: #212529;
+}
+
+.keywords a:hover {
+  text-decoration: underline;
+}
+
+.keywords .oi-person{
+  margin-right: 2px;
+}

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

@@ -61,6 +61,7 @@
     </div>
   </div>
 
+
   <div class="row" *ngIf="CameraData">
     <div class="col-2">
       <span class="details-icon oi oi-camera-slr"></span>
@@ -83,6 +84,29 @@
     </div>
   </div>
 
+
+  <div class="row" *ngIf="keywords">
+    <div class="col-2">
+      <span class="details-icon oi oi-tags"></span>
+    </div>
+    <div class="col-10 keywords">
+        <ng-template ngFor let-keyword [ngForOf]="keywords" let-last="last">
+          <a *ngIf="searchEnabled"
+             [routerLink]="['/search', keyword.value, {type: SearchTypes[keyword.type]}]" [ngSwitch]="keyword.type">
+            <ng-template [ngSwitchCase]="SearchTypes.keyword">#</ng-template><!--
+       -->
+            <ng-template [ngSwitchCase]="SearchTypes.person"><span class="oi oi-person"></span></ng-template><!--
+       -->{{keyword.value}}</a>
+          <span *ngIf="!searchEnabled" [ngSwitch]="keyword.type">
+          <ng-template [ngSwitchCase]="SearchTypes.keyword">#</ng-template><!--
+       --><ng-template [ngSwitchCase]="SearchTypes.person"><span class="oi oi-person"></span></ng-template><!--
+       -->{{keyword.value}}</span>
+          <ng-template [ngIf]="!last">,&#32;</ng-template>
+        </ng-template>
+    </div>
+  </div>
+
+
   <div class="row" *ngIf="hasPositionData()">
     <div class="col-2">
       <span class="details-icon oi oi-map-marker"></span>

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

@@ -1,26 +1,31 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {CameraMetadata, PhotoDTO, PositionMetaData} from '../../../../../../common/entities/PhotoDTO';
+import {CameraMetadata, PhotoDTO, PhotoMetadata, 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';
 import {QueryService} from '../../../../model/query.service';
 import {MapService} from '../../map/map.service';
+import {SearchTypes} from '../../../../../../common/entities/AutoCompleteItem';
 
 @Component({
   selector: 'app-info-panel',
   styleUrls: ['./info-panel.lightbox.gallery.component.css'],
   templateUrl: './info-panel.lightbox.gallery.component.html',
 })
-export class InfoPanelLightboxComponent {
+export class InfoPanelLightboxComponent implements OnInit {
   @Input() media: MediaDTO;
   @Output() closed = new EventEmitter();
 
   public readonly mapEnabled: boolean;
+  public readonly searchEnabled: boolean;
+  keywords: { value: string, type: SearchTypes }[] = null;
+  readonly SearchTypes: typeof SearchTypes = SearchTypes;
 
   constructor(public queryService: QueryService,
               public mapService: MapService) {
     this.mapEnabled = Config.Client.Map.enabled;
+    this.searchEnabled = Config.Client.Search.enabled;
   }
 
   get FullPath(): string {
@@ -46,6 +51,21 @@ export class InfoPanelLightboxComponent {
     return (<PhotoDTO>this.media).metadata.cameraData;
   }
 
+  ngOnInit() {
+    const metadata = this.media.metadata as PhotoMetadata;
+    if ((metadata.keywords && metadata.keywords.length > 0) ||
+      (metadata.faces && metadata.faces.length > 0)) {
+      this.keywords = [];
+      if (Config.Client.Faces.enabled) {
+        const names: string[] = (metadata.faces || []).map(f => f.name);
+        this.keywords = names.filter((name, index) => names.indexOf(name) === index)
+          .map(n => ({value: n, type: SearchTypes.person}));
+      }
+      this.keywords = this.keywords.concat((metadata.keywords || []).map(k => ({value: k, type: SearchTypes.keyword})));
+    }
+
+  }
+
   isPhoto() {
     return this.media && MediaDTO.isPhoto(this.media);
   }