fix(proceedings): missing audio information in file info popover

IPS-LMU · Dec 8, 2022 · 5113d2b · 5113d2b
1 parent cf9306d
commit 5113d2b
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 21 deletions.
diff --git a/apps/transcription-portal/src/app/components/file-info-table/file-info-table.component.html b/apps/transcription-portal/src/app/components/file-info-table/file-info-table.component.html
@@ -1,43 +1,43 @@
-<table class="table table-responsive-md table-striped" *ngIf="audioInfo !== undefined && audioInfo !== null">
+<table class="table table-responsive-md table-striped" *ngIf="fileinfo">
   <tbody>
   <tr>
     <td>Original filename:</td>
-    <td>{{audioInfo.attributes?.originalFileName}}</td>
+    <td>{{fileinfo?.attributes?.originalFileName}}</td>
   </tr>
   <tr>
     <td>Escaped filename:</td>
-    <td>{{audioInfo.fullname}}</td>
+    <td>{{fileinfo.fullname}}</td>
   </tr>
   <tr>
     <td>Type:</td>
-    <td>{{audioInfo.type}}</td>
+    <td>{{fileinfo.type}}</td>
   </tr>
   <tr>
     <td>Size:</td>
-    <td>{{audioInfo.size | filesize}}</td>
+    <td>{{fileinfo.size | filesize}}</td>
   </tr>
-  <ng-container *ngIf="audioInfo.type === 'audio/wav'">
+  <ng-container *ngIf="isWavFile()">
     <tr>
       <td>Sampling rate:</td>
-      <td>{{audioInfo.sampleRate}}</td>
+      <td>{{fileinfo.sampleRate}}</td>
     </tr>
     <tr>
       <td>Bits per Second:</td>
-      <td>{{audioInfo.bitrate}}</td>
+      <td>{{fileinfo.bitrate}}</td>
     </tr>
     <tr>
       <td [ngClass]="{
-                'red': audioInfo.channels > 1
+                'red': fileinfo.channels > 1
             }">Channels:
       </td>
       <td [ngClass]="{
-                'red': audioInfo.channels > 1
-            }">{{audioInfo.channels}}
+                'red': fileinfo.channels > 1
+            }">{{fileinfo.channels}}
       </td>
     </tr>
     <tr>
       <td>Duration:</td>
-      <td>{{audioInfo.duration.unix | time}}</td>
+      <td>{{fileinfo.duration.unix | time}}</td>
     </tr>
   </ng-container>
   </tbody>

diff --git a/apps/transcription-portal/src/app/components/file-info-table/file-info-table.component.ts b/apps/transcription-portal/src/app/components/file-info-table/file-info-table.component.ts
@@ -9,17 +9,13 @@ import {AudioInfo} from '@octra/media';
 })
 export class FileInfoTableComponent implements OnInit {
 
-  @Input() fileinfo?: FileInfo;
+  @Input() fileinfo?: AudioInfo;
 
   constructor() {
   }
 
-  get audioInfo(): AudioInfo | undefined {
-    // TODO change this
-    if (this.fileinfo instanceof AudioInfo) {
-      return this.fileinfo;
-    }
-    return undefined;
+  isWavFile() {
+    return this.fileinfo?.type?.includes('wav') ?? false;
   }
 
   ngOnInit() {

diff --git a/apps/transcription-portal/src/app/components/proceedings/proceedings.component.html b/apps/transcription-portal/src/app/components/proceedings/proceedings.component.html
@@ -98,7 +98,7 @@
     <br/><br/>
     <span>File information:</span>
     <tportal-file-info-table
-      [fileinfo]="(popover.task.files) ? popover.task.files[0] : undefined"></tportal-file-info-table>
+      [fileinfo]="getAudioFileOfTask(popover.task)"></tportal-file-info-table>
   </ng-container>
 </tportal-popover>
 
@@ -227,7 +227,8 @@ <h4>Start Processing</h4>
 
       <!-- TABLE BODY -->
       <tbody>
-      <tportal-context-menu (optionselected)="onContextMenuOptionSelected($event)" [hid]="contextmenu.hidden" [ngStyle]="{
+      <tportal-context-menu (optionselected)="onContextMenuOptionSelected($event)" [hid]="contextmenu.hidden"
+                            [ngStyle]="{
         'margin-top': contextmenu.y + 'px',
         'margin-left': contextmenu.x + 'px',
         'display': (contextmenu.hidden) ? 'none' : 'initial'

diff --git a/apps/transcription-portal/src/app/components/proceedings/proceedings.component.ts b/apps/transcription-portal/src/app/components/proceedings/proceedings.component.ts
@@ -31,6 +31,7 @@ import {DownloadModalComponent} from '../../modals/download-modal/download-modal
 import {G2pMausOperation} from '../../obj/operations/g2p-maus-operation';
 import {ShortcutManager} from '../../obj/shortcut-manager';
 import * as clipboard from 'clipboard-polyfill';
+import {AudioInfo} from '@octra/media';
 
 @Component({
   selector: 'tportal-proceedings',
@@ -889,4 +890,11 @@ export class ProceedingsComponent implements OnInit, OnDestroy {
     }
     return undefined;
   }
+
+  getAudioFileOfTask(task: Task): AudioInfo | undefined {
+    if (task.files.length > 0 && task.files[0] instanceof AudioInfo) {
+      return task.files[0];
+    }
+    return undefined;
+  }
 }