First step in using the new transpose web api endpoint.

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

@@ -4,9 +4,9 @@
       <span *ngFor="let tag of tags" [class.active]="tag.active">{{ tag.text }}</span>
     </div>
     <div class="container">
-      <div class="slide currentSlide song mat-display-3" [innerHTML]="chordproFormatted(currentSlides[activeSlide])|chordpro:transpose"></div>
+      <div class="slide currentSlide song mat-display-3" [innerHTML]="chordproFormatted(currentSlides[activeSlide])|chordpro"></div>
       <div class="nextSlides">
-        <div class="slide song" [class.first]="slide.first_slide_of_tag" *ngFor="let slide of nextSlides" [innerHTML]="chordproFormatted(slide)|chordpro:transpose"></div>
+        <div class="slide song" [class.first]="slide.first_slide_of_tag" *ngFor="let slide of nextSlides" [innerHTML]="chordproFormatted(slide)|chordpro"></div>
       </div>
     </div>
   </div>
@@ -16,7 +16,7 @@
       <button mat-icon-button (click)="transposeUp()">
         <mat-icon>keyboard_arrow_up</mat-icon>
       </button>
-      <span>{{ transpose }}</span>
+      <span>{{ transposeLevel }}</span>
       <button mat-icon-button (click)="transposeDown()">
         <mat-icon>keyboard_arrow_down</mat-icon>
       </button>

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

@@ -12,26 +12,67 @@ import { StageViewComponent } from '../stage-view/stage-view.component';
 
 })
 export class ChordViewComponent extends StageViewComponent {
-  transpose = 0;
+  // Map with the song id and transpose value so the chord-view remembers the value for each song
+  songTransposeMap = new Map();
+  // current songs transpose level
+  transposeLevel = 0;
+
+
+  setNewSlides(slides: Slide[]): void {
+    super.setNewSlides(slides);
+    // if this song is already known
+    if (this.songTransposeMap.has(this.serviceItem.id)) {
+      if (this.songTransposeMap.get(this.serviceItem.id) !== 0) {
+        this.transposeChords();
+      } else {
+        this.transposeLevel = this.songTransposeMap.get(this.serviceItem.id);
+      }
+    } else {
+      this.songTransposeMap.set(this.serviceItem.id, 0);
+      this.transposeLevel = 0;
+    }
+  }
+
 
   transposeUp(): void {
-    this.transpose++;
+    if (this.songTransposeMap.has(this.serviceItem.id)) {
+      const tmpTranspose = this.songTransposeMap.get(this.serviceItem.id) + 1;
+      this.songTransposeMap.set(this.serviceItem.id, tmpTranspose);
+    } else {
+      this.songTransposeMap.set(this.serviceItem.id, 1);
+    }
+    this.transposeChords();
   }
 
   transposeDown(): void {
-    this.transpose--;
+    if (this.songTransposeMap.has(this.serviceItem.id)) {
+      const tmpTranspose = this.songTransposeMap.get(this.serviceItem.id) - 1;
+      this.songTransposeMap.set(this.serviceItem.id, tmpTranspose);
+    } else {
+      this.songTransposeMap.set(this.serviceItem.id, -1);
+    }
+    this.transposeChords();
   }
 
+  transposeChords(): void {
+    const tmpTranspose = this.songTransposeMap.get(this.serviceItem.id);
+    this.transposeLevel = tmpTranspose;
+    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 < transposedLyrics.length; ++i) {
+        this.currentSlides[i].chords = transposedLyrics[i].chords;
+      }
+    }
+    });
+  }
+
+
   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>/g, '');
-    chordpro = chordpro.replace(/<\/span>/g, '');
-    chordpro = chordpro.replace(/<strong>/g, '[');
-    chordpro = chordpro.replace(/<\/strong>/g, ']');
     chordpro = chordpro.replace(/<br>/g, '\n');
 
     return chordpro;

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

@@ -64,7 +64,9 @@ export class ChordProPipe implements PipeTransform {
      * @param {number} nHalfSteps
      * @returns {string}
      */
-    transform(song: string, nHalfSteps: number): string|SafeHtml {
+    transform(song: string/*, nHalfSteps: number*/): string|SafeHtml {
+        // we hardcode nHalfSteps to 0, since the transposing is not used in OpenLP web
+        const nHalfSteps = 0;
         try {
             if (song !== undefined && song) {
                 return this.sanitizer.bypassSecurityTrustHtml(this.parseToHTML(song, nHalfSteps));

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

@@ -31,6 +31,7 @@ export class StageViewComponent implements OnInit {
 
   updateCurrentSlides(): void {
     this.openlpService.getServiceItem().subscribe(serviceItem => {
+      this.serviceItem = serviceItem;
       if (serviceItem instanceof Array) {
         this.setNewSlides(serviceItem);
       }

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): 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);
   }