Skip to content

Commit a2561b0

Browse files
tujtuj
authored
Merge pull request #170 from os2display/release/2.3.0
Release 2.3.0
2 parents 72f24db + 5cfb318 commit a2561b0

File tree

6 files changed

+67
-37
lines changed

6 files changed

+67
-37
lines changed

‎CHANGELOG.md

+9-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,15 @@ All notable changes to this project will be documented in this file.
44

55
## Unreleased
66

7-
## [2.2.0] - 2025-3-10
7+
## [2.3.0] - 2025-03-24
8+
9+
- [#169](https://github.com/os2display/display-templates/pull/169)
10+
- Fixed duration and slide done.
11+
- [#165](https://github.com/os2display/display-templates/pull/165)
12+
- Fixed transitions for poster.
13+
- Fixed dates for poster spanning multiple days.
14+
15+
## [2.2.0] - 2025-03-10
816

917
- [#160](https://github.com/os2display/display-templates/pull/160)
1018
- Added option to set image size contain instead of cover.

‎build/poster-config-develop.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
"id": "01FWJZQ25A1868V63CWYYHQFKQ",
55
"description": "Mulighed for at vise plakat indhold.",
66
"resources": {
7-
"component": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/poster.js?ts=1733136815096",
8-
"admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/poster-admin.json?ts=1733136815096",
9-
"schema": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/poster-schema.json?ts=1733136815096",
7+
"component": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/poster.js?ts=1742482693753",
8+
"admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/poster-admin.json?ts=1742482693753",
9+
"schema": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/poster-schema.json?ts=1742482693753",
1010
"assets": [],
1111
"options": {},
1212
"content": {}

‎build/poster-config-main.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
"id": "01FWJZQ25A1868V63CWYYHQFKQ",
55
"description": "Mulighed for at vise plakat indhold.",
66
"resources": {
7-
"component": "https://raw.githubusercontent.com/os2display/display-templates/main/build/poster.js?ts=1733136815096",
8-
"admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/poster-admin.json?ts=1733136815096",
9-
"schema": "https://raw.githubusercontent.com/os2display/display-templates/main/build/poster-schema.json?ts=1733136815096",
7+
"component": "https://raw.githubusercontent.com/os2display/display-templates/main/build/poster.js?ts=1742482693753",
8+
"admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/poster-admin.json?ts=1742482693753",
9+
"schema": "https://raw.githubusercontent.com/os2display/display-templates/main/build/poster-schema.json?ts=1742482693753",
1010
"assets": [],
1111
"options": {},
1212
"content": {}

‎build/poster.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/poster/poster.js

+49-27
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import "./poster.scss";
2323
function Poster({ slide, content, run, slideDone, executionId }) {
2424
const [translations, setTranslations] = useState({});
2525
const [currentEvent, setCurrentEvent] = useState(null);
26+
const [currentIndex, setCurrentIndex] = useState(null);
2627
const [show, setShow] = useState(true);
2728
const timerRef = useRef(null);
2829
const animationTimerRef = useRef(null);
@@ -35,8 +36,7 @@ function Poster({ slide, content, run, slideDone, executionId }) {
3536

3637
// Animation.
3738
const animationDuration = 500;
38-
const { entryDuration = 15 } = content; // default 15s.
39-
const entryDurationMilliseconds = entryDuration * 1000;
39+
const { duration = 15000 } = content; // default 15s.
4040

4141
// Props from currentEvent.
4242
const {
@@ -88,7 +88,7 @@ function Poster({ slide, content, run, slideDone, executionId }) {
8888

8989
const formatDateNoYear = (date) => {
9090
if (!date) return "";
91-
return capitalize(dayjs(date).locale(localeDa).format("DD MMMM"));
91+
return capitalize(dayjs(date).locale(localeDa).format("DD MMM"));
9292
};
9393

9494
const getUrlDomain = (urlString) => {
@@ -101,37 +101,55 @@ function Poster({ slide, content, run, slideDone, executionId }) {
101101
);
102102
};
103103

104+
useEffect(() => {
105+
if (currentEvent) {
106+
setShow(true);
107+
}
108+
}, [currentEvent]);
109+
104110
// Setup feed entry switch and animation, if there is more than one post.
105111
useEffect(() => {
106-
if (!currentEvent) return;
112+
if (currentIndex === null) {
113+
return;
114+
}
107115

108-
timerRef.current = setTimeout(() => {
109-
const currentIndex = feedData.indexOf(currentEvent);
110-
const nextIndex = (currentIndex + 1) % feedData.length;
116+
setCurrentEvent(feedData[currentIndex]);
117+
118+
const nextIndex = (currentIndex + 1) % feedData.length;
111119

120+
if (nextIndex > 0) {
121+
if (animationTimerRef?.current) {
122+
clearInterval(animationTimerRef.current);
123+
}
124+
125+
animationTimerRef.current = setTimeout(() => {
126+
setShow(false);
127+
}, duration - animationDuration + 50);
128+
}
129+
130+
if (timerRef?.current) {
131+
clearInterval(timerRef.current);
132+
}
133+
134+
timerRef.current = setTimeout(() => {
112135
if (nextIndex === 0) {
113136
slideDone(slide);
114137
} else {
115-
setCurrentEvent(feedData[nextIndex]);
116-
setShow(true);
138+
setCurrentIndex(nextIndex);
117139
}
118-
}, entryDurationMilliseconds);
119-
120-
animationTimerRef.current = setTimeout(() => {
121-
setShow(false);
122-
}, entryDurationMilliseconds - animationDuration);
123-
}, [currentEvent]);
140+
}, duration);
141+
}, [currentIndex]);
124142

125143
useEffect(() => {
126144
if (run) {
127-
if (feedData && currentEvent === null && feedData?.length > 0) {
128-
const [first] = feedData;
129-
setCurrentEvent(first);
145+
if (feedData?.length > 0) {
146+
setCurrentIndex(0);
130147
} else {
131148
setTimeout(() => slideDone(slide), 1000);
132149
}
133150
} else {
134151
setCurrentEvent(null);
152+
setCurrentIndex(null);
135153
}
136154
}, [run]);
137155

@@ -142,10 +160,10 @@ function Poster({ slide, content, run, slideDone, executionId }) {
142160
setTranslations(da);
143161

144162
return function cleanup() {
145-
if (timerRef?.current !== null) {
163+
if (timerRef?.current) {
146164
clearInterval(timerRef.current);
147165
}
148-
if (animationTimerRef?.current !== null) {
166+
if (animationTimerRef?.current) {
149167
clearInterval(animationTimerRef.current);
150168
}
151169
};
@@ -159,12 +177,16 @@ function Poster({ slide, content, run, slideDone, executionId }) {
159177
<div className={`template-poster ${showLogo && "with-logo"}`}>
160178
<div
161179
className={`image-area ${mediaContain ? "media-contain" : ""}`}
162-
style={{
163-
backgroundImage: `url("${image}")`,
164-
...(show
165-
? { animation: `fade-in ${animationDuration}ms` }
166-
: { animation: `fade-out ${animationDuration}ms` }),
167-
}}
180+
style={
181+
image
182+
? {
183+
backgroundImage: `url("${image}")`,
184+
...(show
185+
? { animation: `fade-in ${animationDuration}ms` }
186+
: { animation: `fade-out ${animationDuration}ms` }),
187+
}
188+
: {}
189+
}
168190
/>
169191
<div className="header-area">
170192
<div className="center">
@@ -292,7 +314,7 @@ Poster.propTypes = {
292314
),
293315
}).isRequired,
294316
content: PropTypes.shape({
295-
entryDuration: PropTypes.number,
317+
duration: PropTypes.number,
296318
showLogo: PropTypes.bool,
297319
mediaContain: PropTypes.bool,
298320
}).isRequired,

‎src/slides.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -939,8 +939,8 @@ const slides = [
939939
name: "Lorem ipsum",
940940
url: "www.example.dk",
941941
image: "/fixtures/images/mountain1.jpeg",
942-
startDate: "2021-06-21T14:00:00+00:00",
943-
endDate: "2021-06-21T15:00:00+00:00",
942+
startDate: "2021-08-21T14:00:00+00:00",
943+
endDate: "2021-09-21T15:00:00+00:00",
944944
ticketPriceRange: "75-150 kr.",
945945
eventStatusText: null,
946946
place: {

0 commit comments

Comments
 (0)