import { __ } from '@wordpress/i18n';
|
import {
|
useBlockProps,
|
InspectorControls,
|
MediaUpload,
|
MediaUploadCheck,
|
InnerBlocks,
|
useInnerBlocksProps
|
} from '@wordpress/block-editor';
|
import {
|
PanelBody,
|
Button,
|
ToggleControl,
|
BaseControl,
|
RangeControl,
|
SelectControl
|
} from '@wordpress/components';
|
import './editor.scss';
|
|
const ALLOWED_VIDEO_TYPES = ['video/mp4', 'video/webm', 'video/ogg', 'video/ogv'];
|
|
const INNER_BLOCKS_TEMPLATE = [
|
['core/heading', {
|
level: 1,
|
placeholder: 'Add heading...',
|
textAlign: 'center'
|
}],
|
['core/paragraph', {
|
placeholder: 'Add description...',
|
align: 'center'
|
}],
|
['core/buttons', {
|
layout: { type: 'flex', justifyContent: 'center' }
|
}]
|
];
|
|
export default function Edit({ attributes, setAttributes }) {
|
const {
|
posterId,
|
posterUrl,
|
videoSources,
|
mobileSources,
|
fadeEffect,
|
overlayOpacity,
|
contentAlignment,
|
minHeight
|
} = attributes;
|
|
const blockProps = useBlockProps({
|
className: 'video-cover-editor',
|
style: {
|
minHeight: minHeight ? `${minHeight}px` : undefined
|
}
|
});
|
|
const innerBlocksProps = useInnerBlocksProps(
|
{ className: 'video-cover-content' },
|
{
|
template: INNER_BLOCKS_TEMPLATE,
|
templateLock: false
|
}
|
);
|
|
const onSelectPoster = (media) => {
|
setAttributes({
|
posterId: media.id,
|
posterUrl: media.url
|
});
|
};
|
|
const onSelectVideo = (media, isMobile = false) => {
|
const newSource = {
|
id: media.id,
|
url: media.url,
|
mime: media.mime
|
};
|
|
if (isMobile) {
|
// Check if this format already exists in mobile sources
|
const exists = mobileSources.some(s => s.mime === media.mime);
|
if (!exists) {
|
setAttributes({
|
mobileSources: [...mobileSources, newSource]
|
});
|
}
|
} else {
|
// Check if this format already exists in desktop sources
|
const exists = videoSources.some(s => s.mime === media.mime);
|
if (!exists) {
|
setAttributes({
|
videoSources: [...videoSources, newSource]
|
});
|
}
|
}
|
};
|
|
const removeVideoSource = (index, isMobile = false) => {
|
if (isMobile) {
|
const updated = [...mobileSources];
|
updated.splice(index, 1);
|
setAttributes({ mobileSources: updated });
|
} else {
|
const updated = [...videoSources];
|
updated.splice(index, 1);
|
setAttributes({ videoSources: updated });
|
}
|
};
|
|
const renderVideoSourceList = (sources, isMobile = false) => {
|
if (sources.length === 0) return null;
|
|
return (
|
<ul className="video-source-list">
|
{sources.map((source, index) => (
|
<li key={index} className="video-source-item">
|
<span className="video-source-mime">{source.mime}</span>
|
<Button
|
isDestructive
|
isSmall
|
onClick={() => removeVideoSource(index, isMobile)}
|
>
|
{__('Remove', 'jvb')}
|
</Button>
|
</li>
|
))}
|
</ul>
|
);
|
};
|
|
return (
|
<>
|
<InspectorControls>
|
<PanelBody title={__('Video Settings', 'jvb')} initialOpen={true}>
|
<BaseControl
|
label={__('Poster Image', 'jvb')}
|
help={__('Image shown while video loads', 'jvb')}
|
>
|
<MediaUploadCheck>
|
<MediaUpload
|
onSelect={onSelectPoster}
|
allowedTypes={['image']}
|
value={posterId}
|
render={({ open }) => (
|
<>
|
{posterUrl && (
|
<img
|
src={posterUrl}
|
alt={__('Poster preview', 'jvb')}
|
style={{ maxWidth: '100%', marginBottom: '10px' }}
|
/>
|
)}
|
<Button
|
onClick={open}
|
variant={posterUrl ? 'secondary' : 'primary'}
|
>
|
{posterUrl
|
? __('Change Poster', 'jvb')
|
: __('Select Poster', 'jvb')}
|
</Button>
|
{posterUrl && (
|
<Button
|
isDestructive
|
onClick={() => setAttributes({ posterId: 0, posterUrl: '' })}
|
style={{ marginLeft: '10px' }}
|
>
|
{__('Remove', 'jvb')}
|
</Button>
|
)}
|
</>
|
)}
|
/>
|
</MediaUploadCheck>
|
</BaseControl>
|
|
<BaseControl
|
label={__('Desktop Video Sources', 'jvb')}
|
help={__('Add multiple formats for better browser support', 'jvb')}
|
>
|
{renderVideoSourceList(videoSources, false)}
|
<MediaUploadCheck>
|
<MediaUpload
|
multiple={ true }
|
onSelect={(media) => onSelectVideo(media, false)}
|
allowedTypes={ALLOWED_VIDEO_TYPES}
|
render={({ open }) => (
|
<Button
|
onClick={open}
|
variant="secondary"
|
>
|
{__('Add Desktop Video', 'jvb')}
|
</Button>
|
)}
|
/>
|
</MediaUploadCheck>
|
</BaseControl>
|
|
<BaseControl
|
label={__('Mobile Video Sources (Optional)', 'jvb')}
|
help={__('Smaller videos for mobile devices', 'jvb')}
|
>
|
{renderVideoSourceList(mobileSources, true)}
|
<MediaUploadCheck>
|
<MediaUpload
|
multiple={ true }
|
onSelect={(media) => onSelectVideo(media, true)}
|
allowedTypes={ALLOWED_VIDEO_TYPES}
|
render={({ open }) => (
|
<Button
|
onClick={open}
|
variant="secondary"
|
>
|
{__('Add Mobile Video', 'jvb')}
|
</Button>
|
)}
|
/>
|
</MediaUploadCheck>
|
</BaseControl>
|
|
<ToggleControl
|
label={__('Fade Effect', 'jvb')}
|
help={__('Add fade class to video element', 'jvb')}
|
checked={fadeEffect}
|
onChange={(value) => setAttributes({ fadeEffect: value })}
|
/>
|
</PanelBody>
|
|
<PanelBody title={__('Overlay Settings', 'jvb')} initialOpen={true}>
|
<RangeControl
|
label={__('Overlay Opacity', 'jvb')}
|
help={__('Darken video for better text readability', 'jvb')}
|
value={overlayOpacity}
|
onChange={(value) => setAttributes({ overlayOpacity: value })}
|
min={0}
|
max={100}
|
step={5}
|
/>
|
|
<SelectControl
|
label={__('Content Alignment', 'jvb')}
|
value={contentAlignment}
|
options={[
|
{ label: __('Top Left', 'jvb'), value: 'top-left' },
|
{ label: __('Top Center', 'jvb'), value: 'top-center' },
|
{ label: __('Top Right', 'jvb'), value: 'top-right' },
|
{ label: __('Center Left', 'jvb'), value: 'center-left' },
|
{ label: __('Center', 'jvb'), value: 'center' },
|
{ label: __('Center Right', 'jvb'), value: 'center-right' },
|
{ label: __('Bottom Left', 'jvb'), value: 'bottom-left' },
|
{ label: __('Bottom Center', 'jvb'), value: 'bottom-center' },
|
{ label: __('Bottom Right', 'jvb'), value: 'bottom-right' }
|
]}
|
onChange={(value) => setAttributes({ contentAlignment: value })}
|
/>
|
|
<RangeControl
|
label={__('Minimum Height', 'jvb')}
|
help={__('Minimum height in pixels (leave 0 for auto)', 'jvb')}
|
value={minHeight}
|
onChange={(value) => setAttributes({ minHeight: value })}
|
min={0}
|
max={1000}
|
step={50}
|
/>
|
</PanelBody>
|
</InspectorControls>
|
|
<div {...blockProps}>
|
{posterUrl || videoSources.length > 0 ? (
|
<div className="video-cover-preview">
|
{posterUrl && (
|
<>
|
<img src={posterUrl} alt={__('Video poster', 'jvb')} />
|
{overlayOpacity > 0 && (
|
<div
|
className="video-overlay-preview"
|
style={{ opacity: overlayOpacity / 100 }}
|
/>
|
)}
|
</>
|
)}
|
<div className={`video-cover-content-preview align-${contentAlignment}`}>
|
<div {...innerBlocksProps} />
|
</div>
|
<div className="video-info">
|
<p>
|
{videoSources.length} {__('desktop source(s)', 'jvb')}
|
{mobileSources.length > 0 &&
|
`, ${mobileSources.length} ${__('mobile source(s)', 'jvb')}`
|
}
|
</p>
|
</div>
|
</div>
|
) : (
|
<div className="video-cover-placeholder">
|
<p>{__('Configure video sources in the sidebar →', 'jvb')}</p>
|
</div>
|
)}
|
</div>
|
</>
|
);
|
}
|
