fix: allow users to change position during live-stream

Author: kevinjosethomas

src/components/Analysis/StreamAnalysis.tsx

@@ -37,6 +37,8 @@ interface Props {
   onReconnect: () => void
   onStopStream: () => void
   analysisController: any // This should be typed properly based on your analysis controller
+  userNavigatedAway?: boolean
+  onSyncWithLive?: () => void
 }
 
 export const StreamAnalysis: React.FC<Props> = ({
@@ -46,6 +48,8 @@ export const StreamAnalysis: React.FC<Props> = ({
   onReconnect,
   onStopStream,
   analysisController,
+  userNavigatedAway = false,
+  onSyncWithLive,
 }) => {
   const router = useRouter()
   const { width } = useContext(WindowSizeContext)
@@ -98,21 +102,9 @@ export const StreamAnalysis: React.FC<Props> = ({
       if (analysisController.currentNode.mainChild?.move === moveString) {
         // Existing main line move - navigate to it
         analysisController.goToNode(analysisController.currentNode.mainChild)
-      } else if (
-        !analysisController.currentNode.mainChild &&
-        analysisController.currentNode.isMainline
-      ) {
-        // No main child exists AND we're on main line - create main line move
-        const newMainMove = game.tree.addMainMove(
-          analysisController.currentNode,
-          newFen,
-          moveString,
-          san,
-          analysisController.currentMaiaModel,
-        )
-        analysisController.goToNode(newMainMove)
       } else {
-        // Either main child exists but different move, OR we're in a variation - create variation
+        // For stream analysis, ALWAYS create variations for player moves
+        // This preserves the live game mainline and allows exploration
         const newVariation = game.tree.addVariation(
           analysisController.currentNode,
           newFen,
@@ -179,9 +171,6 @@ export const StreamAnalysis: React.FC<Props> = ({
     return chess.turn() === 'w' ? 'white' : 'black'
   }, [analysisController.currentNode])
 
-  // Check if we're using dummy game data (waiting for real game data)
-  const isWaitingForGameData = game.id === ''
-
   const NestedGameInfo = () => (
     <div className="flex w-full flex-col">
       <div className="hidden md:block">

src/components/Common/GameInfo.tsx

@@ -17,6 +17,7 @@ interface Props {
     isConnected: boolean
     error: string | null
   }
+  additionalActions?: React.ReactNode
 }
 
 export const GameInfo: React.FC<Props> = ({
@@ -30,6 +31,7 @@ export const GameInfo: React.FC<Props> = ({
   showGameListButton,
   onGameListClick,
   streamState,
+  additionalActions,
 }: Props) => {
   const { startTour } = useTour()
 
@@ -64,6 +66,7 @@ export const GameInfo: React.FC<Props> = ({
                       ? 'Disconnected'
                       : 'Connecting...'}
               </span>
+              {additionalActions}
             </div>
           )}
           {currentMaiaModel && setCurrentMaiaModel && (

src/components/Home/LiveChessBoard.tsx

@@ -8,11 +8,17 @@ import { getLichessTVGame, streamLichessGame } from 'src/api/lichess/streaming'
 interface LiveGameData {
   gameId: string
   white?: {
-    name: string
+    user: {
+      id: string
+      name: string
+    }
     rating?: number
   }
   black?: {
-    name: string
+    user: {
+      id: string
+      name: string
+    }
     rating?: number
   }
   currentFen?: string
@@ -36,8 +42,8 @@ export const LiveChessBoard: React.FC = () => {
     }
     setLiveGame({
       gameId: gameData.id || gameData.gameId,
-      white: gameData.players?.white?.user || gameData.white,
-      black: gameData.players?.black?.user || gameData.black,
+      white: gameData.players?.white || gameData.white,
+      black: gameData.players?.black || gameData.black,
       currentFen: gameData.fen,
       isLive: true,
     })
@@ -158,9 +164,9 @@ export const LiveChessBoard: React.FC = () => {
       <div className="relative">
         {/* Live indicator */}
         {liveGame?.isLive && (
-          <div className="absolute -right-4 -top-4 z-10 flex items-center gap-1 rounded-full bg-red-500 px-2 py-1">
+          <div className="absolute -right-5 -top-3 z-10 flex items-center gap-1 rounded-full bg-red-500 px-1.5 py-0.5">
             <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-white" />
-            <span className="text-xs font-semibold text-white">LIVE</span>
+            <span className="text-xxs font-semibold text-white">LIVE</span>
           </div>
         )}
 
@@ -191,7 +197,7 @@ export const LiveChessBoard: React.FC = () => {
           {/* Game info on hover */}
           {isHovered && liveGame && (
             <motion.div
-              className="absolute left-[calc(100%+0.5rem)] top-3 flex w-48 flex-col items-center justify-center rounded border border-white/10 bg-background-1/60"
+              className="absolute left-[calc(100%+0.5rem)] top-0 flex w-48 flex-col items-center justify-center rounded border border-white/10 bg-background-1/60"
               initial={{ opacity: 0, x: -10 }}
               animate={{ opacity: 1, x: 0 }}
               exit={{ opacity: 0, x: -10 }}
@@ -202,26 +208,26 @@ export const LiveChessBoard: React.FC = () => {
                   Lichess TV Analysis
                 </span>
               </div>
-              <div className="flex flex-row items-center gap-1 px-2 pt-2 text-xxs">
+              <div className="flex flex-col items-center gap-1 px-2 pt-2 text-xxs">
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-1">
                     <div className="h-2 w-2 rounded-full border bg-white" />
                     <span className="font-medium">
-                      {liveGame.white?.name || 'White'}
+                      {liveGame.white?.user?.id.slice(0, 10) || 'White'}
                     </span>
                     {liveGame.white?.rating && (
                       <span className="text-secondary">
                         ({liveGame.white.rating})
                       </span>
-                    )}
+                    )}{' '}
+                    vs.
                   </div>
                 </div>
-                <span className="text-secondary">vs.</span>
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-1">
                     <div className="h-2 w-2 rounded-full bg-black" />
                     <span className="font-medium">
-                      {liveGame.black?.name || 'Black'}
+                      {liveGame.black?.user?.id.slice(0, 10) || 'Black'}
                     </span>
                     {liveGame.black?.rating && (
                       <span className="text-secondary">

src/pages/analysis/stream/[gameId].tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo, useRef } from 'react'
+import React, { useEffect, useState, useMemo, useRef, useCallback } from 'react'
 import { NextPage } from 'next'
 import { useRouter } from 'next/router'
 import Head from 'next/head'
@@ -73,13 +73,61 @@ const StreamAnalysisPage: NextPage = () => {
   // Use the current streaming game or dummy game for analysis controller
   // Disable backend analysis saving for stream page since this is live data
   const currentGame = streamController.game || dummyGame
-  const analysisController = useAnalysisController(currentGame, undefined, false)
+  const analysisController = useAnalysisController(
+    currentGame,
+    undefined,
+    false,
+  )
+
+  // Set current node to follow live moves only if user hasn't manually navigated
+  const [userNavigatedAway, setUserNavigatedAway] = useState(false)
+  const lastGameMoveCount = useRef(0)
 
-  // Set current node to follow live moves
   useEffect(() => {
     if (streamController.game?.tree && analysisController) {
       try {
-        // For live streaming, we want to follow the latest move
+        const mainLine = streamController.game.tree.getMainLine()
+        const currentMoveCount = mainLine.length
+
+        // If new moves have been added to the game
+        if (currentMoveCount > lastGameMoveCount.current) {
+          lastGameMoveCount.current = currentMoveCount
+
+          // Only auto-follow if user hasn't manually navigated away
+          if (!userNavigatedAway) {
+            // Find the last node in the main line
+            let currentNode = streamController.game.tree.getRoot()
+            while (currentNode.mainChild) {
+              currentNode = currentNode.mainChild
+            }
+
+            if (currentNode) {
+              analysisController.setCurrentNode(currentNode)
+            }
+          }
+        }
+      } catch (error) {
+        console.error('Error setting current node:', error)
+      }
+    }
+  }, [streamController.game, analysisController, userNavigatedAway])
+
+  // Track when user manually navigates
+  const originalGoToNode = analysisController?.goToNode
+  useEffect(() => {
+    if (analysisController && originalGoToNode) {
+      // Wrap the goToNode function to track manual navigation
+      analysisController.goToNode = (node: any) => {
+        setUserNavigatedAway(true)
+        originalGoToNode(node)
+      }
+    }
+  }, [analysisController, originalGoToNode])
+
+  // Function to re-sync with live game
+  const syncWithLiveGame = useCallback(() => {
+    if (streamController.game?.tree && analysisController) {
+      try {
         // Find the last node in the main line
         let currentNode = streamController.game.tree.getRoot()
         while (currentNode.mainChild) {
@@ -88,9 +136,10 @@ const StreamAnalysisPage: NextPage = () => {
 
         if (currentNode) {
           analysisController.setCurrentNode(currentNode)
+          setUserNavigatedAway(false) // Reset the navigation flag
         }
       } catch (error) {
-        console.error('Error setting current node:', error)
+        console.error('Error syncing with live game:', error)
       }
     }
   }, [streamController.game, analysisController])
@@ -180,6 +229,8 @@ const StreamAnalysisPage: NextPage = () => {
             onReconnect={streamController.reconnect}
             onStopStream={streamController.stopStream}
             analysisController={analysisController}
+            userNavigatedAway={userNavigatedAway}
+            onSyncWithLive={syncWithLiveGame}
           />
         )}
       </TreeControllerContext.Provider>