173: Added preview screen option through query parameters

Author: tuj

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file.
 
+- Added support for previews.
+
 ## [2.0.2] - 2024-04-25
 
 - [#123](https://github.com/os2display/display-client/pull/123)

README.md

@@ -32,6 +32,18 @@ All endpoint should be configured without a trailing slash. The endpoints `apiEn
 left empty if the api is hosted from the root of the same domain as the client. E.g. if the api is at https://example.org and the client is at
 https://example.org/client
 
+## Preview
+
+The client can be started in preview mode by setting the following url parameters:
+```
+preview=<screen|playlist|slide>
+preview-id=<id of entity to preview>
+preview-token=<token for accessing data>
+preview-tenant=<tenant id>
+```
+
+The preview will use the token and tenant for acessing the data from the api.
+
 ## Docker development setup
 
 Start docker setup

src/app.js

@@ -1,5 +1,6 @@
 import jwtDecode from 'jwt-decode';
 import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
 import Screen from './screen';
 import ContentService from './service/contentService';
 import ConfigLoader from './config-loader';
@@ -13,10 +14,12 @@ import idFromPath from './id-from-path';
 /**
  * App component.
  *
- * @returns {object}
- *   The component.
+ * @param {object} props The props.
+ * @param {string} props.preview Enable preview mode.
+ * @param {string} props.previewId Id of the item to preview.
+ * @returns {JSX.Element} The component.
  */
-function App() {
+function App({ preview, previewId }) {
   const fallbackImageUrl = localStorage.getItem(
     localStorageKeys.FALLBACK_IMAGE
   );
@@ -305,7 +308,7 @@ function App() {
     setDisplayFallback(false);
   };
 
-  // ctrl/cmd i will log screen out and refresh
+  // ctrl/cmd+i will log screen out and refresh
   const handleKeyboard = ({ repeat, metaKey, ctrlKey, code }) => {
     if (!repeat && (metaKey || ctrlKey) && code === 'KeyI') {
       localStorage.clear();
@@ -314,41 +317,49 @@ function App() {
   };
 
   useEffect(() => {
-    const currentUrl = new URL(window.location.href);
-
-    // Make sure have releaseVersion and releaseTimestamp set in url parameters.
-    if (
-      !currentUrl.searchParams.has('releaseVersion') ||
-      !currentUrl.searchParams.has('releaseTimestamp')
-    ) {
-      ReleaseLoader.loadConfig().then((release) => {
-        currentUrl.searchParams.set(
-          'releaseTimestamp',
-          release.releaseTimestamp
-        );
-        currentUrl.searchParams.set('releaseVersion', release.releaseVersion);
+    if (preview !== null) {
+      document.addEventListener('screen', screenHandler);
+      document.addEventListener('contentEmpty', contentEmpty);
+      document.addEventListener('contentNotEmpty', contentNotEmpty);
 
-        window.history.replaceState(null, '', currentUrl);
-      });
-    }
+      startContent(previewId);
+    } else {
+      const currentUrl = new URL(window.location.href);
+
+      // Make sure have releaseVersion and releaseTimestamp set in url parameters.
+      if (
+        !currentUrl.searchParams.has('releaseVersion') ||
+        !currentUrl.searchParams.has('releaseTimestamp')
+      ) {
+        ReleaseLoader.loadConfig().then((release) => {
+          currentUrl.searchParams.set(
+            'releaseTimestamp',
+            release.releaseTimestamp
+          );
+          currentUrl.searchParams.set('releaseVersion', release.releaseVersion);
+
+          window.history.replaceState(null, '', currentUrl);
+        });
+      }
 
-    document.addEventListener('screen', screenHandler);
-    document.addEventListener('reauthenticate', reauthenticateHandler);
-    document.addEventListener('contentEmpty', contentEmpty);
-    document.addEventListener('contentNotEmpty', contentNotEmpty);
-    document.addEventListener('keypress', handleKeyboard);
+      document.addEventListener('screen', screenHandler);
+      document.addEventListener('reauthenticate', reauthenticateHandler);
+      document.addEventListener('contentEmpty', contentEmpty);
+      document.addEventListener('contentNotEmpty', contentNotEmpty);
+      document.addEventListener('keypress', handleKeyboard);
 
-    checkLogin();
+      checkLogin();
 
-    checkForUpdates();
+      checkForUpdates();
 
-    ConfigLoader.loadConfig().then((config) => {
-      releaseTimestampIntervalRef.current = setInterval(
-        checkForUpdates,
-        config.releaseTimestampIntervalTimeout ??
-          releaseTimestampIntervalTimeoutDefault
-      );
-    });
+      ConfigLoader.loadConfig().then((config) => {
+        releaseTimestampIntervalRef.current = setInterval(
+          checkForUpdates,
+          config.releaseTimestampIntervalTimeout ??
+            releaseTimestampIntervalTimeoutDefault
+        );
+      });
+    }
 
     return function cleanup() {
       Logger.log('info', 'Unmounting App.');
@@ -374,41 +385,45 @@ function App() {
   }, []);
 
   useEffect(() => {
-    // Append screenId to current url for easier debugging. If errors are logged in the API's standard http log this
-    // makes it easy to see what screen client has made the http call by putting the screen id in the referer http
-    // header.
-    if (screen && screen['@id']) {
-      const url = new URL(window.location.href);
-      url.searchParams.set('screenId', idFromPath(screen['@id']));
-      window.history.replaceState(null, '', url);
-    }
-
-    ConfigLoader.loadConfig().then((config) => {
-      const token = localStorage.getItem(localStorageKeys.API_TOKEN);
-      const tenantKey = localStorage.getItem(localStorageKeys.TENANT_KEY);
-      const tenantId = localStorage.getItem(localStorageKeys.TENANT_ID);
-
-      if (token && tenantKey && tenantId) {
-        // Get fallback image.
-        fetch(`${config.apiEndpoint}/v2/tenants/${tenantId}`, {
-          headers: {
-            authorization: `Bearer ${token}`,
-            'Authorization-Tenant-Key': tenantKey,
-          },
-        })
-          .then((response) => response.json())
-          .then((tenantData) => {
-            if (tenantData.fallbackImageUrl) {
-              localStorage.setItem(
-                localStorageKeys.FALLBACK_IMAGE,
-                tenantData.fallbackImageUrl
-              );
-            }
-          });
+    if (preview === null) {
+      // Append screenId to current url for easier debugging. If errors are logged in the API's standard http log this
+      // makes it easy to see what screen client has made the http call by putting the screen id in the referer http
+      // header.
+      if (screen && screen['@id']) {
+        const url = new URL(window.location.href);
+        url.searchParams.set('screenId', idFromPath(screen['@id']));
+        window.history.replaceState(null, '', url);
       }
 
-      setDebug(config?.debug ?? false);
-    });
+      ConfigLoader.loadConfig().then((config) => {
+        const token = localStorage.getItem(localStorageKeys.API_TOKEN);
+        const tenantKey = localStorage.getItem(localStorageKeys.TENANT_KEY);
+        const tenantId = localStorage.getItem(localStorageKeys.TENANT_ID);
+
+        if (token && tenantKey && tenantId) {
+          // Get fallback image.
+          fetch(`${config.apiEndpoint}/v2/tenants/${tenantId}`, {
+            headers: {
+              authorization: `Bearer ${token}`,
+              'Authorization-Tenant-Key': tenantKey,
+            },
+          })
+            .then((response) => response.json())
+            .then((tenantData) => {
+              if (tenantData.fallbackImageUrl) {
+                localStorage.setItem(
+                  localStorageKeys.FALLBACK_IMAGE,
+                  tenantData.fallbackImageUrl
+                );
+              }
+            });
+        }
+
+        setDebug(config?.debug ?? false);
+      });
+    } else {
+      setDebug(false);
+    }
   }, [screen]);
 
   return (
@@ -430,4 +445,14 @@ function App() {
   );
 }
 
+App.defaultProps = {
+  preview: null,
+  previewId: null,
+};
+
+App.propTypes = {
+  preview: PropTypes.string,
+  previewId: PropTypes.string,
+};
+
 export default App;

src/data-sync/api-helper.js

@@ -27,15 +27,19 @@ class ApiHelper {
     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 = localStorage.getItem(localStorageKeys.API_TOKEN) ?? '';
       const tenantKey = localStorage.getItem(localStorageKeys.TENANT_KEY) ?? '';
 
       response = await fetch(this.endpoint + path, {
         headers: {
-          authorization: `Bearer ${token}`,
-          'Authorization-Tenant-Key': tenantKey,
+          authorization: `Bearer ${previewToken ?? token}`,
+          'Authorization-Tenant-Key': previewTenant ?? tenantKey,
         },
       });
 

src/index.js

@@ -2,11 +2,11 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './app';
 
+const url = new URL(window.location.href);
+const preview = url.searchParams.get('preview');
+const previewId = url.searchParams.get('preview-id');
+
 const container = document.getElementById('root');
 const root = createRoot(container);
 
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+root.render(<App preview={preview} previewId={previewId} />);

src/service/contentService.js

@@ -81,15 +81,14 @@ class ContentService {
 
     this.stopSyncHandler();
 
+    Logger.log(
+      'info',
+      `Event received: Start data synchronization from ${data?.screenPath}`
+    );
     if (data?.screenPath) {
-      Logger.log(
-        'info',
-        `Event received: Start data synchronization from ${data.screenPath}`
-      );
       this.startSyncing(data.screenPath);
     } else {
-      Logger.log('info', 'Event received: Start data synchronization');
-      this.startSyncing();
+      Logger.log('error', 'Error: screenPath not set.');
     }
   }