Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(audio): download audio file with original filename (#810)
  • Loading branch information
mdelez committed Sep 1, 2022
1 parent 8c64276 commit 8001fab
Showing 1 changed file with 43 additions and 20 deletions.
63 changes: 43 additions & 20 deletions src/app/workspace/resource/representation/audio/audio.component.ts
@@ -1,4 +1,4 @@
import { HttpClient } from '@angular/common/http';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { AfterViewInit, Component, EventEmitter, Inject, Input, OnInit, Output, ViewChild } from '@angular/core';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
Expand Down Expand Up @@ -34,6 +34,7 @@ export class AudioComponent implements OnInit, AfterViewInit {

@Output() loaded = new EventEmitter<boolean>();

originalFilename: string;
failedToLoad = false;
currentTime = 0;
audio: SafeUrl;
Expand All @@ -49,6 +50,7 @@ export class AudioComponent implements OnInit, AfterViewInit {
) { }

ngOnInit(): void {
this._getOriginalFilename();
this.audio = this._sanitizer.bypassSecurityTrustUrl(this.src.fileValue.fileUrl);
this.failedToLoad = !this._rs.doesFileExist(this.src.fileValue.fileUrl);
const player = document.getElementById('audio') as HTMLAudioElement;
Expand All @@ -61,38 +63,38 @@ export class AudioComponent implements OnInit, AfterViewInit {
this.loaded.emit(true);
}

togglePlay(){
togglePlay() {
const player = document.getElementById('audio') as HTMLAudioElement;
if (player.paused){
if (player.paused) {
player.play();
} else {
player.pause();
}
}

isPaused(){
isPaused() {
const player = document.getElementById('audio') as HTMLAudioElement;
return player.paused;
}

parseTime(time){
if (isNaN(time)){
parseTime(time) {
if (isNaN(time)) {
return '00:00';
}
const minutes = Math.floor(time/60);
const seconds = Math.floor(time - minutes*60);
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time - minutes * 60);
let minutesString = minutes.toString();
if (minutes < 10){
if (minutes < 10) {
minutesString = '0' + minutesString;
}
let secondsString = seconds.toString();
if (seconds < 10){
if (seconds < 10) {
secondsString = '0' + secondsString;
}
return minutesString + ':' + secondsString;
}

openReplaceFileDialog(){
openReplaceFileDialog() {
const propId = this.parentResource.properties[Constants.HasAudioFileValue][0].id;

const dialogConfig: MatDialogConfig = {
Expand All @@ -101,7 +103,7 @@ export class AudioComponent implements OnInit, AfterViewInit {
position: {
top: '112px'
},
data: { mode: 'replaceFile', title: 'Audio', subtitle: 'Update the audio file of this resource' , representation: 'audio', id: propId },
data: { mode: 'replaceFile', title: 'Audio', subtitle: 'Update the audio file of this resource', representation: 'audio', id: propId },
disableClose: true
};
const dialogRef = this._dialog.open(
Expand All @@ -116,12 +118,12 @@ export class AudioComponent implements OnInit, AfterViewInit {
});
}

openIIIFnewTab(){
openIIIFnewTab() {
window.open(this.src.fileValue.fileUrl, '_blank');
}

// https://stackoverflow.com/questions/66986983/angular-10-download-file-from-firebase-link-without-opening-into-new-tab
async downloadAudio(url: string){
async downloadAudio(url: string) {
try {
const res = await this._http.get(url, { responseType: 'blob', withCredentials: true }).toPromise();
this.downloadFile(res);
Expand All @@ -130,39 +132,58 @@ export class AudioComponent implements OnInit, AfterViewInit {
}
}

downloadFile(data){
downloadFile(data) {
const url = window.URL.createObjectURL(data);
const e = document.createElement('a');
e.href = url;

// set filename
e.download = url.substr(url.lastIndexOf('/') + 1);
if (this.originalFilename === undefined) {
e.download = url.substr(url.lastIndexOf('/') + 1);
} else {
e.download = this.originalFilename;
}

document.body.appendChild(e);
e.click();
document.body.removeChild(e);
}

onSliderChangeEnd(event){
onSliderChangeEnd(event) {
const player = document.getElementById('audio') as HTMLAudioElement;
player.currentTime = event.value;
}

getDuration(){
getDuration() {
const player = document.getElementById('audio') as HTMLAudioElement;
return player.duration;
}

toggleMute(){
toggleMute() {
const player = document.getElementById('audio') as HTMLAudioElement;
player.muted = !player.muted;
}

isMuted(){
isMuted() {
const player = document.getElementById('audio') as HTMLAudioElement;
return player.muted;
}

private _getOriginalFilename() {
const requestOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
withCredentials: true
};

const pathToJson = this.src.fileValue.fileUrl.substring(0, this.src.fileValue.fileUrl.lastIndexOf('/')) + '/knora.json';

this._http.get(pathToJson, requestOptions).subscribe(
res => {
this.originalFilename = res['originalFilename'];
}
);
}

private _replaceFile(file: UpdateFileValue) {
const updateRes = new UpdateResource();
updateRes.id = this.parentResource.id;
Expand All @@ -182,6 +203,8 @@ export class AudioComponent implements OnInit, AfterViewInit {

this.audio = this._sanitizer.bypassSecurityTrustUrl(this.src.fileValue.fileUrl);

this._getOriginalFilename();

this._valueOperationEventService.emit(
new EmitEvent(Events.FileValueUpdated, new UpdatedFileEventValue(
res2.properties[Constants.HasAudioFileValue][0])));
Expand Down

0 comments on commit 8001fab

Please sign in to comment.