????
Your IP : 3.21.43.104
/**
* WordPress dependencies
*/
const { __ } = wp.i18n;
const {
ToggleControl,
Flex,
Button,
BaseControl,
RangeControl,
TextControl,
SelectControl,
TextareaControl,
} = wp.components;
const { useEffect, useState } = wp.element;
const { useSelect } = wp.data;
import ColorPopup from "../components/ColorPopup";
import UrlSelect from "../components/UrlSelect";
import YoutubeChannelId from "./parts/YoutubeChannelId";
import { css, jsx } from "@emotion/core";
export default function ({ state, updateState, className, value, setValue }) {
const { action_bar } = state;
const [editYoutube, setEditYoutube] = useState(false);
const branding = useSelect((select) => {
return select("presto-player/player").branding();
});
const youtube = useSelect((select) => {
return select("presto-player/player").youtube();
});
const updateActionBar = (updated) => {
updateState({
...state,
action_bar: {
...action_bar,
...updated,
},
});
};
useEffect(() => {
if (!action_bar?.text) {
updateActionBar({
text: "Like this?",
});
}
if (!action_bar?.button_type) {
updateActionBar({
button_type: "custom",
});
}
if (!action_bar?.button_text) {
updateActionBar({
button_text: "Click Here",
});
}
}, [state]);
const renderYoutubeChannelForm = () => {
if (action_bar?.button_type !== "youtube") {
return;
}
return editYoutube ? (
<YoutubeChannelId
onClose={() => setEditYoutube(false)}
value={value}
setValue={setValue}
/>
) : (
<div>
<Button
isSecondary
onClick={(e) => {
e.preventDefault();
setEditYoutube(true);
}}
>
{youtube?.channel_id
? __("Update Youtube Channel Id", "presto-player")
: __("Add Youtube Channel Id", "presto-player")}
</Button>
<br />
<br />
<br />
</div>
);
};
return (
<div className={className}>
<BaseControl>
<h3>{__("Action Bar", "presto-player")}</h3>
</BaseControl>
<BaseControl className="presto-player__control--large-play">
<ToggleControl
label={__("Enable", "presto-player")}
help={__(
"Show an action bar below your player while it's playing.",
"presto-player"
)}
onChange={(enabled) => {
updateActionBar({
enabled,
});
}}
checked={action_bar?.enabled}
/>
</BaseControl>
{!!action_bar?.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_start) => {
updateActionBar({
percentage_start,
});
}}
marks={[
{
value: 0,
label: __("Start", "presto-player"),
},
{
value: 50,
label: __("50% Watched", "presto-player"),
},
{
value: 100,
label: __("End", "presto-player"),
},
]}
shiftStep={5}
value={action_bar?.percentage_start || 0}
css={css`
.components-range-control__slider {
position: relative !important;
}
`}
/>
</BaseControl>
<BaseControl className="presto-player__control--large-play">
<TextareaControl
label={__("Text", "presto-player")}
help={__("Action bar text.", "presto-player")}
value={action_bar?.text}
onChange={(text) =>
updateActionBar({
text,
})
}
/>
</BaseControl>
<BaseControl className="presto-player__control--large-play">
<Flex>
<BaseControl.VisualLabel>
{__("Action Bar Background", "presto-player")}
</BaseControl.VisualLabel>
<ColorPopup
color={action_bar?.background_color || "#1d1d1d"}
setColor={(value) =>
updateActionBar({
background_color: value && value.hex,
})
}
/>
</Flex>
</BaseControl>
<BaseControl>
<h3>{__("Button", "presto-player")}</h3>
</BaseControl>
<BaseControl className="presto-player__control--button-type">
<SelectControl
label={__("Button Type", "presto-player")}
value={action_bar?.button_type}
options={[
{
value: "custom",
label: __("Custom", "presto-player"),
},
{
value: "youtube",
label: __("YouTube Subscribe", "presto-player"),
},
{
value: "none",
label: __("None", "presto-player"),
},
]}
onChange={(button_type) =>
updateActionBar({
button_type,
})
}
/>
</BaseControl>
{action_bar?.button_type === "youtube" && youtube?.channel_id && (
<ToggleControl
label={__("Show Count", "presto-player")}
help={__("Show your follower count.", "presto-player")}
onChange={(button_count) => {
updateActionBar({
button_count,
});
}}
checked={action_bar?.button_count}
/>
)}
{renderYoutubeChannelForm()}
{action_bar?.button_type === "custom" && (
<div>
<BaseControl className="presto-player__control--button-text">
<TextControl
label={__("Button Text", "presto-player")}
help={<p>{__("Submit button text", "presto-player")}</p>}
value={action_bar?.button_text}
onChange={(button_text) => updateActionBar({ button_text })}
/>
</BaseControl>
<BaseControl className="presto-player__control--button-text">
<BaseControl.VisualLabel>
<p> {__("Button Link", "presto-player")}</p>
</BaseControl.VisualLabel>
<UrlSelect
setSettings={(val) => {
updateActionBar({
button_link: val,
});
}}
settings={action_bar?.button_link || {}}
/>
</BaseControl>
<BaseControl className="presto-player__control--button-radius">
<RangeControl
label={__("Round Corners", "presto-player")}
help={__("Border radius of the button", "presto-player")}
value={action_bar?.button_radius || 0}
onChange={(button_radius) =>
updateActionBar({ button_radius })
}
min={0}
max={25}
/>
</BaseControl>
<BaseControl className="presto-player__control--button-color">
<Flex>
<BaseControl.VisualLabel>
{__("Button Color", "presto-player")}
</BaseControl.VisualLabel>
<ColorPopup
color={action_bar?.button_color || branding?.color}
setColor={(value) =>
updateActionBar({
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={action_bar?.button_text_color || "#ffffff"}
setColor={(value) =>
updateActionBar({
button_text_color: value && value.hex,
})
}
/>
</Flex>
</BaseControl>
</div>
)}
</>
)}
</div>
);
}