feat(resource): upload video (DEV-204)

package.json

@@ -34,7 +34,7 @@
     "@angular/platform-browser-dynamic": "^13.2.6",
     "@angular/router": "^13.2.6",
     "@ckeditor/ckeditor5-angular": "^2.0.2",
-    "@dasch-swiss/dsp-js": "^7.0.1",
+    "@dasch-swiss/dsp-js": "^7.0.2",
     "@datadog/browser-rum": "^3.11.0",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "6.0.0",

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

@@ -6,11 +6,13 @@ import {
     CreateAudioFileValue,
     CreateDocumentFileValue,
     CreateFileValue,
+    CreateMovingImageFileValue,
     CreateStillImageFileValue,
     UpdateArchiveFileValue,
     UpdateAudioFileValue,
     UpdateDocumentFileValue,
     UpdateFileValue,
+    UpdateMovingImageFileValue,
     UpdateStillImageFileValue
 } from '@dasch-swiss/dsp-js';
 import { NotificationService } from 'src/app/main/services/notification.service';
@@ -46,6 +48,7 @@ export class UploadComponent implements OnInit {
     supportedImageTypes = ['image/jpeg', 'image/jp2', 'image/tiff', 'image/tiff-fx', 'image/png'];
     supportedDocumentTypes = ['application/pdf'];
     supportedAudioTypes = ['audio/mpeg'];
+    supportedVideoTypes = ['video/mp4'];
     supportedArchiveTypes = ['application/zip', 'application/x-tar', 'application/gzip'];
 
     constructor(
@@ -101,8 +104,8 @@ export class UploadComponent implements OnInit {
                             case 'document':
                                 // the preview thumbnail is deactivated for the moment;
                                 // --> TODO: it will be activated as soon as we implement a pdf viewer
-                                // this.thumbnailUrl = res.uploadedFiles[0].temporaryUrl;
-                                this.thumbnailUrl = undefined;
+                                this.thumbnailUrl = res.uploadedFiles[0].temporaryUrl;
+                                // this.thumbnailUrl = undefined;
                                 break;
 
                             default:
@@ -224,6 +227,10 @@ export class UploadComponent implements OnInit {
                 fileValue = new CreateAudioFileValue();
                 break;
 
+            case 'movingImage':
+                fileValue = new CreateMovingImageFileValue();
+                break;
+
             case 'archive':
                 fileValue = new CreateArchiveFileValue();
                 break;
@@ -268,6 +275,10 @@ export class UploadComponent implements OnInit {
                 fileValue = new UpdateAudioFileValue();
                 break;
 
+            case 'movingImage':
+                fileValue = new UpdateMovingImageFileValue();
+                break;
+
             case 'archive':
                 fileValue = new UpdateArchiveFileValue();
                 break;
@@ -311,6 +322,10 @@ export class UploadComponent implements OnInit {
                 this.allowedFileTypes = this.supportedAudioTypes;
                 break;
 
+            case 'movingImage':
+                this.allowedFileTypes = this.supportedVideoTypes;
+                break;
+
             case 'archive':
                 this.allowedFileTypes = this.supportedArchiveTypes;
                 break;

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

@@ -88,8 +88,10 @@
         </button>
         <span class="fill-remaining-space"></span>
         <span>
-            <button mat-raised-button type="submit" color="primary" class="form-submit" [disabled]="!propertiesParentForm.valid">
-                {{ 'appLabels.form.action.submit' | translate}}
+            <button mat-raised-button type="submit" [color]="error ? 'warn' : 'primary'"  class="form-submit" [disabled]="!propertiesParentForm.valid">
+                <app-progress-indicator *ngIf="loading && !error" [color]="'white'" [status]="0"  class="submit-progress"></app-progress-indicator>
+                <mat-icon *ngIf="!loading && error">close</mat-icon>
+                {{ !loading && error ? ('appLabels.form.action.retry' | translate) : ('appLabels.form.action.submit' | translate) }}
             </button>
         </span>
     </div>

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

@@ -79,6 +79,9 @@ export class ResourceInstanceFormComponent implements OnInit, OnDestroy {
 
     valueOperationEventSubscription: Subscription;
 
+    loading = false;
+    // in case of any error
+    error = false;
     errorMessage: any;
 
     propertiesObj = {};
@@ -155,6 +158,8 @@ export class ResourceInstanceFormComponent implements OnInit, OnDestroy {
 
     submitData() {
 
+        this.loading = true;
+
         if (this.propertiesParentForm.valid) {
 
             const createResource = new CreateResource();
@@ -193,6 +198,9 @@ export class ResourceInstanceFormComponent implements OnInit, OnDestroy {
                     case 'audio':
                         this.propertiesObj[Constants.HasAudioFileValue] = [this.fileValue];
                         break;
+                    case 'movingImage':
+                        this.propertiesObj[Constants.HasMovingImageFileValue] = [this.fileValue];
+                        break;
                     case 'archive':
                         this.propertiesObj[Constants.HasArchiveFileValue] = [this.fileValue];
                 }
@@ -212,6 +220,8 @@ export class ResourceInstanceFormComponent implements OnInit, OnDestroy {
                     this.closeDialog.emit();
                 },
                 (error: ApiResponseError) => {
+                    this.error = true;
+                    this.loading = false;
                     this._errorHandler.showMessage(error);
                 }
             );
@@ -366,7 +376,9 @@ export class ResourceInstanceFormComponent implements OnInit, OnDestroy {
                                     prop.id !== Constants.HasStillImageFileValue &&
                                     prop.id !== Constants.HasDocumentFileValue &&
                                     prop.id !== Constants.HasAudioFileValue &&
-                                    prop.id !== Constants.HasArchiveFileValue  // --> TODO for UPLOAD: expand with other representation file values
+                                    prop.id !== Constants.HasMovingImageFileValue &&
+                                    prop.id !== Constants.HasArchiveFileValue
+                                    // --> TODO for UPLOAD: expand with other representation file values
                             );
 
                             if (onto.properties[Constants.HasStillImageFileValue]) {
@@ -375,6 +387,8 @@ export class ResourceInstanceFormComponent implements OnInit, OnDestroy {
                                 this.hasFileValue = 'document';
                             } else if (onto.properties[Constants.HasAudioFileValue]) {
                                 this.hasFileValue = 'audio';
+                            } else if (onto.properties[Constants.HasMovingImageFileValue]) {
+                                this.hasFileValue = 'movingImage';
                             } else if (onto.properties[Constants.HasArchiveFileValue]) {
                                 this.hasFileValue = 'archive';
                             } else {

src/app/workspace/resource/values/text-value/text-value-as-string/text-value-as-string.component.ts

@@ -35,7 +35,6 @@ export class TextValueAsStringComponent extends BaseValueDirective implements On
     editor: Editor;
     editorConfig;
 
-
     constructor(@Inject(FormBuilder) private _fb: FormBuilder) {
         super();
     }

src/assets/i18n/en.json

@@ -48,6 +48,8 @@
                 "cancel": "Cancel",
                 "close": "Close",
                 "submit": "Save",
+                "submitting": "Submitting",
+                "retry": "Retry",
                 "add": "Add",
                 "update": "Update",
                 "next": "Next",

src/assets/style/_layout.scss

@@ -176,6 +176,10 @@
   text-align: right;
 }
 
+.inline {
+  display: inline-flex;
+}
+
 // --------------------------------------
 
 // ?-?-?-?-?-?-?-?-?-?-?-?-?-?-?-?-?-?-