Make frontend handle multiple transcript timestamp formats

Secondary transcripts may use different field names than primary
transcripts. Updated renderTranscriptSegment to check for:
- start_seconds (primary format)
- start (alternate format)
- offset (common in media APIs)
- time, timestamp, startTime (other variations)

Also handles millisecond timestamps automatically by detecting
values > 10000 and converting to seconds.

Added console logging of secondary segment structure for debugging.

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

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

static/app.js

@@ -358,7 +358,20 @@
     segmentDiv.className = 'transcript-segment';
     segmentDiv.dataset.text = (segment.text || '').toLowerCase();
 
-    const startSeconds = segment.start_seconds || segment.start || 0;
+    // Handle multiple possible timestamp field names and formats
+    let startSeconds = segment.start_seconds
+                    || segment.start
+                    || segment.offset
+                    || segment.time
+                    || segment.timestamp
+                    || segment.startTime
+                    || 0;
+
+    // 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);
 
@@ -603,6 +616,11 @@
           secondaryHeader.textContent = 'Secondary Transcript';
           transcriptDiv.appendChild(secondaryHeader);
 
+          // Debug: log first secondary segment structure
+          if (secondaryParts[0]) {
+            console.log('Secondary transcript segment structure:', secondaryParts[0]);
+          }
+
           secondaryParts.forEach(segment => {
             transcriptDiv.appendChild(renderTranscriptSegment(segment, videoUrl));
           });