mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: better activity sticky topbar
This commit is contained in:
swve
parent
46e06201fb
commit
3d489c599e
4 changed files with 725 additions and 479 deletions
|
|
@ -29,6 +29,9 @@ import { useMediaQuery } from 'usehooks-ts'
|
||||||
import PaidCourseActivityDisclaimer from '@components/Objects/Courses/CourseActions/PaidCourseActivityDisclaimer'
|
import PaidCourseActivityDisclaimer from '@components/Objects/Courses/CourseActions/PaidCourseActivityDisclaimer'
|
||||||
import { useContributorStatus } from '../../../../../../../../hooks/useContributorStatus'
|
import { useContributorStatus } from '../../../../../../../../hooks/useContributorStatus'
|
||||||
import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
|
import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
|
||||||
|
import ActivityNavigation from '@components/Dashboard/Pages/Activity/ActivityNavigation'
|
||||||
|
import ActivityChapterDropdown from '@components/Dashboard/Pages/Activity/ActivityChapterDropdown'
|
||||||
|
import FixedActivitySecondaryBar from '@components/Dashboard/Pages/Activity/FixedActivitySecondaryBar'
|
||||||
|
|
||||||
interface ActivityClientProps {
|
interface ActivityClientProps {
|
||||||
activityid: string
|
activityid: string
|
||||||
|
|
@ -92,158 +95,167 @@ function ActivityClient(props: ActivityClientProps) {
|
||||||
<CourseProvider courseuuid={course?.course_uuid}>
|
<CourseProvider courseuuid={course?.course_uuid}>
|
||||||
<AIChatBotProvider>
|
<AIChatBotProvider>
|
||||||
<GeneralWrapperStyled>
|
<GeneralWrapperStyled>
|
||||||
<div className="space-y-4 pt-4">
|
<div className="space-y-4 pt-0">
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<ActivityIndicators
|
|
||||||
course_uuid={courseuuid}
|
|
||||||
current_activity={activityid}
|
|
||||||
orgslug={orgslug}
|
|
||||||
course={course}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<ActivityChapterDropdown
|
|
||||||
course={course}
|
|
||||||
currentActivityId={activity.activity_uuid ? activity.activity_uuid.replace('activity_', '') : activityid.replace('activity_', '')}
|
|
||||||
orgslug={orgslug}
|
|
||||||
/>
|
|
||||||
<div className="flex flex-col -space-y-1">
|
|
||||||
<p className="font-bold text-gray-700 text-md">
|
|
||||||
Chapter : {getChapterNameByActivityId(course, activity.id)}
|
|
||||||
</p>
|
|
||||||
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase">
|
|
||||||
{activity.name}
|
|
||||||
</h1>
|
|
||||||
</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' &&
|
|
||||||
<>
|
|
||||||
<AIActivityAsk activity={activity} />
|
|
||||||
{contributorStatus === 'ACTIVE' && activity.activity_type == 'TYPE_DYNAMIC' && (
|
|
||||||
<Link
|
|
||||||
href={getUriWithOrg(orgslug, '') + `/course/${courseuuid}/activity/${activityid}/edit`}
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<Edit2 size={17} />
|
|
||||||
<span className="text-xs font-bold">Contribute to Activity</span>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
<MoreVertical size={17} className="text-gray-300" />
|
|
||||||
<MarkStatus
|
|
||||||
activity={activity}
|
|
||||||
activityid={activityid}
|
|
||||||
course={course}
|
|
||||||
orgslug={orgslug}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
{activity.activity_type == 'TYPE_ASSIGNMENT' &&
|
|
||||||
<>
|
|
||||||
<MoreVertical size={17} className="text-gray-300 " />
|
|
||||||
<AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
|
|
||||||
<AssignmentTools
|
|
||||||
assignment={assignment}
|
|
||||||
activity={activity}
|
|
||||||
activityid={activityid}
|
|
||||||
course={course}
|
|
||||||
orgslug={orgslug}
|
|
||||||
/>
|
|
||||||
</AssignmentSubmissionProvider>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
</AuthenticatedClientElement>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{activity && activity.published == false && (
|
|
||||||
<div className="p-7 drop-shadow-xs rounded-lg bg-gray-800">
|
|
||||||
<div className="text-white">
|
|
||||||
<h1 className="font-bold text-2xl">
|
|
||||||
This activity is not published yet
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activity && activity.published == true && (
|
<div className="pt-2">
|
||||||
<>
|
<div className="space-y-4 pb-4 activity-info-section">
|
||||||
{activity.content.paid_access == false ? (
|
<div className="flex justify-between items-center">
|
||||||
<PaidCourseActivityDisclaimer course={course} />
|
<div className="flex space-x-6">
|
||||||
) : (
|
<div className="flex">
|
||||||
<div className={`p-7 drop-shadow-xs rounded-lg ${bgColor}`}>
|
<Link
|
||||||
{/* Activity Types */}
|
href={getUriWithOrg(orgslug, '') + `/course/${courseuuid}`}
|
||||||
<div>
|
>
|
||||||
{activity.activity_type == 'TYPE_DYNAMIC' && (
|
<img
|
||||||
<Canva content={activity.content} activity={activity} />
|
className="w-[100px] h-[57px] rounded-md drop-shadow-md"
|
||||||
)}
|
src={`${getCourseThumbnailMediaDirectory(
|
||||||
{activity.activity_type == 'TYPE_VIDEO' && (
|
org?.org_uuid,
|
||||||
<VideoActivity course={course} activity={activity} />
|
course.course_uuid,
|
||||||
)}
|
course.thumbnail_image
|
||||||
{activity.activity_type == 'TYPE_DOCUMENT' && (
|
)}`}
|
||||||
<DocumentPdfActivity
|
alt=""
|
||||||
course={course}
|
|
||||||
activity={activity}
|
|
||||||
/>
|
/>
|
||||||
)}
|
</Link>
|
||||||
{activity.activity_type == 'TYPE_ASSIGNMENT' && (
|
</div>
|
||||||
<div>
|
<div className="flex flex-col -space-y-1">
|
||||||
{assignment ? (
|
<p className="font-bold text-gray-700 text-md">Course </p>
|
||||||
<AssignmentProvider assignment_uuid={assignment?.assignment_uuid}>
|
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase">
|
||||||
<AssignmentsTaskProvider>
|
{course.name}
|
||||||
<AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
|
</h1>
|
||||||
<AssignmentStudentActivity />
|
|
||||||
</AssignmentSubmissionProvider>
|
|
||||||
</AssignmentsTaskProvider>
|
|
||||||
</AssignmentProvider>
|
|
||||||
) : (
|
|
||||||
<div></div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Activity Navigation */}
|
<ActivityIndicators
|
||||||
{activity && activity.published == true && activity.content.paid_access != false && (
|
course_uuid={courseuuid}
|
||||||
<ActivityNavigation
|
current_activity={activityid}
|
||||||
course={course}
|
orgslug={orgslug}
|
||||||
currentActivityId={activity.activity_uuid ? activity.activity_uuid.replace('activity_', '') : activityid.replace('activity_', '')}
|
course={course}
|
||||||
orgslug={orgslug}
|
/>
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{<div style={{ height: '100px' }}></div>}
|
<div className="flex justify-between items-center">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<ActivityChapterDropdown
|
||||||
|
course={course}
|
||||||
|
currentActivityId={activity.activity_uuid ? activity.activity_uuid.replace('activity_', '') : activityid.replace('activity_', '')}
|
||||||
|
orgslug={orgslug}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-col -space-y-1">
|
||||||
|
<p className="font-bold text-gray-700 text-md">
|
||||||
|
Chapter : {getChapterNameByActivityId(course, activity.id)}
|
||||||
|
</p>
|
||||||
|
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase">
|
||||||
|
{activity.name}
|
||||||
|
</h1>
|
||||||
|
</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' && (
|
||||||
|
<>
|
||||||
|
<AIActivityAsk activity={activity} />
|
||||||
|
{contributorStatus === 'ACTIVE' && activity.activity_type == 'TYPE_DYNAMIC' && (
|
||||||
|
<Link
|
||||||
|
href={getUriWithOrg(orgslug, '') + `/course/${courseuuid}/activity/${activityid}/edit`}
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<Edit2 size={17} />
|
||||||
|
<span className="text-xs font-bold">Contribute to Activity</span>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
<MoreVertical size={17} className="text-gray-300" />
|
||||||
|
<MarkStatus
|
||||||
|
activity={activity}
|
||||||
|
activityid={activityid}
|
||||||
|
course={course}
|
||||||
|
orgslug={orgslug}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{activity.activity_type == 'TYPE_ASSIGNMENT' && (
|
||||||
|
<>
|
||||||
|
<MoreVertical size={17} className="text-gray-300 " />
|
||||||
|
<AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
|
||||||
|
<AssignmentTools
|
||||||
|
assignment={assignment}
|
||||||
|
activity={activity}
|
||||||
|
activityid={activityid}
|
||||||
|
course={course}
|
||||||
|
orgslug={orgslug}
|
||||||
|
/>
|
||||||
|
</AssignmentSubmissionProvider>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</AuthenticatedClientElement>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{activity && activity.published == false && (
|
||||||
|
<div className="p-7 drop-shadow-xs rounded-lg bg-gray-800">
|
||||||
|
<div className="text-white">
|
||||||
|
<h1 className="font-bold text-2xl">
|
||||||
|
This activity is not published yet
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activity && activity.published == true && (
|
||||||
|
<>
|
||||||
|
{activity.content.paid_access == false ? (
|
||||||
|
<PaidCourseActivityDisclaimer course={course} />
|
||||||
|
) : (
|
||||||
|
<div className={`p-7 drop-shadow-xs rounded-lg ${bgColor}`}>
|
||||||
|
{/* 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>
|
||||||
|
</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>
|
||||||
</GeneralWrapperStyled>
|
</GeneralWrapperStyled>
|
||||||
</AIChatBotProvider>
|
</AIChatBotProvider>
|
||||||
|
|
@ -485,335 +497,4 @@ function AssignmentTools(props: {
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
function ActivityChapterDropdown(props: {
|
|
||||||
course: any
|
|
||||||
currentActivityId: string
|
|
||||||
orgslug: string
|
|
||||||
}): React.ReactNode {
|
|
||||||
const [isOpen, setIsOpen] = React.useState(false);
|
|
||||||
const dropdownRef = React.useRef<HTMLDivElement>(null);
|
|
||||||
const isMobile = useMediaQuery('(max-width: 768px)');
|
|
||||||
|
|
||||||
// Close dropdown when clicking outside
|
|
||||||
React.useEffect(() => {
|
|
||||||
function handleClickOutside(event: MouseEvent) {
|
|
||||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
|
||||||
setIsOpen(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
document.addEventListener('mousedown', handleClickOutside);
|
|
||||||
return () => {
|
|
||||||
document.removeEventListener('mousedown', handleClickOutside);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const toggleDropdown = () => {
|
|
||||||
setIsOpen(!isOpen);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Function to get the appropriate icon for activity type
|
|
||||||
const getActivityTypeIcon = (activityType: string) => {
|
|
||||||
switch (activityType) {
|
|
||||||
case 'TYPE_VIDEO':
|
|
||||||
return <Video size={16} />;
|
|
||||||
case 'TYPE_DOCUMENT':
|
|
||||||
return <FileText size={16} />;
|
|
||||||
case 'TYPE_DYNAMIC':
|
|
||||||
return <Layers size={16} />;
|
|
||||||
case 'TYPE_ASSIGNMENT':
|
|
||||||
return <BookOpenCheck size={16} />;
|
|
||||||
default:
|
|
||||||
return <FileText size={16} />;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Function to get the appropriate badge color for activity type
|
|
||||||
const getActivityTypeBadgeColor = (activityType: string) => {
|
|
||||||
return 'bg-gray-100 text-gray-600';
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative" ref={dropdownRef}>
|
|
||||||
<button
|
|
||||||
onClick={toggleDropdown}
|
|
||||||
className="flex items-center justify-center bg-white nice-shadow p-2.5 rounded-full cursor-pointer"
|
|
||||||
aria-label="View all activities"
|
|
||||||
title="View all activities"
|
|
||||||
>
|
|
||||||
<ListTree size={18} className="text-gray-700" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{isOpen && (
|
|
||||||
<div className={`absolute z-50 mt-2 ${isMobile ? 'left-0 w-[90vw] sm:w-80' : 'left-0 w-80'} max-h-[70vh] cursor-pointer overflow-y-auto bg-white rounded-lg shadow-xl border border-gray-200 py-2 animate-in fade-in duration-200`}>
|
|
||||||
<div className="px-4 py-2 border-b border-gray-100 flex justify-between items-center">
|
|
||||||
<h3 className="font-bold text-gray-800">Course Content</h3>
|
|
||||||
<button
|
|
||||||
onClick={() => setIsOpen(false)}
|
|
||||||
className="text-gray-500 hover:text-gray-700 p-1 rounded-full hover:bg-gray-100 cursor-pointer"
|
|
||||||
>
|
|
||||||
<X size={18} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="py-1">
|
|
||||||
{props.course.chapters.map((chapter: any) => (
|
|
||||||
<div key={chapter.id} className="mb-2">
|
|
||||||
<div className="px-4 py-2 font-medium text-gray-600 bg-gray-50 border-y border-gray-100 flex items-center">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Folder size={16} className="text-gray-400" />
|
|
||||||
<span>{chapter.name}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="py-1">
|
|
||||||
{chapter.activities.map((activity: any) => {
|
|
||||||
// Remove any prefixes from UUIDs
|
|
||||||
const cleanActivityUuid = activity.activity_uuid?.replace('activity_', '');
|
|
||||||
const cleanCourseUuid = props.course.course_uuid?.replace('course_', '');
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
key={activity.id}
|
|
||||||
href={getUriWithOrg(props.orgslug, '') + `/course/${cleanCourseUuid}/activity/${cleanActivityUuid}`}
|
|
||||||
prefetch={false}
|
|
||||||
onClick={() => setIsOpen(false)}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={`px-4 py-2.5 hover:bg-gray-100 transition-colors flex items-center ${
|
|
||||||
cleanActivityUuid === props.currentActivityId.replace('activity_', '') ? 'bg-gray-50 border-l-2 border-gray-300 pl-3 font-medium' : ''
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="flex-1 flex items-center gap-2">
|
|
||||||
<span className="text-gray-400">
|
|
||||||
{getActivityTypeIcon(activity.activity_type)}
|
|
||||||
</span>
|
|
||||||
<div className="text-sm">
|
|
||||||
{activity.name}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{props.course.trail?.runs?.find(
|
|
||||||
(run: any) => run.course_id === props.course.id
|
|
||||||
)?.steps?.find(
|
|
||||||
(step: any) => (step.activity_id === activity.id || step.activity_id === activity.activity_uuid) && step.complete === true
|
|
||||||
) && (
|
|
||||||
<span className="ml-2 text-gray-400 shrink-0">
|
|
||||||
<Check size={14} />
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function ActivityNavigation(props: {
|
|
||||||
course: any
|
|
||||||
currentActivityId: string
|
|
||||||
orgslug: string
|
|
||||||
}): React.ReactNode {
|
|
||||||
const router = useRouter();
|
|
||||||
const isMobile = useMediaQuery('(max-width: 768px)');
|
|
||||||
const [isBottomNavVisible, setIsBottomNavVisible] = React.useState(true);
|
|
||||||
const bottomNavRef = React.useRef<HTMLDivElement>(null);
|
|
||||||
const [navWidth, setNavWidth] = React.useState<number | null>(null);
|
|
||||||
|
|
||||||
// Function to find the current activity's position in the course
|
|
||||||
const findActivityPosition = () => {
|
|
||||||
let allActivities: any[] = [];
|
|
||||||
let currentIndex = -1;
|
|
||||||
|
|
||||||
// Flatten all activities from all chapters
|
|
||||||
props.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 === props.currentActivityId.replace('activity_', '')) {
|
|
||||||
currentIndex = allActivities.length - 1;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
return { allActivities, currentIndex };
|
|
||||||
};
|
|
||||||
|
|
||||||
const { allActivities, currentIndex } = findActivityPosition();
|
|
||||||
|
|
||||||
// Get previous and next activities
|
|
||||||
const prevActivity = currentIndex > 0 ? allActivities[currentIndex - 1] : null;
|
|
||||||
const nextActivity = currentIndex < allActivities.length - 1 ? allActivities[currentIndex + 1] : null;
|
|
||||||
|
|
||||||
// Navigate to an activity
|
|
||||||
const navigateToActivity = (activity: any) => {
|
|
||||||
if (!activity) return;
|
|
||||||
|
|
||||||
const cleanCourseUuid = props.course.course_uuid?.replace('course_', '');
|
|
||||||
router.push(getUriWithOrg(props.orgslug, '') + `/course/${cleanCourseUuid}/activity/${activity.cleanUuid}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Set up intersection observer to detect when bottom nav is out of viewport
|
|
||||||
// and measure the width of the bottom navigation
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (!bottomNavRef.current) return;
|
|
||||||
|
|
||||||
// Update width when component mounts and on window resize
|
|
||||||
const updateWidth = () => {
|
|
||||||
if (bottomNavRef.current) {
|
|
||||||
setNavWidth(bottomNavRef.current.offsetWidth);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Initial width measurement
|
|
||||||
updateWidth();
|
|
||||||
|
|
||||||
// Set up resize listener
|
|
||||||
window.addEventListener('resize', updateWidth);
|
|
||||||
|
|
||||||
const observer = new IntersectionObserver(
|
|
||||||
([entry]) => {
|
|
||||||
setIsBottomNavVisible(entry.isIntersecting);
|
|
||||||
},
|
|
||||||
{ threshold: 0.1 }
|
|
||||||
);
|
|
||||||
|
|
||||||
observer.observe(bottomNavRef.current);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener('resize', updateWidth);
|
|
||||||
if (bottomNavRef.current) {
|
|
||||||
observer.unobserve(bottomNavRef.current);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Navigation buttons component - reused for both top and bottom
|
|
||||||
const NavigationButtons = ({ isFloating = false }) => (
|
|
||||||
<div className={`${isFloating ? 'flex justify-between' : 'grid grid-cols-3'} items-center w-full`}>
|
|
||||||
{isFloating ? (
|
|
||||||
// Floating navigation - original flex layout
|
|
||||||
<>
|
|
||||||
<button
|
|
||||||
onClick={() => navigateToActivity(prevActivity)}
|
|
||||||
className={`flex items-center space-x-1.5 p-2 rounded-md transition-all duration-200 cursor-pointer ${
|
|
||||||
prevActivity
|
|
||||||
? 'text-gray-700'
|
|
||||||
: 'opacity-50 text-gray-400 cursor-not-allowed'
|
|
||||||
}`}
|
|
||||||
disabled={!prevActivity}
|
|
||||||
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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
// Regular navigation - grid layout with centered counter
|
|
||||||
<>
|
|
||||||
<div className="justify-self-start">
|
|
||||||
<button
|
|
||||||
onClick={() => navigateToActivity(prevActivity)}
|
|
||||||
className={`flex items-center space-x-1.5 px-3.5 py-2 rounded-md transition-all duration-200 cursor-pointer ${
|
|
||||||
prevActivity
|
|
||||||
? 'bg-white nice-shadow text-gray-700'
|
|
||||||
: 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
|
||||||
}`}
|
|
||||||
disabled={!prevActivity}
|
|
||||||
title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'}
|
|
||||||
>
|
|
||||||
<ChevronLeft size={16} className="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="text-sm text-gray-500 justify-self-center">
|
|
||||||
{currentIndex + 1} of {allActivities.length}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="justify-self-end">
|
|
||||||
<button
|
|
||||||
onClick={() => navigateToActivity(nextActivity)}
|
|
||||||
className={`flex items-center space-x-1.5 px-3.5 py-2 rounded-md transition-all duration-200 cursor-pointer ${
|
|
||||||
nextActivity
|
|
||||||
? 'bg-white nice-shadow text-gray-700'
|
|
||||||
: 'bg-gray-100 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={16} className="shrink-0" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{/* Bottom navigation (in-place) */}
|
|
||||||
<div ref={bottomNavRef} className="mt-6 mb-2 w-full">
|
|
||||||
<NavigationButtons isFloating={false} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Floating bottom navigation - shown when bottom nav is not visible */}
|
|
||||||
{!isBottomNavVisible && (
|
|
||||||
<div className="fixed bottom-8 left-1/2 transform -translate-x-1/2 z-50 w-[85%] sm:w-auto sm:min-w-[350px] max-w-lg transition-all duration-300 ease-in-out">
|
|
||||||
<div
|
|
||||||
className="bg-white/90 backdrop-blur-xl rounded-full py-1.5 px-2.5 shadow-xs animate-in fade-in slide-in-from-bottom duration-300"
|
|
||||||
>
|
|
||||||
<NavigationButtons isFloating={true} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ActivityClient
|
export default ActivityClient
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,167 @@
|
||||||
|
'use client'
|
||||||
|
import { useMediaQuery } from 'usehooks-ts'
|
||||||
|
import { BookOpenCheck, Check, FileText, Folder, Layers, ListTree, Video, X, StickyNote, Backpack, ArrowRight } from 'lucide-react'
|
||||||
|
import { getUriWithOrg } from '@services/config/config'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
interface ActivityChapterDropdownProps {
|
||||||
|
course: any
|
||||||
|
currentActivityId: string
|
||||||
|
orgslug: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ActivityChapterDropdown(props: ActivityChapterDropdownProps): React.ReactNode {
|
||||||
|
const [isOpen, setIsOpen] = React.useState(false);
|
||||||
|
const dropdownRef = React.useRef<HTMLDivElement>(null);
|
||||||
|
const isMobile = useMediaQuery('(max-width: 768px)');
|
||||||
|
|
||||||
|
// Close dropdown when clicking outside
|
||||||
|
React.useEffect(() => {
|
||||||
|
function handleClickOutside(event: MouseEvent) {
|
||||||
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||||
|
setIsOpen(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.addEventListener('mousedown', handleClickOutside);
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('mousedown', handleClickOutside);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const toggleDropdown = () => {
|
||||||
|
setIsOpen(!isOpen);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function to get the appropriate icon for activity type
|
||||||
|
const getActivityTypeIcon = (activityType: string) => {
|
||||||
|
switch (activityType) {
|
||||||
|
case 'TYPE_VIDEO':
|
||||||
|
return <Video size={10} />;
|
||||||
|
case 'TYPE_DOCUMENT':
|
||||||
|
return <FileText size={10} />;
|
||||||
|
case 'TYPE_DYNAMIC':
|
||||||
|
return <StickyNote size={10} />;
|
||||||
|
case 'TYPE_ASSIGNMENT':
|
||||||
|
return <Backpack size={10} />;
|
||||||
|
default:
|
||||||
|
return <FileText size={10} />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative" ref={dropdownRef}>
|
||||||
|
<button
|
||||||
|
onClick={toggleDropdown}
|
||||||
|
className="flex items-center justify-center bg-white nice-shadow p-2 rounded-full cursor-pointer"
|
||||||
|
aria-label="View all activities"
|
||||||
|
title="View all activities"
|
||||||
|
>
|
||||||
|
<ListTree size={16} className="text-gray-700" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{isOpen && (
|
||||||
|
<div className={`absolute z-50 mt-2 ${isMobile ? 'left-0 w-[90vw] sm:w-72' : 'left-0 w-72'} max-h-[70vh] cursor-pointer overflow-y-auto bg-white rounded-lg shadow-xl border border-gray-200 py-1 animate-in fade-in duration-200`}>
|
||||||
|
<div className="px-3 py-1.5 border-b border-gray-100 flex justify-between items-center">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-800">Course Content</h3>
|
||||||
|
<button
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
className="text-gray-500 hover:text-gray-700 p-1 rounded-full hover:bg-gray-100 cursor-pointer"
|
||||||
|
>
|
||||||
|
<X size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="py-0.5">
|
||||||
|
{props.course.chapters.map((chapter: any) => (
|
||||||
|
<div key={chapter.id} className="mb-1">
|
||||||
|
<div className="px-3 py-1.5 text-sm font-medium text-gray-600 bg-gray-50 border-y border-gray-100 flex items-center">
|
||||||
|
<div className="flex items-center space-x-1.5">
|
||||||
|
<Folder size={14} className="text-gray-400" />
|
||||||
|
<span>{chapter.name}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="py-0.5">
|
||||||
|
{chapter.activities.map((activity: any) => {
|
||||||
|
const cleanActivityUuid = activity.activity_uuid?.replace('activity_', '');
|
||||||
|
const cleanCourseUuid = props.course.course_uuid?.replace('course_', '');
|
||||||
|
const isCurrent = cleanActivityUuid === props.currentActivityId.replace('activity_', '');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={activity.id}
|
||||||
|
href={getUriWithOrg(props.orgslug, '') + `/course/${cleanCourseUuid}/activity/${cleanActivityUuid}`}
|
||||||
|
prefetch={false}
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`group hover:bg-neutral-50 transition-colors px-3 py-2 ${
|
||||||
|
isCurrent ? 'bg-neutral-50 border-l-2 border-neutral-300 pl-2.5 font-medium' : ''
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex space-x-2 items-center">
|
||||||
|
<div className="flex items-center">
|
||||||
|
{props.course.trail?.runs?.find(
|
||||||
|
(run: any) => run.course_id === props.course.id
|
||||||
|
)?.steps?.find(
|
||||||
|
(step: any) => (step.activity_id === activity.id || step.activity_id === activity.activity_uuid) && step.complete === true
|
||||||
|
) ? (
|
||||||
|
<div className="relative cursor-pointer">
|
||||||
|
<Check size={14} className="stroke-[2.5] text-teal-600" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-neutral-300 cursor-pointer">
|
||||||
|
<Check size={14} className="stroke-[2]" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col grow">
|
||||||
|
<div className="flex items-center space-x-1.5 w-full">
|
||||||
|
<p className="text-sm font-medium text-neutral-600 group-hover:text-neutral-800 transition-colors">
|
||||||
|
{activity.name}
|
||||||
|
</p>
|
||||||
|
{isCurrent && (
|
||||||
|
<div className="flex items-center space-x-1 text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded-full text-[10px] font-medium animate-pulse">
|
||||||
|
<span>Current</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-1 mt-0.5 text-neutral-400">
|
||||||
|
{getActivityTypeIcon(activity.activity_type)}
|
||||||
|
<span className="text-[10px] font-medium">
|
||||||
|
{getActivityTypeLabel(activity.activity_type)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-neutral-300 group-hover:text-neutral-400 transition-colors cursor-pointer">
|
||||||
|
<ArrowRight size={12} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,211 @@
|
||||||
|
'use client'
|
||||||
|
import { useRouter } from 'next/navigation'
|
||||||
|
import { useMediaQuery } from 'usehooks-ts'
|
||||||
|
import { ChevronLeft, ChevronRight } from 'lucide-react'
|
||||||
|
import { getUriWithOrg } from '@services/config/config'
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
interface ActivityNavigationProps {
|
||||||
|
course: any
|
||||||
|
currentActivityId: string
|
||||||
|
orgslug: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ActivityNavigation(props: ActivityNavigationProps): React.ReactNode {
|
||||||
|
const router = useRouter();
|
||||||
|
const isMobile = useMediaQuery('(max-width: 768px)');
|
||||||
|
const [isBottomNavVisible, setIsBottomNavVisible] = React.useState(true);
|
||||||
|
const bottomNavRef = React.useRef<HTMLDivElement>(null);
|
||||||
|
const [navWidth, setNavWidth] = React.useState<number | null>(null);
|
||||||
|
|
||||||
|
// Function to find the current activity's position in the course
|
||||||
|
const findActivityPosition = () => {
|
||||||
|
let allActivities: any[] = [];
|
||||||
|
let currentIndex = -1;
|
||||||
|
|
||||||
|
// Flatten all activities from all chapters
|
||||||
|
props.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 === props.currentActivityId.replace('activity_', '')) {
|
||||||
|
currentIndex = allActivities.length - 1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return { allActivities, currentIndex };
|
||||||
|
};
|
||||||
|
|
||||||
|
const { allActivities, currentIndex } = findActivityPosition();
|
||||||
|
|
||||||
|
// Get previous and next activities
|
||||||
|
const prevActivity = currentIndex > 0 ? allActivities[currentIndex - 1] : null;
|
||||||
|
const nextActivity = currentIndex < allActivities.length - 1 ? allActivities[currentIndex + 1] : null;
|
||||||
|
|
||||||
|
// Navigate to an activity
|
||||||
|
const navigateToActivity = (activity: any) => {
|
||||||
|
if (!activity) return;
|
||||||
|
|
||||||
|
const cleanCourseUuid = props.course.course_uuid?.replace('course_', '');
|
||||||
|
router.push(getUriWithOrg(props.orgslug, '') + `/course/${cleanCourseUuid}/activity/${activity.cleanUuid}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Set up intersection observer to detect when bottom nav is out of viewport
|
||||||
|
// and measure the width of the bottom navigation
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!bottomNavRef.current) return;
|
||||||
|
|
||||||
|
// Update width when component mounts and on window resize
|
||||||
|
const updateWidth = () => {
|
||||||
|
if (bottomNavRef.current) {
|
||||||
|
setNavWidth(bottomNavRef.current.offsetWidth);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initial width measurement
|
||||||
|
updateWidth();
|
||||||
|
|
||||||
|
// Set up resize listener
|
||||||
|
window.addEventListener('resize', updateWidth);
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver(
|
||||||
|
([entry]) => {
|
||||||
|
setIsBottomNavVisible(entry.isIntersecting);
|
||||||
|
},
|
||||||
|
{ threshold: 0.1 }
|
||||||
|
);
|
||||||
|
|
||||||
|
observer.observe(bottomNavRef.current);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('resize', updateWidth);
|
||||||
|
if (bottomNavRef.current) {
|
||||||
|
observer.unobserve(bottomNavRef.current);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Navigation buttons component - reused for both top and bottom
|
||||||
|
const NavigationButtons = ({ isFloating = false }) => (
|
||||||
|
<div className={`${isFloating ? 'flex justify-between' : 'grid grid-cols-3'} items-center w-full`}>
|
||||||
|
{isFloating ? (
|
||||||
|
// Floating navigation - original flex layout
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={() => navigateToActivity(prevActivity)}
|
||||||
|
className={`flex items-center space-x-1.5 p-2 rounded-md transition-all duration-200 cursor-pointer ${
|
||||||
|
prevActivity
|
||||||
|
? 'text-gray-700'
|
||||||
|
: 'opacity-50 text-gray-400 cursor-not-allowed'
|
||||||
|
}`}
|
||||||
|
disabled={!prevActivity}
|
||||||
|
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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
// Regular navigation - grid layout with centered counter
|
||||||
|
<>
|
||||||
|
<div className="justify-self-start">
|
||||||
|
<button
|
||||||
|
onClick={() => navigateToActivity(prevActivity)}
|
||||||
|
className={`flex items-center space-x-1.5 px-3.5 py-2 rounded-md transition-all duration-200 cursor-pointer ${
|
||||||
|
prevActivity
|
||||||
|
? 'bg-white nice-shadow text-gray-700'
|
||||||
|
: 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
||||||
|
}`}
|
||||||
|
disabled={!prevActivity}
|
||||||
|
title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'}
|
||||||
|
>
|
||||||
|
<ChevronLeft size={16} className="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="text-sm text-gray-500 justify-self-center">
|
||||||
|
{currentIndex + 1} of {allActivities.length}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="justify-self-end">
|
||||||
|
<button
|
||||||
|
onClick={() => navigateToActivity(nextActivity)}
|
||||||
|
className={`flex items-center space-x-1.5 px-3.5 py-2 rounded-md transition-all duration-200 cursor-pointer ${
|
||||||
|
nextActivity
|
||||||
|
? 'bg-white nice-shadow text-gray-700'
|
||||||
|
: 'bg-gray-100 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={16} className="shrink-0" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Bottom navigation (in-place) */}
|
||||||
|
<div ref={bottomNavRef} className="mt-6 mb-2 w-full">
|
||||||
|
<NavigationButtons isFloating={false} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Floating bottom navigation - shown when bottom nav is not visible */}
|
||||||
|
{!isBottomNavVisible && (
|
||||||
|
<div className="fixed bottom-8 left-1/2 transform -translate-x-1/2 z-50 w-[85%] sm:w-auto sm:min-w-[350px] max-w-lg transition-all duration-300 ease-in-out">
|
||||||
|
<div
|
||||||
|
className="bg-white/90 backdrop-blur-xl rounded-full py-1.5 px-2.5 shadow-xs animate-in fade-in slide-in-from-bottom duration-300"
|
||||||
|
>
|
||||||
|
<NavigationButtons isFloating={true} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,187 @@
|
||||||
|
'use client'
|
||||||
|
import { ChevronLeft, ChevronRight } from 'lucide-react'
|
||||||
|
import { getUriWithOrg } from '@services/config/config'
|
||||||
|
import { useRouter } from 'next/navigation'
|
||||||
|
import React, { useEffect, useState, useRef } from 'react'
|
||||||
|
import ActivityIndicators from '@components/Pages/Courses/ActivityIndicators'
|
||||||
|
import ActivityChapterDropdown from './ActivityChapterDropdown'
|
||||||
|
import { getCourseThumbnailMediaDirectory } from '@services/media/media'
|
||||||
|
import { useOrg } from '@components/Contexts/OrgContext'
|
||||||
|
|
||||||
|
interface FixedActivitySecondaryBarProps {
|
||||||
|
course: any
|
||||||
|
currentActivityId: string
|
||||||
|
orgslug: string
|
||||||
|
activity: any
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryBarProps): React.ReactNode {
|
||||||
|
const router = useRouter();
|
||||||
|
const [isScrolled, setIsScrolled] = useState(false);
|
||||||
|
const [shouldShow, setShouldShow] = useState(false);
|
||||||
|
const mainActivityInfoRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
const org = useOrg() as any;
|
||||||
|
|
||||||
|
// Function to find the current activity's position in the course
|
||||||
|
const findActivityPosition = () => {
|
||||||
|
let allActivities: any[] = [];
|
||||||
|
let currentIndex = -1;
|
||||||
|
|
||||||
|
// Flatten all activities from all chapters
|
||||||
|
props.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 === props.currentActivityId.replace('activity_', '')) {
|
||||||
|
currentIndex = allActivities.length - 1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return { allActivities, currentIndex };
|
||||||
|
};
|
||||||
|
|
||||||
|
const { allActivities, currentIndex } = findActivityPosition();
|
||||||
|
|
||||||
|
// Get previous and next activities
|
||||||
|
const prevActivity = currentIndex > 0 ? allActivities[currentIndex - 1] : null;
|
||||||
|
const nextActivity = currentIndex < allActivities.length - 1 ? allActivities[currentIndex + 1] : null;
|
||||||
|
|
||||||
|
// Navigate to an activity
|
||||||
|
const navigateToActivity = (activity: any) => {
|
||||||
|
if (!activity) return;
|
||||||
|
|
||||||
|
const cleanCourseUuid = props.course.course_uuid?.replace('course_', '');
|
||||||
|
router.push(getUriWithOrg(props.orgslug, '') + `/course/${cleanCourseUuid}/activity/${activity.cleanUuid}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle scroll and intersection observer
|
||||||
|
useEffect(() => {
|
||||||
|
const handleScroll = () => {
|
||||||
|
setIsScrolled(window.scrollY > 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Set up intersection observer for the main activity info
|
||||||
|
const observer = new IntersectionObserver(
|
||||||
|
([entry]) => {
|
||||||
|
// Show the fixed bar when the main info is not visible
|
||||||
|
setShouldShow(!entry.isIntersecting);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
threshold: [0, 0.1, 1],
|
||||||
|
rootMargin: '-80px 0px 0px 0px' // Increased margin to account for the header
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Start observing the main activity info section with a slight delay to ensure DOM is ready
|
||||||
|
setTimeout(() => {
|
||||||
|
const mainActivityInfo = document.querySelector('.activity-info-section');
|
||||||
|
if (mainActivityInfo) {
|
||||||
|
mainActivityInfoRef.current = mainActivityInfo as HTMLDivElement;
|
||||||
|
observer.observe(mainActivityInfo);
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('scroll', handleScroll);
|
||||||
|
if (mainActivityInfoRef.current) {
|
||||||
|
observer.unobserve(mainActivityInfoRef.current);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{shouldShow && (
|
||||||
|
<div
|
||||||
|
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">
|
||||||
|
{/* 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-xs font-medium text-gray-500">Course</p>
|
||||||
|
<h1 className="font-semibold text-gray-900 text-sm truncate">
|
||||||
|
{props.course.name}
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Section - Navigation Controls */}
|
||||||
|
<div className="flex items-center flex-shrink-0">
|
||||||
|
<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={14} className="shrink-0 sm:w-4 sm:h-4" />
|
||||||
|
<div className="flex flex-col items-start hidden sm:flex">
|
||||||
|
<span className="text-[10px] text-gray-500">Previous</span>
|
||||||
|
<span className="text-xs font-medium text-left truncate max-w-[100px] sm:max-w-[150px]">
|
||||||
|
{prevActivity ? prevActivity.name : 'No previous activity'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<span className="text-xs 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 ${
|
||||||
|
nextActivity
|
||||||
|
? 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||||
|
: 'text-gray-300 cursor-not-allowed'
|
||||||
|
}`}
|
||||||
|
disabled={!nextActivity}
|
||||||
|
title={nextActivity ? `Next: ${nextActivity.name}` : 'No next activity'}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col items-end hidden sm:flex">
|
||||||
|
<span className={`text-[10px] ${nextActivity ? 'text-gray-500' : 'text-gray-500'}`}>Next</span>
|
||||||
|
<span className="text-xs font-medium text-right truncate max-w-[100px] sm:max-w-[150px]">
|
||||||
|
{nextActivity ? nextActivity.name : 'No next activity'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<ChevronRight size={14} className="shrink-0 sm:w-4 sm:h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue