@nurielmeni/strapi-plugin-video-field/dist/_chunks/Input-Dw9DKFQ9.mjs

Add video field to your Strapi application.

import { jsxs, jsx } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { Box, Field, Flex } from "@strapi/design-system";
import { useIntl } from "react-intl";
import { g as getTranslation } from "./index-CF54-roZ.mjs";
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] = useState(null);
  const [provider, setProvider] = useState(null);
  const [videoUrl, setVideoUrl] = useState(null);
  const [invalidUrl, setInvalidUrl] = useState(false);
  const { formatMessage } = useIntl();
  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: getTranslation("video-field.label"), defaultMessage: "Video" });
  const fieldDescription = intlDescription ? formatMessage(intlDescription) : formatMessage({ id: getTranslation("video-field.title"), defaultMessage: "Video url" });
  const fieldPlaceholder = formatMessage({
    id: getTranslation("video-field.placeholder"),
    defaultMessage: "eg. https://vimeo.com/123456789"
  });
  const fieldErrorMessage = formatMessage({
    id: getTranslation("video-field.invalid.url"),
    defaultMessage: "Invalid video url"
  });
  return /* @__PURE__ */ jsxs(Box, { children: [
    /* @__PURE__ */ jsxs(Field.Root, { id: name, hint: fieldDescription, error: invalidUrl ? fieldErrorMessage : void 0, children: [
      /* @__PURE__ */ jsx(Field.Label, { children: fieldLabel }),
      /* @__PURE__ */ jsx(
        Field.Input,
        {
          type: "text",
          name,
          value: videoUrl,
          onChange: onInputChange,
          placeholder: fieldPlaceholder
        }
      ),
      /* @__PURE__ */ jsx(Field.Hint, {}),
      /* @__PURE__ */ jsx(Field.Error, {})
    ] }),
    provider && providerUid && /* @__PURE__ */ jsxs(Flex, { paddingTop: 4, justifyContent: "center", children: [
      provider === "vimeo" && /* @__PURE__ */ jsx(
        "iframe",
        {
          src: `https://player.vimeo.com/video/${providerUid}`,
          frameBorder: 0,
          allowFullScreen: true,
          height: 200
        }
      ),
      provider === "youtube" && /* @__PURE__ */ jsx(
        "iframe",
        {
          src: `https://www.youtube.com/embed/${providerUid}`,
          frameBorder: 0,
          allowFullScreen: true,
          height: 200
        }
      ),
      provider === "facebook" && /* @__PURE__ */ 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"
        }
      )
    ] })
  ] });
};
export {
  VideoInput as default
};