Skip to content

Commit e3b6dba

Browse files
tujtuj
committed
3172: New preview is only used if previewClient config parameter is set. Otherwise, the old preview is used
1 parent 6ad0377 commit e3b6dba

File tree

4 files changed

+108
-61
lines changed

4 files changed

+108
-61
lines changed

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

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { React, useState } from "react";
1+
import { React, useContext, useState } from "react";
22
import { Alert, Button, Col, Form, Row } from "react-bootstrap";
33
import { useTranslation } from "react-i18next";
44
import { useNavigate } from "react-router-dom";
@@ -14,7 +14,8 @@ import Preview from "../preview/preview";
1414
import idFromUrl from "../util/helpers/id-from-url";
1515
import StickyFooter from "../util/sticky-footer";
1616
import localStorageKeys from "../util/local-storage-keys";
17-
import Select from "../util/forms/select.jsx";
17+
import Select from "../util/forms/select";
18+
import userContext from "../../context/user-context";
1819

1920
/**
2021
* The shared form component.
@@ -32,7 +33,7 @@ import Select from "../util/forms/select.jsx";
3233
* @param {Array} props.children The children being passed from parent
3334
* @param {Function} props.handleSaveNoClose Handles form submit with close.
3435
* @returns {object} The form shared by campaigns and playlists.
35-
*/4
36+
*/
3637
function PlaylistCampaignForm({
3738
handleInput,
3839
handleSubmit,
@@ -49,6 +50,7 @@ function PlaylistCampaignForm({
4950
const { t } = useTranslation("common", {
5051
keyPrefix: "playlist-campaign-form",
5152
});
53+
const { config } = useContext(userContext);
5254

5355
const previewOrientationOptions = [
5456
{
@@ -286,15 +288,17 @@ function PlaylistCampaignForm({
286288
>
287289
{t("save-button-and-close")}
288290
</Button>
289-
<Button
290-
variant="success"
291-
type="button"
292-
onClick={toggleDisplayPreview}
293-
id="toggle_display_preview"
294-
className="margin-right-button"
295-
>
296-
{displayPreview ? t("hide-preview") : t("show-preview")}
297-
</Button>
291+
{config?.previewClient && (
292+
<Button
293+
variant="success"
294+
type="button"
295+
onClick={toggleDisplayPreview}
296+
id="toggle_display_preview"
297+
className="margin-right-button"
298+
>
299+
{displayPreview ? t("hide-preview") : t("show-preview")}
300+
</Button>
301+
)}
298302
</StickyFooter>
299303
</Form>
300304
</>

‎src/components/screen/screen-form.jsx‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import { React, useEffect, useState } from "react";
1+
import { React, useContext, useEffect, useState } from "react";
22
import { Button, Form, Spinner, Alert, Col, Row } from "react-bootstrap";
33
import { useTranslation } from "react-i18next";
44
import { useNavigate } from "react-router-dom";
55
import PropTypes from "prop-types";
66
import { useDispatch } from "react-redux";
7+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
8+
import { faExpand } from "@fortawesome/free-solid-svg-icons";
79
import ContentBody from "../util/content-body/content-body";
810
import FormInput from "../util/forms/form-input";
911
import FormInputArea from "../util/forms/form-input-area";
@@ -21,9 +23,8 @@ import FormCheckbox from "../util/forms/form-checkbox";
2123
import "./screen-form.scss";
2224
import Preview from "../preview/preview";
2325
import StickyFooter from "../util/sticky-footer";
24-
import Select from "../util/forms/select.jsx";
25-
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
26-
import {faExpand} from "@fortawesome/free-solid-svg-icons";
26+
import Select from "../util/forms/select";
27+
import userContext from "../../context/user-context";
2728

2829
/**
2930
* The screen form component.
@@ -52,6 +53,7 @@ function ScreenForm({
5253
screen = null,
5354
}) {
5455
const { t } = useTranslation("common", { keyPrefix: "screen-form" });
56+
const { config } = useContext(userContext);
5557
const navigate = useNavigate();
5658
const dispatch = useDispatch();
5759
const [layoutError, setLayoutError] = useState(false);
@@ -391,7 +393,7 @@ function ScreenForm({
391393
setPreviewOverlayVisible(!previewOverlayVisible)
392394
}
393395
>
394-
<FontAwesomeIcon icon={faExpand} className="me-3"/>
396+
<FontAwesomeIcon icon={faExpand} className="me-3" />
395397
{t("preview-in-full-screen")}
396398
</Button>
397399
</div>
@@ -416,7 +418,7 @@ function ScreenForm({
416418
role="presentation"
417419
className="preview-overlay d-flex justify-content-center align-items-center flex-column"
418420
>
419-
<Preview id={idFromUrl(screen["@id"])} mode="screen"/>
421+
<Preview id={idFromUrl(screen["@id"])} mode="screen" />
420422
<Alert
421423
key="slide-preview-about"
422424
variant="info"
@@ -458,15 +460,17 @@ function ScreenForm({
458460
>
459461
{t("save-button-and-close")}
460462
</Button>
461-
<Button
462-
variant="success"
463-
type="button"
464-
onClick={() => setDisplayPreview(!displayPreview)}
465-
id="toggle_display_preview"
466-
className="margin-right-button"
467-
>
468-
{displayPreview ? t("hide-preview") : t("show-preview")}
469-
</Button>
463+
{config?.previewClient && (
464+
<Button
465+
variant="success"
466+
type="button"
467+
onClick={() => setDisplayPreview(!displayPreview)}
468+
id="toggle_display_preview"
469+
className="margin-right-button"
470+
>
471+
{displayPreview ? t("hide-preview") : t("show-preview")}
472+
</Button>
473+
)}
470474
</StickyFooter>
471475
</Form>
472476
</div>

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

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import "./remote-component-wrapper.scss";
1818
* @param {boolean} props.showPreview Whether to display the preview.
1919
* @param {boolean} props.closeButton Display close button on preview
2020
* @param {Function} props.closeCallback Close button callback on preview
21+
* @param {boolean} props.adjustFontSize Adjust the font size compared to size in full hd.
2122
* @returns {object} The component.
2223
*/
2324
function RemoteComponentWrapper({
@@ -29,12 +30,13 @@ function RemoteComponentWrapper({
2930
closeCallback = () => {},
3031
mediaData = null,
3132
themeData = {},
33+
adjustFontSize = true,
3234
}) {
3335
const { t } = useTranslation("common");
3436
const [remoteComponentSlide, setRemoteComponentSlide] = useState(null);
3537
const [loading, err, Component] = useRemoteComponent(url);
3638
const [runId, setRunId] = useState("");
37-
const [fontSizeEm, setFontSizeEm] = useState(null);
39+
const [fontSizeEm, setFontSizeEm] = useState(1);
3840

3941
/** Create remoteComponentSlide from slide and mediaData */
4042
useEffect(() => {
@@ -85,11 +87,13 @@ function RemoteComponentWrapper({
8587
useEffect(() => {
8688
// eslint-disable-next-line no-undef
8789
const observer = new ResizeObserver((entries) => {
88-
if (entries.length > 0) {
89-
const first = entries[0];
90-
setFontSizeEm(
91-
first.contentRect.width / (orientation === "vertical" ? 1080 : 1920)
92-
);
90+
if (adjustFontSize) {
91+
if (entries.length > 0) {
92+
const first = entries[0];
93+
setFontSizeEm(
94+
first.contentRect.width / (orientation === "vertical" ? 1080 : 1920)
95+
);
96+
}
9397
}
9498
});
9599

@@ -102,6 +106,12 @@ function RemoteComponentWrapper({
102106
};
103107
}, []);
104108

109+
const remoteComponentStyle = {};
110+
111+
if (adjustFontSize) {
112+
remoteComponentStyle["--font-size-base"] = `${fontSizeEm}rem`;
113+
}
114+
105115
return (
106116
<>
107117
{closeButton && (
@@ -120,7 +130,7 @@ function RemoteComponentWrapper({
120130
<div
121131
className={`slide remote-component-content ${orientation}`}
122132
id="EXE-ID-PREVIEW"
123-
style={{ "--font-size-base": `${fontSizeEm}rem` }}
133+
style={remoteComponentStyle}
124134
>
125135
<ErrorBoundary errorText="remote-component.error-boundary-text">
126136
{loading && <div />}
@@ -154,6 +164,7 @@ RemoteComponentWrapper.propTypes = {
154164
showPreview: PropTypes.bool.isRequired,
155165
closeButton: PropTypes.bool,
156166
orientation: PropTypes.string,
167+
adjustFontSize: PropTypes.bool,
157168
};
158169

159170
export default RemoteComponentWrapper;

‎src/components/slide/slide-form.jsx‎

Lines changed: 55 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -436,34 +436,62 @@ function SlideForm({
436436
</>
437437
)}
438438
{previewOverlayVisible && (
439-
<div
440-
onClick={() =>
441-
setPreviewOverlayVisible(!previewOverlayVisible)
442-
}
443-
role="presentation"
444-
className="preview-overlay d-flex justify-content-center align-items-center flex-column"
445-
>
446-
<Alert
447-
key="slide-preview-about"
448-
variant="info"
449-
className="mt-3"
450-
>
451-
{t("slide-preview-about")}
452-
</Alert>
439+
<>
440+
{config?.previewClient && (
441+
<div
442+
onClick={() =>
443+
setPreviewOverlayVisible(!previewOverlayVisible)
444+
}
445+
role="presentation"
446+
className="preview-overlay d-flex justify-content-center align-items-center flex-column"
447+
>
448+
<Alert
449+
key="slide-preview-about"
450+
variant="info"
451+
className="mt-3"
452+
>
453+
{t("slide-preview-about")}
454+
</Alert>
453455

454-
<Preview
455-
id={idFromUrl(slide["@id"])}
456-
mode="slide"
457-
height={previewOrientation === "horizontal" ? 540 : 960}
458-
width={previewOrientation === "horizontal" ? 960 : 540}
459-
simulatedHeight={
460-
previewOrientation === "horizontal" ? 1080 : 1920
461-
}
462-
simulatedWidth={
463-
previewOrientation === "horizontal" ? 1920 : 1080
464-
}
465-
/>
466-
</div>
456+
<Preview
457+
id={idFromUrl(slide["@id"])}
458+
mode="slide"
459+
height={previewOrientation === "horizontal" ? 540 : 960}
460+
width={previewOrientation === "horizontal" ? 960 : 540}
461+
simulatedHeight={
462+
previewOrientation === "horizontal" ? 1080 : 1920
463+
}
464+
simulatedWidth={
465+
previewOrientation === "horizontal" ? 1920 : 1080
466+
}
467+
/>
468+
</div>
469+
)}
470+
{!config?.previewClient && (
471+
<div
472+
onClick={() =>
473+
setPreviewOverlayVisible(!previewOverlayVisible)
474+
}
475+
role="presentation"
476+
className="preview-overlay"
477+
>
478+
{selectedTemplate?.resources?.component && (
479+
<RemoteComponentWrapper
480+
url={selectedTemplate?.resources?.component}
481+
adjustFontSize={false}
482+
slide={slide}
483+
mediaData={mediaData}
484+
themeData={
485+
selectedTheme?.length > 0 ? selectedTheme[0] : 0
486+
}
487+
showPreview
488+
closeButton
489+
closeCallback={() => setPreviewOverlayVisible(false)}
490+
/>
491+
)}
492+
</div>
493+
)}
494+
</>
467495
)}
468496
</Col>
469497
)}

0 commit comments

Comments
 (0)