Fix timestamp parsing for string format timestamps

Both primary and secondary transcripts use 'timestamp' field
with string format "HH:MM:SS.mmm" instead of numeric seconds.

Changes:
- Add parseTimestampToSeconds() to handle string timestamps
- Parse "HH:MM:SS.mmm" format (e.g., "00:00:39.480")
- Also handle "MM:SS" format
- Still support numeric timestamps (seconds or milliseconds)
- Check 'timestamp' field first (primary format in data)

This fixes the NaN issue and displays correct timestamps
for both primary and secondary transcripts.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

static/app.js

@@ -353,35 +353,56 @@
     return url.toString();
   }
 
+  function parseTimestampToSeconds(timestamp) {
+    // Handle string timestamps like "00:00:39.480" or "HH:MM:SS.mmm"
+    if (typeof timestamp === 'string' && timestamp.includes(':')) {
+      const parts = timestamp.split(':');
+      if (parts.length === 3) {
+        const hours = parseFloat(parts[0]) || 0;
+        const minutes = parseFloat(parts[1]) || 0;
+        const seconds = parseFloat(parts[2]) || 0;
+        return hours * 3600 + minutes * 60 + seconds;
+      } else if (parts.length === 2) {
+        const minutes = parseFloat(parts[0]) || 0;
+        const seconds = parseFloat(parts[1]) || 0;
+        return minutes * 60 + seconds;
+      }
+    }
+    // Handle numeric timestamps
+    const num = parseFloat(timestamp);
+    if (!isNaN(num)) {
+      // If timestamp is in milliseconds (> 10000 for timestamps after ~2.7 hours), convert to seconds
+      return num > 10000 ? num / 1000 : num;
+    }
+    return 0;
+  }
+
   function renderTranscriptSegment(segment, videoUrl) {
     const segmentDiv = document.createElement('div');
     segmentDiv.className = 'transcript-segment';
     segmentDiv.dataset.text = (segment.text || '').toLowerCase();
 
-    // Handle multiple possible timestamp field names and formats
+    // Try different timestamp field names
-    // Try each field and ensure it's a valid number
     let startSeconds = 0;
     const possibleFields = [
+      segment.timestamp,      // Primary field (string format "HH:MM:SS.mmm")
       segment.start_seconds,
       segment.start,
       segment.offset,
       segment.time,
-      segment.timestamp,
       segment.startTime
     ];
 
     for (const field of possibleFields) {
-      if (field != null && !isNaN(parseFloat(field))) {
+      if (field != null) {
-        startSeconds = parseFloat(field);
+        const parsed = parseTimestampToSeconds(field);
-        break;
+        if (parsed > 0 || (parsed === 0 && field !== undefined)) {
+          startSeconds = parsed;
+          break;
+        }
       }
     }
 
-    // If timestamp is in milliseconds (> 10000 for timestamps after ~2.7 hours), convert to seconds
-    if (startSeconds > 10000) {
-      startSeconds = startSeconds / 1000;
-    }
-
     const timestampText = formatTimestamp(startSeconds);
     const timestampUrl = getYouTubeTimestampUrl(videoUrl, startSeconds);