????
Your IP : 3.21.43.104
/**
* WordPress dependencies
*/
const { __ } = wp.i18n;
const {
ToggleControl,
BaseControl,
HorizontalRule,
__experimentalAlignmentMatrixControl: AlignmentMatrixControl,
SelectControl,
} = wp.components;
export default function ({ state, updateState, className }) {
return (
<div className={className}>
<BaseControl>
<h3>{__("Behavior", "presto-player")}</h3>
</BaseControl>
<BaseControl>
<ToggleControl
label={__("Auto-Hide Controls", "presto-player")}
help={__(
"Hide video controls automatically after 2 seconds of no mouse movement.",
"presto-player"
)}
onChange={(auto_hide) => {
updateState({ auto_hide });
}}
checked={state.auto_hide}
/>
</BaseControl>
<BaseControl>
<ToggleControl
label={__("Show Time Elapsed", "presto-player")}
help={__(
"Show the time elapsed or the time remaining for the video on the player. By default, the time remaining is shown.",
"presto-player"
)}
onChange={(show_time_elapsed) => {
updateState({ show_time_elapsed });
}}
checked={state.show_time_elapsed}
/>
</BaseControl>
{/* <BaseControl>
<ToggleControl
label={__("Reset On End", "presto-player")}
help={__(
"Reset the video to the beginning when it completes.",
"presto-player"
)}
onChange={(reset_on_end) => {
updateState({ reset_on_end });
}}
checked={state.reset_on_end}
/>
</BaseControl> */}
<BaseControl>
<ToggleControl
label={__("Save Play Position", "presto-player")}
help={__(
"Saves the user's play position so when they come back to the page they can continue the video from where they left off.",
"presto-player"
)}
onChange={(save_player_position) => {
updateState({ save_player_position });
}}
checked={state.save_player_position}
/>
</BaseControl>
<BaseControl>
<ToggleControl
label={__("Captions On By Default", "presto-player")}
help={__(
"Toggles if captions should be active by default.",
"presto-player"
)}
onChange={(captions_enabled) => {
updateState({ captions_enabled });
}}
checked={state.captions_enabled}
/>
</BaseControl>
<BaseControl>
<ToggleControl
label={__("Focus Mode", "presto-player")}
help={__(
"Play only when tab is visible and video is in viewport.",
"presto-player"
)}
onChange={(play_video_viewport) => {
updateState({ play_video_viewport });
}}
checked={state.play_video_viewport}
/>
</BaseControl>
<BaseControl>
<ToggleControl
label={__("Sticky On Scroll", "presto-player")}
help={__(
"Stick videos to the side of the screen when the page is scrolled and the video is playing.",
"presto-player"
)}
onChange={(sticky_scroll) => {
updateState({ sticky_scroll });
}}
checked={state.sticky_scroll}
/>
</BaseControl>
{!!state.sticky_scroll && (
<>
<BaseControl
label={__(
"Choose a position for your sticky player.",
"presto-player"
)}
>
<AlignmentMatrixControl
value={state.sticky_scroll_position}
onChange={(sticky_scroll_position) => {
updateState({ sticky_scroll_position });
}}
/>
</BaseControl>
</>
)}
<BaseControl>
<SelectControl
label={__("On Video End", "presto-player")}
value={state.on_video_end}
options={[
{
value: "select",
label: __("Select", "presto-player"),
},
{
value: "loop",
label: __("Loop", "presto-player"),
},
{
value: "go-to-start",
label: __("Go to start", "presto-player"),
},
]}
onChange={(on_video_end) => {
updateState({ on_video_end });
}}
/>
</BaseControl>
<HorizontalRule />
<BaseControl />
<BaseControl>
<h3>{__("Youtube", "presto-player")}</h3>
</BaseControl>
<BaseControl>
<ToggleControl
label={__("Hide Youtube UI (Experimental)", "presto-player")}
help={__(
"Hides the Youtube logo and related videos.",
"presto-player"
)}
onChange={(hide_youtube) => {
updateState({ hide_youtube });
}}
checked={state.hide_youtube}
/>
</BaseControl>
<BaseControl>
<ToggleControl
label={__("Lazy Load Videos", "presto-player")}
help={__(
"Improves page loading performance by only loading the video when clicked.",
"presto-player"
)}
onChange={(lazy_load_youtube) => {
updateState({ lazy_load_youtube });
}}
checked={state.lazy_load_youtube}
/>
</BaseControl>
</div>
);
}