From 42fa8304ddb811b0f725f245130f70c0f5e86a6c Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Tue, 04 Nov 2025 06:12:02 +0000
Subject: [PATCH] =Refactored LoginManager to be more extensible and configurable, as well as an AjaxRateLimiter
---
src/video/edit.js | 103 ++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 93 insertions(+), 10 deletions(-)
diff --git a/src/video/edit.js b/src/video/edit.js
index e871a44..df46c62 100644
--- a/src/video/edit.js
+++ b/src/video/edit.js
@@ -4,31 +4,63 @@
InspectorControls,
MediaUpload,
MediaUploadCheck,
- InnerBlocks
+ InnerBlocks,
+ useInnerBlocksProps
} from '@wordpress/block-editor';
import {
PanelBody,
Button,
ToggleControl,
- BaseControl
+ 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
+ fadeEffect,
+ overlayOpacity,
+ contentAlignment,
+ minHeight
} = attributes;
const blockProps = useBlockProps({
- className: 'video-cover-editor'
+ 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,
@@ -147,6 +179,7 @@
{renderVideoSourceList(videoSources, false)}
<MediaUploadCheck>
<MediaUpload
+ multiple={ true }
onSelect={(media) => onSelectVideo(media, false)}
allowedTypes={ALLOWED_VIDEO_TYPES}
render={({ open }) => (
@@ -168,6 +201,7 @@
{renderVideoSourceList(mobileSources, true)}
<MediaUploadCheck>
<MediaUpload
+ multiple={ true }
onSelect={(media) => onSelectVideo(media, true)}
allowedTypes={ALLOWED_VIDEO_TYPES}
render={({ open }) => (
@@ -189,13 +223,65 @@
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 ? (
+ {posterUrl || videoSources.length > 0 ? (
<div className="video-cover-preview">
- <img src={posterUrl} alt={__('Video poster', 'jvb')} />
- <div className="video-overlay">
+ {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 &&
@@ -210,9 +296,6 @@
</div>
)}
</div>
- <div className="inner-blocks">
- <InnerBlocks />
- </div>
</>
);
}
--
Gitblit v1.10.0