Not showing metadata in quickviewer by default

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitrivr-ng",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "license": "MIT",
   "scripts": {
     "ng": "ng",

src/app/objectdetails/quick-viewer.component.css

@@ -7,7 +7,7 @@
 
 .content {
     max-height: 600px;
-    max-width: 500px;
+    max-width: 600px;
     float:left;
 }
 

src/app/objectdetails/quick-viewer.component.html

@@ -1,6 +1,6 @@
 <h1 class="title" matDialogTitle>{{mediaobject.objectid}} ({{mediaobject.name}})</h1>
 <p><strong>Segment:</strong> {{_segment.segmentId}}</p>
-<div style="display: table; clear: both;">
+<div style="display: table; clear: both;min-width:600px;">
     <div class="content" mat-dialog-content>
         <!-- Video / Audio -->
         <app-advanced-media-player *ngIf="mediaobject.mediatype === 'VIDEO' || mediaobject.mediatype === 'AUDIO'"
@@ -24,12 +24,14 @@ <h1 class="title" matDialogTitle>{{mediaobject.objectid}} ({{mediaobject.name}})
             <mat-icon>send</mat-icon>
         </button>
     </div>
-    <div style="float:right;">
-        <mat-list>
-            <mat-list-item *ngFor="let metadatum of _segment.metadata | keyvalue">
-                {{metadatum.key}}: {{metadatum.value}}
-            </mat-list-item>
-        </mat-list>
-    </div>
+    <ng-container *ngIf="_config | GetConfigVariablePipe:showMd">
+        <div style="float:right;">
+            <mat-list>
+                <mat-list-item *ngFor="let metadatum of _segment.metadata | keyvalue">
+                    {{metadatum.key}}: {{metadatum.value}}
+                </mat-list-item>
+            </mat-list>
+        </div>
+    </ng-container>
 
 </div>

src/app/objectdetails/quick-viewer.component.ts

@@ -1,19 +1,22 @@
-import {AfterViewInit, Component, Inject, NgZone, ViewChild} from '@angular/core';
+import {AfterContentInit, AfterViewInit, Component, Inject, NgZone, ViewChild} from '@angular/core';
 import {MAT_DIALOG_DATA} from '@angular/material/dialog';
 import {MediaObjectScoreContainer} from '../shared/model/results/scores/media-object-score-container.model';
 import {MediaSegmentScoreContainer} from '../shared/model/results/scores/segment-score-container.model';
 import {ResolverService} from '../core/basics/resolver.service';
 import {VbsSubmissionService} from '../core/competition/vbs-submission.service';
 import * as openseadragon from 'openseadragon';
-import {ConfigService} from '../core/basics/config.service';
+import {Config} from '../shared/model/config/config.model';
+import {AppConfig} from '../app.config';
 
 @Component({
 
   selector: 'app-quick-viewer',
   templateUrl: 'quick-viewer.component.html',
   styleUrls: ['quick-viewer.component.css']
 })
-export class QuickViewerComponent implements AfterViewInit {
+export class QuickViewerComponent implements AfterViewInit, AfterContentInit {
+
+  _config: Config;
 
   /** Reference to the audio player. */
   @ViewChild('audioplayer')
@@ -32,7 +35,10 @@ export class QuickViewerComponent implements AfterViewInit {
 
   public mediaobject: MediaObjectScoreContainer;
 
-  public constructor(@Inject(MAT_DIALOG_DATA) data: any, readonly _resolver: ResolverService, readonly _vbs: VbsSubmissionService, private _ngZone: NgZone) {
+  showMd = ((c: Config) => c._config.refinement.showMetadataInViewer);
+
+
+  public constructor(@Inject(MAT_DIALOG_DATA) data: any, readonly _resolver: ResolverService, readonly _vbs: VbsSubmissionService, private _ngZone: NgZone, private _configService: AppConfig,) {
     if (data instanceof MediaObjectScoreContainer) {
       this._segment = data.representativeSegment;
     } else if (data instanceof MediaSegmentScoreContainer) {
@@ -43,10 +49,16 @@ export class QuickViewerComponent implements AfterViewInit {
     this.mediaobject = this._segment.objectScoreContainer
   }
 
+  ngAfterContentInit() {
+    this._configService.configAsObservable.subscribe(c => {
+      this._config = c
+    })
+  }
+
   /**
    * Initialize the openseadragon viewer to load the IIIF Image API resource if applicable
    */
-  ngAfterViewInit(): void {
+  ngAfterViewInit() {
     let url = ResolverService.iiifUrlToObject(this.mediaobject, true);
     if (!url) {
       return null

src/app/shared/model/config/config.model.ts

@@ -140,7 +140,8 @@ export class Config {
       filters: [
         ['dominantcolor.color', 'CHECKBOX'],
         ['technical.duration', 'SLIDER']
-      ]
+      ],
+      showMetadataInViewer: false
     }
   };