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

src/components/content/courses/CombinedLesson.js

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

src/components/content/courses/CourseLesson.js

@@ -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;
@@ -27,6 +73,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) {
             return <MDDisplay className='p-4 rounded-lg w-full' source={lesson.content} />;
@@ -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>
     )
 }

src/components/content/courses/VideoLesson.js

@@ -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,
@@ -40,6 +44,33 @@ const VideoLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted
         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;
@@ -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>
     )
 }

src/config/appConfig.js

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

src/hooks/tracking/useTrackDocumentLesson.js

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

src/hooks/tracking/useTrackVideoLesson.js

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