First step in using the new transpose web api endpoint.

src/app/components/chord-view/chord-view.component.ts

@@ -12,27 +12,78 @@ import { StageViewComponent } from '../stage-view/stage-view.component';
 
 })
 export class ChordViewComponent extends StageViewComponent {
+  // Map with the song id and transpose value so the chord-view remembers the value for each song
+  let songTransposeMap = new Map();
   transpose = 0;
 
+  setNewSlides(slides: Slide[]): void {
+    super.setNewSlides(slides);
+    // if this song is already known
+    if (songTransposeMap.has(this.serviceItem.id))
+    {
+      if (songTransposeMap.get(this.serviceItem.id) != 0)
+      {
+        transpose();
+      }
+    }
+    else
+    {
+      songTransposeMap.set(this.serviceItem.id, 0);
+    }
+  }
+
+
   transposeUp(): void {
-    this.transpose++;
+    if (songTransposeMap.has(this.serviceItem.id))
+    {
+      let tmpTranspose = songTransposeMap.get(this.serviceItem.id) + 1;
+      songTransposeMap.set(this.serviceItem.id, tmpTranspose);
+    }
+    else
+    {
+      songTransposeMap.set(this.serviceItem.id, 1);
+    }
+    transpose();
   }
 
   transposeDown(): void {
-    this.transpose--;
+    if (songTransposeMap.has(this.serviceItem.id))
+    {
+      let tmpTranspose = songTransposeMap.get(this.serviceItem.id) - 1;
+      songTransposeMap.set(this.serviceItem.id, tmpTranspose);
+    }
+    else
+    {
+      songTransposeMap.set(this.serviceItem.id, -1);
+    }
+    transpose();
   }
 
+  transpose(): void {
+    let tmpTranspose = songTransposeMap.get(this.serviceItem.id);
+    this.openlpService.transposeSong(tmpTranspose).subscribe(transposedLyrics => {
+      // Replace the chords in the currentSlides with the returned transposed chords
+      if (transposedLyrics instanceof Array) {
+        for (let i = 0; i < this.transposedLyrics.length; ++i) {
+          this.currentSlides[i].chords = transposedLyrics[i];
+        }
+      }
+      // TODO: convert the new chords into html and put into the webpage
+    });
+  }
+
+
   chordproFormatted(slide: Slide): string {
     if (!slide) {
       return '';
     }
     let chordpro: string = slide.chords;
-    chordpro = chordpro.replace(/<span class="\w*\s*\w*">/g, '');
+    /*chordpro = chordpro.replace(/<span class="\w*\s*\w*">/g, '');
     chordpro = chordpro.replace(/<span>/g, '');
     chordpro = chordpro.replace(/<\/span>/g, '');
     chordpro = chordpro.replace(/<strong>/g, '[');
     chordpro = chordpro.replace(/<\/strong>/g, ']');
-    chordpro = chordpro.replace(/<br>/g, '\n');
+    chordpro = chordpro.replace(/<br>/g, '\n');*/
 
     return chordpro;
   }

src/app/components/chord-view/chordpro.pipe.ts

@@ -168,8 +168,10 @@ export class ChordProPipe implements PipeTransform {
                 if (nHalfSteps !== 0) {
                     lastChord = lastChord.split('/').map(chord => {
                         const chordRoot = comp.chordRoot(chord);
-                        const newRoot = comp.transposeChord(chordRoot, nHalfSteps);
-                        return newRoot + comp.restOfChord(chord);
+                        // No need to transpose here - will be done in the new web api endpoint
+                        //const newRoot = comp.transposeChord(chordRoot, nHalfSteps);
+                        //return newRoot + comp.restOfChord(chord);
+                        return chordRoot + comp.restOfChord(chord);
                     }).join('/');
                 }
 

src/app/openlp.service.ts

@@ -183,6 +183,10 @@ export class OpenLPService {
     return this.http.post(`${this.apiURL}/plugins/${plugin}/add`, {'id': id}, httpOptions);
   }
 
+  transposeSong(transpose_value : any): Observable<any> {
+    return this.http.get(`${this.apiURL}/plugins/songs/transpose-live-item/${transpose_value}`, httpOptions);
+  }
+
   login(credentials: Credentials): Observable<AuthToken> {
     return this.http.post<AuthToken>(`${this.apiURL}/core/login`, credentials, httpOptions);
   }