Merge pull request #501 from CodebilityDev/oboarding-steps/videos/errors

Fix Onboarding Page: Video Player

Author: Jecomo-Alyssa-Lyn

apps/codebility/app/applicant/onboarding/_components/Commitment.tsx

@@ -46,8 +46,18 @@ export default function Commitment({ userName, onComplete }: CommitmentProps) {
 
     setIsDrawing(true);
     const rect = canvas.getBoundingClientRect();
-    const x = "touches" in e ? e.touches[0].clientX - rect.left : e.clientX - rect.left;
-    const y = "touches" in e ? e.touches[0].clientY - rect.top : e.clientY - rect.top;
+    
+    // Safe access to touch coordinates with null check
+    const x = "touches" in e && e.touches[0] 
+      ? e.touches[0].clientX - rect.left 
+      : "clientX" in e 
+        ? e.clientX - rect.left 
+        : 0;
+    const y = "touches" in e && e.touches[0] 
+      ? e.touches[0].clientY - rect.top 
+      : "clientY" in e 
+        ? e.clientY - rect.top 
+        : 0;
 
     ctx.beginPath();
     ctx.moveTo(x, y);
@@ -63,8 +73,18 @@ export default function Commitment({ userName, onComplete }: CommitmentProps) {
     if (!ctx) return;
 
     const rect = canvas.getBoundingClientRect();
-    const x = "touches" in e ? e.touches[0].clientX - rect.left : e.clientX - rect.left;
-    const y = "touches" in e ? e.touches[0].clientY - rect.top : e.clientY - rect.top;
+    
+    // Safe access to touch coordinates with null check
+    const x = "touches" in e && e.touches[0] 
+      ? e.touches[0].clientX - rect.left 
+      : "clientX" in e 
+        ? e.clientX - rect.left 
+        : 0;
+    const y = "touches" in e && e.touches[0] 
+      ? e.touches[0].clientY - rect.top 
+      : "clientY" in e 
+        ? e.clientY - rect.top 
+        : 0;
 
     ctx.lineTo(x, y);
     ctx.stroke();
@@ -288,4 +308,4 @@ export default function Commitment({ userName, onComplete }: CommitmentProps) {
       )}
     </div>
   );
-}
+}

apps/codebility/app/applicant/onboarding/_components/Quiz.tsx

@@ -20,9 +20,25 @@ export default function Quiz({ applicantId, onQuizComplete, onBackToVideos }: Qu
 
   const currentQuestion = quizQuestions[currentQuestionIndex];
   const isLastQuestion = currentQuestionIndex === quizQuestions.length - 1;
-  const hasSelectedAnswer = selectedAnswers[currentQuestion.id] !== undefined;
+  const hasSelectedAnswer = currentQuestion ? selectedAnswers[currentQuestion.id] !== undefined : false;
+
+  // Early return if no current question (safety check)
+  if (!currentQuestion && !showResults) {
+    return (
+      <div className="space-y-6 text-center">
+        <p className="text-red-400">Error: No quiz questions available.</p>
+        {onBackToVideos && (
+          <Button onClick={onBackToVideos} variant="outline">
+            ← Back to Videos
+          </Button>
+        )}
+      </div>
+    );
+  }
 
   const handleSelectAnswer = (optionIndex: number) => {
+    if (!currentQuestion) return;
+    
     setSelectedAnswers({
       ...selectedAnswers,
       [currentQuestion.id]: optionIndex,
@@ -131,7 +147,7 @@ export default function Quiz({ applicantId, onQuizComplete, onBackToVideos }: Qu
                 </div>
                 <p className="mb-1 text-sm text-gray-400">
                   Your answer: <span className={isCorrect ? "text-green-400" : "text-red-400"}>
-                    {question.options[userAnswer]}
+                    {userAnswer !== undefined ? question.options[userAnswer] : "Not answered"}
                   </span>
                 </p>
                 {!isCorrect && (
@@ -184,6 +200,9 @@ export default function Quiz({ applicantId, onQuizComplete, onBackToVideos }: Qu
     );
   }
 
+  // This check is now safe because of the early return above
+  if (!currentQuestion) return null;
+
   return (
     <div className="space-y-6">
       {/* Progress */}
@@ -258,4 +277,4 @@ export default function Quiz({ applicantId, onQuizComplete, onBackToVideos }: Qu
       </div>
     </div>
   );
-}
+}

apps/codebility/app/applicant/onboarding/_components/VideoPlayer.tsx

@@ -25,10 +25,15 @@ export default function VideoPlayer({
   const [hasWatched, setHasWatched] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
+  
+  // Use ref to track if we've already saved progress
+  const progressSavedRef = useRef(false);
 
   const saveVideoProgress = async () => {
     const video = videoRef.current;
-    if (!video) return;
+    if (!video || progressSavedRef.current) return;
+
+    progressSavedRef.current = true;
 
     await updateVideoProgress({
       applicantId,
@@ -53,7 +58,7 @@ export default function VideoPlayer({
 
       // Mark as watched if they've seen 98% or more (to unlock Next button)
       // But don't auto-advance - user must click Next manually
-      if (percentWatched >= 98 && !hasWatched) {
+      if (percentWatched >= 98 && !progressSavedRef.current) {
         setHasWatched(true);
         // Save progress in background without triggering navigation
         saveVideoProgress();
@@ -78,7 +83,7 @@ export default function VideoPlayer({
       video.removeEventListener("play", handlePlay);
       video.removeEventListener("pause", handlePause);
     };
-  }, [hasWatched]);
+  }, []); // Empty dependency array - only set up listeners once
 
   const formatTime = (seconds: number) => {
     const mins = Math.floor(seconds / 60);
@@ -160,4 +165,4 @@ export default function VideoPlayer({
       )}
     </div>
   );
-}
+}