saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-04-19 10:51:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Standardize details layout on contet, consolidate options into new generic moreOptionsMenu component

Browse Source
This commit is contained in:
austinkelsay 2025-03-30 17:31:53 -05:00
parent b94e90fc03
commit ed41f9a170
No known key found for this signature in database
GPG Key ID: 5A763922E5BA08EE
9 changed files with 578 additions and 648 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React, { useEffect, useState } 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";
@ -13,6 +13,8 @@ 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 MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
const MDDisplay = dynamic( const MDDisplay = dynamic(
() => import("@uiw/react-markdown-preview"), () => import("@uiw/react-markdown-preview"),
@ -29,6 +31,62 @@ const CombinedDetails = ({ processedEvent, topics, title, summary, image, price,
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 toastRef = useRef(null);
const handleDelete = async () => {
try {
const response = await axios.delete(`/api/resources/${processedEvent.d}`);
if (response.status === 204) {
showToast('success', 'Success', 'Resource deleted successfully.');
router.push('/');
}
} catch (error) {
if (error.response?.data?.error?.includes("Invalid `prisma.resource.delete()`")) {
showToast('error', 'Error', 'Resource cannot be deleted because it is part of a course, delete the course first.');
} else {
showToast('error', 'Error', 'Failed to delete resource. Please try again.');
}
}
};
const authorMenuItems = [
{
label: 'Edit',
icon: 'pi pi-pencil',
command: () => router.push(`/details/${processedEvent.id}/edit`)
},
{
label: 'Delete',
icon: 'pi pi-trash',
command: handleDelete
},
{
label: 'View Nostr note',
icon: 'pi pi-globe',
command: () => {
window.open(`https://habla.news/a/${nAddress}`, '_blank');
}
}
];
const userMenuItems = [
{
label: 'View Nostr note',
icon: 'pi pi-globe',
command: () => {
window.open(`https://habla.news/a/${nAddress}`, '_blank');
}
}
];
if (course) {
userMenuItems.unshift({
label: isMobileView ? 'Course' : 'Open Course',
icon: 'pi pi-external-link',
command: () => window.open(`/course/${course}`, '_blank')
});
}
useEffect(() => { useEffect(() => {
if (isLesson) { if (isLesson) {
@ -49,22 +107,6 @@ const CombinedDetails = ({ processedEvent, topics, title, summary, image, price,
} }
}, [zaps, processedEvent]); }, [zaps, processedEvent]);
const handleDelete = async () => {
try {
const response = await axios.delete(`/api/resources/${processedEvent.d}`);
if (response.status === 204) {
showToast('success', 'Success', 'Resource deleted successfully.');
router.push('/');
}
} catch (error) {
if (error.response?.data?.error?.includes("Invalid `prisma.resource.delete()`")) {
showToast('error', 'Error', 'Resource cannot be deleted because it is part of a course, delete the course first.');
} else {
showToast('error', 'Error', 'Failed to delete resource. Please try again.');
}
}
};
const renderPaymentMessage = () => { const renderPaymentMessage = () => {
if (session?.user?.role?.subscribed && decryptedContent) { if (session?.user?.role?.subscribed && decryptedContent) {
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" />; 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" />;
@ -124,37 +166,9 @@ const CombinedDetails = ({ processedEvent, topics, title, summary, image, price,
return null; return null;
}; };
const renderAdditionalLinks = () => {
if (processedEvent?.additionalLinks?.length > 0) {
return (
<div className="my-4">
<p>Additional Links:</p>
{processedEvent.additionalLinks.map((link, index) => (
<div key={index} className="mb-2">
<a
className="text-blue-500 hover:underline hover:text-blue-600 break-words"
href={link}
target="_blank"
rel="noopener noreferrer"
style={{
wordBreak: 'break-word',
overflowWrap: 'break-word',
display: 'inline-block',
maxWidth: '100%'
}}
>
{link}
</a>
</div>
))}
</div>
);
}
return null;
};
return ( return (
<div className="w-full"> <div className="w-full">
<Toast ref={toastRef} />
<div className="relative w-full h-[400px] mb-8"> <div className="relative w-full h-[400px] mb-8">
<Image <Image
alt="background image" alt="background image"
@ -168,18 +182,22 @@ const CombinedDetails = ({ processedEvent, topics, title, summary, image, price,
<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">
<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'>{title}</h1> <h1 className='text-4xl font-bold text-white'>{title}</h1>
<div className="flex flex-wrap gap-2"> <ZapDisplay
{topics?.map((topic, index) => ( zapAmount={zapAmount}
<Tag className='text-[#f8f8ff]' key={index} value={topic} /> event={processedEvent}
))} zapsLoading={zapsLoading && zapAmount === 0}
{isLesson && <Tag size="small" className="text-[#f8f8ff]" value="lesson" />} />
</div> </div>
<div className="flex flex-wrap gap-2 mt-2 mb-4">
{topics?.map((topic, index) => (
<Tag className='text-[#f8f8ff]' key={index} value={topic} />
))}
{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>
))} ))}
{renderAdditionalLinks()} <div className='flex items-center justify-between mt-8'>
<div className='flex items-center justify-between'>
<div className='flex items-center'> <div className='flex items-center'>
<Image <Image
alt="avatar image" alt="avatar image"
@ -195,54 +213,16 @@ const CombinedDetails = ({ processedEvent, topics, title, summary, image, price,
</a> </a>
</p> </p>
</div> </div>
<ZapDisplay <div className="flex justify-end">
zapAmount={zapAmount} <MoreOptionsMenu
event={processedEvent} menuItems={authorView ? authorMenuItems : userMenuItems}
zapsLoading={zapsLoading && zapAmount === 0} additionalLinks={processedEvent?.additionalLinks || []}
/> isMobileView={isMobileView}
/>
</div>
</div> </div>
<div className='w-full mt-8 flex flex-wrap justify-between items-center'> <div className='w-full mt-4'>
{authorView ? ( {renderPaymentMessage()}
<div className='flex space-x-2 mt-4 sm:mt-0'>
{renderPaymentMessage()}
<div className="flex flex-row gap-2">
<GenericButton onClick={() => router.push(`/details/${processedEvent.id}/edit`)} label="Edit" severity='warning' outlined />
<GenericButton onClick={handleDelete} label="Delete" severity='danger' outlined />
<GenericButton
tooltip={isMobileView ? null : "View Nostr Note"}
tooltipOptions={{ position: 'left' }}
icon="pi pi-external-link"
outlined
onClick={() => window.open(`https://habla.news/a/${nAddress}`, '_blank')}
/>
</div>
</div>
) : (
<div className="w-full flex flex-row justify-between gap-2">
{renderPaymentMessage()}
<div className="flex flex-row justify-end gap-2">
{course && (
<GenericButton
size={isMobileView ? 'small' : null}
outlined
icon="pi pi-external-link"
onClick={() => window.open(`/course/${course}`, '_blank')}
label={isMobileView ? "Course" : "Open Course"}
tooltip="This is a lesson in a course"
tooltipOptions={{ position: 'top' }}
/>
)}
<GenericButton
size={isMobileView ? 'small' : null}
tooltip={isMobileView ? null : "View Nostr Note"}
tooltipOptions={{ position: 'left' }}
icon="pi pi-external-link"
outlined
onClick={() => window.open(`https://habla.news/a/${nAddress}`, '_blank')}
/>
</div>
</div>
)}
</div> </div>
</div> </div>
{renderContent()} {renderContent()}

104
src/components/content/courses/CombinedLesson.js
View File

@ -4,7 +4,6 @@ import Image from "next/image";
import ZapDisplay from "@/components/zaps/ZapDisplay"; import ZapDisplay from "@/components/zaps/ZapDisplay";
import { useImageProxy } from "@/hooks/useImageProxy"; import { useImageProxy } from "@/hooks/useImageProxy";
import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery"; import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery";
import GenericButton from "@/components/buttons/GenericButton";
import { nip19 } from "nostr-tools"; import { nip19 } from "nostr-tools";
import { Divider } from "primereact/divider"; import { Divider } from "primereact/divider";
import { getTotalFromZaps } from "@/utils/lightning"; import { getTotalFromZaps } from "@/utils/lightning";
@ -14,6 +13,7 @@ import appConfig from "@/config/appConfig";
import useTrackVideoLesson from '@/hooks/tracking/useTrackVideoLesson'; import useTrackVideoLesson from '@/hooks/tracking/useTrackVideoLesson';
import { Menu } from "primereact/menu"; import { Menu } from "primereact/menu";
import { Toast } from "primereact/toast"; import { Toast } from "primereact/toast";
import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
const MDDisplay = dynamic( const MDDisplay = dynamic(
() => import("@uiw/react-markdown-preview"), () => import("@uiw/react-markdown-preview"),
@ -69,6 +69,20 @@ const CombinedLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
}); });
} }
} }
},
{
label: 'Open lesson',
icon: 'pi pi-arrow-up-right',
command: () => {
window.open(`/details/${lesson.id}`, '_blank');
}
},
{
label: 'View Nostr note',
icon: 'pi pi-globe',
command: () => {
window.open(`https://habla.news/a/${nAddress}`, '_blank');
}
} }
]; ];
@ -217,13 +231,18 @@ const CombinedLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
<div className={`${!isVideo && 'mb-8 bg-gray-800/70 rounded-lg p-4'}`}> <div className={`${!isVideo && 'mb-8 bg-gray-800/70 rounded-lg p-4'}`}>
<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-3xl font-bold text-white'>{lesson.title}</h1> <h1 className='text-3xl font-bold text-white'>{lesson.title}</h1>
<div className="flex flex-wrap gap-2"> <ZapDisplay
{lesson.topics && lesson.topics.length > 0 && ( zapAmount={zapAmount}
lesson.topics.map((topic, index) => ( event={lesson}
<Tag className='text-white' key={index} value={topic}></Tag> zapsLoading={zapsLoading}
)) />
)} </div>
</div> <div className="flex flex-wrap gap-2 mt-2 mb-4">
{lesson.topics && lesson.topics.length > 0 && (
lesson.topics.map((topic, index) => (
<Tag className='text-white' key={index} value={topic}></Tag>
))
)}
</div> </div>
<div className='text-xl text-gray-200 mb-4 mt-4'>{lesson.summary && ( <div className='text-xl text-gray-200 mb-4 mt-4'>{lesson.summary && (
<div className="text-xl mt-4"> <div className="text-xl mt-4">
@ -233,7 +252,7 @@ const CombinedLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
</div> </div>
)} )}
</div> </div>
<div className='flex items-center justify-between'> <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"
@ -249,69 +268,18 @@ const CombinedLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
</a> </a>
</p> </p>
</div> </div>
<ZapDisplay <div className="flex justify-end">
zapAmount={zapAmount} <MoreOptionsMenu
event={lesson} menuItems={menuItems}
zapsLoading={zapsLoading} additionalLinks={lesson?.additionalLinks || []}
/> isMobileView={isMobileView}
</div> />
<div className="w-full flex flex-row justify-end"> </div>
<GenericButton
tooltip={isMobileView ? null : "View Nostr Note"}
tooltipOptions={{ position: 'left' }}
icon="pi pi-external-link"
outlined
onClick={() => {
window.open(`https://habla.news/a/${nAddress}`, '_blank');
}}
/>
</div> </div>
</div> </div>
{!isVideo && <Divider />} {!isVideo && <Divider />}
{lesson?.additionalLinks && lesson.additionalLinks.length > 0 && ( {!isVideo && renderContent()}
<div className='mt-6 bg-gray-800/90 rounded-lg p-4 px-0'>
<div className="flex justify-between items-start">
<div>
<h3 className='text-lg font-semibold mb-2 text-white'>External links:</h3>
<ul className='list-disc list-inside text-white'>
{lesson.additionalLinks.map((link, index) => (
<li key={index}>
<a href={link} target="_blank" rel="noopener noreferrer" className='text-blue-300 hover:underline'>
{new URL(link).hostname}
</a>
</li>
))}
</ul>
</div>
<div>
<Menu model={menuItems} popup ref={menuRef} />
<GenericButton
icon="pi pi-ellipsis-v"
onClick={(e) => menuRef.current.toggle(e)}
aria-label="More options"
className="p-button-text"
tooltip={isMobileView ? null : "More options"}
tooltipOptions={{ position: 'top' }}
/>
</div>
</div>
</div>
)}
{!lesson?.additionalLinks || lesson.additionalLinks.length === 0 && (
<div className='mt-6 flex justify-end'>
<Menu model={menuItems} popup ref={menuRef} />
<GenericButton
icon="pi pi-ellipsis-v"
onClick={(e) => menuRef.current.toggle(e)}
aria-label="More options"
className="p-button-text"
tooltip={isMobileView ? null : "More options"}
tooltipOptions={{ position: 'top' }}
/>
</div>
)}
</div> </div>
{!isVideo && renderContent()}
</div> </div>
); );
}; };

129
src/components/content/courses/CourseDetails.js
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState, useCallback } 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';
@ -19,6 +19,8 @@ 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 MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
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);
@ -32,6 +34,40 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
const windowWidth = useWindowWidth(); const windowWidth = useWindowWidth();
const isMobileView = windowWidth <= 768; const isMobileView = windowWidth <= 768;
const { ndk } = useNDKContext(); const { ndk } = useNDKContext();
const menuRef = useRef(null);
const toastRef = useRef(null);
const handleDelete = async () => {
try {
const response = await axios.delete(`/api/courses/${processedEvent.d}`);
if (response.status === 204) {
showToast('success', 'Success', 'Course deleted successfully.');
router.push('/');
}
} catch (error) {
showToast('error', 'Error', 'Failed to delete course. Please try again.');
}
}
const menuItems = [
{
label: processedEvent?.pubkey === session?.user?.pubkey ? 'Edit' : null,
icon: 'pi pi-pencil',
command: () => router.push(`/course/${processedEvent.d}/edit`),
visible: processedEvent?.pubkey === session?.user?.pubkey
},
{
label: processedEvent?.pubkey === session?.user?.pubkey ? 'Delete' : null,
icon: 'pi pi-trash',
command: handleDelete,
visible: processedEvent?.pubkey === session?.user?.pubkey
},
{
label: 'View Nostr note',
icon: 'pi pi-globe',
command: () => window.open(`https://nostr.band/${nAddress}`, '_blank')
}
];
const { isCompleted } = useTrackCourse({ const { isCompleted } = useTrackCourse({
courseId: processedEvent?.d, courseId: processedEvent?.d,
@ -74,18 +110,6 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
} }
}, [zaps, processedEvent]); }, [zaps, processedEvent]);
const handleDelete = async () => {
try {
const response = await axios.delete(`/api/courses/${processedEvent.d}`);
if (response.status === 204) {
showToast('success', 'Success', 'Course deleted successfully.');
router.push('/');
}
} catch (error) {
showToast('error', 'Error', 'Failed to delete course. Please try again.');
}
}
const renderPaymentMessage = () => { const renderPaymentMessage = () => {
if (session?.user && session.user?.role?.subscribed && decryptionPerformed) { if (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" /> 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" />
@ -114,42 +138,14 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
return null; return null;
}; };
const renderAdditionalLinks = () => {
if (processedEvent?.additionalLinks && processedEvent.additionalLinks.length > 0) {
return (
<div className="my-4">
<p>Additional Links:</p>
{processedEvent.additionalLinks.map((link, index) => (
<div key={index} className="mb-2">
<a
className="text-blue-500 hover:underline hover:text-blue-600 break-words"
href={link}
target="_blank"
rel="noopener noreferrer"
style={{
wordBreak: 'break-word',
overflowWrap: 'break-word',
display: 'inline-block',
maxWidth: '100%'
}}
>
{link}
</a>
</div>
))}
</div>
);
}
return null;
};
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 (
<div className="w-full"> <div className="w-full">
<WelcomeModal /> <Toast ref={toastRef} />
<WelcomeModal />
<div className="relative w-full h-[400px] mb-8"> <div className="relative w-full h-[400px] mb-8">
<Image <Image
alt="course image" alt="course image"
@ -165,13 +161,18 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
{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>
<div className="flex flex-wrap gap-2"> <ZapDisplay
{processedEvent.topics && processedEvent.topics.length > 0 && ( zapAmount={zapAmount}
processedEvent.topics.map((topic, index) => ( event={processedEvent}
<Tag className='text-white' key={index} value={topic}></Tag> zapsLoading={zapsLoading && zapAmount === 0}
)) />
)} </div>
</div> <div className="flex flex-wrap gap-2 mt-2 mb-4">
{processedEvent.topics && processedEvent.topics.length > 0 && (
processedEvent.topics.map((topic, index) => (
<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 && (
processedEvent.description.split('\n').map((line, index) => ( processedEvent.description.split('\n').map((line, index) => (
@ -179,7 +180,7 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
)) ))
)} )}
</div> </div>
<div className='flex items-center justify-between'> <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"
@ -195,26 +196,16 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
</a> </a>
</p> </p>
</div> </div>
<ZapDisplay <div className="flex justify-end">
zapAmount={zapAmount} <MoreOptionsMenu
event={processedEvent} menuItems={menuItems}
zapsLoading={zapsLoading && zapAmount === 0} additionalLinks={processedEvent?.additionalLinks || []}
/> isMobileView={isMobileView}
/>
</div>
</div> </div>
<div className='w-full mt-8 flex flex-wrap justify-between items-center'> <div className='w-full mt-4'>
{renderPaymentMessage()} {renderPaymentMessage()}
{processedEvent?.pubkey === session?.user?.pubkey ? (
<div className='flex space-x-2 mt-4 sm:mt-0'>
<GenericButton onClick={() => router.push(`/course/${processedEvent.d}/edit`)} label="Edit" severity='warning' outlined />
<GenericButton onClick={handleDelete} label="Delete" severity='danger' outlined />
<GenericButton outlined icon="pi pi-external-link" onClick={() => window.open(`https://nostr.band/${nAddress}`, '_blank')} tooltip={isMobileView ? null : "View Nostr Event"} tooltipOptions={{ position: paidCourse ? 'left' : 'right' }} />
</div>
) : (
<div className='flex space-x-2 mt-4 sm:mt-0'>
<GenericButton className='my-2' outlined icon="pi pi-external-link" onClick={() => window.open(`https://nostr.band/${nAddress}`, '_blank')} tooltip={isMobileView ? null : "View Nostr Event"} tooltipOptions={{ position: paidCourse ? 'left' : 'right' }} />
</div>
)}
{renderAdditionalLinks()}
</div> </div>
</div> </div>
</div> </div>

141
src/components/content/courses/CourseLesson.js
View File

@ -6,11 +6,12 @@ import { getTotalFromZaps } from "@/utils/lightning";
import ZapDisplay from "@/components/zaps/ZapDisplay"; import ZapDisplay from "@/components/zaps/ZapDisplay";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery"; import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery";
import { Menu } from "primereact/menu";
import { Toast } from "primereact/toast"; import { Toast } from "primereact/toast";
import GenericButton from "@/components/buttons/GenericButton";
import useTrackDocumentLesson from "@/hooks/tracking/useTrackDocumentLesson"; import useTrackDocumentLesson from "@/hooks/tracking/useTrackDocumentLesson";
import useWindowWidth from "@/hooks/useWindowWidth"; import useWindowWidth from "@/hooks/useWindowWidth";
import { nip19 } from "nostr-tools";
import appConfig from "@/config/appConfig";
import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
const MDDisplay = dynamic( const MDDisplay = dynamic(
() => import("@uiw/react-markdown-preview"), () => import("@uiw/react-markdown-preview"),
@ -62,9 +63,44 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
}); });
} }
} }
},
{
label: 'Open lesson',
icon: 'pi pi-arrow-up-right',
command: () => {
window.open(`/details/${lesson.id}`, '_blank');
}
},
{
label: 'View Nostr note',
icon: 'pi pi-globe',
command: () => {
if (lesson?.d) {
const addr = nip19.naddrEncode({
pubkey: lesson.pubkey,
kind: lesson.kind,
identifier: lesson.d,
relays: appConfig.defaultRelayUrls || []
});
window.open(`https://habla.news/a/${addr}`, '_blank');
}
}
} }
]; ];
// Add additional links to menu items if they exist
if (lesson?.additionalLinks && lesson.additionalLinks.length > 0) {
lesson.additionalLinks.forEach((link, index) => {
menuItems.push({
label: `Link: ${new URL(link).hostname}`,
icon: 'pi pi-external-link',
command: () => {
window.open(link, '_blank');
}
});
});
}
useEffect(() => { useEffect(() => {
if (!zaps || zapsLoading || zapsError) return; if (!zaps || zapsLoading || zapsError) return;
@ -98,78 +134,52 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
<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='pt-2 flex flex-row justify-start w-full'> <div className="flex flex-row items-center justify-between w-full">
<h1 className='text-4xl'>{lesson?.title}</h1>
<ZapDisplay
zapAmount={zapAmount}
event={lesson}
zapsLoading={zapsLoading}
/>
</div>
<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>
<h1 className='text-4xl mt-6'>{lesson?.title}</h1> <div className='text-xl mt-6'>{lesson?.summary && (
<p 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>
)}
</p>
{lesson?.additionalLinks && lesson.additionalLinks.length > 0 && (
<div className='mt-6'>
<div className="flex justify-between items-start">
<div>
<h3 className='text-lg font-semibold mb-2'>External links:</h3>
<ul className='list-disc list-inside'>
{lesson.additionalLinks.map((link, index) => (
<li key={index}>
<a href={link} target="_blank" rel="noopener noreferrer" className='text-blue-500 hover:underline'>
{new URL(link).hostname}
</a>
</li>
))}
</ul>
</div>
<div>
<Menu model={menuItems} popup ref={menuRef} />
<GenericButton
icon="pi pi-ellipsis-v"
onClick={(e) => menuRef.current.toggle(e)}
aria-label="More options"
className="p-button-text"
tooltip={isMobileView ? null : "More options"}
tooltipOptions={{ position: 'top' }}
/>
</div>
</div>
</div> </div>
)} )}
{!lesson?.additionalLinks || lesson.additionalLinks.length === 0 && ( </div>
<div className='mt-6 flex justify-end'> <div className='flex items-center justify-between w-full mt-8'>
<Menu model={menuItems} popup ref={menuRef} /> <div className='flex flex-row w-fit items-center'>
<GenericButton <Image
icon="pi pi-ellipsis-v" alt="avatar thumbnail"
onClick={(e) => menuRef.current.toggle(e)} src={returnImageProxy(lesson.author?.avatar, lesson.author?.pubkey)}
aria-label="More options" width={50}
className="p-button-text" height={50}
tooltip={isMobileView ? null : "More options"} className="rounded-full mr-4"
tooltipOptions={{ position: 'top' }} />
<p className='text-lg'>
Created by{' '}
<a rel='noreferrer noopener' target='_blank' className='text-blue-500 hover:underline'>
{lesson.author?.username || lesson.author?.pubkey}
</a>
</p>
</div>
<div className="flex justify-end">
<MoreOptionsMenu
menuItems={menuItems}
additionalLinks={lesson?.additionalLinks || []}
isMobileView={isMobileView}
/> />
</div> </div>
)}
<div className='flex flex-row w-full mt-6 items-center'>
<Image
alt="avatar thumbnail"
src={returnImageProxy(lesson.author?.avatar, lesson.author?.pubkey)}
width={50}
height={50}
className="rounded-full mr-4"
/>
<p className='text-lg'>
Created by{' '}
<a rel='noreferrer noopener' target='_blank' className='text-blue-500 hover:underline'>
{lesson.author?.username || lesson.author?.pubkey}
</a>
</p>
</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'>
@ -182,9 +192,6 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setComplete
height={194} height={194}
className="w-[344px] h-[194px] object-cover object-top rounded-lg" className="w-[344px] h-[194px] object-cover object-top rounded-lg"
/> />
<div className="w-full flex justify-end">
<ZapDisplay zapAmount={zapAmount} event={lesson} zapsLoading={zapsLoading} />
</div>
</div> </div>
)} )}
</div> </div>

105
src/components/content/courses/DocumentLesson.js
View File

@ -4,7 +4,6 @@ import Image from "next/image";
import ZapDisplay from "@/components/zaps/ZapDisplay"; import ZapDisplay from "@/components/zaps/ZapDisplay";
import { useImageProxy } from "@/hooks/useImageProxy"; import { useImageProxy } from "@/hooks/useImageProxy";
import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery"; import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery";
import GenericButton from "@/components/buttons/GenericButton";
import { nip19 } from "nostr-tools"; import { nip19 } from "nostr-tools";
import { Divider } from "primereact/divider"; import { Divider } from "primereact/divider";
import { getTotalFromZaps } from "@/utils/lightning"; import { getTotalFromZaps } from "@/utils/lightning";
@ -12,8 +11,8 @@ import dynamic from "next/dynamic";
import useWindowWidth from "@/hooks/useWindowWidth"; import useWindowWidth from "@/hooks/useWindowWidth";
import appConfig from "@/config/appConfig"; import appConfig from "@/config/appConfig";
import useTrackDocumentLesson from "@/hooks/tracking/useTrackDocumentLesson"; import useTrackDocumentLesson from "@/hooks/tracking/useTrackDocumentLesson";
import { Menu } from "primereact/menu";
import { Toast } from "primereact/toast"; import { Toast } from "primereact/toast";
import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
const MDDisplay = dynamic( const MDDisplay = dynamic(
() => import("@uiw/react-markdown-preview"), () => import("@uiw/react-markdown-preview"),
@ -66,6 +65,20 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
}); });
} }
} }
},
{
label: 'Open lesson',
icon: 'pi pi-arrow-up-right',
command: () => {
window.open(`/details/${lesson.id}`, '_blank');
}
},
{
label: 'View Nostr note',
icon: 'pi pi-globe',
command: () => {
window.open(`https://habla.news/a/${nAddress}`, '_blank');
}
} }
]; ];
@ -131,13 +144,18 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
<div className="mb-8 bg-gray-800/70 rounded-lg p-4"> <div className="mb-8 bg-gray-800/70 rounded-lg p-4">
<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-3xl font-bold text-white'>{lesson.title}</h1> <h1 className='text-3xl font-bold text-white'>{lesson.title}</h1>
<div className="flex flex-wrap gap-2"> <ZapDisplay
{lesson.topics && lesson.topics.length > 0 && ( zapAmount={zapAmount}
lesson.topics.map((topic, index) => ( event={lesson}
<Tag className='text-white' key={index} value={topic}></Tag> zapsLoading={zapsLoading}
)) />
)} </div>
</div> <div className="flex flex-wrap gap-2 mt-2 mb-4">
{lesson.topics && lesson.topics.length > 0 && (
lesson.topics.map((topic, index) => (
<Tag className='text-white' key={index} value={topic}></Tag>
))
)}
</div> </div>
<div className='text-xl text-gray-200 mb-4 mt-4'>{lesson.summary && ( <div className='text-xl text-gray-200 mb-4 mt-4'>{lesson.summary && (
<div className="text-xl mt-4"> <div className="text-xl mt-4">
@ -147,7 +165,7 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
</div> </div>
)} )}
</div> </div>
<div className='flex items-center justify-between'> <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"
@ -163,69 +181,18 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
</a> </a>
</p> </p>
</div> </div>
<ZapDisplay <div className="flex justify-end">
zapAmount={zapAmount} <MoreOptionsMenu
event={lesson} menuItems={menuItems}
zapsLoading={zapsLoading} additionalLinks={lesson?.additionalLinks || []}
/> isMobileView={isMobileView}
</div> />
<div className="w-full flex flex-row justify-end"> </div>
<GenericButton
tooltip={isMobileView ? null : "View Nostr Note"}
tooltipOptions={{ position: 'left' }}
icon="pi pi-external-link"
outlined
onClick={() => {
window.open(`https://habla.news/a/${nAddress}`, '_blank');
}}
/>
</div> </div>
</div> </div>
<Divider /> <Divider />
{lesson?.additionalLinks && lesson.additionalLinks.length > 0 && ( {renderContent()}
<div className='mt-6 bg-gray-800/90 rounded-lg p-4'>
<div className="flex justify-between items-start">
<div>
<h3 className='text-lg font-semibold mb-2 text-white'>External links:</h3>
<ul className='list-disc list-inside text-white'>
{lesson.additionalLinks.map((link, index) => (
<li key={index}>
<a href={link} target="_blank" rel="noopener noreferrer" className='text-blue-300 hover:underline'>
{new URL(link).hostname}
</a>
</li>
))}
</ul>
</div>
<div>
<Menu model={menuItems} popup ref={menuRef} />
<GenericButton
icon="pi pi-ellipsis-v"
onClick={(e) => menuRef.current.toggle(e)}
aria-label="More options"
className="p-button-text"
tooltip={isMobileView ? null : "More options"}
tooltipOptions={{ position: 'top' }}
/>
</div>
</div>
</div>
)}
{!lesson?.additionalLinks || lesson.additionalLinks.length === 0 && (
<div className='mt-6 flex justify-end'>
<Menu model={menuItems} popup ref={menuRef} />
<GenericButton
icon="pi pi-ellipsis-v"
onClick={(e) => menuRef.current.toggle(e)}
aria-label="More options"
className="p-button-text"
tooltip={isMobileView ? null : "More options"}
tooltipOptions={{ position: 'top' }}
/>
</div>
)}
</div> </div>
{renderContent()}
</div> </div>
) )
} }

127
src/components/content/courses/VideoLesson.js
View File

@ -3,7 +3,6 @@ import { Tag } from "primereact/tag";
import Image from "next/image"; import Image from "next/image";
import ZapDisplay from "@/components/zaps/ZapDisplay"; import ZapDisplay from "@/components/zaps/ZapDisplay";
import { useImageProxy } from "@/hooks/useImageProxy"; import { useImageProxy } from "@/hooks/useImageProxy";
import GenericButton from "@/components/buttons/GenericButton";
import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery"; import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery";
import { nip19 } from "nostr-tools"; import { nip19 } from "nostr-tools";
import { getTotalFromZaps } from "@/utils/lightning"; import { getTotalFromZaps } from "@/utils/lightning";
@ -12,8 +11,8 @@ import { Divider } from "primereact/divider";
import appConfig from "@/config/appConfig"; import appConfig from "@/config/appConfig";
import useWindowWidth from "@/hooks/useWindowWidth"; import useWindowWidth from "@/hooks/useWindowWidth";
import useTrackVideoLesson from '@/hooks/tracking/useTrackVideoLesson'; import useTrackVideoLesson from '@/hooks/tracking/useTrackVideoLesson';
import { Menu } from "primereact/menu";
import { Toast } from "primereact/toast"; import { Toast } from "primereact/toast";
import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
const MDDisplay = dynamic( const MDDisplay = dynamic(
() => import("@uiw/react-markdown-preview"), () => import("@uiw/react-markdown-preview"),
@ -68,6 +67,20 @@ const VideoLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted
}); });
} }
} }
},
{
label: 'Open lesson',
icon: 'pi pi-arrow-up-right',
command: () => {
window.open(`/details/${lesson.id}`, '_blank');
}
},
{
label: 'View Nostr note',
icon: 'pi pi-globe',
command: () => {
window.open(`https://habla.news/a/${nAddress}`, '_blank');
}
} }
]; ];
@ -184,16 +197,22 @@ const VideoLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted
<Divider /> <Divider />
<div className="bg-gray-800/90 rounded-lg p-4 m-4"> <div className="bg-gray-800/90 rounded-lg p-4 m-4">
<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-row items-center gap-2 w-full"> <div className="flex flex-row items-center justify-between w-full">
<h1 className='text-3xl text-white'>{lesson.title}</h1> <h1 className='text-3xl text-white'>{lesson.title}</h1>
<ZapDisplay
zapAmount={zapAmount}
event={lesson}
zapsLoading={zapsLoading}
/>
</div>
<div className="flex flex-wrap gap-2 mt-2 mb-4">
{lesson.topics && lesson.topics.length > 0 && ( {lesson.topics && lesson.topics.length > 0 && (
lesson.topics.map((topic, index) => ( lesson.topics.map((topic, index) => (
<Tag className='mt-2 text-white' key={index} value={topic}></Tag> <Tag className='text-white' key={index} value={topic}></Tag>
)) ))
)} )}
</div> </div>
<div className='flex flex-row items-center justify-between w-full'> <div className='text-xl mt-4 text-gray-200'>{lesson.summary && (
<div className='text-xl mt-4 text-gray-200'>{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>
@ -201,83 +220,31 @@ const VideoLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted
</div> </div>
)} )}
</div> </div>
<ZapDisplay </div>
zapAmount={zapAmount} <div className='flex items-center justify-between mt-8'>
event={lesson} <div className='flex items-center'>
zapsLoading={zapsLoading} <Image
alt="avatar image"
src={returnImageProxy(lesson.author?.avatar, lesson.author?.username)}
width={50}
height={50}
className="rounded-full mr-4"
/>
<p className='text-lg text-white'>
Created by{' '}
<a rel='noreferrer noopener' target='_blank' className='text-blue-300 hover:underline'>
{lesson.author?.username || lesson.author?.pubkey}
</a>
</p>
</div>
<div className="flex justify-end">
<MoreOptionsMenu
menuItems={menuItems}
additionalLinks={lesson?.additionalLinks || []}
isMobileView={isMobileView}
/> />
</div> </div>
</div> </div>
<div className='w-full flex flex-col space-y-4 mt-4'>
<div className='flex flex-row justify-between items-center'>
<div className='flex flex-row w-fit items-center'>
<Image
alt="avatar image"
src={returnImageProxy(lesson.author?.avatar, lesson.author?.username)}
width={50}
height={50}
className="rounded-full mr-4"
/>
<p className='text-lg text-white'>
Created by{' '}
<a rel='noreferrer noopener' target='_blank' className='text-blue-300 hover:underline'>
{lesson.author?.username || lesson.author?.pubkey}
</a>
</p>
</div>
<GenericButton
tooltip={isMobileView ? null : "View Nostr Note"}
tooltipOptions={{ position: 'left' }}
icon="pi pi-external-link"
outlined
onClick={() => {
window.open(`https://habla.news/a/${nAddress}`, '_blank');
}}
/>
</div>
</div>
{lesson?.additionalLinks && lesson.additionalLinks.length > 0 && (
<div className='mt-6'>
<div className="flex justify-between items-start">
<div>
<h3 className='text-lg font-semibold mb-2 text-white'>External links:</h3>
<ul className='list-disc list-inside text-white'>
{lesson.additionalLinks.map((link, index) => (
<li key={index}>
<a href={link} target="_blank" rel="noopener noreferrer" className='text-blue-300 hover:underline'>
{new URL(link).hostname}
</a>
</li>
))}
</ul>
</div>
<div>
<Menu model={menuItems} popup ref={menuRef} />
<GenericButton
icon="pi pi-ellipsis-v"
onClick={(e) => menuRef.current.toggle(e)}
aria-label="More options"
className="p-button-text"
tooltip={isMobileView ? null : "More options"}
tooltipOptions={{ position: 'top' }}
/>
</div>
</div>
</div>
)}
{!lesson?.additionalLinks || lesson.additionalLinks.length === 0 && (
<div className='mt-6 flex justify-end'>
<Menu model={menuItems} popup ref={menuRef} />
<GenericButton
icon="pi pi-ellipsis-v"
onClick={(e) => menuRef.current.toggle(e)}
aria-label="More options"
className="p-button-text"
tooltip={isMobileView ? null : "More options"}
tooltipOptions={{ position: 'top' }}
/>
</div>
)}
</div> </div>
</div> </div>
) )

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

@ -1,4 +1,4 @@
import React, { useEffect, useState } 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";
@ -13,6 +13,8 @@ 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 MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
const MDDisplay = dynamic( const MDDisplay = dynamic(
() => import("@uiw/react-markdown-preview"), () => import("@uiw/react-markdown-preview"),
@ -31,25 +33,8 @@ const DocumentDetails = ({ processedEvent, topics, title, summary, image, price,
const { showToast } = useToast(); const { showToast } = useToast();
const windowWidth = useWindowWidth(); const windowWidth = useWindowWidth();
const isMobileView = windowWidth <= 768; const isMobileView = windowWidth <= 768;
const menuRef = useRef(null);
useEffect(() => { const toastRef = useRef(null);
if (zaps.length > 0) {
const total = getTotalFromZaps(zaps, processedEvent);
setZapAmount(total);
}
}, [zaps, processedEvent]);
useEffect(() => {
if (isLesson) {
axios.get(`/api/resources/${processedEvent.d}`).then(res => {
if (res.data && res.data.lessons[0]?.courseId) {
setCourse(res.data.lessons[0]?.courseId);
}
}).catch(err => {
console.error('err', err);
});
}
}, [processedEvent.d, isLesson]);
const handleDelete = async () => { const handleDelete = async () => {
try { try {
@ -70,6 +55,63 @@ const DocumentDetails = ({ processedEvent, topics, title, summary, image, price,
} }
} }
const authorMenuItems = [
{
label: 'Edit',
icon: 'pi pi-pencil',
command: () => router.push(`/details/${processedEvent.id}/edit`)
},
{
label: 'Delete',
icon: 'pi pi-trash',
command: handleDelete
},
{
label: 'View Nostr note',
icon: 'pi pi-globe',
command: () => {
window.open(`https://habla.news/a/${nAddress}`, '_blank');
}
}
];
const userMenuItems = [
{
label: 'View Nostr note',
icon: 'pi pi-globe',
command: () => {
window.open(`https://habla.news/a/${nAddress}`, '_blank');
}
}
];
if (course) {
userMenuItems.unshift({
label: isMobileView ? 'Course' : 'Open Course',
icon: 'pi pi-external-link',
command: () => window.open(`/course/${course}`, '_blank')
});
}
useEffect(() => {
if (zaps.length > 0) {
const total = getTotalFromZaps(zaps, processedEvent);
setZapAmount(total);
}
}, [zaps, processedEvent]);
useEffect(() => {
if (isLesson) {
axios.get(`/api/resources/${processedEvent.d}`).then(res => {
if (res.data && res.data.lessons[0]?.courseId) {
setCourse(res.data.lessons[0]?.courseId);
}
}).catch(err => {
console.error('err', err);
});
}
}, [processedEvent.d, isLesson]);
const renderPaymentMessage = () => { const renderPaymentMessage = () => {
if (session?.user && session.user?.role?.subscribed && decryptedContent) { if (session?.user && session.user?.role?.subscribed && decryptedContent) {
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" /> 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" />
@ -127,6 +169,7 @@ const DocumentDetails = ({ processedEvent, topics, title, summary, image, price,
return ( return (
<div className="w-full"> <div className="w-full">
<Toast ref={toastRef} />
<div className="relative w-full h-[400px] mb-8"> <div className="relative w-full h-[400px] mb-8">
<Image <Image
alt="background image" alt="background image"
@ -140,42 +183,24 @@ const DocumentDetails = ({ processedEvent, topics, title, summary, image, price,
<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">
<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'>{title}</h1> <h1 className='text-4xl font-bold text-white'>{title}</h1>
<div className="flex flex-wrap gap-2"> <ZapDisplay
{topics && topics.length > 0 && ( zapAmount={zapAmount}
topics.map((topic, index) => ( event={processedEvent}
<Tag className='text-[#f8f8ff]' key={index} value={topic}></Tag> zapsLoading={zapsLoading && zapAmount === 0}
)) />
)} </div>
{isLesson && <Tag size="small" className="text-[#f8f8ff]" value="lesson" />} <div className="flex flex-wrap gap-2 mt-2 mb-4">
</div> {topics && topics.length > 0 && (
topics.map((topic, index) => (
<Tag className='text-[#f8f8ff]' key={index} value={topic}></Tag>
))
)}
{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>
))} ))}
{processedEvent?.additionalLinks && processedEvent?.additionalLinks.length > 0 && ( <div className='flex items-center justify-between mt-8'>
<div className="my-4">
<p>Additional Links:</p>
{processedEvent.additionalLinks.map((link, index) => (
<div key={index} className="mb-2">
<a
className="text-blue-500 hover:underline hover:text-blue-600 break-words"
href={link}
target="_blank"
rel="noopener noreferrer"
style={{
wordBreak: 'break-word',
overflowWrap: 'break-word',
display: 'inline-block',
maxWidth: '100%'
}}
>
{link}
</a>
</div>
))}
</div>
)}
<div className='flex items-center justify-between'>
<div className='flex items-center'> <div className='flex items-center'>
<Image <Image
alt="avatar image" alt="avatar image"
@ -191,48 +216,16 @@ const DocumentDetails = ({ processedEvent, topics, title, summary, image, price,
</a> </a>
</p> </p>
</div> </div>
<ZapDisplay <div className="flex justify-end">
zapAmount={zapAmount} <MoreOptionsMenu
event={processedEvent} menuItems={authorView ? authorMenuItems : userMenuItems}
zapsLoading={zapsLoading && zapAmount === 0} additionalLinks={processedEvent?.additionalLinks || []}
/> isMobileView={isMobileView}
/>
</div>
</div> </div>
<div className='w-full mt-8 flex flex-wrap justify-between items-center'> <div className='w-full mt-4'>
{authorView ? ( {renderPaymentMessage()}
<div className='flex space-x-2 mt-4 sm:mt-0'>
{renderPaymentMessage()}
<div className="flex flex-row gap-2">
<GenericButton onClick={() => router.push(`/details/${processedEvent.id}/edit`)} label="Edit" severity='warning' outlined />
<GenericButton onClick={handleDelete} label="Delete" severity='danger' outlined />
<GenericButton
tooltip={isMobileView ? null : "View Nostr Note"}
tooltipOptions={{ position: 'left' }}
icon="pi pi-external-link"
outlined
onClick={() => {
window.open(`https://habla.news/a/${nAddress}`, '_blank');
}}
/>
</div>
</div>
) : (
<div className="w-full flex flex-row justify-between gap-2">
{renderPaymentMessage()}
<div className="flex flex-row justify-end gap-2">
{course && <GenericButton size={isMobileView ? 'small' : null} outlined icon="pi pi-external-link" onClick={() => window.open(`/course/${course}`, '_blank')} label={isMobileView ? "Course" : "Open Course"} tooltip="This is a lesson in a course" tooltipOptions={{ position: 'top' }} />}
<GenericButton
size={isMobileView ? 'small' : null}
tooltip={isMobileView ? null : "View Nostr Note"}
tooltipOptions={{ position: 'left' }}
icon="pi pi-external-link"
outlined
onClick={() => {
window.open(`https://habla.news/a/${nAddress}`, '_blank');
}}
/>
</div>
</div>
)}
</div> </div>
</div> </div>
{renderContent()} {renderContent()}

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

@ -1,4 +1,4 @@
import React, { useEffect, useState } 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";
@ -13,6 +13,8 @@ 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 MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
const MDDisplay = dynamic( const MDDisplay = dynamic(
() => import("@uiw/react-markdown-preview"), () => import("@uiw/react-markdown-preview"),
@ -31,25 +33,8 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
const { showToast } = useToast(); const { showToast } = useToast();
const windowWidth = useWindowWidth(); const windowWidth = useWindowWidth();
const isMobileView = windowWidth <= 768; const isMobileView = windowWidth <= 768;
const menuRef = useRef(null);
useEffect(() => { const toastRef = useRef(null);
if (isLesson) {
axios.get(`/api/resources/${processedEvent.d}`).then(res => {
if (res.data && res.data.lessons[0]?.courseId) {
setCourse(res.data.lessons[0]?.courseId);
}
}).catch(err => {
console.error('err', err);
});
}
}, [processedEvent.d, isLesson]);
useEffect(() => {
if (zaps.length > 0) {
const total = getTotalFromZaps(zaps, processedEvent);
setZapAmount(total);
}
}, [zaps, processedEvent]);
const handleDelete = async () => { const handleDelete = async () => {
try { try {
@ -70,6 +55,63 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
} }
} }
const authorMenuItems = [
{
label: 'Edit',
icon: 'pi pi-pencil',
command: () => router.push(`/details/${processedEvent.id}/edit`)
},
{
label: 'Delete',
icon: 'pi pi-trash',
command: handleDelete
},
{
label: 'View Nostr note',
icon: 'pi pi-globe',
command: () => {
window.open(`https://habla.news/a/${nAddress}`, '_blank');
}
}
];
const userMenuItems = [
{
label: 'View Nostr note',
icon: 'pi pi-globe',
command: () => {
window.open(`https://habla.news/a/${nAddress}`, '_blank');
}
}
];
if (course) {
userMenuItems.unshift({
label: isMobileView ? 'Course' : 'Open Course',
icon: 'pi pi-external-link',
command: () => window.open(`/course/${course}`, '_blank')
});
}
useEffect(() => {
if (isLesson) {
axios.get(`/api/resources/${processedEvent.d}`).then(res => {
if (res.data && res.data.lessons[0]?.courseId) {
setCourse(res.data.lessons[0]?.courseId);
}
}).catch(err => {
console.error('err', err);
});
}
}, [processedEvent.d, isLesson]);
useEffect(() => {
if (zaps.length > 0) {
const total = getTotalFromZaps(zaps, processedEvent);
setZapAmount(total);
}
}, [zaps, processedEvent]);
const renderPaymentMessage = () => { const renderPaymentMessage = () => {
if (session?.user && session.user?.role?.subscribed && decryptedContent) { if (session?.user && session.user?.role?.subscribed && decryptedContent) {
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" /> 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" />
@ -130,37 +172,9 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
return null; return null;
} }
const renderAdditionalLinks = () => {
if (processedEvent?.additionalLinks && processedEvent.additionalLinks.length > 0) {
return (
<div className="my-4">
<p>Additional Links:</p>
{processedEvent.additionalLinks.map((link, index) => (
<div key={index} className="mb-2">
<a
className="text-blue-500 hover:underline hover:text-blue-600 break-words"
href={link}
target="_blank"
rel="noopener noreferrer"
style={{
wordBreak: 'break-word',
overflowWrap: 'break-word',
display: 'inline-block',
maxWidth: '100%'
}}
>
{link}
</a>
</div>
))}
</div>
);
}
return null;
};
return ( return (
<div className="w-full"> <div className="w-full">
<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`}>
@ -183,65 +197,39 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
</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="mt-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>
))} ))}
{renderAdditionalLinks()}
</div> </div>
</div> </div>
<div className='flex items-center'> <div className='flex items-center justify-between w-full'>
<Image <div className='flex items-center'>
alt="avatar image" <Image
src={returnImageProxy(author?.avatar, author?.username)} alt="avatar image"
width={50} src={returnImageProxy(author?.avatar, author?.username)}
height={50} width={50}
className="rounded-full mr-4" height={50}
/> className="rounded-full mr-4"
<p className='text-lg text-white'> />
By{' '} <p className='text-lg text-white'>
<a rel='noreferrer noopener' target='_blank' className='text-blue-300 hover:underline'> By{' '}
{author?.username} <a rel='noreferrer noopener' target='_blank' className='text-blue-300 hover:underline'>
</a> {author?.username}
</p> </a>
</p>
</div>
<div className="flex justify-end">
<MoreOptionsMenu
menuItems={authorView ? authorMenuItems : userMenuItems}
additionalLinks={processedEvent?.additionalLinks || []}
isMobileView={isMobileView}
/>
</div>
</div> </div>
</div> </div>
<div className="w-full flex flex-row justify-end mt-4"> <div className="w-full flex justify-start mt-4">
{authorView ? ( {renderPaymentMessage()}
<div className='flex space-x-2 mt-4 sm:mt-0'>
{renderPaymentMessage()}
<div className="flex flex-row justify-end">
<GenericButton onClick={() => router.push(`/details/${processedEvent.id}/edit`)} label="Edit" severity='warning' outlined />
<GenericButton onClick={handleDelete} label="Delete" severity='danger' outlined />
<GenericButton
tooltip={isMobileView ? null : "View Nostr Note"}
tooltipOptions={{ position: 'left' }}
icon="pi pi-external-link"
outlined
onClick={() => {
window.open(`https://habla.news/a/${nAddress}`, '_blank');
}}
/>
</div>
</div>
) : (
<div className="w-full flex flex-row justify-between">
{renderPaymentMessage()}
<div className="flex flex-row justify-end">
{course && <GenericButton size={isMobileView ? 'small' : null} outlined icon="pi pi-external-link" onClick={() => window.open(`/course/${course}`, '_blank')} label={isMobileView ? "Course" : "Open Course"} tooltip="This is a lesson in a course" tooltipOptions={{ position: 'top' }} />}
<GenericButton
size={isMobileView ? 'small' : null}
tooltip={isMobileView ? null : "View Nostr Note"}
tooltipOptions={{ position: 'left' }}
icon="pi pi-external-link"
outlined
onClick={() => {
window.open(`https://habla.news/a/${nAddress}`, '_blank');
}}
/>
</div>
</div>
)}
</div> </div>
</div> </div>
</div> </div>

69
src/components/ui/MoreOptionsMenu.js Normal file
View File

@ -0,0 +1,69 @@
import React, { useRef } from "react";
import { Menu } from "primereact/menu";
import GenericButton from "@/components/buttons/GenericButton";
/**
* A reusable component for displaying a "more options" menu with optional additional links section
*
* @param {Object} props - Component props
* @param {Array} props.menuItems - Array of primary menu items
* @param {Array} props.additionalLinks - Array of additional links to add to the menu
* @param {boolean} props.isMobileView - Whether the view is mobile
* @param {function} props.onLinkClick - Function to be called when a link is clicked
*/
const MoreOptionsMenu = ({
menuItems,
additionalLinks = [],
isMobileView = false,
onLinkClick = (url) => window.open(url, '_blank')
}) => {
const menuRef = useRef(null);
// Create a copy of the menu items
const updatedMenuItems = [...menuItems];
// Add a separator and additional links if they exist
if (additionalLinks && additionalLinks.length > 0) {
// Add separator
updatedMenuItems.push({ separator: true, className: "my-2" });
// Add header for additional links
updatedMenuItems.push({
label: 'EXTERNAL LINKS',
disabled: true,
className: 'text-sm font-semibold text-gray-400'
});
// Add each additional link
additionalLinks.forEach((link, index) => {
let hostname;
try {
hostname = new URL(link).hostname;
} catch (e) {
hostname = link; // Fallback if URL parsing fails
}
updatedMenuItems.push({
label: `${hostname}`,
icon: 'pi pi-external-link',
command: () => onLinkClick(link)
});
});
}
return (
<div className="more-options-menu">
<Menu model={updatedMenuItems} popup ref={menuRef} />
<GenericButton
icon="pi pi-ellipsis-v"
onClick={(e) => menuRef.current.toggle(e)}
aria-label="More options"
className="p-button-text"
tooltip={isMobileView ? null : "More options"}
tooltipOptions={{ position: 'top' }}
/>
</div>
);
};
export default MoreOptionsMenu;