@nurielmeni/strapi-plugin-video-field
Version:
Add video field to your Strapi application.
163 lines (162 loc) • 5.42 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const react = require("react");
const designSystem = require("@strapi/design-system");
const reactIntl = require("react-intl");
const index = require("./index-CrHNIGxn.js");
const getVideoProviderAndUid = (url) => {
if (url.includes("vimeo")) {
const regExp = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/))?([0-9]+)/;
const match = url.match(regExp);
if (match && match[5]) {
return {
provider: "vimeo",
providerUid: match[5]
};
}
}
if (url.includes("youtube")) {
const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\/)|(\?v=|\&v=))([^#\&\?]*).*/;
const match = url.match(regExp);
if (match && match[8].length == 11) {
return {
provider: "youtube",
providerUid: match[8]
};
}
}
if (url.includes("facebook")) {
return {
provider: "facebook",
providerUid: url
};
}
};
const VideoInput = ({ attribute, name, onChange, value, intlLabel, intlDescription }) => {
const [providerUid, setProviderUid] = react.useState(null);
const [provider, setProvider] = react.useState(null);
const [videoUrl, setVideoUrl] = react.useState(null);
const [invalidUrl, setInvalidUrl] = react.useState(false);
const { formatMessage } = reactIntl.useIntl();
react.useEffect(() => {
let initialValue;
if (typeof value === "object") {
initialValue = value;
} else {
try {
initialValue = JSON.parse(value);
} catch (e) {
initialValue = {};
}
}
if (initialValue?.url) {
setVideoUrl(initialValue.url);
if (initialValue.provider && initialValue.providerUid) {
setInvalidUrl(false);
setProvider(initialValue.provider);
setProviderUid(initialValue.providerUid);
} else {
setInvalidUrl(true);
}
}
}, [value]);
const onInputChange = (e) => {
setVideoUrl(e.target?.value || "");
if (e.target?.value) {
const data = getVideoProviderAndUid(e.target.value);
if (e.target?.value?.length > 0) {
setInvalidUrl(true);
}
if (data?.provider && data?.providerUid) {
setInvalidUrl(false);
setProvider(data.provider);
setProviderUid(data.providerUid);
}
const valueObj = {
url: e.target?.value,
provider: data?.provider || "",
providerUid: data?.providerUid || ""
};
onChange({
target: {
name,
value: JSON.stringify(valueObj),
type: attribute.type
}
});
} else {
setInvalidUrl(false);
const valueObj = {
url: "",
provider: void 0,
providerUid: void 0
};
onChange({
target: {
name,
value: JSON.stringify(valueObj),
type: attribute.type
}
});
}
};
const fieldLabel = intlLabel ? formatMessage(intlLabel) : formatMessage({ id: index.getTranslation("video-field.label"), defaultMessage: "Video" });
const fieldDescription = intlDescription ? formatMessage(intlDescription) : formatMessage({ id: index.getTranslation("video-field.title"), defaultMessage: "Video url" });
const fieldPlaceholder = formatMessage({
id: index.getTranslation("video-field.placeholder"),
defaultMessage: "eg. https://vimeo.com/123456789"
});
const fieldErrorMessage = formatMessage({
id: index.getTranslation("video-field.invalid.url"),
defaultMessage: "Invalid video url"
});
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { id: name, hint: fieldDescription, error: invalidUrl ? fieldErrorMessage : void 0, children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: fieldLabel }),
/* @__PURE__ */ jsxRuntime.jsx(
designSystem.Field.Input,
{
type: "text",
name,
value: videoUrl,
onChange: onInputChange,
placeholder: fieldPlaceholder
}
),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
] }),
provider && providerUid && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { paddingTop: 4, justifyContent: "center", children: [
provider === "vimeo" && /* @__PURE__ */ jsxRuntime.jsx(
"iframe",
{
src: `https://player.vimeo.com/video/${providerUid}`,
frameBorder: 0,
allowFullScreen: true,
height: 200
}
),
provider === "youtube" && /* @__PURE__ */ jsxRuntime.jsx(
"iframe",
{
src: `https://www.youtube.com/embed/${providerUid}`,
frameBorder: 0,
allowFullScreen: true,
height: 200
}
),
provider === "facebook" && /* @__PURE__ */ jsxRuntime.jsx(
"iframe",
{
src: `https://www.facebook.com/plugins/video.php?href=${providerUid}&show_text=false&t=0`,
frameBorder: "0",
height: 200,
allowFullScreen: true,
allow: "autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
}
)
] })
] });
};
exports.default = VideoInput;