mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-04-19 10:51:20 +00:00
Split video froms into seperate components, fixed published video editing
This commit is contained in:
austinkelsay
parent
2b366f5899
commit
7cbaf37e30
198
src/components/forms/video/EditDraftVideoForm.js
Normal file
198
src/components/forms/video/EditDraftVideoForm.js
Normal file
@ -0,0 +1,198 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
import { useRouter } from 'next/router';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { InputTextarea } from 'primereact/inputtextarea';
|
||||
import { InputNumber } from 'primereact/inputnumber';
|
||||
import { InputSwitch } from 'primereact/inputswitch';
|
||||
import GenericButton from '@/components/buttons/GenericButton';
|
||||
import { useToast } from '@/hooks/useToast';
|
||||
import { useSession } from 'next-auth/react';
|
||||
import { Tooltip } from 'primereact/tooltip';
|
||||
import 'primeicons/primeicons.css';
|
||||
|
||||
const EditDraftVideoForm = ({ draft }) => {
|
||||
const [title, setTitle] = useState(draft?.title || '');
|
||||
const [summary, setSummary] = useState(draft?.summary || '');
|
||||
const [price, setPrice] = useState(draft?.price || 0);
|
||||
const [isPaidResource, setIsPaidResource] = useState(draft?.price ? true : false);
|
||||
const [videoUrl, setVideoUrl] = useState(draft?.content || '');
|
||||
const [coverImage, setCoverImage] = useState(draft?.image || '');
|
||||
const [topics, setTopics] = useState(draft?.topics || ['']);
|
||||
const [additionalLinks, setAdditionalLinks] = useState(draft?.additionalLinks || ['']);
|
||||
|
||||
const router = useRouter();
|
||||
const { data: session } = useSession();
|
||||
const [user, setUser] = useState(null);
|
||||
const { showToast } = useToast();
|
||||
|
||||
useEffect(() => {
|
||||
if (session) {
|
||||
setUser(session.user);
|
||||
}
|
||||
}, [session]);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
// Verify user exists
|
||||
const userResponse = await axios.get(`/api/users/${user.pubkey}`);
|
||||
if (!userResponse.data) {
|
||||
showToast('error', 'Error', 'User not found', 'Please try again.');
|
||||
return;
|
||||
}
|
||||
|
||||
let embedCode = '';
|
||||
|
||||
// Check if it's a YouTube video
|
||||
if (videoUrl.includes('youtube.com') || videoUrl.includes('youtu.be')) {
|
||||
const videoId = videoUrl.split('v=')[1] || videoUrl.split('/').pop();
|
||||
embedCode = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><iframe src="https://www.youtube.com/embed/${videoId}?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe></div>`;
|
||||
}
|
||||
// Check if it's a Vimeo video
|
||||
else if (videoUrl.includes('vimeo.com')) {
|
||||
const videoId = videoUrl.split('/').pop();
|
||||
embedCode = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><iframe src="https://player.vimeo.com/video/${videoId}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe></div>`;
|
||||
}
|
||||
else if (!price || !price > 0 && (videoUrl.includes('.mp4') || videoUrl.includes('.mov') || videoUrl.includes('.avi') || videoUrl.includes('.wmv') || videoUrl.includes('.flv') || videoUrl.includes('.webm'))) {
|
||||
embedCode = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video src="${CDN_ENDPOINT}/${videoUrl}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls></video></div>`;
|
||||
}
|
||||
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 = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video src="${baseUrl}/api/get-video-url?videoKey=${encodeURIComponent(videoUrl)}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls></video></div>`;
|
||||
embedCode = videoEmbed;
|
||||
}
|
||||
|
||||
const formData = {
|
||||
title,
|
||||
summary,
|
||||
type: 'video',
|
||||
price: isPaidResource ? price : null,
|
||||
content: embedCode,
|
||||
image: coverImage,
|
||||
topics: [...new Set([...topics.map(topic => topic.trim().toLowerCase()), 'video'])],
|
||||
additionalLinks: additionalLinks.filter(link => link.trim() !== ''),
|
||||
user: userResponse.data.id,
|
||||
};
|
||||
|
||||
const response = await axios.put(`/api/drafts/${draft.id}`, formData);
|
||||
|
||||
if (response.status === 200) {
|
||||
showToast('success', 'Success', 'Video updated successfully.');
|
||||
if (response.data?.id) {
|
||||
router.push(`/draft/${response.data.id}`);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
showToast('error', 'Error', 'Failed to update video. Please try again.');
|
||||
}
|
||||
};
|
||||
|
||||
const handleTopicChange = (index, value) => {
|
||||
const updatedTopics = topics.map((topic, i) => i === index ? value : topic);
|
||||
setTopics(updatedTopics);
|
||||
};
|
||||
|
||||
const addTopic = (e) => {
|
||||
e.preventDefault();
|
||||
setTopics([...topics, '']);
|
||||
};
|
||||
|
||||
const removeTopic = (e, index) => {
|
||||
e.preventDefault();
|
||||
const updatedTopics = topics.filter((_, i) => i !== index);
|
||||
setTopics(updatedTopics);
|
||||
};
|
||||
|
||||
const handleLinkChange = (index, value) => {
|
||||
const updatedLinks = additionalLinks.map((link, i) => i === index ? value : link);
|
||||
setAdditionalLinks(updatedLinks);
|
||||
};
|
||||
|
||||
const addLink = (e) => {
|
||||
e.preventDefault();
|
||||
setAdditionalLinks([...additionalLinks, '']);
|
||||
};
|
||||
|
||||
const removeLink = (e, index) => {
|
||||
e.preventDefault();
|
||||
const updatedLinks = additionalLinks.filter((_, i) => i !== index);
|
||||
setAdditionalLinks(updatedLinks);
|
||||
};
|
||||
|
||||
if (!draft) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="p-inputgroup flex-1">
|
||||
<InputText value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title" />
|
||||
</div>
|
||||
<div className="p-inputgroup flex-1 mt-4">
|
||||
<InputTextarea value={summary} onChange={(e) => setSummary(e.target.value)} placeholder="Summary" rows={5} cols={30} />
|
||||
</div>
|
||||
|
||||
<div className="p-inputgroup flex-1 mt-4 flex-col">
|
||||
<p className="py-2">Paid Video</p>
|
||||
<InputSwitch checked={isPaidResource} onChange={(e) => setIsPaidResource(e.value)} />
|
||||
{isPaidResource && (
|
||||
<div className="p-inputgroup flex-1 py-4">
|
||||
<i className="pi pi-bolt p-inputgroup-addon text-2xl text-yellow-500"></i>
|
||||
<InputNumber value={price} onValueChange={(e) => setPrice(e.value)} placeholder="Price (sats)" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-inputgroup flex-1 mt-4">
|
||||
<InputText value={videoUrl} onChange={(e) => setVideoUrl(e.target.value)} placeholder="Video URL" />
|
||||
</div>
|
||||
<div className="p-inputgroup flex-1 mt-4">
|
||||
<InputText value={coverImage} onChange={(e) => setCoverImage(e.target.value)} placeholder="Cover Image URL" />
|
||||
</div>
|
||||
<div className="mt-8 flex-col w-full">
|
||||
<span className="pl-1 flex items-center">
|
||||
External Links
|
||||
<i className="pi pi-info-circle ml-2 cursor-pointer"
|
||||
data-pr-tooltip="Add any relevant external links that pair with this content"
|
||||
data-pr-position="right"
|
||||
data-pr-at="right+5 top"
|
||||
data-pr-my="left center-2"
|
||||
style={{ fontSize: '1rem', color: 'var(--primary-color)' }}
|
||||
/>
|
||||
</span>
|
||||
{additionalLinks.map((link, index) => (
|
||||
<div className="p-inputgroup flex-1" key={index}>
|
||||
<InputText value={link} onChange={(e) => handleLinkChange(index, e.target.value)} placeholder="https://example.com" className="w-full mt-2" />
|
||||
{index > 0 && (
|
||||
<GenericButton icon="pi pi-times" className="p-button-danger mt-2" onClick={(e) => removeLink(e, index)} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<div className="w-full flex flex-row items-end justify-end py-2">
|
||||
<GenericButton icon="pi pi-plus" onClick={addLink} />
|
||||
</div>
|
||||
<Tooltip target=".pi-info-circle" />
|
||||
</div>
|
||||
<div className="mt-4 flex-col w-full">
|
||||
{topics.map((topic, index) => (
|
||||
<div className="p-inputgroup flex-1" key={index}>
|
||||
<InputText value={topic} onChange={(e) => handleTopicChange(index, e.target.value)} placeholder="Topic" className="w-full mt-2" />
|
||||
{index > 0 && (
|
||||
<GenericButton icon="pi pi-times" className="p-button-danger mt-2" onClick={(e) => removeTopic(e, index)} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<div className="w-full flex flex-row items-end justify-end py-2">
|
||||
<GenericButton icon="pi pi-plus" onClick={addTopic} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center mt-8">
|
||||
<GenericButton type="submit" severity="success" outlined label="Update" />
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditDraftVideoForm;
|
||||
221
src/components/forms/video/EditPublishedVideoForm.js
Normal file
221
src/components/forms/video/EditPublishedVideoForm.js
Normal file
@ -0,0 +1,221 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useToast } from '@/hooks/useToast';
|
||||
import { useSession } from 'next-auth/react';
|
||||
import { useNDKContext } from '@/context/NDKContext';
|
||||
import GenericButton from '@/components/buttons/GenericButton';
|
||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
import { validateEvent } from '@/utils/nostr';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { InputTextarea } from 'primereact/inputtextarea';
|
||||
import { InputNumber } from 'primereact/inputnumber';
|
||||
import { InputSwitch } from 'primereact/inputswitch';
|
||||
import { Tooltip } from 'primereact/tooltip';
|
||||
|
||||
const EditPublishedVideoForm = ({ event }) => {
|
||||
const router = useRouter();
|
||||
const { data: session } = useSession();
|
||||
const { showToast } = useToast();
|
||||
const { ndk, addSigner } = useNDKContext();
|
||||
const [user, setUser] = useState(null);
|
||||
const [title, setTitle] = useState(event.title);
|
||||
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 [coverImage, setCoverImage] = useState(event.image);
|
||||
const [additionalLinks, setAdditionalLinks] = useState(event.additionalLinks);
|
||||
const [topics, setTopics] = useState(event.topics);
|
||||
|
||||
useEffect(() => {
|
||||
if (session) {
|
||||
setUser(session.user);
|
||||
}
|
||||
}, [session]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log("event", event);
|
||||
}, [event]);
|
||||
|
||||
const addLink = () => {
|
||||
setAdditionalLinks([...additionalLinks, '']);
|
||||
}
|
||||
|
||||
const removeLink = (e, index) => {
|
||||
setAdditionalLinks(additionalLinks.filter((_, i) => i !== index));
|
||||
}
|
||||
|
||||
const addTopic = () => {
|
||||
setTopics([...topics, '']);
|
||||
}
|
||||
|
||||
const removeTopic = (e, index) => {
|
||||
setTopics(topics.filter((_, i) => i !== index));
|
||||
}
|
||||
|
||||
const handleLinkChange = (index, value) => {
|
||||
const newLinks = [...additionalLinks];
|
||||
newLinks[index] = value;
|
||||
setAdditionalLinks(newLinks);
|
||||
};
|
||||
|
||||
const handleTopicChange = (index, value) => {
|
||||
const newTopics = [...topics];
|
||||
newTopics[index] = value;
|
||||
setTopics(newTopics);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
if (!ndk.signer) {
|
||||
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 = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><iframe src="https://www.youtube.com/embed/${videoId}?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe></div>`;
|
||||
} else if (videoUrl.includes('vimeo.com')) {
|
||||
const videoId = videoUrl.split('/').pop();
|
||||
embedCode = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><iframe src="https://player.vimeo.com/video/${videoId}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe></div>`;
|
||||
} else if (videoUrl.includes('.mp4') || videoUrl.includes('.mov') || videoUrl.includes('.webm')) {
|
||||
const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000";
|
||||
embedCode = price
|
||||
? `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video src="${baseUrl}/api/get-video-url?videoKey=${encodeURIComponent(videoUrl)}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls></video></div>`
|
||||
: `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video src="${process.env.NEXT_PUBLIC_CDN_ENDPOINT}/${videoUrl}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls></video></div>`;
|
||||
}
|
||||
|
||||
const ndkEvent = new NDKEvent(ndk);
|
||||
ndkEvent.kind = event.kind;
|
||||
ndkEvent.content = embedCode;
|
||||
ndkEvent.created_at = Math.floor(Date.now() / 1000);
|
||||
ndkEvent.pubkey = event.pubkey;
|
||||
ndkEvent.tags = [
|
||||
['title', title],
|
||||
['summary', summary],
|
||||
['image', coverImage],
|
||||
['t', 'video'],
|
||||
['d', event.d],
|
||||
];
|
||||
|
||||
// Add topics
|
||||
topics.forEach(topic => {
|
||||
if (topic && topic !== 'video') {
|
||||
ndkEvent.tags.push(['t', topic]);
|
||||
}
|
||||
});
|
||||
|
||||
// Add additional links
|
||||
additionalLinks.forEach(link => {
|
||||
if (link) {
|
||||
ndkEvent.tags.push(['r', link]);
|
||||
}
|
||||
});
|
||||
|
||||
// Add price if it exists
|
||||
if (price) {
|
||||
ndkEvent.tags.push(['price', price.toString()]);
|
||||
}
|
||||
|
||||
// Validate the event
|
||||
const validationResult = validateEvent(ndkEvent);
|
||||
if (validationResult !== true) {
|
||||
console.log("validationResult", validationResult);
|
||||
showToast('error', 'Error', validationResult);
|
||||
return;
|
||||
}
|
||||
|
||||
// Publish the event
|
||||
const signedEvent = await ndk.publish(ndkEvent);
|
||||
|
||||
if (signedEvent) {
|
||||
// update updated_at for resource in db
|
||||
const updatedResource = await axios.put(`/api/resources/${event.d}`, {
|
||||
updatedAt: new Date().toISOString(),
|
||||
});
|
||||
|
||||
if (updatedResource) {
|
||||
showToast('success', 'Success', 'Video updated successfully');
|
||||
router.push(`/details/${signedEvent.id}`);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating video:', error);
|
||||
showToast('error', 'Error', 'Failed to update video');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={(e) => handleSubmit(e)}>
|
||||
<div className="p-inputgroup flex-1">
|
||||
<InputText value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title" />
|
||||
</div>
|
||||
<div className="p-inputgroup flex-1 mt-4">
|
||||
<InputTextarea value={summary} onChange={(e) => setSummary(e.target.value)} placeholder="Summary" rows={5} cols={30} />
|
||||
</div>
|
||||
|
||||
<div className="p-inputgroup flex-1 mt-4 flex-col">
|
||||
<p className="py-2">Paid Video</p>
|
||||
<InputSwitch checked={isPaidResource} onChange={(e) => setIsPaidResource(e.value)} />
|
||||
{isPaidResource && (
|
||||
<div className="p-inputgroup flex-1 py-4">
|
||||
<i className="pi pi-bolt p-inputgroup-addon text-2xl text-yellow-500"></i>
|
||||
<InputNumber value={price} onValueChange={(e) => setPrice(e.value)} placeholder="Price (sats)" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-inputgroup flex-1 mt-4">
|
||||
<InputText value={videoUrl} onChange={(e) => setVideoUrl(e.target.value)} placeholder="Video URL" />
|
||||
</div>
|
||||
<div className="p-inputgroup flex-1 mt-4">
|
||||
<InputText value={coverImage} onChange={(e) => setCoverImage(e.target.value)} placeholder="Cover Image URL" />
|
||||
</div>
|
||||
<div className="mt-8 flex-col w-full">
|
||||
<span className="pl-1 flex items-center">
|
||||
External Links
|
||||
<i className="pi pi-info-circle ml-2 cursor-pointer"
|
||||
data-pr-tooltip="Add any relevant external links that pair with this content (these links are currently not encrypted for 'paid' content)"
|
||||
data-pr-position="right"
|
||||
data-pr-at="right+5 top"
|
||||
data-pr-my="left center-2"
|
||||
style={{ fontSize: '1rem', color: 'var(--primary-color)' }}
|
||||
/>
|
||||
</span>
|
||||
{additionalLinks.map((link, index) => (
|
||||
<div className="p-inputgroup flex-1" key={index}>
|
||||
<InputText value={link} onChange={(e) => handleLinkChange(index, e.target.value)} placeholder="https://example.com" className="w-full mt-2" />
|
||||
{index > 0 && (
|
||||
<GenericButton icon="pi pi-times" className="p-button-danger mt-2" onClick={(e) => removeLink(e, index)} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<div className="w-full flex flex-row items-end justify-end py-2">
|
||||
<GenericButton icon="pi pi-plus" onClick={addLink} />
|
||||
</div>
|
||||
<Tooltip target=".pi-info-circle" />
|
||||
</div>
|
||||
<div className="mt-4 flex-col w-full">
|
||||
{topics.map((topic, index) => (
|
||||
<div className="p-inputgroup flex-1" key={index}>
|
||||
<InputText value={topic} onChange={(e) => handleTopicChange(index, e.target.value)} placeholder="Topic" className="w-full mt-2" />
|
||||
{index > 0 && (
|
||||
<GenericButton icon="pi pi-times" className="p-button-danger mt-2" onClick={(e) => removeTopic(e, index)} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<div className="w-full flex flex-row items-end justify-end py-2">
|
||||
<GenericButton icon="pi pi-plus" onClick={addTopic} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center mt-8">
|
||||
<GenericButton type="submit" severity="success" outlined label={"Update"} />
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditPublishedVideoForm;
|
||||
@ -14,19 +14,18 @@ import 'primereact/resources/primereact.min.css';
|
||||
|
||||
const CDN_ENDPOINT = process.env.NEXT_PUBLIC_CDN_ENDPOINT;
|
||||
|
||||
// todo need to handle case where published video is being edited and not just draft
|
||||
const VideoForm = ({ draft = null }) => {
|
||||
const [title, setTitle] = useState(draft?.title || '');
|
||||
const [summary, setSummary] = useState(draft?.summary || '');
|
||||
const [price, setPrice] = useState(draft?.price || 0);
|
||||
const [isPaidResource, setIsPaidResource] = useState(draft?.price ? true : false);
|
||||
const [videoUrl, setVideoUrl] = useState(draft?.content || '');
|
||||
const [coverImage, setCoverImage] = useState(draft?.image || '');
|
||||
const [topics, setTopics] = useState(draft?.topics || ['']);
|
||||
const [additionalLinks, setAdditionalLinks] = useState(draft?.additionalLinks || ['']);
|
||||
const VideoForm = () => {
|
||||
const [title, setTitle] = useState('');
|
||||
const [summary, setSummary] = useState('');
|
||||
const [price, setPrice] = useState(0);
|
||||
const [isPaidResource, setIsPaidResource] = useState(false);
|
||||
const [videoUrl, setVideoUrl] = useState('');
|
||||
const [coverImage, setCoverImage] = useState('');
|
||||
const [topics, setTopics] = useState(['']);
|
||||
const [additionalLinks, setAdditionalLinks] = useState(['']);
|
||||
|
||||
const router = useRouter();
|
||||
const { data: session, status } = useSession();
|
||||
const { data: session } = useSession();
|
||||
const [user, setUser] = useState(null);
|
||||
const { showToast } = useToast();
|
||||
|
||||
@ -36,19 +35,6 @@ const VideoForm = ({ draft = null }) => {
|
||||
}
|
||||
}, [session]);
|
||||
|
||||
useEffect(() => {
|
||||
if (draft) {
|
||||
setTitle(draft.title);
|
||||
setSummary(draft.summary);
|
||||
setPrice(draft.price || 0);
|
||||
setIsPaidResource(draft.price ? true : false);
|
||||
setVideoUrl(draft.content);
|
||||
setCoverImage(draft.image);
|
||||
setTopics(draft.topics || ['']);
|
||||
setAdditionalLinks(draft.additionalLinks || ['']);
|
||||
}
|
||||
}, [draft]);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
let embedCode = '';
|
||||
@ -73,43 +59,38 @@ const VideoForm = ({ draft = null }) => {
|
||||
}
|
||||
// Add more conditions here for other video services
|
||||
|
||||
const userResponse = await axios.get(`/api/users/${user.pubkey}`);
|
||||
|
||||
if (!userResponse.data) {
|
||||
showToast('error', 'Error', 'User not found', 'Please try again.');
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
const formData = {
|
||||
title,
|
||||
summary,
|
||||
type: 'video',
|
||||
price: isPaidResource ? price : null,
|
||||
content: embedCode,
|
||||
image: coverImage,
|
||||
user: userResponse.data.id,
|
||||
topics: [...new Set([...topics.map(topic => topic.trim().toLowerCase()), 'video'])],
|
||||
additionalLinks: additionalLinks.filter(link => link.trim() !== ''),
|
||||
};
|
||||
|
||||
if (payload && payload.user) {
|
||||
const url = draft ? `/api/drafts/${draft.id}` : '/api/drafts';
|
||||
const method = draft ? 'put' : 'post';
|
||||
try {
|
||||
const userResponse = await axios.get(`/api/users/${user.pubkey}`);
|
||||
if (!userResponse.data) {
|
||||
showToast('error', 'Error', 'User not found', 'Please try again.');
|
||||
return;
|
||||
}
|
||||
|
||||
axios[method](url, payload)
|
||||
.then(response => {
|
||||
if (response.status === 200 || response.status === 201) {
|
||||
showToast('success', 'Success', draft ? 'Video updated successfully.' : 'Video saved as draft.');
|
||||
|
||||
if (response.data?.id) {
|
||||
router.push(`/draft/${response.data.id}`);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
showToast('error', 'Error', 'Failed to save video. Please try again.');
|
||||
});
|
||||
const response = await axios.post('/api/drafts', {
|
||||
...formData,
|
||||
user: userResponse.data.id,
|
||||
});
|
||||
|
||||
if (response.status === 201) {
|
||||
showToast('success', 'Success', 'Video saved as draft.');
|
||||
if (response.data?.id) {
|
||||
router.push(`/draft/${response.data.id}`);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
showToast('error', 'Error', 'Failed to save video. Please try again.');
|
||||
}
|
||||
};
|
||||
|
||||
@ -209,7 +190,7 @@ const VideoForm = ({ draft = null }) => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center mt-8">
|
||||
<GenericButton type="submit" severity="success" outlined label={draft ? "Update" : "Submit"} />
|
||||
<GenericButton type="submit" severity="success" outlined label="Submit" />
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
@ -10,7 +10,7 @@ const appConfig = {
|
||||
"wss://purplerelay.com/",
|
||||
"wss://relay.devs.tools/"
|
||||
],
|
||||
authorPubkeys: ["f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741", "c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345"],
|
||||
authorPubkeys: ["f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741", "c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345", "6260f29fa75c91aaa292f082e5e87b438d2ab4fdf96af398567b01802ee2fcd4"],
|
||||
customLightningAddresses: [
|
||||
{
|
||||
// todo remove need for lowercase
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import MenuTab from "@/components/menutab/MenuTab";
|
||||
import DocumentForm from "@/components/forms/DocumentForm";
|
||||
import VideoForm from "@/components/forms/VideoForm";
|
||||
import VideoForm from "@/components/forms/video/VideoForm";
|
||||
import CourseForm from "@/components/forms/course/CourseForm";
|
||||
import CombinedResourceForm from "@/components/forms/CombinedResourceForm";
|
||||
import { useIsAdmin } from "@/hooks/useIsAdmin";
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { parseEvent } from "@/utils/nostr";
|
||||
import DocumentForm from "@/components/forms/DocumentForm";
|
||||
import VideoForm from "@/components/forms/VideoForm";
|
||||
import EditPublishedVideoForm from "@/components/forms/video/EditPublishedVideoForm";
|
||||
import CourseForm from "@/components/forms/course/CourseForm";
|
||||
import CombinedResourceForm from "@/components/forms/CombinedResourceForm";
|
||||
import { useNDKContext } from "@/context/NDKContext";
|
||||
@ -10,7 +10,6 @@ import { useToast } from "@/hooks/useToast";
|
||||
|
||||
export default function Edit() {
|
||||
const [event, setEvent] = useState(null);
|
||||
|
||||
const {ndk, addSigner} = useNDKContext();
|
||||
const router = useRouter();
|
||||
const { showToast } = useToast();
|
||||
@ -40,7 +39,7 @@ export default function Edit() {
|
||||
<div className="w-[80vw] max-w-[80vw] mx-auto my-8 flex flex-col justify-center">
|
||||
<h2 className="text-center mb-8">Edit Published Event</h2>
|
||||
{event?.topics.includes('course') && <CourseForm draft={event} isPublished />}
|
||||
{event?.topics.includes('video') && !event?.topics.includes('document') && <VideoForm draft={event} isPublished />}
|
||||
{event?.topics.includes('video') && !event?.topics.includes('document') && <EditPublishedVideoForm event={event} />}
|
||||
{event?.topics.includes('document') && !event?.topics.includes('video') && <DocumentForm draft={event} isPublished />}
|
||||
{event?.topics.includes('video') && event?.topics.includes('document') && <CombinedResourceForm draft={event} isPublished />}
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import axios from "axios";
|
||||
import DocumentForm from "@/components/forms/DocumentForm";
|
||||
import VideoForm from "@/components/forms/VideoForm";
|
||||
import EditDraftVideoForm from "@/components/forms/video/EditDraftVideoForm";
|
||||
import CourseForm from "@/components/forms/course/CourseForm";
|
||||
import CombinedResourceForm from "@/components/forms/CombinedResourceForm";
|
||||
import { useIsAdmin } from "@/hooks/useIsAdmin";
|
||||
@ -37,7 +37,7 @@ const Edit = () => {
|
||||
<div className="w-full min-bottom-bar:w-[86vw] max-sidebar:w-[100vw] px-8 mx-auto my-8 flex flex-col justify-center">
|
||||
<h2 className="text-center mb-8">Edit Draft</h2>
|
||||
{draft?.type === 'course' && <CourseForm draft={draft} />}
|
||||
{draft?.type === 'video' && <VideoForm draft={draft} />}
|
||||
{draft?.type === 'video' && <EditDraftVideoForm draft={draft} />}
|
||||
{draft?.type === 'document' && <DocumentForm draft={draft} />}
|
||||
{draft?.type === 'combined' && <CombinedResourceForm draft={draft} />}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user