Feat: Videochat start adjustments (#972)

JeangelLF · web-flow · commit e701915d0504 · 2026-04-10T11:18:41.000+02:00
## What was done?

- Allow instructors to join a meeting 48h in advance
- Allow users to join past meetings within 30 days
diff --git a/src/Utility.ts b/src/Utility.ts
@@ -11,6 +11,8 @@ export const REDIRECT_PASSWORD = `/login`;
 export const MIN_MAX_GRADE_RANGE = { min: 1, max: 14 };
 export const TRAINEE_GRADE = 14;
 export const MIN_AGE_PUPIL = 7;
+export const INSTRUCTOR_JOIN_IN_ADVANCE_MINUTES = 60 * 48;
+export const PARTICIPANT_JOIN_IN_ADVANCE_MINUTES = 10;
 
 export const toTimerString = (referenceDate: DateTime, theDate: DateTime) => {
     const inPast = theDate < referenceDate;
diff --git a/src/components/VideoButton.tsx b/src/components/VideoButton.tsx
@@ -9,6 +9,7 @@ import { Button } from './Button';
 import { IconVideo } from '@tabler/icons-react';
 import { useCanJoinMeeting } from '@/hooks/useCanJoinMeeting';
 import { toast } from 'sonner';
+import { INSTRUCTOR_JOIN_IN_ADVANCE_MINUTES, PARTICIPANT_JOIN_IN_ADVANCE_MINUTES } from '@/Utility';
 
 type VideoButtonProps = {
     isInstructor?: boolean;
@@ -85,7 +86,10 @@ const VideoButton: React.FC<VideoButtonProps> = ({
         }
     };
 
-    const canStartMeeting = useCanJoinMeeting(isInstructor ? 240 : 10, startDateTime, duration);
+    const canStartMeeting = useCanJoinMeeting({
+        joinBeforeMinutes: isInstructor ? INSTRUCTOR_JOIN_IN_ADVANCE_MINUTES : PARTICIPANT_JOIN_IN_ADVANCE_MINUTES,
+        appointment: { start: startDateTime, duration: duration ?? 60 },
+    });
 
     return (
         <>
@@ -98,7 +102,7 @@ const VideoButton: React.FC<VideoButtonProps> = ({
             />
             <Button
                 isLoading={isLoadingOverrideMeetingLink || isLoadingZoomMeetingLink}
-                disabled={!(canJoin ?? canStartMeeting) || isOver}
+                disabled={canJoin !== undefined ? !canJoin : !canStartMeeting}
                 reasonDisabled={isInstructor ? t('course.meeting.hint.student') : t('course.meeting.hint.pupil')}
                 onClick={openMeeting}
                 className={className}
diff --git a/src/components/appointment/AppointmentDetail.tsx b/src/components/appointment/AppointmentDetail.tsx
@@ -19,6 +19,7 @@ import { IconInfoCircle, IconClockEdit, IconTrash, IconPencil } from '@tabler/ic
 import { Button } from '../Button';
 import AddToCalendarDropdown from '../AddToCalendarDropdown';
 import { useCanJoinMeeting } from '@/hooks/useCanJoinMeeting';
+import { INSTRUCTOR_JOIN_IN_ADVANCE_MINUTES, PARTICIPANT_JOIN_IN_ADVANCE_MINUTES } from '@/Utility';
 
 type AppointmentDetailProps = {
     appointment: Appointment;
@@ -113,7 +114,10 @@ const AppointmentDetail: React.FC<AppointmentDetailProps> = ({ appointment, isHo
     const wasRejectedByMe = appointment.declinedBy?.includes(user?.userID!);
     const wasRejectedByMatch = appointment.appointmentType === 'match' && wasRejected && byMatch;
 
-    const isCurrent = useCanJoinMeeting(appointment.isOrganizer ? 240 : 10, appointment.start, appointment.duration);
+    const isCurrent = useCanJoinMeeting({
+        joinBeforeMinutes: appointment.isOrganizer ? INSTRUCTOR_JOIN_IN_ADVANCE_MINUTES : PARTICIPANT_JOIN_IN_ADVANCE_MINUTES,
+        appointment: { start: appointment.start, duration: appointment.duration ?? 60 },
+    });
 
     const canAddToCalendar = !wasRejected && !appointment.declinedBy?.length && !isPastAppointment && !isCurrent;
 
diff --git a/src/components/appointment/AppointmentMetaDetails.tsx b/src/components/appointment/AppointmentMetaDetails.tsx
@@ -19,6 +19,7 @@ import { IconDeviceMobileMessage, IconPointFilled, IconArrowNarrowRight } from '
 import { useCanJoinMeeting } from '@/hooks/useCanJoinMeeting';
 import { QRCodeSVG } from 'qrcode.react';
 import { gql } from '../../gql';
+import { INSTRUCTOR_JOIN_IN_ADVANCE_MINUTES, PARTICIPANT_JOIN_IN_ADVANCE_MINUTES } from '@/Utility';
 
 type MetaProps = {
     date: string;
@@ -89,7 +90,10 @@ const AppointmentMetaDetails: React.FC<MetaProps> = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    const canStartMeeting = useCanJoinMeeting(isOrganizer ? 240 : 10, startDateTime, duration);
+    const canStartMeeting = useCanJoinMeeting({
+        joinBeforeMinutes: isOrganizer ? INSTRUCTOR_JOIN_IN_ADVANCE_MINUTES : PARTICIPANT_JOIN_IN_ADVANCE_MINUTES,
+        appointment: { start: startDateTime, duration },
+    });
 
     useEffect(() => {
         canStartMeeting && createShortTimeLoginData();
diff --git a/src/hooks/useCanJoinMeeting.tsx b/src/hooks/useCanJoinMeeting.tsx
@@ -1,25 +1,34 @@
+import { Lecture } from '@/gql/graphql';
 import { DateTime } from 'luxon';
 import { useMemo, useState } from 'react';
 import useInterval from './useInterval';
 
-export const useCanJoinMeeting = (joinBeforeMinutes: number, start?: string, duration?: number) => {
+interface UseCanJoinMeetingProps {
+    joinBeforeMinutes: number;
+    appointment: Pick<Lecture, 'start' | 'duration'>;
+}
+
+export const useCanJoinMeeting = ({ joinBeforeMinutes, appointment }: UseCanJoinMeetingProps) => {
     const [now, setNow] = useState(DateTime.now());
 
     useInterval(() => {
         setNow(DateTime.now());
     }, 60000);
 
-    const valCanJoinMeeting = useMemo(() => canJoinMeeting(joinBeforeMinutes, now, start, duration), [duration, joinBeforeMinutes, start, now]) as boolean;
+    const canJoinMeeting = useMemo(() => {
+        const end = DateTime.fromISO(appointment.start).plus({ minutes: appointment.duration });
+        const isAppointmentInTheFuture = DateTime.now() <= end;
+        // Allow users to join meetings that are already over. (only if it was in the last 30 days).
+        if (!isAppointmentInTheFuture && DateTime.fromISO(appointment.start).diffNow('days').days > -30) return true;
 
-    return valCanJoinMeeting;
-};
+        if (appointment.start && appointment.duration) {
+            const startDate = DateTime.fromISO(appointment.start).minus({ minutes: joinBeforeMinutes });
+            const end = DateTime.fromISO(appointment.start).plus({ minutes: appointment.duration });
+            return now.toUnixInteger() >= startDate.toUnixInteger() && now.toUnixInteger() <= end.toUnixInteger();
+        } else {
+            return false;
+        }
+    }, [appointment.duration, joinBeforeMinutes, appointment.start, now]) as boolean;
 
-const canJoinMeeting = (joinBeforeMinutes: number, now: DateTime, start?: string, duration?: number): boolean => {
-    if (start && duration) {
-        const startDate = DateTime.fromISO(start).minus({ minutes: joinBeforeMinutes });
-        const end = DateTime.fromISO(start).plus({ minutes: duration });
-        return now.toUnixInteger() >= startDate.toUnixInteger() && now.toUnixInteger() <= end.toUnixInteger();
-    } else {
-        return false;
-    }
+    return canJoinMeeting;
 };
diff --git a/src/lang/ar.json b/src/lang/ar.json
@@ -2396,7 +2396,8 @@
         "Pupil": "طالب",
         "Retiree": "متقاعد",
         "Student": "طالب",
-        "Azubi": "متدرب"
+        "Azubi": "متدرب",
+        "SeekingEmployment": "باحث عن عمل"
     },
     "reasonsDisabled": {
         "loading": "لا تزال البيانات قيد التحميل...",
diff --git a/src/lang/de.json b/src/lang/de.json
@@ -2503,7 +2503,8 @@
         "Pupil": "Schüler:in",
         "Retiree": "Rentner:in",
         "Student": "Student:in",
-        "Azubi": "Auszubildende:r"
+        "Azubi": "Auszubildende:r",
+        "SeekingEmployment": "Arbeitssuchend"
     },
     "formalEducation": {
         "teacher": "Lehrer:in",
diff --git a/src/lang/en.json b/src/lang/en.json
@@ -2400,7 +2400,8 @@
         "Pupil": "pupil",
         "Retiree": "Pensioner",
         "Student": "Student",
-        "Azubi": "Aprentice"
+        "Azubi": "Aprentice",
+        "SeekingEmployment": "Job seeker"
     },
     "reasonsDisabled": {
         "loading": "Data is still being loaded...",
diff --git a/src/lang/ru.json b/src/lang/ru.json
@@ -2400,7 +2400,8 @@
         "Pupil": "ученик",
         "Retiree": "пенсионер",
         "Student": "студент",
-        "Azubi": "стажер"
+        "Azubi": "стажер",
+        "SeekingEmployment": "Ищущий работу"
     },
     "reasonsDisabled": {
         "loading": "Данные все еще загружаются...",
diff --git a/src/lang/tr.json b/src/lang/tr.json
@@ -2400,7 +2400,8 @@
         "Pupil": "Öğrenciler",
         "Retiree": "Emekli",
         "Student": "Öğrenci",
-        "Azubi": "Stajyer"
+        "Azubi": "Stajyer",
+        "SeekingEmployment": "İş arayan"
     },
     "reasonsDisabled": {
         "loading": "Veriler hala yükleniyor...",
diff --git a/src/lang/uk.json b/src/lang/uk.json
@@ -2400,7 +2400,8 @@
         "Pupil": "Учні:в",
         "Retiree": "Пенсіонер:в",
         "Student": "Студент:в",
-        "Azubi": "стажист"
+        "Azubi": "стажист",
+        "SeekingEmployment": "Шукач роботи"
     },
     "reasonsDisabled": {
         "loading": "Дані все ще завантажуються...",
diff --git a/src/pages/registration/ScreeningAppointmentDetails.tsx b/src/pages/registration/ScreeningAppointmentDetails.tsx
@@ -26,7 +26,10 @@ export const ScreeningAppointmentDetail = ({ onNext, onBack, variant = 'register
         completed: `Registrierung: Funnel abgeschlossen (${form.userType === 'pupil' ? 'Schüler:in' : 'Helfer:in'})`,
     };
     usePageTitle(pageTitles[variant]);
-    const canStartMeeting = useCanJoinMeeting(5, form.screeningAppointment?.start!, form.screeningAppointment?.duration!);
+    const canStartMeeting = useCanJoinMeeting({
+        joinBeforeMinutes: 5,
+        appointment: { start: form.screeningAppointment?.start!, duration: form.screeningAppointment?.duration! },
+    });
     const { trackEvent } = useMatomo();
 
     useEffect(() => {
diff --git a/src/widgets/AppointmentCard.tsx b/src/widgets/AppointmentCard.tsx
@@ -22,7 +22,7 @@ import {
 } from 'native-base';
 import Card from '../components/Card';
 import Tag from '../components/Tag';
-import { formatDate, getGradeLabel, toTimerString } from '../Utility';
+import { formatDate, getGradeLabel, INSTRUCTOR_JOIN_IN_ADVANCE_MINUTES, PARTICIPANT_JOIN_IN_ADVANCE_MINUTES, toTimerString } from '../Utility';
 import useInterval from '../hooks/useInterval';
 import { TrafficStatus } from '../types/lernfair/Course';
 import { DateTime } from 'luxon';
@@ -173,7 +173,10 @@ const AppointmentCard: React.FC<Props> = ({
         return maxParticipants - participantsCount;
     }, [maxParticipants, participantsCount]);
 
-    const isCurrent = useCanJoinMeeting(isOrganizer ? 240 : 10, _dateNext, duration);
+    const isCurrent = useCanJoinMeeting({
+        joinBeforeMinutes: isOrganizer ? INSTRUCTOR_JOIN_IN_ADVANCE_MINUTES : PARTICIPANT_JOIN_IN_ADVANCE_MINUTES,
+        appointment: { start: _dateNext, duration: duration ?? 60 },
+    });
     const textColor = useMemo(() => (isTeaser && isCurrent ? 'lightText' : 'darkText'), [isCurrent, isTeaser]);
 
     const CardMobileDirection = useBreakpointValue({
@@ -444,7 +447,6 @@ const AppointmentCard: React.FC<Props> = ({
                                             startDateTime={_dateNext}
                                             duration={duration}
                                             isInstructor={isOrganizer}
-                                            canJoin={isCurrent}
                                             className="w-full h-[47px] rounded-[4px]"
                                         />
                                     </VStack>
diff --git a/src/widgets/AppointmentDay.tsx b/src/widgets/AppointmentDay.tsx
@@ -3,7 +3,6 @@ import { useCallback } from 'react';
 import { AppointmentParticipant, Organizer } from '@/gql/graphql';
 import AppointmentTile from './AppointmentTile';
 import { Appointment } from '@/types/lernfair/Appointment';
-import { useCanJoinMeeting } from '@/hooks/useCanJoinMeeting';
 
 type Props = {
     start: string;
@@ -64,7 +63,12 @@ const AppointmentDay: React.FC<Props> = ({
         return sameMonth && sameYear;
     }, []);
 
-    const isCurrent = useCanJoinMeeting(isOrganizer ? 240 : 10, start, duration);
+    const isCurrentlyTakingPlace = useCallback(() => {
+        const now = DateTime.now();
+        const startDate = DateTime.fromISO(start);
+        const endDate = startDate.plus({ minutes: duration });
+        return now >= startDate && now <= endDate;
+    }, [duration, start]);
     const currentMonth = isCurrentMonth(start);
 
     const wasRejected = !!participants?.length && participants?.every((e) => declinedBy?.includes(e.userID!));
@@ -80,7 +84,7 @@ const AppointmentDay: React.FC<Props> = ({
                                 duration={duration}
                                 title={title}
                                 description={description}
-                                isCurrentlyTakingPlace={isCurrent}
+                                isCurrentlyTakingPlace={isCurrentlyTakingPlace()}
                                 organizers={organizers}
                                 participants={participants}
                                 isReadOnly={isReadOnly}
@@ -113,7 +117,7 @@ const AppointmentDay: React.FC<Props> = ({
                                 duration={duration}
                                 title={title}
                                 description={description}
-                                isCurrentlyTakingPlace={isCurrent}
+                                isCurrentlyTakingPlace={isCurrentlyTakingPlace()}
                                 appointmentType={appointmentType}
                                 position={position}
                                 appointmentIndex={index}
diff --git a/src/widgets/AppointmentTile.tsx b/src/widgets/AppointmentTile.tsx
@@ -182,6 +182,8 @@ const AppointmentTile: React.FC<Props> = ({
                             appointmentId={appointmentId}
                             appointmentType={appointmentType}
                             className={cn('w-full lg:w-auto mt-4 ml-auto')}
+                            duration={duration}
+                            startDateTime={start}
                         />
                     ) : (
                         <div />
