Merge pull request #181 from os2display/feature/4667-news-feed-blocks-transition

Fixed issue where news-feed template blocks slide transition if receiving no entries

Author: tuj

CHANGELOG.md

@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file.
 
 ## Unreleased
 
+- [#178](https://github.com/os2display/display-templates/pull/178)
+  - Fixed news-feed template blocks slide transitions.
 - [#177](https://github.com/os2display/display-templates/pull/177)
   - Set options.disableLivePreview for iframe templates
 

build/news-feed-config-develop.json

@@ -4,8 +4,8 @@
   "id": "01JEWPAFF93YSF418TH72W1SBA",
   "description": "Mulighed for at vise nyhedsindhold.",
   "resources": {
-    "component": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/news-feed.js?ts=1744372285281",
-    "admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/news-feed-admin.json?ts=1744372285281",
+    "component": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/news-feed.js?ts=1749716391822",
+    "admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/news-feed-admin.json?ts=1749716391822",
     "schema": "",
     "assets": [],
     "options": {},

build/news-feed-config-main.json

@@ -4,8 +4,8 @@
   "id": "01JEWPAFF93YSF418TH72W1SBA",
   "description": "Mulighed for at vise nyhedsindhold.",
   "resources": {
-    "component": "https://raw.githubusercontent.com/os2display/display-templates/main/build/news-feed.js?ts=1744372285281",
-    "admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/news-feed-admin.json?ts=1744372285281",
+    "component": "https://raw.githubusercontent.com/os2display/display-templates/main/build/news-feed.js?ts=1749716391822",
+    "admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/news-feed-admin.json?ts=1749716391822",
     "schema": "",
     "assets": [],
     "options": {},

build/news-feed.js

@@ -27,6 +27,7 @@ function NewsFeed({ slide, content, run, slideDone, executionId }) {
   const [currentPost, setCurrentPost] = useState(null);
   const [posts, setPosts] = useState([]);
   const [qr, setQr] = useState(null);
+  const transitionRef = useRef(null);
 
   const timerRef = useRef();
 
@@ -84,8 +85,13 @@ function NewsFeed({ slide, content, run, slideDone, executionId }) {
   }, [posts]);
 
   useEffect(() => {
-    if (feedData && Object.hasOwnProperty.call(feedData, "entries")) {
+    if (feedData?.entries?.length > 0) {
       setPosts(feedData.entries);
+    } else if (!transitionRef.current) {
+      // If no content, wait 5 seconds and continue to next slide.
+      transitionRef.current = setTimeout(() => {
+        slideDone(slide);
+      }, 5000);
     }
   }, [feedData]);
 
@@ -97,6 +103,14 @@ function NewsFeed({ slide, content, run, slideDone, executionId }) {
     }
   }, [run]);
 
+  useEffect(() => {
+    return () => {
+      if (transitionRef.current) {
+        clearInterval(transitionRef.current);
+      }
+    };
+  }, []);
+
   const getImageUrl = (post) => {
     let imageUrl = fallbackImageUrl ?? null;