Add support for Youtube Shorts URLs in the front-end

cultuurnet · Oct 11, 2023 · 4e460fa · 4e460fa
1 parent 74c35f2
commit 4e460fa
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/pages/VideoLinkAddModal.test.ts b/src/pages/VideoLinkAddModal.test.ts
@@ -0,0 +1,18 @@
+import { ALLOWED_VIDEO_SOURCES_REGEX } from '@/pages/VideoLinkAddModal';
+
+describe('ALLOWED_VIDEO_SOURCES_REGEX', () => {
+  const tests = {
+    'https://www.youtube.com/watch?v=12345678901': true,
+    'http://youtu.be/12345678901?si=6N2ks_X0YOE_0Pmg': true,
+    'https://www.youtube.com/shorts/ViOS7SeT0HE': true,
+    'https://vimeo.com/789006133': true,
+    'http://www.vimeo.com/789006133': true,
+    'http://miveo.com/789006133': false,
+  };
+
+  test.each(Object.entries(tests))(
+    'can test whether video URL %p being valid is %p',
+    (url, expected) =>
+      expect(ALLOWED_VIDEO_SOURCES_REGEX.test(url)).toBe(expected),
+  );
+});
diff --git a/src/pages/VideoLinkAddModal.tsx b/src/pages/VideoLinkAddModal.tsx
@@ -17,7 +17,7 @@ type Props = {
 };
 
 const ALLOWED_VIDEO_SOURCES_REGEX: RegExp =
-  /^http(s?):\/\/(www\.)?((youtube\.com\/watch\?v=([^/#&?]*))|(vimeo\.com\/([^/#&?]*))|(youtu\.be\/([^/#&?]*)))/;
+  /^http(s?):\/\/(www\.)?((youtube\.com\/(watch\?v=|shorts\/)([^/#&?]*))|(vimeo\.com\/([^/#&?]*))|(youtu\.be\/([^/#&?]*)))/;
 
 type FormData = {
   link: string;
@@ -87,4 +87,4 @@ const VideoLinkAddModal = ({ visible, onConfirm, onClose }: Props) => {
   );
 };
 
-export { VideoLinkAddModal };
+export { ALLOWED_VIDEO_SOURCES_REGEX, VideoLinkAddModal };