Skip to content

Commit 6ad0377

Browse files
tujtuj
committed
3172: Added orientation select
1 parent 3599a91 commit 6ad0377

File tree

6 files changed

+238
-74
lines changed

6 files changed

+238
-74
lines changed

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

Lines changed: 66 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ 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";
1718

1819
/**
1920
* The shared form component.
@@ -31,7 +32,7 @@ import localStorageKeys from "../util/local-storage-keys";
3132
* @param {Array} props.children The children being passed from parent
3233
* @param {Function} props.handleSaveNoClose Handles form submit with close.
3334
* @returns {object} The form shared by campaigns and playlists.
34-
*/
35+
*/4
3536
function PlaylistCampaignForm({
3637
handleInput,
3738
handleSubmit,
@@ -48,6 +49,22 @@ function PlaylistCampaignForm({
4849
const { t } = useTranslation("common", {
4950
keyPrefix: "playlist-campaign-form",
5051
});
52+
53+
const previewOrientationOptions = [
54+
{
55+
value: "horizontal",
56+
title: t("preview-orientation-landscape"),
57+
key: "horizontal",
58+
},
59+
{
60+
value: "vertical",
61+
title: t("preview-orientation-portrait"),
62+
key: "vertical",
63+
},
64+
];
65+
const [previewOrientation, setPreviewOrientation] = useState(
66+
previewOrientationOptions[0].value
67+
);
5168
const navigate = useNavigate();
5269
const [publishedFromError, setPublishedFromError] = useState(false);
5370
const [publishedToError, setPublishedToError] = useState(false);
@@ -159,7 +176,7 @@ function PlaylistCampaignForm({
159176
{displayPreview && (
160177
<Col
161178
className="responsive-side shadow-sm p-3 mb-3 bg-body rounded me-3 sticky-top"
162-
style={{ top: "20px" }}
179+
style={{ top: "20px", maxWidth: "520px" }}
163180
>
164181
<h2 className="h4">{t("playlist-preview")}</h2>
165182
<div>
@@ -168,27 +185,46 @@ function PlaylistCampaignForm({
168185
variant="info"
169186
className="mt-3"
170187
>
171-
{t("playlist-preview-about")}
188+
{t("playlist-preview-small-about")}
172189
</Alert>
190+
<div className="preview-actions mb-3">
191+
<Select
192+
isRequired
193+
allowNull={false}
194+
onChange={({ target }) =>
195+
setPreviewOrientation(target.value)
196+
}
197+
required
198+
name="preview-orientation"
199+
options={previewOrientationOptions}
200+
className="m-0"
201+
value={previewOrientation}
202+
/>
203+
204+
<Button
205+
variant="outline-secondary"
206+
type="button"
207+
id="preview_slide"
208+
onClick={() =>
209+
setPreviewOverlayVisible(!previewOverlayVisible)
210+
}
211+
>
212+
<FontAwesomeIcon icon={faExpand} className="me-3" />
213+
{t("preview-in-full-screen")}
214+
</Button>
215+
</div>
173216
<Preview
174217
id={idFromUrl(playlist["@id"])}
175218
mode="playlist"
176-
width={480}
177-
height={270}
178-
/>
179-
<Button
180-
variant="secondary"
181-
type="button"
182-
id="preview_slide"
183-
onClick={() =>
184-
setPreviewOverlayVisible(!previewOverlayVisible)
219+
height={previewOrientation === "horizontal" ? 270 : 480}
220+
width={previewOrientation === "horizontal" ? 480 : 270}
221+
simulatedHeight={
222+
previewOrientation === "horizontal" ? 1080 : 1920
185223
}
186-
size="lg"
187-
className="me-3 mt-3"
188-
>
189-
<FontAwesomeIcon icon={faExpand} className="me-3" />{" "}
190-
{t("preview-in-full-screen")}
191-
</Button>
224+
simulatedWidth={
225+
previewOrientation === "horizontal" ? 1920 : 1080
226+
}
227+
/>
192228
</div>
193229
{previewOverlayVisible && (
194230
<div
@@ -198,14 +234,25 @@ function PlaylistCampaignForm({
198234
role="presentation"
199235
className="preview-overlay d-flex justify-content-center align-items-center flex-column"
200236
>
237+
<Preview
238+
id={idFromUrl(playlist["@id"])}
239+
mode="playlist"
240+
height={previewOrientation === "horizontal" ? 540 : 960}
241+
width={previewOrientation === "horizontal" ? 960 : 540}
242+
simulatedHeight={
243+
previewOrientation === "horizontal" ? 1080 : 1920
244+
}
245+
simulatedWidth={
246+
previewOrientation === "horizontal" ? 1920 : 1080
247+
}
248+
/>
201249
<Alert
202250
key="playlist-preview-about"
203251
variant="info"
204252
className="mt-3"
205253
>
206254
{t("playlist-preview-about")}
207255
</Alert>
208-
<Preview id={idFromUrl(playlist["@id"])} mode="playlist" />
209256
</div>
210257
)}
211258
</Col>

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

Lines changed: 63 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ import FormCheckbox from "../util/forms/form-checkbox";
2121
import "./screen-form.scss";
2222
import Preview from "../preview/preview";
2323
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";
2427

2528
/**
2629
* The screen form component.
@@ -62,6 +65,21 @@ function ScreenForm({
6265
});
6366
const [displayPreview, setDisplayPreview] = useState(null);
6467
const [previewOverlayVisible, setPreviewOverlayVisible] = useState(false);
68+
const previewOrientationOptions = [
69+
{
70+
value: "horizontal",
71+
title: t("preview-orientation-landscape"),
72+
key: "horizontal",
73+
},
74+
{
75+
value: "vertical",
76+
title: t("preview-orientation-portrait"),
77+
key: "vertical",
78+
},
79+
];
80+
const [previewOrientation, setPreviewOrientation] = useState(
81+
previewOrientationOptions[0].value
82+
);
6583

6684
/** Check if published is set */
6785
const checkInputsHandleSubmit = () => {
@@ -340,27 +358,55 @@ function ScreenForm({
340358
{displayPreview && (
341359
<Col
342360
className="responsive-side shadow-sm p-3 mb-3 bg-body rounded me-3 sticky-top"
343-
style={{ top: "20px" }}
361+
style={{ top: "20px", maxWidth: "520px" }}
344362
>
363+
<h2 className="h4">{t("preview")}</h2>
345364
<div>
365+
<Alert
366+
key="screen-preview-about"
367+
variant="info"
368+
className="mt-3"
369+
>
370+
{t("preview-small-about")}
371+
</Alert>
372+
<div className="preview-actions mb-3">
373+
<Select
374+
isRequired
375+
allowNull={false}
376+
onChange={({ target }) =>
377+
setPreviewOrientation(target.value)
378+
}
379+
required
380+
name="preview-orientation"
381+
options={previewOrientationOptions}
382+
className="m-0"
383+
value={previewOrientation}
384+
/>
385+
386+
<Button
387+
variant="outline-secondary"
388+
type="button"
389+
id="preview_slide"
390+
onClick={() =>
391+
setPreviewOverlayVisible(!previewOverlayVisible)
392+
}
393+
>
394+
<FontAwesomeIcon icon={faExpand} className="me-3"/>
395+
{t("preview-in-full-screen")}
396+
</Button>
397+
</div>
346398
<Preview
347399
id={idFromUrl(screen["@id"])}
348400
mode="screen"
349-
width={480}
350-
height={270}
351-
/>
352-
<Button
353-
variant="secondary"
354-
type="button"
355-
id="preview_slide"
356-
onClick={() =>
357-
setPreviewOverlayVisible(!previewOverlayVisible)
401+
height={previewOrientation === "horizontal" ? 270 : 480}
402+
width={previewOrientation === "horizontal" ? 480 : 270}
403+
simulatedHeight={
404+
previewOrientation === "horizontal" ? 1080 : 1920
358405
}
359-
size="lg"
360-
className="me-3 mt-3"
361-
>
362-
{t("preview-in-full-screen")}
363-
</Button>
406+
simulatedWidth={
407+
previewOrientation === "horizontal" ? 1920 : 1080
408+
}
409+
/>
364410
</div>
365411
{previewOverlayVisible && (
366412
<div
@@ -370,13 +416,13 @@ function ScreenForm({
370416
role="presentation"
371417
className="preview-overlay d-flex justify-content-center align-items-center flex-column"
372418
>
373-
<Preview id={idFromUrl(screen["@id"])} mode="screen" />
419+
<Preview id={idFromUrl(screen["@id"])} mode="screen"/>
374420
<Alert
375421
key="slide-preview-about"
376422
variant="info"
377423
className="mt-3"
378424
>
379-
{t("slide-preview-about")}
425+
{t("screen-preview-about")}
380426
</Alert>
381427
</div>
382428
)}

0 commit comments

Comments
 (0)