3172: New preview is only used if previewClient config parameter is s…

…et. Otherwise, the old preview is used

src/components/playlist/playlist-campaign-form.jsx

@@ -1,4 +1,4 @@
-import { React, useState } from "react";
+import { React, useContext, useState } from "react";
 import { Alert, Button, Col, Form, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
@@ -14,7 +14,8 @@ import Preview from "../preview/preview";
 import idFromUrl from "../util/helpers/id-from-url";
 import StickyFooter from "../util/sticky-footer";
 import localStorageKeys from "../util/local-storage-keys";
-import Select from "../util/forms/select.jsx";
+import Select from "../util/forms/select";
+import userContext from "../../context/user-context";
 
 /**
  * The shared form component.
@@ -32,7 +33,7 @@ import Select from "../util/forms/select.jsx";
  * @param {Array} props.children The children being passed from parent
  * @param {Function} props.handleSaveNoClose Handles form submit with close.
  * @returns {object} The form shared by campaigns and playlists.
- */4
+ */
 function PlaylistCampaignForm({
   handleInput,
   handleSubmit,
@@ -49,6 +50,7 @@ function PlaylistCampaignForm({
   const { t } = useTranslation("common", {
     keyPrefix: "playlist-campaign-form",
   });
+  const { config } = useContext(userContext);
 
   const previewOrientationOptions = [
     {
@@ -286,15 +288,17 @@ function PlaylistCampaignForm({
           >
             {t("save-button-and-close")}
           </Button>
-          <Button
-            variant="success"
-            type="button"
-            onClick={toggleDisplayPreview}
-            id="toggle_display_preview"
-            className="margin-right-button"
-          >
-            {displayPreview ? t("hide-preview") : t("show-preview")}
-          </Button>
+          {config?.previewClient && (
+            <Button
+              variant="success"
+              type="button"
+              onClick={toggleDisplayPreview}
+              id="toggle_display_preview"
+              className="margin-right-button"
+            >
+              {displayPreview ? t("hide-preview") : t("show-preview")}
+            </Button>
+          )}
         </StickyFooter>
       </Form>
     </>

src/components/screen/screen-form.jsx

@@ -1,9 +1,11 @@
-import { React, useEffect, useState } from "react";
+import { React, useContext, useEffect, useState } from "react";
 import { Button, Form, Spinner, Alert, Col, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
 import { useDispatch } from "react-redux";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faExpand } from "@fortawesome/free-solid-svg-icons";
 import ContentBody from "../util/content-body/content-body";
 import FormInput from "../util/forms/form-input";
 import FormInputArea from "../util/forms/form-input-area";
@@ -21,9 +23,8 @@ import FormCheckbox from "../util/forms/form-checkbox";
 import "./screen-form.scss";
 import Preview from "../preview/preview";
 import StickyFooter from "../util/sticky-footer";
-import Select from "../util/forms/select.jsx";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faExpand} from "@fortawesome/free-solid-svg-icons";
+import Select from "../util/forms/select";
+import userContext from "../../context/user-context";
 
 /**
  * The screen form component.
@@ -52,6 +53,7 @@ function ScreenForm({
   screen = null,
 }) {
   const { t } = useTranslation("common", { keyPrefix: "screen-form" });
+  const { config } = useContext(userContext);
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const [layoutError, setLayoutError] = useState(false);
@@ -391,7 +393,7 @@ function ScreenForm({
                       setPreviewOverlayVisible(!previewOverlayVisible)
                     }
                   >
-                    <FontAwesomeIcon icon={faExpand} className="me-3"/>
+                    <FontAwesomeIcon icon={faExpand} className="me-3" />
                     {t("preview-in-full-screen")}
                   </Button>
                 </div>
@@ -416,7 +418,7 @@ function ScreenForm({
                   role="presentation"
                   className="preview-overlay d-flex justify-content-center align-items-center flex-column"
                 >
-                  <Preview id={idFromUrl(screen["@id"])} mode="screen"/>
+                  <Preview id={idFromUrl(screen["@id"])} mode="screen" />
                   <Alert
                     key="slide-preview-about"
                     variant="info"
@@ -458,15 +460,17 @@ function ScreenForm({
           >
             {t("save-button-and-close")}
           </Button>
-          <Button
-            variant="success"
-            type="button"
-            onClick={() => setDisplayPreview(!displayPreview)}
-            id="toggle_display_preview"
-            className="margin-right-button"
-          >
-            {displayPreview ? t("hide-preview") : t("show-preview")}
-          </Button>
+          {config?.previewClient && (
+            <Button
+              variant="success"
+              type="button"
+              onClick={() => setDisplayPreview(!displayPreview)}
+              id="toggle_display_preview"
+              className="margin-right-button"
+            >
+              {displayPreview ? t("hide-preview") : t("show-preview")}
+            </Button>
+          )}
         </StickyFooter>
       </Form>
     </div>

src/components/slide/preview/remote-component-wrapper.jsx

@@ -18,6 +18,7 @@ import "./remote-component-wrapper.scss";
  * @param {boolean} props.showPreview Whether to display the preview.
  * @param {boolean} props.closeButton Display close button on preview
  * @param {Function} props.closeCallback Close button callback on preview
+ * @param {boolean} props.adjustFontSize Adjust the font size compared to size in full hd.
  * @returns {object} The component.
  */
 function RemoteComponentWrapper({
@@ -29,12 +30,13 @@ function RemoteComponentWrapper({
   closeCallback = () => {},
   mediaData = null,
   themeData = {},
+  adjustFontSize = true,
 }) {
   const { t } = useTranslation("common");
   const [remoteComponentSlide, setRemoteComponentSlide] = useState(null);
   const [loading, err, Component] = useRemoteComponent(url);
   const [runId, setRunId] = useState("");
-  const [fontSizeEm, setFontSizeEm] = useState(null);
+  const [fontSizeEm, setFontSizeEm] = useState(1);
 
   /** Create remoteComponentSlide from slide and mediaData */
   useEffect(() => {
@@ -85,11 +87,13 @@ function RemoteComponentWrapper({
   useEffect(() => {
     // eslint-disable-next-line no-undef
     const observer = new ResizeObserver((entries) => {
-      if (entries.length > 0) {
-        const first = entries[0];
-        setFontSizeEm(
-          first.contentRect.width / (orientation === "vertical" ? 1080 : 1920)
-        );
+      if (adjustFontSize) {
+        if (entries.length > 0) {
+          const first = entries[0];
+          setFontSizeEm(
+            first.contentRect.width / (orientation === "vertical" ? 1080 : 1920)
+          );
+        }
       }
     });
 
@@ -102,6 +106,12 @@ function RemoteComponentWrapper({
     };
   }, []);
 
+  const remoteComponentStyle = {};
+
+  if (adjustFontSize) {
+    remoteComponentStyle["--font-size-base"] = `${fontSizeEm}rem`;
+  }
+
   return (
     <>
       {closeButton && (
@@ -120,7 +130,7 @@ function RemoteComponentWrapper({
         <div
           className={`slide remote-component-content ${orientation}`}
           id="EXE-ID-PREVIEW"
-          style={{ "--font-size-base": `${fontSizeEm}rem` }}
+          style={remoteComponentStyle}
         >
           <ErrorBoundary errorText="remote-component.error-boundary-text">
             {loading && <div />}
@@ -154,6 +164,7 @@ RemoteComponentWrapper.propTypes = {
   showPreview: PropTypes.bool.isRequired,
   closeButton: PropTypes.bool,
   orientation: PropTypes.string,
+  adjustFontSize: PropTypes.bool,
 };
 
 export default RemoteComponentWrapper;

src/components/slide/slide-form.jsx

@@ -436,34 +436,62 @@ function SlideForm({
                 </>
               )}
               {previewOverlayVisible && (
-                <div
-                  onClick={() =>
-                    setPreviewOverlayVisible(!previewOverlayVisible)
-                  }
-                  role="presentation"
-                  className="preview-overlay d-flex justify-content-center align-items-center flex-column"
-                >
-                  <Alert
-                    key="slide-preview-about"
-                    variant="info"
-                    className="mt-3"
-                  >
-                    {t("slide-preview-about")}
-                  </Alert>
+                <>
+                  {config?.previewClient && (
+                    <div
+                      onClick={() =>
+                        setPreviewOverlayVisible(!previewOverlayVisible)
+                      }
+                      role="presentation"
+                      className="preview-overlay d-flex justify-content-center align-items-center flex-column"
+                    >
+                      <Alert
+                        key="slide-preview-about"
+                        variant="info"
+                        className="mt-3"
+                      >
+                        {t("slide-preview-about")}
+                      </Alert>
 
-                  <Preview
-                    id={idFromUrl(slide["@id"])}
-                    mode="slide"
-                    height={previewOrientation === "horizontal" ? 540 : 960}
-                    width={previewOrientation === "horizontal" ? 960 : 540}
-                    simulatedHeight={
-                      previewOrientation === "horizontal" ? 1080 : 1920
-                    }
-                    simulatedWidth={
-                      previewOrientation === "horizontal" ? 1920 : 1080
-                    }
-                  />
-                </div>
+                      <Preview
+                        id={idFromUrl(slide["@id"])}
+                        mode="slide"
+                        height={previewOrientation === "horizontal" ? 540 : 960}
+                        width={previewOrientation === "horizontal" ? 960 : 540}
+                        simulatedHeight={
+                          previewOrientation === "horizontal" ? 1080 : 1920
+                        }
+                        simulatedWidth={
+                          previewOrientation === "horizontal" ? 1920 : 1080
+                        }
+                      />
+                    </div>
+                  )}
+                  {!config?.previewClient && (
+                    <div
+                      onClick={() =>
+                        setPreviewOverlayVisible(!previewOverlayVisible)
+                      }
+                      role="presentation"
+                      className="preview-overlay"
+                    >
+                      {selectedTemplate?.resources?.component && (
+                        <RemoteComponentWrapper
+                          url={selectedTemplate?.resources?.component}
+                          adjustFontSize={false}
+                          slide={slide}
+                          mediaData={mediaData}
+                          themeData={
+                            selectedTheme?.length > 0 ? selectedTheme[0] : 0
+                          }
+                          showPreview
+                          closeButton
+                          closeCallback={() => setPreviewOverlayVisible(false)}
+                        />
+                      )}
+                    </div>
+                  )}
+                </>
               )}
             </Col>
           )}