{headerText}
-{headerText}
+
+
);
}
diff --git a/src/components/groups/group-edit.jsx b/src/components/groups/group-edit.jsx
index baaec894..7009f08f 100644
--- a/src/components/groups/group-edit.jsx
+++ b/src/components/groups/group-edit.jsx
@@ -1,7 +1,6 @@
import { React, useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
-
import {
useGetV2ScreenGroupsByIdQuery,
usePutV2ScreenGroupsByIdMutation,
@@ -103,7 +102,7 @@ function GroupEdit() {
};
return (
- <>
+
{formStateObject && (
);
}
diff --git a/src/components/groups/groups-list.jsx b/src/components/groups/groups-list.jsx
index 07f99a79..1031a790 100644
--- a/src/components/groups/groups-list.jsx
+++ b/src/components/groups/groups-list.jsx
@@ -125,7 +125,7 @@ function GroupsList() {
}, [groupsGetError]);
return (
- <>
+ {t("header")}
@@ -233,7 +233,7 @@ function MediaList({ fromModal = false, multiple = true }) { currentPage={page} onPageChange={updateUrlAndChangePage} /> - +{t("playlist-form.schedule-header")}
+{t("schedule-header")}
{t("playlist-form.share-playlist")}
+{t("share-playlist")}
+
+
+ )}
+
+ );
+}
+
+Preview.propTypes = {
+ id: PropTypes.string.isRequired,
+ mode: PropTypes.string.isRequired,
+ width: PropTypes.number,
+ height: PropTypes.number,
+ simulatedWidth: PropTypes.number,
+ simulatedHeight: PropTypes.number,
+};
+
+export default Preview;
diff --git a/src/components/screen/screen-form.jsx b/src/components/screen/screen-form.jsx
index 0c702c3b..87d36a95 100644
--- a/src/components/screen/screen-form.jsx
+++ b/src/components/screen/screen-form.jsx
@@ -1,11 +1,12 @@
-import { React, useEffect, useState } from "react";
-import { Button, Form, Spinner, Alert } from "react-bootstrap";
+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 ContentFooter from "../util/content-footer/content-footer";
import FormInput from "../util/forms/form-input";
import FormInputArea from "../util/forms/form-input-area";
import SelectGroupsTable from "../util/multi-and-table/select-groups-table";
@@ -20,6 +21,10 @@ import {
import { displayError } from "../util/list/toast-component/display-toast";
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";
+import userContext from "../../context/user-context";
/**
* The screen form component.
@@ -48,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);
@@ -59,11 +65,29 @@ function ScreenForm({
itemsPerPage: 20,
order: { createdAt: "desc" },
});
+ const [displayPreview, setDisplayPreview] = useState(null);
+ const [previewOverlayVisible, setPreviewOverlayVisible] = useState(false);
+ const previewOrientationOptions = [
+ {
+ value: "horizontal",
+ title: t("preview-orientation-landscape"),
+ key: "horizontal",
+ },
+ {
+ value: "vertical",
+ title: t("preview-orientation-portrait"),
+ key: "vertical",
+ },
+ ];
+ const [previewOrientation, setPreviewOrientation] = useState(
+ previewOrientationOptions[0].value
+ );
/** Check if published is set */
const checkInputsHandleSubmit = () => {
setLayoutError(false);
let submit = true;
+
if (!selectedLayout) {
displayError(t("remember-layout-error"));
setLayoutError(true);
@@ -171,7 +195,7 @@ function ScreenForm({
};
return (
- <>
+
{isLoading && (