From 03c76cd3cec4824d9bce32e8b718ee66dceee147 Mon Sep 17 00:00:00 2001
From: Joe Schneider <joe@revision29.com>
Date: Mon, 28 Jun 2021 04:52:51 +0000
Subject: [PATCH] Added thumbnails to Stage and Slides views

---
 .../components/slides/slides.component.html   | 10 +++++++++-
 .../components/slides/slides.component.scss   | 16 +++++++++++++++
 .../stage-view/stage-view.component.html      | 16 +++++++++++++--
 .../stage-view/stage-view.component.scss      | 20 +++++++++++++++++++
 src/app/responses.ts                          |  1 +
 5 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/src/app/components/slides/slides.component.html b/src/app/components/slides/slides.component.html
index 2f6e8e9..7b62e4f 100644
--- a/src/app/components/slides/slides.component.html
+++ b/src/app/components/slides/slides.component.html
@@ -1,4 +1,12 @@
 <mat-card class="no-select" mat-list-item *ngFor="let slide of slides; let counter = index;" (click)="onSlideSelected(counter)" [class.selected]="slide.selected">
   <div class="verse-tag">{{ slide.tag }}</div>
-  <div class="verse-text">{{ slide.text }}</div>
+  <div *ngIf="slide.img; else onlySlideText" class="verse-img-container">
+    <img src="{{ slide.img }}" />
+    <div class="img-verse-text">
+      {{ slide.text }}
+    </div>
+  </div>
+  <ng-template #onlySlideText>
+    <div class="verse-text">{{ slide.text }}</div>
+  </ng-template>
 </mat-card>
diff --git a/src/app/components/slides/slides.component.scss b/src/app/components/slides/slides.component.scss
index b532926..43e6f90 100644
--- a/src/app/components/slides/slides.component.scss
+++ b/src/app/components/slides/slides.component.scss
@@ -15,3 +15,19 @@ mat-card {
   margin-left: 2.5rem;
   white-space: pre-wrap;
 }
+/* Styles for displaying thumbnails */
+.verse-img-container {
+  /* CSS for formatting DIV containing the image */
+  margin-left: 2.5rem;
+  display: inline-block;
+}
+.verse-img-container img {
+  /* Roughly basing these values off of the current thumbnail size */
+  /* Images sent from OpenLP should be larger and should be sized based on viewer screen size */
+  max-height: 75%;
+  min-height: 88px;
+}
+.img-verse-text {
+  font-size: 1.1rem;
+  white-space: pre-wrap;
+}
diff --git a/src/app/components/stage-view/stage-view.component.html b/src/app/components/stage-view/stage-view.component.html
index ded6e79..48ac9db 100644
--- a/src/app/components/stage-view/stage-view.component.html
+++ b/src/app/components/stage-view/stage-view.component.html
@@ -5,11 +5,23 @@
     </div>
     <div class="container">
       <div class="slide currentSlide mat-display-3">
-        {{ currentSlides[activeSlide]?.text }}
+        <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-display-1" [class.first]="slide.first_slide_of_tag" *ngFor="let slide of nextSlides">
-          {{ slide.text }}
+          <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>
diff --git a/src/app/components/stage-view/stage-view.component.scss b/src/app/components/stage-view/stage-view.component.scss
index e69de29..330f55c 100644
--- a/src/app/components/stage-view/stage-view.component.scss
+++ b/src/app/components/stage-view/stage-view.component.scss
@@ -0,0 +1,20 @@
+.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;
+}
diff --git a/src/app/responses.ts b/src/app/responses.ts
index 5e11e93..42c6b30 100644
--- a/src/app/responses.ts
+++ b/src/app/responses.ts
@@ -24,6 +24,7 @@ export interface Slide {
   chords: string;
   lines: string[];
   first_slide_of_tag: boolean;
+  img: string;
 }
 
 export interface ServiceItem {