From 472dba679070bd0416a2d308acf631d7de5f5aa9 Mon Sep 17 00:00:00 2001
From: Troels Ugilt Jensen <6103205+tuj@users.noreply.github.com>
Date: Mon, 2 Dec 2024 11:52:20 +0100
Subject: [PATCH] 3089: Cleaned up code

---
 src/calendar/calendar-multiple-days.js         | 3 +++
 src/calendar/calendar-multiple.js              | 3 +++
 src/calendar/calendar-single-booking-helper.js | 3 +++
 src/calendar/calendar-single.js                | 3 +++
 src/calendar/calendar.js                       | 3 +--
 src/image-text/image-text.js                   | 2 +-
 src/image-text/image-text.scss                 | 2 +-
 src/video/video.js                             | 2 +-
 8 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/calendar/calendar-multiple-days.js b/src/calendar/calendar-multiple-days.js
index 5a4c920..3eaf962 100644
--- a/src/calendar/calendar-multiple-days.js
+++ b/src/calendar/calendar-multiple-days.js
@@ -115,11 +115,14 @@ const Wrapper = styled.div`
   font-size: var(--font-size-base);
   height: 100%;
   overflow: hidden;
+  background-repeat: no-repeat;
+  background-size: cover;
   /*
   --bg-color is local to this template file and is populated from configuration.
   --background-color serves as fallback to the global variable, that will serve a light og dark background color depending on the user preferences.
   */
   background-color: var(--bg-color, var(--background-color));
+  background-image: var(--bg-image, none);
   color: var(--text-color);
   display: grid;
   grid-template-areas:
diff --git a/src/calendar/calendar-multiple.js b/src/calendar/calendar-multiple.js
index 3477e4f..01e2c6d 100644
--- a/src/calendar/calendar-multiple.js
+++ b/src/calendar/calendar-multiple.js
@@ -202,11 +202,14 @@ const Wrapper = styled.div`
   font-size: var(--font-size-base);
   overflow: hidden;
   height: 100%;
+  background-repeat: no-repeat;
+  background-size: cover;
   /*
   --bg-color is local to this template file and is populated from configuration.
   --background-color serves as fallback to the global variable, that will serve a light og dark background color depending on the user preferences.
   */
   background-color: var(--bg-color, var(--background-color));
+  background-image: var(--bg-image, none);
   color: var(--text-color);
   display: grid;
   grid-template-areas:
diff --git a/src/calendar/calendar-single-booking-helper.js b/src/calendar/calendar-single-booking-helper.js
index ed0be47..e534122 100644
--- a/src/calendar/calendar-single-booking-helper.js
+++ b/src/calendar/calendar-single-booking-helper.js
@@ -8,11 +8,14 @@ const Wrapper = styled.div`
   /* Wrapper styling */
   font-family: var(--font-family-base);
   height: 100%;
+  background-repeat: no-repeat;
+  background-size: cover;
   /*
     --bg-color is local to this template file and is populated from configuration.
     --background-color serves as fallback to the global variable, that will serve a light og dark background color depending on the user preferences.
   */
   background-color: var(--bg-color, var(--background-color));
+  background-image: var(--bg-image, none);
 
   color: var(--text-color);
   overflow: hidden;
diff --git a/src/calendar/calendar-single.js b/src/calendar/calendar-single.js
index c796874..269d23d 100644
--- a/src/calendar/calendar-single.js
+++ b/src/calendar/calendar-single.js
@@ -97,11 +97,14 @@ const Wrapper = styled.div`
   /* Wrapper styling */
   font-family: var(--font-family-base);
   height: 100%;
+  background-repeat: no-repeat;
+  background-size: cover;
   /*
   --bg-color is local to this template file and is populated from configuration.
   --background-color serves as fallback to the global variable, that will serve a light og dark background color depending on the user preferences.
   */
   background-color: var(--bg-color, var(--background-color));
+  background-image: var(--bg-image, none);
   color: var(--text-color);
   padding: var(--padding-size-base);
 `;
diff --git a/src/calendar/calendar.js b/src/calendar/calendar.js
index 7db7dc7..1de9f71 100644
--- a/src/calendar/calendar.js
+++ b/src/calendar/calendar.js
@@ -41,7 +41,7 @@ function Calendar({ slide, content, run, slideDone, executionId }) {
   const imageUrl = getFirstMediaUrlFromField(slide.mediaData, content.image);
 
   if (imageUrl) {
-    rootStyle.backgroundImage = `url("${imageUrl}")`;
+    rootStyle["--bg-image"] = `url("${imageUrl}")`;
   }
 
   /** Setup slide run function. */
@@ -149,7 +149,6 @@ Calendar.propTypes = {
   content: PropTypes.shape({
     duration: PropTypes.number.isRequired,
     layout: PropTypes.string,
-
     image: PropTypes.arrayOf(PropTypes.string),
     fontSize: PropTypes.string,
     resourceUnavailableText: PropTypes.string,
diff --git a/src/image-text/image-text.js b/src/image-text/image-text.js
index 2723152..3dc1915 100644
--- a/src/image-text/image-text.js
+++ b/src/image-text/image-text.js
@@ -205,7 +205,7 @@ function ImageText({ slide, content, run, slideDone, executionId }) {
                 }}
                 ref={currentImage.nodeRef}
                 className={`background-image${
-                  mediaContain ? " image-contain" : ""
+                  mediaContain ? " media-contain" : ""
                 }`}
               />
             </CSSTransition>
diff --git a/src/image-text/image-text.scss b/src/image-text/image-text.scss
index 068e63d..f734ad4 100644
--- a/src/image-text/image-text.scss
+++ b/src/image-text/image-text.scss
@@ -142,7 +142,7 @@
     bottom: 0;
   }
 
-  .background-image.image-contain {
+  .background-image.media-contain {
     background-size: contain;
     background-repeat: no-repeat;
   }
diff --git a/src/video/video.js b/src/video/video.js
index aebfcdd..521955d 100644
--- a/src/video/video.js
+++ b/src/video/video.js
@@ -66,7 +66,7 @@ function Video({ slide, content, run, slideDone, executionId }) {
           height="100%"
           ref={videoRef}
           muted={!sound}
-          className={mediaContain ? " media-contain" : ""}
+          className={mediaContain ? "media-contain" : ""}
         >
           {videoUrls.map((url) => (
             <source key={url} src={url} />