{mediaType === 'video' ? (
@@ -19,10 +19,12 @@ const CardDisplay = ({ mediaSrc, mediaType, title, description, link }) => {
)}
-
-
+
+);
+};
+
+export default Video;
diff --git a/src/components/EmbedVideo/index.jsx b/src/components/EmbedVideo/index.jsx
index c8b76b18..0487db82 100644
--- a/src/components/EmbedVideo/index.jsx
+++ b/src/components/EmbedVideo/index.jsx
@@ -1,15 +1,42 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
const EmbedVideo = ({ videoUrl }) => {
- let embedUrl = '';
+ const [embedUrl, setEmbedUrl] = useState('');
+ const [error, setError] = useState(null);
- // Check if it's a YouTube or Vidyard URL and convert it to an embeddable format
- if (videoUrl.includes('youtube.com') || videoUrl.includes('youtu.be')) {
- const videoId = videoUrl.split('v=')[1]?.split('&')[0] || videoUrl.split('/').pop();
- embedUrl = `https://www.youtube.com/embed/${videoId}`;
- } else if (videoUrl.includes('vidyard.com')) {
- const videoId = videoUrl.split('/')[videoUrl.split('/').length - 1];
- embedUrl = `https://play.vidyard.com/${videoId}.html`;
+ useEffect(() => {
+ try {
+ let newEmbedUrl = '';
+
+ // Check if it's a YouTube URL and convert it to an embeddable format
+ if (videoUrl.includes('youtube.com') || videoUrl.includes('youtu.be')) {
+ const videoId = videoUrl.split('v=')[1]?.split('&')[0] || videoUrl.split('/').pop();
+ newEmbedUrl = `https://www.youtube.com/embed/${videoId}`;
+ }
+ // Check if it's a Vidyard URL and convert it to an embeddable format
+ else if (videoUrl.includes('vidyard.com')) {
+ const videoId = videoUrl.split('/')[videoUrl.split('/').length - 1];
+ newEmbedUrl = `https://play.vidyard.com/${videoId}.html`;
+ }
+ // Check if it's a Vimeo URL and convert it to an embeddable format
+ else if (videoUrl.includes('vimeo.com')) {
+ const videoId = videoUrl.split('/').pop();
+ newEmbedUrl = `https://player.vimeo.com/video/${videoId}`;
+ }
+ // If the URL is not recognized, set an error
+ else {
+ throw new Error('Unsupported video platform. Please use YouTube, Vidyard, or Vimeo.');
+ }
+
+ setEmbedUrl(newEmbedUrl);
+ setError(null); // Clear any previous errors if a valid URL is processed
+ } catch (err) {
+ setError(err.message);
+ }
+ }, [videoUrl]);
+
+ if (error) {
+ return
+
+
);
}
{title}
- {description}
+ {(title || description) && ( +
+
+ )}
);
};
diff --git a/src/components/CardDisplay/video.jsx b/src/components/CardDisplay/video.jsx
new file mode 100644
index 00000000..a6405b8f
--- /dev/null
+++ b/src/components/CardDisplay/video.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import EmbedVideo from '../EmbedVideo'; // Import the new EmbedVideo component
+
+const Video = ({ mediaSrc, mediaType, title, className }) => { return (
+ {title}
+ {description}
+ {mediaType === 'video' ? (
+
+ ) : mediaType === 'embed' ? (
+
+ {error}
; // Display error message in red } return ( diff --git a/src/components/InfoTooltip.jsx b/src/components/InfoTooltip.jsx index 674b74a8..461b4a9b 100644 --- a/src/components/InfoTooltip.jsx +++ b/src/components/InfoTooltip.jsx @@ -4,9 +4,9 @@ import { Info } from 'react-feather'; export default function InfoTooltip({ label }) { return ( -