Various fixes to actually make it work.

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,11 +16,11 @@
       <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>
     </div>
     <button mat-raised-button routerLink="/">Close</button>
   </div>
-</div>
+</div>

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

@@ -14,6 +14,8 @@ 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
   songTransposeMap = new Map();
+  // current songs transpose level
+  transposeLevel = 0;
 
 
   setNewSlides(slides: Slide[]): void {
@@ -21,10 +23,13 @@ export class ChordViewComponent extends StageViewComponent {
     // if this song is already known
     if (this.songTransposeMap.has(this.serviceItem.id)) {
       if (this.songTransposeMap.get(this.serviceItem.id) !== 0) {
-        this.transpose();
+        this.transposeChords();
+      } else {
+        this.transposeLevel = this.songTransposeMap.get(this.serviceItem.id);
       }
     } else {
       this.songTransposeMap.set(this.serviceItem.id, 0);
+      this.transposeLevel = 0;
     }
   }
 
@@ -36,7 +41,7 @@ export class ChordViewComponent extends StageViewComponent {
     } else {
       this.songTransposeMap.set(this.serviceItem.id, 1);
     }
-    this.transpose();
+    this.transposeChords();
   }
 
   transposeDown(): void {
@@ -46,19 +51,19 @@ export class ChordViewComponent extends StageViewComponent {
     } else {
       this.songTransposeMap.set(this.serviceItem.id, -1);
     }
-    this.transpose();
+    this.transposeChords();
   }
 
-  transpose(): void {
+  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];
-        }
+    // 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;
       }
-      // TODO: convert the new chords into html and put into the webpage
+    }
     });
   }
 
@@ -67,14 +72,9 @@ export class ChordViewComponent extends StageViewComponent {
     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');*/
+    let chordpro: string = slide.chords;
+    chordpro = chordpro.replace(/<br>/g, '\n');
 
-    return slide.chords;
+    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));
@@ -168,10 +170,8 @@ export class ChordProPipe implements PipeTransform {
                 if (nHalfSteps !== 0) {
                     lastChord = lastChord.split('/').map(chord => {
                         const chordRoot = comp.chordRoot(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);
+                        const newRoot = comp.transposeChord(chordRoot, nHalfSteps);
+                        return newRoot + comp.restOfChord(chord);
                     }).join('/');
                 }
 

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