Merge pull request #144 from os2display/feature/display-1019-feed-err…

…ors2 DISPLAY-1019: Fixed poster template to not display anything when no event
os2display · Oct 13, 2023 · 21ef241 · 21ef241
2 parents c1115f7 + 68a6c27
commit 21ef241
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 80 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,8 +4,10 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- [#144](https://github.com/os2display/display-templates/pull/144)
+  - Fixed poster template issue when no feed is loaded.
 - [#142](https://github.com/os2display/display-templates/pull/142)
-  Update poster template to display url domain.
+  - Update poster template to display url domain.
 
 ## [1.3.0] - 2023-09-14
 

diff --git a/build/poster-config-develop.json b/build/poster-config-develop.json
@@ -4,8 +4,8 @@
   "id": "01FWJZQ25A1868V63CWYYHQFKQ",
   "description": "Mulighed for at vise plakat indhold.",
   "resources": {
-    "component": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/poster.js?ts=1696848106826",
-    "admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/poster-admin.json?ts=1696848106826",
+    "component": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/poster.js?ts=1697172577053",
+    "admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/poster-admin.json?ts=1697172577053",
     "schema": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/poster-schema.json",
     "assets": [],
     "options": {},

diff --git a/build/poster-config-main.json b/build/poster-config-main.json
@@ -4,8 +4,8 @@
   "id": "01FWJZQ25A1868V63CWYYHQFKQ",
   "description": "Mulighed for at vise plakat indhold.",
   "resources": {
-    "component": "https://raw.githubusercontent.com/os2display/display-templates/main/build/poster.js?ts=1696848106826",
-    "admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/poster-admin.json?ts=1696848106826",
+    "component": "https://raw.githubusercontent.com/os2display/display-templates/main/build/poster.js?ts=1697172577053",
+    "admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/poster-admin.json?ts=1697172577053",
     "schema": "https://raw.githubusercontent.com/os2display/display-templates/main/build/poster-schema.json",
     "assets": [],
     "options": {},

diff --git a/build/poster.js b/build/poster.js
diff --git a/src/poster/poster.js b/src/poster/poster.js
@@ -54,7 +54,7 @@ function Poster({ slide, content, run, slideDone, executionId }) {
     place,
   } = currentEvent ?? {};
 
-  const { configuration = {} } = feed;
+  const { configuration = {} } = feed ?? {};
 
   const {
     overrideTitle = "",
@@ -158,85 +158,89 @@ function Poster({ slide, content, run, slideDone, executionId }) {
   return (
     <>
       {/* TODO: Adjust styling to variables from Theme */}
-      <IntlProvider messages={translations} locale="da" defaultLocale="da">
-        <div className={`template-poster ${showLogo && "with-logo"}`}>
-          <div
-            className="image-area"
-            style={{
-              backgroundImage: `url("${image}")`,
-              ...(show
-                ? { animation: `fade-in ${animationDuration}ms` }
-                : { animation: `fade-out ${animationDuration}ms` }),
-            }}
-          />
-          <div className="header-area">
-            <div className="center">
-              <h1>
-                {!overrideTitle && name}
-                {overrideTitle}
-              </h1>
-              <p className="lead">
-                {!overrideSubTitle && excerpt}
-                {overrideSubTitle}
-              </p>
+      {currentEvent !== null && (
+        <IntlProvider messages={translations} locale="da" defaultLocale="da">
+          <div className={`template-poster ${showLogo && "with-logo"}`}>
+            <div
+              className="image-area"
+              style={{
+                backgroundImage: `url("${image}")`,
+                ...(show
+                  ? { animation: `fade-in ${animationDuration}ms` }
+                  : { animation: `fade-out ${animationDuration}ms` }),
+              }}
+            />
+            <div className="header-area">
+              <div className="center">
+                <h1>
+                  {!overrideTitle && name}
+                  {overrideTitle}
+                </h1>
+                <p className="lead">
+                  {!overrideSubTitle && excerpt}
+                  {overrideSubTitle}
+                </p>
+              </div>
             </div>
-          </div>
-          <div className="info-area">
-            <div className="center">
-              {!hideTime && startDate && (
-                <span>
-                  {singleDayEvent && (
-                    <span>
-                      <div className="date">{formatDate(startDate)}</div>
-                      <div className="date">
-                        {formatTime(startDate)} - {formatTime(endDate)}
-                      </div>
-                    </span>
+            <div className="info-area">
+              <div className="center">
+                {!hideTime && startDate && (
+                  <span>
+                    {singleDayEvent && (
+                      <span>
+                        <div className="date">{formatDate(startDate)}</div>
+                        <div className="date">
+                          {formatTime(startDate)} - {formatTime(endDate)}
+                        </div>
+                      </span>
+                    )}
+                    {/* todo if startdate is not equal to enddate */}
+                    {!singleDayEvent && (
+                      <span>
+                        <div className="date">
+                          {startDate && formatDateNoYear(startDate)} -{" "}
+                          {endDate && formatDate(endDate)}
+                        </div>
+                        <div className="date">
+                          {formatTime(startDate)} - {formatTime(endDate)}
+                        </div>
+                      </span>
+                    )}
+                  </span>
+                )}
+                {place && <p className="place">{place.name}</p>}
+                <p className="ticket">
+                  {!ticketPriceRange && (
+                    <FormattedMessage id="free" defaultMessage="free" />
+                  )}
+                  {ticketPriceRange && (
+                    <>
+                      {!overrideTicketPrice && ticketPriceRange}
+                      {overrideTicketPrice}
+                    </>
+                  )}
+                </p>
+                <>
+                  {readMoreText && <p className="moreinfo">{readMoreText}</p>}
+                  {!overrideReadMoreUrl && url && (
+                    <span className="look-like-link">{getUrlDomain(url)}</span>
                   )}
-                  {/* todo if startdate is not equal to enddate */}
-                  {!singleDayEvent && (
-                    <span>
-                      <div className="date">
-                        {startDate && formatDateNoYear(startDate)} -{" "}
-                        {endDate && formatDate(endDate)}
-                      </div>
-                      <div className="date">
-                        {formatTime(startDate)} - {formatTime(endDate)}
-                      </div>
+                  {overrideReadMoreUrl && (
+                    <span className="look-like-link">
+                      {overrideReadMoreUrl}
                     </span>
                   )}
-                </span>
-              )}
-              {place && <p className="place">{place.name}</p>}
-              <p className="ticket">
-                {!ticketPriceRange && (
-                  <FormattedMessage id="free" defaultMessage="free" />
-                )}
-                {ticketPriceRange && (
-                  <>
-                    {!overrideTicketPrice && ticketPriceRange}
-                    {overrideTicketPrice}
-                  </>
-                )}
-              </p>
-              <>
-                {readMoreText && <p className="moreinfo">{readMoreText}</p>}
-                {!overrideReadMoreUrl && url && (
-                  <span className="look-like-link">{getUrlDomain(url)}</span>
-                )}
-                {overrideReadMoreUrl && (
-                  <span className="look-like-link">{overrideReadMoreUrl}</span>
-                )}
-              </>
+                </>
+              </div>
             </div>
+            {showLogo && (
+              <div className="logo-area">
+                <img src={logoUrl} alt="" />
+              </div>
+            )}
           </div>
-          {showLogo && (
-            <div className="logo-area">
-              <img src={logoUrl} alt="" />
-            </div>
-          )}
-        </div>
-      </IntlProvider>
+        </IntlProvider>
+      )}
 
       <ThemeStyles id={executionId} css={slide?.themeData?.cssStyles} />
     </>