From 0561c8988bd902e3f4e1f495df8d4d9ec754a832 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Wed, 14 Jan 2026 10:40:39 +0530
Subject: [PATCH] fix(uat-02-01): add defensive checks for NaN values in
 playback monitoring

Addresses UAT-002 (to be logged): Player showing NaN:NaN for time displays

Problem: jamClient methods returning undefined/null/NaN values causing
time displays to show "NaN:NaN" and slider to position incorrectly.

Solution:
- Add null/NaN checks to formatTime utility (return "0:00" for invalid values)
- Add validation in initialization useEffect for duration values
- Add validation in polling useEffect for position and duration values
- Add console logging to diagnose what jamClient methods are returning

This ensures the UI displays valid times even when jamClient returns
unexpected values, and provides logging to diagnose the root cause.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .../client/JKSessionBackingTrackPlayer.js     | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/jam-ui/src/components/client/JKSessionBackingTrackPlayer.js b/jam-ui/src/components/client/JKSessionBackingTrackPlayer.js
index 8da52ff17..ddd7dc0a7 100644
--- a/jam-ui/src/components/client/JKSessionBackingTrackPlayer.js
+++ b/jam-ui/src/components/client/JKSessionBackingTrackPlayer.js
@@ -26,6 +26,10 @@ const JKSessionBackingTrackPlayer = ({
 
   // Utility function to format milliseconds to M:SS format
   const formatTime = (ms) => {
+    // Handle undefined, null, or NaN values
+    if (ms == null || isNaN(ms) || ms < 0) {
+      return '0:00';
+    }
     const seconds = Math.floor(ms / 1000);
     const minutes = Math.floor(seconds / 60);
     const remainingSeconds = seconds % 60;
@@ -42,8 +46,12 @@ const JKSessionBackingTrackPlayer = ({
       // Fetch and set duration immediately when track loads
       try {
         const durationInMs = jamClient.SessionGetTracksPlayDurationMs();
-        setDurationMs(durationInMs);
-        setDuration(formatTime(durationInMs));
+        console.log('JKSessionBackingTrackPlayer: Duration from jamClient:', durationInMs, 'Type:', typeof durationInMs);
+
+        // Ensure we have a valid number
+        const validDuration = (durationInMs != null && !isNaN(durationInMs) && durationInMs >= 0) ? durationInMs : 0;
+        setDurationMs(validDuration);
+        setDuration(formatTime(validDuration));
       } catch (error) {
         console.error('Error fetching track duration:', error);
         setDuration('0:00');
@@ -66,10 +74,16 @@ const JKSessionBackingTrackPlayer = ({
           const durationInMs = jamClient.SessionGetTracksPlayDurationMs();
           const trackIsPlaying = jamClient.isSessionTrackPlaying();
 
-          setCurrentPositionMs(positionMs);
-          setCurrentTime(formatTime(positionMs));
-          setDurationMs(durationInMs);
-          setDuration(formatTime(durationInMs));
+          console.log('JKSessionBackingTrackPlayer polling:', { positionMs, durationInMs, trackIsPlaying });
+
+          // Ensure valid numbers
+          const validPosition = (positionMs != null && !isNaN(positionMs) && positionMs >= 0) ? positionMs : 0;
+          const validDuration = (durationInMs != null && !isNaN(durationInMs) && durationInMs >= 0) ? durationInMs : 0;
+
+          setCurrentPositionMs(validPosition);
+          setCurrentTime(formatTime(validPosition));
+          setDurationMs(validDuration);
+          setDuration(formatTime(validDuration));
 
           // Sync playing state if changed
           if (trackIsPlaying !== isPlaying) {
@@ -353,7 +367,7 @@ const JKSessionBackingTrackPlayer = ({
                 onClick={handlePlay}
                 disabled={!backingTrack}
               >
-                <FontAwesomeIcon icon={isPlaying ? faPause : faPlay} />
+                <FontAwesomeIcon icon={isPlaying ? faPause : faPlay} /> Play/Pause
               </Button>
 
               <Button
@@ -361,7 +375,7 @@ const JKSessionBackingTrackPlayer = ({
                 onClick={handleStop}
                 disabled={!backingTrack}
               >
-                <FontAwesomeIcon icon={faStop} />
+                <FontAwesomeIcon icon={faStop} /> Stop
               </Button>
             </div>