????
Your IP : 3.21.43.104
/** @jsx jsx */
/**
* WordPress dependencies
*/
import { __ } from "@wordpress/i18n";
import {
ToggleControl,
BaseControl,
RangeControl,
TextControl,
Button,
Flex,
TextareaControl,
Notice,
} from "@wordpress/components";
import { useSelect } from "@wordpress/data";
import ChooseProvider from "./parts/ChooseProvider";
import ColorPopup from "../components/ColorPopup";
import { css, jsx } from "@emotion/core";
export default function ({ state, updateState, className }) {
const { email_collection, cta } = state;
const branding = useSelect((select) => {
return select("presto-player/player").branding();
});
const updateEmailState = (updated) => {
updateState({
...state,
email_collection: {
...email_collection,
...updated,
},
});
};
const disableCTA = () => {
updateState({
...state,
cta: {
...cta,
...{ enabled: false },
},
});
};
return (
<div className={className}>
<BaseControl>
<h3>{__("Email Capture", "presto-player")}</h3>
</BaseControl>
<BaseControl className="presto-player__control--large-play">
<ToggleControl
label={__("Enable", "presto-player")}
help={__(
"Show an email collection form and message over your player.",
"presto-player"
)}
onChange={(enabled) => {
updateEmailState({
enabled,
});
}}
checked={email_collection?.enabled}
/>
</BaseControl>
{!!email_collection?.enabled && (
<>
<BaseControl
className="presto-player__control--percentage-watched"
css={css`
padding-left: 8px;
margin-bottom: 34px !important;
.components-range-control__root {
align-items: flex-start;
}
`}
>
<RangeControl
label={__("Display At (Percentage)", "presto-player")}
labelPosition="top"
onChange={(percentage) => {
updateEmailState({
percentage,
});
}}
marks={[
{
value: 0,
label: __("Start", "presto-player"),
},
{
value: 50,
label: __("50% Watched", "presto-player"),
},
{
value: 100,
label: __("End", "presto-player"),
},
]}
shiftStep={5}
value={email_collection?.percentage || 0}
css={css`
.components-range-control__slider {
position: relative !important;
}
`}
/>
</BaseControl>
{cta?.enabled && email_collection?.percentage === cta?.percentage && (
<Notice
css={css`
margin: 0 0 30px 0 !important;
`}
status="warning"
isDismissible={false}
>
{__(
"You already have a Call To Action set display at the same time.",
"presto-player"
)}
<Button
onClick={disableCTA}
isLink
css={css`
margin-top: 10px !important;
`}
>
{__("Disable Call To Action", "presto-player")}
</Button>
</Notice>
)}
<BaseControl className="presto-player__control--large-play">
<ToggleControl
label={__("Allow Skipping", "presto-player")}
help={__("Let the viewer skip", "presto-player")}
onChange={(allow_skip) => {
updateEmailState({
allow_skip,
});
}}
checked={email_collection?.allow_skip}
/>
</BaseControl>
<BaseControl className="presto-player__control--large-play">
<TextareaControl
label={__("Headline", "presto-player")}
help={__("The headline for your form.", "presto-player")}
value={email_collection?.headline}
onChange={(headline) => {
updateEmailState({
headline,
});
}}
/>
</BaseControl>
<BaseControl className="presto-player__control--large-play">
<TextareaControl
label={__("Bottom Text", "presto-player")}
help={__(
"Text displayed below the form. HTML allowed.",
"presto-player"
)}
value={email_collection?.bottom_text}
onChange={(bottom_text) => {
updateEmailState({
bottom_text,
});
}}
/>
</BaseControl>
<BaseControl className="presto-player__control--large-play">
<TextControl
label={__("Play Button Text", "presto-player")}
help={<p>{__("Submit button text", "presto-player")}</p>}
value={email_collection?.button_text}
onChange={(button_text) => updateEmailState({ button_text })}
/>
</BaseControl>
<BaseControl className="presto-player__control--button-color">
<Flex>
<BaseControl.VisualLabel>
{__("Button Color", "presto-player")}
</BaseControl.VisualLabel>
<ColorPopup
color={cta?.button_color || branding?.color}
setColor={(value) =>
updateEmailState({
button_color: value && value.hex,
})
}
/>
</Flex>
</BaseControl>
<BaseControl className="presto-player__control--button-text-color">
<Flex>
<BaseControl.VisualLabel>
{__("Button Text Color", "presto-player")}
</BaseControl.VisualLabel>
<ColorPopup
color={cta?.button_text_color || "#ffffff"}
setColor={(value) =>
updateEmailState({
button_text_color: value && value.hex,
})
}
/>
</Flex>
</BaseControl>
<h3>{__("Integrate", "presto-player")}</h3>
<BaseControl>
<ChooseProvider
updateEmailState={updateEmailState}
options={email_collection}
/>
</BaseControl>
<h3>{__("Style", "presto-player")}</h3>
<BaseControl>
<RangeControl
label={__("Round Corners", "presto-player")}
help={__("Border radius of form elements.", "presto-player")}
value={email_collection?.border_radius || 0}
onChange={(border_radius) => updateEmailState({ border_radius })}
min={0}
max={25}
css={css`
padding-left: 4px;
.components-range-control__root {
align-items: flex-start;
}
`}
/>
</BaseControl>
</>
)}
</div>
);
}