From bf372dc41c7da0a4c2e3263f1d3cace5e7eedc64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Kilchenmann?= Date: Thu, 22 Jul 2021 15:08:12 +0200 Subject: [PATCH] feat(resource): audio player (DSP-1805) (#487) * feat(resource): new component for audio player * chore(deps): bump dsp-js to latest version --- package-lock.json | 22 ++----- package.json | 2 +- src/app/app.module.ts | 2 + .../representation/audio/audio.component.html | 4 ++ .../representation/audio/audio.component.scss | 3 + .../audio/audio.component.spec.ts | 64 +++++++++++++++++++ .../representation/audio/audio.component.ts | 20 ++++++ .../document/document.component.html | 4 +- .../document/document.component.spec.ts | 3 +- .../document/document.component.ts | 2 +- .../resource/resource.component.html | 5 +- .../workspace/resource/resource.component.ts | 8 ++- src/assets/style/_elements.scss | 4 ++ 13 files changed, 117 insertions(+), 26 deletions(-) create mode 100644 src/app/workspace/resource/representation/audio/audio.component.html create mode 100644 src/app/workspace/resource/representation/audio/audio.component.scss create mode 100644 src/app/workspace/resource/representation/audio/audio.component.spec.ts create mode 100644 src/app/workspace/resource/representation/audio/audio.component.ts diff --git a/package-lock.json b/package-lock.json index 5e15727d44..c83f733069 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,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": "file:.yalc/@dasch-swiss/dsp-js", "@dasch-swiss/dsp-ui": "^1.6.0", "@ngx-translate/core": "^12.1.2", "@ngx-translate/http-loader": "5.0.0", @@ -77,8 +77,7 @@ } }, ".yalc/@dasch-swiss/dsp-js": { - "version": "2.6.0", - "extraneous": true, + "version": "2.6.1", "license": "AGPL-3.0", "dependencies": { "@types/jsonld": "^1.5.0", @@ -2258,17 +2257,8 @@ } }, "node_modules/@dasch-swiss/dsp-js": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/@dasch-swiss/dsp-js/-/dsp-js-2.6.1.tgz", - "integrity": "sha512-hI5UKHn8yVdWKtq6KZXfje9ZI7CiyMmElnKOzqy1T2P/IbFT5VGbr3XAYEO0p1sQ00+Xq+LHZZNv3xUcttWkEA==", - "dependencies": { - "@types/jsonld": "^1.5.0", - "json2typescript": "1.4.1", - "jsonld": "^5.2.0" - }, - "peerDependencies": { - "rxjs": "6.x" - } + "resolved": ".yalc/@dasch-swiss/dsp-js", + "link": true }, "node_modules/@dasch-swiss/dsp-ui": { "version": "1.6.0", @@ -21733,9 +21723,7 @@ } }, "@dasch-swiss/dsp-js": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/@dasch-swiss/dsp-js/-/dsp-js-2.6.1.tgz", - "integrity": "sha512-hI5UKHn8yVdWKtq6KZXfje9ZI7CiyMmElnKOzqy1T2P/IbFT5VGbr3XAYEO0p1sQ00+Xq+LHZZNv3xUcttWkEA==", + "version": "file:.yalc/@dasch-swiss/dsp-js", "requires": { "@types/jsonld": "^1.5.0", "json2typescript": "1.4.1", diff --git a/package.json b/package.json index 4515afdffa..f7fce2e049 100644 --- a/package.json +++ b/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.6.2", "@dasch-swiss/dsp-ui": "^1.6.0", "@ngx-translate/core": "^12.1.2", "@ngx-translate/http-loader": "5.0.0", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3db3768dc4..0dfec737cb 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -95,6 +95,7 @@ import { SwitchPropertiesComponent } from './workspace/resource/resource-instanc import { SelectResourceClassComponent } from './workspace/resource/resource-instance-form/select-resource-class/select-resource-class.component'; import { ResourceComponent } from './workspace/resource/resource.component'; import { ResultsComponent } from './workspace/results/results.component'; +import { AudioComponent } from './workspace/resource/representation/audio/audio.component'; // translate: AoT requires an exported function for factories export function httpLoaderFactory(httpClient: HttpClient) { @@ -176,6 +177,7 @@ export function httpLoaderFactory(httpClient: HttpClient) { UsersComponent, UsersListComponent, VisualizerComponent, + AudioComponent, ], imports: [ AppRoutingModule, diff --git a/src/app/workspace/resource/representation/audio/audio.component.html b/src/app/workspace/resource/representation/audio/audio.component.html new file mode 100644 index 0000000000..f57d9e914e --- /dev/null +++ b/src/app/workspace/resource/representation/audio/audio.component.html @@ -0,0 +1,4 @@ + diff --git a/src/app/workspace/resource/representation/audio/audio.component.scss b/src/app/workspace/resource/representation/audio/audio.component.scss new file mode 100644 index 0000000000..a1acb2ba8e --- /dev/null +++ b/src/app/workspace/resource/representation/audio/audio.component.scss @@ -0,0 +1,3 @@ +audio { + width: 100%; +} diff --git a/src/app/workspace/resource/representation/audio/audio.component.spec.ts b/src/app/workspace/resource/representation/audio/audio.component.spec.ts new file mode 100644 index 0000000000..294f98c3b7 --- /dev/null +++ b/src/app/workspace/resource/representation/audio/audio.component.spec.ts @@ -0,0 +1,64 @@ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { FileRepresentation } from '../file-representation'; +import { AudioComponent } from './audio.component'; + +// --> TODO: get test data from dsp-js or from dsp-api test data +const audioFileValue = { + 'type': 'http://api.knora.org/ontology/knora-api/v2#AudioFileValue', + 'id': 'http://rdfh.ch/1111/hgWTQVPRRTSI87PnlRmUxg/values/VKiMFffXQ9SzWeeCVrk8gw', + 'attachedToUser': 'http://rdfh.ch/users/Iscj52QaSk-LNurRU6z3Hw', + 'arkUrl': 'http://0.0.0.0:3336/ark:/72163/1/1111/hgWTQVPRRTSI87PnlRmUxgI/RVy0rG=vTe=vU=QW6zDToAY', + 'versionArkUrl': 'http://0.0.0.0:3336/ark:/72163/1/1111/hgWTQVPRRTSI87PnlRmUxgI/RVy0rG=vTe=vU=QW6zDToAY.20210719T074023813773Z', + 'valueCreationDate': '2021-07-19T07:40:23.813773Z', + 'hasPermissions': 'CR knora-admin:ProjectAdmin|D knora-admin:ProjectAdmin|M knora-admin:ProjectAdmin|V knora-admin:ProjectAdmin|RV knora-admin:ProjectAdmin', + 'userHasPermission': 'CR', + 'uuid': 'RVy0rG-vTe-vU-QW6zDToA', + 'filename': '7vpVORXYoFV-FkzJ5Fg4bkU.mp3', + 'fileUrl': 'http://0.0.0.0:1024/1111/7vpVORXYoFV-FkzJ5Fg4bkU.mp3/file', + 'duration': 0, + 'strval': 'http://0.0.0.0:1024/1111/7vpVORXYoFV-FkzJ5Fg4bkU.mp3/file', + 'property': 'http://api.knora.org/ontology/knora-api/v2#hasAudioFileValue', + 'propertyLabel': 'hat Audiodatei', + 'propertyComment': 'Connects a Representation to an audio file' +}; + +@Component({ + template: ` + + ` +}) +class TestHostComponent implements OnInit { + + @ViewChild(AudioComponent) audioPlayerComp: AudioComponent; + + audioFileRepresentation: FileRepresentation; + + ngOnInit() { + + this.audioFileRepresentation = new FileRepresentation(audioFileValue); + } +} + +describe('AudioComponent', () => { + let testHostComponent: TestHostComponent; + let testHostFixture: ComponentFixture; + + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [AudioComponent] + }) + .compileComponents(); + }); + + beforeEach(() => { + testHostFixture = TestBed.createComponent(TestHostComponent); + testHostComponent = testHostFixture.componentInstance; + testHostFixture.detectChanges(); + }); + + it('should create', () => { + expect(testHostComponent).toBeTruthy(); + }); +}); diff --git a/src/app/workspace/resource/representation/audio/audio.component.ts b/src/app/workspace/resource/representation/audio/audio.component.ts new file mode 100644 index 0000000000..41b94ece4e --- /dev/null +++ b/src/app/workspace/resource/representation/audio/audio.component.ts @@ -0,0 +1,20 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { FileRepresentation } from '../file-representation'; + +@Component({ + selector: 'app-audio', + templateUrl: './audio.component.html', + styleUrls: ['./audio.component.scss'] +}) +export class AudioComponent implements OnInit { + + @Input() src: FileRepresentation; + + + constructor() { } + + ngOnInit(): void { + + } + +} diff --git a/src/app/workspace/resource/representation/document/document.component.html b/src/app/workspace/resource/representation/document/document.component.html index afe2956a25..bdc00cae60 100644 --- a/src/app/workspace/resource/representation/document/document.component.html +++ b/src/app/workspace/resource/representation/document/document.component.html @@ -27,13 +27,13 @@ - + launch - diff --git a/src/app/workspace/resource/representation/document/document.component.spec.ts b/src/app/workspace/resource/representation/document/document.component.spec.ts index 764a815d33..28749ed9c0 100644 --- a/src/app/workspace/resource/representation/document/document.component.spec.ts +++ b/src/app/workspace/resource/representation/document/document.component.spec.ts @@ -6,7 +6,6 @@ import { PdfViewerModule } from 'ng2-pdf-viewer'; import { FileRepresentation } from '../file-representation'; import { DocumentComponent } from './document.component'; - // --> TODO: get test data from dsp-js or from dsp-api test data const documentFileValue = { 'type': 'http://api.knora.org/ontology/knora-api/v2#DocumentFileValue', @@ -31,7 +30,7 @@ const documentFileValue = { @Component({ template: ` - + ` }) class TestHostComponent implements OnInit { diff --git a/src/app/workspace/resource/representation/document/document.component.ts b/src/app/workspace/resource/representation/document/document.component.ts index 0b8123b6e4..b7ceea727b 100644 --- a/src/app/workspace/resource/representation/document/document.component.ts +++ b/src/app/workspace/resource/representation/document/document.component.ts @@ -9,7 +9,7 @@ import { FileRepresentation } from '../file-representation'; }) export class DocumentComponent implements OnInit { - @Input() document: FileRepresentation; + @Input() src: FileRepresentation; @ViewChild(PdfViewerComponent) private _pdfComponent: PdfViewerComponent; diff --git a/src/app/workspace/resource/resource.component.html b/src/app/workspace/resource/resource.component.html index de24734262..9216dd9524 100644 --- a/src/app/workspace/resource/resource.component.html +++ b/src/app/workspace/resource/resource.component.html @@ -11,10 +11,11 @@ (regionClicked)="openRegion($event)"> - - + + + The file representation type "{{representationsToDisplay[0].fileValue.type}}" is not yet implemented diff --git a/src/app/workspace/resource/resource.component.ts b/src/app/workspace/resource/resource.component.ts index c9ea0f6a5f..535bdaaa7d 100644 --- a/src/app/workspace/resource/resource.component.ts +++ b/src/app/workspace/resource/resource.component.ts @@ -14,6 +14,7 @@ import { CountQueryResponse, IHasPropertyWithPropertyDefinition, KnoraApiConnection, + ReadAudioFileValue, ReadDocumentFileValue, ReadResource, ReadResourceSequence, ReadStillImageFileValue, SystemPropertyDefinition @@ -354,6 +355,11 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy { representations.push(document); } + } else if (resource.res.properties[Constants.HasAudioFileValue]) { + + const fileValue: ReadAudioFileValue = resource.res.properties[Constants.HasAudioFileValue][0] as ReadAudioFileValue; + const audio = new FileRepresentation(fileValue); + representations.push(audio); } this.representationsToDisplay = representations; @@ -408,7 +414,7 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy { } // request incoming regions --> TODO: add case to get incoming sequences in case of video and audio - if (resource.res.properties[Constants.HasStillImageFileValue] || resource.res.properties[Constants.HasDocumentFileValue]) { + if (resource.res.properties[Constants.HasStillImageFileValue] || resource.res.properties[Constants.HasDocumentFileValue] || resource.res.properties[Constants.HasAudioFileValue]) { // --> TODO: check if resources is a StillImageRepresentation using the ontology responder (support for subclass relations required) // the resource is a StillImageRepresentation, check if there are regions pointing to it diff --git a/src/assets/style/_elements.scss b/src/assets/style/_elements.scss index 1b6f363ef7..59361cbbd0 100644 --- a/src/assets/style/_elements.scss +++ b/src/assets/style/_elements.scss @@ -290,6 +290,10 @@ a, display: block; position: relative; padding: 0; + + &.audio { + height: auto; + } .caption { padding: 10px 16px; white-space: nowrap;