mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-18 20:09: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 { useContributorStatus } from '../../../../../../../../hooks/useContributorStatus'
|
||||
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 {
|
||||
activityid: string
|
||||
|
|
@ -92,158 +95,167 @@ function ActivityClient(props: ActivityClientProps) {
|
|||
<CourseProvider courseuuid={course?.course_uuid}>
|
||||
<AIChatBotProvider>
|
||||
<GeneralWrapperStyled>
|
||||
<div className="space-y-4 pt-4">
|
||||
<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}
|
||||
<div className="space-y-4 pt-0">
|
||||
|
||||
|
||||
<div className="pt-2">
|
||||
<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=""
|
||||
/>
|
||||
</>
|
||||
}
|
||||
{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 && (
|
||||
<>
|
||||
{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>
|
||||
)}
|
||||
</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>
|
||||
</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>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Activity Navigation */}
|
||||
{activity && activity.published == true && activity.content.paid_access != false && (
|
||||
<ActivityNavigation
|
||||
course={course}
|
||||
currentActivityId={activity.activity_uuid ? activity.activity_uuid.replace('activity_', '') : activityid.replace('activity_', '')}
|
||||
orgslug={orgslug}
|
||||
/>
|
||||
)}
|
||||
|
||||
{<div style={{ height: '100px' }}></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>
|
||||
</GeneralWrapperStyled>
|
||||
</AIChatBotProvider>
|
||||
|
|
@ -485,335 +497,4 @@ function AssignmentTools(props: {
|
|||
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
|
||||
|
|
|
|||
|
|
@ -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