From 4e57dae3fbb7a3eaa89d96ec14bf93d458d30b47 Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Tue, 6 Aug 2024 10:45:57 -0700
Subject: [PATCH] fix regex issues, media carousel

---
 src/components/forms/MediaForm.tsx        |  2 +-
 src/components/grant/MilestonesDrawer.tsx |  3 --
 src/utils/media.ts                        | 34 ++++++++++++++++++-----
 3 files changed, 28 insertions(+), 11 deletions(-)

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<any> }) => {
             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);