@wordpress/block-library
Version:
Block library for the WordPress editor.
297 lines (296 loc) • 9.42 kB
JavaScript
// packages/block-library/src/playlist-track/edit.js
import { isBlobURL } from "@wordpress/blob";
import { useContext, useEffect, useRef, useState } from "@wordpress/element";
import {
MediaPlaceholder,
MediaReplaceFlow,
MediaUpload,
MediaUploadCheck,
BlockIcon,
useBlockProps,
BlockControls,
InspectorControls,
PlainText
} from "@wordpress/block-editor";
import {
Button,
PanelBody,
TextControl,
TextareaControl,
BaseControl,
Spinner
} from "@wordpress/components";
import { Link } from "@wordpress/ui";
import { useDispatch } from "@wordpress/data";
import { store as noticesStore } from "@wordpress/notices";
import { __ } from "@wordpress/i18n";
import { audio as icon } from "@wordpress/icons";
import { __unstableStripHTML as stripHTML } from "@wordpress/dom";
import { PlaylistContext } from "../playlist/context.mjs";
import { getTrackAttributes, getTrackImageAttributes } from "../playlist/utils.mjs";
import { useUploadMediaFromBlobURL } from "../utils/hooks.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var ALLOWED_MEDIA_TYPES = ["audio"];
var TRACK_IMAGE_ALLOWED_MEDIA_TYPES = ["image"];
var PlaylistTrackEdit = ({
attributes,
setAttributes,
context,
clientId,
isSelected
}) => {
const { id, src, album, artist, image, imageAlt, length, title } = attributes;
const [temporaryURL, setTemporaryURL] = useState(attributes.blob);
const showArtists = context?.showArtists;
const showImages = context?.showImages ?? true;
const imageButton = useRef();
const blockProps = useBlockProps();
const { currentTrackClientId, setCurrentTrackClientId } = useContext(PlaylistContext);
const { createErrorNotice } = useDispatch(noticesStore);
function onUploadError(message) {
createErrorNotice(message, { type: "snackbar" });
}
const hasTrackSource = !!src || !!temporaryURL;
useEffect(() => {
if (isSelected && hasTrackSource && currentTrackClientId !== clientId) {
setCurrentTrackClientId(clientId);
}
}, [
isSelected,
hasTrackSource,
clientId,
currentTrackClientId,
setCurrentTrackClientId
]);
useUploadMediaFromBlobURL({
url: temporaryURL,
allowedTypes: ALLOWED_MEDIA_TYPES,
onChange: onSelectTrack,
onError: onUploadError
});
function onSelectTrack(media) {
const mediaUrl = media?.url ?? media?.source_url;
if (!media || !mediaUrl) {
setAttributes({
blob: void 0,
id: void 0,
artist: void 0,
album: void 0,
image: void 0,
imageAlt: void 0,
length: void 0,
title: void 0,
url: void 0
});
setTemporaryURL();
return;
}
if (isBlobURL(mediaUrl)) {
setTemporaryURL(mediaUrl);
return;
}
setAttributes({
blob: void 0,
...getTrackAttributes(media)
});
setTemporaryURL();
}
function onSelectTrackImage(trackImage) {
setAttributes(getTrackImageAttributes(trackImage));
}
function onRemoveTrackImage() {
setAttributes({ image: void 0, imageAlt: void 0 });
imageButton.current.focus();
}
if (!hasTrackSource) {
return /* @__PURE__ */ jsx("div", { ...blockProps, children: /* @__PURE__ */ jsx(
MediaPlaceholder,
{
icon: /* @__PURE__ */ jsx(BlockIcon, { icon }),
labels: {
title: __("Track"),
instructions: __(
"Upload an audio file or pick one from your media library."
)
},
onSelect: onSelectTrack,
accept: "audio/*",
allowedTypes: ALLOWED_MEDIA_TYPES,
value: attributes,
onError: onUploadError
}
) });
}
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(BlockControls, { group: "other", children: /* @__PURE__ */ jsx(
MediaReplaceFlow,
{
name: __("Replace"),
onSelect: onSelectTrack,
accept: "audio/*",
mediaId: id,
mediaURL: src,
allowedTypes: ALLOWED_MEDIA_TYPES,
onError: onUploadError,
variant: "toolbar"
}
) }),
/* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsxs(PanelBody, { title: __("Settings"), children: [
/* @__PURE__ */ jsx(
TextControl,
{
label: __("Artist"),
value: artist ? stripHTML(artist) : "",
onChange: (artistValue) => {
setAttributes({ artist: artistValue });
}
}
),
/* @__PURE__ */ jsx(
TextControl,
{
label: __("Album"),
value: album ? stripHTML(album) : "",
onChange: (albumValue) => {
setAttributes({ album: albumValue });
}
}
),
/* @__PURE__ */ jsx(
TextControl,
{
label: __("Title"),
value: title ? stripHTML(title) : "",
onChange: (titleValue) => {
setAttributes({ title: titleValue });
}
}
),
/* @__PURE__ */ jsx(MediaUploadCheck, { children: /* @__PURE__ */ jsxs(BaseControl, { children: [
/* @__PURE__ */ jsx(BaseControl.VisualLabel, { children: __("Track image") }),
/* @__PURE__ */ jsxs("div", { className: "editor-video-poster-control", children: [
!!image && /* @__PURE__ */ jsx(
"img",
{
src: image,
alt: __(
"Preview of the track image"
)
}
),
/* @__PURE__ */ jsx(
MediaUpload,
{
title: __("Select image"),
onSelect: onSelectTrackImage,
allowedTypes: TRACK_IMAGE_ALLOWED_MEDIA_TYPES,
render: ({ open }) => /* @__PURE__ */ jsx(
Button,
{
__next40pxDefaultSize: true,
variant: "primary",
onClick: open,
ref: imageButton,
children: !image ? __("Select") : __("Replace")
}
)
}
),
!!image && /* @__PURE__ */ jsx(
Button,
{
__next40pxDefaultSize: true,
onClick: onRemoveTrackImage,
variant: "tertiary",
children: __("Remove")
}
)
] })
] }) }),
!!image && /* @__PURE__ */ jsx(
TextareaControl,
{
label: __("Alternative text"),
value: imageAlt || "",
onChange: (value) => setAttributes({ imageAlt: value }),
help: /* @__PURE__ */ jsx(
Link,
{
openInNewTab: true,
href: (
// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
__(
"https://www.w3.org/WAI/tutorials/images/decision-tree/"
)
),
children: __(
"Describe the purpose of the image."
)
}
)
}
)
] }) }),
/* @__PURE__ */ jsxs("li", { ...blockProps, children: [
!!temporaryURL && /* @__PURE__ */ jsx(Spinner, {}),
/* @__PURE__ */ jsxs(
"button",
{
className: "wp-block-playlist-track__button",
onClick: () => setCurrentTrackClientId(clientId),
"aria-current": currentTrackClientId === clientId ? "true" : "false",
children: [
showImages && !!image && /* @__PURE__ */ jsx(
"img",
{
className: "wp-block-playlist-track__image",
src: image,
alt: imageAlt || ""
}
),
/* @__PURE__ */ jsxs("span", { className: "wp-block-playlist-track__content", children: [
/* @__PURE__ */ jsx(
PlainText,
{
tagName: "span",
className: "wp-block-playlist-track__title",
value: title,
placeholder: __("Add title"),
onChange: (value) => {
setAttributes({ title: value });
},
__experimentalVersion: 2
}
),
showArtists && /* @__PURE__ */ jsx(
PlainText,
{
tagName: "span",
className: "wp-block-playlist-track__artist",
value: artist,
placeholder: __("Add artist"),
onChange: (value) => setAttributes({ artist: value }),
__experimentalVersion: 2
}
)
] }),
/* @__PURE__ */ jsxs("span", { className: "wp-block-playlist-track__length", children: [
length && /* @__PURE__ */ jsx("span", {
className: "screen-reader-text",
/* translators: Visually hidden label for the track duration (screen reader text). */
children: __("Duration:")
}),
length
] }),
/* @__PURE__ */ jsx("span", { className: "screen-reader-text", children: __("Play") })
]
}
)
] })
] });
};
var edit_default = PlaylistTrackEdit;
export {
edit_default as default
};
//# sourceMappingURL=edit.mjs.map