mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: improve performance on activity page
This commit is contained in:
swve
parent
ab0de5e771
commit
30b7dc4410
5 changed files with 640 additions and 606 deletions
|
|
@ -1,27 +1,19 @@
|
||||||
'use client'
|
'use client'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { getAPIUrl, getUriWithOrg } from '@services/config/config'
|
import { getAPIUrl, getUriWithOrg } from '@services/config/config'
|
||||||
import Canva from '@components/Objects/Activities/DynamicCanva/DynamicCanva'
|
|
||||||
import VideoActivity from '@components/Objects/Activities/Video/Video'
|
|
||||||
import { BookOpenCheck, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, FileText, Folder, List, Menu, MoreVertical, UserRoundPen, Video, Layers, ListFilter, ListTree, X, Edit2, EllipsisVertical, Maximize2, Minimize2 } from 'lucide-react'
|
import { BookOpenCheck, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, FileText, Folder, List, Menu, MoreVertical, UserRoundPen, Video, Layers, ListFilter, ListTree, X, Edit2, EllipsisVertical, Maximize2, Minimize2 } from 'lucide-react'
|
||||||
import { markActivityAsComplete, unmarkActivityAsComplete } from '@services/courses/activity'
|
import { markActivityAsComplete, unmarkActivityAsComplete } from '@services/courses/activity'
|
||||||
import DocumentPdfActivity from '@components/Objects/Activities/DocumentPdf/DocumentPdf'
|
|
||||||
import ActivityIndicators from '@components/Pages/Courses/ActivityIndicators'
|
|
||||||
import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/GeneralWrapper'
|
|
||||||
import { usePathname, useRouter } from 'next/navigation'
|
import { usePathname, useRouter } from 'next/navigation'
|
||||||
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
|
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
|
||||||
import { getCourseThumbnailMediaDirectory } from '@services/media/media'
|
import { getCourseThumbnailMediaDirectory } from '@services/media/media'
|
||||||
import { useOrg } from '@components/Contexts/OrgContext'
|
import { useOrg } from '@components/Contexts/OrgContext'
|
||||||
import { CourseProvider } from '@components/Contexts/CourseContext'
|
import { CourseProvider } from '@components/Contexts/CourseContext'
|
||||||
import AIActivityAsk from '@components/Objects/Activities/AI/AIActivityAsk'
|
|
||||||
import AIChatBotProvider from '@components/Contexts/AI/AIChatBotContext'
|
|
||||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||||
import React, { useEffect, useRef } from 'react'
|
import React, { useEffect, useRef, useMemo, lazy, Suspense } from 'react'
|
||||||
import { getAssignmentFromActivityUUID, getFinalGrade, submitAssignmentForGrading } from '@services/courses/assignments'
|
import { getAssignmentFromActivityUUID, getFinalGrade, submitAssignmentForGrading } from '@services/courses/assignments'
|
||||||
import AssignmentStudentActivity from '@components/Objects/Activities/Assignment/AssignmentStudentActivity'
|
|
||||||
import { AssignmentProvider } from '@components/Contexts/Assignments/AssignmentContext'
|
import { AssignmentProvider } from '@components/Contexts/Assignments/AssignmentContext'
|
||||||
import { AssignmentsTaskProvider } from '@components/Contexts/Assignments/AssignmentsTaskContext'
|
import { AssignmentsTaskProvider } from '@components/Contexts/Assignments/AssignmentsTaskContext'
|
||||||
import AssignmentSubmissionProvider, { useAssignmentSubmission } from '@components/Contexts/Assignments/AssignmentSubmissionContext'
|
import AssignmentSubmissionProvider, { useAssignmentSubmission } from '@components/Contexts/Assignments/AssignmentSubmissionContext'
|
||||||
import toast from 'react-hot-toast'
|
import toast from 'react-hot-toast'
|
||||||
import { mutate } from 'swr'
|
import { mutate } from 'swr'
|
||||||
import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
|
import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
|
||||||
|
|
@ -36,7 +28,26 @@ import CourseEndView from '@components/Pages/Activity/CourseEndView'
|
||||||
import { motion, AnimatePresence } from 'framer-motion'
|
import { motion, AnimatePresence } from 'framer-motion'
|
||||||
import ActivityBreadcrumbs from '@components/Pages/Activity/ActivityBreadcrumbs'
|
import ActivityBreadcrumbs from '@components/Pages/Activity/ActivityBreadcrumbs'
|
||||||
import MiniInfoTooltip from '@components/Objects/MiniInfoTooltip'
|
import MiniInfoTooltip from '@components/Objects/MiniInfoTooltip'
|
||||||
|
import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/GeneralWrapper'
|
||||||
|
import ActivityIndicators from '@components/Pages/Courses/ActivityIndicators'
|
||||||
|
|
||||||
|
// Lazy load heavy components
|
||||||
|
const Canva = lazy(() => import('@components/Objects/Activities/DynamicCanva/DynamicCanva'))
|
||||||
|
const VideoActivity = lazy(() => import('@components/Objects/Activities/Video/Video'))
|
||||||
|
const DocumentPdfActivity = lazy(() => import('@components/Objects/Activities/DocumentPdf/DocumentPdf'))
|
||||||
|
const AssignmentStudentActivity = lazy(() => import('@components/Objects/Activities/Assignment/AssignmentStudentActivity'))
|
||||||
|
const AIActivityAsk = lazy(() => import('@components/Objects/Activities/AI/AIActivityAsk'))
|
||||||
|
const AIChatBotProvider = lazy(() => import('@components/Contexts/AI/AIChatBotContext'))
|
||||||
|
|
||||||
|
// Loading fallback component
|
||||||
|
const LoadingFallback = () => (
|
||||||
|
<div className="flex items-center justify-center h-64">
|
||||||
|
<div className="relative w-6 h-6">
|
||||||
|
<div className="absolute top-0 left-0 w-full h-full border-2 border-gray-100 rounded-full"></div>
|
||||||
|
<div className="absolute top-0 left-0 w-full h-full border-2 border-gray-400 rounded-full animate-spin border-t-transparent"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
interface ActivityClientProps {
|
interface ActivityClientProps {
|
||||||
activityid: string
|
activityid: string
|
||||||
|
|
@ -55,6 +66,31 @@ interface ActivityActionsProps {
|
||||||
showNavigation?: boolean
|
showNavigation?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Custom hook for activity position
|
||||||
|
function useActivityPosition(course: any, activityId: string) {
|
||||||
|
return useMemo(() => {
|
||||||
|
let allActivities: any[] = [];
|
||||||
|
let currentIndex = -1;
|
||||||
|
|
||||||
|
course.chapters.forEach((chapter: any) => {
|
||||||
|
chapter.activities.forEach((activity: any) => {
|
||||||
|
const cleanActivityUuid = activity.activity_uuid?.replace('activity_', '');
|
||||||
|
allActivities.push({
|
||||||
|
...activity,
|
||||||
|
cleanUuid: cleanActivityUuid,
|
||||||
|
chapterName: chapter.name
|
||||||
|
});
|
||||||
|
|
||||||
|
if (cleanActivityUuid === activityId.replace('activity_', '')) {
|
||||||
|
currentIndex = allActivities.length - 1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return { allActivities, currentIndex };
|
||||||
|
}, [course, activityId]);
|
||||||
|
}
|
||||||
|
|
||||||
function ActivityActions({ activity, activityid, course, orgslug, assignment, showNavigation = true }: ActivityActionsProps) {
|
function ActivityActions({ activity, activityid, course, orgslug, assignment, showNavigation = true }: ActivityActionsProps) {
|
||||||
const session = useLHSession() as any;
|
const session = useLHSession() as any;
|
||||||
const { contributorStatus } = useContributorStatus(course.course_uuid);
|
const { contributorStatus } = useContributorStatus(course.course_uuid);
|
||||||
|
|
@ -113,37 +149,55 @@ function ActivityClient(props: ActivityClientProps) {
|
||||||
const { contributorStatus } = useContributorStatus(courseuuid);
|
const { contributorStatus } = useContributorStatus(courseuuid);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
// Function to find the current activity's position in the course
|
// Memoize activity position calculation
|
||||||
const findActivityPosition = () => {
|
const { allActivities, currentIndex } = useActivityPosition(course, activityid);
|
||||||
let allActivities: any[] = [];
|
|
||||||
let currentIndex = -1;
|
|
||||||
|
|
||||||
// Flatten all activities from all chapters
|
|
||||||
course.chapters.forEach((chapter: any) => {
|
|
||||||
chapter.activities.forEach((activity: any) => {
|
|
||||||
const cleanActivityUuid = activity.activity_uuid?.replace('activity_', '');
|
|
||||||
allActivities.push({
|
|
||||||
...activity,
|
|
||||||
cleanUuid: cleanActivityUuid,
|
|
||||||
chapterName: chapter.name
|
|
||||||
});
|
|
||||||
|
|
||||||
// Check if this is the current activity
|
|
||||||
if (cleanActivityUuid === activityid.replace('activity_', '')) {
|
|
||||||
currentIndex = allActivities.length - 1;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
return { allActivities, currentIndex };
|
|
||||||
};
|
|
||||||
|
|
||||||
const { allActivities, currentIndex } = findActivityPosition();
|
|
||||||
|
|
||||||
// Get previous and next activities
|
// Get previous and next activities
|
||||||
const prevActivity = currentIndex > 0 ? allActivities[currentIndex - 1] : null;
|
const prevActivity = currentIndex > 0 ? allActivities[currentIndex - 1] : null;
|
||||||
const nextActivity = currentIndex < allActivities.length - 1 ? allActivities[currentIndex + 1] : null;
|
const nextActivity = currentIndex < allActivities.length - 1 ? allActivities[currentIndex + 1] : null;
|
||||||
|
|
||||||
|
// Memoize activity content
|
||||||
|
const activityContent = useMemo(() => {
|
||||||
|
if (!activity || !activity.published || activity.content.paid_access === false) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (activity.activity_type) {
|
||||||
|
case 'TYPE_DYNAMIC':
|
||||||
|
return (
|
||||||
|
<Suspense fallback={<LoadingFallback />}>
|
||||||
|
<Canva content={activity.content} activity={activity} />
|
||||||
|
</Suspense>
|
||||||
|
);
|
||||||
|
case 'TYPE_VIDEO':
|
||||||
|
return (
|
||||||
|
<Suspense fallback={<LoadingFallback />}>
|
||||||
|
<VideoActivity course={course} activity={activity} />
|
||||||
|
</Suspense>
|
||||||
|
);
|
||||||
|
case 'TYPE_DOCUMENT':
|
||||||
|
return (
|
||||||
|
<Suspense fallback={<LoadingFallback />}>
|
||||||
|
<DocumentPdfActivity course={course} activity={activity} />
|
||||||
|
</Suspense>
|
||||||
|
);
|
||||||
|
case 'TYPE_ASSIGNMENT':
|
||||||
|
return assignment ? (
|
||||||
|
<Suspense fallback={<LoadingFallback />}>
|
||||||
|
<AssignmentProvider assignment_uuid={assignment?.assignment_uuid}>
|
||||||
|
<AssignmentsTaskProvider>
|
||||||
|
<AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
|
||||||
|
<AssignmentStudentActivity />
|
||||||
|
</AssignmentSubmissionProvider>
|
||||||
|
</AssignmentsTaskProvider>
|
||||||
|
</AssignmentProvider>
|
||||||
|
</Suspense>
|
||||||
|
) : null;
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}, [activity, course, assignment]);
|
||||||
|
|
||||||
// Navigate to an activity
|
// Navigate to an activity
|
||||||
const navigateToActivity = (activity: any) => {
|
const navigateToActivity = (activity: any) => {
|
||||||
if (!activity) return;
|
if (!activity) return;
|
||||||
|
|
@ -208,259 +262,57 @@ function ActivityClient(props: ActivityClientProps) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<CourseProvider courseuuid={course?.course_uuid}>
|
<CourseProvider courseuuid={course?.course_uuid}>
|
||||||
<AIChatBotProvider>
|
<Suspense fallback={<LoadingFallback />}>
|
||||||
{isFocusMode ? (
|
<AIChatBotProvider>
|
||||||
<AnimatePresence>
|
{isFocusMode ? (
|
||||||
<motion.div
|
<AnimatePresence>
|
||||||
initial={isInitialRender.current ? false : { opacity: 0 }}
|
|
||||||
animate={{ opacity: 1 }}
|
|
||||||
exit={{ opacity: 0 }}
|
|
||||||
transition={{ duration: 0.3 }}
|
|
||||||
className="fixed inset-0 bg-white z-50"
|
|
||||||
>
|
|
||||||
{/* Focus Mode Top Bar */}
|
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={isInitialRender.current ? false : { y: -100 }}
|
initial={isInitialRender.current ? false : { opacity: 0 }}
|
||||||
animate={{ y: 0 }}
|
animate={{ opacity: 1 }}
|
||||||
exit={{ y: -100 }}
|
exit={{ opacity: 0 }}
|
||||||
transition={{ duration: 0.3 }}
|
transition={{ duration: 0.3 }}
|
||||||
className="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-xl border-b border-gray-100"
|
className="fixed inset-0 bg-white z-50"
|
||||||
>
|
>
|
||||||
<div className="container mx-auto px-4 py-2">
|
{/* Focus Mode Top Bar */}
|
||||||
<div className="flex items-center justify-between h-14">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<motion.button
|
|
||||||
whileHover={{ scale: 1.05 }}
|
|
||||||
whileTap={{ scale: 0.95 }}
|
|
||||||
onClick={() => setIsFocusMode(false)}
|
|
||||||
className="bg-white nice-shadow p-2 rounded-full cursor-pointer hover:bg-gray-50"
|
|
||||||
title="Exit focus mode"
|
|
||||||
>
|
|
||||||
<Minimize2 size={16} className="text-gray-700" />
|
|
||||||
</motion.button>
|
|
||||||
<ActivityChapterDropdown
|
|
||||||
course={course}
|
|
||||||
currentActivityId={activity.activity_uuid ? activity.activity_uuid.replace('activity_', '') : activityid.replace('activity_', '')}
|
|
||||||
orgslug={orgslug}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Center Course Info */}
|
|
||||||
<motion.div
|
|
||||||
initial={isInitialRender.current ? false : { opacity: 0, y: -20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ delay: 0.1 }}
|
|
||||||
className="flex items-center space-x-4"
|
|
||||||
>
|
|
||||||
<div className="flex">
|
|
||||||
<Link
|
|
||||||
href={getUriWithOrg(orgslug, '') + `/course/${courseuuid}`}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
className="w-[60px] h-[34px] rounded-md drop-shadow-md"
|
|
||||||
src={`${getCourseThumbnailMediaDirectory(
|
|
||||||
org?.org_uuid,
|
|
||||||
course.course_uuid,
|
|
||||||
course.thumbnail_image
|
|
||||||
)}`}
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col -space-y-1">
|
|
||||||
<p className="font-bold text-gray-700 text-sm">Course </p>
|
|
||||||
<h1 className="font-bold text-gray-950 text-lg first-letter:uppercase">
|
|
||||||
{course.name}
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Progress Indicator */}
|
|
||||||
<motion.div
|
|
||||||
initial={isInitialRender.current ? false : { opacity: 0, x: 20 }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
transition={{ delay: 0.2 }}
|
|
||||||
className="flex items-center space-x-2"
|
|
||||||
>
|
|
||||||
<div className="relative w-8 h-8">
|
|
||||||
<svg className="w-full h-full transform -rotate-90">
|
|
||||||
<circle
|
|
||||||
cx="16"
|
|
||||||
cy="16"
|
|
||||||
r="14"
|
|
||||||
stroke="#e5e7eb"
|
|
||||||
strokeWidth="3"
|
|
||||||
fill="none"
|
|
||||||
/>
|
|
||||||
<circle
|
|
||||||
cx="16"
|
|
||||||
cy="16"
|
|
||||||
r="14"
|
|
||||||
stroke="#10b981"
|
|
||||||
strokeWidth="3"
|
|
||||||
fill="none"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeDasharray={2 * Math.PI * 14}
|
|
||||||
strokeDashoffset={2 * Math.PI * 14 * (1 - (course.trail?.runs?.find((run: any) => run.course_id === course.id)?.steps?.filter((step: any) => step.complete)?.length || 0) / (course.chapters?.reduce((acc: number, chapter: any) => acc + chapter.activities.length, 0) || 1))}
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<div className="absolute inset-0 flex items-center justify-center">
|
|
||||||
<span className="text-xs font-bold text-gray-800">
|
|
||||||
{Math.round(((course.trail?.runs?.find((run: any) => run.course_id === course.id)?.steps?.filter((step: any) => step.complete)?.length || 0) / (course.chapters?.reduce((acc: number, chapter: any) => acc + chapter.activities.length, 0) || 1)) * 100)}%
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-600">
|
|
||||||
{course.trail?.runs?.find((run: any) => run.course_id === course.id)?.steps?.filter((step: any) => step.complete)?.length || 0} of {course.chapters?.reduce((acc: number, chapter: any) => acc + chapter.activities.length, 0) || 0}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Focus Mode Content */}
|
|
||||||
<div className="pt-16 pb-20 h-full overflow-auto">
|
|
||||||
<div className="container mx-auto px-4">
|
|
||||||
{activity && activity.published == true && (
|
|
||||||
<>
|
|
||||||
{activity.content.paid_access == false ? (
|
|
||||||
<PaidCourseActivityDisclaimer course={course} />
|
|
||||||
) : (
|
|
||||||
<motion.div
|
|
||||||
initial={isInitialRender.current ? false : { scale: 0.95, opacity: 0 }}
|
|
||||||
animate={{ scale: 1, opacity: 1 }}
|
|
||||||
transition={{ delay: 0.3 }}
|
|
||||||
className={`p-7 rounded-lg ${bgColor} mt-4`}
|
|
||||||
>
|
|
||||||
{/* Activity Types */}
|
|
||||||
<div>
|
|
||||||
{activity.activity_type == 'TYPE_DYNAMIC' && (
|
|
||||||
<Canva content={activity.content} activity={activity} />
|
|
||||||
)}
|
|
||||||
{activity.activity_type == 'TYPE_VIDEO' && (
|
|
||||||
<VideoActivity course={course} activity={activity} />
|
|
||||||
)}
|
|
||||||
{activity.activity_type == 'TYPE_DOCUMENT' && (
|
|
||||||
<DocumentPdfActivity
|
|
||||||
course={course}
|
|
||||||
activity={activity}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{activity.activity_type == 'TYPE_ASSIGNMENT' && (
|
|
||||||
<div>
|
|
||||||
{assignment ? (
|
|
||||||
<AssignmentProvider assignment_uuid={assignment?.assignment_uuid}>
|
|
||||||
<AssignmentsTaskProvider>
|
|
||||||
<AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
|
|
||||||
<AssignmentStudentActivity />
|
|
||||||
</AssignmentSubmissionProvider>
|
|
||||||
</AssignmentsTaskProvider>
|
|
||||||
</AssignmentProvider>
|
|
||||||
) : (
|
|
||||||
<div></div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Focus Mode Bottom Bar */}
|
|
||||||
{activity && activity.published == true && activity.content.paid_access != false && (
|
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={isInitialRender.current ? false : { y: 100 }}
|
initial={isInitialRender.current ? false : { y: -100 }}
|
||||||
animate={{ y: 0 }}
|
animate={{ y: 0 }}
|
||||||
exit={{ y: 100 }}
|
exit={{ y: -100 }}
|
||||||
transition={{ duration: 0.3 }}
|
transition={{ duration: 0.3 }}
|
||||||
className="fixed bottom-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-xl border-t border-gray-100"
|
className="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-xl border-b border-gray-100"
|
||||||
>
|
>
|
||||||
<div className="container mx-auto px-4">
|
<div className="container mx-auto px-4 py-2">
|
||||||
<div className="flex items-center justify-between h-16">
|
<div className="flex items-center justify-between h-14">
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<button
|
<motion.button
|
||||||
onClick={() => navigateToActivity(prevActivity)}
|
whileHover={{ scale: 1.05 }}
|
||||||
className={`flex items-center space-x-1.5 p-2 rounded-md transition-all duration-200 cursor-pointer ${
|
whileTap={{ scale: 0.95 }}
|
||||||
prevActivity
|
onClick={() => setIsFocusMode(false)}
|
||||||
? 'text-gray-700'
|
className="bg-white nice-shadow p-2 rounded-full cursor-pointer hover:bg-gray-50"
|
||||||
: 'opacity-50 text-gray-400 cursor-not-allowed'
|
title="Exit focus mode"
|
||||||
}`}
|
|
||||||
disabled={!prevActivity}
|
|
||||||
title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'}
|
|
||||||
>
|
>
|
||||||
<ChevronLeft size={20} className="text-gray-800 shrink-0" />
|
<Minimize2 size={16} className="text-gray-700" />
|
||||||
<div className="flex flex-col items-start">
|
</motion.button>
|
||||||
<span className="text-xs text-gray-500">Previous</span>
|
<ActivityChapterDropdown
|
||||||
<span className="text-sm capitalize font-semibold text-left">
|
|
||||||
{prevActivity ? prevActivity.name : 'No previous activity'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<ActivityActions
|
|
||||||
activity={activity}
|
|
||||||
activityid={activityid}
|
|
||||||
course={course}
|
course={course}
|
||||||
|
currentActivityId={activity.activity_uuid ? activity.activity_uuid.replace('activity_', '') : activityid.replace('activity_', '')}
|
||||||
orgslug={orgslug}
|
orgslug={orgslug}
|
||||||
assignment={assignment}
|
|
||||||
showNavigation={false}
|
|
||||||
/>
|
/>
|
||||||
<button
|
|
||||||
onClick={() => navigateToActivity(nextActivity)}
|
|
||||||
className={`flex items-center space-x-1.5 p-2 rounded-md transition-all duration-200 cursor-pointer ${
|
|
||||||
nextActivity
|
|
||||||
? 'text-gray-700'
|
|
||||||
: 'opacity-50 text-gray-400 cursor-not-allowed'
|
|
||||||
}`}
|
|
||||||
disabled={!nextActivity}
|
|
||||||
title={nextActivity ? `Next: ${nextActivity.name}` : 'No next activity'}
|
|
||||||
>
|
|
||||||
<div className="flex flex-col items-end">
|
|
||||||
<span className="text-xs text-gray-500">Next</span>
|
|
||||||
<span className="text-sm capitalize font-semibold text-right">
|
|
||||||
{nextActivity ? nextActivity.name : 'No next activity'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<ChevronRight size={20} className="text-gray-800 shrink-0" />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
{/* Center Course Info */}
|
||||||
</motion.div>
|
<motion.div
|
||||||
)}
|
initial={isInitialRender.current ? false : { opacity: 0, y: -20 }}
|
||||||
</motion.div>
|
animate={{ opacity: 1, y: 0 }}
|
||||||
</AnimatePresence>
|
transition={{ delay: 0.1 }}
|
||||||
) : (
|
className="flex items-center space-x-4"
|
||||||
<GeneralWrapperStyled>
|
>
|
||||||
{/* Original non-focus mode UI */}
|
|
||||||
{activityid === 'end' ? (
|
|
||||||
<CourseEndView
|
|
||||||
courseName={course.name}
|
|
||||||
orgslug={orgslug}
|
|
||||||
courseUuid={course.course_uuid}
|
|
||||||
thumbnailImage={course.thumbnail_image}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-4 pt-0">
|
|
||||||
<div className="pt-2">
|
|
||||||
<ActivityBreadcrumbs
|
|
||||||
course={course}
|
|
||||||
activity={activity}
|
|
||||||
orgslug={orgslug}
|
|
||||||
/>
|
|
||||||
<div className="space-y-4 pb-4 activity-info-section">
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<div className="flex space-x-6">
|
|
||||||
<div className="flex">
|
<div className="flex">
|
||||||
<Link
|
<Link
|
||||||
href={getUriWithOrg(orgslug, '') + `/course/${courseuuid}`}
|
href={getUriWithOrg(orgslug, '') + `/course/${courseuuid}`}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
className="w-[100px] h-[57px] rounded-md drop-shadow-md"
|
className="w-[60px] h-[34px] rounded-md drop-shadow-md"
|
||||||
src={`${getCourseThumbnailMediaDirectory(
|
src={`${getCourseThumbnailMediaDirectory(
|
||||||
org?.org_uuid,
|
org?.org_uuid,
|
||||||
course.course_uuid,
|
course.course_uuid,
|
||||||
|
|
@ -471,181 +323,330 @@ function ActivityClient(props: ActivityClientProps) {
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col -space-y-1">
|
<div className="flex flex-col -space-y-1">
|
||||||
<p className="font-bold text-gray-700 text-md">Course </p>
|
<p className="font-bold text-gray-700 text-sm">Course </p>
|
||||||
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase">
|
<h1 className="font-bold text-gray-950 text-lg first-letter:uppercase">
|
||||||
{course.name}
|
{course.name}
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</motion.div>
|
||||||
{activity && activity.published == true && activity.content.paid_access != false && (
|
|
||||||
<AuthenticatedClientElement checkMethod="authentication">
|
{/* Progress Indicator */}
|
||||||
{ (
|
<motion.div
|
||||||
<div className="flex space-x-2">
|
initial={isInitialRender.current ? false : { opacity: 0, x: 20 }}
|
||||||
<PreviousActivityButton
|
animate={{ opacity: 1, x: 0 }}
|
||||||
course={course}
|
transition={{ delay: 0.2 }}
|
||||||
currentActivityId={activity.id}
|
className="flex items-center space-x-2"
|
||||||
orgslug={orgslug}
|
>
|
||||||
/>
|
<div className="relative w-8 h-8">
|
||||||
<NextActivityButton
|
<svg className="w-full h-full transform -rotate-90">
|
||||||
course={course}
|
<circle
|
||||||
currentActivityId={activity.id}
|
cx="16"
|
||||||
orgslug={orgslug}
|
cy="16"
|
||||||
/>
|
r="14"
|
||||||
</div>
|
stroke="#e5e7eb"
|
||||||
)}
|
strokeWidth="3"
|
||||||
</AuthenticatedClientElement>
|
fill="none"
|
||||||
)}
|
/>
|
||||||
|
<circle
|
||||||
|
cx="16"
|
||||||
|
cy="16"
|
||||||
|
r="14"
|
||||||
|
stroke="#10b981"
|
||||||
|
strokeWidth="3"
|
||||||
|
fill="none"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeDasharray={2 * Math.PI * 14}
|
||||||
|
strokeDashoffset={2 * Math.PI * 14 * (1 - (course.trail?.runs?.find((run: any) => run.course_id === course.id)?.steps?.filter((step: any) => step.complete)?.length || 0) / (course.chapters?.reduce((acc: number, chapter: any) => acc + chapter.activities.length, 0) || 1))}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<span className="text-xs font-bold text-gray-800">
|
||||||
|
{Math.round(((course.trail?.runs?.find((run: any) => run.course_id === course.id)?.steps?.filter((step: any) => step.complete)?.length || 0) / (course.chapters?.reduce((acc: number, chapter: any) => acc + chapter.activities.length, 0) || 1)) * 100)}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-600">
|
||||||
|
{course.trail?.runs?.find((run: any) => run.course_id === course.id)?.steps?.filter((step: any) => step.complete)?.length || 0} of {course.chapters?.reduce((acc: number, chapter: any) => acc + chapter.activities.length, 0) || 0}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
<ActivityIndicators
|
{/* Focus Mode Content */}
|
||||||
course_uuid={courseuuid}
|
<div className="pt-16 pb-20 h-full overflow-auto">
|
||||||
current_activity={activityid}
|
<div className="container mx-auto px-4">
|
||||||
orgslug={orgslug}
|
{activity && activity.published == true && (
|
||||||
course={course}
|
<>
|
||||||
/>
|
{activity.content.paid_access == false ? (
|
||||||
|
<PaidCourseActivityDisclaimer course={course} />
|
||||||
|
) : (
|
||||||
|
<motion.div
|
||||||
|
initial={isInitialRender.current ? false : { scale: 0.95, opacity: 0 }}
|
||||||
|
animate={{ scale: 1, opacity: 1 }}
|
||||||
|
transition={{ delay: 0.3 }}
|
||||||
|
className={`p-7 rounded-lg ${bgColor} mt-4`}
|
||||||
|
>
|
||||||
|
{/* Activity Types */}
|
||||||
|
<div>
|
||||||
|
{activityContent}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="flex justify-between items-center w-full">
|
{/* Focus Mode Bottom Bar */}
|
||||||
<div className="flex flex-1/3 items-center space-x-3">
|
{activity && activity.published == true && activity.content.paid_access != false && (
|
||||||
<button
|
<motion.div
|
||||||
onClick={() => setIsFocusMode(true)}
|
initial={isInitialRender.current ? false : { y: 100 }}
|
||||||
className="bg-white nice-shadow p-2 rounded-full cursor-pointer hover:bg-gray-50 transition-all duration-200"
|
animate={{ y: 0 }}
|
||||||
title="Enter focus mode"
|
exit={{ y: 100 }}
|
||||||
>
|
transition={{ duration: 0.3 }}
|
||||||
<Maximize2 size={16} className="text-gray-700" />
|
className="fixed bottom-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-xl border-t border-gray-100"
|
||||||
</button>
|
>
|
||||||
<ActivityChapterDropdown
|
<div className="container mx-auto px-4">
|
||||||
course={course}
|
<div className="flex items-center justify-between h-16">
|
||||||
currentActivityId={activity.activity_uuid ? activity.activity_uuid.replace('activity_', '') : activityid.replace('activity_', '')}
|
<div className="flex items-center space-x-2">
|
||||||
orgslug={orgslug}
|
<button
|
||||||
/>
|
onClick={() => navigateToActivity(prevActivity)}
|
||||||
<div className="flex flex-col -space-y-1">
|
className={`flex items-center space-x-1.5 p-2 rounded-md transition-all duration-200 cursor-pointer ${
|
||||||
<p className="font-bold text-gray-700 text-md">
|
prevActivity
|
||||||
Chapter : {getChapterNameByActivityId(course, activity.id)}
|
? 'text-gray-700'
|
||||||
</p>
|
: 'opacity-50 text-gray-400 cursor-not-allowed'
|
||||||
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase">
|
}`}
|
||||||
{activity.name}
|
disabled={!prevActivity}
|
||||||
</h1>
|
title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'}
|
||||||
|
>
|
||||||
|
<ChevronLeft size={20} className="text-gray-800 shrink-0" />
|
||||||
|
<div className="flex flex-col items-start">
|
||||||
|
<span className="text-xs text-gray-500">Previous</span>
|
||||||
|
<span className="text-sm capitalize font-semibold text-left">
|
||||||
|
{prevActivity ? prevActivity.name : 'No previous activity'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<ActivityActions
|
||||||
|
activity={activity}
|
||||||
|
activityid={activityid}
|
||||||
|
course={course}
|
||||||
|
orgslug={orgslug}
|
||||||
|
assignment={assignment}
|
||||||
|
showNavigation={false}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => navigateToActivity(nextActivity)}
|
||||||
|
className={`flex items-center space-x-1.5 p-2 rounded-md transition-all duration-200 cursor-pointer ${
|
||||||
|
nextActivity
|
||||||
|
? 'text-gray-700'
|
||||||
|
: 'opacity-50 text-gray-400 cursor-not-allowed'
|
||||||
|
}`}
|
||||||
|
disabled={!nextActivity}
|
||||||
|
title={nextActivity ? `Next: ${nextActivity.name}` : 'No next activity'}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col items-end">
|
||||||
|
<span className="text-xs text-gray-500">Next</span>
|
||||||
|
<span className="text-sm capitalize font-semibold text-right">
|
||||||
|
{nextActivity ? nextActivity.name : 'No next activity'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<ChevronRight size={20} className="text-gray-800 shrink-0" />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex space-x-2 items-center">
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
</AnimatePresence>
|
||||||
|
) : (
|
||||||
|
<GeneralWrapperStyled>
|
||||||
|
{/* Original non-focus mode UI */}
|
||||||
|
{activityid === 'end' ? (
|
||||||
|
<CourseEndView
|
||||||
|
courseName={course.name}
|
||||||
|
orgslug={orgslug}
|
||||||
|
courseUuid={course.course_uuid}
|
||||||
|
thumbnailImage={course.thumbnail_image}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4 pt-0">
|
||||||
|
<div className="pt-2">
|
||||||
|
<ActivityBreadcrumbs
|
||||||
|
course={course}
|
||||||
|
activity={activity}
|
||||||
|
orgslug={orgslug}
|
||||||
|
/>
|
||||||
|
<div className="space-y-4 pb-4 activity-info-section">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div className="flex space-x-6">
|
||||||
|
<div className="flex">
|
||||||
|
<Link
|
||||||
|
href={getUriWithOrg(orgslug, '') + `/course/${courseuuid}`}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
className="w-[100px] h-[57px] rounded-md drop-shadow-md"
|
||||||
|
src={`${getCourseThumbnailMediaDirectory(
|
||||||
|
org?.org_uuid,
|
||||||
|
course.course_uuid,
|
||||||
|
course.thumbnail_image
|
||||||
|
)}`}
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col -space-y-1">
|
||||||
|
<p className="font-bold text-gray-700 text-md">Course </p>
|
||||||
|
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase">
|
||||||
|
{course.name}
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{activity && activity.published == true && activity.content.paid_access != false && (
|
{activity && activity.published == true && activity.content.paid_access != false && (
|
||||||
<AuthenticatedClientElement checkMethod="authentication">
|
<AuthenticatedClientElement checkMethod="authentication">
|
||||||
{activity.activity_type != 'TYPE_ASSIGNMENT' && (
|
{ (
|
||||||
<>
|
<div className="flex space-x-2">
|
||||||
<AIActivityAsk activity={activity} />
|
<PreviousActivityButton
|
||||||
{contributorStatus === 'ACTIVE' && activity.activity_type == 'TYPE_DYNAMIC' && (
|
course={course}
|
||||||
<Link
|
currentActivityId={activity.id}
|
||||||
href={getUriWithOrg(orgslug, '') + `/course/${courseuuid}/activity/${activityid}/edit`}
|
orgslug={orgslug}
|
||||||
className="bg-emerald-600 rounded-full px-5 drop-shadow-md flex items-center space-x-2 p-2.5 text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out"
|
/>
|
||||||
>
|
<NextActivityButton
|
||||||
<Edit2 size={17} />
|
course={course}
|
||||||
<span className="text-xs font-bold">Contribute</span>
|
currentActivityId={activity.id}
|
||||||
</Link>
|
orgslug={orgslug}
|
||||||
)}
|
/>
|
||||||
</>
|
</div>
|
||||||
)}
|
)}
|
||||||
</AuthenticatedClientElement>
|
</AuthenticatedClientElement>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{activity && activity.published == false && (
|
<ActivityIndicators
|
||||||
<div className="p-7 drop-shadow-xs rounded-lg bg-gray-800">
|
course_uuid={courseuuid}
|
||||||
<div className="text-white">
|
current_activity={activityid}
|
||||||
<h1 className="font-bold text-2xl">
|
orgslug={orgslug}
|
||||||
This activity is not published yet
|
course={course}
|
||||||
</h1>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activity && activity.published == true && (
|
<div className="flex justify-between items-center w-full">
|
||||||
<>
|
<div className="flex flex-1/3 items-center space-x-3">
|
||||||
{activity.content.paid_access == false ? (
|
<button
|
||||||
<PaidCourseActivityDisclaimer course={course} />
|
onClick={() => setIsFocusMode(true)}
|
||||||
) : (
|
className="bg-white nice-shadow p-2 rounded-full cursor-pointer hover:bg-gray-50 transition-all duration-200"
|
||||||
<div className={`p-7 drop-shadow-xs rounded-lg ${bgColor}`}>
|
title="Enter focus mode"
|
||||||
{/* Activity Types */}
|
>
|
||||||
<div>
|
<Maximize2 size={16} className="text-gray-700" />
|
||||||
{activity.activity_type == 'TYPE_DYNAMIC' && (
|
</button>
|
||||||
<Canva content={activity.content} activity={activity} />
|
<ActivityChapterDropdown
|
||||||
)}
|
course={course}
|
||||||
{activity.activity_type == 'TYPE_VIDEO' && (
|
currentActivityId={activity.activity_uuid ? activity.activity_uuid.replace('activity_', '') : activityid.replace('activity_', '')}
|
||||||
<VideoActivity course={course} activity={activity} />
|
orgslug={orgslug}
|
||||||
)}
|
/>
|
||||||
{activity.activity_type == 'TYPE_DOCUMENT' && (
|
<div className="flex flex-col -space-y-1">
|
||||||
<DocumentPdfActivity
|
<p className="font-bold text-gray-700 text-md">
|
||||||
course={course}
|
Chapter : {getChapterNameByActivityId(course, activity.id)}
|
||||||
activity={activity}
|
</p>
|
||||||
/>
|
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase">
|
||||||
)}
|
{activity.name}
|
||||||
{activity.activity_type == 'TYPE_ASSIGNMENT' && (
|
</h1>
|
||||||
<div>
|
|
||||||
{assignment ? (
|
|
||||||
<AssignmentProvider assignment_uuid={assignment?.assignment_uuid}>
|
|
||||||
<AssignmentsTaskProvider>
|
|
||||||
<AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
|
|
||||||
<AssignmentStudentActivity />
|
|
||||||
</AssignmentSubmissionProvider>
|
|
||||||
</AssignmentsTaskProvider>
|
|
||||||
</AssignmentProvider>
|
|
||||||
) : (
|
|
||||||
<div></div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
<div className="flex space-x-2 items-center">
|
||||||
</>
|
{activity && activity.published == true && activity.content.paid_access != false && (
|
||||||
)}
|
<AuthenticatedClientElement checkMethod="authentication">
|
||||||
|
{activity.activity_type != 'TYPE_ASSIGNMENT' && (
|
||||||
{/* Activity Actions below the content box */}
|
<>
|
||||||
{activity && activity.published == true && activity.content.paid_access != false && (
|
<AIActivityAsk activity={activity} />
|
||||||
<div className="flex justify-between items-center mt-4 w-full">
|
{contributorStatus === 'ACTIVE' && activity.activity_type == 'TYPE_DYNAMIC' && (
|
||||||
<div>
|
<Link
|
||||||
<PreviousActivityButton
|
href={getUriWithOrg(orgslug, '') + `/course/${courseuuid}/activity/${activityid}/edit`}
|
||||||
course={course}
|
className="bg-emerald-600 rounded-full px-5 drop-shadow-md flex items-center space-x-2 p-2.5 text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out"
|
||||||
currentActivityId={activity.id}
|
>
|
||||||
orgslug={orgslug}
|
<Edit2 size={17} />
|
||||||
/>
|
<span className="text-xs font-bold">Contribute</span>
|
||||||
</div>
|
</Link>
|
||||||
<div className="flex items-center space-x-2">
|
)}
|
||||||
<ActivityActions
|
</>
|
||||||
activity={activity}
|
)}
|
||||||
activityid={activityid}
|
</AuthenticatedClientElement>
|
||||||
course={course}
|
)}
|
||||||
orgslug={orgslug}
|
</div>
|
||||||
assignment={assignment}
|
|
||||||
showNavigation={false}
|
|
||||||
/>
|
|
||||||
<NextActivityButton
|
|
||||||
course={course}
|
|
||||||
currentActivityId={activity.id}
|
|
||||||
orgslug={orgslug}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Fixed Activity Secondary Bar */}
|
{activity && activity.published == false && (
|
||||||
{activity && activity.published == true && activity.content.paid_access != false && (
|
<div className="p-7 drop-shadow-xs rounded-lg bg-gray-800">
|
||||||
<FixedActivitySecondaryBar
|
<div className="text-white">
|
||||||
course={course}
|
<h1 className="font-bold text-2xl">
|
||||||
currentActivityId={activityid}
|
This activity is not published yet
|
||||||
orgslug={orgslug}
|
</h1>
|
||||||
activity={activity}
|
</div>
|
||||||
/>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div style={{ height: '100px' }}></div>
|
{activity && activity.published == true && (
|
||||||
|
<>
|
||||||
|
{activity.content.paid_access == false ? (
|
||||||
|
<PaidCourseActivityDisclaimer course={course} />
|
||||||
|
) : (
|
||||||
|
<div className={`p-7 drop-shadow-xs rounded-lg ${bgColor}`}>
|
||||||
|
{activityContent}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Activity Actions below the content box */}
|
||||||
|
{activity && activity.published == true && activity.content.paid_access != false && (
|
||||||
|
<div className="flex justify-between items-center mt-4 w-full">
|
||||||
|
<div>
|
||||||
|
<PreviousActivityButton
|
||||||
|
course={course}
|
||||||
|
currentActivityId={activity.id}
|
||||||
|
orgslug={orgslug}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<ActivityActions
|
||||||
|
activity={activity}
|
||||||
|
activityid={activityid}
|
||||||
|
course={course}
|
||||||
|
orgslug={orgslug}
|
||||||
|
assignment={assignment}
|
||||||
|
showNavigation={false}
|
||||||
|
/>
|
||||||
|
<NextActivityButton
|
||||||
|
course={course}
|
||||||
|
currentActivityId={activity.id}
|
||||||
|
orgslug={orgslug}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Fixed Activity Secondary Bar */}
|
||||||
|
{activity && activity.published == true && activity.content.paid_access != false && (
|
||||||
|
<FixedActivitySecondaryBar
|
||||||
|
course={course}
|
||||||
|
currentActivityId={activityid}
|
||||||
|
orgslug={orgslug}
|
||||||
|
activity={activity}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div style={{ height: '100px' }}></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
</GeneralWrapperStyled>
|
||||||
</GeneralWrapperStyled>
|
)}
|
||||||
)}
|
</AIChatBotProvider>
|
||||||
</AIChatBotProvider>
|
</Suspense>
|
||||||
</CourseProvider>
|
</CourseProvider>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -78,7 +78,7 @@ const ActivityPage = async (params: any) => {
|
||||||
fetchCourseMetadata(courseuuid, access_token),
|
fetchCourseMetadata(courseuuid, access_token),
|
||||||
getActivityWithAuthHeader(
|
getActivityWithAuthHeader(
|
||||||
activityid,
|
activityid,
|
||||||
{ revalidate: 0, tags: ['activities'] },
|
{ revalidate: 60, tags: ['activities'] },
|
||||||
access_token || null
|
access_token || null
|
||||||
)
|
)
|
||||||
])
|
])
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ export async function generateMetadata(props: MetadataProps): Promise<Metadata>
|
||||||
})
|
})
|
||||||
const course_meta = await getCourseMetadata(
|
const course_meta = await getCourseMetadata(
|
||||||
params.courseuuid,
|
params.courseuuid,
|
||||||
{ revalidate: 1800, tags: ['courses'] },
|
{ revalidate: 0, tags: ['courses'] },
|
||||||
access_token ? access_token : null
|
access_token ? access_token : null
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
import { ChevronLeft, ChevronRight } from 'lucide-react'
|
import { ChevronLeft, ChevronRight } from 'lucide-react'
|
||||||
import { getUriWithOrg } from '@services/config/config'
|
import { getUriWithOrg } from '@services/config/config'
|
||||||
import { useRouter } from 'next/navigation'
|
import { useRouter } from 'next/navigation'
|
||||||
import React, { useEffect, useState, useRef } from 'react'
|
import React, { useEffect, useState, useRef, useMemo, memo } from 'react'
|
||||||
import ActivityIndicators from '@components/Pages/Courses/ActivityIndicators'
|
import ActivityIndicators from '@components/Pages/Courses/ActivityIndicators'
|
||||||
import ActivityChapterDropdown from './ActivityChapterDropdown'
|
import ActivityChapterDropdown from './ActivityChapterDropdown'
|
||||||
import { getCourseThumbnailMediaDirectory } from '@services/media/media'
|
import { getCourseThumbnailMediaDirectory } from '@services/media/media'
|
||||||
|
|
@ -15,6 +15,86 @@ interface FixedActivitySecondaryBarProps {
|
||||||
activity: any
|
activity: any
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Memoized navigation buttons component
|
||||||
|
const NavigationButtons = memo(({
|
||||||
|
prevActivity,
|
||||||
|
nextActivity,
|
||||||
|
currentIndex,
|
||||||
|
allActivities,
|
||||||
|
navigateToActivity
|
||||||
|
}: {
|
||||||
|
prevActivity: any,
|
||||||
|
nextActivity: any,
|
||||||
|
currentIndex: number,
|
||||||
|
allActivities: any[],
|
||||||
|
navigateToActivity: (activity: any) => void
|
||||||
|
}) => (
|
||||||
|
<div className="flex items-center space-x-2 sm:space-x-3">
|
||||||
|
<button
|
||||||
|
onClick={() => navigateToActivity(prevActivity)}
|
||||||
|
className={`flex items-center space-x-1 sm:space-x-2 py-1.5 px-1.5 sm:px-2 rounded-md transition-all duration-200 ${
|
||||||
|
prevActivity
|
||||||
|
? 'text-gray-700 hover:bg-gray-100'
|
||||||
|
: 'text-gray-300 cursor-not-allowed'
|
||||||
|
}`}
|
||||||
|
disabled={!prevActivity}
|
||||||
|
title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'}
|
||||||
|
>
|
||||||
|
<ChevronLeft size={16} className="shrink-0 sm:w-5 sm:h-5" />
|
||||||
|
<div className="flex flex-col items-start hidden sm:flex">
|
||||||
|
<span className="text-xs text-gray-500">Previous</span>
|
||||||
|
<span className="text-sm font-medium text-left truncate max-w-[100px] sm:max-w-[150px]">
|
||||||
|
{prevActivity ? prevActivity.name : 'No previous activity'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<span className="text-sm font-medium text-gray-500 px-1 sm:px-2">
|
||||||
|
{currentIndex + 1} of {allActivities.length}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => navigateToActivity(nextActivity)}
|
||||||
|
className={`flex items-center space-x-1 sm:space-x-2 py-1.5 px-1.5 sm:px-2 rounded-md transition-all duration-200`}
|
||||||
|
disabled={!nextActivity}
|
||||||
|
title={nextActivity ? `Next: ${nextActivity.name}` : 'No next activity'}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col items-end hidden sm:flex">
|
||||||
|
<span className={`text-xs ${nextActivity ? 'text-gray-500' : 'text-gray-500'}`}>Next</span>
|
||||||
|
<span className="text-sm font-medium text-right truncate max-w-[100px] sm:max-w-[150px]">
|
||||||
|
{nextActivity ? nextActivity.name : 'No next activity'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<ChevronRight size={16} className="shrink-0 sm:w-5 sm:h-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
));
|
||||||
|
|
||||||
|
NavigationButtons.displayName = 'NavigationButtons';
|
||||||
|
|
||||||
|
// Memoized course info component
|
||||||
|
const CourseInfo = memo(({ course, org }: { course: any, org: any }) => (
|
||||||
|
<div className="flex items-center space-x-2 sm:space-x-4 min-w-0 flex-shrink">
|
||||||
|
<img
|
||||||
|
className="w-[35px] sm:w-[45px] h-[20px] sm:h-[26px] rounded-md object-cover flex-shrink-0"
|
||||||
|
src={`${getCourseThumbnailMediaDirectory(
|
||||||
|
org?.org_uuid,
|
||||||
|
course.course_uuid,
|
||||||
|
course.thumbnail_image
|
||||||
|
)}`}
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<div className="flex flex-col -space-y-0.5 min-w-0 hidden sm:block">
|
||||||
|
<p className="text-sm font-medium text-gray-500">Course</p>
|
||||||
|
<h1 className="font-semibold text-gray-900 text-base truncate">
|
||||||
|
{course.name}
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
));
|
||||||
|
|
||||||
|
CourseInfo.displayName = 'CourseInfo';
|
||||||
|
|
||||||
export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryBarProps): React.ReactNode {
|
export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryBarProps): React.ReactNode {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [isScrolled, setIsScrolled] = useState(false);
|
const [isScrolled, setIsScrolled] = useState(false);
|
||||||
|
|
@ -22,12 +102,11 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
|
||||||
const mainActivityInfoRef = useRef<HTMLDivElement | null>(null);
|
const mainActivityInfoRef = useRef<HTMLDivElement | null>(null);
|
||||||
const org = useOrg() as any;
|
const org = useOrg() as any;
|
||||||
|
|
||||||
// Function to find the current activity's position in the course
|
// Memoize activity position calculation
|
||||||
const findActivityPosition = () => {
|
const { allActivities, currentIndex } = useMemo(() => {
|
||||||
let allActivities: any[] = [];
|
let allActivities: any[] = [];
|
||||||
let currentIndex = -1;
|
let currentIndex = -1;
|
||||||
|
|
||||||
// Flatten all activities from all chapters
|
|
||||||
props.course.chapters.forEach((chapter: any) => {
|
props.course.chapters.forEach((chapter: any) => {
|
||||||
chapter.activities.forEach((activity: any) => {
|
chapter.activities.forEach((activity: any) => {
|
||||||
const cleanActivityUuid = activity.activity_uuid?.replace('activity_', '');
|
const cleanActivityUuid = activity.activity_uuid?.replace('activity_', '');
|
||||||
|
|
@ -37,7 +116,6 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
|
||||||
chapterName: chapter.name
|
chapterName: chapter.name
|
||||||
});
|
});
|
||||||
|
|
||||||
// Check if this is the current activity
|
|
||||||
if (cleanActivityUuid === props.currentActivityId.replace('activity_', '')) {
|
if (cleanActivityUuid === props.currentActivityId.replace('activity_', '')) {
|
||||||
currentIndex = allActivities.length - 1;
|
currentIndex = allActivities.length - 1;
|
||||||
}
|
}
|
||||||
|
|
@ -45,15 +123,11 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
|
||||||
});
|
});
|
||||||
|
|
||||||
return { allActivities, currentIndex };
|
return { allActivities, currentIndex };
|
||||||
};
|
}, [props.course, props.currentActivityId]);
|
||||||
|
|
||||||
const { allActivities, currentIndex } = findActivityPosition();
|
|
||||||
|
|
||||||
// Get previous and next activities
|
|
||||||
const prevActivity = currentIndex > 0 ? allActivities[currentIndex - 1] : null;
|
const prevActivity = currentIndex > 0 ? allActivities[currentIndex - 1] : null;
|
||||||
const nextActivity = currentIndex < allActivities.length - 1 ? allActivities[currentIndex + 1] : null;
|
const nextActivity = currentIndex < allActivities.length - 1 ? allActivities[currentIndex + 1] : null;
|
||||||
|
|
||||||
// Navigate to an activity
|
|
||||||
const navigateToActivity = (activity: any) => {
|
const navigateToActivity = (activity: any) => {
|
||||||
if (!activity) return;
|
if (!activity) return;
|
||||||
|
|
||||||
|
|
@ -61,32 +135,26 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
|
||||||
router.push(getUriWithOrg(props.orgslug, '') + `/course/${cleanCourseUuid}/activity/${activity.cleanUuid}`);
|
router.push(getUriWithOrg(props.orgslug, '') + `/course/${cleanCourseUuid}/activity/${activity.cleanUuid}`);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Handle scroll and intersection observer
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleScroll = () => {
|
const handleScroll = () => {
|
||||||
setIsScrolled(window.scrollY > 0);
|
setIsScrolled(window.scrollY > 0);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Set up intersection observer for the main activity info
|
|
||||||
const observer = new IntersectionObserver(
|
const observer = new IntersectionObserver(
|
||||||
([entry]) => {
|
([entry]) => {
|
||||||
// Show the fixed bar when the main info is not visible
|
|
||||||
setShouldShow(!entry.isIntersecting);
|
setShouldShow(!entry.isIntersecting);
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
threshold: [0, 0.1, 1],
|
threshold: [0, 0.1, 1],
|
||||||
rootMargin: '-80px 0px 0px 0px' // Increased margin to account for the header
|
rootMargin: '-80px 0px 0px 0px'
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
// Start observing the main activity info section with a slight delay to ensure DOM is ready
|
const mainActivityInfo = document.querySelector('.activity-info-section');
|
||||||
setTimeout(() => {
|
if (mainActivityInfo) {
|
||||||
const mainActivityInfo = document.querySelector('.activity-info-section');
|
mainActivityInfoRef.current = mainActivityInfo as HTMLDivElement;
|
||||||
if (mainActivityInfo) {
|
observer.observe(mainActivityInfo);
|
||||||
mainActivityInfoRef.current = mainActivityInfo as HTMLDivElement;
|
}
|
||||||
observer.observe(mainActivityInfo);
|
|
||||||
}
|
|
||||||
}, 100);
|
|
||||||
|
|
||||||
window.addEventListener('scroll', handleScroll);
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
|
||||||
|
|
@ -98,86 +166,29 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
if (!shouldShow) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div
|
||||||
{shouldShow && (
|
className={`fixed top-[60px] left-0 right-0 z-40 bg-white/90 backdrop-blur-xl transition-all duration-300 animate-in fade-in slide-in-from-top ${
|
||||||
<div
|
isScrolled ? 'nice-shadow' : ''
|
||||||
className={`fixed top-[60px] left-0 right-0 z-40 bg-white/90 backdrop-blur-xl transition-all duration-300 animate-in fade-in slide-in-from-top ${
|
}`}
|
||||||
isScrolled ? 'nice-shadow' : ''
|
>
|
||||||
}`}
|
<div className="container mx-auto px-4">
|
||||||
>
|
<div className="flex items-center justify-between h-16 py-2">
|
||||||
<div className="container mx-auto px-4">
|
<CourseInfo course={props.course} org={org} />
|
||||||
<div className="flex items-center justify-between h-16 py-2">
|
|
||||||
{/* Left Section - Course Info and Navigation */}
|
|
||||||
<div className="flex items-center space-x-2 sm:space-x-4 min-w-0 flex-shrink">
|
|
||||||
<img
|
|
||||||
className="w-[35px] sm:w-[45px] h-[20px] sm:h-[26px] rounded-md object-cover flex-shrink-0"
|
|
||||||
src={`${getCourseThumbnailMediaDirectory(
|
|
||||||
org?.org_uuid,
|
|
||||||
props.course.course_uuid,
|
|
||||||
props.course.thumbnail_image
|
|
||||||
)}`}
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<ActivityChapterDropdown
|
|
||||||
course={props.course}
|
|
||||||
currentActivityId={props.currentActivityId}
|
|
||||||
orgslug={props.orgslug}
|
|
||||||
/>
|
|
||||||
<div className="flex flex-col -space-y-0.5 min-w-0 hidden sm:block">
|
|
||||||
<p className="text-sm font-medium text-gray-500">Course</p>
|
|
||||||
<h1 className="font-semibold text-gray-900 text-base truncate">
|
|
||||||
{props.course.name}
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Right Section - Navigation Controls */}
|
<div className="flex items-center flex-shrink-0">
|
||||||
<div className="flex items-center flex-shrink-0">
|
<NavigationButtons
|
||||||
<div className="flex items-center space-x-2 sm:space-x-3">
|
prevActivity={prevActivity}
|
||||||
<button
|
nextActivity={nextActivity}
|
||||||
onClick={() => navigateToActivity(prevActivity)}
|
currentIndex={currentIndex}
|
||||||
className={`flex items-center space-x-1 sm:space-x-2 py-1.5 px-1.5 sm:px-2 rounded-md transition-all duration-200 ${
|
allActivities={allActivities}
|
||||||
prevActivity
|
navigateToActivity={navigateToActivity}
|
||||||
? 'text-gray-700 hover:bg-gray-100'
|
/>
|
||||||
: 'text-gray-300 cursor-not-allowed'
|
|
||||||
}`}
|
|
||||||
disabled={!prevActivity}
|
|
||||||
title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'}
|
|
||||||
>
|
|
||||||
<ChevronLeft size={16} className="shrink-0 sm:w-5 sm:h-5" />
|
|
||||||
<div className="flex flex-col items-start hidden sm:flex">
|
|
||||||
<span className="text-xs text-gray-500">Previous</span>
|
|
||||||
<span className="text-sm font-medium text-left truncate max-w-[100px] sm:max-w-[150px]">
|
|
||||||
{prevActivity ? prevActivity.name : 'No previous activity'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<span className="text-sm font-medium text-gray-500 px-1 sm:px-2">
|
|
||||||
{currentIndex + 1} of {allActivities.length}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={() => navigateToActivity(nextActivity)}
|
|
||||||
className={`flex items-center space-x-1 sm:space-x-2 py-1.5 px-1.5 sm:px-2 rounded-md transition-all duration-200`}
|
|
||||||
disabled={!nextActivity}
|
|
||||||
title={nextActivity ? `Next: ${nextActivity.name}` : 'No next activity'}
|
|
||||||
>
|
|
||||||
<div className="flex flex-col items-end hidden sm:flex">
|
|
||||||
<span className={`text-xs ${nextActivity ? 'text-gray-500' : 'text-gray-500'}`}>Next</span>
|
|
||||||
<span className="text-sm font-medium text-right truncate max-w-[100px] sm:max-w-[150px]">
|
|
||||||
{nextActivity ? nextActivity.name : 'No next activity'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<ChevronRight size={16} className="shrink-0 sm:w-5 sm:h-5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -1,16 +1,99 @@
|
||||||
|
'use client'
|
||||||
|
import { BookOpenCheck, Check, FileText, Layers, Video } from 'lucide-react'
|
||||||
|
import React, { useMemo, memo } from 'react'
|
||||||
import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
|
import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
|
||||||
import { getUriWithOrg } from '@services/config/config'
|
import { getUriWithOrg } from '@services/config/config'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import React from 'react'
|
|
||||||
import { Video, FileText, Layers, BookOpenCheck, Check } from 'lucide-react'
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
course: any
|
course: any
|
||||||
orgslug: string
|
orgslug: string
|
||||||
course_uuid: string
|
course_uuid: string
|
||||||
current_activity?: any
|
current_activity?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Helper functions
|
||||||
|
function getActivityTypeLabel(activityType: string): string {
|
||||||
|
switch (activityType) {
|
||||||
|
case 'TYPE_VIDEO':
|
||||||
|
return 'Video'
|
||||||
|
case 'TYPE_DOCUMENT':
|
||||||
|
return 'Document'
|
||||||
|
case 'TYPE_DYNAMIC':
|
||||||
|
return 'Interactive'
|
||||||
|
case 'TYPE_ASSIGNMENT':
|
||||||
|
return 'Assignment'
|
||||||
|
default:
|
||||||
|
return 'Unknown'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getActivityTypeBadgeColor(activityType: string): string {
|
||||||
|
switch (activityType) {
|
||||||
|
case 'TYPE_VIDEO':
|
||||||
|
return 'bg-blue-100 text-blue-700'
|
||||||
|
case 'TYPE_DOCUMENT':
|
||||||
|
return 'bg-purple-100 text-purple-700'
|
||||||
|
case 'TYPE_DYNAMIC':
|
||||||
|
return 'bg-green-100 text-green-700'
|
||||||
|
case 'TYPE_ASSIGNMENT':
|
||||||
|
return 'bg-orange-100 text-orange-700'
|
||||||
|
default:
|
||||||
|
return 'bg-gray-100 text-gray-700'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Memoized activity type icon component
|
||||||
|
const ActivityTypeIcon = memo(({ activityType }: { activityType: string }) => {
|
||||||
|
switch (activityType) {
|
||||||
|
case 'TYPE_VIDEO':
|
||||||
|
return <Video size={16} className="text-gray-400" />
|
||||||
|
case 'TYPE_DOCUMENT':
|
||||||
|
return <FileText size={16} className="text-gray-400" />
|
||||||
|
case 'TYPE_DYNAMIC':
|
||||||
|
return <Layers size={16} className="text-gray-400" />
|
||||||
|
case 'TYPE_ASSIGNMENT':
|
||||||
|
return <BookOpenCheck size={16} className="text-gray-400" />
|
||||||
|
default:
|
||||||
|
return <FileText size={16} className="text-gray-400" />
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
ActivityTypeIcon.displayName = 'ActivityTypeIcon';
|
||||||
|
|
||||||
|
// Memoized activity tooltip content
|
||||||
|
const ActivityTooltipContent = memo(({
|
||||||
|
activity,
|
||||||
|
isDone,
|
||||||
|
isCurrent
|
||||||
|
}: {
|
||||||
|
activity: any,
|
||||||
|
isDone: boolean,
|
||||||
|
isCurrent: boolean
|
||||||
|
}) => (
|
||||||
|
<div className="bg-white rounded-lg nice-shadow py-3 px-4 min-w-[200px] animate-in fade-in duration-200">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<ActivityTypeIcon activityType={activity.activity_type} />
|
||||||
|
<span className="text-sm text-gray-700">{activity.name}</span>
|
||||||
|
{isDone && (
|
||||||
|
<span className="ml-auto text-gray-400">
|
||||||
|
<Check size={14} />
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 mt-2">
|
||||||
|
<span className={`text-xs px-2 py-0.5 rounded-full ${getActivityTypeBadgeColor(activity.activity_type)}`}>
|
||||||
|
{getActivityTypeLabel(activity.activity_type)}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-gray-400">
|
||||||
|
{isCurrent ? 'Current Activity' : isDone ? 'Completed' : 'Not Started'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
));
|
||||||
|
|
||||||
|
ActivityTooltipContent.displayName = 'ActivityTooltipContent';
|
||||||
|
|
||||||
function ActivityIndicators(props: Props) {
|
function ActivityIndicators(props: Props) {
|
||||||
const course = props.course
|
const course = props.course
|
||||||
const orgslug = props.orgslug
|
const orgslug = props.orgslug
|
||||||
|
|
@ -22,26 +105,26 @@ function ActivityIndicators(props: Props) {
|
||||||
|
|
||||||
const trail = props.course.trail
|
const trail = props.course.trail
|
||||||
|
|
||||||
function isActivityDone(activity: any) {
|
// Memoize activity status checks
|
||||||
|
const isActivityDone = useMemo(() => (activity: any) => {
|
||||||
let run = props.course.trail?.runs.find(
|
let run = props.course.trail?.runs.find(
|
||||||
(run: any) => run.course_id == props.course.id
|
(run: any) => run.course_id == props.course.id
|
||||||
)
|
)
|
||||||
if (run) {
|
if (run) {
|
||||||
return run.steps.find((step: any) => step.activity_id == activity.id)
|
return run.steps.find((step: any) => step.activity_id == activity.id)
|
||||||
} else {
|
|
||||||
return false
|
|
||||||
}
|
}
|
||||||
}
|
return false
|
||||||
|
}, [props.course]);
|
||||||
|
|
||||||
function isActivityCurrent(activity: any) {
|
const isActivityCurrent = useMemo(() => (activity: any) => {
|
||||||
let activity_uuid = activity.activity_uuid.replace('activity_', '')
|
let activity_uuid = activity.activity_uuid.replace('activity_', '')
|
||||||
if (props.current_activity && props.current_activity == activity_uuid) {
|
if (props.current_activity && props.current_activity == activity_uuid) {
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
return false
|
return false
|
||||||
}
|
}, [props.current_activity]);
|
||||||
|
|
||||||
function getActivityClass(activity: any) {
|
const getActivityClass = useMemo(() => (activity: any) => {
|
||||||
if (isActivityDone(activity)) {
|
if (isActivityDone(activity)) {
|
||||||
return done_activity_style
|
return done_activity_style
|
||||||
}
|
}
|
||||||
|
|
@ -49,52 +132,7 @@ function ActivityIndicators(props: Props) {
|
||||||
return current_activity_style
|
return current_activity_style
|
||||||
}
|
}
|
||||||
return black_activity_style
|
return black_activity_style
|
||||||
}
|
}, [isActivityDone, isActivityCurrent]);
|
||||||
|
|
||||||
const getActivityTypeIcon = (activityType: string) => {
|
|
||||||
switch (activityType) {
|
|
||||||
case 'TYPE_VIDEO':
|
|
||||||
return <Video size={16} className="text-gray-400" />
|
|
||||||
case 'TYPE_DOCUMENT':
|
|
||||||
return <FileText size={16} className="text-gray-400" />
|
|
||||||
case 'TYPE_DYNAMIC':
|
|
||||||
return <Layers size={16} className="text-gray-400" />
|
|
||||||
case 'TYPE_ASSIGNMENT':
|
|
||||||
return <BookOpenCheck size={16} className="text-gray-400" />
|
|
||||||
default:
|
|
||||||
return <FileText size={16} className="text-gray-400" />
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const getActivityTypeLabel = (activityType: string) => {
|
|
||||||
switch (activityType) {
|
|
||||||
case 'TYPE_VIDEO':
|
|
||||||
return 'Video'
|
|
||||||
case 'TYPE_DOCUMENT':
|
|
||||||
return 'Document'
|
|
||||||
case 'TYPE_DYNAMIC':
|
|
||||||
return 'Page'
|
|
||||||
case 'TYPE_ASSIGNMENT':
|
|
||||||
return 'Assignment'
|
|
||||||
default:
|
|
||||||
return 'Learning Material'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const getActivityTypeBadgeColor = (activityType: string) => {
|
|
||||||
switch (activityType) {
|
|
||||||
case 'TYPE_VIDEO':
|
|
||||||
return 'bg-gray-100 text-gray-700 font-bold'
|
|
||||||
case 'TYPE_DOCUMENT':
|
|
||||||
return 'bg-gray-100 text-gray-700 font-bold'
|
|
||||||
case 'TYPE_DYNAMIC':
|
|
||||||
return 'bg-gray-100 text-gray-700 font-bold'
|
|
||||||
case 'TYPE_ASSIGNMENT':
|
|
||||||
return 'bg-gray-100 text-gray-700 font-bold'
|
|
||||||
default:
|
|
||||||
return 'bg-gray-100 text-gray-700 font-bold'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="grid grid-flow-col justify-stretch space-x-6">
|
<div className="grid grid-flow-col justify-stretch space-x-6">
|
||||||
|
|
@ -110,25 +148,11 @@ function ActivityIndicators(props: Props) {
|
||||||
sideOffset={8}
|
sideOffset={8}
|
||||||
unstyled
|
unstyled
|
||||||
content={
|
content={
|
||||||
<div className="bg-white rounded-lg nice-shadow py-3 px-4 min-w-[200px] animate-in fade-in duration-200">
|
<ActivityTooltipContent
|
||||||
<div className="flex items-center gap-2">
|
activity={activity}
|
||||||
{getActivityTypeIcon(activity.activity_type)}
|
isDone={isDone}
|
||||||
<span className="text-sm text-gray-700">{activity.name}</span>
|
isCurrent={isCurrent}
|
||||||
{isDone && (
|
/>
|
||||||
<span className="ml-auto text-gray-400">
|
|
||||||
<Check size={14} />
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 mt-2">
|
|
||||||
<span className={`text-xs px-2 py-0.5 rounded-full ${getActivityTypeBadgeColor(activity.activity_type)}`}>
|
|
||||||
{getActivityTypeLabel(activity.activity_type)}
|
|
||||||
</span>
|
|
||||||
<span className="text-xs text-gray-400">
|
|
||||||
{isCurrent ? 'Current Activity' : isDone ? 'Completed' : 'Not Started'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
key={activity.activity_uuid}
|
key={activity.activity_uuid}
|
||||||
>
|
>
|
||||||
|
|
@ -143,9 +167,7 @@ function ActivityIndicators(props: Props) {
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={`h-[7px] w-auto ${getActivityClass(
|
className={`h-[7px] w-auto ${getActivityClass(activity)} rounded-lg`}
|
||||||
activity
|
|
||||||
)} rounded-lg`}
|
|
||||||
></div>
|
></div>
|
||||||
</Link>
|
</Link>
|
||||||
</ToolTip>
|
</ToolTip>
|
||||||
|
|
@ -159,4 +181,4 @@ function ActivityIndicators(props: Props) {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ActivityIndicators
|
export default memo(ActivityIndicators)
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue