/**
* WordPress dependencies
*/
import { useBlockProps } from "@wordpress/block-editor";
import attributes from "./attributes";
const deprecated = [
{
attributes: { ...attributes },
supports: {
anchor: true,
},
save: (props) => {
const { attributes } = props;
const {
resOption,
blockId,
blockMeta,
videoConfig,
showBar,
videoURL,
videoOptions,
placeholderImage,
placeholderPlayIconURL,
stickyPosition,
imageOverlay,
previewImage,
lightboxPlayIcon,
customPlayIcon,
customPlayIconURL,
classHook,
lightboxPlayIconType,
lightboxPlayIconlib,
customPlayIconlib,
placeholderCustomPlayIconType,
stickyVisibilityOption,
TABstickyVisibilityOption,
MOBstickyVisibilityOption,
showDownload,
} = attributes;
return (
<div {...useBlockProps.save()}>
<div className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}>
<div className={`eb-advanced-video-wrapper ${blockId} ${videoOptions}`} data-id={blockId}>
{videoOptions != "lightbox" && (
<div className={`eb-player-wrapper ${blockId}`}>
<div
className={`eb-player-option ${videoOptions} ${stickyPosition}`}
data-id={blockId}
data-url={videoURL}
data-option={videoOptions}
data-controls={showBar}
data-loop={videoConfig.loop}
data-muted={videoConfig.muted}
data-playing={videoConfig.autoplay}
data-overlay={imageOverlay}
data-light={previewImage && previewImage.length > 0 ? previewImage : false}
data-customPlayIconType={placeholderCustomPlayIconType}
data-customPlayIconLib={customPlayIconlib}
data-customPlayIcon={customPlayIcon}
data-playicon={
customPlayIconURL && customPlayIconURL.length > 0 ? customPlayIconURL : null
}
data-stickyVisibility={stickyVisibilityOption}
data-stickyVisibilityTAB={TABstickyVisibilityOption}
data-stickyVisibilityMOB={MOBstickyVisibilityOption}
data-download={showDownload}
></div>
</div>
)}
{videoOptions === "lightbox" && (
<>
<div
id={`myBtn-${blockId}`}
className="player-placeholder"
style={{
backgroundImage: "url( " + placeholderImage + ")",
}}
>
{lightboxPlayIcon && (
<>
{lightboxPlayIconType == "icon" && <i className={lightboxPlayIconlib} />}
{lightboxPlayIconType == "image" && placeholderPlayIconURL && (
<img src={placeholderPlayIconURL} alt="" />
)}
</>
)}
</div>
<div id={`eb-modal-${blockId}`} className="eb-modal-player">
<div className="eb-player-wrapper">
<span id={`close-${blockId}`} className="eb-modal-close">
×
</span>
<div
className={`eb-player-option ${videoOptions}`}
data-id={blockId}
data-url={videoURL}
data-option={videoOptions}
data-loop={videoConfig.loop}
data-muted={videoConfig.muted}
data-playing={false}
data-overlay={imageOverlay}
data-controls={showBar}
data-autoplay="true"
></div>
</div>
</div>
</>
)}
</div>
</div>
</div>
);
},
},
{
attributes: { ...attributes },
supports: {
anchor: true,
},
save: (props) => {
const { attributes } = props;
const {
resOption,
blockId,
blockMeta,
videoConfig,
showBar,
videoURL,
videoOptions,
placeholderImage,
placeholderPlayIconURL,
stickyPosition,
imageOverlay,
previewImage,
lightboxPlayIcon,
customPlayIcon,
customPlayIconURL,
classHook,
lightboxPlayIconType,
lightboxPlayIconlib,
customPlayIconlib,
placeholderCustomPlayIconType,
} = attributes;
return (
<div {...useBlockProps.save()}>
<div className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}>
<div className={`eb-advanced-video-wrapper ${blockId} ${videoOptions}`} data-id={blockId}>
{videoOptions != "lightbox" && (
<div className={`eb-player-wrapper ${blockId}`}>
<div
className={`eb-player-option ${videoOptions} ${stickyPosition}`}
data-id={blockId}
data-url={videoURL}
data-option={videoOptions}
data-controls={showBar}
data-loop={videoConfig.loop}
data-muted={videoConfig.muted}
data-playing={videoConfig.autoplay}
data-overlay={imageOverlay}
data-light={previewImage && previewImage.length > 0 ? previewImage : false}
data-customPlayIconType={placeholderCustomPlayIconType}
data-customPlayIconLib={customPlayIconlib}
data-customPlayIcon={customPlayIcon}
data-playicon={
customPlayIconURL && customPlayIconURL.length > 0 ? customPlayIconURL : null
}
></div>
</div>
)}
{videoOptions === "lightbox" && (
<>
<div
id={`myBtn-${blockId}`}
className="player-placeholder"
style={{
backgroundImage: "url( " + placeholderImage + ")",
}}
>
{lightboxPlayIcon && (
<>
{lightboxPlayIconType == "icon" && (
<i className={lightboxPlayIconlib} />
)}
{lightboxPlayIconType == "image" && placeholderPlayIconURL && (
<img src={placeholderPlayIconURL} alt="" />
)}
</>
)}
</div>
<div id={`eb-modal-${blockId}`} className="eb-modal-player">
<div className="eb-player-wrapper">
<span id={`close-${blockId}`} className="eb-modal-close">
×
</span>
<div
className={`eb-player-option ${videoOptions}`}
data-id={blockId}
data-url={videoURL}
data-option={videoOptions}
data-loop={videoConfig.loop}
data-muted={videoConfig.muted}
data-playing={false}
data-overlay={imageOverlay}
data-controls={showBar}
data-autoplay="true"
></div>
</div>
</div>
</>
)}
</div>
</div>
</div>
);
},
},
{
attributes: {
...attributes,
},
supports: {
anchor: true,
},
save: (props) => {
const { attributes } = props;
const {
resOption,
blockId,
blockMeta,
videoConfig,
showBar,
videoURL,
videoOptions,
placeholderImage,
placeholderPlayIconURL,
stickyPosition,
imageOverlay,
previewImage,
lightboxPlayIcon,
customPlayIcon,
customPlayIconURL,
classHook,
lightboxPlayIconType,
lightboxPlayIconlib,
customPlayIconlib,
placeholderCustomPlayIconType,
} = attributes;
return (
<div {...useBlockProps.save()}>
<div className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}>
<div className={`eb-advanced-video-wrapper ${blockId} ${videoOptions}`} data-id={blockId}>
{videoOptions != "lightbox" && (
<div className={`eb-player-wrapper ${blockId}`}>
<div
className={`eb-player-option ${videoOptions} ${stickyPosition}`}
data-id={blockId}
data-url={videoURL}
data-option={videoOptions}
data-controls={showBar}
data-loop={videoConfig.loop}
data-muted={videoConfig.muted}
data-playing={videoConfig.autoplay}
data-overlay={imageOverlay}
data-light={previewImage && previewImage.length > 0 ? previewImage : false}
data-customPlayIconType={placeholderCustomPlayIconType}
data-customPlayIconLib={customPlayIconlib}
data-customPlayIcon={customPlayIcon}
data-playicon={
customPlayIconURL && customPlayIconURL.length > 0 ? customPlayIconURL : null
}
></div>
</div>
)}
{videoOptions === "lightbox" && (
<>
<div
id={`myBtn-${blockId}`}
className="player-placeholder"
style={{
backgroundImage: "url( " + placeholderImage + ")",
}}
>
{lightboxPlayIcon && (
<>
{lightboxPlayIconType == "icon" && (
<i className={lightboxPlayIconlib} />
)}
{lightboxPlayIconType == "image" && placeholderPlayIconURL && (
<img src={placeholderPlayIconURL} alt="" />
)}
</>
)}
</div>
<div id={`eb-modal-${blockId}`} className="eb-modal-player">
<div className="eb-player-wrapper">
<span id={`close-${blockId}`} className="eb-modal-close">
×
</span>
<div
className={`eb-player-option ${videoOptions}`}
data-id={blockId}
data-url={videoURL}
data-option={videoOptions}
data-loop={videoConfig.loop}
data-muted={videoConfig.muted}
data-playing={false}
data-overlay={imageOverlay}
data-controls={showBar}
data-autoplay="true"
></div>
</div>
</div>
</>
)}
</div>
</div>
</div>
);
},
},
{
attributes: {
...attributes,
videoURL: {
type: "string",
default: "http://www.youtube.com/watch?v=PnZx4ZOMyzI",
},
previewImage: {
type: "string",
default: "https://essential-blocks.com/wp-content/uploads/2022/05/adv-video-placeholder.png",
},
placeholderImage: {
type: "string",
default: "https://essential-blocks.com/wp-content/uploads/2022/05/adv-video-placeholder.png",
},
customPlayIconURL: {
type: "string",
default: "https://essential-blocks.com/wp-content/uploads/2022/05/adv-video-playicon.svg",
},
placeholderPlayIconURL: {
type: "string",
default: "https://essential-blocks.com/wp-content/uploads/2022/05/adv-video-playicon.svg",
},
},
supports: {
anchor: true,
},
save: (props) => {
const { attributes } = props;
const {
resOption,
blockId,
blockMeta,
videoConfig,
showBar,
videoURL,
videoOptions,
placeholderImage,
placeholderPlayIconURL,
stickyPosition,
imageOverlay,
previewImage,
lightboxPlayIcon,
customPlayIcon,
customPlayIconURL,
classHook,
lightboxPlayIconType,
lightboxPlayIconlib,
customPlayIconlib,
placeholderCustomPlayIconType,
} = attributes;
return (
<div {...useBlockProps.save()}>
<div className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}>
<div className={`eb-advanced-video-wrapper ${blockId} ${videoOptions}`} data-id={blockId}>
{videoOptions != "lightbox" && (
<div className={`eb-player-wrapper ${blockId}`}>
<div
className={`eb-player-option ${videoOptions} ${stickyPosition}`}
data-id={blockId}
data-url={videoURL}
data-option={videoOptions}
data-controls={showBar}
data-loop={videoConfig.loop}
data-muted={videoConfig.muted}
data-playing={videoConfig.autoplay}
data-overlay={imageOverlay}
data-light={previewImage && previewImage.length > 0 ? previewImage : false}
data-customPlayIconType={placeholderCustomPlayIconType}
data-customPlayIconLib={customPlayIconlib}
data-customPlayIcon={customPlayIcon}
data-playicon={
customPlayIconURL && customPlayIconURL.length > 0 ? customPlayIconURL : null
}
></div>
</div>
)}
{videoOptions === "lightbox" && (
<>
<div
id={`myBtn-${blockId}`}
className="player-placeholder"
style={{
backgroundImage: "url( " + placeholderImage + ")",
}}
>
{lightboxPlayIcon && (
<>
{lightboxPlayIconType == "icon" && (
<i className={lightboxPlayIconlib} />
)}
{lightboxPlayIconType == "image" && placeholderPlayIconURL && (
<img src={placeholderPlayIconURL} alt="" />
)}
</>
)}
</div>
<div id={`eb-modal-${blockId}`} className="eb-modal-player">
<div className="eb-player-wrapper">
<span id={`close-${blockId}`} className="eb-modal-close">
×
</span>
<div
className={`eb-player-option ${videoOptions}`}
data-id={blockId}
data-url={videoURL}
data-option={videoOptions}
data-loop={videoConfig.loop}
data-muted={videoConfig.muted}
data-playing={false}
data-overlay={imageOverlay}
data-controls={showBar}
data-autoplay="true"
></div>
</div>
</div>
</>
)}
</div>
</div>
</div>
);
},
},
];
export default deprecated;