Skip to content

Commit

Permalink
feat(octra): support for .mp3, .flac, .m4a audio files
Browse files Browse the repository at this point in the history
  • Loading branch information
@julianpoemp
julianpoemp committed Nov 5, 2024
1 parent e670ad9 commit c3fb966
Show file tree
Hide file tree
Showing 48 changed files with 1,814 additions and 1,097 deletions.
7 changes: 5 additions & 2 deletions apps/octra/src/app/app.info.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { NavigationExtras } from '@angular/router';
import { WavFormat } from '@octra/web-media';
import { MusicMetadataFormat, WavFormat } from '@octra/web-media';
import {
AnnotJSONConverter,
BundleJSONConverter,
Expand All @@ -16,7 +16,10 @@ import {
} from '@octra/annotation';

export class AppInfo {
public static readonly audioformats = [new WavFormat()];
public static readonly audioformats = [
new WavFormat(),
new MusicMetadataFormat(),
];

public static readonly converters: Converter[] = [
new AnnotJSONConverter(),
Expand Down
37 changes: 22 additions & 15 deletions apps/octra/src/app/core/modals/supportedfiles-modal/supportedfiles-modal.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,31 @@ <h5 class="modal-title" id="modal-title">
></button>
</div>
<div class="modal-body">
<h4>{{ 'modal.supported.audio files' | transloco }} (max. 1,9 GB):</h4>
<table class="table table-responsive table-striped">
<table>
<tr>
<td>
@for (elem of AppInfo.audioformats; track elem; let i = $index) {
<span>
*{{ elem.extension
}}{{ i < AppInfo.audioformats.length - 1 ? ',' : '' }}
</span>
}
</td>
</tr>
</table>
<h4>{{ 'modal.supported.audio files' | transloco }}:</h4>
<table class="w-100 table table-sm table-striped">
<tbody>
@for (format of supportedFormats; track format) {
@for (extension of format.supportedFormats; track extension) {
<tr>
<td>
*{{extension.extension}}
</td>
<td>
max. {{extension.maxFileSize | filesize}}
</td>
<td>
@if (extension.info) {
<i class="bi bi-info-circle" [ngbTooltip]="extension.info"></i>
}
</td>
</tr>
}
}
</tbody>
</table>
<h4>{{ 'modal.supported.file formats for import' | transloco }}:</h4>

<table class="table table-striped">
<table class="table table-sm table-striped">
<tbody>
@for (elem of AppInfo.converters; track elem) { @if
(elem.conversion.import) {
Expand Down
3 changes: 3 additions & 0 deletions apps/octra/src/app/core/modals/supportedfiles-modal/supportedfiles-modal.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Component } from '@angular/core';
import { AppInfo } from '../../../app.info';
import { OctraModal } from '../types';
import { NgbActiveModal, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';
import { AudioFormat } from '@octra/web-media';

@Component({
selector: 'octra-supportedfiles-modal',
Expand All @@ -16,6 +17,8 @@ export class SupportedFilesModalComponent extends OctraModal {

AppInfo = AppInfo;

supportedFormats: AudioFormat[] = AppInfo.audioformats;

constructor(protected override activeModal: NgbActiveModal) {
super('supportedFilesModal', activeModal);
}
Expand Down
261 changes: 132 additions & 129 deletions apps/octra/src/app/core/modals/tools-modal/tools-modal.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,149 +143,152 @@ <h5 class="modal-title" id="modal-title">
} }

<!-- cut audio files -->
@if (isToolEnabled('cut-audio')) { @if (
audio.audioManager.resource.info.extension === '.wav' ) {
<tr>
<td (click)="tools.audioCutting.opened = !tools.audioCutting.opened">
<i
class="bi"
style="color: gray"
[ngClass]="{
@if (isToolEnabled('cut-audio')) {
<tr>
<td (click)="tools.audioCutting.opened = !tools.audioCutting.opened">
<i
class="bi"
style="color: gray"
[ngClass]="{
'bi-chevron-up': tools.audioCutting.opened,
'bi-chevron-down': !tools.audioCutting.opened
}"
></i>
</td>
<td (click)="tools.audioCutting.opened = !tools.audioCutting.opened">
<a #a>
{{ 'tools.cut audio.name' | transloco }}
</a>
</td>
<td
(click)="tools.audioCutting.opened = !tools.audioCutting.opened"
colspan="3"
>
<span>{{ 'tools.cut audio.description' | transloco }} </span>
<a [href]="manualURL + 'cutting-audio-files'" target="_blank">
<i class="bi bi-question-circle text-info"></i>
</a>
</td>
</tr>
} @if ( audio.audioManager.resource.info.extension === '.wav' ) { @if
(tools.audioCutting.opened) {
<tr [@fadeInExpandOnEnter] [@fadeOutCollapseOnLeave]>
<td></td>
<td colspan="4" style="padding-left: 20px">
<div class="card" style="padding: 10px">
<a
(click)="
></i>
</td>
<td (click)="tools.audioCutting.opened = !tools.audioCutting.opened">
<a #a>
{{ 'tools.cut audio.name' | transloco }}
</a>
</td>
<td
(click)="tools.audioCutting.opened = !tools.audioCutting.opened"
colspan="3"
>
<span>{{ 'tools.cut audio.description' | transloco }} </span>
<a [href]="manualURL + 'cutting-audio-files'" target="_blank">
<i class="bi bi-question-circle text-info"></i>
</a>
</td>
</tr>

@if (tools.audioCutting.opened) {
<tr [@fadeInExpandOnEnter] [@fadeOutCollapseOnLeave]>
<td></td>
<td colspan="4" style="padding-left: 20px">
<div class="alert alert-warning my-3">
{{"tools.cut audio.warning non wav" | transloco}}
</div>
<div class="card" style="padding: 10px">
<a
(click)="
tools.audioCutting.showConfigurator =
!tools.audioCutting.showConfigurator
"
class="show-configurator-link"
>
@if (tools.audioCutting.showConfigurator) {
<i class="bi bi-chevron-up" style="color: gray"></i>
{{ 'tools.cut audio.hide configurator' | transloco }}
} @if (!tools.audioCutting.showConfigurator) {
<i class="bi bi-chevron-down" style="color: gray"></i>
{{ 'tools.cut audio.show configurator' | transloco }}
}
</a>
<div
[hidden]="!tools.audioCutting.showConfigurator"
class="configurator"
>
<octra-naming-drag-and-drop
#namingConvention
[fileName]="audio.audioManager!.resource!.name"
[firstSegment]="annotationStoreService.currentLevel!.items[0]"
></octra-naming-drag-and-drop>
<div class="form-control">
class="show-configurator-link"
>
@if (tools.audioCutting.showConfigurator) {
<i class="bi bi-chevron-up" style="color: gray"></i>
{{ 'tools.cut audio.hide configurator' | transloco }}
} @if (!tools.audioCutting.showConfigurator) {
<i class="bi bi-chevron-down" style="color: gray"></i>
{{ 'tools.cut audio.show configurator' | transloco }}
}
</a>
<div
[hidden]="!tools.audioCutting.showConfigurator"
class="configurator"
>
<octra-naming-drag-and-drop
#namingConvention
[fileName]="audio.audioManager!.resource!.name"
[firstSegment]="annotationStoreService.currentLevel!.items[0]"
></octra-naming-drag-and-drop>
<div class="form-control">
<span
>{{ 'tools.cut audio.append meta files' | transloco }}:
>{{ 'tools.cut audio.append meta files' | transloco }}:
</span>
@for ( exportFormat of tools.audioCutting.exportFormats; track
exportFormat; let i = $index) {
<div class="form-check form-check-inline">
<input
[(ngModel)]="tools.audioCutting.exportFormats[i].selected"
[value]="exportFormat.value"
class="form-check-input"
id="inlineCheckbox{{ i }}"
type="checkbox"
/>
<label
class="form-check-label"
for="inlineCheckbox{{ i }}"
>{{ exportFormat.label }}</label
>
@for ( exportFormat of tools.audioCutting.exportFormats; track
exportFormat; let i = $index) {
<div class="form-check form-check-inline">
<input
[(ngModel)]="tools.audioCutting.exportFormats[i].selected"
[value]="exportFormat.value"
class="form-check-input"
id="inlineCheckbox{{ i }}"
type="checkbox"
/>
<label
class="form-check-label"
for="inlineCheckbox{{ i }}"
>{{ exportFormat.label }}</label
>
</div>
}
</div>
</div>
}
</div>
</div>
<div class="progress-area" style="text-align: center">
@if (tools.audioCutting.status !== 'running') {
<button
(click)="splitAudio()"
[disabled]="namingConvention.resultConvention.length === 1"
class="btn btn-primary btn-raised"
style="max-width: 200px; margin-top: 20px"
>
{{ 'tools.cut audio.name' | transloco }}
</button>
} @if (tools.audioCutting.status === 'running') {
<button
(click)="stopAudioSplitting()"
class="btn btn-danger btn-raised"
style="max-width: 200px; margin-top: 20px"
>
{{ 'g.stop' | transloco }}
</button>
} @if (tools.audioCutting.status !== 'idle') {
<div class="my-2">
<div class="progress" style="height: 20px">
<div
class="progress-bar progress-bar-animated"
role="progressbar"
[ngStyle]="{
<div class="progress-area" style="text-align: center">
@if (tools.audioCutting.status !== 'running') {
<button
(click)="splitAudio()"
[disabled]="namingConvention.resultConvention.length === 1"
class="btn btn-primary btn-raised"
style="max-width: 200px; margin-top: 20px"
>
{{ 'tools.cut audio.name' | transloco }}
</button>
} @if (tools.audioCutting.status === 'running') {
<button
(click)="stopAudioSplitting()"
class="btn btn-danger btn-raised"
style="max-width: 200px; margin-top: 20px"
>
{{ 'g.stop' | transloco }}
</button>
} @if (tools.audioCutting.status !== 'idle') {
<div class="my-2">
<div class="progress" style="height: 20px">
<div
class="progress-bar progress-bar-animated"
role="progressbar"
[ngStyle]="{
width: tools.audioCutting.progress + '%'
}"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
>
<b>
{{ tools.audioCutting.progress | number : '1.2-2' }}%
</b>
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
>
<b>
{{ tools.audioCutting.progress | number : '1.2-2' }}%
</b>
</div>
</div>
@if (tools.audioCutting.status === 'failed') {
<div class="text-danger" style="padding: 10px">
{{ tools.audioCutting.message }}
</div>
}
</div>
</div>
@if (tools.audioCutting.status === 'failed') {
<div class="text-danger" style="padding: 10px">
{{ tools.audioCutting.message }}
</div>
} @if ( tools.audioCutting.status !== 'idle' &&
tools.audioCutting.status !== 'finished' &&
tools.audioCutting.timeLeft > 0 ) { Time left:
{{ tools.audioCutting.timeLeft | timespan }}
} @if (tools.audioCutting.result.url !== undefined) {
<a
[href]="tools.audioCutting.result.url"
class="link"
download="{{ tools.audioCutting.result.filename }}"
style="margin-left: 10px"
>
<i class="bi bi-save-fill"></i>
{{ 'g.download' | transloco }}
</a>
}
</div>
</div>
} @if ( tools.audioCutting.status !== 'idle' &&
tools.audioCutting.status !== 'finished' &&
tools.audioCutting.timeLeft > 0 ) { Time left:
{{ tools.audioCutting.timeLeft | timespan }}
} @if (tools.audioCutting.result.url !== undefined) {
<a
[href]="tools.audioCutting.result.url"
class="link"
download="{{ tools.audioCutting.result.filename }}"
style="margin-left: 10px"
>
<i class="bi bi-save-fill"></i>
{{ 'g.download' | transloco }}
</a>
}
</div>
</div>
</td>
</tr>
} } }
</td>
</tr>
}
}
</tbody>
</table>
</div>
Expand Down
Loading

0 comments on commit c3fb966

Please sign in to comment.