????
Your IP : 3.21.43.104
/**
* WordPress dependencies
*/
const { __ } = wp.i18n;
const { ToggleControl, BaseControl } = wp.components;
export default function ({ state, updateState, className }) {
return (
<div className={className}>
<BaseControl>
<h3>{__("Controls", "presto-player")}</h3>
</BaseControl>
<BaseControl className="presto-player__control--large-play">
<ToggleControl
label={__("Large Play Button", "presto-player")}
help={__(
"Adds a large play button over the top of the player.",
"presto-player"
)}
onChange={(play) => {
updateState({ "play-large": play });
}}
checked={state["play-large"]}
/>
</BaseControl>
<BaseControl className="presto-player__control--rewind">
<ToggleControl
label={__("Rewind", "presto-player")}
help={__(
"Adds a 10 second rewind button to the player.",
"presto-player"
)}
onChange={(rewind) => {
updateState({ rewind });
}}
checked={state.rewind}
/>
</BaseControl>
<BaseControl className="presto-player__control--play">
<ToggleControl
label={__("Small Play Button", "presto-player")}
help={__(
"Adds a small play button to the bottom of the player.",
"presto-player"
)}
onChange={(play) => {
updateState({ play });
}}
checked={state.play}
/>
</BaseControl>
<BaseControl className="presto-player__control--fast-forward">
<ToggleControl
label={__("Fast Forward", "presto-player")}
help={__(
"Adds a 10 second rewind button to the player.",
"presto-player"
)}
onChange={(value) => {
updateState({ "fast-forward": value });
}}
checked={state["fast-forward"]}
/>
</BaseControl>
<BaseControl className="presto-player__control--progress">
<ToggleControl
label={__("Progress Bar", "presto-player")}
help={__("Shows a seekable progress bar.", "presto-player")}
onChange={(progress) => {
updateState({ progress });
}}
checked={state.progress}
/>
</BaseControl>
<BaseControl className="presto-player__control--current-time">
<ToggleControl
label={__("Current Time", "presto-player")}
help={__("Shows the video timestamp.", "presto-player")}
onChange={(value) => {
updateState({ "current-time": value });
}}
checked={state["current-time"]}
/>
</BaseControl>
<BaseControl className="presto-player__control--volume">
<ToggleControl
label={__("Volume", "presto-player")}
help={__("Shows a volume bar.", "presto-player")}
onChange={(value) => {
updateState({ volume: value, mute: value });
}}
checked={state.volume}
/>
</BaseControl>
<BaseControl className="presto-player__control--speed">
<ToggleControl
label={__("Speed", "presto-player")}
help={__("Shows playback speed controls.", "presto-player")}
onChange={(speed) => {
updateState({ speed });
}}
checked={state.speed}
/>
</BaseControl>
<BaseControl className="presto-player__control--pip">
<ToggleControl
label={__("Picture In Picture (HTML5 only)", "presto-player")}
help={__(
"Allows users to dock the player on their screen and watch when using other app on their computer.",
"presto-player"
)}
onChange={(pip) => {
updateState({ pip });
}}
checked={state.pip}
/>
</BaseControl>
<BaseControl className="presto-player__control--fullscreen">
<ToggleControl
label={__("Fullscreen", "presto-player")}
help={__(
"Adds a button to allow the player to be fullscreen.",
"presto-player"
)}
onChange={(fullscreen) => {
updateState({ fullscreen });
}}
checked={state.fullscreen}
/>
</BaseControl>
<BaseControl className="presto-player__control--captions">
<ToggleControl
label={__("Captions", "presto-player")}
help={__("Shows a dedicated caption toggle button.", "presto-player")}
onChange={(value) => {
updateState({ captions: value });
}}
checked={state["captions"]}
/>
</BaseControl>
</div>
);
}