Fixing media + images on Chord and Stage View + refactoring individal slides of Chord and Stage

src/app/app.module.ts

@@ -43,6 +43,8 @@ import { SlideListComponent } from './components/slides/slide-list/slide-list.co
 import { SlideItemComponent } from './components/slides/slide-item/slide-item.component';
 import { ServiceItemComponent } from './components/service/service-item/service-item.component';
 import { ServiceListComponent } from './components/service/service-list/service-list.component';
+import { ChordViewItemComponent } from './components/chord-view/chord-view-item/chord-view-item.component';
+import { StageViewItemComponent } from './components/stage-view/stage-view-item/stage-view-item.component';
 import { DisplayModeSelectorComponent } from './components/display-mode-selector/display-mode-selector.component';
 
 
@@ -51,6 +53,8 @@ import { DisplayModeSelectorComponent } from './components/display-mode-selector
     AppComponent,
     ChordViewComponent,
     StageViewComponent,
+    StageViewItemComponent,
+    ChordViewItemComponent,
     Nl2BrPipe,
     MainViewComponent,
     ChordProPipe,

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

@@ -0,0 +1,7 @@
+<div
+    class="slide song"
+    [class.currentSlide]="active"
+    [class.mat-headline-2]="active"
+    [class.first]="!active && slide.first_slide_of_tag"
+    [innerHTML]="chordproFormatted(slide)|chordpro">
+</div>

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

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Slide } from '../../../responses';
+
+@Component({
+    selector: 'app-chord-view-item',
+    templateUrl: './chord-view-item.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ChordViewItemComponent {
+    @Input() slide: Slide;
+    @Input() active = false;
+
+    chordproFormatted(slide: Slide): string {
+        if (!slide) {
+            return '';
+        }
+        let chordpro: string = slide.chords;
+        chordpro = chordpro.replace(/<br>/g, '\n');
+
+        return chordpro;
+    }
+}

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

@@ -4,14 +4,21 @@
       <span *ngFor="let tag of tags" [class.active]="tag.active">{{ tag.text }}</span>
     </div>
     <div class="container">
-      <div class="slide currentSlide song mat-headline-2" [innerHTML]="chordproFormatted(currentSlides[activeSlide])|chordpro"></div>
+      <app-chord-view-item
+        [slide]="currentSlides[activeSlide]"
+        [active]="true"
+        *ngIf="currentSlides[activeSlide]?.chords; else elseSlideNoChords"
+      ></app-chord-view-item>
+      <ng-template #elseSlideNoChords>
+        <app-stage-view-item [slide]="currentSlides[activeSlide]" [active]="true"></app-stage-view-item>
+      </ng-template>
       <div class="nextSlides">
-        <div
+        <ng-container *ngFor="let slide of nextSlides">
-          class="slide song"
+          <app-chord-view-item [slide]="slide" *ngIf="slide?.chords; else elseNextSlideNoChords"></app-chord-view-item>
-          [class.first]="slide.first_slide_of_tag"
+          <ng-template #elseNextSlideNoChords>
-          *ngFor="let slide of nextSlides"
+            <app-stage-view-item [slide]="slide"></app-stage-view-item>
-          [innerHTML]="chordproFormatted(slide)|chordpro">
+          </ng-template>
-        </div>
+        </ng-container>
       </div>
     </div>
   </div>

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

@@ -58,23 +58,12 @@ export class ChordViewComponent extends StageViewComponent {
     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
+      // Replace the chords in the currentSlides with the returned transposed chords
-    if (transposedLyrics instanceof Array) {
+      if (transposedLyrics instanceof Array) {
-      for (let i = 0; i < transposedLyrics.length; ++i) {
+        for (let i = 0; i < transposedLyrics.length; ++i) {
-        this.currentSlides[i].chords = transposedLyrics[i].chords;
+          this.currentSlides[i] = {...this.currentSlides[i], chords: transposedLyrics[i].chords};
+        }
       }
-    }
     });
   }
-
-
-  chordproFormatted(slide: Slide): string {
-    if (!slide) {
-      return '';
-    }
-    let chordpro: string = slide.chords;
-    chordpro = chordpro.replace(/<br>/g, '\n');
-
-    return chordpro;
-  }
 }

src/app/components/overlay.scss

@@ -14,6 +14,27 @@
   justify-content: flex-start;
   flex-direction: row;
 
+  .active-slide-img {
+    /* properly size current slide thumbnail */
+    /* relative sizes might not work in real world */
+    /* If we get larger thumbnail sizes, we want to limit their size */
+    max-height: 75%;
+    min-height: 250px;
+  }
+  .active-slide-img-text {
+    font-size: 1.8rem;
+  }
+  .next-slides-img {
+    /* properly size thumbnail displayed in 2nd and subsequent slides */
+    /* If we get larger thumbnail sizes, we want to limit their size */
+    max-height: 20%;
+    min-height: 100px;
+  }
+
+  .next-slides-text {
+    font-size: 1.4rem;
+  }
+
   &-content {
     width: 100%;
     max-width: 100%;

src/app/components/stage-view/stage-view-item/stage-view-item.component.html

@@ -0,0 +1,15 @@
+<div
+    class="slide"
+    [class.mat-headline-2]="active"
+    [class.currentSlide]="active"
+    [class.mat-headline-4]="!active"
+    [class.first]="!active && slide.first_slide_of_tag" 
+>
+    <ng-container *ngIf="!(slide?.img); else elseImage">
+        {{slide?.text}}
+    </ng-container>
+    <ng-template #elseImage>
+        <img src="{{slide?.img}}" [class.active-slide-img]="active" [class.next-slides-img]="!active"/>
+        <div [class.active-slide-img-text]="active" [class.next-slides-text]="!active">{{ slide?.text }}</div>
+    </ng-template>
+</div>

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

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import { Slide } from '../../../responses';
+
+@Component({
+    selector: 'app-stage-view-item',
+    templateUrl: './stage-view-item.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class StageViewItemComponent {
+    @Input() slide: Slide;
+    @Input() active = false;
+}

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

@@ -4,25 +4,9 @@
       <span *ngFor="let tag of tags" [class.active]="tag.active">{{ tag.text }}</span>
     </div>
     <div class="container">
-      <div class="slide currentSlide mat-headline-2">
+      <app-stage-view-item [slide]="currentSlides[activeSlide]" [active]="true"></app-stage-view-item>
-        <div *ngIf="currentSlides[activeSlide]?.img; else elseActiveSlideText">
-          <img src="{{currentSlides[activeSlide]?.img}}" class="active-slide-img" />
-          <div class="active-slide-img-text">{{ currentSlides[activeSlide]?.text }}</div>
-        </div>
-        <ng-template #elseActiveSlideText>
-          {{ currentSlides[activeSlide]?.text }}
-        </ng-template>
-      </div>
       <div class="nextSlides">
-        <div class="slide mat-headline-4" [class.first]="slide.first_slide_of_tag" *ngFor="let slide of nextSlides">
+        <app-stage-view-item [slide]="slide" *ngFor="let slide of nextSlides"></app-stage-view-item>
-          <div *ngIf="slide.img; else elseNextSlidesText">
-            <img src="{{slide.img}}" class="next-slides-img" />
-            <div class="next-slides-text">{{ slide.text }}</div>
-          </div>
-          <ng-template #elseNextSlidesText>
-            {{ slide.text }}
-          </ng-template>
-        </div>
       </div>
     </div>
   </div>

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

@@ -1,28 +0,0 @@
-.active-slide-img {
-  /* properly size current slide thumbnail */
-  /* relative sizes might not work in real world */
-  /* If we get larger thumbnail sizes, we want to limit their size */
-  max-height: 75%;
-  min-height: 250px;
-}
-.active-slide-img-text {
-  font-size: 1.8rem;
-}
-.next-slides-img {
-  /* properly size thumbnail displayed in 2nd and subsequent slides */
-  /* If we get larger thumbnail sizes, we want to limit their size */
-  max-height: 20%;
-  min-height: 100px;
-}
-
-.next-slides-text {
-  font-size: 1.4rem;
-}
-
-.toolbar {
-  .show-notes {
-    &-disabled {
-      background: white;
-    }
-  }
-}

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { OpenLPService } from '../../openlp.service';
 import { ServiceItem, Slide } from '../../responses';
 
@@ -10,7 +10,8 @@ interface Tag {
 @Component({
   selector: 'app-stage-view',
   templateUrl: './stage-view.component.html',
-  styleUrls: ['./stage-view.component.scss', '../overlay.scss']
+  styleUrls: ['./stage-view.component.scss', '../overlay.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class StageViewComponent implements OnInit {
   serviceItem: ServiceItem = null;