Merge pull request #159 from os2display/feature/2922-slideshow-bug

Fixed issue where slideshow flickered first image before transitioning to next slide
os2display · Nov 12, 2024 · a15b444 · a15b444
2 parents 3266dec + b356caf
commit a15b444
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 All notable changes to this project will be documented in this file.
 
+- [#159](https://github.com/os2display/display-templates/pull/159)
+  - Fixed issue where slideshow flickered first image before transitioning to next slide.
+
 ## [2.1.0] - 2024-10-23
 
 - [#158](https://github.com/os2display/display-templates/pull/158)

diff --git a/build/slideshow-config-develop.json b/build/slideshow-config-develop.json
@@ -4,9 +4,9 @@
   "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=1723805672543",
-    "admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/slideshow-admin.json?ts=1723805672543",
-    "schema": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/slideshow-schema.json?ts=1723805672543",
+    "component": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/slideshow.js?ts=1731317499358",
+    "admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/slideshow-admin.json?ts=1731317499358",
+    "schema": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/slideshow-schema.json?ts=1731317499358",
     "assets": [],
     "options": {},
     "content": {}

diff --git a/build/slideshow-config-main.json b/build/slideshow-config-main.json
@@ -4,9 +4,9 @@
   "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=1723805672543",
-    "admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/slideshow-admin.json?ts=1723805672543",
-    "schema": "https://raw.githubusercontent.com/os2display/display-templates/main/build/slideshow-schema.json?ts=1723805672543",
+    "component": "https://raw.githubusercontent.com/os2display/display-templates/main/build/slideshow.js?ts=1731317499358",
+    "admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/slideshow-admin.json?ts=1731317499358",
+    "schema": "https://raw.githubusercontent.com/os2display/display-templates/main/build/slideshow-schema.json?ts=1731317499358",
     "assets": [],
     "options": {},
     "content": {}

diff --git a/build/slideshow.js b/build/slideshow.js
diff --git a/src/slideshow/slideshow.js b/src/slideshow/slideshow.js
@@ -203,9 +203,11 @@ function Slideshow({ slide, content, run, slideDone, executionId }) {
         newIndex = 0;
       }
 
-      setAnimationIndex(newIndex);
+      if (newIndex !== 0) {
+        setAnimationIndex(newIndex);
+      }
 
-      if (fadeEnabled) {
+      if (fadeEnabled && newIndex !== 0) {
         // Fade to next image.
         setFade(true);
 
@@ -215,17 +217,17 @@ function Slideshow({ slide, content, run, slideDone, executionId }) {
 
         fadeRef.current = setTimeout(() => {
           setFade(false);
-          setIndex(newIndex);
 
           if (newIndex === 0) {
             slideDone(slide);
+          } else {
+            setIndex(newIndex);
           }
         }, fadeDuration - fadeSafeMargin);
+      } else if (newIndex === 0) {
+        slideDone(slide);
       } else {
         setIndex(newIndex);
-        if (newIndex === 0) {
-          slideDone(slide);
-        }
       }
     }, imageDurationInMilliseconds);
   }, [index]);