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 @@
{{ slide.tag }}
- {{ slide.text }}
+
+
+
+ {{ slide.text }}
+
+
+
+ {{ slide.text }}
+
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 @@
- {{ currentSlides[activeSlide]?.text }}
+
+
+
{{ currentSlides[activeSlide]?.text }}
+
+
+ {{ currentSlides[activeSlide]?.text }}
+
- {{ slide.text }}
+
+
+
{{ slide.text }}
+
+
+ {{ slide.text }}
+
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 {