mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-04-19 10:51:20 +00:00
Merge pull request #53 from AustinKelsay/feature/manual-lesson-completion-option
Feature - MoreOptions on content details components
This commit is contained in:
Austin Kelsay
GitHub
commit
f8878486b6
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import axios from "axios";
|
||||
import { useToast } from "@/hooks/useToast";
|
||||
import { Tag } from "primereact/tag";
|
||||
@ -13,6 +13,8 @@ import { getTotalFromZaps } from "@/utils/lightning";
|
||||
import { useSession } from "next-auth/react";
|
||||
import useWindowWidth from "@/hooks/useWindowWidth";
|
||||
import dynamic from "next/dynamic";
|
||||
import { Toast } from "primereact/toast";
|
||||
import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
|
||||
|
||||
const MDDisplay = dynamic(
|
||||
() => import("@uiw/react-markdown-preview"),
|
||||
@ -29,6 +31,62 @@ const CombinedDetails = ({ processedEvent, topics, title, summary, image, price,
|
||||
const { showToast } = useToast();
|
||||
const windowWidth = useWindowWidth();
|
||||
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(() => {
|
||||
if (isLesson) {
|
||||
@ -49,22 +107,6 @@ const CombinedDetails = ({ processedEvent, topics, title, summary, image, price,
|
||||
}
|
||||
}, [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 = () => {
|
||||
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" />;
|
||||
@ -124,37 +166,9 @@ const CombinedDetails = ({ processedEvent, topics, title, summary, image, price,
|
||||
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 (
|
||||
<div className="w-full">
|
||||
<Toast ref={toastRef} />
|
||||
<div className="relative w-full h-[400px] mb-8">
|
||||
<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="flex flex-row items-center justify-between w-full">
|
||||
<h1 className='text-4xl font-bold text-white'>{title}</h1>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{topics?.map((topic, index) => (
|
||||
<Tag className='text-[#f8f8ff]' key={index} value={topic} />
|
||||
))}
|
||||
{isLesson && <Tag size="small" className="text-[#f8f8ff]" value="lesson" />}
|
||||
</div>
|
||||
<ZapDisplay
|
||||
zapAmount={zapAmount}
|
||||
event={processedEvent}
|
||||
zapsLoading={zapsLoading && zapAmount === 0}
|
||||
/>
|
||||
</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>
|
||||
{summary?.split('\n').map((line, index) => (
|
||||
<p key={index}>{line}</p>
|
||||
))}
|
||||
{renderAdditionalLinks()}
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex items-center justify-between mt-8'>
|
||||
<div className='flex items-center'>
|
||||
<Image
|
||||
alt="avatar image"
|
||||
@ -195,54 +213,16 @@ const CombinedDetails = ({ processedEvent, topics, title, summary, image, price,
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<ZapDisplay
|
||||
zapAmount={zapAmount}
|
||||
event={processedEvent}
|
||||
zapsLoading={zapsLoading && zapAmount === 0}
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<MoreOptionsMenu
|
||||
menuItems={authorView ? authorMenuItems : userMenuItems}
|
||||
additionalLinks={processedEvent?.additionalLinks || []}
|
||||
isMobileView={isMobileView}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='w-full mt-8 flex flex-wrap justify-between items-center'>
|
||||
{authorView ? (
|
||||
<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 className='w-full mt-4'>
|
||||
{renderPaymentMessage()}
|
||||
</div>
|
||||
</div>
|
||||
{renderContent()}
|
||||
|
||||
@ -4,7 +4,6 @@ import Image from "next/image";
|
||||
import ZapDisplay from "@/components/zaps/ZapDisplay";
|
||||
import { useImageProxy } from "@/hooks/useImageProxy";
|
||||
import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery";
|
||||
import GenericButton from "@/components/buttons/GenericButton";
|
||||
import { nip19 } from "nostr-tools";
|
||||
import { Divider } from "primereact/divider";
|
||||
import { getTotalFromZaps } from "@/utils/lightning";
|
||||
@ -12,6 +11,10 @@ import dynamic from "next/dynamic";
|
||||
import useWindowWidth from "@/hooks/useWindowWidth";
|
||||
import appConfig from "@/config/appConfig";
|
||||
import useTrackVideoLesson from '@/hooks/tracking/useTrackVideoLesson';
|
||||
import { Menu } from "primereact/menu";
|
||||
import { Toast } from "primereact/toast";
|
||||
import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
|
||||
import { useSession } from "next-auth/react";
|
||||
|
||||
const MDDisplay = dynamic(
|
||||
() => import("@uiw/react-markdown-preview"),
|
||||
@ -26,13 +29,16 @@ const CombinedLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
|
||||
const [videoDuration, setVideoDuration] = useState(null);
|
||||
const [videoPlayed, setVideoPlayed] = useState(false);
|
||||
const mdDisplayRef = useRef(null);
|
||||
const menuRef = useRef(null);
|
||||
const toastRef = useRef(null);
|
||||
const { zaps, zapsLoading, zapsError } = useZapsQuery({ event: lesson, type: "lesson" });
|
||||
const { returnImageProxy } = useImageProxy();
|
||||
const windowWidth = useWindowWidth();
|
||||
const isMobileView = windowWidth <= 768;
|
||||
const isVideo = lesson?.type === 'video';
|
||||
const { data: session } = useSession();
|
||||
|
||||
const { isCompleted: videoCompleted, isTracking: videoTracking } = useTrackVideoLesson({
|
||||
const { isCompleted: videoCompleted, isTracking: videoTracking, markLessonAsCompleted } = useTrackVideoLesson({
|
||||
lessonId: lesson?.d,
|
||||
videoDuration,
|
||||
courseId: course?.d,
|
||||
@ -41,6 +47,61 @@ const CombinedLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
|
||||
decryptionPerformed
|
||||
});
|
||||
|
||||
const buildMenuItems = () => {
|
||||
const items = [];
|
||||
|
||||
const hasAccess = session?.user && (
|
||||
!isPaid ||
|
||||
decryptionPerformed ||
|
||||
session.user.role?.subscribed
|
||||
);
|
||||
|
||||
if (hasAccess) {
|
||||
items.push({
|
||||
label: 'Mark as completed',
|
||||
icon: 'pi pi-check-circle',
|
||||
command: async () => {
|
||||
try {
|
||||
await markLessonAsCompleted();
|
||||
setCompleted(lesson.id);
|
||||
toastRef.current.show({
|
||||
severity: 'success',
|
||||
summary: 'Success',
|
||||
detail: 'Lesson marked as completed',
|
||||
life: 3000
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to mark lesson as completed:', error);
|
||||
toastRef.current.show({
|
||||
severity: 'error',
|
||||
summary: 'Error',
|
||||
detail: 'Failed to mark lesson as completed',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
items.push({
|
||||
label: 'Open lesson',
|
||||
icon: 'pi pi-arrow-up-right',
|
||||
command: () => {
|
||||
window.open(`/details/${lesson.id}`, '_blank');
|
||||
}
|
||||
});
|
||||
|
||||
items.push({
|
||||
label: 'View Nostr note',
|
||||
icon: 'pi pi-globe',
|
||||
command: () => {
|
||||
window.open(`https://habla.news/a/${nAddress}`, '_blank');
|
||||
}
|
||||
});
|
||||
|
||||
return items;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleYouTubeMessage = (event) => {
|
||||
if (event.origin !== "https://www.youtube.com") return;
|
||||
@ -168,6 +229,7 @@ const CombinedLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<Toast ref={toastRef} />
|
||||
{isVideo ? renderContent() : (
|
||||
<>
|
||||
<div className="relative w-[80%] h-[200px] mx-auto mb-24">
|
||||
@ -185,13 +247,18 @@ const CombinedLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
|
||||
<div className={`${!isVideo && 'mb-8 bg-gray-800/70 rounded-lg p-4'}`}>
|
||||
<div className="flex flex-row items-center justify-between w-full">
|
||||
<h1 className='text-3xl font-bold text-white'>{lesson.title}</h1>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{lesson.topics && lesson.topics.length > 0 && (
|
||||
lesson.topics.map((topic, index) => (
|
||||
<Tag className='text-white' key={index} value={topic}></Tag>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<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.map((topic, index) => (
|
||||
<Tag className='text-white' key={index} value={topic}></Tag>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<div className='text-xl text-gray-200 mb-4 mt-4'>{lesson.summary && (
|
||||
<div className="text-xl mt-4">
|
||||
@ -201,7 +268,7 @@ const CombinedLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex items-center justify-between mt-8'>
|
||||
<div className='flex items-center'>
|
||||
<Image
|
||||
alt="avatar image"
|
||||
@ -217,41 +284,18 @@ const CombinedLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<ZapDisplay
|
||||
zapAmount={zapAmount}
|
||||
event={lesson}
|
||||
zapsLoading={zapsLoading}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full flex flex-row justify-end">
|
||||
<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 className="flex justify-end">
|
||||
<MoreOptionsMenu
|
||||
menuItems={buildMenuItems()}
|
||||
additionalLinks={lesson?.additionalLinks || []}
|
||||
isMobileView={isMobileView}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{!isVideo && <Divider />}
|
||||
{lesson?.additionalLinks && lesson.additionalLinks.length > 0 && (
|
||||
<div className='mt-6 bg-gray-800/90 rounded-lg p-4'>
|
||||
<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>
|
||||
)}
|
||||
{!isVideo && renderContent()}
|
||||
</div>
|
||||
{!isVideo && renderContent()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import React, { useEffect, useState, useCallback, useRef } from 'react';
|
||||
import axios from 'axios';
|
||||
import { useToast } from "@/hooks/useToast";
|
||||
import { Tag } from 'primereact/tag';
|
||||
@ -19,6 +19,8 @@ import appConfig from "@/config/appConfig";
|
||||
import useTrackCourse from '@/hooks/tracking/useTrackCourse';
|
||||
import WelcomeModal from '@/components/onboarding/WelcomeModal';
|
||||
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 }) {
|
||||
const [zapAmount, setZapAmount] = useState(0);
|
||||
@ -32,6 +34,40 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
|
||||
const windowWidth = useWindowWidth();
|
||||
const isMobileView = windowWidth <= 768;
|
||||
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({
|
||||
courseId: processedEvent?.d,
|
||||
@ -74,18 +110,6 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
|
||||
}
|
||||
}, [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 = () => {
|
||||
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" />
|
||||
@ -101,45 +125,18 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
|
||||
|
||||
if (paidCourse && !decryptionPerformed) {
|
||||
return (
|
||||
<CoursePaymentButton
|
||||
lnAddress={author?.lud16}
|
||||
amount={processedEvent.price}
|
||||
onSuccess={handlePaymentSuccess}
|
||||
onError={handlePaymentError}
|
||||
courseId={processedEvent.d}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
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 className='w-fit'>
|
||||
<CoursePaymentButton
|
||||
lnAddress={author?.lud16}
|
||||
amount={processedEvent.price}
|
||||
onSuccess={handlePaymentSuccess}
|
||||
onError={handlePaymentError}
|
||||
courseId={processedEvent.d}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
@ -149,7 +146,8 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<WelcomeModal />
|
||||
<Toast ref={toastRef} />
|
||||
<WelcomeModal />
|
||||
<div className="relative w-full h-[400px] mb-8">
|
||||
<Image
|
||||
alt="course image"
|
||||
@ -165,13 +163,18 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
|
||||
{isCompleted && <Tag severity="success" value="Completed" />}
|
||||
<div className="flex flex-row items-center justify-between w-full">
|
||||
<h1 className='text-4xl font-bold text-white'>{processedEvent.name}</h1>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{processedEvent.topics && processedEvent.topics.length > 0 && (
|
||||
processedEvent.topics.map((topic, index) => (
|
||||
<Tag className='text-white' key={index} value={topic}></Tag>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<ZapDisplay
|
||||
zapAmount={zapAmount}
|
||||
event={processedEvent}
|
||||
zapsLoading={zapsLoading && zapAmount === 0}
|
||||
/>
|
||||
</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 className='text-xl text-gray-200 mb-4 mt-4 max-mob:text-base'>{processedEvent.description && (
|
||||
processedEvent.description.split('\n').map((line, index) => (
|
||||
@ -179,7 +182,7 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex items-center justify-between mt-8'>
|
||||
<div className='flex items-center'>
|
||||
<Image
|
||||
alt="avatar image"
|
||||
@ -195,26 +198,16 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<ZapDisplay
|
||||
zapAmount={zapAmount}
|
||||
event={processedEvent}
|
||||
zapsLoading={zapsLoading && zapAmount === 0}
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<MoreOptionsMenu
|
||||
menuItems={menuItems}
|
||||
additionalLinks={processedEvent?.additionalLinks || []}
|
||||
isMobileView={isMobileView}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='w-full mt-8 flex flex-wrap justify-between items-center'>
|
||||
<div className='w-full mt-4'>
|
||||
{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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import { Tag } from "primereact/tag";
|
||||
import Image from "next/image";
|
||||
import { useImageProxy } from "@/hooks/useImageProxy";
|
||||
@ -6,6 +6,13 @@ import { getTotalFromZaps } from "@/utils/lightning";
|
||||
import ZapDisplay from "@/components/zaps/ZapDisplay";
|
||||
import dynamic from "next/dynamic";
|
||||
import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery";
|
||||
import { Toast } from "primereact/toast";
|
||||
import useTrackDocumentLesson from "@/hooks/tracking/useTrackDocumentLesson";
|
||||
import useWindowWidth from "@/hooks/useWindowWidth";
|
||||
import { nip19 } from "nostr-tools";
|
||||
import appConfig from "@/config/appConfig";
|
||||
import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
|
||||
import { useSession } from "next-auth/react";
|
||||
|
||||
const MDDisplay = dynamic(
|
||||
() => import("@uiw/react-markdown-preview"),
|
||||
@ -14,10 +21,88 @@ const MDDisplay = dynamic(
|
||||
}
|
||||
);
|
||||
|
||||
const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid }) => {
|
||||
const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted }) => {
|
||||
const [zapAmount, setZapAmount] = useState(0);
|
||||
const { zaps, zapsLoading, zapsError } = useZapsQuery({ event: lesson, type: "lesson" });
|
||||
const { returnImageProxy } = useImageProxy();
|
||||
const menuRef = useRef(null);
|
||||
const toastRef = useRef(null);
|
||||
const windowWidth = useWindowWidth();
|
||||
const isMobileView = windowWidth <= 768;
|
||||
const { data: session } = useSession();
|
||||
|
||||
const readTime = lesson?.content ? Math.max(30, Math.ceil(lesson.content.length / 20)) : 60;
|
||||
|
||||
const { isCompleted, isTracking, markLessonAsCompleted } = useTrackDocumentLesson({
|
||||
lessonId: lesson?.d,
|
||||
courseId: course?.d,
|
||||
readTime,
|
||||
paidCourse: isPaid,
|
||||
decryptionPerformed
|
||||
});
|
||||
|
||||
const buildMenuItems = () => {
|
||||
const items = [];
|
||||
|
||||
const hasAccess = session?.user && (
|
||||
!isPaid ||
|
||||
decryptionPerformed ||
|
||||
session.user.role?.subscribed
|
||||
);
|
||||
|
||||
if (hasAccess) {
|
||||
items.push({
|
||||
label: 'Mark as completed',
|
||||
icon: 'pi pi-check-circle',
|
||||
command: async () => {
|
||||
try {
|
||||
await markLessonAsCompleted();
|
||||
setCompleted && setCompleted(lesson.id);
|
||||
toastRef.current.show({
|
||||
severity: 'success',
|
||||
summary: 'Success',
|
||||
detail: 'Lesson marked as completed',
|
||||
life: 3000
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to mark lesson as completed:', error);
|
||||
toastRef.current.show({
|
||||
severity: 'error',
|
||||
summary: 'Error',
|
||||
detail: 'Failed to mark lesson as completed',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
items.push({
|
||||
label: 'Open lesson',
|
||||
icon: 'pi pi-arrow-up-right',
|
||||
command: () => {
|
||||
window.open(`/details/${lesson.id}`, '_blank');
|
||||
}
|
||||
});
|
||||
|
||||
items.push({
|
||||
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');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return items;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!zaps || zapsLoading || zapsError) return;
|
||||
@ -26,6 +111,12 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid }) => {
|
||||
|
||||
setZapAmount(total);
|
||||
}, [zaps, zapsLoading, zapsError, lesson]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isCompleted && !isTracking && setCompleted) {
|
||||
setCompleted(lesson.id);
|
||||
}
|
||||
}, [isCompleted, isTracking, lesson.id, setCompleted]);
|
||||
|
||||
const renderContent = () => {
|
||||
if (isPaid && decryptionPerformed) {
|
||||
@ -42,53 +133,56 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid }) => {
|
||||
|
||||
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'>
|
||||
<Toast ref={toastRef} />
|
||||
<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='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.topics.map((topic, index) => (
|
||||
<Tag className='mr-2 text-white' key={index} value={topic}></Tag>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<h1 className='text-4xl mt-6'>{lesson?.title}</h1>
|
||||
<p className='text-xl mt-6'>{lesson?.summary && (
|
||||
<div className="text-xl mt-4">
|
||||
{lesson.summary.split('\n').map((line, index) => (
|
||||
<p key={index}>{line}</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</p>
|
||||
{lesson?.additionalLinks && lesson.additionalLinks.length > 0 && (
|
||||
<div className='mt-6'>
|
||||
<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 className='text-xl mt-6'>{lesson?.summary && (
|
||||
<div className="text-xl mt-4">
|
||||
{lesson.summary.split('\n').map((line, index) => (
|
||||
<p key={index}>{line}</p>
|
||||
))}
|
||||
</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 className='flex items-center justify-between w-full mt-8'>
|
||||
<div className='flex flex-row w-fit 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 className="flex justify-end">
|
||||
<MoreOptionsMenu
|
||||
menuItems={buildMenuItems()}
|
||||
additionalLinks={lesson?.additionalLinks || []}
|
||||
isMobileView={isMobileView}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col max-tab:mt-12 max-mob:mt-12'>
|
||||
@ -101,9 +195,6 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid }) => {
|
||||
height={194}
|
||||
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>
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import { Tag } from "primereact/tag";
|
||||
import Image from "next/image";
|
||||
import ZapDisplay from "@/components/zaps/ZapDisplay";
|
||||
import { useImageProxy } from "@/hooks/useImageProxy";
|
||||
import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery";
|
||||
import GenericButton from "@/components/buttons/GenericButton";
|
||||
import { nip19 } from "nostr-tools";
|
||||
import { Divider } from "primereact/divider";
|
||||
import { getTotalFromZaps } from "@/utils/lightning";
|
||||
@ -12,6 +11,9 @@ import dynamic from "next/dynamic";
|
||||
import useWindowWidth from "@/hooks/useWindowWidth";
|
||||
import appConfig from "@/config/appConfig";
|
||||
import useTrackDocumentLesson from "@/hooks/tracking/useTrackDocumentLesson";
|
||||
import { Toast } from "primereact/toast";
|
||||
import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
|
||||
import { useSession } from "next-auth/react";
|
||||
|
||||
const MDDisplay = dynamic(
|
||||
() => import("@uiw/react-markdown-preview"),
|
||||
@ -27,16 +29,74 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
|
||||
const { returnImageProxy } = useImageProxy();
|
||||
const windowWidth = useWindowWidth();
|
||||
const isMobileView = windowWidth <= 768;
|
||||
const menuRef = useRef(null);
|
||||
const toastRef = useRef(null);
|
||||
// todo implement real read time needs to be on form
|
||||
const readTime = 120;
|
||||
const { data: session } = useSession();
|
||||
|
||||
const { isCompleted, isTracking } = useTrackDocumentLesson({
|
||||
const { isCompleted, isTracking, markLessonAsCompleted } = useTrackDocumentLesson({
|
||||
lessonId: lesson?.d,
|
||||
courseId: course?.d,
|
||||
readTime: readTime,
|
||||
paidCourse: isPaid,
|
||||
decryptionPerformed: decryptionPerformed,
|
||||
});
|
||||
|
||||
const buildMenuItems = () => {
|
||||
const items = [];
|
||||
|
||||
const hasAccess = session?.user && (
|
||||
!isPaid ||
|
||||
decryptionPerformed ||
|
||||
session.user.role?.subscribed
|
||||
);
|
||||
|
||||
if (hasAccess) {
|
||||
items.push({
|
||||
label: 'Mark as completed',
|
||||
icon: 'pi pi-check-circle',
|
||||
command: async () => {
|
||||
try {
|
||||
await markLessonAsCompleted();
|
||||
setCompleted && setCompleted(lesson.id);
|
||||
toastRef.current.show({
|
||||
severity: 'success',
|
||||
summary: 'Success',
|
||||
detail: 'Lesson marked as completed',
|
||||
life: 3000
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to mark lesson as completed:', error);
|
||||
toastRef.current.show({
|
||||
severity: 'error',
|
||||
summary: 'Error',
|
||||
detail: 'Failed to mark lesson as completed',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
items.push({
|
||||
label: 'Open lesson',
|
||||
icon: 'pi pi-arrow-up-right',
|
||||
command: () => {
|
||||
window.open(`/details/${lesson.id}`, '_blank');
|
||||
}
|
||||
});
|
||||
|
||||
items.push({
|
||||
label: 'View Nostr note',
|
||||
icon: 'pi pi-globe',
|
||||
command: () => {
|
||||
window.open(`https://habla.news/a/${nAddress}`, '_blank');
|
||||
}
|
||||
});
|
||||
|
||||
return items;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!zaps || zapsLoading || zapsError) return;
|
||||
@ -86,6 +146,7 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<Toast ref={toastRef} />
|
||||
<div className="relative w-[80%] h-[200px] mx-auto mb-24">
|
||||
<Image
|
||||
alt="lesson background image"
|
||||
@ -99,13 +160,18 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
|
||||
<div className="mb-8 bg-gray-800/70 rounded-lg p-4">
|
||||
<div className="flex flex-row items-center justify-between w-full">
|
||||
<h1 className='text-3xl font-bold text-white'>{lesson.title}</h1>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{lesson.topics && lesson.topics.length > 0 && (
|
||||
lesson.topics.map((topic, index) => (
|
||||
<Tag className='text-white' key={index} value={topic}></Tag>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<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.map((topic, index) => (
|
||||
<Tag className='text-white' key={index} value={topic}></Tag>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<div className='text-xl text-gray-200 mb-4 mt-4'>{lesson.summary && (
|
||||
<div className="text-xl mt-4">
|
||||
@ -115,7 +181,7 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex items-center justify-between mt-8'>
|
||||
<div className='flex items-center'>
|
||||
<Image
|
||||
alt="avatar image"
|
||||
@ -131,41 +197,18 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<ZapDisplay
|
||||
zapAmount={zapAmount}
|
||||
event={lesson}
|
||||
zapsLoading={zapsLoading}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full flex flex-row justify-end">
|
||||
<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 className="flex justify-end">
|
||||
<MoreOptionsMenu
|
||||
menuItems={buildMenuItems()}
|
||||
additionalLinks={lesson?.additionalLinks || []}
|
||||
isMobileView={isMobileView}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
{lesson?.additionalLinks && lesson.additionalLinks.length > 0 && (
|
||||
<div className='mt-6 bg-gray-800/90 rounded-lg p-4'>
|
||||
<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>
|
||||
)}
|
||||
{renderContent()}
|
||||
</div>
|
||||
{renderContent()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -3,7 +3,6 @@ import { Tag } from "primereact/tag";
|
||||
import Image from "next/image";
|
||||
import ZapDisplay from "@/components/zaps/ZapDisplay";
|
||||
import { useImageProxy } from "@/hooks/useImageProxy";
|
||||
import GenericButton from "@/components/buttons/GenericButton";
|
||||
import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery";
|
||||
import { nip19 } from "nostr-tools";
|
||||
import { getTotalFromZaps } from "@/utils/lightning";
|
||||
@ -12,6 +11,9 @@ import { Divider } from "primereact/divider";
|
||||
import appConfig from "@/config/appConfig";
|
||||
import useWindowWidth from "@/hooks/useWindowWidth";
|
||||
import useTrackVideoLesson from '@/hooks/tracking/useTrackVideoLesson';
|
||||
import { Toast } from "primereact/toast";
|
||||
import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
|
||||
import { useSession } from "next-auth/react";
|
||||
|
||||
const MDDisplay = dynamic(
|
||||
() => import("@uiw/react-markdown-preview"),
|
||||
@ -30,8 +32,11 @@ const VideoLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted
|
||||
const [videoDuration, setVideoDuration] = useState(null);
|
||||
const [videoPlayed, setVideoPlayed] = useState(false);
|
||||
const mdDisplayRef = useRef(null);
|
||||
const menuRef = useRef(null);
|
||||
const toastRef = useRef(null);
|
||||
const { data: session } = useSession();
|
||||
|
||||
const { isCompleted, isTracking } = useTrackVideoLesson({
|
||||
const { isCompleted, isTracking, markLessonAsCompleted } = useTrackVideoLesson({
|
||||
lessonId: lesson?.d,
|
||||
videoDuration,
|
||||
courseId: course?.d,
|
||||
@ -39,6 +44,61 @@ const VideoLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted
|
||||
paidCourse: isPaid,
|
||||
decryptionPerformed
|
||||
});
|
||||
|
||||
const buildMenuItems = () => {
|
||||
const items = [];
|
||||
|
||||
const hasAccess = session?.user && (
|
||||
!isPaid ||
|
||||
decryptionPerformed ||
|
||||
session.user.role?.subscribed
|
||||
);
|
||||
|
||||
if (hasAccess) {
|
||||
items.push({
|
||||
label: 'Mark as completed',
|
||||
icon: 'pi pi-check-circle',
|
||||
command: async () => {
|
||||
try {
|
||||
await markLessonAsCompleted();
|
||||
setCompleted(lesson.id);
|
||||
toastRef.current.show({
|
||||
severity: 'success',
|
||||
summary: 'Success',
|
||||
detail: 'Lesson marked as completed',
|
||||
life: 3000
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to mark lesson as completed:', error);
|
||||
toastRef.current.show({
|
||||
severity: 'error',
|
||||
summary: 'Error',
|
||||
detail: 'Failed to mark lesson as completed',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
items.push({
|
||||
label: 'Open lesson',
|
||||
icon: 'pi pi-arrow-up-right',
|
||||
command: () => {
|
||||
window.open(`/details/${lesson.id}`, '_blank');
|
||||
}
|
||||
});
|
||||
|
||||
items.push({
|
||||
label: 'View Nostr note',
|
||||
icon: 'pi pi-globe',
|
||||
command: () => {
|
||||
window.open(`https://habla.news/a/${nAddress}`, '_blank');
|
||||
}
|
||||
});
|
||||
|
||||
return items;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleYouTubeMessage = (event) => {
|
||||
@ -148,20 +208,27 @@ const VideoLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<Toast ref={toastRef} />
|
||||
{renderContent()}
|
||||
<Divider />
|
||||
<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="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>
|
||||
<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.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 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">
|
||||
{lesson.summary.split('\n').map((line, index) => (
|
||||
<p key={index}>{line}</p>
|
||||
@ -169,55 +236,31 @@ const VideoLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<ZapDisplay
|
||||
zapAmount={zapAmount}
|
||||
event={lesson}
|
||||
zapsLoading={zapsLoading}
|
||||
</div>
|
||||
<div className='flex items-center justify-between mt-8'>
|
||||
<div className='flex 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>
|
||||
<div className="flex justify-end">
|
||||
<MoreOptionsMenu
|
||||
menuItems={buildMenuItems()}
|
||||
additionalLinks={lesson?.additionalLinks || []}
|
||||
isMobileView={isMobileView}
|
||||
/>
|
||||
</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'>
|
||||
<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>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import axios from "axios";
|
||||
import { useToast } from "@/hooks/useToast";
|
||||
import { Tag } from "primereact/tag";
|
||||
@ -13,6 +13,8 @@ import { getTotalFromZaps } from "@/utils/lightning";
|
||||
import { useSession } from "next-auth/react";
|
||||
import useWindowWidth from "@/hooks/useWindowWidth";
|
||||
import dynamic from "next/dynamic";
|
||||
import { Toast } from "primereact/toast";
|
||||
import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
|
||||
|
||||
const MDDisplay = dynamic(
|
||||
() => import("@uiw/react-markdown-preview"),
|
||||
@ -31,25 +33,8 @@ const DocumentDetails = ({ processedEvent, topics, title, summary, image, price,
|
||||
const { showToast } = useToast();
|
||||
const windowWidth = useWindowWidth();
|
||||
const isMobileView = windowWidth <= 768;
|
||||
|
||||
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 menuRef = useRef(null);
|
||||
const toastRef = useRef(null);
|
||||
|
||||
const handleDelete = async () => {
|
||||
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 = () => {
|
||||
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" />
|
||||
@ -99,7 +141,7 @@ const DocumentDetails = ({ processedEvent, topics, title, summary, image, price,
|
||||
return (
|
||||
<div className="w-full px-4">
|
||||
|
||||
<div className="w-full p-8 rounded-lg flex flex-col items-center justify-center bg-gray-800">
|
||||
<div className="w-full p-8 rounded-lg flex flex-col items-center justify-center">
|
||||
<div className="mx-auto py-auto">
|
||||
<i className="pi pi-lock text-[60px] text-red-500"></i>
|
||||
</div>
|
||||
@ -127,6 +169,7 @@ const DocumentDetails = ({ processedEvent, topics, title, summary, image, price,
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<Toast ref={toastRef} />
|
||||
<div className="relative w-full h-[400px] mb-8">
|
||||
<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="flex flex-row items-center justify-between w-full">
|
||||
<h1 className='text-4xl font-bold text-white'>{title}</h1>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{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>
|
||||
<ZapDisplay
|
||||
zapAmount={zapAmount}
|
||||
event={processedEvent}
|
||||
zapsLoading={zapsLoading && zapAmount === 0}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 mt-2 mb-4">
|
||||
{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>
|
||||
{(summary)?.split('\n').map((line, index) => (
|
||||
<p key={index}>{line}</p>
|
||||
))}
|
||||
{processedEvent?.additionalLinks && processedEvent?.additionalLinks.length > 0 && (
|
||||
<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 justify-between mt-8'>
|
||||
<div className='flex items-center'>
|
||||
<Image
|
||||
alt="avatar image"
|
||||
@ -191,48 +216,16 @@ const DocumentDetails = ({ processedEvent, topics, title, summary, image, price,
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<ZapDisplay
|
||||
zapAmount={zapAmount}
|
||||
event={processedEvent}
|
||||
zapsLoading={zapsLoading && zapAmount === 0}
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<MoreOptionsMenu
|
||||
menuItems={authorView ? authorMenuItems : userMenuItems}
|
||||
additionalLinks={processedEvent?.additionalLinks || []}
|
||||
isMobileView={isMobileView}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='w-full mt-8 flex flex-wrap justify-between items-center'>
|
||||
{authorView ? (
|
||||
<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 className='w-full mt-4'>
|
||||
{renderPaymentMessage()}
|
||||
</div>
|
||||
</div>
|
||||
{renderContent()}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import axios from "axios";
|
||||
import { useToast } from "@/hooks/useToast";
|
||||
import { Tag } from "primereact/tag";
|
||||
@ -13,6 +13,8 @@ import { getTotalFromZaps } from "@/utils/lightning";
|
||||
import { useSession } from "next-auth/react";
|
||||
import useWindowWidth from "@/hooks/useWindowWidth";
|
||||
import dynamic from "next/dynamic";
|
||||
import { Toast } from "primereact/toast";
|
||||
import MoreOptionsMenu from "@/components/ui/MoreOptionsMenu";
|
||||
|
||||
const MDDisplay = dynamic(
|
||||
() => import("@uiw/react-markdown-preview"),
|
||||
@ -31,25 +33,8 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
|
||||
const { showToast } = useToast();
|
||||
const windowWidth = useWindowWidth();
|
||||
const isMobileView = windowWidth <= 768;
|
||||
|
||||
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 menuRef = useRef(null);
|
||||
const toastRef = useRef(null);
|
||||
|
||||
const handleDelete = async () => {
|
||||
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 = () => {
|
||||
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" />
|
||||
@ -130,37 +172,9 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
|
||||
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 (
|
||||
<div className="w-full">
|
||||
<Toast ref={toastRef} />
|
||||
{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={`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 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) => (
|
||||
<p key={index}>{line}</p>
|
||||
))}
|
||||
{renderAdditionalLinks()}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<Image
|
||||
alt="avatar image"
|
||||
src={returnImageProxy(author?.avatar, author?.username)}
|
||||
width={50}
|
||||
height={50}
|
||||
className="rounded-full mr-4"
|
||||
/>
|
||||
<p className='text-lg text-white'>
|
||||
By{' '}
|
||||
<a rel='noreferrer noopener' target='_blank' className='text-blue-300 hover:underline'>
|
||||
{author?.username}
|
||||
</a>
|
||||
</p>
|
||||
<div className='flex items-center justify-between w-full'>
|
||||
<div className='flex items-center'>
|
||||
<Image
|
||||
alt="avatar image"
|
||||
src={returnImageProxy(author?.avatar, author?.username)}
|
||||
width={50}
|
||||
height={50}
|
||||
className="rounded-full mr-4"
|
||||
/>
|
||||
<p className='text-lg text-white'>
|
||||
By{' '}
|
||||
<a rel='noreferrer noopener' target='_blank' className='text-blue-300 hover:underline'>
|
||||
{author?.username}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<MoreOptionsMenu
|
||||
menuItems={authorView ? authorMenuItems : userMenuItems}
|
||||
additionalLinks={processedEvent?.additionalLinks || []}
|
||||
isMobileView={isMobileView}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex flex-row justify-end mt-4">
|
||||
{authorView ? (
|
||||
<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 className="w-full flex justify-start mt-4">
|
||||
{renderPaymentMessage()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
69
src/components/ui/MoreOptionsMenu.js
Normal file
69
src/components/ui/MoreOptionsMenu.js
Normal 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;
|
||||
@ -105,7 +105,7 @@ const useTrackDocumentLesson = ({ lessonId, courseId, readTime, paidCourse, decr
|
||||
}
|
||||
}, [timeSpent, markLessonAsCompleted, readTime, isAdmin]);
|
||||
|
||||
return { isCompleted, isTracking };
|
||||
return { isCompleted, isTracking, markLessonAsCompleted };
|
||||
};
|
||||
|
||||
export default useTrackDocumentLesson;
|
||||
@ -134,7 +134,7 @@ const useTrackVideoLesson = ({lessonId, videoDuration, courseId, videoPlayed, pa
|
||||
}
|
||||
}, [timeSpent, videoDuration, markLessonAsCompleted, isAdmin]);
|
||||
|
||||
return { isCompleted, isTracking };
|
||||
return { isCompleted, isTracking, markLessonAsCompleted };
|
||||
};
|
||||
|
||||
export default useTrackVideoLesson;
|
||||
Loading…
x
Reference in New Issue
Block a user