@wordpress/block-library
Version:
Block library for the WordPress editor.
218 lines (216 loc) • 7.09 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/block-library/src/utils/waveform-player.js
var waveform_player_exports = {};
__export(waveform_player_exports, {
WaveformPlayer: () => WaveformPlayer
});
module.exports = __toCommonJS(waveform_player_exports);
var import_element = require("@wordpress/element");
var import_compose = require("@wordpress/compose");
var import_i18n = require("@wordpress/i18n");
var import_waveform_utils = require("./waveform-utils.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
function updatePlayerMetadata(player, { title, artist, image, imageAlt }, showPlayButtonArtwork) {
const { instance, container } = player;
const playerArtwork = showPlayButtonArtwork ? void 0 : image;
if (instance.titleEl) {
instance.titleEl.textContent = title ?? "";
}
(0, import_waveform_utils.updateSeekControlLabel)(instance, title || (0, import_i18n.__)("Seek"));
if (typeof instance.syncArtist === "function") {
instance.syncArtist(artist || "");
} else if (instance.artistEl) {
instance.artistEl.textContent = artist ?? "";
instance.artistEl.style.display = artist ? "" : "none";
}
if (typeof instance.syncArtwork === "function") {
instance.syncArtwork(
playerArtwork || null,
playerArtwork ? imageAlt || "" : ""
);
} else if (instance.artworkEl && playerArtwork) {
instance.artworkEl.src = playerArtwork;
instance.artworkEl.alt = imageAlt || "";
}
if (showPlayButtonArtwork) {
(0, import_waveform_utils.setupPlayButtonArtwork)(container, image);
}
}
function WaveformPlayer({
src,
title,
artist,
image,
imageAlt,
color,
gradient,
backgroundColor,
backgroundGradient,
textColor,
waveformStyle,
onEnded,
showPlayButtonArtwork = false
}) {
const onEndedEvent = (0, import_compose.useEvent)(onEnded);
const playerRef = (0, import_element.useRef)();
const hasSrc = !!src;
const metadataRef = (0, import_element.useRef)({ src, title, artist, image, imageAlt });
const stylesRef = (0, import_element.useRef)({
color,
gradient,
backgroundColor,
backgroundGradient,
textColor
});
(0, import_element.useEffect)(() => {
metadataRef.current = { src, title, artist, image, imageAlt };
}, [src, title, artist, image, imageAlt]);
(0, import_element.useEffect)(() => {
stylesRef.current = {
color,
gradient,
backgroundColor,
backgroundGradient,
textColor
};
}, [color, gradient, backgroundColor, backgroundGradient, textColor]);
(0, import_element.useEffect)(() => {
if (playerRef.current?.container) {
(0, import_waveform_utils.applyWaveformPlayerStyles)(playerRef.current.container, {
backgroundColor,
backgroundGradient,
textColor,
playButtonColor: showPlayButtonArtwork ? void 0 : color,
playButtonGradient: showPlayButtonArtwork ? void 0 : gradient
});
}
}, [
backgroundColor,
backgroundGradient,
color,
gradient,
showPlayButtonArtwork,
textColor
]);
const ref = (0, import_compose.useRefEffect)(
(element) => {
if (!hasSrc) {
return;
}
let cancelled = false;
let playerDestroy;
function init() {
if (cancelled) {
return;
}
const player = (0, import_waveform_utils.initWaveformPlayer)(element, {
src: metadataRef.current.src,
title: metadataRef.current.title,
artist: metadataRef.current.artist,
image: metadataRef.current.image,
imageAlt: metadataRef.current.imageAlt,
waveformColor: stylesRef.current.color,
waveformGradient: stylesRef.current.gradient,
backgroundColor: stylesRef.current.backgroundColor,
backgroundGradient: stylesRef.current.backgroundGradient,
textColor: stylesRef.current.textColor,
waveformStyle,
labels: {
seek: (0, import_i18n.__)("Seek"),
/* translators: %1$s: current audio time, %2$s: total audio duration. */
seekValueText: (0, import_i18n._x)(
"%1$s of %2$s",
"audio current time of total duration"
)
},
onEnded: () => onEndedEvent?.(),
showPlayButtonArtwork
});
playerRef.current = player;
const { destroy } = player;
playerDestroy = destroy;
}
const timeoutId = setTimeout(init, 100);
return () => {
cancelled = true;
clearTimeout(timeoutId);
playerRef.current = void 0;
playerDestroy?.();
};
},
[
onEndedEvent,
hasSrc,
waveformStyle,
color,
gradient,
textColor,
showPlayButtonArtwork
]
);
(0, import_element.useEffect)(() => {
if (playerRef.current?.instance) {
const player = playerRef.current;
if (player) {
updatePlayerMetadata(
player,
{
title,
artist,
image,
imageAlt
},
showPlayButtonArtwork
);
}
}
}, [title, artist, image, imageAlt, showPlayButtonArtwork]);
(0, import_element.useEffect)(() => {
if (src && playerRef.current?.instance) {
const wasPlaying = playerRef.current.instance.isPlaying;
const promise = playerRef.current.instance.loadTrack(
src,
metadataRef.current.title,
metadataRef.current.artist,
{
artwork: showPlayButtonArtwork ? void 0 : metadataRef.current.image,
artworkAlt: showPlayButtonArtwork ? "" : metadataRef.current.imageAlt
}
);
promise.then(() => {
if (showPlayButtonArtwork && playerRef.current?.container) {
(0, import_waveform_utils.setupPlayButtonArtwork)(
playerRef.current.container,
metadataRef.current.image
);
}
if (!wasPlaying) {
playerRef.current?.instance.pause();
}
});
}
}, [src, showPlayButtonArtwork]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: "wp-block-playlist__waveform-player" });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
WaveformPlayer
});
//# sourceMappingURL=waveform-player.cjs.map