@sklinet/strapi-plugin-video-field/dist/_chunks/Input-CAvsmRym.mjs.map

Add video field to your Strapi application.

{"version":3,"file":"Input-CAvsmRym.mjs","sources":["../../admin/src/utils/getVideoProviderAndUid.ts","../../admin/src/components/Field/Input.tsx"],"sourcesContent":["const getVideoProviderAndUid = (url: string) => {\n  if (url.includes(\"vimeo\")) {\n    const regExp =\n      /^https?:\\/\\/(?:www\\.)?vimeo\\.com\\/(?:(?:channels\\/[\\w]+\\/)|(groups\\/[\\w]+\\/videos\\/))?(\\d+)(?:\\/([\\w]+))?/;\n    const match = url.match(regExp);\n    if (match && match[1]) {\n      return {\n        provider: \"vimeo\",\n        providerUid: match[1],\n        privacyHash: match[2] || null,\n      };\n    }\n  }\n\n  if (url.includes(\"youtube\") || url.includes(\"youtu.be\")) {\n    const standardRegExp =\n      /^.*((youtu.be\\/)|(v\\/)|(\\/u\\/\\w\\/)|(embed\\/)|(watch\\/)|(\\?v=|\\&v=))([^#\\&\\?]{11}).*/;\n    const shortRegExp = /youtube\\.com\\/shorts\\/([a-zA-Z0-9_-]{11})/;\n\n    const standardMatch = url.match(standardRegExp);\n    if (standardMatch && standardMatch[8].length === 11) {\n      return {\n        provider: \"youtube\",\n        providerUid: standardMatch[8],\n      };\n    }\n\n    const shortsMatch = url.match(shortRegExp);\n    if (shortsMatch && shortsMatch[1]) {\n      return {\n        provider: \"youtube\",\n        providerUid: shortsMatch[1],\n      };\n    }\n  }\n\n  if (url.includes(\"facebook\")) {\n    return {\n      provider: \"facebook\",\n      providerUid: url,\n    };\n  }\n\n  return null;\n};\n\nexport { getVideoProviderAndUid };\n","import React, { useState, useEffect, ChangeEvent } from 'react';\nimport { Box, Flex, Field } from '@strapi/design-system';\nimport { getVideoProviderAndUid } from '../../utils/getVideoProviderAndUid';\nimport { useIntl } from 'react-intl';\nimport { getTranslation } from '../../utils/getTranslation';\n\ninterface VideoInputProps {\n    intlLabel: Record<any, any>;\n    onChange: (e: any) => void;\n    attribute: Record<any, any>;\n    name: string;\n    disabled?: boolean;\n    error?: string;\n    labelAction?: Record<any, any>;\n    required?: boolean;\n    value?: any;\n    [key: string]: any;\n}\n\nconst VideoInput = ({ attribute, name, onChange, value, intlLabel, intlDescription }: VideoInputProps) => {\n    const [providerUid, setProviderUid] = useState<string | null>(null);\n    const [privacyHash, setPrivacyHash] = useState<string | null>(null);\n    const [provider, setProvider] = useState<string | null>(null);\n    const [videoUrl, setVideoUrl] = useState<string | null>(null);\n    const [invalidUrl, setInvalidUrl] = useState(false);\n    const { formatMessage } = useIntl();\n\n    // Load data from value on page load\n    useEffect(() => {\n        let initialValue;\n\n        if (typeof value === 'object') {\n            initialValue = value;\n        } else {\n            try {\n                initialValue = JSON.parse(value);\n            } catch (e) {\n                initialValue = {};\n            }\n        }\n        if (initialValue?.privacyHash) {\n          setPrivacyHash(initialValue.privacyHash);\n        }\n\n        if (initialValue?.url) {\n            setVideoUrl(initialValue.url);\n            if (initialValue.provider && initialValue.providerUid) {\n                setInvalidUrl(false);\n                setProvider(initialValue.provider);\n                setProviderUid(initialValue.providerUid);\n            } else {\n                setInvalidUrl(true);\n            }\n        }\n    }, [value]);\n\n    const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n        setVideoUrl(e.target.value || '');\n        if (e.target.value) {\n            const data = getVideoProviderAndUid(e.target.value);\n\n            if (e.target.value.length > 0) {\n                setInvalidUrl(true);\n            }\n\n            if (data?.provider && data?.providerUid) {\n                setInvalidUrl(false);\n                setProvider(data.provider);\n                setProviderUid(data.providerUid);\n            }\n\n            if (data?.privacyHash) {\n              setPrivacyHash(data.privacyHash);\n            }\n\n            const valueObj = {\n                url: e.target.value,\n                provider: data?.provider || '',\n                providerUid: data?.providerUid || '',\n                privacyHash: data?.privacyHash || '',\n            };\n\n            onChange({\n                target: {\n                    name,\n                    value: JSON.stringify(valueObj),\n                    type: attribute.type,\n                },\n            });\n        } else {\n            setInvalidUrl(false);\n            const valueObj = {\n                url: '',\n                provider: undefined,\n                providerUid: undefined,\n                privacyHash: undefined,\n            };\n            onChange({\n                target: {\n                    name,\n                    value: JSON.stringify(valueObj),\n                    type: attribute.type,\n                },\n            });\n        }\n    };\n\n    const fieldLabel = intlLabel\n        ? formatMessage(intlLabel)\n        : formatMessage({ id: getTranslation('video-field.label'), defaultMessage: 'Video' });\n    const fieldDescription = intlDescription\n        ? formatMessage(intlDescription)\n        : formatMessage({ id: getTranslation('video-field.title'), defaultMessage: 'Video url' });\n\n    const fieldPlaceholder = formatMessage({\n        id: getTranslation('video-field.placeholder'),\n        defaultMessage: 'eg. https://vimeo.com/123456789',\n    });\n    const fieldErrorMessage = formatMessage({\n        id: getTranslation('video-field.invalid.url'),\n        defaultMessage: 'Invalid video url',\n    });\n\n    return (\n        <Box>\n            <Field.Root id={name} hint={fieldDescription} error={invalidUrl ? fieldErrorMessage : undefined}>\n                <Field.Label>{fieldLabel}</Field.Label>\n                <Field.Input\n                    type=\"text\"\n                    name={name}\n                    value={videoUrl}\n                    onChange={onInputChange}\n                    placeholder={fieldPlaceholder}\n                />\n                <Field.Hint />\n                <Field.Error />\n            </Field.Root>\n\n            {provider && providerUid && (\n                <Flex paddingTop={4} justifyContent={'center'}>\n                    {provider === 'vimeo' && (\n                        <iframe\n                            src={`https://player.vimeo.com/video/${providerUid}${privacyHash ? '/' + privacyHash : ''}`}\n                            frameBorder={0}\n                            allowFullScreen\n                            height={200}\n                        ></iframe>\n                    )}\n                    {provider === 'youtube' && (\n                        <iframe\n                            src={`https://www.youtube.com/embed/${providerUid}`}\n                            frameBorder={0}\n                            allowFullScreen\n                            height={200}\n                        ></iframe>\n                    )}\n                    {provider === 'facebook' && (\n                        <iframe\n                            src={`https://www.facebook.com/plugins/video.php?href=${providerUid}&show_text=false&t=0`}\n                            frameBorder=\"0\"\n                            height={200}\n                            allowFullScreen\n                            allow=\"autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share\"\n                        />\n                    )}\n                </Flex>\n            )}\n        </Box>\n    );\n};\n\nexport default VideoInput;\n"],"names":[],"mappings":"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"}