105 lines
2.7 KiB
React
105 lines
2.7 KiB
React
const { __ } = wp.i18n;
|
|
const { compose } = wp.compose;
|
|
const { Component } = wp.element;
|
|
const { BaseControl, Button, TextControl, RangeControl } = wp.components;
|
|
const { MediaUpload, MediaUploadCheck } = wp.editor;
|
|
const { PluginDocumentSettingPanel } = wp.editPost;
|
|
const { withSelect, withDispatch, } = wp.data;
|
|
const { registerPlugin } = wp.plugins;
|
|
|
|
if ( 'sight-projects' === sightVideoSettings.postType ) {
|
|
// Fetch the post meta.
|
|
const applyWithSelect = withSelect( ( select ) => {
|
|
const { getEditedPostAttribute } = select( 'core/editor' );
|
|
|
|
return {
|
|
meta: getEditedPostAttribute( 'meta' ),
|
|
};
|
|
} );
|
|
|
|
// Provide method to update post meta.
|
|
const applyWithDispatch = withDispatch( ( dispatch, { meta } ) => {
|
|
const { editPost } = dispatch( 'core/editor' );
|
|
|
|
return {
|
|
updateMeta( newMeta ) {
|
|
editPost( { meta: { ...meta, ...newMeta } } );
|
|
},
|
|
};
|
|
} );
|
|
|
|
// Create Component.
|
|
class ThemeVideoOptions extends Component {
|
|
render() {
|
|
const {
|
|
meta: {
|
|
sight_post_video_url: sight_post_video_url,
|
|
sight_post_video_bg_start_time: sight_post_video_bg_start_time,
|
|
sight_post_video_bg_end_time: sight_post_video_bg_end_time,
|
|
} = {},
|
|
updateMeta,
|
|
} = this.props;
|
|
|
|
return (
|
|
<PluginDocumentSettingPanel title={__("Video Background", "sight")}>
|
|
<BaseControl>
|
|
<TextControl
|
|
label={__('Local or YouTube URL', 'sight')}
|
|
value={ sight_post_video_url }
|
|
onChange={ ( value ) => {
|
|
updateMeta( { sight_post_video_url: value || '' } );
|
|
} }
|
|
/>
|
|
|
|
<MediaUploadCheck>
|
|
<MediaUpload
|
|
onSelect={ ( media ) => {
|
|
updateMeta( { sight_post_video_url: media.url || '' } );
|
|
} }
|
|
accept="video/mp4"
|
|
allowedTypes={ [ 'video' ] }
|
|
render={ ( { open } ) => (
|
|
<Button isSecondary onClick={ open }>
|
|
{__('Select Video File', "sight")}
|
|
</Button>
|
|
) }
|
|
/>
|
|
</MediaUploadCheck>
|
|
</BaseControl>
|
|
|
|
<RangeControl
|
|
label={__('Start Time (sec)', 'sight')}
|
|
value={ sight_post_video_bg_start_time }
|
|
onChange={ ( value ) => {
|
|
updateMeta( { sight_post_video_bg_start_time: value || 0 } );
|
|
} }
|
|
step={1}
|
|
min={0}
|
|
max={10000}
|
|
/>
|
|
|
|
<RangeControl
|
|
label={__('End Time (sec)', 'sight')}
|
|
value={ sight_post_video_bg_end_time }
|
|
onChange={ ( value ) => {
|
|
updateMeta( { sight_post_video_bg_end_time: value || 0 } );
|
|
} }
|
|
step={1}
|
|
min={0}
|
|
max={10000}
|
|
/>
|
|
</PluginDocumentSettingPanel>
|
|
);
|
|
}
|
|
}
|
|
|
|
// Combine the higher-order components.
|
|
const render = compose( [
|
|
applyWithSelect,
|
|
applyWithDispatch
|
|
] )( ThemeVideoOptions );
|
|
|
|
// Register panel.
|
|
registerPlugin( 'sight-video-options', { icon: false, render } );
|
|
}
|