feat(resource): upload audio (DSP-1799)

package.json

@@ -34,7 +34,7 @@
     "@angular/platform-browser-dynamic": "^11.2.9",
     "@angular/router": "^11.2.9",
     "@ckeditor/ckeditor5-angular": "^1.2.3",
-    "@dasch-swiss/dsp-js": "^2.6.1",
+    "@dasch-swiss/dsp-js": "^2.7.0",
     "@dasch-swiss/dsp-ui": "^1.6.0",
     "@ngx-translate/core": "^12.1.2",
     "@ngx-translate/http-loader": "5.0.0",

src/app/workspace/resource/representation/upload/upload.component.html

@@ -9,8 +9,10 @@
             <dsp-progress-indicator *ngIf="isLoading"></dsp-progress-indicator>
             <p class="title">Upload file<br>
                 <span class="mat-body-1">The following file types are supported:<br>
-                    <span *ngFor="let item of allowedFileTypes; let last = last">{{ item | split: '/':1 }}<span
-                            *ngIf="!last">,&nbsp;</span></span>
+                    <span *ngFor="let item of allowedFileTypes; let last = last">{{ item | split: '/':1 }}
+                        <span *ngIf="!last">,&nbsp;</span>
+                    </span>
+                    <span *ngIf="representation === 'audio'">&nbsp;(= mp3)</span>
                 </span>
             </p>
             <div class="bottom-line">

src/app/workspace/resource/representation/upload/upload.component.ts

@@ -1,9 +1,11 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import {
+    CreateAudioFileValue,
     CreateDocumentFileValue,
     CreateFileValue,
     CreateStillImageFileValue,
+    UpdateAudioFileValue,
     UpdateDocumentFileValue,
     UpdateFileValue,
     UpdateStillImageFileValue
@@ -41,6 +43,7 @@ export class UploadComponent implements OnInit {
     // todo: maybe we can use this list to display which file format is allowed to
     supportedImageTypes = ['image/jpeg', 'image/jp2', 'image/tiff', 'image/tiff-fx', 'image/png'];
     supportedDocumentTypes = ['application/pdf'];
+    supportedAudioTypes = ['audio/mpeg'];
 
     // readonly fromLabels = {
     //     upload: 'Upload file',
@@ -87,6 +90,7 @@ export class UploadComponent implements OnInit {
                 this._upload.upload(formData).subscribe(
                     (res: UploadedFileResponse) => {
 
+                        // prepare thumbnail url to display something after upload
                         switch (this.representation) {
                             case 'stillImage':
                                 const temporaryUrl = res.uploadedFiles[0].temporaryUrl;
@@ -215,6 +219,10 @@ export class UploadComponent implements OnInit {
                 fileValue = new CreateDocumentFileValue();
                 break;
 
+            case 'audio':
+                fileValue = new CreateAudioFileValue();
+                break;
+
             default:
                 // --> TODO for UPLOAD: expand with other representation file types
                 break;
@@ -239,7 +247,7 @@ export class UploadComponent implements OnInit {
 
         const filename = this.fileControl.value.internalFilename;
 
-        let fileValue: UpdateStillImageFileValue | UpdateDocumentFileValue;
+        let fileValue: UpdateStillImageFileValue | UpdateDocumentFileValue | UpdateAudioFileValue;
 
 
         switch (this.representation) {
@@ -250,6 +258,10 @@ export class UploadComponent implements OnInit {
             case 'document':
                 fileValue = new UpdateDocumentFileValue();
                 break;
+
+            case 'audio':
+                fileValue = new UpdateAudioFileValue();
+                break;
             default:
                 // --> TODO for UPLOAD: expand with other representation file types
                 break;
@@ -283,6 +295,9 @@ export class UploadComponent implements OnInit {
             case 'document':
                 this.allowedFileTypes = this.supportedDocumentTypes;
                 break;
+            case 'audio':
+                this.allowedFileTypes = this.supportedAudioTypes;
+                break;
             default:
                 this.allowedFileTypes = [];
                 break;

src/app/workspace/resource/resource-instance-form/resource-instance-form.component.ts

@@ -172,6 +172,9 @@ export class ResourceInstanceFormComponent implements OnInit, OnDestroy {
                     case 'document':
                         this.propertiesObj[Constants.HasDocumentFileValue] = [this.fileValue];
                         break;
+                    case 'audio':
+                        this.propertiesObj[Constants.HasAudioFileValue] = [this.fileValue];
+                        break;
                 }
             }
 
@@ -381,7 +384,8 @@ export class ResourceInstanceFormComponent implements OnInit, OnDestroy {
                             !prop.isLinkProperty &&
                             prop.isEditable &&
                             prop.id !== Constants.HasStillImageFileValue &&
-                            prop.id !== Constants.HasDocumentFileValue  // --> TODO for UPLOAD: expand with other representation file values
+                            prop.id !== Constants.HasDocumentFileValue &&
+                            prop.id !== Constants.HasAudioFileValue  // --> TODO for UPLOAD: expand with other representation file values
                     );
 
                     if (onto.properties[Constants.HasStillImageFileValue]) {
@@ -390,6 +394,9 @@ export class ResourceInstanceFormComponent implements OnInit, OnDestroy {
                     if (onto.properties[Constants.HasDocumentFileValue]) {
                         this.hasFileValue = 'document';
                     }
+                    if (onto.properties[Constants.HasAudioFileValue]) {
+                        this.hasFileValue = 'audio';
+                    }
 
                     // notifies the user that the selected resource does not have any properties defined yet.
                     if (!this.selectPropertiesComponent && this.properties.length === 0) {