saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-05 00:32:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement ZapThreads comments for all content types (video, document, combined) and course pages

Browse Source
This commit is contained in:
kiwihodl 2025-04-02 16:38:37 -05:00 committed by austinkelsay
parent 62441e01a0
commit 07e94fbb40
No known key found for this signature in database
GPG Key ID: 5A763922E5BA08EE
4 changed files with 523 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
src/components/content/combined/CombinedDetails.js
View File

@ -1,22 +1,27 @@
import React, { useEffect, useState, useRef } from 'react'; import React, { useEffect, useState, useRef } from "react";
import axios from 'axios'; import axios from "axios";
import { useToast } from '@/hooks/useToast'; import { useToast } from "@/hooks/useToast";
import { Tag } from 'primereact/tag'; import { Tag } from "primereact/tag";
import Image from 'next/image'; import Image from "next/image";
import { useRouter } from 'next/router'; import { useRouter } from "next/router";
import ResourcePaymentButton from '@/components/bitcoinConnect/ResourcePaymentButton'; import ResourcePaymentButton from "@/components/bitcoinConnect/ResourcePaymentButton";
import ZapDisplay from '@/components/zaps/ZapDisplay'; import ZapDisplay from "@/components/zaps/ZapDisplay";
import GenericButton from '@/components/buttons/GenericButton'; import GenericButton from "@/components/buttons/GenericButton";
import { useImageProxy } from '@/hooks/useImageProxy'; import { useImageProxy } from "@/hooks/useImageProxy";
import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscription'; import { useZapsSubscription } from "@/hooks/nostrQueries/zaps/useZapsSubscription";
import { getTotalFromZaps } from '@/utils/lightning'; import { getTotalFromZaps } from "@/utils/lightning";
import { useSession } from 'next-auth/react'; import { useSession } from "next-auth/react";
import useWindowWidth from '@/hooks/useWindowWidth'; import useWindowWidth from "@/hooks/useWindowWidth";
import dynamic from 'next/dynamic'; import dynamic from "next/dynamic";
import { Toast } from 'primereact/toast'; import { Toast } from "primereact/toast";
import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu'; import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
import ZapThreadsWrapper from "@/components/ZapThreadsWrapper";
import appConfig from "@/config/appConfig";
import { nip19 } from "nostr-tools";
const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), { ssr: false }); const MDDisplay = dynamic(() => import("@uiw/react-markdown-preview"), {
ssr: false,
});
const CombinedDetails = ({ const CombinedDetails = ({
processedEvent, processedEvent,
@ -45,62 +50,72 @@ const CombinedDetails = ({
const isMobileView = windowWidth <= 768; const isMobileView = windowWidth <= 768;
const menuRef = useRef(null); const menuRef = useRef(null);
const toastRef = useRef(null); const toastRef = useRef(null);
const [nsec, setNsec] = useState(null);
const [npub, setNpub] = useState(null);
const handleDelete = async () => { const handleDelete = async () => {
try { try {
const response = await axios.delete(`/api/resources/${processedEvent.d}`); const response = await axios.delete(`/api/resources/${processedEvent.d}`);
if (response.status === 204) { if (response.status === 204) {
showToast('success', 'Success', 'Resource deleted successfully.'); showToast("success", "Success", "Resource deleted successfully.");
router.push('/'); router.push("/");
} }
} catch (error) { } catch (error) {
if (error.response?.data?.error?.includes('Invalid `prisma.resource.delete()`')) { if (
error.response?.data?.error?.includes(
"Invalid `prisma.resource.delete()`"
)
) {
showToast( showToast(
'error', "error",
'Error', "Error",
'Resource cannot be deleted because it is part of a course, delete the course first.' "Resource cannot be deleted because it is part of a course, delete the course first."
); );
} else { } else {
showToast('error', 'Error', 'Failed to delete resource. Please try again.'); showToast(
"error",
"Error",
"Failed to delete resource. Please try again."
);
} }
} }
}; };
const authorMenuItems = [ const authorMenuItems = [
{ {
label: 'Edit', label: "Edit",
icon: 'pi pi-pencil', icon: "pi pi-pencil",
command: () => router.push(`/details/${processedEvent.id}/edit`), command: () => router.push(`/details/${processedEvent.id}/edit`),
}, },
{ {
label: 'Delete', label: "Delete",
icon: 'pi pi-trash', icon: "pi pi-trash",
command: handleDelete, command: handleDelete,
}, },
{ {
label: 'View Nostr note', label: "View Nostr note",
icon: 'pi pi-globe', icon: "pi pi-globe",
command: () => { command: () => {
window.open(`https://habla.news/a/${nAddress}`, '_blank'); window.open(`https://habla.news/a/${nAddress}`, "_blank");
}, },
}, },
]; ];
const userMenuItems = [ const userMenuItems = [
{ {
label: 'View Nostr note', label: "View Nostr note",
icon: 'pi pi-globe', icon: "pi pi-globe",
command: () => { command: () => {
window.open(`https://habla.news/a/${nAddress}`, '_blank'); window.open(`https://habla.news/a/${nAddress}`, "_blank");
}, },
}, },
]; ];
if (course) { if (course) {
userMenuItems.unshift({ userMenuItems.unshift({
label: isMobileView ? 'Course' : 'Open Course', label: isMobileView ? "Course" : "Open Course",
icon: 'pi pi-external-link', icon: "pi pi-external-link",
command: () => window.open(`/course/${course}`, '_blank'), command: () => window.open(`/course/${course}`, "_blank"),
}); });
} }
@ -108,13 +123,13 @@ const CombinedDetails = ({
if (isLesson) { if (isLesson) {
axios axios
.get(`/api/resources/${processedEvent.d}`) .get(`/api/resources/${processedEvent.d}`)
.then(res => { .then((res) => {
if (res.data && res.data.lessons[0]?.courseId) { if (res.data && res.data.lessons[0]?.courseId) {
setCourse(res.data.lessons[0]?.courseId); setCourse(res.data.lessons[0]?.courseId);
} }
}) })
.catch(err => { .catch((err) => {
console.error('err', err); console.error("err", err);
}); });
} }
}, [processedEvent.d, isLesson]); }, [processedEvent.d, isLesson]);
@ -126,11 +141,20 @@ const CombinedDetails = ({
} }
}, [zaps, processedEvent]); }, [zaps, processedEvent]);
useEffect(() => {
if (session?.user?.privkey) {
const privkeyBuffer = Buffer.from(session.user.privkey, "hex");
setNsec(nip19.nsecEncode(privkeyBuffer));
} else if (session?.user?.pubkey) {
setNpub(nip19.npubEncode(session.user.pubkey));
}
}, [session]);
const renderPaymentMessage = () => { const renderPaymentMessage = () => {
if (session?.user?.role?.subscribed && decryptedContent) { if (session?.user?.role?.subscribed && decryptedContent) {
return ( return (
<GenericButton <GenericButton
tooltipOptions={{ position: 'top' }} tooltipOptions={{ position: "top" }}
tooltip="You are subscribed so you can access all paid content" tooltip="You are subscribed so you can access all paid content"
icon="pi pi-check" icon="pi pi-check"
label="Subscribed" label="Subscribed"
@ -145,14 +169,14 @@ const CombinedDetails = ({
if ( if (
isLesson && isLesson &&
course && course &&
session?.user?.purchased?.some(purchase => purchase.courseId === course) session?.user?.purchased?.some((purchase) => purchase.courseId === course)
) { ) {
const coursePurchase = session?.user?.purchased?.find( const coursePurchase = session?.user?.purchased?.find(
purchase => purchase.courseId === course (purchase) => purchase.courseId === course
); );
return ( return (
<GenericButton <GenericButton
tooltipOptions={{ position: 'top' }} tooltipOptions={{ position: "top" }}
tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${coursePurchase?.course?.price} sats for the course.`} tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${coursePurchase?.course?.price} sats for the course.`}
icon="pi pi-check" icon="pi pi-check"
label={`Paid ${coursePurchase?.course?.price} sats`} label={`Paid ${coursePurchase?.course?.price} sats`}
@ -183,10 +207,14 @@ const CombinedDetails = ({
); );
} }
if (paidResource && author && processedEvent?.pubkey === session?.user?.pubkey) { if (
paidResource &&
author &&
processedEvent?.pubkey === session?.user?.pubkey
) {
return ( return (
<GenericButton <GenericButton
tooltipOptions={{ position: 'top' }} tooltipOptions={{ position: "top" }}
tooltip={`You created this paid content, users must pay ${processedEvent.price} sats to access it`} tooltip={`You created this paid content, users must pay ${processedEvent.price} sats to access it`}
icon="pi pi-check" icon="pi pi-check"
label={`Price ${processedEvent.price} sats`} label={`Price ${processedEvent.price} sats`}
@ -203,7 +231,12 @@ const CombinedDetails = ({
const renderContent = () => { const renderContent = () => {
if (decryptedContent) { if (decryptedContent) {
return <MDDisplay className="p-2 rounded-lg w-full" source={decryptedContent} />; return (
<MDDisplay
className="p-2 rounded-lg w-full"
source={decryptedContent}
/>
);
} }
if (paidResource && !decryptedContent) { if (paidResource && !decryptedContent) {
@ -231,7 +264,12 @@ const CombinedDetails = ({
} }
if (processedEvent?.content) { if (processedEvent?.content) {
return <MDDisplay className="p-4 rounded-lg w-full" source={processedEvent.content} />; return (
<MDDisplay
className="p-4 rounded-lg w-full"
source={processedEvent.content}
/>
);
} }
return null; return null;
@ -241,7 +279,12 @@ const CombinedDetails = ({
<div className="w-full"> <div className="w-full">
<Toast ref={toastRef} /> <Toast ref={toastRef} />
<div className="relative w-full h-[400px] mb-8"> <div className="relative w-full h-[400px] mb-8">
<Image alt="background image" src={returnImageProxy(image)} fill className="object-cover" /> <Image
alt="background image"
src={returnImageProxy(image)}
fill
className="object-cover"
/>
<div className="absolute inset-0 bg-black bg-opacity-20"></div> <div className="absolute inset-0 bg-black bg-opacity-20"></div>
</div> </div>
<div className="w-full mx-auto px-4 py-8 -mt-32 relative z-10 max-mob:px-0 max-tab:px-0"> <div className="w-full mx-auto px-4 py-8 -mt-32 relative z-10 max-mob:px-0 max-tab:px-0">
@ -258,9 +301,11 @@ const CombinedDetails = ({
{topics?.map((topic, index) => ( {topics?.map((topic, index) => (
<Tag className="text-[#f8f8ff]" key={index} value={topic} /> <Tag className="text-[#f8f8ff]" key={index} value={topic} />
))} ))}
{isLesson && <Tag size="small" className="text-[#f8f8ff]" value="lesson" />} {isLesson && (
<Tag size="small" className="text-[#f8f8ff]" value="lesson" />
)}
</div> </div>
{summary?.split('\n').map((line, index) => ( {summary?.split("\n").map((line, index) => (
<p key={index}>{line}</p> <p key={index}>{line}</p>
))} ))}
<div className="flex items-center justify-between mt-8"> <div className="flex items-center justify-between mt-8">
@ -273,7 +318,7 @@ const CombinedDetails = ({
className="rounded-full mr-4" className="rounded-full mr-4"
/> />
<p className="text-lg text-white"> <p className="text-lg text-white">
By{' '} By{" "}
<a <a
rel="noreferrer noopener" rel="noreferrer noopener"
target="_blank" target="_blank"
@ -292,6 +337,28 @@ const CombinedDetails = ({
</div> </div>
</div> </div>
<div className="w-full mt-4">{renderPaymentMessage()}</div> <div className="w-full mt-4">{renderPaymentMessage()}</div>
{nAddress && (
<div className="mt-8">
{!paidResource ||
decryptedContent ||
session?.user?.role?.subscribed ? (
<ZapThreadsWrapper
anchor={nAddress}
user={session?.user ? nsec || npub : null}
relays={appConfig.defaultRelayUrls.join(",")}
disable="zaps"
isAuthorized={true}
/>
) : (
<div className="text-center p-4 bg-gray-800/50 rounded-lg">
<p className="text-gray-400">
Comments are only available to content purchasers,
subscribers, and the content creator.
</p>
</div>
)}
</div>
)}
</div> </div>
{renderContent()} {renderContent()}
</div> </div>

178
src/components/content/documents/DocumentDetails.js
View File

@ -1,22 +1,25 @@
import React, { useEffect, useState, useRef } from 'react'; import React, { useEffect, useState, useRef } from "react";
import axios from 'axios'; import axios from "axios";
import { useToast } from '@/hooks/useToast'; import { useToast } from "@/hooks/useToast";
import { Tag } from 'primereact/tag'; import { Tag } from "primereact/tag";
import Image from 'next/image'; import Image from "next/image";
import { useRouter } from 'next/router'; import { useRouter } from "next/router";
import ResourcePaymentButton from '@/components/bitcoinConnect/ResourcePaymentButton'; import ResourcePaymentButton from "@/components/bitcoinConnect/ResourcePaymentButton";
import ZapDisplay from '@/components/zaps/ZapDisplay'; import ZapDisplay from "@/components/zaps/ZapDisplay";
import GenericButton from '@/components/buttons/GenericButton'; import GenericButton from "@/components/buttons/GenericButton";
import { useImageProxy } from '@/hooks/useImageProxy'; import { useImageProxy } from "@/hooks/useImageProxy";
import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscription'; import { useZapsSubscription } from "@/hooks/nostrQueries/zaps/useZapsSubscription";
import { getTotalFromZaps } from '@/utils/lightning'; import { getTotalFromZaps } from "@/utils/lightning";
import { useSession } from 'next-auth/react'; import { useSession } from "next-auth/react";
import useWindowWidth from '@/hooks/useWindowWidth'; import useWindowWidth from "@/hooks/useWindowWidth";
import dynamic from 'next/dynamic'; import dynamic from "next/dynamic";
import { Toast } from 'primereact/toast'; import { Toast } from "primereact/toast";
import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu'; import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
import ZapThreadsWrapper from "@/components/ZapThreadsWrapper";
import appConfig from "@/config/appConfig";
import { nip19 } from "nostr-tools";
const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), { const MDDisplay = dynamic(() => import("@uiw/react-markdown-preview"), {
ssr: false, ssr: false,
}); });
@ -40,75 +43,87 @@ const DocumentDetails = ({
const [course, setCourse] = useState(null); const [course, setCourse] = useState(null);
const router = useRouter(); const router = useRouter();
const { returnImageProxy } = useImageProxy(); const { returnImageProxy } = useImageProxy();
const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: processedEvent }); const { zaps, zapsLoading, zapsError } = useZapsSubscription({
event: processedEvent,
});
const { data: session, status } = useSession(); const { data: session, status } = useSession();
const { showToast } = useToast(); const { showToast } = useToast();
const windowWidth = useWindowWidth(); const windowWidth = useWindowWidth();
const isMobileView = windowWidth <= 768; const isMobileView = windowWidth <= 768;
const menuRef = useRef(null); const menuRef = useRef(null);
const toastRef = useRef(null); const toastRef = useRef(null);
const [nsec, setNsec] = useState(null);
const [npub, setNpub] = useState(null);
const handleDelete = async () => { const handleDelete = async () => {
try { try {
const response = await axios.delete(`/api/resources/${processedEvent.d}`); const response = await axios.delete(`/api/resources/${processedEvent.d}`);
if (response.status === 204) { if (response.status === 204) {
showToast('success', 'Success', 'Resource deleted successfully.'); showToast("success", "Success", "Resource deleted successfully.");
router.push('/'); router.push("/");
} }
} catch (error) { } catch (error) {
if ( if (
error.response && error.response &&
error.response.data && error.response.data &&
error.response.data.error.includes('Invalid `prisma.resource.delete()`') error.response.data.error.includes("Invalid `prisma.resource.delete()`")
) { ) {
showToast( showToast(
'error', "error",
'Error', "Error",
'Resource cannot be deleted because it is part of a course, delete the course first.' "Resource cannot be deleted because it is part of a course, delete the course first."
); );
} else if (error.response && error.response.data && error.response.data.error) { } else if (
showToast('error', 'Error', error.response.data.error); error.response &&
error.response.data &&
error.response.data.error
) {
showToast("error", "Error", error.response.data.error);
} else { } else {
showToast('error', 'Error', 'Failed to delete resource. Please try again.'); showToast(
"error",
"Error",
"Failed to delete resource. Please try again."
);
} }
} }
}; };
const authorMenuItems = [ const authorMenuItems = [
{ {
label: 'Edit', label: "Edit",
icon: 'pi pi-pencil', icon: "pi pi-pencil",
command: () => router.push(`/details/${processedEvent.id}/edit`), command: () => router.push(`/details/${processedEvent.id}/edit`),
}, },
{ {
label: 'Delete', label: "Delete",
icon: 'pi pi-trash', icon: "pi pi-trash",
command: handleDelete, command: handleDelete,
}, },
{ {
label: 'View Nostr note', label: "View Nostr note",
icon: 'pi pi-globe', icon: "pi pi-globe",
command: () => { command: () => {
window.open(`https://habla.news/a/${nAddress}`, '_blank'); window.open(`https://habla.news/a/${nAddress}`, "_blank");
}, },
}, },
]; ];
const userMenuItems = [ const userMenuItems = [
{ {
label: 'View Nostr note', label: "View Nostr note",
icon: 'pi pi-globe', icon: "pi pi-globe",
command: () => { command: () => {
window.open(`https://habla.news/a/${nAddress}`, '_blank'); window.open(`https://habla.news/a/${nAddress}`, "_blank");
}, },
}, },
]; ];
if (course) { if (course) {
userMenuItems.unshift({ userMenuItems.unshift({
label: isMobileView ? 'Course' : 'Open Course', label: isMobileView ? "Course" : "Open Course",
icon: 'pi pi-external-link', icon: "pi pi-external-link",
command: () => window.open(`/course/${course}`, '_blank'), command: () => window.open(`/course/${course}`, "_blank"),
}); });
} }
@ -123,22 +138,31 @@ const DocumentDetails = ({
if (isLesson) { if (isLesson) {
axios axios
.get(`/api/resources/${processedEvent.d}`) .get(`/api/resources/${processedEvent.d}`)
.then(res => { .then((res) => {
if (res.data && res.data.lessons[0]?.courseId) { if (res.data && res.data.lessons[0]?.courseId) {
setCourse(res.data.lessons[0]?.courseId); setCourse(res.data.lessons[0]?.courseId);
} }
}) })
.catch(err => { .catch((err) => {
console.error('err', err); console.error("err", err);
}); });
} }
}, [processedEvent.d, isLesson]); }, [processedEvent.d, isLesson]);
useEffect(() => {
if (session?.user?.privkey) {
const privkeyBuffer = Buffer.from(session.user.privkey, "hex");
setNsec(nip19.nsecEncode(privkeyBuffer));
} else if (session?.user?.pubkey) {
setNpub(nip19.npubEncode(session.user.pubkey));
}
}, [session]);
const renderPaymentMessage = () => { const renderPaymentMessage = () => {
if (session?.user && session.user?.role?.subscribed && decryptedContent) { if (session?.user && session.user?.role?.subscribed && decryptedContent) {
return ( return (
<GenericButton <GenericButton
tooltipOptions={{ position: 'top' }} tooltipOptions={{ position: "top" }}
tooltip={`You are subscribed so you can access all paid content`} tooltip={`You are subscribed so you can access all paid content`}
icon="pi pi-check" icon="pi pi-check"
label="Subscribed" label="Subscribed"
@ -154,12 +178,16 @@ const DocumentDetails = ({
if ( if (
isLesson && isLesson &&
course && course &&
session?.user?.purchased?.some(purchase => purchase.courseId === course) session?.user?.purchased?.some((purchase) => purchase.courseId === course)
) { ) {
return ( return (
<GenericButton <GenericButton
tooltipOptions={{ position: 'top' }} tooltipOptions={{ position: "top" }}
tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${session?.user?.purchased?.find(purchase => purchase.courseId === course)?.course?.price} sats for the course.`} tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${
session?.user?.purchased?.find(
(purchase) => purchase.courseId === course
)?.course?.price
} sats for the course.`}
icon="pi pi-check" icon="pi pi-check"
label={`Paid`} label={`Paid`}
severity="success" severity="success"
@ -185,16 +213,20 @@ const DocumentDetails = ({
outlined outlined
size="small" size="small"
tooltip={`You paid ${processedEvent.price} sats to access this content (or potentially less if a discount was applied)`} tooltip={`You paid ${processedEvent.price} sats to access this content (or potentially less if a discount was applied)`}
tooltipOptions={{ position: 'top' }} tooltipOptions={{ position: "top" }}
className="cursor-default hover:opacity-100 hover:bg-transparent focus:ring-0" className="cursor-default hover:opacity-100 hover:bg-transparent focus:ring-0"
/> />
); );
} }
if (paidResource && author && processedEvent?.pubkey === session?.user?.pubkey) { if (
paidResource &&
author &&
processedEvent?.pubkey === session?.user?.pubkey
) {
return ( return (
<GenericButton <GenericButton
tooltipOptions={{ position: 'top' }} tooltipOptions={{ position: "top" }}
tooltip={`You created this paid content, users must pay ${processedEvent.price} sats to access it`} tooltip={`You created this paid content, users must pay ${processedEvent.price} sats to access it`}
icon="pi pi-check" icon="pi pi-check"
label={`Price ${processedEvent.price} sats`} label={`Price ${processedEvent.price} sats`}
@ -211,7 +243,12 @@ const DocumentDetails = ({
const renderContent = () => { const renderContent = () => {
if (decryptedContent) { if (decryptedContent) {
return <MDDisplay className="p-2 rounded-lg w-full" source={decryptedContent} />; return (
<MDDisplay
className="p-2 rounded-lg w-full"
source={decryptedContent}
/>
);
} }
if (paidResource && !decryptedContent) { if (paidResource && !decryptedContent) {
return ( return (
@ -237,7 +274,12 @@ const DocumentDetails = ({
); );
} }
if (processedEvent?.content) { if (processedEvent?.content) {
return <MDDisplay className="p-4 rounded-lg w-full" source={processedEvent.content} />; return (
<MDDisplay
className="p-4 rounded-lg w-full"
source={processedEvent.content}
/>
);
} }
return null; return null;
}; };
@ -270,9 +312,11 @@ const DocumentDetails = ({
topics.map((topic, index) => ( topics.map((topic, index) => (
<Tag className="text-[#f8f8ff]" key={index} value={topic}></Tag> <Tag className="text-[#f8f8ff]" key={index} value={topic}></Tag>
))} ))}
{isLesson && <Tag size="small" className="text-[#f8f8ff]" value="lesson" />} {isLesson && (
<Tag size="small" className="text-[#f8f8ff]" value="lesson" />
)}
</div> </div>
{summary?.split('\n').map((line, index) => ( {summary?.split("\n").map((line, index) => (
<p key={index}>{line}</p> <p key={index}>{line}</p>
))} ))}
<div className="flex items-center justify-between mt-8"> <div className="flex items-center justify-between mt-8">
@ -285,7 +329,7 @@ const DocumentDetails = ({
className="rounded-full mr-4" className="rounded-full mr-4"
/> />
<p className="text-lg text-white"> <p className="text-lg text-white">
By{' '} By{" "}
<a <a
rel="noreferrer noopener" rel="noreferrer noopener"
target="_blank" target="_blank"
@ -304,6 +348,28 @@ const DocumentDetails = ({
</div> </div>
</div> </div>
<div className="w-full mt-4">{renderPaymentMessage()}</div> <div className="w-full mt-4">{renderPaymentMessage()}</div>
{nAddress && (
<div className="mt-8">
{!paidResource ||
decryptedContent ||
session?.user?.role?.subscribed ? (
<ZapThreadsWrapper
anchor={nAddress}
user={session?.user ? nsec || npub : null}
relays={appConfig.defaultRelayUrls.join(",")}
disable="zaps"
isAuthorized={true}
/>
) : (
<div className="text-center p-4 bg-gray-800/50 rounded-lg">
<p className="text-gray-400">
Comments are only available to content purchasers,
subscribers, and the content creator.
</p>
</div>
)}
</div>
)}
</div> </div>
{renderContent()} {renderContent()}
</div> </div>

196
src/components/content/videos/VideoDetails.js
View File

@ -1,22 +1,25 @@
import React, { useEffect, useState, useRef } from 'react'; import React, { useEffect, useState, useRef } from "react";
import axios from 'axios'; import axios from "axios";
import { useToast } from '@/hooks/useToast'; import { useToast } from "@/hooks/useToast";
import { Tag } from 'primereact/tag'; import { Tag } from "primereact/tag";
import Image from 'next/image'; import Image from "next/image";
import { useRouter } from 'next/router'; import { useRouter } from "next/router";
import ResourcePaymentButton from '@/components/bitcoinConnect/ResourcePaymentButton'; import ResourcePaymentButton from "@/components/bitcoinConnect/ResourcePaymentButton";
import ZapDisplay from '@/components/zaps/ZapDisplay'; import ZapDisplay from "@/components/zaps/ZapDisplay";
import GenericButton from '@/components/buttons/GenericButton'; import GenericButton from "@/components/buttons/GenericButton";
import { useImageProxy } from '@/hooks/useImageProxy'; import { useImageProxy } from "@/hooks/useImageProxy";
import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscription'; import { useZapsSubscription } from "@/hooks/nostrQueries/zaps/useZapsSubscription";
import { getTotalFromZaps } from '@/utils/lightning'; import { getTotalFromZaps } from "@/utils/lightning";
import { useSession } from 'next-auth/react'; import { useSession } from "next-auth/react";
import useWindowWidth from '@/hooks/useWindowWidth'; import useWindowWidth from "@/hooks/useWindowWidth";
import dynamic from 'next/dynamic'; import dynamic from "next/dynamic";
import { Toast } from 'primereact/toast'; import { Toast } from "primereact/toast";
import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu'; import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
import ZapThreadsWrapper from "@/components/ZapThreadsWrapper";
import appConfig from "@/config/appConfig";
import { nip19 } from "nostr-tools";
const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), { const MDDisplay = dynamic(() => import("@uiw/react-markdown-preview"), {
ssr: false, ssr: false,
}); });
@ -40,75 +43,87 @@ const VideoDetails = ({
const [course, setCourse] = useState(null); const [course, setCourse] = useState(null);
const router = useRouter(); const router = useRouter();
const { returnImageProxy } = useImageProxy(); const { returnImageProxy } = useImageProxy();
const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: processedEvent }); const { zaps, zapsLoading, zapsError } = useZapsSubscription({
event: processedEvent,
});
const { data: session, status } = useSession(); const { data: session, status } = useSession();
const { showToast } = useToast(); const { showToast } = useToast();
const windowWidth = useWindowWidth(); const windowWidth = useWindowWidth();
const isMobileView = windowWidth <= 768; const isMobileView = windowWidth <= 768;
const menuRef = useRef(null); const menuRef = useRef(null);
const toastRef = useRef(null); const toastRef = useRef(null);
const [nsec, setNsec] = useState(null);
const [npub, setNpub] = useState(null);
const handleDelete = async () => { const handleDelete = async () => {
try { try {
const response = await axios.delete(`/api/resources/${processedEvent.d}`); const response = await axios.delete(`/api/resources/${processedEvent.d}`);
if (response.status === 204) { if (response.status === 204) {
showToast('success', 'Success', 'Resource deleted successfully.'); showToast("success", "Success", "Resource deleted successfully.");
router.push('/'); router.push("/");
} }
} catch (error) { } catch (error) {
if ( if (
error.response && error.response &&
error.response.data && error.response.data &&
error.response.data.error.includes('Invalid `prisma.resource.delete()`') error.response.data.error.includes("Invalid `prisma.resource.delete()`")
) { ) {
showToast( showToast(
'error', "error",
'Error', "Error",
'Resource cannot be deleted because it is part of a course, delete the course first.' "Resource cannot be deleted because it is part of a course, delete the course first."
); );
} else if (error.response && error.response.data && error.response.data.error) { } else if (
showToast('error', 'Error', error.response.data.error); error.response &&
error.response.data &&
error.response.data.error
) {
showToast("error", "Error", error.response.data.error);
} else { } else {
showToast('error', 'Error', 'Failed to delete resource. Please try again.'); showToast(
"error",
"Error",
"Failed to delete resource. Please try again."
);
} }
} }
}; };
const authorMenuItems = [ const authorMenuItems = [
{ {
label: 'Edit', label: "Edit",
icon: 'pi pi-pencil', icon: "pi pi-pencil",
command: () => router.push(`/details/${processedEvent.id}/edit`), command: () => router.push(`/details/${processedEvent.id}/edit`),
}, },
{ {
label: 'Delete', label: "Delete",
icon: 'pi pi-trash', icon: "pi pi-trash",
command: handleDelete, command: handleDelete,
}, },
{ {
label: 'View Nostr note', label: "View Nostr note",
icon: 'pi pi-globe', icon: "pi pi-globe",
command: () => { command: () => {
window.open(`https://habla.news/a/${nAddress}`, '_blank'); window.open(`https://habla.news/a/${nAddress}`, "_blank");
}, },
}, },
]; ];
const userMenuItems = [ const userMenuItems = [
{ {
label: 'View Nostr note', label: "View Nostr note",
icon: 'pi pi-globe', icon: "pi pi-globe",
command: () => { command: () => {
window.open(`https://habla.news/a/${nAddress}`, '_blank'); window.open(`https://habla.news/a/${nAddress}`, "_blank");
}, },
}, },
]; ];
if (course) { if (course) {
userMenuItems.unshift({ userMenuItems.unshift({
label: isMobileView ? 'Course' : 'Open Course', label: isMobileView ? "Course" : "Open Course",
icon: 'pi pi-external-link', icon: "pi pi-external-link",
command: () => window.open(`/course/${course}`, '_blank'), command: () => window.open(`/course/${course}`, "_blank"),
}); });
} }
@ -116,13 +131,13 @@ const VideoDetails = ({
if (isLesson) { if (isLesson) {
axios axios
.get(`/api/resources/${processedEvent.d}`) .get(`/api/resources/${processedEvent.d}`)
.then(res => { .then((res) => {
if (res.data && res.data.lessons[0]?.courseId) { if (res.data && res.data.lessons[0]?.courseId) {
setCourse(res.data.lessons[0]?.courseId); setCourse(res.data.lessons[0]?.courseId);
} }
}) })
.catch(err => { .catch((err) => {
console.error('err', err); console.error("err", err);
}); });
} }
}, [processedEvent.d, isLesson]); }, [processedEvent.d, isLesson]);
@ -134,11 +149,20 @@ const VideoDetails = ({
} }
}, [zaps, processedEvent]); }, [zaps, processedEvent]);
useEffect(() => {
if (session?.user?.privkey) {
const privkeyBuffer = Buffer.from(session.user.privkey, "hex");
setNsec(nip19.nsecEncode(privkeyBuffer));
} else if (session?.user?.pubkey) {
setNpub(nip19.npubEncode(session.user.pubkey));
}
}, [session]);
const renderPaymentMessage = () => { const renderPaymentMessage = () => {
if (session?.user && session.user?.role?.subscribed && decryptedContent) { if (session?.user && session.user?.role?.subscribed && decryptedContent) {
return ( return (
<GenericButton <GenericButton
tooltipOptions={{ position: 'top' }} tooltipOptions={{ position: "top" }}
tooltip={`You are subscribed so you can access all paid content`} tooltip={`You are subscribed so you can access all paid content`}
icon="pi pi-check" icon="pi pi-check"
label="Subscribed" label="Subscribed"
@ -153,14 +177,22 @@ const VideoDetails = ({
if ( if (
isLesson && isLesson &&
course && course &&
session?.user?.purchased?.some(purchase => purchase.courseId === course) session?.user?.purchased?.some((purchase) => purchase.courseId === course)
) { ) {
return ( return (
<GenericButton <GenericButton
tooltipOptions={{ position: 'top' }} tooltipOptions={{ position: "top" }}
tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${session?.user?.purchased?.find(purchase => purchase.courseId === course)?.course?.price} sats for the course.`} tooltip={`You have this lesson through purchasing the course it belongs to. You paid ${
session?.user?.purchased?.find(
(purchase) => purchase.courseId === course
)?.course?.price
} sats for the course.`}
icon="pi pi-check" icon="pi pi-check"
label={`Paid ${session?.user?.purchased?.find(purchase => purchase.courseId === course)?.course?.price} sats`} label={`Paid ${
session?.user?.purchased?.find(
(purchase) => purchase.courseId === course
)?.course?.price
} sats`}
severity="success" severity="success"
outlined outlined
size="small" size="small"
@ -188,10 +220,14 @@ const VideoDetails = ({
); );
} }
if (paidResource && author && processedEvent?.pubkey === session?.user?.pubkey) { if (
paidResource &&
author &&
processedEvent?.pubkey === session?.user?.pubkey
) {
return ( return (
<GenericButton <GenericButton
tooltipOptions={{ position: 'top' }} tooltipOptions={{ position: "top" }}
tooltip={`You created this paid content, users must pay ${processedEvent.price} sats to access it`} tooltip={`You created this paid content, users must pay ${processedEvent.price} sats to access it`}
icon="pi pi-check" icon="pi pi-check"
label={`Price ${processedEvent.price} sats`} label={`Price ${processedEvent.price} sats`}
@ -208,7 +244,12 @@ const VideoDetails = ({
const renderContent = () => { const renderContent = () => {
if (decryptedContent) { if (decryptedContent) {
return <MDDisplay className="p-0 rounded-lg w-full" source={decryptedContent} />; return (
<MDDisplay
className="p-0 rounded-lg w-full"
source={decryptedContent}
/>
);
} }
if (paidResource && !decryptedContent) { if (paidResource && !decryptedContent) {
return ( return (
@ -217,8 +258,8 @@ const VideoDetails = ({
className="absolute inset-0 opacity-50" className="absolute inset-0 opacity-50"
style={{ style={{
backgroundImage: `url(${image})`, backgroundImage: `url(${image})`,
backgroundSize: 'cover', backgroundSize: "cover",
backgroundPosition: 'center', backgroundPosition: "center",
}} }}
></div> ></div>
<div className="absolute inset-0 bg-black bg-opacity-50"></div> <div className="absolute inset-0 bg-black bg-opacity-50"></div>
@ -241,7 +282,12 @@ const VideoDetails = ({
); );
} }
if (processedEvent?.content) { if (processedEvent?.content) {
return <MDDisplay className="p-0 rounded-lg w-full" source={processedEvent.content} />; return (
<MDDisplay
className="p-0 rounded-lg w-full"
source={processedEvent.content}
/>
);
} }
return null; return null;
}; };
@ -251,7 +297,9 @@ const VideoDetails = ({
<Toast ref={toastRef} /> <Toast ref={toastRef} />
{renderContent()} {renderContent()}
<div className="bg-gray-800/90 rounded-lg p-4 m-4 max-mob:m-0 max-tab:m-0 max-mob:rounded-t-none max-tab:rounded-t-none"> <div className="bg-gray-800/90 rounded-lg p-4 m-4 max-mob:m-0 max-tab:m-0 max-mob:rounded-t-none max-tab:rounded-t-none">
<div className={`w-full flex flex-col items-start justify-start mt-2 px-2`}> <div
className={`w-full flex flex-col items-start justify-start mt-2 px-2`}
>
<div className="flex flex-col items-start gap-2 w-full"> <div className="flex flex-col items-start gap-2 w-full">
<div className="flex flex-row items-center justify-between gap-2 w-full"> <div className="flex flex-row items-center justify-between gap-2 w-full">
<h1 className="text-4xl flex-grow">{title}</h1> <h1 className="text-4xl flex-grow">{title}</h1>
@ -265,14 +313,18 @@ const VideoDetails = ({
{topics && {topics &&
topics.length > 0 && topics.length > 0 &&
topics.map((topic, index) => ( topics.map((topic, index) => (
<Tag className="mt-2 text-white" key={index} value={topic}></Tag> <Tag
className="mt-2 text-white"
key={index}
value={topic}
></Tag>
))} ))}
{isLesson && <Tag className="mt-2 text-white" value="lesson" />} {isLesson && <Tag className="mt-2 text-white" value="lesson" />}
</div> </div>
</div> </div>
<div className="flex flex-row items-center justify-between w-full"> <div className="flex flex-row items-center justify-between w-full">
<div className="my-4 max-mob:text-base max-tab:text-base"> <div className="my-4 max-mob:text-base max-tab:text-base">
{summary?.split('\n').map((line, index) => ( {summary?.split("\n").map((line, index) => (
<p key={index}>{line}</p> <p key={index}>{line}</p>
))} ))}
</div> </div>
@ -287,7 +339,7 @@ const VideoDetails = ({
className="rounded-full mr-4" className="rounded-full mr-4"
/> />
<p className="text-lg text-white"> <p className="text-lg text-white">
By{' '} By{" "}
<a <a
rel="noreferrer noopener" rel="noreferrer noopener"
target="_blank" target="_blank"
@ -306,7 +358,31 @@ const VideoDetails = ({
</div> </div>
</div> </div>
</div> </div>
<div className="w-full flex justify-start mt-4">{renderPaymentMessage()}</div> <div className="w-full flex justify-start mt-4">
{renderPaymentMessage()}
</div>
{nAddress && (
<div className="mt-8">
{!paidResource ||
decryptedContent ||
session?.user?.role?.subscribed ? (
<ZapThreadsWrapper
anchor={nAddress}
user={session?.user ? nsec || npub : null}
relays={appConfig.defaultRelayUrls.join(",")}
disable="zaps"
isAuthorized={true}
/>
) : (
<div className="text-center p-4 bg-gray-800/50 rounded-lg">
<p className="text-gray-400">
Comments are only available to content purchasers,
subscribers, and the content creator.
</p>
</div>
)}
</div>
)}
</div> </div>
</div> </div>
); );

201
src/pages/course/[slug]/index.js
View File

@ -1,22 +1,26 @@
import React, { useEffect, useState, useCallback } from 'react'; import React, { useEffect, useState, useCallback } from "react";
import { useRouter } from 'next/router'; import { useRouter } from "next/router";
import { parseCourseEvent, parseEvent, findKind0Fields } from '@/utils/nostr'; import { parseCourseEvent, parseEvent, findKind0Fields } from "@/utils/nostr";
import CourseDetails from '@/components/content/courses/CourseDetails'; import CourseDetails from "@/components/content/courses/CourseDetails";
import VideoLesson from '@/components/content/courses/VideoLesson'; import VideoLesson from "@/components/content/courses/VideoLesson";
import DocumentLesson from '@/components/content/courses/DocumentLesson'; import DocumentLesson from "@/components/content/courses/DocumentLesson";
import CombinedLesson from '@/components/content/courses/CombinedLesson'; import CombinedLesson from "@/components/content/courses/CombinedLesson";
import { useNDKContext } from '@/context/NDKContext'; import { useNDKContext } from "@/context/NDKContext";
import { useSession } from 'next-auth/react'; import { useSession } from "next-auth/react";
import axios from 'axios'; import axios from "axios";
import { nip04, nip19 } from 'nostr-tools'; import { nip04, nip19 } from "nostr-tools";
import { useToast } from '@/hooks/useToast'; import { useToast } from "@/hooks/useToast";
import { ProgressSpinner } from 'primereact/progressspinner'; import { ProgressSpinner } from "primereact/progressspinner";
import { Accordion, AccordionTab } from 'primereact/accordion'; import { Accordion, AccordionTab } from "primereact/accordion";
import { Tag } from 'primereact/tag'; import { Tag } from "primereact/tag";
import { useDecryptContent } from '@/hooks/encryption/useDecryptContent'; import { useDecryptContent } from "@/hooks/encryption/useDecryptContent";
import dynamic from 'next/dynamic'; import dynamic from "next/dynamic";
import ZapThreadsWrapper from "@/components/ZapThreadsWrapper";
import appConfig from "@/config/appConfig";
const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), { ssr: false }); const MDDisplay = dynamic(() => import("@uiw/react-markdown-preview"), {
ssr: false,
});
const useCourseData = (ndk, fetchAuthor, router) => { const useCourseData = (ndk, fetchAuthor, router) => {
const [course, setCourse] = useState(null); const [course, setCourse] = useState(null);
@ -32,10 +36,10 @@ const useCourseData = (ndk, fetchAuthor, router) => {
let id; let id;
const fetchCourseId = async () => { const fetchCourseId = async () => {
if (slug.includes('naddr')) { if (slug.includes("naddr")) {
const { data } = nip19.decode(slug); const { data } = nip19.decode(slug);
if (!data?.identifier) { if (!data?.identifier) {
showToast('error', 'Error', 'Resource not found'); showToast("error", "Error", "Resource not found");
return null; return null;
} }
return data.identifier; return data.identifier;
@ -44,19 +48,21 @@ const useCourseData = (ndk, fetchAuthor, router) => {
} }
}; };
const fetchCourse = async courseId => { const fetchCourse = async (courseId) => {
try { try {
await ndk.connect(); await ndk.connect();
const event = await ndk.fetchEvent({ '#d': [courseId] }); const event = await ndk.fetchEvent({ "#d": [courseId] });
if (!event) return null; if (!event) return null;
const author = await fetchAuthor(event.pubkey); const author = await fetchAuthor(event.pubkey);
const lessonIds = event.tags.filter(tag => tag[0] === 'a').map(tag => tag[1].split(':')[2]); const lessonIds = event.tags
.filter((tag) => tag[0] === "a")
.map((tag) => tag[1].split(":")[2]);
const parsedCourse = { ...parseCourseEvent(event), author }; const parsedCourse = { ...parseCourseEvent(event), author };
return { parsedCourse, lessonIds }; return { parsedCourse, lessonIds };
} catch (error) { } catch (error) {
console.error('Error fetching event:', error); console.error("Error fetching event:", error);
return null; return null;
} }
}; };
@ -91,17 +97,23 @@ const useLessons = (ndk, fetchAuthor, lessonIds, pubkey) => {
const { showToast } = useToast(); const { showToast } = useToast();
useEffect(() => { useEffect(() => {
if (lessonIds.length > 0) { if (lessonIds.length > 0) {
const fetchLesson = async lessonId => { const fetchLesson = async (lessonId) => {
try { try {
await ndk.connect(); await ndk.connect();
const filter = { '#d': [lessonId], kinds: [30023, 30402], authors: [pubkey] }; const filter = {
"#d": [lessonId],
kinds: [30023, 30402],
authors: [pubkey],
};
const event = await ndk.fetchEvent(filter); const event = await ndk.fetchEvent(filter);
if (event) { if (event) {
const author = await fetchAuthor(event.pubkey); const author = await fetchAuthor(event.pubkey);
const parsedLesson = { ...parseEvent(event), author }; const parsedLesson = { ...parseEvent(event), author };
setLessons(prev => { setLessons((prev) => {
// Check if the lesson already exists in the array // Check if the lesson already exists in the array
const exists = prev.some(lesson => lesson.id === parsedLesson.id); const exists = prev.some(
(lesson) => lesson.id === parsedLesson.id
);
if (!exists) { if (!exists) {
return [...prev, parsedLesson]; return [...prev, parsedLesson];
} }
@ -109,16 +121,16 @@ const useLessons = (ndk, fetchAuthor, lessonIds, pubkey) => {
}); });
} }
} catch (error) { } catch (error) {
console.error('Error fetching event:', error); console.error("Error fetching event:", error);
} }
}; };
lessonIds.forEach(lessonId => fetchLesson(lessonId)); lessonIds.forEach((lessonId) => fetchLesson(lessonId));
} }
}, [lessonIds, ndk, fetchAuthor, pubkey]); }, [lessonIds, ndk, fetchAuthor, pubkey]);
useEffect(() => { useEffect(() => {
const newUniqueLessons = Array.from( const newUniqueLessons = Array.from(
new Map(lessons.map(lesson => [lesson.id, lesson])).values() new Map(lessons.map((lesson) => [lesson.id, lesson])).values()
); );
setUniqueLessons(newUniqueLessons); setUniqueLessons(newUniqueLessons);
}, [lessons]); }, [lessons]);
@ -136,14 +148,16 @@ const useDecryption = (session, paidCourse, course, lessons, setLessons) => {
if (session?.user && paidCourse && !decryptionPerformed) { if (session?.user && paidCourse && !decryptionPerformed) {
setLoading(true); setLoading(true);
const canAccess = const canAccess =
session.user.purchased?.some(purchase => purchase.courseId === course?.d) || session.user.purchased?.some(
(purchase) => purchase.courseId === course?.d
) ||
session.user?.role?.subscribed || session.user?.role?.subscribed ||
session.user?.pubkey === course?.pubkey; session.user?.pubkey === course?.pubkey;
if (canAccess && lessons.length > 0) { if (canAccess && lessons.length > 0) {
try { try {
const decryptedLessons = await Promise.all( const decryptedLessons = await Promise.all(
lessons.map(async lesson => { lessons.map(async (lesson) => {
const decryptedContent = await decryptContent(lesson.content); const decryptedContent = await decryptContent(lesson.content);
return { ...lesson, content: decryptedContent }; return { ...lesson, content: decryptedContent };
}) })
@ -151,7 +165,7 @@ const useDecryption = (session, paidCourse, course, lessons, setLessons) => {
setLessons(decryptedLessons); setLessons(decryptedLessons);
setDecryptionPerformed(true); setDecryptionPerformed(true);
} catch (error) { } catch (error) {
console.error('Error decrypting lessons:', error); console.error("Error decrypting lessons:", error);
} }
} }
setLoading(false); setLoading(false);
@ -171,13 +185,16 @@ const Course = () => {
const { showToast } = useToast(); const { showToast } = useToast();
const [expandedIndex, setExpandedIndex] = useState(null); const [expandedIndex, setExpandedIndex] = useState(null);
const [completedLessons, setCompletedLessons] = useState([]); const [completedLessons, setCompletedLessons] = useState([]);
const [nAddresses, setNAddresses] = useState({});
const [nsec, setNsec] = useState(null);
const [npub, setNpub] = useState(null);
const setCompleted = useCallback(lessonId => { const setCompleted = useCallback((lessonId) => {
setCompletedLessons(prev => [...prev, lessonId]); setCompletedLessons((prev) => [...prev, lessonId]);
}, []); }, []);
const fetchAuthor = useCallback( const fetchAuthor = useCallback(
async pubkey => { async (pubkey) => {
const author = await ndk.getUser({ pubkey }); const author = await ndk.getUser({ pubkey });
const profile = await author.fetchProfile(); const profile = await author.fetchProfile();
const fields = await findKind0Fields(profile); const fields = await findKind0Fields(profile);
@ -217,30 +234,67 @@ const Course = () => {
} }
}, [router.isReady, router.query]); }, [router.isReady, router.query]);
const handleAccordionChange = e => { useEffect(() => {
if (uniqueLessons.length > 0) {
const addresses = {};
uniqueLessons.forEach((lesson) => {
const addr = nip19.naddrEncode({
pubkey: lesson.pubkey,
kind: lesson.kind,
identifier: lesson.d,
relays: appConfig.defaultRelayUrls,
});
addresses[lesson.id] = addr;
});
setNAddresses(addresses);
}
}, [uniqueLessons]);
useEffect(() => {
if (session?.user?.privkey) {
const privkeyBuffer = Buffer.from(session.user.privkey, "hex");
setNsec(nip19.nsecEncode(privkeyBuffer));
} else if (session?.user?.pubkey) {
setNpub(nip19.npubEncode(session.user.pubkey));
}
}, [session]);
const handleAccordionChange = (e) => {
const newIndex = e.index === expandedIndex ? null : e.index; const newIndex = e.index === expandedIndex ? null : e.index;
setExpandedIndex(newIndex); setExpandedIndex(newIndex);
if (newIndex !== null) { if (newIndex !== null) {
router.push(`/course/${router.query.slug}?active=${newIndex}`, undefined, { shallow: true }); router.push(
`/course/${router.query.slug}?active=${newIndex}`,
undefined,
{ shallow: true }
);
} else { } else {
router.push(`/course/${router.query.slug}`, undefined, { shallow: true }); router.push(`/course/${router.query.slug}`, undefined, { shallow: true });
} }
}; };
const handlePaymentSuccess = async response => { const handlePaymentSuccess = async (response) => {
if (response && response?.preimage) { if (response && response?.preimage) {
const updated = await update(); const updated = await update();
showToast('success', 'Payment Success', 'You have successfully purchased this course'); showToast(
"success",
"Payment Success",
"You have successfully purchased this course"
);
} else { } else {
showToast('error', 'Error', 'Failed to purchase course. Please try again.'); showToast(
"error",
"Error",
"Failed to purchase course. Please try again."
);
} }
}; };
const handlePaymentError = error => { const handlePaymentError = (error) => {
showToast( showToast(
'error', "error",
'Payment Error', "Payment Error",
`Failed to purchase course. Please try again. Error: ${error}` `Failed to purchase course. Please try again. Error: ${error}`
); );
}; };
@ -253,8 +307,11 @@ const Course = () => {
); );
} }
const renderLesson = lesson => { const renderLesson = (lesson) => {
if (lesson.topics?.includes('video') && lesson.topics?.includes('document')) { if (
lesson.topics?.includes("video") &&
lesson.topics?.includes("document")
) {
return ( return (
<CombinedLesson <CombinedLesson
lesson={lesson} lesson={lesson}
@ -264,7 +321,10 @@ const Course = () => {
setCompleted={setCompleted} setCompleted={setCompleted}
/> />
); );
} else if (lesson.type === 'video' && !lesson.topics?.includes('document')) { } else if (
lesson.type === "video" &&
!lesson.topics?.includes("document")
) {
return ( return (
<VideoLesson <VideoLesson
lesson={lesson} lesson={lesson}
@ -274,7 +334,10 @@ const Course = () => {
setCompleted={setCompleted} setCompleted={setCompleted}
/> />
); );
} else if (lesson.type === 'document' && !lesson.topics?.includes('video')) { } else if (
lesson.type === "document" &&
!lesson.topics?.includes("video")
) {
return ( return (
<DocumentLesson <DocumentLesson
lesson={lesson} lesson={lesson}
@ -309,11 +372,11 @@ const Course = () => {
<AccordionTab <AccordionTab
key={index} key={index}
pt={{ pt={{
root: { className: 'border-none' }, root: { className: "border-none" },
header: { className: 'border-none' }, header: { className: "border-none" },
headerAction: { className: 'border-none' }, headerAction: { className: "border-none" },
content: { className: 'border-none max-mob:px-0 max-tab:px-0' }, content: { className: "border-none max-mob:px-0 max-tab:px-0" },
accordiontab: { className: 'border-none' }, accordiontab: { className: "border-none" },
}} }}
header={ header={
<div className="flex align-items-center justify-between w-full"> <div className="flex align-items-center justify-between w-full">
@ -327,12 +390,38 @@ const Course = () => {
</div> </div>
} }
> >
<div className="w-full py-4 rounded-b-lg">{renderLesson(lesson)}</div> <div className="w-full py-4 rounded-b-lg">
{renderLesson(lesson)}
{nAddresses[lesson.id] && (
<div className="mt-8">
{!paidCourse ||
decryptionPerformed ||
session?.user?.role?.subscribed ? (
<ZapThreadsWrapper
anchor={nAddresses[lesson.id]}
user={session?.user ? nsec || npub : null}
relays={appConfig.defaultRelayUrls.join(",")}
disable="zaps"
isAuthorized={true}
/>
) : (
<div className="text-center p-4 bg-gray-800/50 rounded-lg">
<p className="text-gray-400">
Comments are only available to course purchasers,
subscribers, and the course creator.
</p>
</div>
)}
</div>
)}
</div>
</AccordionTab> </AccordionTab>
))} ))}
</Accordion> </Accordion>
<div className="mx-auto my-6"> <div className="mx-auto my-6">
{course?.content && <MDDisplay className="p-4 rounded-lg" source={course.content} />} {course?.content && (
<MDDisplay className="p-4 rounded-lg" source={course.content} />
)}
</div> </div>
</> </>
); );