mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-05-18 04:05:51 +00:00
feat: Implement ZapThreads with access control for paid content - Add to CourseDetails, CourseTemplate, CourseLesson - Block comments for unpaid users - Allow comments for free content and authorized paid users
This commit is contained in:
kiwihodl
parent
fede031fe9
commit
466ead359b
src
@ -1,58 +1,100 @@
|
|||||||
import React, { useEffect, useRef } from 'react';
|
import React, { useEffect, useRef } from "react";
|
||||||
|
|
||||||
const ZapThreadsWrapper = ({ anchor, user, relays, disable, className }) => {
|
const ZapThreadsWrapper = ({
|
||||||
|
anchor,
|
||||||
|
user,
|
||||||
|
relays,
|
||||||
|
disable,
|
||||||
|
className,
|
||||||
|
isAuthorized,
|
||||||
|
}) => {
|
||||||
// Create a ref to store the reference to the <div> element
|
// Create a ref to store the reference to the <div> element
|
||||||
const zapRef = useRef(null);
|
const zapRef = useRef(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
// Only load the script if the user is authorized
|
||||||
|
if (!isAuthorized) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// Create a new <script> element
|
// Create a new <script> element
|
||||||
const script = document.createElement('script');
|
const script = document.createElement("script");
|
||||||
// Set the source URL of the script to load the ZapThreads library
|
// Set the source URL of the script to load the ZapThreads library
|
||||||
script.src = 'https://unpkg.com/zapthreads/dist/zapthreads.iife.js';
|
script.src = "https://unpkg.com/zapthreads/dist/zapthreads.iife.js";
|
||||||
// Set the script to load asynchronously
|
// Set the script to load asynchronously
|
||||||
script.async = true;
|
script.async = true;
|
||||||
|
|
||||||
// Function to handle the script load event
|
// Function to handle the script load event
|
||||||
const handleScriptLoad = () => {
|
const handleScriptLoad = () => {
|
||||||
// Create a new <zap-threads> element
|
// Create a new <zap-threads> element
|
||||||
const zapElement = document.createElement('zap-threads');
|
const zapElement = document.createElement("zap-threads");
|
||||||
zapElement.setAttribute('anchor', anchor);
|
zapElement.setAttribute("anchor", anchor);
|
||||||
if (user) zapElement.setAttribute('user', user);
|
|
||||||
zapElement.setAttribute('relays', relays.replace(/\s/g, ''));
|
|
||||||
if (disable) zapElement.setAttribute('disable', disable);
|
|
||||||
|
|
||||||
// Remove any existing <zap-threads> element before appending a new one
|
// Only set user if it exists and is not null
|
||||||
if (zapRef.current && zapRef.current.firstChild) {
|
if (user) {
|
||||||
zapRef.current.removeChild(zapRef.current.firstChild);
|
zapElement.setAttribute("user", user);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Append the new <zap-threads> element to the <div> referenced by zapRef
|
// Clean up relay URLs
|
||||||
|
const cleanRelays = relays
|
||||||
|
.split(",")
|
||||||
|
.map((relay) => relay.trim())
|
||||||
|
.filter((relay) => relay)
|
||||||
|
.join(",");
|
||||||
|
zapElement.setAttribute("relays", cleanRelays);
|
||||||
|
|
||||||
|
// Always set disable attribute, even if empty
|
||||||
|
zapElement.setAttribute("disable", disable || "");
|
||||||
|
|
||||||
|
// Add error handling
|
||||||
|
zapElement.addEventListener("error", (e) => {
|
||||||
|
console.error("ZapThreads error:", e);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Remove any existing <zap-threads> element
|
||||||
|
if (zapRef.current) {
|
||||||
|
while (zapRef.current.firstChild) {
|
||||||
|
zapRef.current.removeChild(zapRef.current.firstChild);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Append the new element
|
||||||
if (zapRef.current) {
|
if (zapRef.current) {
|
||||||
zapRef.current.appendChild(zapElement);
|
zapRef.current.appendChild(zapElement);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Attach the handleScriptLoad function to the script's load event
|
// Attach the handleScriptLoad function to the script's load event
|
||||||
script.addEventListener('load', handleScriptLoad);
|
script.addEventListener("load", handleScriptLoad);
|
||||||
|
script.addEventListener("error", (e) => {
|
||||||
|
console.error("Failed to load ZapThreads script:", e);
|
||||||
|
});
|
||||||
|
|
||||||
// Append the <script> element to the <body> of the document
|
// Append the <script> element to the <body> of the document
|
||||||
document.body.appendChild(script);
|
document.body.appendChild(script);
|
||||||
|
|
||||||
// Cleanup function to remove the <zap-threads> element and the <script> element when the component is unmounted
|
// Cleanup function to remove the <zap-threads> element and the <script> element when the component is unmounted
|
||||||
return () => {
|
return () => {
|
||||||
// Remove the <zap-threads> element from the <div> referenced by zapRef
|
if (zapRef.current) {
|
||||||
if (zapRef.current && zapRef.current.firstChild) {
|
while (zapRef.current.firstChild) {
|
||||||
zapRef.current.removeChild(zapRef.current.firstChild);
|
zapRef.current.removeChild(zapRef.current.firstChild);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
// Remove the <script> element from the <body> of the document
|
// Remove the <script> element from the <body> of the document
|
||||||
document.body.removeChild(script);
|
document.body.removeChild(script);
|
||||||
// Remove the load event listener from the script
|
// Remove the load event listener from the script
|
||||||
script.removeEventListener('load', handleScriptLoad);
|
script.removeEventListener("load", handleScriptLoad);
|
||||||
};
|
};
|
||||||
}, [anchor, user, relays, disable]);
|
}, [anchor, user, relays, disable, isAuthorized]);
|
||||||
|
|
||||||
|
if (!isAuthorized) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
// Render a <div> element and attach the zapRef to it
|
// Render a <div> element and attach the zapRef to it
|
||||||
return <div className={`overflow-x-hidden ${className || ''}`} ref={zapRef} />;
|
return (
|
||||||
|
<div className={`overflow-x-hidden ${className || ""}`} ref={zapRef} />
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ZapThreadsWrapper;
|
export default ZapThreadsWrapper;
|
||||||
@ -1,9 +1,17 @@
|
|||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardFooter,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
import { Tag } from "primereact/tag";
|
import { Tag } from "primereact/tag";
|
||||||
import ZapDisplay from "@/components/zaps/ZapDisplay";
|
import ZapDisplay from "@/components/zaps/ZapDisplay";
|
||||||
|
import ZapThreadsWrapper from "@/components/ZapThreadsWrapper";
|
||||||
import { nip19 } from "nostr-tools";
|
import { nip19 } from "nostr-tools";
|
||||||
import Image from "next/image"
|
import Image from "next/image";
|
||||||
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 { useImageProxy } from "@/hooks/useImageProxy";
|
import { useImageProxy } from "@/hooks/useImageProxy";
|
||||||
@ -15,16 +23,22 @@ import useWindowWidth from "@/hooks/useWindowWidth";
|
|||||||
import GenericButton from "@/components/buttons/GenericButton";
|
import GenericButton from "@/components/buttons/GenericButton";
|
||||||
import appConfig from "@/config/appConfig";
|
import appConfig from "@/config/appConfig";
|
||||||
import { BookOpen } from "lucide-react";
|
import { BookOpen } from "lucide-react";
|
||||||
|
import { useSession } from "next-auth/react";
|
||||||
|
|
||||||
export function CourseTemplate({ course, showMetaTags = true }) {
|
export function CourseTemplate({ course, showMetaTags = true }) {
|
||||||
const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: course });
|
const { zaps, zapsLoading, zapsError } = useZapsSubscription({
|
||||||
|
event: course,
|
||||||
|
});
|
||||||
const [zapAmount, setZapAmount] = useState(0);
|
const [zapAmount, setZapAmount] = useState(0);
|
||||||
const [lessonCount, setLessonCount] = useState(0);
|
const [lessonCount, setLessonCount] = useState(0);
|
||||||
const [nAddress, setNAddress] = useState(null);
|
const [nAddress, setNAddress] = useState(null);
|
||||||
|
const [npub, setNpub] = useState(null);
|
||||||
|
const [nsec, setNsec] = useState(null);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { returnImageProxy } = useImageProxy();
|
const { returnImageProxy } = useImageProxy();
|
||||||
const windowWidth = useWindowWidth();
|
const windowWidth = useWindowWidth();
|
||||||
const isMobile = windowWidth < 768;
|
const isMobile = windowWidth < 768;
|
||||||
|
const { data: session } = useSession();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (zaps.length > 0) {
|
if (zaps.length > 0) {
|
||||||
@ -35,7 +49,7 @@ export function CourseTemplate({ course, showMetaTags = true }) {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (course && course?.tags) {
|
if (course && course?.tags) {
|
||||||
const lessons = course.tags.filter(tag => tag[0] === "a");
|
const lessons = course.tags.filter((tag) => tag[0] === "a");
|
||||||
setLessonCount(lessons.length);
|
setLessonCount(lessons.length);
|
||||||
}
|
}
|
||||||
}, [course]);
|
}, [course]);
|
||||||
@ -46,26 +60,44 @@ export function CourseTemplate({ course, showMetaTags = true }) {
|
|||||||
pubkey: course.pubkey,
|
pubkey: course.pubkey,
|
||||||
kind: course.kind,
|
kind: course.kind,
|
||||||
identifier: course.d,
|
identifier: course.d,
|
||||||
relays: appConfig.defaultRelayUrls
|
relays: appConfig.defaultRelayUrls,
|
||||||
});
|
});
|
||||||
setNAddress(nAddress);
|
setNAddress(nAddress);
|
||||||
}
|
}
|
||||||
}, [course]);
|
}, [course]);
|
||||||
|
|
||||||
|
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 shouldShowMetaTags = (topic) => {
|
const shouldShowMetaTags = (topic) => {
|
||||||
if (!showMetaTags) {
|
if (!showMetaTags) {
|
||||||
return !["lesson", "document", "video", "course"].includes(topic);
|
return !["lesson", "document", "video", "course"].includes(topic);
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
}
|
};
|
||||||
|
|
||||||
if (!nAddress) return <div className='w-full h-full flex items-center justify-center'><ProgressSpinner /></div>
|
if (!nAddress)
|
||||||
|
return (
|
||||||
|
<div className="w-full h-full flex items-center justify-center">
|
||||||
|
<ProgressSpinner />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
if (zapsError) return <div>Error: {zapsError}</div>;
|
if (zapsError) return <div>Error: {zapsError}</div>;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="overflow-hidden group hover:shadow-xl transition-all duration-300 bg-gray-800 m-2 border-none">
|
<Card className="overflow-hidden group hover:shadow-xl transition-all duration-300 bg-gray-800 m-2 border-none">
|
||||||
<div className="relative w-full h-0 hover:opacity-70 cursor-pointer" style={{ paddingBottom: "56.25%" }} onClick={() => router.push(`/course/${nAddress}`)}>
|
<div
|
||||||
|
className="relative w-full h-0 hover:opacity-70 cursor-pointer"
|
||||||
|
style={{ paddingBottom: "56.25%" }}
|
||||||
|
onClick={() => router.push(`/course/${nAddress}`)}
|
||||||
|
>
|
||||||
<Image
|
<Image
|
||||||
alt="video thumbnail"
|
alt="video thumbnail"
|
||||||
src={returnImageProxy(course.image)}
|
src={returnImageProxy(course.image)}
|
||||||
@ -81,47 +113,125 @@ export function CourseTemplate({ course, showMetaTags = true }) {
|
|||||||
</div>
|
</div>
|
||||||
<CardHeader className="flex flex-row justify-between items-center p-4 border-b border-gray-700">
|
<CardHeader className="flex flex-row justify-between items-center p-4 border-b border-gray-700">
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
<CardTitle className="text-xl sm:text-2xl text-[#f8f8ff]">{course.name}</CardTitle>
|
<CardTitle className="text-xl sm:text-2xl text-[#f8f8ff]">
|
||||||
|
{course.name}
|
||||||
|
</CardTitle>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-[#f8f8ff]">
|
<div className="text-[#f8f8ff]">
|
||||||
<ZapDisplay zapAmount={zapAmount} event={course} zapsLoading={zapsLoading && zapAmount === 0} />
|
<ZapDisplay
|
||||||
|
zapAmount={zapAmount}
|
||||||
|
event={course}
|
||||||
|
zapsLoading={zapsLoading && zapAmount === 0}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className={`${isMobile ? "px-3" : ""} pt-4 pb-2 w-full flex flex-row justify-between items-center`}>
|
<CardContent
|
||||||
|
className={`${
|
||||||
|
isMobile ? "px-3" : ""
|
||||||
|
} pt-4 pb-2 w-full flex flex-row justify-between items-center`}
|
||||||
|
>
|
||||||
<div className="flex flex-wrap gap-2 max-w-[65%]">
|
<div className="flex flex-wrap gap-2 max-w-[65%]">
|
||||||
{course && course.topics && course.topics.map((topic, index) => (
|
{course &&
|
||||||
|
course.topics &&
|
||||||
|
course.topics.map(
|
||||||
|
(topic, index) =>
|
||||||
shouldShowMetaTags(topic) && (
|
shouldShowMetaTags(topic) && (
|
||||||
<Tag size="small" key={index} className="px-2 py-1 text-sm text-[#f8f8ff]">
|
<Tag
|
||||||
|
size="small"
|
||||||
|
key={index}
|
||||||
|
className="px-2 py-1 text-sm text-[#f8f8ff]"
|
||||||
|
>
|
||||||
{topic}
|
{topic}
|
||||||
</Tag>
|
</Tag>
|
||||||
)
|
)
|
||||||
))}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{course?.price && course?.price > 0 ? (
|
{course?.price && course?.price > 0 ? (
|
||||||
<Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock" severity="info" text={`${course.price} sats`} />
|
<Message
|
||||||
|
className={`${
|
||||||
|
isMobile ? "py-1 text-xs" : "py-2"
|
||||||
|
} whitespace-nowrap`}
|
||||||
|
icon="pi pi-lock"
|
||||||
|
severity="info"
|
||||||
|
text={`${course.price} sats`}
|
||||||
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock-open" severity="success" text="Free" />
|
<Message
|
||||||
|
className={`${
|
||||||
|
isMobile ? "py-1 text-xs" : "py-2"
|
||||||
|
} whitespace-nowrap`}
|
||||||
|
icon="pi pi-lock-open"
|
||||||
|
severity="success"
|
||||||
|
text="Free"
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
<CardDescription className={`${isMobile ? "w-full p-3" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
|
<CardDescription
|
||||||
|
className={`${
|
||||||
|
isMobile ? "w-full p-3" : "p-6"
|
||||||
|
} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
|
||||||
style={{
|
style={{
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
display: "-webkit-box",
|
display: "-webkit-box",
|
||||||
WebkitBoxOrient: "vertical",
|
WebkitBoxOrient: "vertical",
|
||||||
WebkitLineClamp: "2"
|
WebkitLineClamp: "2",
|
||||||
}}>
|
}}
|
||||||
<p className="line-clamp-2 text-wrap break-words">{(course.summary || course.description)?.split('\n').map((line, index) => (
|
>
|
||||||
<span className="text-wrap break-words" key={index}>{line}</span>
|
<p className="line-clamp-2 text-wrap break-words">
|
||||||
))}</p>
|
{(course.summary || course.description)
|
||||||
|
?.split("\n")
|
||||||
|
.map((line, index) => (
|
||||||
|
<span className="text-wrap break-words" key={index}>
|
||||||
|
{line}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</p>
|
||||||
</CardDescription>
|
</CardDescription>
|
||||||
<CardFooter className={`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-t border-gray-700 pt-4 ${isMobile ? "px-3" : ""}`}>
|
<CardFooter
|
||||||
<p className="text-sm text-gray-300">{course?.published_at && course.published_at !== "" ? (
|
className={`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-t border-gray-700 pt-4 ${
|
||||||
formatTimestampToHowLongAgo(course.published_at)
|
isMobile ? "px-3" : ""
|
||||||
) : (
|
}`}
|
||||||
formatTimestampToHowLongAgo(course.created_at)
|
>
|
||||||
)}</p>
|
<p className="text-sm text-gray-300">
|
||||||
<GenericButton onClick={() => router.push(`/course/${nAddress}`)} size="small" label="Start Learning" icon="pi pi-chevron-right" iconPos="right" outlined className="items-center py-2" />
|
{course?.published_at && course.published_at !== ""
|
||||||
|
? formatTimestampToHowLongAgo(course.published_at)
|
||||||
|
: formatTimestampToHowLongAgo(course.created_at)}
|
||||||
|
</p>
|
||||||
|
<GenericButton
|
||||||
|
onClick={() => router.push(`/course/${nAddress}`)}
|
||||||
|
size="small"
|
||||||
|
label="Start Learning"
|
||||||
|
icon="pi pi-chevron-right"
|
||||||
|
iconPos="right"
|
||||||
|
outlined
|
||||||
|
className="items-center py-2"
|
||||||
|
/>
|
||||||
</CardFooter>
|
</CardFooter>
|
||||||
|
{nAddress !== null &&
|
||||||
|
(!course?.price ||
|
||||||
|
course.price === 0 ||
|
||||||
|
session?.user?.role?.subscribed ||
|
||||||
|
session?.user?.purchased?.some(
|
||||||
|
(purchase) => purchase.resourceId === course.d
|
||||||
|
)) && (
|
||||||
|
<div className="px-4 pb-4">
|
||||||
|
{nsec || npub ? (
|
||||||
|
<ZapThreadsWrapper
|
||||||
|
anchor={nAddress}
|
||||||
|
user={nsec || npub || null}
|
||||||
|
relays={appConfig.defaultRelayUrls.join(",")}
|
||||||
|
disable="zaps"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<ZapThreadsWrapper
|
||||||
|
anchor={nAddress}
|
||||||
|
user={npub}
|
||||||
|
relays={appConfig.defaultRelayUrls.join(",")}
|
||||||
|
disable="zaps"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,34 +1,46 @@
|
|||||||
import React, { useEffect, useState, useCallback, useRef } from 'react';
|
import React, { useEffect, useState, useCallback, 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 CoursePaymentButton from "@/components/bitcoinConnect/CoursePaymentButton";
|
import CoursePaymentButton from "@/components/bitcoinConnect/CoursePaymentButton";
|
||||||
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 { nip19 } from 'nostr-tools';
|
import { nip19 } from "nostr-tools";
|
||||||
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 { useNDKContext } from "@/context/NDKContext";
|
import { useNDKContext } from "@/context/NDKContext";
|
||||||
import { findKind0Fields } from '@/utils/nostr';
|
import { findKind0Fields } from "@/utils/nostr";
|
||||||
import appConfig from "@/config/appConfig";
|
import appConfig from "@/config/appConfig";
|
||||||
import useTrackCourse from '@/hooks/tracking/useTrackCourse';
|
import useTrackCourse from "@/hooks/tracking/useTrackCourse";
|
||||||
import WelcomeModal from '@/components/onboarding/WelcomeModal';
|
import WelcomeModal from "@/components/onboarding/WelcomeModal";
|
||||||
import { ProgressSpinner } from 'primereact/progressspinner';
|
import { ProgressSpinner } from "primereact/progressspinner";
|
||||||
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";
|
||||||
|
|
||||||
export default function CourseDetails({ processedEvent, paidCourse, lessons, decryptionPerformed, handlePaymentSuccess, handlePaymentError }) {
|
export default function CourseDetails({
|
||||||
|
processedEvent,
|
||||||
|
paidCourse,
|
||||||
|
lessons,
|
||||||
|
decryptionPerformed,
|
||||||
|
handlePaymentSuccess,
|
||||||
|
handlePaymentError,
|
||||||
|
}) {
|
||||||
const [zapAmount, setZapAmount] = useState(0);
|
const [zapAmount, setZapAmount] = useState(0);
|
||||||
const [author, setAuthor] = useState(null);
|
const [author, setAuthor] = useState(null);
|
||||||
const [nAddress, setNAddress] = useState(null);
|
const [nAddress, setNAddress] = useState(null);
|
||||||
|
const [nsec, setNsec] = useState(null);
|
||||||
|
const [npub, setNpub] = 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();
|
||||||
@ -41,41 +53,42 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
|
|||||||
try {
|
try {
|
||||||
const response = await axios.delete(`/api/courses/${processedEvent.d}`);
|
const response = await axios.delete(`/api/courses/${processedEvent.d}`);
|
||||||
if (response.status === 204) {
|
if (response.status === 204) {
|
||||||
showToast('success', 'Success', 'Course deleted successfully.');
|
showToast("success", "Success", "Course deleted successfully.");
|
||||||
router.push('/');
|
router.push("/");
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
showToast('error', 'Error', 'Failed to delete course. Please try again.');
|
showToast("error", "Error", "Failed to delete course. Please try again.");
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const menuItems = [
|
const menuItems = [
|
||||||
{
|
{
|
||||||
label: processedEvent?.pubkey === session?.user?.pubkey ? 'Edit' : null,
|
label: processedEvent?.pubkey === session?.user?.pubkey ? "Edit" : null,
|
||||||
icon: 'pi pi-pencil',
|
icon: "pi pi-pencil",
|
||||||
command: () => router.push(`/course/${processedEvent.d}/edit`),
|
command: () => router.push(`/course/${processedEvent.d}/edit`),
|
||||||
visible: processedEvent?.pubkey === session?.user?.pubkey
|
visible: processedEvent?.pubkey === session?.user?.pubkey,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: processedEvent?.pubkey === session?.user?.pubkey ? 'Delete' : null,
|
label: processedEvent?.pubkey === session?.user?.pubkey ? "Delete" : null,
|
||||||
icon: 'pi pi-trash',
|
icon: "pi pi-trash",
|
||||||
command: handleDelete,
|
command: handleDelete,
|
||||||
visible: processedEvent?.pubkey === session?.user?.pubkey
|
visible: processedEvent?.pubkey === session?.user?.pubkey,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'View Nostr note',
|
label: "View Nostr note",
|
||||||
icon: 'pi pi-globe',
|
icon: "pi pi-globe",
|
||||||
command: () => window.open(`https://nostr.band/${nAddress}`, '_blank')
|
command: () => window.open(`https://nostr.band/${nAddress}`, "_blank"),
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const { isCompleted } = useTrackCourse({
|
const { isCompleted } = useTrackCourse({
|
||||||
courseId: processedEvent?.d,
|
courseId: processedEvent?.d,
|
||||||
paidCourse,
|
paidCourse,
|
||||||
decryptionPerformed
|
decryptionPerformed,
|
||||||
});
|
});
|
||||||
|
|
||||||
const fetchAuthor = useCallback(async (pubkey) => {
|
const fetchAuthor = useCallback(
|
||||||
|
async (pubkey) => {
|
||||||
if (!pubkey) return;
|
if (!pubkey) return;
|
||||||
const author = await ndk.getUser({ pubkey });
|
const author = await ndk.getUser({ pubkey });
|
||||||
const profile = await author.fetchProfile();
|
const profile = await author.fetchProfile();
|
||||||
@ -83,7 +96,9 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
|
|||||||
if (fields) {
|
if (fields) {
|
||||||
setAuthor(fields);
|
setAuthor(fields);
|
||||||
}
|
}
|
||||||
}, [ndk]);
|
},
|
||||||
|
[ndk]
|
||||||
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (processedEvent) {
|
if (processedEvent) {
|
||||||
@ -91,7 +106,7 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
|
|||||||
pubkey: processedEvent.pubkey,
|
pubkey: processedEvent.pubkey,
|
||||||
kind: processedEvent.kind,
|
kind: processedEvent.kind,
|
||||||
identifier: processedEvent.d,
|
identifier: processedEvent.d,
|
||||||
relays: appConfig.defaultRelayUrls
|
relays: appConfig.defaultRelayUrls,
|
||||||
});
|
});
|
||||||
setNAddress(naddr);
|
setNAddress(naddr);
|
||||||
}
|
}
|
||||||
@ -110,22 +125,78 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
|
|||||||
}
|
}
|
||||||
}, [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 && decryptionPerformed) {
|
if (
|
||||||
return <GenericButton tooltipOptions={{ position: 'top' }} tooltip={`You are subscribed so you can access all paid content`} icon="pi pi-check" label="Subscribed" severity="success" outlined size="small" className="cursor-default hover:opacity-100 hover:bg-transparent focus:ring-0" />
|
session?.user &&
|
||||||
|
session.user?.role?.subscribed &&
|
||||||
|
decryptionPerformed
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<GenericButton
|
||||||
|
tooltipOptions={{ position: "top" }}
|
||||||
|
tooltip={`You are subscribed so you can access all paid content`}
|
||||||
|
icon="pi pi-check"
|
||||||
|
label="Subscribed"
|
||||||
|
severity="success"
|
||||||
|
outlined
|
||||||
|
size="small"
|
||||||
|
className="cursor-default hover:opacity-100 hover:bg-transparent focus:ring-0"
|
||||||
|
/>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (paidCourse && decryptionPerformed && author && processedEvent?.pubkey !== session?.user?.pubkey && !session?.user?.role?.subscribed) {
|
if (
|
||||||
return <GenericButton icon="pi pi-check" label={`Paid`} severity="success" outlined size="small" tooltip={`You paid ${processedEvent.price} sats to access this course (or potentially less if a discount was applied)`} tooltipOptions={{ position: 'top' }} className="cursor-default hover:opacity-100 hover:bg-transparent focus:ring-0" />
|
paidCourse &&
|
||||||
|
decryptionPerformed &&
|
||||||
|
author &&
|
||||||
|
processedEvent?.pubkey !== session?.user?.pubkey &&
|
||||||
|
!session?.user?.role?.subscribed
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<GenericButton
|
||||||
|
icon="pi pi-check"
|
||||||
|
label={`Paid`}
|
||||||
|
severity="success"
|
||||||
|
outlined
|
||||||
|
size="small"
|
||||||
|
tooltip={`You paid ${processedEvent.price} sats to access this course (or potentially less if a discount was applied)`}
|
||||||
|
tooltipOptions={{ position: "top" }}
|
||||||
|
className="cursor-default hover:opacity-100 hover:bg-transparent focus:ring-0"
|
||||||
|
/>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (paidCourse && author && processedEvent?.pubkey === session?.user?.pubkey) {
|
if (
|
||||||
return <GenericButton tooltipOptions={{ position: 'top' }} tooltip={`You created this paid course, users must pay ${processedEvent.price} sats to access it`} icon="pi pi-check" label={`Price ${processedEvent.price} sats`} severity="success" outlined size="small" className="cursor-default hover:opacity-100 hover:bg-transparent focus:ring-0" />
|
paidCourse &&
|
||||||
|
author &&
|
||||||
|
processedEvent?.pubkey === session?.user?.pubkey
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<GenericButton
|
||||||
|
tooltipOptions={{ position: "top" }}
|
||||||
|
tooltip={`You created this paid course, users must pay ${processedEvent.price} sats to access it`}
|
||||||
|
icon="pi pi-check"
|
||||||
|
label={`Price ${processedEvent.price} sats`}
|
||||||
|
severity="success"
|
||||||
|
outlined
|
||||||
|
size="small"
|
||||||
|
className="cursor-default hover:opacity-100 hover:bg-transparent focus:ring-0"
|
||||||
|
/>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (paidCourse && !decryptionPerformed) {
|
if (paidCourse && !decryptionPerformed) {
|
||||||
return (
|
return (
|
||||||
<div className='w-fit'>
|
<div className="w-fit">
|
||||||
<CoursePaymentButton
|
<CoursePaymentButton
|
||||||
lnAddress={author?.lud16}
|
lnAddress={author?.lud16}
|
||||||
amount={processedEvent.price}
|
amount={processedEvent.price}
|
||||||
@ -141,7 +212,11 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
|
|||||||
};
|
};
|
||||||
|
|
||||||
if (!processedEvent || !author) {
|
if (!processedEvent || !author) {
|
||||||
return <div className='w-full h-full flex items-center justify-center'><ProgressSpinner /></div>;
|
return (
|
||||||
|
<div className="w-full h-full flex items-center justify-center">
|
||||||
|
<ProgressSpinner />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -158,11 +233,16 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
|
|||||||
<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">
|
||||||
<i className={`pi pi-arrow-left cursor-pointer hover:opacity-75 absolute top-0 left-4`} onClick={() => router.push('/')} />
|
<i
|
||||||
|
className={`pi pi-arrow-left cursor-pointer hover:opacity-75 absolute top-0 left-4`}
|
||||||
|
onClick={() => router.push("/")}
|
||||||
|
/>
|
||||||
<div className="mb-8 bg-gray-800/70 rounded-lg p-4 max-mob:rounded-t-none max-tab:rounded-t-none">
|
<div className="mb-8 bg-gray-800/70 rounded-lg p-4 max-mob:rounded-t-none max-tab:rounded-t-none">
|
||||||
{isCompleted && <Tag severity="success" value="Completed" />}
|
{isCompleted && <Tag severity="success" value="Completed" />}
|
||||||
<div className="flex flex-row items-center justify-between w-full">
|
<div className="flex flex-row items-center justify-between w-full">
|
||||||
<h1 className='text-4xl font-bold text-white'>{processedEvent.name}</h1>
|
<h1 className="text-4xl font-bold text-white">
|
||||||
|
{processedEvent.name}
|
||||||
|
</h1>
|
||||||
<ZapDisplay
|
<ZapDisplay
|
||||||
zapAmount={zapAmount}
|
zapAmount={zapAmount}
|
||||||
event={processedEvent}
|
event={processedEvent}
|
||||||
@ -170,20 +250,20 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-wrap gap-2 mt-2 mb-4">
|
<div className="flex flex-wrap gap-2 mt-2 mb-4">
|
||||||
{processedEvent.topics && processedEvent.topics.length > 0 && (
|
{processedEvent.topics &&
|
||||||
|
processedEvent.topics.length > 0 &&
|
||||||
processedEvent.topics.map((topic, index) => (
|
processedEvent.topics.map((topic, index) => (
|
||||||
<Tag className='text-white' key={index} value={topic}></Tag>
|
<Tag className="text-white" key={index} value={topic}></Tag>
|
||||||
))
|
))}
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<div className='text-xl text-gray-200 mb-4 mt-4 max-mob:text-base'>{processedEvent.description && (
|
<div className="text-xl text-gray-200 mb-4 mt-4 max-mob:text-base">
|
||||||
processedEvent.description.split('\n').map((line, index) => (
|
{processedEvent.description &&
|
||||||
<p key={index}>{line}</p>
|
processedEvent.description
|
||||||
))
|
.split("\n")
|
||||||
)}
|
.map((line, index) => <p key={index}>{line}</p>)}
|
||||||
</div>
|
</div>
|
||||||
<div className='flex items-center justify-between mt-8'>
|
<div className="flex items-center justify-between mt-8">
|
||||||
<div className='flex items-center'>
|
<div className="flex items-center">
|
||||||
<Image
|
<Image
|
||||||
alt="avatar image"
|
alt="avatar image"
|
||||||
src={returnImageProxy(author?.avatar, author?.pubkey)}
|
src={returnImageProxy(author?.avatar, author?.pubkey)}
|
||||||
@ -191,9 +271,13 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
|
|||||||
height={50}
|
height={50}
|
||||||
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 rel='noreferrer noopener' target='_blank' className='text-blue-300 hover:underline'>
|
<a
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
className="text-blue-300 hover:underline"
|
||||||
|
>
|
||||||
{author?.username || author?.name || author?.pubkey}
|
{author?.username || author?.name || author?.pubkey}
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
@ -206,10 +290,42 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='w-full mt-4'>
|
<div className="w-full mt-4">{renderPaymentMessage()}</div>
|
||||||
{renderPaymentMessage()}
|
|
||||||
</div>
|
</div>
|
||||||
|
{nAddress !== null && (
|
||||||
|
<div className="px-4">
|
||||||
|
{paidCourse ? (
|
||||||
|
// For paid content, only show ZapThreads if user has access
|
||||||
|
processedEvent?.pubkey === session?.user?.pubkey ||
|
||||||
|
decryptionPerformed ||
|
||||||
|
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 course purchasers,
|
||||||
|
subscribers, and the course creator.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
// For free content, show ZapThreads to everyone
|
||||||
|
<ZapThreadsWrapper
|
||||||
|
anchor={nAddress}
|
||||||
|
user={session?.user ? nsec || npub : null}
|
||||||
|
relays={appConfig.defaultRelayUrls.join(",")}
|
||||||
|
disable="zaps"
|
||||||
|
isAuthorized={true}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -13,17 +13,27 @@ import { nip19 } from "nostr-tools";
|
|||||||
import appConfig from "@/config/appConfig";
|
import appConfig from "@/config/appConfig";
|
||||||
import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
|
import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
|
||||||
import { useSession } from "next-auth/react";
|
import { useSession } from "next-auth/react";
|
||||||
|
import ZapThreadsWrapper from "@/components/ZapThreadsWrapper";
|
||||||
|
|
||||||
const MDDisplay = dynamic(
|
const MDDisplay = dynamic(() => import("@uiw/react-markdown-preview"), {
|
||||||
() => import("@uiw/react-markdown-preview"),
|
|
||||||
{
|
|
||||||
ssr: false,
|
ssr: false,
|
||||||
}
|
});
|
||||||
);
|
|
||||||
|
|
||||||
const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted }) => {
|
const CourseLesson = ({
|
||||||
|
lesson,
|
||||||
|
course,
|
||||||
|
decryptionPerformed,
|
||||||
|
isPaid,
|
||||||
|
setCompleted,
|
||||||
|
}) => {
|
||||||
const [zapAmount, setZapAmount] = useState(0);
|
const [zapAmount, setZapAmount] = useState(0);
|
||||||
const { zaps, zapsLoading, zapsError } = useZapsQuery({ event: lesson, type: "lesson" });
|
const [nAddress, setNAddress] = useState(null);
|
||||||
|
const [nsec, setNsec] = useState(null);
|
||||||
|
const [npub, setNpub] = useState(null);
|
||||||
|
const { zaps, zapsLoading, zapsError } = useZapsQuery({
|
||||||
|
event: lesson,
|
||||||
|
type: "lesson",
|
||||||
|
});
|
||||||
const { returnImageProxy } = useImageProxy();
|
const { returnImageProxy } = useImageProxy();
|
||||||
const menuRef = useRef(null);
|
const menuRef = useRef(null);
|
||||||
const toastRef = useRef(null);
|
const toastRef = useRef(null);
|
||||||
@ -31,74 +41,75 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
|
|||||||
const isMobileView = windowWidth <= 768;
|
const isMobileView = windowWidth <= 768;
|
||||||
const { data: session } = useSession();
|
const { data: session } = useSession();
|
||||||
|
|
||||||
const readTime = lesson?.content ? Math.max(30, Math.ceil(lesson.content.length / 20)) : 60;
|
const readTime = lesson?.content
|
||||||
|
? Math.max(30, Math.ceil(lesson.content.length / 20))
|
||||||
|
: 60;
|
||||||
|
|
||||||
const { isCompleted, isTracking, markLessonAsCompleted } = useTrackDocumentLesson({
|
const { isCompleted, isTracking, markLessonAsCompleted } =
|
||||||
|
useTrackDocumentLesson({
|
||||||
lessonId: lesson?.d,
|
lessonId: lesson?.d,
|
||||||
courseId: course?.d,
|
courseId: course?.d,
|
||||||
readTime,
|
readTime,
|
||||||
paidCourse: isPaid,
|
paidCourse: isPaid,
|
||||||
decryptionPerformed
|
decryptionPerformed,
|
||||||
});
|
});
|
||||||
|
|
||||||
const buildMenuItems = () => {
|
const buildMenuItems = () => {
|
||||||
const items = [];
|
const items = [];
|
||||||
|
|
||||||
const hasAccess = session?.user && (
|
const hasAccess =
|
||||||
!isPaid ||
|
session?.user &&
|
||||||
decryptionPerformed ||
|
(!isPaid || decryptionPerformed || session.user.role?.subscribed);
|
||||||
session.user.role?.subscribed
|
|
||||||
);
|
|
||||||
|
|
||||||
if (hasAccess) {
|
if (hasAccess) {
|
||||||
items.push({
|
items.push({
|
||||||
label: 'Mark as completed',
|
label: "Mark as completed",
|
||||||
icon: 'pi pi-check-circle',
|
icon: "pi pi-check-circle",
|
||||||
command: async () => {
|
command: async () => {
|
||||||
try {
|
try {
|
||||||
await markLessonAsCompleted();
|
await markLessonAsCompleted();
|
||||||
setCompleted && setCompleted(lesson.id);
|
setCompleted && setCompleted(lesson.id);
|
||||||
toastRef.current.show({
|
toastRef.current.show({
|
||||||
severity: 'success',
|
severity: "success",
|
||||||
summary: 'Success',
|
summary: "Success",
|
||||||
detail: 'Lesson marked as completed',
|
detail: "Lesson marked as completed",
|
||||||
life: 3000
|
life: 3000,
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to mark lesson as completed:', error);
|
console.error("Failed to mark lesson as completed:", error);
|
||||||
toastRef.current.show({
|
toastRef.current.show({
|
||||||
severity: 'error',
|
severity: "error",
|
||||||
summary: 'Error',
|
summary: "Error",
|
||||||
detail: 'Failed to mark lesson as completed',
|
detail: "Failed to mark lesson as completed",
|
||||||
life: 3000
|
life: 3000,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
items.push({
|
items.push({
|
||||||
label: 'Open lesson',
|
label: "Open lesson",
|
||||||
icon: 'pi pi-arrow-up-right',
|
icon: "pi pi-arrow-up-right",
|
||||||
command: () => {
|
command: () => {
|
||||||
window.open(`/details/${lesson.id}`, '_blank');
|
window.open(`/details/${lesson.id}`, "_blank");
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
items.push({
|
items.push({
|
||||||
label: 'View Nostr note',
|
label: "View Nostr note",
|
||||||
icon: 'pi pi-globe',
|
icon: "pi pi-globe",
|
||||||
command: () => {
|
command: () => {
|
||||||
if (lesson?.d) {
|
if (lesson?.d) {
|
||||||
const addr = nip19.naddrEncode({
|
const addr = nip19.naddrEncode({
|
||||||
pubkey: lesson.pubkey,
|
pubkey: lesson.pubkey,
|
||||||
kind: lesson.kind,
|
kind: lesson.kind,
|
||||||
identifier: lesson.d,
|
identifier: lesson.d,
|
||||||
relays: appConfig.defaultRelayUrls || []
|
relays: appConfig.defaultRelayUrls || [],
|
||||||
});
|
});
|
||||||
window.open(`https://habla.news/a/${addr}`, '_blank');
|
window.open(`https://habla.news/a/${addr}`, "_blank");
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
return items;
|
return items;
|
||||||
@ -118,60 +129,102 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
|
|||||||
}
|
}
|
||||||
}, [isCompleted, isTracking, lesson.id, setCompleted]);
|
}, [isCompleted, isTracking, lesson.id, setCompleted]);
|
||||||
|
|
||||||
|
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]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (lesson) {
|
||||||
|
const addr = nip19.naddrEncode({
|
||||||
|
pubkey: lesson.pubkey,
|
||||||
|
kind: lesson.kind,
|
||||||
|
identifier: lesson.d,
|
||||||
|
relays: appConfig.defaultRelayUrls,
|
||||||
|
});
|
||||||
|
setNAddress(addr);
|
||||||
|
}
|
||||||
|
}, [lesson]);
|
||||||
|
|
||||||
const renderContent = () => {
|
const renderContent = () => {
|
||||||
if (isPaid && decryptionPerformed) {
|
if (isPaid && decryptionPerformed) {
|
||||||
return <MDDisplay className='p-4 rounded-lg w-full' source={lesson.content} />;
|
return (
|
||||||
|
<MDDisplay className="p-4 rounded-lg w-full" source={lesson.content} />
|
||||||
|
);
|
||||||
}
|
}
|
||||||
if (isPaid && !decryptionPerformed) {
|
if (isPaid && !decryptionPerformed) {
|
||||||
return <p className="text-center text-xl text-red-500">This content is paid and needs to be purchased before viewing.</p>;
|
return (
|
||||||
|
<p className="text-center text-xl text-red-500">
|
||||||
|
This content is paid and needs to be purchased before viewing.
|
||||||
|
</p>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
if (lesson?.content) {
|
if (lesson?.content) {
|
||||||
return <MDDisplay className='p-4 rounded-lg w-full' source={lesson.content} />;
|
return (
|
||||||
|
<MDDisplay className="p-4 rounded-lg w-full" source={lesson.content} />
|
||||||
|
);
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='w-full px-24 pt-12 mx-auto mt-4 max-tab:px-0 max-mob:px-0 max-tab:pt-2 max-mob:pt-2'>
|
<div className="w-full px-24 pt-12 mx-auto mt-4 max-tab:px-0 max-mob:px-0 max-tab:pt-2 max-mob:pt-2">
|
||||||
<Toast ref={toastRef} />
|
<Toast ref={toastRef} />
|
||||||
<div className='w-full flex flex-row justify-between max-tab:flex-col max-mob:flex-col'>
|
<div className="w-full flex flex-row justify-between max-tab:flex-col max-mob:flex-col">
|
||||||
<div className='w-[75vw] mx-auto flex flex-row items-start justify-between max-tab:flex-col max-mob:flex-col max-tab:w-[95vw] max-mob:w-[95vw]'>
|
<div className="w-[75vw] mx-auto flex flex-row items-start justify-between max-tab:flex-col max-mob:flex-col max-tab:w-[95vw] max-mob:w-[95vw]">
|
||||||
<div className='flex flex-col items-start max-w-[45vw] max-tab:max-w-[100vw] max-mob:max-w-[100vw]'>
|
<div className="flex flex-col items-start max-w-[45vw] max-tab:max-w-[100vw] max-mob:max-w-[100vw]">
|
||||||
<div className="flex flex-row items-center justify-between w-full">
|
<div className="flex flex-row items-center justify-between w-full">
|
||||||
<h1 className='text-4xl'>{lesson?.title}</h1>
|
<h1 className="text-4xl">{lesson?.title}</h1>
|
||||||
<ZapDisplay
|
<ZapDisplay
|
||||||
zapAmount={zapAmount}
|
zapAmount={zapAmount}
|
||||||
event={lesson}
|
event={lesson}
|
||||||
zapsLoading={zapsLoading}
|
zapsLoading={zapsLoading}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className='pt-2 flex flex-row justify-start w-full mt-2 mb-4'>
|
<div className="pt-2 flex flex-row justify-start w-full mt-2 mb-4">
|
||||||
{lesson && lesson.topics && lesson.topics.length > 0 && (
|
{lesson &&
|
||||||
|
lesson.topics &&
|
||||||
|
lesson.topics.length > 0 &&
|
||||||
lesson.topics.map((topic, index) => (
|
lesson.topics.map((topic, index) => (
|
||||||
<Tag className='mr-2 text-white' key={index} value={topic}></Tag>
|
<Tag
|
||||||
))
|
className="mr-2 text-white"
|
||||||
)}
|
key={index}
|
||||||
|
value={topic}
|
||||||
|
></Tag>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className='text-xl mt-6'>{lesson?.summary && (
|
<div className="text-xl mt-6">
|
||||||
|
{lesson?.summary && (
|
||||||
<div className="text-xl mt-4">
|
<div className="text-xl mt-4">
|
||||||
{lesson.summary.split('\n').map((line, index) => (
|
{lesson.summary.split("\n").map((line, index) => (
|
||||||
<p key={index}>{line}</p>
|
<p key={index}>{line}</p>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className='flex items-center justify-between w-full mt-8'>
|
<div className="flex items-center justify-between w-full mt-8">
|
||||||
<div className='flex flex-row w-fit items-center'>
|
<div className="flex flex-row w-fit items-center">
|
||||||
<Image
|
<Image
|
||||||
alt="avatar thumbnail"
|
alt="avatar thumbnail"
|
||||||
src={returnImageProxy(lesson.author?.avatar, lesson.author?.pubkey)}
|
src={returnImageProxy(
|
||||||
|
lesson.author?.avatar,
|
||||||
|
lesson.author?.pubkey
|
||||||
|
)}
|
||||||
width={50}
|
width={50}
|
||||||
height={50}
|
height={50}
|
||||||
className="rounded-full mr-4"
|
className="rounded-full mr-4"
|
||||||
/>
|
/>
|
||||||
<p className='text-lg'>
|
<p className="text-lg">
|
||||||
Created by{' '}
|
Created by{" "}
|
||||||
<a rel='noreferrer noopener' target='_blank' className='text-blue-500 hover:underline'>
|
<a
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
className="text-blue-500 hover:underline"
|
||||||
|
>
|
||||||
{lesson.author?.username || lesson.author?.pubkey}
|
{lesson.author?.username || lesson.author?.pubkey}
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
@ -185,9 +238,9 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex flex-col max-tab:mt-12 max-mob:mt-12'>
|
<div className="flex flex-col max-tab:mt-12 max-mob:mt-12">
|
||||||
{lesson && (
|
{lesson && (
|
||||||
<div className='flex flex-col items-center justify-between rounded-lg h-72 p-4 bg-gray-700 drop-shadow-md'>
|
<div className="flex flex-col items-center justify-between rounded-lg h-72 p-4 bg-gray-700 drop-shadow-md">
|
||||||
<Image
|
<Image
|
||||||
alt="course thumbnail"
|
alt="course thumbnail"
|
||||||
src={returnImageProxy(lesson.image)}
|
src={returnImageProxy(lesson.image)}
|
||||||
@ -200,11 +253,31 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='w-[75vw] mx-auto mt-12 p-12 border-t-2 border-gray-300 max-tab:p-0 max-mob:p-0 max-tab:max-w-[100vw] max-mob:max-w-[100vw]'>
|
<div className="w-[75vw] mx-auto mt-12 p-12 border-t-2 border-gray-300 max-tab:p-0 max-mob:p-0 max-tab:max-w-[100vw] max-mob:max-w-[100vw]">
|
||||||
{renderContent()}
|
{renderContent()}
|
||||||
</div>
|
</div>
|
||||||
|
{nAddress !== null &&
|
||||||
|
(!isPaid || decryptionPerformed || session?.user?.role?.subscribed) && (
|
||||||
|
<div className="px-4">
|
||||||
|
{nsec || npub ? (
|
||||||
|
<ZapThreadsWrapper
|
||||||
|
anchor={nAddress}
|
||||||
|
user={nsec || npub || null}
|
||||||
|
relays={appConfig.defaultRelayUrls.join(",")}
|
||||||
|
disable="zaps"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<ZapThreadsWrapper
|
||||||
|
anchor={nAddress}
|
||||||
|
user={npub}
|
||||||
|
relays={appConfig.defaultRelayUrls.join(",")}
|
||||||
|
disable="zaps"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)}
|
||||||
}
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export default CourseLesson;
|
export default CourseLesson;
|
||||||
|
|||||||
@ -9,7 +9,7 @@ const appConfig = {
|
|||||||
"wss://purplerelay.com/",
|
"wss://purplerelay.com/",
|
||||||
"wss://relay.devs.tools/"
|
"wss://relay.devs.tools/"
|
||||||
],
|
],
|
||||||
authorPubkeys: ["f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741", "c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345"],
|
authorPubkeys: ["f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741", "c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345", "b9f4c34dc25b2ddd785c007bf6e12619bb1c9b8335b8d75d37bf76e97d1a0e31"],
|
||||||
customLightningAddresses: [
|
customLightningAddresses: [
|
||||||
{
|
{
|
||||||
// todo remove need for lowercase
|
// todo remove need for lowercase
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user