Merge pull request #146 from os2display/feature/support-1295-slidesho…

…ws-not-restarting SUPPORT-1295: Fixed issues with image cycles not restarting
os2display · Nov 7, 2023 · 133f86b · 133f86b
2 parents eb1e18a + 4863353
commit 133f86b
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 41 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- [#146](https://github.com/os2display/display-templates/pull/146)
+  - Fixed issue where image-text image cycle is not restarting when only on slide is displayed.
+  - Fixed issue with slideshow default duration being 5000 s.
+
 ## [1.3.1] - 2023-10-26
 
 - [#145](https://github.com/os2display/display-templates/pull/145)

diff --git a/build/image-text-config-develop.json b/build/image-text-config-develop.json
@@ -4,8 +4,8 @@
   "id": "01FP2SNGFN0BZQH03KCBXHKYHG",
   "description": "Mulighed for at sætte billede og tekst, med forskellige visninger.",
   "resources": {
-    "component": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/image-text.js?ts=1680079550081",
-    "admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/image-text-admin.json?ts=1680079550081",
+    "component": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/image-text.js?ts=1699164803061",
+    "admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/image-text-admin.json?ts=1699164803061",
     "schema": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/image-text-schema.json",
     "assets": [],
     "options": {},

diff --git a/build/image-text-config-main.json b/build/image-text-config-main.json
@@ -4,8 +4,8 @@
   "id": "01FP2SNGFN0BZQH03KCBXHKYHG",
   "description": "Mulighed for at sætte billede og tekst, med forskellige visninger.",
   "resources": {
-    "component": "https://raw.githubusercontent.com/os2display/display-templates/main/build/image-text.js?ts=1680079550081",
-    "admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/image-text-admin.json?ts=1680079550081",
+    "component": "https://raw.githubusercontent.com/os2display/display-templates/main/build/image-text.js?ts=1699164803061",
+    "admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/image-text-admin.json?ts=1699164803061",
     "schema": "https://raw.githubusercontent.com/os2display/display-templates/main/build/image-text-schema.json",
     "assets": [],
     "options": {},

diff --git a/build/image-text.js b/build/image-text.js
diff --git a/build/slideshow-config-develop.json b/build/slideshow-config-develop.json
@@ -4,8 +4,8 @@
   "id": "01FP2SNSC9VXD10ZKXQR819NS9",
   "description": "Skabelon til slideshow af billeder med forskellige effekter",
   "resources": {
-    "component": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/slideshow.js?ts=1677590005936",
-    "admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/slideshow-admin.json?ts=1677590005936",
+    "component": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/slideshow.js?ts=1699164803061",
+    "admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/slideshow-admin.json?ts=1699164803061",
     "schema": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/slideshow-schema.json",
     "assets": [],
     "options": {},

diff --git a/build/slideshow-config-main.json b/build/slideshow-config-main.json
@@ -4,8 +4,8 @@
   "id": "01FP2SNSC9VXD10ZKXQR819NS9",
   "description": "Skabelon til slideshow af billeder med forskellige effekter",
   "resources": {
-    "component": "https://raw.githubusercontent.com/os2display/display-templates/main/build/slideshow.js?ts=1677590005936",
-    "admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/slideshow-admin.json?ts=1677590005936",
+    "component": "https://raw.githubusercontent.com/os2display/display-templates/main/build/slideshow.js?ts=1699164803061",
+    "admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/slideshow-admin.json?ts=1699164803061",
     "schema": "https://raw.githubusercontent.com/os2display/display-templates/main/build/slideshow-schema.json",
     "assets": [],
     "options": {},

diff --git a/build/slideshow.js b/build/slideshow.js
diff --git a/src/image-text/image-text.js b/src/image-text/image-text.js
@@ -167,7 +167,7 @@ function ImageText({ slide, content, run, slideDone, executionId }) {
     }
   }, [slide]);
 
-  useEffect(() => {
+  const startTheShow = () => {
     if (images?.length > 0 && !currentImage) {
       setCurrentImage(images[0]);
     }
@@ -177,13 +177,20 @@ function ImageText({ slide, content, run, slideDone, executionId }) {
       // Kickoff the display of multiple images with the zero indexed
       changeImage(0);
     }
+  };
+
+  useEffect(() => {
+    if (!currentImage) {
+      startTheShow();
+    }
   }, [images]);
 
   /** Setup slide run function. */
   const slideExecution = new BaseSlideExecution(slide, slideDone);
 
   useEffect(() => {
     if (run) {
+      startTheShow();
       slideExecution.start(duration);
     }
 

diff --git a/src/index.js b/src/index.js
@@ -60,15 +60,20 @@ export const renderScreen = (screen) => {
   );
 };
 
+const slideDone = () => {
+  // eslint-disable-next-line no-console
+  console.log("slide done");
+};
+
 export const renderSlide = (slide) => {
   switch (slide.type) {
     case "book-review":
       return (
         <BookReview
           content={slide.content}
           slide={slide}
-          run={new Date().toISOString()}
-          slideDone={() => {}}
+          run="1234"
+          slideDone={slideDone}
           executionId="SLIDE_ID"
         />
       );
@@ -77,8 +82,8 @@ export const renderSlide = (slide) => {
         <Calendar
           content={slide.content}
           slide={slide}
-          run={new Date().toISOString()}
-          slideDone={() => {}}
+          run="1234"
+          slideDone={slideDone}
           executionId="SLIDE_ID"
         />
       );
@@ -87,8 +92,8 @@ export const renderSlide = (slide) => {
         <Contacts
           content={slide.content}
           slide={slide}
-          run={new Date().toISOString()}
-          slideDone={() => {}}
+          run="1234"
+          slideDone={slideDone}
           executionId="SLIDE_ID"
         />
       );
@@ -97,8 +102,8 @@ export const renderSlide = (slide) => {
         <ImageText
           content={slide.content}
           slide={slide}
-          run={new Date().toISOString()}
-          slideDone={() => {}}
+          run="1234"
+          slideDone={slideDone}
           executionId="SLIDE_ID"
         />
       );
@@ -107,8 +112,8 @@ export const renderSlide = (slide) => {
         <IFrame
           content={slide.content}
           slide={slide}
-          run={new Date().toISOString()}
-          slideDone={() => {}}
+          run="1234"
+          slideDone={slideDone}
           executionId="SLIDE_ID"
         />
       );
@@ -117,8 +122,8 @@ export const renderSlide = (slide) => {
         <Poster
           content={slide.content}
           slide={slide}
-          run={new Date().toISOString()}
-          slideDone={() => {}}
+          run="1234"
+          slideDone={slideDone}
           executionId="SLIDE_ID"
         />
       );
@@ -127,8 +132,8 @@ export const renderSlide = (slide) => {
         <RSS
           content={slide.content}
           slide={slide}
-          run={new Date().toISOString()}
-          slideDone={() => {}}
+          run="1234"
+          slideDone={slideDone}
           executionId="SLIDE_ID"
         />
       );
@@ -137,8 +142,8 @@ export const renderSlide = (slide) => {
         <Slideshow
           content={slide.content}
           slide={slide}
-          run={new Date().toISOString()}
-          slideDone={() => {}}
+          run="1234"
+          slideDone={slideDone}
           executionId="SLIDE_ID"
         />
       );
@@ -147,8 +152,8 @@ export const renderSlide = (slide) => {
         <InstagramFeed
           content={slide.content}
           slide={slide}
-          run={new Date().toISOString()}
-          slideDone={() => {}}
+          run="1234"
+          slideDone={slideDone}
           executionId="SLIDE_ID"
         />
       );
@@ -157,8 +162,8 @@ export const renderSlide = (slide) => {
         <Table
           content={slide.content}
           slide={slide}
-          run={new Date().toISOString()}
-          slideDone={() => {}}
+          run="1234"
+          slideDone={slideDone}
           executionId="SLIDE_ID"
         />
       );
@@ -167,8 +172,8 @@ export const renderSlide = (slide) => {
         <Video
           content={slide.content}
           slide={slide}
-          run={new Date().toISOString()}
-          slideDone={() => {}}
+          run="1234"
+          slideDone={slideDone}
           executionId="SLIDE_ID"
         />
       );
@@ -177,8 +182,8 @@ export const renderSlide = (slide) => {
         <Travel
           content={slide.content}
           slide={slide}
-          run={new Date().toISOString()}
-          slideDone={() => {}}
+          run="1234"
+          slideDone={slideDone}
           executionId="SLIDE_ID"
         />
       );

diff --git a/src/slideshow/slideshow.js b/src/slideshow/slideshow.js
@@ -20,19 +20,19 @@ import "./slideshow.scss";
  * @returns {JSX.Element} The component.
  */
 function Slideshow({ slide, content, run, slideDone, executionId }) {
-  const { images, imageDuration = 5000, transition, animation } = content;
+  const { images, imageDuration = 5, transition, animation } = content;
   const [index, setIndex] = useState(0);
   const fadeEnabled = transition === "fade";
   const fadeDuration = 1000;
   const [fade, setFade] = useState(false);
-  const imageDurationInSeconds = imageDuration * 1000;
+  const imageDurationInMilliseconds = imageDuration * 1000;
   // Map images to mediaData.
   const imageUrls = getAllMediaUrlsFromField(slide.mediaData, images);
 
   const animationName = "animationForImage";
   const [animationIndex, setAnimationIndex] = useState(0);
   const [animationDuration, setAnimationDuration] = useState(
-    imageDurationInSeconds + fadeDuration
+    imageDurationInMilliseconds + fadeDuration
   );
 
   const logo = slide?.themeData?.logo;
@@ -176,7 +176,7 @@ function Slideshow({ slide, content, run, slideDone, executionId }) {
             // Fade to next image.
             setFade(true);
             setAnimationIndex(newIndex);
-            setAnimationDuration(imageDurationInSeconds + fadeDuration * 2);
+            setAnimationDuration(imageDurationInMilliseconds + fadeDuration * 2);
             fadeRef.current = setTimeout(() => {
               setFade(false);
               setIndex(newIndex);
@@ -185,9 +185,9 @@ function Slideshow({ slide, content, run, slideDone, executionId }) {
             // Change to next.
             setIndex(newIndex);
             setAnimationIndex(newIndex);
-            setAnimationDuration(imageDurationInSeconds);
+            setAnimationDuration(imageDurationInMilliseconds);
           }
-        }, imageDurationInSeconds);
+        }, imageDurationInMilliseconds);
       } else {
         // If there are no images in slide, wait for 2s before continuing to avoid crashes.
         setTimeout(() => {