{
// Set error timestamp to force reload.
- const slide = slides.find(
- (slideElement) => slideElement.executionId === slideWithError.executionId,
+ setSlides((prev) =>
+ prev.map((s) =>
+ s.executionId === slideWithError.executionId
+ ? { ...s, errorTimestamp: new Date().getTime() }
+ : s,
+ ),
);
- slide.errorTimestamp = new Date().getTime();
slideDone(slideWithError);
};
- /**
- * Handle region content event.
- *
- * @param {CustomEvent} event
- * The event. The data is contained in detail.
- */
- function regionContentListener(event) {
- setSlides([...event.detail.slides]);
- }
+ // Receive region slides from context.
+ useEffect(() => {
+ if (!incomingSlides) return;
+
+ setSlides([...incomingSlides].filter((slide) => !slide.invalid));
+ }, [incomingSlides]);
- // Setup event listener for region content.
+ // Notify lifecycle on mount/unmount.
useEffect(() => {
- document.addEventListener(
- `regionContent-${regionId}`,
- regionContentListener,
- );
+ callbacks.current.onRegionReady(regionId);
return function cleanup() {
- // Emit event that region has been removed.
- const event = new CustomEvent("regionRemoved", {
- detail: {
- id: regionId,
- },
- });
- document.dispatchEvent(event);
-
- // Cleanup event listener.
- document.removeEventListener(
- `regionContent-${regionId}`,
- regionContentListener,
- );
+ callbacks.current.onRegionRemoved(regionId);
};
- }, []);
-
- // Notify that region is ready.
- useEffect(() => {
- const event = new CustomEvent("regionReady", {
- detail: {
- id: regionId,
- },
- });
- document.dispatchEvent(event);
- }, [region]);
+ }, [regionId]);
// Make sure current slide is set.
useEffect(() => {
@@ -128,7 +98,7 @@ function TouchRegion({ region }) {
return (
-
+
<>
{currentSlide !== null && (
@@ -149,8 +119,8 @@ function TouchRegion({ region }) {
{displayClose && (
slideDone(currentSlide)}
+ onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") slideDone(currentSlide); }}
role="button"
tabIndex={0}
>
@@ -171,7 +141,7 @@ function TouchRegion({ region }) {
className="touch-button"
key={`button-${slide.executionId}`}
onClick={() => startSlide(slide)}
- onKeyDown={() => startSlide(slide)}
+ onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") startSlide(slide); }}
role="button"
tabIndex={0}
>
diff --git a/assets/client/core/api-query.js b/assets/client/core/api-query.js
new file mode 100644
index 000000000..e26feaa2a
--- /dev/null
+++ b/assets/client/core/api-query.js
@@ -0,0 +1,89 @@
+import logger from "./logger.js";
+import { clientStore } from "../redux/store.js";
+import { clientApi } from "../redux/enhanced-api.ts";
+import defaults from "../util/defaults.js";
+
+/**
+ * Dispatch an RTK Query endpoint and return the unwrapped result.
+ *
+ * @param {string} endpoint The endpoint name.
+ * @param {object} args The endpoint args.
+ * @param {boolean} forceRefetch Whether to bypass RTK Query cache.
+ * @returns {Promise
} The result data.
+ */
+export function query(endpoint, args, forceRefetch = false) {
+ const request = clientStore.dispatch(
+ clientApi.endpoints[endpoint].initiate(args, { forceRefetch }),
+ );
+
+ let timeoutId;
+ const timeout = new Promise((_, reject) => {
+ timeoutId = setTimeout(() => {
+ request.abort();
+ reject(new Error(`Request timeout: ${endpoint}`));
+ }, defaults.queryTimeoutDefault);
+ });
+
+ return Promise.race([request.unwrap(), timeout])
+ .catch((err) => {
+ const cached = clientApi.endpoints[endpoint].select(args)(
+ clientStore.getState(),
+ );
+ if (cached?.data) {
+ logger.warn(`Using cached data for ${endpoint} after fetch failure.`);
+ return cached.data;
+ }
+ throw err;
+ })
+ .finally(() => {
+ clearTimeout(timeoutId);
+ request.unsubscribe();
+ });
+}
+
+/**
+ * Fetch all pages from a paginated endpoint.
+ *
+ * @param {string} endpoint The endpoint name.
+ * @param {object} args The endpoint args (page will be added).
+ * @param {boolean} forceRefetch Whether to bypass RTK Query cache.
+ * @returns {Promise} All hydra:member results concatenated.
+ */
+// Upper bound on pagination — intentionally capped. Content types served to
+// screens should never exceed this number of pages.
+const MAX_PAGES = 50;
+
+export async function queryAllPages(endpoint, args, forceRefetch = false) {
+ let results = [];
+ let page = 1;
+
+ do {
+ try {
+ const responseData = await query(endpoint, { ...args, page }, forceRefetch);
+
+ if (responseData === null || responseData === undefined) {
+ logger.error(`Failed to fetch page ${page} for ${endpoint}`);
+ return results;
+ }
+
+ results = results.concat(responseData["hydra:member"] ?? []);
+
+ if (responseData["hydra:view"]?.["hydra:next"]) {
+ page += 1;
+ } else {
+ break;
+ }
+ } catch (err) {
+ logger.error(
+ `Failed to fetch all pages for ${endpoint}: ${err.message}`,
+ );
+ return results;
+ }
+ } while (page <= MAX_PAGES);
+
+ if (page > MAX_PAGES) {
+ logger.warn(`Reached max page limit (${MAX_PAGES}) for ${endpoint}`);
+ }
+
+ return results;
+}
diff --git a/assets/client/util/app-storage.js b/assets/client/core/app-storage.js
similarity index 100%
rename from assets/client/util/app-storage.js
rename to assets/client/core/app-storage.js
diff --git a/assets/client/core/client-config-loader.js b/assets/client/core/client-config-loader.js
new file mode 100644
index 000000000..d5a2df3b7
--- /dev/null
+++ b/assets/client/core/client-config-loader.js
@@ -0,0 +1,84 @@
+import appStorage from "./app-storage.js";
+import logger from "./logger.js";
+import defaults from "../util/defaults.js";
+
+// Defaults.
+let configData = null;
+
+// Last time the config was fetched.
+let latestFetchTimestamp = 0;
+
+let activePromise = null;
+
+const ClientConfigLoader = {
+ async loadConfig() {
+ if (activePromise) {
+ return activePromise;
+ }
+
+ const nowTimestamp = new Date().getTime();
+
+ // Return cached data directly — no promise, so activePromise stays null
+ // and a future call after the cache interval will trigger a real fetch.
+ if (
+ configData !== null &&
+ latestFetchTimestamp +
+ (configData?.configFetchInterval ?? defaults.configFetchIntervalDefault) >=
+ nowTimestamp
+ ) {
+ return configData;
+ }
+
+ activePromise = new Promise((resolve) => {
+ fetch(`/config/client`)
+ .then((response) => response.json())
+ .then((data) => {
+ latestFetchTimestamp = new Date().getTime();
+ configData = data;
+
+ // Make api endpoint available through localstorage.
+ appStorage.setApiUrl(configData.apiEndpoint);
+
+ resolve(configData);
+ })
+ .catch(() => {
+ if (configData !== null) {
+ resolve(configData);
+ } else {
+ logger.error("Could not load config. Will use default config.");
+
+ // Default config.
+ resolve({
+ apiEndpoint: "/api",
+ dataStrategy: {
+ type: "pull",
+ config: {
+ interval: 30000,
+ },
+ },
+ loginCheckTimeout: 20000,
+ configFetchInterval: 900000,
+ refreshTokenTimeout: 15000,
+ releaseTimestampIntervalTimeout: 600000,
+ colorScheme: {
+ type: "library",
+ lat: 56.0,
+ lng: 10.0,
+ },
+ schedulingInterval: 60000,
+ debug: false,
+ });
+ }
+ })
+ .finally(() => {
+ activePromise = null;
+ });
+ });
+
+ return activePromise;
+ },
+};
+
+Object.freeze(ClientConfigLoader);
+
+export default ClientConfigLoader;
diff --git a/assets/client/util/local-storage-keys.js b/assets/client/core/local-storage-keys.js
similarity index 100%
rename from assets/client/util/local-storage-keys.js
rename to assets/client/core/local-storage-keys.js
diff --git a/assets/client/logger/logger.js b/assets/client/core/logger.js
similarity index 100%
rename from assets/client/logger/logger.js
rename to assets/client/core/logger.js
diff --git a/assets/client/data-sync/api-helper.js b/assets/client/data-sync/api-helper.js
deleted file mode 100644
index eb94e5aef..000000000
--- a/assets/client/data-sync/api-helper.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import logger from "../logger/logger";
-import appStorage from "../util/app-storage";
-
-class ApiHelper {
- endpoint = "";
-
- /**
- * Constructor.
- *
- * @param {string} endpoint The API endpoint.
- */
- constructor(endpoint) {
- this.endpoint = endpoint;
- }
-
- /**
- * Get result from path.
- *
- * @param {string} path Path to the resource.
- * @returns {Promise} Promise with data.
- */
- async getPath(path) {
- if (!path) {
- throw new Error("No path");
- }
-
- let response;
-
- try {
- const url = new URL(window.location.href);
- const previewToken = url.searchParams.get("preview-token");
- const previewTenant = url.searchParams.get("preview-tenant");
-
- logger.log("info", `Fetching: ${this.endpoint + path}`);
-
- const token = appStorage.getToken();
- const tenantKey = appStorage.getTenantKey();
-
- if ((!token || !tenantKey) && (!previewToken || !previewTenant)) {
- logger.error("Token or tenantKey not set.");
-
- return null;
- }
-
- response = await fetch(this.endpoint + path, {
- headers: {
- authorization: `Bearer ${previewToken ?? token}`,
- "Authorization-Tenant-Key": previewTenant ?? tenantKey,
- },
- });
-
- if (response.ok === false) {
- // TODO: Change to a better strategy for triggering reauthenticate.
- if (response.status === 401) {
- document.dispatchEvent(new Event("reauthenticate"));
- }
-
- logger.error(
- `Failed to fetch (status: ${response.status}): ${
- this.endpoint + path
- }`,
- );
-
- return null;
- }
-
- return response.json();
- } catch (err) {
- logger.error(`Failed to fetch: ${this.endpoint + path}`);
-
- return null;
- }
- }
-
- /**
- * Gets all resources from the given path.
- *
- * @param {string} path Path to the resources.
- * @param {object} keys Keys that should be passed along with the result.
- * @returns {Promise<*>} Promise with all resources from a path.
- */
- async getAllResultsFromPath(path, keys = {}) {
- let results = [];
- let nextPath = `${path}`;
- let continueLoop = false;
- let page = 1;
-
- do {
- try {
- // eslint-disable-next-line no-await-in-loop
- const responseData = await this.getPath(nextPath);
- results = results.concat(responseData["hydra:member"]);
- if (results.length < responseData["hydra:totalItems"]) {
- page += 1;
- continueLoop = true;
- nextPath = `${path}?page=${page}`;
- } else {
- continueLoop = false;
- }
- } catch (err) {
- return {};
- }
- } while (continueLoop);
-
- return { path, results, keys };
- }
-}
-
-export default ApiHelper;
diff --git a/assets/client/data-sync/pull-strategy.js b/assets/client/data-sync/pull-strategy.js
deleted file mode 100644
index 5b4ea7eed..000000000
--- a/assets/client/data-sync/pull-strategy.js
+++ /dev/null
@@ -1,487 +0,0 @@
-import isPublished from "../util/isPublished";
-import logger from "../logger/logger";
-import ApiHelper from "./api-helper";
-import { cloneDeep } from "lodash";
-import ClientConfigLoader from "../util/client-config-loader.js";
-
-/**
- * PullStrategy.
- *
- * Handles pull strategy.
- */
-class PullStrategy {
- lastestScreenData;
-
- // Helper for all api calls.
- apiHelper;
-
- // Fetch-interval in ms.
- interval;
-
- // Path to screen that should be loaded data for.
- entryPoint = "";
-
- /**
- * Constructor.
- *
- * @param {object} config
- * The config object.
- */
- constructor(config) {
- this.start = this.start.bind(this);
- this.stop = this.stop.bind(this);
- this.getScreen = this.getScreen.bind(this);
-
- this.interval = config?.interval ?? 60000 * 5;
- this.entryPoint = config.entryPoint;
-
- this.apiHelper = new ApiHelper(config.endpoint ?? "");
- }
-
- /**
- * Gets all campaigns, both from screen and groups.
- *
- * @param {object} screen The screen object to extract campaigns from.
- * @returns {Promise