benjamin/wgenerator
1
0
Fork 0
Code Releases Activity

transform keys and text service

Browse Source
This commit is contained in:
smuddyx
2020-03-16 21:07:11 +01:00
committed by smuddy
parent 8c000867cb
commit 7d58dd9bdd
18 changed files with 335 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -3,7 +3,7 @@
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"start": "npm i && ng serve",
"build": "ng build",
"deploy": "ng build --prod && firebase deploy",
"test": "ng test",

10
src/app/modules/shows/services/show-song.service.ts
View File

@@ -2,17 +2,23 @@ import {Injectable} from '@angular/core';
import {ShowSongDataService} from './show-song-data.service';
import {Observable} from 'rxjs';
import {ShowSong} from './showSong';
import {SongDataService} from '../../songs/services/song-data.service';
import {take} from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class ShowSongService {
constructor(private showSongDataService: ShowSongDataService) {
constructor(
private showSongDataService: ShowSongDataService,
private songDataService: SongDataService
) {
}
public async new$(showId: string, songId: string, order: number): Promise<string> {
const data = {songId, order};
const song = await this.songDataService.read$(songId).pipe(take(1)).toPromise();
const data = {songId, order, key: song.key, keyOriginal: song.key};
return await this.showSongDataService.add(showId, data);
}

2
src/app/modules/shows/services/showSong.ts
View File

@@ -1,5 +1,7 @@
export interface ShowSong {
id: string;
songId: string;
key: string;
keyOriginal: string;
order: number;
}

2
src/app/modules/shows/show/show.component.html
View File

@@ -5,7 +5,7 @@
<div *ngIf="showSongs" class="song-list">
<app-song *ngFor="let song of showSongs"
[showId]="showId"
[showSongId]="song.id"
[showSong]="song"
[showSongs]="showSongs"
[song]="getSong(songs, song.songId)"
></app-song>

22
src/app/modules/shows/show/song/song.component.html
View File

@@ -1,10 +1,14 @@
<div *ngIf="song" class="song">
<p>
<app-menu-button (click)="reorder(true)" [icon]="faUp"></app-menu-button>
<app-menu-button (click)="reorder(false)" [icon]="faDown"></app-menu-button>
{{song.title}}</p>
<div class="menu">
<app-menu-button (click)="onDelete()" [icon]="faDelete"></app-menu-button>
</div>
<div *ngIf="_song" class="song">
<app-menu-button (click)="reorder(true)" [icon]="faUp" class="btnUp"></app-menu-button>
<app-menu-button (click)="reorder(false)" [icon]="faDown" class="btnDown"></app-menu-button>
<span class="title">{{_song.title}}</span>
<span class="keys">
<span *ngIf="showSong.keyOriginal!==showSong.key">{{showSong.keyOriginal}}&nbsp;→&nbsp;</span>
<mat-form-field *ngIf="keys" appearance="standard">
<mat-select [formControl]="keyFormControl">
<mat-option *ngFor="let key of keys" [value]="key">{{key}}</mat-option>
</mat-select>
</mat-form-field>
</span>
<app-menu-button (click)="onDelete()" [icon]="faDelete" class="btnDelete"></app-menu-button>
</div>

40
src/app/modules/shows/show/song/song.component.less
View File

@@ -1,13 +1,49 @@
.song {
border-bottom: 1px solid #ccc;
display: grid;
grid-template-columns: 20px 20px auto 70px 25px;
@media screen and (max-width: 860px) {
grid-template-columns: 40px 40px auto 70px 45px;
}
grid-template-areas: "up down title keys delete";
& > * {
display: flex;
align-items: center;
justify-content: space-between;
}
overflow: hidden;
}
mat-form-field {
width: 40px;
margin: -24px 0 -20px 0;
}
.btnUp {
grid-area: up;
}
.btnDown {
grid-area: down;
}
.title {
grid-area: title;
}
.keys {
grid-area: keys;
justify-content: flex-end;
}
.btnDelete {
grid-area: delete;
justify-content: flex-end;
}
.menu {
display: flex;
}
button {

29
src/app/modules/shows/show/song/song.component.ts
View File

@@ -1,32 +1,51 @@
import {Component, Input} from '@angular/core';
import {Component, Input, OnInit} from '@angular/core';
import {Song} from '../../../songs/services/song';
import {faTrash} from '@fortawesome/free-solid-svg-icons/faTrash';
import {faCaretUp} from '@fortawesome/free-solid-svg-icons/faCaretUp';
import {faCaretDown} from '@fortawesome/free-solid-svg-icons/faCaretDown';
import {ShowSongService} from '../../services/show-song.service';
import {ShowSong} from '../../services/showSong';
import {getScale} from '../../../songs/services/key.helper';
import {FormControl} from '@angular/forms';
@Component({
selector: 'app-song',
templateUrl: './song.component.html',
styleUrls: ['./song.component.less']
})
export class SongComponent {
@Input() public song: Song;
export class SongComponent implements OnInit {
@Input() public showSong: ShowSong;
@Input() public showId: string;
@Input() public showSongId: string;
public keys: string[];
@Input() public showSongs: ShowSong[];
public faDelete = faTrash;
public faUp = faCaretUp;
public faDown = faCaretDown;
public keyFormControl: FormControl;
public _song: Song;
@Input()
public set song(song: Song) {
this._song = song;
this.keys = !!song ? getScale(song.key) : [];
};
constructor(
private showSongService: ShowSongService,
) {
}
public ngOnInit(): void {
this.keyFormControl = new FormControl(this.showSong.key);
this.keyFormControl.valueChanges.subscribe(async value => {
await this.showSongService.update$(this.showId, this.showSong.id, {key: value});
})
}
public async onDelete(): Promise<void> {
await this.showSongService.delete$(this.showId, this.showSongId);
await this.showSongService.delete$(this.showId, this.showSong.id);
}

95
src/app/modules/songs/services/key.helper.ts Normal file
View File

@@ -0,0 +1,95 @@
export const KEYS = [
'C', 'C#', 'Db', 'D', 'D#', 'Eb', 'E', 'F', 'F#', 'Gb', 'G', 'G#', 'Ab', 'A', 'A#', 'B', 'H',
'c', 'c#', 'db', 'd', 'd#', 'eb', 'e', 'f', 'f#', 'gb', 'g', 'g#', 'ab', 'a', 'a#', 'b', 'h'
];
export const KEYS_MAJOR_FLAT = [
'C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'H',
];
export const KEYS_MAJOR_B = [
'C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'B', 'H',
];
export const KEYS_MINOR_FLAT = [
'c', 'c#', 'd', 'd#', 'e', 'f', 'f#', 'g', 'g#', 'a', 'a#', 'h',
];
export const KEYS_MINOR_B = [
'c', 'db', 'd', 'eb', 'e', 'f', 'gb', 'g', 'ab', 'a', 'b', 'h',
];
const scaleAssignment = {
'C': KEYS_MAJOR_FLAT,
'C#': KEYS_MAJOR_FLAT,
'Db': KEYS_MAJOR_B,
'D': KEYS_MAJOR_B,
'D#': KEYS_MAJOR_FLAT,
'Eb': KEYS_MAJOR_B,
'E': KEYS_MAJOR_FLAT,
'F': KEYS_MAJOR_B,
'F#': KEYS_MAJOR_FLAT,
'Gb': KEYS_MAJOR_B,
'G': KEYS_MAJOR_FLAT,
'G#': KEYS_MAJOR_FLAT,
'Ab': KEYS_MAJOR_B,
'A': KEYS_MAJOR_FLAT,
'A#': KEYS_MAJOR_FLAT,
'B': KEYS_MAJOR_B,
'H': KEYS_MAJOR_FLAT,
'c': KEYS_MINOR_FLAT,
'c#': KEYS_MINOR_FLAT,
'db': KEYS_MINOR_B,
'd': KEYS_MINOR_B,
'd#': KEYS_MINOR_FLAT,
'eb': KEYS_MINOR_B,
'e': KEYS_MINOR_FLAT,
'f': KEYS_MINOR_B,
'f#': KEYS_MINOR_FLAT,
'gb': KEYS_MINOR_B,
'g': KEYS_MINOR_FLAT,
'g#': KEYS_MINOR_FLAT,
'ab': KEYS_MINOR_B,
'a': KEYS_MINOR_FLAT,
'a#': KEYS_MINOR_FLAT,
'b': KEYS_MINOR_B,
'h': KEYS_MINOR_FLAT,
};
export const scaleMapping = {
'C': 'C',
'C#': 'C♯',
'Db': 'D♭',
'D': 'D',
'D#': 'D♯',
'Eb': 'E♭',
'E': 'E',
'F': 'F',
'F#': 'F♯',
'Gb': 'D♭',
'G': 'G',
'G#': 'G♯',
'Ab': 'A♭',
'A': 'A',
'A#': 'A♯',
'B': 'B',
'H': 'H',
'c': 'c',
'c#': 'c♯',
'db': 'd♭',
'd': 'd',
'd#': 'd♯',
'eb': 'e♭',
'e': 'e',
'f': 'f',
'f#': 'f♯',
'gb': 'g♭',
'g': 'g',
'g#': 'g♯',
'ab': 'a♭',
'a': 'a',
'a#': 'a♯',
'b': 'b',
'h': 'h',
};
export const getScale = (key: string): string[] => {
const scaleAssignmentElement = scaleAssignment[key];
return scaleAssignmentElement;
};

11
src/app/modules/songs/services/song.service.ts
View File

@@ -11,15 +11,12 @@ declare var importCCLI: any;
})
export class SongService {
public TYPES = ['Praise', 'Worship'];
public static TYPES = ['Praise', 'Worship'];
public static LEGAL_OWNER = ['CCLI', 'other'];
public static LEGAL_TYPE = ['open', 'allowed'];
public LEGAL_OWNER = ['CCLI', 'other'];
public LEGAL_TYPE = ['open', 'allowed'];
public KEYS = [
'C', 'C#', 'Db', 'D', 'D#', 'Eb', 'E', 'F', 'F#', 'Gb', 'G', 'G#', 'Ab', 'A', 'A#', 'B', 'H',
'c', 'c#', 'db', 'd', 'd#', 'eb', 'e', 'f', 'f#', 'gb', 'g', 'g#', 'ab', 'a', 'a#', 'b', 'h'
];
private list: Song[];
constructor(private songDataService: SongDataService) {

64
src/app/modules/songs/services/text-rendering.service.spec.ts
View File

@@ -1,12 +1,74 @@
import {TestBed} from '@angular/core/testing';
import {TextRenderingService} from './text-rendering.service';
import {LineType, SectionType, TextRenderingService} from './text-rendering.service';
describe('TextRenderingService', () => {
const testText = `Strophe
C D E F G A H
Text Line 1-1
a d e f g a h c b
Text Line 2-1
Strophe
C D E F G A H
Text Line 1-2
a d e f g a h c b
Text Line 2-2
Refrain
c# cb c7 cmaj7 c/e
and the chorus
Bridge
Cool bridge without any chords
`;
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: TextRenderingService = TestBed.get(TextRenderingService);
expect(service).toBeTruthy();
});
it('should parse section types', () => {
const service: TextRenderingService = TestBed.get(TextRenderingService);
const sections = service.parse(testText);
expect(sections[0].type).toBe(SectionType.Verse);
expect(sections[1].type).toBe(SectionType.Verse);
expect(sections[2].type).toBe(SectionType.Chorus);
expect(sections[3].type).toBe(SectionType.Bridge);
});
it('should parse text lines', () => {
const service: TextRenderingService = TestBed.get(TextRenderingService);
const sections = service.parse(testText);
expect(sections[0].lines[1].type).toBe(LineType.text);
expect(sections[0].lines[1].text).toBe('Text Line 1-1');
expect(sections[0].lines[3].type).toBe(LineType.text);
expect(sections[0].lines[3].text).toBe('Text Line 2-1');
expect(sections[1].lines[1].type).toBe(LineType.text);
expect(sections[1].lines[1].text).toBe('Text Line 1-2');
expect(sections[1].lines[3].type).toBe(LineType.text);
expect(sections[1].lines[3].text).toBe('Text Line 2-2');
expect(sections[2].lines[1].type).toBe(LineType.text);
expect(sections[2].lines[1].text).toBe('and the chorus');
expect(sections[3].lines[0].type).toBe(LineType.text);
expect(sections[3].lines[0].text).toBe('Cool bridge without any chords');
});
it('should parse chord lines', () => {
const service: TextRenderingService = TestBed.get(TextRenderingService);
const sections = service.parse(testText);
expect(sections[0].lines[0].type).toBe(LineType.chrod);
expect(sections[0].lines[0].text).toBe('C D E F G A H');
expect(sections[0].lines[2].type).toBe(LineType.chrod);
expect(sections[0].lines[2].text).toBe(' a d e f g a h c b');
expect(sections[1].lines[0].type).toBe(LineType.chrod);
expect(sections[1].lines[0].text).toBe('C D E F G A H');
expect(sections[1].lines[2].type).toBe(LineType.chrod);
expect(sections[1].lines[2].text).toBe(' a d e f g a h c b');
expect(sections[2].lines[0].type).toBe(LineType.chrod);
expect(sections[2].lines[0].text).toBe('c# cb c7 cmaj7 c/e');
});
});

36
src/app/modules/songs/services/text-rendering.service.ts
View File

@@ -17,7 +17,6 @@ export interface Line {
text: string;
}
export interface Section {
type: SectionType;
number: number;
@@ -32,5 +31,40 @@ export class TextRenderingService {
constructor() {
}
private regexSection = /(Strophe|Refrain|Bridge)/;
private regexChords = /\b([CDEFGAHBcdefgahb](#|##|b|bb|sus|maj|maj7|min|aug|\d+|\/[CDEFGAHBcdefgahb])?\b)/;
public parse(text: string): Section[] {
const arrayOfLines = text.split(/\r?\n/).filter(_ => _);
const sections = arrayOfLines.reduce((array, line) => {
if (line.match(this.regexSection)) return [...array, {
type: this.getSectionTypeOfLine(line),
number: -1,
lines: []
}];
array[array.length - 1].lines.push(this.getLineOfLineText(line));
return array;
}, [] as Section[]);
return sections;
}
private getLineOfLineText(text: string): Line {
const matches = !!text.match(this.regexChords);
const type = matches ? LineType.chrod : LineType.text;
return {type, text}
}
private getSectionTypeOfLine(line: string): SectionType {
const typeString = line.match(this.regexSection)[1];
switch (typeString) {
case "Strophe":
return SectionType.Verse;
case "Refrain":
return SectionType.Chorus;
case "Bridge":
return SectionType.Bridge;
}
}
}

2
src/app/modules/songs/song/edit/edit-song/edit-song.component.html
View File

@@ -16,7 +16,7 @@
<mat-form-field appearance="outline">
<mat-label>Tonart</mat-label>
<mat-select formControlName="key">
<mat-option *ngFor="let key of keys" [value]="key">{{key}}</mat-option>
<mat-option *ngFor="let key of keys" [value]="key">{{key|key}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">

9
src/app/modules/songs/song/edit/edit-song/edit-song.component.ts
View File

@@ -5,6 +5,7 @@ import {ActivatedRoute, Router} from '@angular/router';
import {SongService} from '../../../services/song.service';
import {EditService} from '../edit.service';
import {first, map, switchMap} from 'rxjs/operators';
import {KEYS} from '../../../services/key.helper';
@Component({
selector: 'app-edit-song',
@@ -14,10 +15,10 @@ import {first, map, switchMap} from 'rxjs/operators';
export class EditSongComponent implements OnInit {
public song: Song;
public form: FormGroup;
public keys = this.songService.KEYS;
public types = this.songService.TYPES;
public legalOwner = this.songService.LEGAL_OWNER;
public legalType = this.songService.LEGAL_TYPE;
public keys = KEYS;
public types = SongService.TYPES;
public legalOwner = SongService.LEGAL_OWNER;
public legalType = SongService.LEGAL_TYPE;
constructor(
private activatedRoute: ActivatedRoute,

2
src/app/modules/songs/song/edit/edit.module.ts
View File

@@ -16,6 +16,7 @@ import {MatIconModule} from '@angular/material/icon';
import {FileComponent} from './edit-file/file/file.component';
import {LegalOwnerTranslatorModule} from '../../../../widget-modules/pipes/legal-owner-translator/legal-owner-translator.module';
import {LegalTypeTranslatorModule} from '../../../../widget-modules/pipes/legal-type-translator/legal-type-translator.module';
import {KeyTranslatorModule} from '../../../../widget-modules/pipes/key-translator/key-translator.module';
@NgModule({
@@ -37,6 +38,7 @@ import {LegalTypeTranslatorModule} from '../../../../widget-modules/pipes/legal-
MatIconModule,
LegalOwnerTranslatorModule,
LegalTypeTranslatorModule,
KeyTranslatorModule,
]
})

16
src/app/widget-modules/pipes/key-translator/key-translator.module.ts Normal file
View File

@@ -0,0 +1,16 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {KeyPipe} from './key.pipe';
@NgModule({
declarations: [KeyPipe],
exports: [
KeyPipe
],
imports: [
CommonModule
]
})
export class KeyTranslatorModule {
}

8
src/app/widget-modules/pipes/key-translator/key.pipe.spec.ts Normal file
View File

@@ -0,0 +1,8 @@
import {KeyPipe} from './key.pipe';
describe('KeyPipe', () => {
it('create an instance', () => {
const pipe = new KeyPipe();
expect(pipe).toBeTruthy();
});
});

13
src/app/widget-modules/pipes/key-translator/key.pipe.ts Normal file
View File

@@ -0,0 +1,13 @@
import {Pipe, PipeTransform} from '@angular/core';
import {scaleMapping} from '../../../modules/songs/services/key.helper';
@Pipe({
name: 'key'
})
export class KeyPipe implements PipeTransform {
transform(key: string): string {
return scaleMapping[key];
}
}

4
src/styles/styles.less
View File

@@ -34,6 +34,10 @@ h1, h2, h3, h4 {
width: unset;
}
.mat-form-field.mat-form-field-appearance-standard .mat-form-field-underline {
height: 0;
}
.content > *:not(router-outlet) {
margin-top: 60px;