From 8503d57e316a6446d36c23aeb966890828405332 Mon Sep 17 00:00:00 2001
From: Mateus Meyer Jiacomelli <meyergdh@gmail.com>
Date: Wed, 21 Dec 2022 19:51:50 +0000
Subject: [PATCH] Fixing media + images on Chord and Stage View + refactoring
 individal slides of Chord and Stage

---
 src/app/app.module.ts                         |  4 +++
 .../chord-view-item.component.html            |  7 +++++
 .../chord-view-item.component.ts              | 22 +++++++++++++++
 .../chord-view/chord-view.component.html      | 21 +++++++++-----
 .../chord-view/chord-view.component.ts        | 21 ++++----------
 src/app/components/overlay.scss               | 21 ++++++++++++++
 .../stage-view-item.component.html            | 15 ++++++++++
 .../stage-view-item.component.ts              | 12 ++++++++
 .../stage-view/stage-view.component.html      | 20 ++-----------
 .../stage-view/stage-view.component.scss      | 28 -------------------
 .../stage-view/stage-view.component.ts        |  5 ++--
 11 files changed, 105 insertions(+), 71 deletions(-)
 create mode 100644 src/app/components/chord-view/chord-view-item/chord-view-item.component.html
 create mode 100644 src/app/components/chord-view/chord-view-item/chord-view-item.component.ts
 create mode 100644 src/app/components/stage-view/stage-view-item/stage-view-item.component.html
 create mode 100644 src/app/components/stage-view/stage-view-item/stage-view-item.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9b6c2a3..cccedd0 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/components/chord-view/chord-view-item/chord-view-item.component.html b/src/app/components/chord-view/chord-view-item/chord-view-item.component.html
new file mode 100644
index 0000000..c666a35
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/app/components/chord-view/chord-view-item/chord-view-item.component.ts b/src/app/components/chord-view/chord-view-item/chord-view-item.component.ts
new file mode 100644
index 0000000..c8f49ee
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/src/app/components/chord-view/chord-view.component.html b/src/app/components/chord-view/chord-view.component.html
index e1ead8e..eae9fd1 100644
--- a/src/app/components/chord-view/chord-view.component.html
+++ b/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
-          class="slide song"
-          [class.first]="slide.first_slide_of_tag"
-          *ngFor="let slide of nextSlides"
-          [innerHTML]="chordproFormatted(slide)|chordpro">
-        </div>
+        <ng-container *ngFor="let slide of nextSlides">
+          <app-chord-view-item [slide]="slide" *ngIf="slide?.chords; else elseNextSlideNoChords"></app-chord-view-item>
+          <ng-template #elseNextSlideNoChords>
+            <app-stage-view-item [slide]="slide"></app-stage-view-item>
+          </ng-template>
+        </ng-container>
       </div>
     </div>
   </div>
diff --git a/src/app/components/chord-view/chord-view.component.ts b/src/app/components/chord-view/chord-view.component.ts
index 4d04be0..b3a253a 100644
--- a/src/app/components/chord-view/chord-view.component.ts
+++ b/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
-    if (transposedLyrics instanceof Array) {
-      for (let i = 0; i < transposedLyrics.length; ++i) {
-        this.currentSlides[i].chords = transposedLyrics[i].chords;
+      // 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] = {...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;
-  }
 }
diff --git a/src/app/components/overlay.scss b/src/app/components/overlay.scss
index a620375..f71bc08 100644
--- a/src/app/components/overlay.scss
+++ b/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%;
diff --git a/src/app/components/stage-view/stage-view-item/stage-view-item.component.html b/src/app/components/stage-view/stage-view-item/stage-view-item.component.html
new file mode 100644
index 0000000..67ec77a
--- /dev/null
+++ b/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>
diff --git a/src/app/components/stage-view/stage-view-item/stage-view-item.component.ts b/src/app/components/stage-view/stage-view-item/stage-view-item.component.ts
new file mode 100644
index 0000000..634dda4
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/components/stage-view/stage-view.component.html b/src/app/components/stage-view/stage-view.component.html
index b443277..0567c3b 100644
--- a/src/app/components/stage-view/stage-view.component.html
+++ b/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">
-        <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>
+      <app-stage-view-item [slide]="currentSlides[activeSlide]" [active]="true"></app-stage-view-item>
       <div class="nextSlides">
-        <div class="slide mat-headline-4" [class.first]="slide.first_slide_of_tag" *ngFor="let slide of nextSlides">
-          <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>
+        <app-stage-view-item [slide]="slide" *ngFor="let slide of nextSlides"></app-stage-view-item>
       </div>
     </div>
   </div>
diff --git a/src/app/components/stage-view/stage-view.component.scss b/src/app/components/stage-view/stage-view.component.scss
index eb57666..e69de29 100644
--- a/src/app/components/stage-view/stage-view.component.scss
+++ b/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;
-    }
-  }
-}
diff --git a/src/app/components/stage-view/stage-view.component.ts b/src/app/components/stage-view/stage-view.component.ts
index 294b347..bf35ad4 100644
--- a/src/app/components/stage-view/stage-view.component.ts
+++ b/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;