diff --git a/src/components/forms/video/EditPublishedVideoForm.js b/src/components/forms/video/EditPublishedVideoForm.js index 2bc1963..4a24cb0 100644 --- a/src/components/forms/video/EditPublishedVideoForm.js +++ b/src/components/forms/video/EditPublishedVideoForm.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useCallback } from 'react'; import axios from 'axios'; import { useRouter } from 'next/router'; import { useToast } from '@/hooks/useToast'; @@ -13,6 +13,14 @@ import { InputNumber } from 'primereact/inputnumber'; import { InputSwitch } from 'primereact/inputswitch'; import { Tooltip } from 'primereact/tooltip'; import { useEncryptContent } from '@/hooks/encryption/useEncryptContent'; +import dynamic from 'next/dynamic'; + +const MDEditor = dynamic( + () => import("@uiw/react-md-editor"), + { + ssr: false, + } +); const EditPublishedVideoForm = ({ event }) => { const router = useRouter(); @@ -24,7 +32,7 @@ const EditPublishedVideoForm = ({ event }) => { const [summary, setSummary] = useState(event.summary); const [price, setPrice] = useState(event.price); const [isPaidResource, setIsPaidResource] = useState(event.price ? true : false); - const [videoUrl, setVideoUrl] = useState(event.content); + const [videoEmbed, setVideoEmbed] = useState(event.content); const [coverImage, setCoverImage] = useState(event.image); const [additionalLinks, setAdditionalLinks] = useState(event.additionalLinks); const [topics, setTopics] = useState(event.topics); @@ -41,6 +49,10 @@ const EditPublishedVideoForm = ({ event }) => { console.log("event", event); }, [event]); + const handleVideoEmbedChange = useCallback((value) => { + setVideoEmbed(value || ''); + }, []); + const addLink = () => { setAdditionalLinks([...additionalLinks, '']); } @@ -76,22 +88,8 @@ const EditPublishedVideoForm = ({ event }) => { await addSigner(); } - let embedCode = ''; - - // Generate embed code based on video URL - if (videoUrl.includes('youtube.com') || videoUrl.includes('youtu.be')) { - const videoId = videoUrl.split('v=')[1] || videoUrl.split('/').pop(); - embedCode = `
`; - } else if (videoUrl.includes('vimeo.com')) { - const videoId = videoUrl.split('/').pop(); - embedCode = ``; - } else if ((price === undefined || price <= 0) && (videoUrl.includes('.mp4') || videoUrl.includes('.mov') || videoUrl.includes('.avi') || videoUrl.includes('.wmv') || videoUrl.includes('.flv') || videoUrl.includes('.webm'))) { - embedCode = ``; - } else if (videoUrl.includes('.mp4') || videoUrl.includes('.mov') || videoUrl.includes('.avi') || videoUrl.includes('.wmv') || videoUrl.includes('.flv') || videoUrl.includes('.webm')) { - const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000"; - const videoEmbed = ``; - embedCode = videoEmbed; - } + // Use the custom markdown/HTML content directly as the embed code + let embedCode = videoEmbed; // Encrypt content if it's a paid resource if (isPaidResource && price > 0) { @@ -183,8 +181,18 @@ const EditPublishedVideoForm = ({ event }) => { )} -