diff --git a/src/components/forms/MediaForm.tsx b/src/components/forms/MediaForm.tsx index ac1b7249..d5325ae8 100644 --- a/src/components/forms/MediaForm.tsx +++ b/src/components/forms/MediaForm.tsx @@ -124,7 +124,7 @@ export const MediaForm = ({ form }: { form: UseFormReturnType }) => { placeholder="https://image-hosting/id.png" {...form.getInputProps(`showcaseLinks.${i}.url`)} error={link.mediaType === MediaType.Unknown ? 'Invalid link' : null} - onBlur={(e) => { + onChange={(e) => { form.getInputProps(`showcaseLinks.${link.id}`).onBlur(e); handleLinkChange(link.id, e.currentTarget.value); }} diff --git a/src/components/grant/MilestonesDrawer.tsx b/src/components/grant/MilestonesDrawer.tsx index bc857409..f999a981 100644 --- a/src/components/grant/MilestonesDrawer.tsx +++ b/src/components/grant/MilestonesDrawer.tsx @@ -4,7 +4,6 @@ import { Box, Button, Group, - NumberInput, Stack, Text, TextInput, @@ -293,8 +292,6 @@ export const MilestonesDrawer = ({ label={`Percentage`} name={`milestone-perc-${index + 1}`} type="number" - min={1} - step={1} placeholder="30" w={'48%'} value={formData[`milestone-perc-${index + 1}`]} diff --git a/src/utils/media.ts b/src/utils/media.ts index d7a75a4e..e7b213ef 100644 --- a/src/utils/media.ts +++ b/src/utils/media.ts @@ -12,8 +12,9 @@ export type ShowcaseLink = { mediaType: MediaType; }; -const youtubeRegex = - /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; +const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.*$/i; +const extractYoutubeIdRegex = + /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/; const vimeoRegex = /(?:https?:\/\/)?(?:www\.)?vimeo\.com(?:\/manage\/videos)?\/(\d+)\/([a-zA-Z0-9]+)(?:\?.*)?$/; @@ -40,14 +41,15 @@ export const detectMediaTypeFromUrl = (url: string): MediaType => { }; const transformYoutubeUrl = (url: string) => { - const match = url.match(youtubeRegex); + const match = url.match(extractYoutubeIdRegex); + console.log('match', match); - if (match && match[2].length === 11) { - const videoId = match[2]; + if (match && match[1]?.length === 11) { + const videoId = match[1]; return `https://www.youtube.com/embed/${videoId}?rel=0&modestBranding=1&showinfo=0&controls=0&title=0`; } - return null; + return url; }; const transformVimeoUrl = (url: string) => { @@ -60,7 +62,7 @@ const transformVimeoUrl = (url: string) => { return `https://player.vimeo.com/video/${videoId}?h=${h_id}&autopause=0&player_id=0&byline=0&title=0&transparent=1&autoplay=1&dnt=1&controls=0&background=1`; } - return null; + return url; }; export const parseShowcaseLink = ( @@ -68,6 +70,8 @@ export const parseShowcaseLink = ( ): { url: string | null; mediaType: MediaType } => { const mediaType = detectMediaTypeFromUrl(link); + console.log('mediaType', mediaType); + if (mediaType === MediaType.Youtube) { return { url: transformYoutubeUrl(link), @@ -87,3 +91,19 @@ export const parseShowcaseLink = ( mediaType, }; }; + +const testPNG = youtubeRegex.test( + 'https://presskit.manada.dev/images/cloudlines/0000screenshot.png' +); + +const youtubeURLTest = youtubeRegex.test( + 'https://www.youtube.com/watch?v=Sg-G1E1UwAY' +); + +const youtubeShareTest = youtubeRegex.test( + 'https://youtu.be/Sg-G1E1UwAY?feature=shared' +); + +console.log('test PNG', testPNG); +console.log('youtubeTest', youtubeURLTest); +console.log('youtubeShareTest', youtubeShareTest);