@sklinet/strapi-plugin-video-field
Version:
Add video field to your Strapi application.
188 lines (187 loc) • 6.61 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-BPiK6yUW.js");
const getVideoProviderAndUid = (url) => {
if (url.includes("vimeo")) {
const regExp = /^https?:\/\/(?:www\.)?vimeo\.com\/(?:(?:channels\/[\w]+\/)|(groups\/[\w]+\/videos\/))?(\d+)(?:\/([\w]+))?/;
const match = url.match(regExp);
if (match && match[2]) {
return {
provider: "vimeo",
providerUid: match[2],
privacyHash: match[3] || null
};
}
}
if (url.includes("youtube") || url.includes("youtu.be")) {
const standardRegExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\/)|(\?v=|\&v=))([^#\&\?]{11}).*/;
const shortRegExp = /youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/;
const standardMatch = url.match(standardRegExp);
if (standardMatch && standardMatch[8].length === 11) {
return {
provider: "youtube",
providerUid: standardMatch[8]
};
}
const shortsMatch = url.match(shortRegExp);
if (shortsMatch && shortsMatch[1]) {
return {
provider: "youtube",
providerUid: shortsMatch[1]
};
}
}
if (url.includes("facebook")) {
return {
provider: "facebook",
providerUid: url
};
}
return null;
};
const VideoInput = ({ attribute, name, onChange, value, intlLabel, intlDescription }) => {
const [providerUid, setProviderUid] = react.useState(null);
const [privacyHash, setPrivacyHash] = 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?.privacyHash) {
setPrivacyHash(initialValue.privacyHash);
}
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);
}
if (data?.privacyHash) {
setPrivacyHash(data.privacyHash);
}
const valueObj = {
url: e.target.value,
provider: data?.provider || "",
providerUid: data?.providerUid || "",
privacyHash: data?.privacyHash || ""
};
onChange({
target: {
name,
value: JSON.stringify(valueObj),
type: attribute.type
}
});
} else {
setInvalidUrl(false);
const valueObj = {
url: "",
provider: void 0,
providerUid: void 0,
privacyHash: 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}${privacyHash ? "/" + privacyHash : ""}`,
referrerPolicy: "strict-origin-when-cross-origin",
allow: "autoplay; fullscreen; picture-in-picture",
allowFullScreen: true,
height: 200,
style: { border: 0 }
}
),
provider === "youtube" && /* @__PURE__ */ jsxRuntime.jsx(
"iframe",
{
src: `https://www.youtube-nocookie.com/embed/${providerUid}`,
referrerPolicy: "strict-origin-when-cross-origin",
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
allowFullScreen: true,
height: 200,
style: { border: 0 }
}
),
provider === "facebook" && /* @__PURE__ */ jsxRuntime.jsx(
"iframe",
{
src: `https://www.facebook.com/plugins/video.php?href=${providerUid}&show_text=false&t=0`,
referrerPolicy: "strict-origin-when-cross-origin",
allow: "autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share",
allowFullScreen: true,
height: 200,
style: { border: 0 }
}
)
] })
] });
};
exports.default = VideoInput;
//# sourceMappingURL=Input-DNvGMjGU.js.map