????
Your IP : 3.21.43.104
/** @jsx jsx */
import { css, jsx } from "@emotion/core";
import { PrestoPlaylistUi } from "@presto-player/components-react";
const semverCompare = require("semver/functions/compare");
import {
store as blockEditorStore,
InspectorControls,
useBlockProps,
useInnerBlocksProps,
ContrastChecker,
__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
__experimentalUseBorderProps as useBorderProps,
__experimentalUseColorProps as useColorProps,
} from "@wordpress/block-editor";
import { createBlock } from "@wordpress/blocks";
import {
__experimentalNumberControl as NumberControl,
PanelBody,
TextControl,
Placeholder,
} from "@wordpress/components";
import PlayListPlaceholder from "../playlist-list-item/Placeholder";
import { useDispatch, useSelect } from "@wordpress/data";
import { useEffect } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { ToggleControl } from "@wordpress/components";
const ALLOWED_BLOCKS = [
"presto-player/playlist-preview",
"presto-player/playlist-list",
];
export default ({ attributes, setAttributes, clientId }) => {
const {
heading,
listTextSingular,
listTextPlural,
highlightColor,
transitionDuration,
selectedItem,
matchPlaylistToPlayerColor,
} = attributes;
const { replaceInnerBlocks } = useDispatch(blockEditorStore);
const blockProps = useBlockProps({
css: css`
wp-block,
[data-block] {
margin: 0 !important;
max-width: none !important;
}
`,
});
const { selectedBlock, playlistBlocks, playListWrapper } = useSelect(
(select) => {
const innerBlocks = select(blockEditorStore).getBlocks(clientId);
const playListWrapper = (innerBlocks || []).find(
(block) => block.name === "presto-player/playlist-list"
);
const previewWrapper = (innerBlocks || []).find(
(block) => block.name === "presto-player/playlist-preview"
);
return {
selectedBlock: select(blockEditorStore).getSelectedBlock(),
previewWrapper,
playlistBlocks: select(blockEditorStore).getBlocks(
playListWrapper?.clientId
),
previewBlocks: select(blockEditorStore).getBlocks(
previewWrapper?.clientId
),
playListWrapper,
};
},
[clientId]
);
// when playlist item is selected, update the preview
useEffect(() => {
if (
!selectedBlock?.attributes?.id ||
selectedBlock.name !== "presto-player/playlist-list-item"
)
return;
setAttributes({
selectedItem: parseInt(selectedBlock?.attributes?.id),
});
}, [playlistBlocks, selectedBlock?.attributes?.id]);
// if there is no selected item, use the first item
useEffect(() => {
if (!selectedItem) {
const id = parseInt(playlistBlocks?.[0]?.attributes?.id);
if (!isNaN(id)) {
setAttributes({
selectedItem: parseInt(playlistBlocks?.[0]?.attributes?.id),
});
}
}
}, [playlistBlocks]);
const innerBlocksProps = useInnerBlocksProps(blockProps, {
renderAppender: false,
allowedBlocks: ALLOWED_BLOCKS,
template: [
["presto-player/playlist-preview"],
["presto-player/playlist-list"],
],
templateLock: "all",
});
const colorGradientSettings = useMultipleOriginColorsAndGradients();
const borderProps = useBorderProps(attributes);
const colorProps = useColorProps(attributes);
if (playlistBlocks.length === 0) {
return (
<div {...blockProps}>
<Placeholder
icon={
<svg
xmlns="http://www.w3.org/2000/svg"
className="playlist-block-icon"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M3 10h11v2H3zm0-4h11v2H3zm0 8h7v2H3zm13-1v8l6-4z"
/>
</svg>
}
instructions={__(
"Add a Playlist Item to get started.",
"presto-player"
)}
label={__("Presto Player Playlist", "presto-player")}
isColumnLayout
>
<PlayListPlaceholder
css={css`
max-width: 600px;
`}
setAttributes={({ id, title }) => {
setAttributes({ selectedItem: id });
replaceInnerBlocks(playListWrapper?.clientId, [
createBlock("presto-player/playlist-list-item", {
id,
title,
}),
]);
}}
/>
</Placeholder>
</div>
);
}
return (
<>
<InspectorControls group="color">
<ColorGradientSettingsDropdown
__experimentalIsRenderedInSidebar
settings={[
{
colorValue: highlightColor,
label: __("Highlight Color"),
onColorChange: (highlightColor) =>
setAttributes({ highlightColor }),
resetAllFilter: () =>
setAttributes({ highlightColor: undefined }),
},
]}
{...colorGradientSettings}
panelId={clientId}
gradients={[]}
disableCustomGradients={true}
/>
<ContrastChecker
backgroundColor={highlightColor}
textColor={"#ffffff"}
/>
{semverCompare(prestoPlayer?.proVersion, "2.0.4") >= 0 &&
!!highlightColor && (
<ToggleControl
label={__("Pass highlight color to player", "presto-player")}
help={__(
"Use the playlist highlight color as player color in case your playlist color is different from your brand.",
"presto-player"
)}
checked={matchPlaylistToPlayerColor}
onChange={(matchPlaylistToPlayerColor) =>
setAttributes({
matchPlaylistToPlayerColor,
})
}
css={css`
min-width: 250px;
`}
/>
)}
</InspectorControls>
<InspectorControls>
<PanelBody title={__("General", "presto-player")} initialOpen={true}>
<TextControl
label={__("Playlist Title", "presto-player")}
value={heading}
onChange={(heading) => setAttributes({ heading })}
/>
<TextControl
label={__("Playlist Items Text - Singular", "presto-player")}
value={listTextSingular}
onChange={(listTextSingular) => setAttributes({ listTextSingular })}
/>
<TextControl
label={__("Playlist Items Text - Plural", "presto-player")}
value={listTextPlural}
onChange={(listTextPlural) => setAttributes({ listTextPlural })}
/>
<NumberControl
label={__("Transition Duration (Seconds)", "presto-player")}
value={transitionDuration}
onChange={(transitionDuration) =>
setAttributes({ transitionDuration })
}
max={30}
min={0.5}
step={0.1}
/>
</PanelBody>
</InspectorControls>
<div
style={{
"--presto-playlist-highlight-color": highlightColor,
"--presto-player-highlight-color": matchPlaylistToPlayerColor
? highlightColor
: "",
"--presto-playlist-background-color":
colorProps?.style?.backgroundColor,
"--presto-playlist-text-color": colorProps?.style?.color,
"--presto-playlist-border-color": borderProps?.style?.borderColor,
"--presto-playlist-border-width": borderProps?.style?.borderWidth,
"--presto-playlist-border-radius": borderProps?.style?.borderRadius,
border: "none",
}}
css={css`
width: 100%;
.wp-block-video {
margin: 0 !important;
}
`}
>
<PrestoPlaylistUi {...innerBlocksProps} />
</div>
</>
);
};