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;