????
Your IP : 3.21.43.104
/**
* WordPress dependencies
*/
const { Button, Disabled, Toolbar, Placeholder, Spinner, withNotices } =
wp.components;
import { BlockControls, InspectorControls } from "@wordpress/block-editor";
const { useEffect } = wp.element;
const { __ } = wp.i18n;
const { compose } = wp.compose;
// hocs
import withPlayerEdit from "../with-player-edit";
import withPlayerData from "../with-player-data";
/**
* Internal dependencies
*/
import BlockInspectorControls from "@/admin/blocks/shared/BlockInspectorControls";
import Player from "@/admin/blocks/shared/Player";
import LinkPlaceholder from "@/admin/blocks/shared/LinkPlaceholder";
import { getYoutubeId } from "@/shared/util.js";
import { usePrevious } from "@/admin/blocks/util";
import Editing from "../../shared/Editing";
export default compose([withPlayerData(), withPlayerEdit()])(
withNotices(
({
attributes,
setAttributes,
noticeOperations,
branding,
createVideo,
loading,
presetData,
onRemoveSrc,
lockSave,
unlockSave,
renderKey,
}) => {
const { poster, src, id } = attributes;
const showNotice = (e) => {
noticeOperations.removeAllNotices();
noticeOperations.createErrorNotice(e?.message);
};
// make sure to save/get attachment id if src is set
const prevSrc = usePrevious(src);
useEffect(() => {
// reset id only if we're changing the src
if (prevSrc) {
setAttributes({ id: 0 });
}
let video_id = getYoutubeId(src);
setAttributes({ video_id });
lockSave();
createVideo({ src, external_id: video_id, type: "youtube" })
.catch((e) => {
setAttributes({ src: "" });
showNotice(e);
})
.finally(unlockSave);
}, [src]);
// handle url update
function onSelectURL(newSrc) {
if (newSrc !== src) {
setAttributes({ src: newSrc });
}
}
if (!src) {
return (
<div>
<LinkPlaceholder
icon={
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="presto-block-icon"
>
<path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path>
<polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon>
</svg>
}
label={__("Presto Youtube Video", "presto-player")}
instructions={__("Enter Youtube Video URL", "presto-player")}
placeholder={__("Youtube URL", "presto-player")}
attributes={attributes}
setAttributes={setAttributes}
onSelectURL={onSelectURL}
/>
</div>
);
}
// loading presets or id still
if (loading || !id) {
return (
<Placeholder className="presto-player__placeholder is-loading">
<Spinner />
</Placeholder>
);
}
return (
<>
<BlockControls>
<Toolbar>
<Button onClick={() => onRemoveSrc()}>
{__("Replace", "presto-player")}
</Button>
</Toolbar>
<Editing />
</BlockControls>
<InspectorControls>
<BlockInspectorControls
setAttributes={setAttributes}
attributes={attributes}
/>
</InspectorControls>
<figure>
{/*
Disable the video tag so the user clicking on it won't play the
video when the controls are enabled.
*/}
<Disabled>
<Player
poster={poster}
src={src}
type="youtube"
id={id}
attributes={attributes}
setAttributes={setAttributes}
preset={presetData}
branding={branding}
key={renderKey}
/>
</Disabled>
</figure>
</>
);
}
)
);