diff --git a/jam-ui/src/components/client/JKSessionScreen.js b/jam-ui/src/components/client/JKSessionScreen.js index b4bd2d86b..1b85ace71 100644 --- a/jam-ui/src/components/client/JKSessionScreen.js +++ b/jam-ui/src/components/client/JKSessionScreen.js @@ -206,20 +206,42 @@ const JKSessionScreen = () => { const jamTrackData = useSelector(selectJamTrackData); const showJamTrackPlayer = Boolean(jamTrackData); - // Stable callback for JamTrack player popup close - const handleJamTrackPlayerClose = useCallback(() => { + // Redux jam track state + const selectedJamTrack = useSelector(selectSelectedJamTrack); + const jamTrackStems = useSelector(selectJamTrackStems); + + // JamTrack close handler (used by both player and session screen) + const handleJamTrackClose = useCallback(async () => { + console.log('Closing jam track'); + try { + // Call the close jam track API + await closeJamTrack({ id: currentSession.id }); + + // Clear the selected jam track and stems (session screen) + dispatch(setSelectedJamTrack(null)); + dispatch(setJamTrackStems([])); + + // Clear the player popup data + dispatch(clearJamTrackData()); + + toast.success('JamTrack closed successfully'); + } catch (error) { + console.error('Error closing jam track:', error); + toast.error('Failed to close JamTrack'); + } + }, [currentSession, dispatch]); + + // Stable callback for JamTrack player popup close (WindowPortal X button or ESC) + const handleJamTrackPlayerClose = useCallback(async () => { console.log('JKSessionScreen: JamTrack Player Popup closing'); - dispatch(clearJamTrackData()); - }, [dispatch]); + // Call the full close handler to clean up everything + await handleJamTrackClose(); + }, [handleJamTrackClose]); // State for media controls popup (modal visibility now in Redux) const [mediaControlsOpened, setMediaControlsOpened] = useState(false); const [popupGuard, setPopupGuard] = useState(false); // Hard guard against infinite loops - // Redux jam track state - const selectedJamTrack = useSelector(selectSelectedJamTrack); - const jamTrackStems = useSelector(selectJamTrackStems); - // Store references to registered message callbacks for cleanup const [registeredCallbacks, setRegisteredCallbacks] = useState([]); @@ -885,23 +907,6 @@ const JKSessionScreen = () => { } }; - const handleJamTrackClose = async () => { - console.log('Closing jam track'); - try { - // Call the close jam track API - await closeJamTrack({ id: currentSession.id }); - - // Clear the selected jam track and stems - dispatch(setSelectedJamTrack(null)); - dispatch(setJamTrackStems([])); - - toast.success('JamTrack closed successfully'); - } catch (error) { - console.error('Error closing jam track:', error); - toast.error('Failed to close JamTrack'); - } - }; - const handleMetronomeSelected = async () => { console.log('Opening metronome'); try { @@ -1352,10 +1357,7 @@ const JKSessionScreen = () => { session={jamTrackData.session} currentUser={jamTrackData.currentUser} isPopup={true} - onClose={() => { - console.log('JKSessionScreen: JKSessionJamTrackPlayer onClose called'); - dispatch(clearJamTrackData()); - }} + onClose={handleJamTrackClose} /> )}