Merge pull request #165 from os2display/feature/eventdatabasen-v2

New feed source: Eventdatabasen v2

Author: tuj

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 
 ## Unreleased
 
+- [#165](https://github.com/os2display/display-templates/pull/165)
+  - Fixed transitions for poster.
+  - Fixed dates for poster spanning multiple days.
+
 ## [2.2.0] - 2025-3-10
 
 - [#160](https://github.com/os2display/display-templates/pull/160)

build/poster-config-develop.json

@@ -4,9 +4,9 @@
   "id": "01FWJZQ25A1868V63CWYYHQFKQ",
   "description": "Mulighed for at vise plakat indhold.",
   "resources": {
-    "component": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/poster.js?ts=1733136815096",
-    "admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/poster-admin.json?ts=1733136815096",
-    "schema": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/poster-schema.json?ts=1733136815096",
+    "component": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/poster.js?ts=1738154345932",
+    "admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/poster-admin.json?ts=1738154345932",
+    "schema": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/poster-schema.json?ts=1738154345932",
     "assets": [],
     "options": {},
     "content": {}

build/poster-config-main.json

@@ -4,9 +4,9 @@
   "id": "01FWJZQ25A1868V63CWYYHQFKQ",
   "description": "Mulighed for at vise plakat indhold.",
   "resources": {
-    "component": "https://raw.githubusercontent.com/os2display/display-templates/main/build/poster.js?ts=1733136815096",
-    "admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/poster-admin.json?ts=1733136815096",
-    "schema": "https://raw.githubusercontent.com/os2display/display-templates/main/build/poster-schema.json?ts=1733136815096",
+    "component": "https://raw.githubusercontent.com/os2display/display-templates/main/build/poster.js?ts=1738154345932",
+    "admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/poster-admin.json?ts=1738154345932",
+    "schema": "https://raw.githubusercontent.com/os2display/display-templates/main/build/poster-schema.json?ts=1738154345932",
     "assets": [],
     "options": {},
     "content": {}

build/poster.js

@@ -23,6 +23,7 @@ import "./poster.scss";
 function Poster({ slide, content, run, slideDone, executionId }) {
   const [translations, setTranslations] = useState({});
   const [currentEvent, setCurrentEvent] = useState(null);
+  const [currentIndex, setCurrentIndex] = useState(null);
   const [show, setShow] = useState(true);
   const timerRef = useRef(null);
   const animationTimerRef = useRef(null);
@@ -88,7 +89,7 @@ function Poster({ slide, content, run, slideDone, executionId }) {
 
   const formatDateNoYear = (date) => {
     if (!date) return "";
-    return capitalize(dayjs(date).locale(localeDa).format("DD MMMM"));
+    return capitalize(dayjs(date).locale(localeDa).format("DD MMM"));
   };
 
   const getUrlDomain = (urlString) => {
@@ -101,37 +102,55 @@ function Poster({ slide, content, run, slideDone, executionId }) {
     );
   };
 
+  useEffect(() => {
+    if (currentEvent) {
+      setShow(true);
+    }
+  }, [currentEvent]);
+
   // Setup feed entry switch and animation, if there is more than one post.
   useEffect(() => {
-    if (!currentEvent) return;
+    if (currentIndex === null) {
+      return;
+    }
 
-    timerRef.current = setTimeout(() => {
-      const currentIndex = feedData.indexOf(currentEvent);
-      const nextIndex = (currentIndex + 1) % feedData.length;
+    setCurrentEvent(feedData[currentIndex]);
+
+    const nextIndex = (currentIndex + 1) % feedData.length;
 
+    if (nextIndex > 0) {
+      if (animationTimerRef?.current) {
+        clearInterval(animationTimerRef.current);
+      }
+
+      animationTimerRef.current = setTimeout(() => {
+        setShow(false);
+      }, entryDurationMilliseconds - animationDuration + 50);
+    }
+
+    if (timerRef?.current) {
+      clearInterval(timerRef.current);
+    }
+
+    timerRef.current = setTimeout(() => {
       if (nextIndex === 0) {
         slideDone(slide);
       } else {
-        setCurrentEvent(feedData[nextIndex]);
-        setShow(true);
+        setCurrentIndex(nextIndex);
       }
     }, entryDurationMilliseconds);
-
-    animationTimerRef.current = setTimeout(() => {
-      setShow(false);
-    }, entryDurationMilliseconds - animationDuration);
-  }, [currentEvent]);
+  }, [currentIndex]);
 
   useEffect(() => {
     if (run) {
       if (feedData && currentEvent === null && feedData?.length > 0) {
-        const [first] = feedData;
-        setCurrentEvent(first);
+        setCurrentIndex(0);
       } else {
         setTimeout(() => slideDone(slide), 1000);
       }
     } else {
       setCurrentEvent(null);
+      setCurrentIndex(null);
     }
   }, [run]);
 
@@ -142,10 +161,10 @@ function Poster({ slide, content, run, slideDone, executionId }) {
     setTranslations(da);
 
     return function cleanup() {
-      if (timerRef?.current !== null) {
+      if (timerRef?.current) {
         clearInterval(timerRef.current);
       }
-      if (animationTimerRef?.current !== null) {
+      if (animationTimerRef?.current) {
         clearInterval(animationTimerRef.current);
       }
     };
@@ -159,12 +178,16 @@ function Poster({ slide, content, run, slideDone, executionId }) {
           <div className={`template-poster ${showLogo && "with-logo"}`}>
             <div
               className={`image-area ${mediaContain ? "media-contain" : ""}`}
-              style={{
-                backgroundImage: `url("${image}")`,
-                ...(show
-                  ? { animation: `fade-in ${animationDuration}ms` }
-                  : { animation: `fade-out ${animationDuration}ms` }),
-              }}
+              style={
+                image
+                  ? {
+                      backgroundImage: `url("${image}")`,
+                      ...(show
+                        ? { animation: `fade-in ${animationDuration}ms` }
+                        : { animation: `fade-out ${animationDuration}ms` }),
+                    }
+                  : {}
+              }
             />
             <div className="header-area">
               <div className="center">

src/poster/poster.js

@@ -939,8 +939,8 @@ const slides = [
         name: "Lorem ipsum",
         url: "www.example.dk",
         image: "/fixtures/images/mountain1.jpeg",
-        startDate: "2021-06-21T14:00:00+00:00",
-        endDate: "2021-06-21T15:00:00+00:00",
+        startDate: "2021-08-21T14:00:00+00:00",
+        endDate: "2021-09-21T15:00:00+00:00",
         ticketPriceRange: "75-150 kr.",
         eventStatusText: null,
         place: {