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

more options button in place and works, fully tested, probably still need to align with timestamp

Browse Source
This commit is contained in:
austinkelsay 2025-03-30 11:46:56 -05:00
parent 227166af57
commit 3efc82bd06
No known key found for this signature in database
GPG Key ID: 5A763922E5BA08EE
6 changed files with 160 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,6 +12,8 @@ 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";
const MDDisplay = dynamic(
() => import("@uiw/react-markdown-preview"),
@ -26,13 +28,15 @@ 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 { isCompleted: videoCompleted, isTracking: videoTracking } = useTrackVideoLesson({
const { isCompleted: videoCompleted, isTracking: videoTracking, markLessonAsCompleted } = useTrackVideoLesson({
lessonId: lesson?.d,
videoDuration,
courseId: course?.d,
@ -41,6 +45,33 @@ const CombinedLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
decryptionPerformed
});
const menuItems = [
{
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
});
}
}
}
];
useEffect(() => {
const handleYouTubeMessage = (event) => {
if (event.origin !== "https://www.youtube.com") return;
@ -168,6 +199,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">
@ -252,6 +284,18 @@ const CombinedLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
)}
</div>
{!isVideo && renderContent()}
<div className="flex justify-end mt-8 mr-4">
<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>
);
};

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

@ -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,11 @@ import { getTotalFromZaps } from "@/utils/lightning";
import ZapDisplay from "@/components/zaps/ZapDisplay";
import dynamic from "next/dynamic";
import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery";
import { Menu } from "primereact/menu";
import { Toast } from "primereact/toast";
import GenericButton from "@/components/buttons/GenericButton";
import useTrackDocumentLesson from "@/hooks/tracking/useTrackDocumentLesson";
import useWindowWidth from "@/hooks/useWindowWidth";
const MDDisplay = dynamic(
() => import("@uiw/react-markdown-preview"),
@ -14,10 +19,51 @@ 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 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 menuItems = [
{
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
});
}
}
}
];
useEffect(() => {
if (!zaps || zapsLoading || zapsError) return;
@ -26,6 +72,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,6 +94,7 @@ 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]'>
@ -112,6 +165,18 @@ const CourseLesson = ({ lesson, course, decryptionPerformed, isPaid }) => {
<div className='w-[75vw] mx-auto mt-12 p-12 border-t-2 border-gray-300 max-tab:p-0 max-mob:p-0 max-tab:max-w-[100vw] max-mob:max-w-[100vw]'>
{renderContent()}
</div>
<div className="w-[75vw] mx-auto flex justify-end mt-4 mb-12 max-tab:w-[95vw] max-mob:w-[95vw]">
<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>
)
}

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

@ -12,6 +12,8 @@ import { Divider } from "primereact/divider";
import appConfig from "@/config/appConfig";
import useWindowWidth from "@/hooks/useWindowWidth";
import useTrackVideoLesson from '@/hooks/tracking/useTrackVideoLesson';
import { Menu } from "primereact/menu";
import { Toast } from "primereact/toast";
const MDDisplay = dynamic(
() => import("@uiw/react-markdown-preview"),
@ -30,8 +32,10 @@ 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 { isCompleted, isTracking } = useTrackVideoLesson({
const { isCompleted, isTracking, markLessonAsCompleted } = useTrackVideoLesson({
lessonId: lesson?.d,
videoDuration,
courseId: course?.d,
@ -39,6 +43,33 @@ const VideoLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted
paidCourse: isPaid,
decryptionPerformed
});
const menuItems = [
{
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
});
}
}
}
];
useEffect(() => {
const handleYouTubeMessage = (event) => {
@ -148,6 +179,7 @@ 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">
@ -219,6 +251,18 @@ const VideoLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted
</div>
)}
</div>
<div className="flex justify-end mt-4 mr-4">
<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>
)
}

2
src/config/appConfig.js
View File

@ -9,7 +9,7 @@ const appConfig = {
"wss://purplerelay.com/",
"wss://relay.devs.tools/"
],
authorPubkeys: ["f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741", "c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345"],
authorPubkeys: ["f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741", "c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345", "6260f29fa75c91aaa292f082e5e87b438d2ab4fdf96af398567b01802ee2fcd4"],
customLightningAddresses: [
{
// todo remove need for lowercase

2
src/hooks/tracking/useTrackDocumentLesson.js
View File

@ -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;

2
src/hooks/tracking/useTrackVideoLesson.js
View File

@ -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;