text rendering component

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

@@ -35,9 +35,13 @@ Cool bridge without any chords
     const service: TextRenderingService = TestBed.get(TextRenderingService);
     const sections = service.parse(testText);
     expect(sections[0].type).toBe(SectionType.Verse);
+    expect(sections[0].number).toBe(0);
     expect(sections[1].type).toBe(SectionType.Verse);
+    expect(sections[1].number).toBe(1);
     expect(sections[2].type).toBe(SectionType.Chorus);
+    expect(sections[2].number).toBe(0);
     expect(sections[3].type).toBe(SectionType.Bridge);
+    expect(sections[3].number).toBe(0);
   });
 
   it('should parse text lines', () => {
@@ -60,6 +64,7 @@ Cool bridge without any chords
   it('should parse chord lines', () => {
     const service: TextRenderingService = TestBed.get(TextRenderingService);
     const sections = service.parse(testText);
+    console.log(sections);
     expect(sections[0].lines[0].type).toBe(LineType.chord);
     expect(sections[0].lines[0].text).toBe('C D E F G A H');
     expect(sections[0].lines[2].type).toBe(LineType.chord);
@@ -72,7 +77,6 @@ Cool bridge without any chords
     expect(sections[2].lines[0].text).toBe('c c# db c7   cmaj7    c/e');
 
     // c c# db c7   cmaj7    c/e
-    console.log(sections[2].lines[0].chords);
     expect(sections[2].lines[0].chords).toEqual([
       {chord: 'c', length: 2, position: 0},
       {chord: 'c#', length: 3, position: 2},

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

@@ -35,8 +35,6 @@ export interface Section {
   providedIn: 'root'
 })
 export class TextRenderingService {
-
-
   private regexSection = /(Strophe|Refrain|Bridge)/;
 
   constructor() {
@@ -44,29 +42,40 @@ export class TextRenderingService {
 
   public parse(text: string): Section[] {
     const arrayOfLines = text.split(/\r?\n/).filter(_ => _);
-    return arrayOfLines.reduce((array, line) => {
+    const indices = {
+      [SectionType.Bridge]: 0,
+      [SectionType.Chorus]: 0,
+      [SectionType.Verse]: 0,
+    };
+    const sections = arrayOfLines.reduce((array, line) => {
+      const type = this.getSectionTypeOfLine(line);
       if (line.match(this.regexSection)) return [...array, {
-        type: this.getSectionTypeOfLine(line),
-        number: -1,
+        type: type,
+        number: indices[type]++,
         lines: []
       }];
       array[array.length - 1].lines.push(this.getLineOfLineText(line));
       return array;
     }, [] as Section[]);
+    console.log(indices);
+
+    return sections;
   }
 
   private getLineOfLineText(text: string): Line {
-    const regex = /\b(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)(\/(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))?(\d+|maj7)?.?\b/mg;
-
-    const match = text.match(regex);
-    const hasMatches = !!match;
+    if (!text) return null;
+    const cords = this.readChords(text);
+    const hasMatches = cords.length > 0;
     const type = hasMatches ? LineType.chord : LineType.text;
 
-    return {type, text, chords: hasMatches ? this.readChords(text) : undefined}
+    return {type, text, chords: hasMatches ? cords : undefined}
   }
 
   private getSectionTypeOfLine(line: string): SectionType {
-    const typeString = line.match(this.regexSection)[1];
+    if (!line) return null;
+    const match = line.match(this.regexSection);
+    if (!match || match.length < 2) return null;
+    const typeString = match[1];
     switch (typeString) {
       case  "Strophe":
         return SectionType.Verse;
@@ -81,7 +90,8 @@ export class TextRenderingService {
     let match;
     const chords: Chord[] = [];
 
-    const regex = /\b(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)(\/(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))?(\d+|maj7)?.?\b/mg;
+    // https://regex101.com/r/68jMB8/3
+    const regex = /\b(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)(\/(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))?(\d+|maj7)?\s?\b/mg;
 
     while ((match = regex.exec(chordLine)) !== null) {
       const chord: Chord = {

src/app/modules/songs/song/song.component.html

@@ -15,7 +15,10 @@
         </div>
       </div>
 
-      <div class="text">{{song.text}}</div>
+      <!-- <div class="text">{{song.text}}</div>-->
+      <app-song-text [text]="song.text"></app-song-text>
+
+
       <div class="text">{{song.comment}}</div>
       <div>
         <h3>Anhänge</h3>

src/app/modules/songs/song/song.module.ts

@@ -7,6 +7,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {ButtonRowModule} from '../../../widget-modules/components/button-row/button-row.module';
 import {RouterModule} from '@angular/router';
 import {LegalOwnerTranslatorModule} from '../../../widget-modules/pipes/legal-owner-translator/legal-owner-translator.module';
+import {SongTextModule} from '../../../widget-modules/components/song-text/song-text.module';
 
 
 @NgModule({
@@ -21,6 +22,7 @@ import {LegalOwnerTranslatorModule} from '../../../widget-modules/pipes/legal-ow
     MatButtonModule,
     ButtonRowModule,
     LegalOwnerTranslatorModule,
+    SongTextModule,
   ]
 })
 export class SongModule {