Added thumbnails to Stage and Slides views

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 *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>

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

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

@@ -5,11 +5,23 @@
     </div>
     <div class="container">
       <div class="slide currentSlide mat-display-3">
+        <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">
+          <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>

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

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 {