From 48136802e9f6f99c79a26c715ad3492cb990fe4e Mon Sep 17 00:00:00 2001 From: Troels Ugilt Jensen <6103205+tuj@users.noreply.github.com> Date: Tue, 14 May 2024 12:31:37 +0200 Subject: [PATCH 01/27] 173: Added preview component that iframes screen client into admin --- CHANGELOG.md | 2 + src/components/preview.jsx | 58 +++++++++++++++++++++++++++ src/components/screen/screen-form.jsx | 21 ++++++++++ src/translations/da/common.json | 6 ++- 4 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 src/components/preview.jsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 43f3932c..b2dd4e9b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file. ## [Unreleased] +- Adds screen preview by iframing screen client into admin. + ## [2.0.2] - 2024-04-25 - [#242](https://github.com/os2display/display-admin-client/pull/242) diff --git a/src/components/preview.jsx b/src/components/preview.jsx new file mode 100644 index 00000000..f9c181ba --- /dev/null +++ b/src/components/preview.jsx @@ -0,0 +1,58 @@ +import { React, JSX, useEffect, useState } from "react"; +import PropTypes from "prop-types"; +import { useTranslation } from "react-i18next"; + +/** + * The preview component. + * + * @param {object} props The props. + * @param {string} props.id The id to preview. + * @param {string} props.mode The mode: screen, playlist, slide + * @returns {JSX.Element} The preview component + */ +function Preview({ id, mode }) { + const { t } = useTranslation("common", { keyPrefix: "preview" }); + + const [previewClientUrl, setPreviewClientUrl] = useState(null); + + useEffect(() => { + // TODO: Get base from config. + const base = "https://display-client.local.itkdev.dk/"; + + const urlSearchParams = new URLSearchParams(); + urlSearchParams.set("preview", mode); + urlSearchParams.set("preview-id", id); + urlSearchParams.set("preview-token", localStorage.getItem("api-token")); + const tenantEntry = localStorage.getItem("selected-tenant"); + urlSearchParams.set("preview-tenant", JSON.parse(tenantEntry).tenantKey); + + setPreviewClientUrl(`${base}?${urlSearchParams}`); + }, []); + + return ( + <> + {typeof previewClientUrl === "string" && ( +