From 2230fa32e56054a71a6834b43681e42889ba1e71 Mon Sep 17 00:00:00 2001 From: JSC Date: Mon, 7 Jul 2025 20:51:46 +0200 Subject: [PATCH 1/2] feat: enhance MusicPlayer and SocketProvider with playlist management and real-time updates --- src/components/MusicPlayer.tsx | 15 +- src/components/sidebar/NavPlan.tsx | 1 + src/contexts/MusicPlayerContext.tsx | 343 ++++++++++++++-------------- src/contexts/SocketContext.tsx | 68 +++++- 4 files changed, 246 insertions(+), 181 deletions(-) diff --git a/src/components/MusicPlayer.tsx b/src/components/MusicPlayer.tsx index b0fb9c8..70cda77 100644 --- a/src/components/MusicPlayer.tsx +++ b/src/components/MusicPlayer.tsx @@ -47,7 +47,8 @@ export function MusicPlayer() { const progressBarRef = useRef(null) - if (!currentTrack) { + // Show player if there's a playlist, even if no current track is playing + if (playlist.length === 0) { return null } @@ -98,7 +99,7 @@ export function MusicPlayer() { return ( {/* Thumbnail */} - {currentTrack.thumbnail && ( + {currentTrack?.thumbnail && (

- {currentTrack.title} + {currentTrack?.title || 'No track selected'}

- {currentTrack.artist && ( + {currentTrack?.artist && (

{currentTrack.artist}

@@ -262,7 +263,7 @@ export function MusicPlayer() { {/* Main player area */}
{/* Large thumbnail */} - {currentTrack.thumbnail && ( + {currentTrack?.thumbnail && (
-

{currentTrack.title}

- {currentTrack.artist && ( +

{currentTrack?.title || 'No track selected'}

+ {currentTrack?.artist && (

{currentTrack.artist}

)}
diff --git a/src/components/sidebar/NavPlan.tsx b/src/components/sidebar/NavPlan.tsx index 2e6bf51..f335c2c 100644 --- a/src/components/sidebar/NavPlan.tsx +++ b/src/components/sidebar/NavPlan.tsx @@ -21,6 +21,7 @@ export function NavPlan({ user }: NavPlanProps) { if (!socket || !isConnected) return const handleCreditsChanged = (data: { credits: number }) => { + console.log('WAAAAAAZAAAA') setCredits(data.credits) } diff --git a/src/contexts/MusicPlayerContext.tsx b/src/contexts/MusicPlayerContext.tsx index 34ba42f..1cfe831 100644 --- a/src/contexts/MusicPlayerContext.tsx +++ b/src/contexts/MusicPlayerContext.tsx @@ -1,4 +1,6 @@ import { createContext, useContext, useState, useRef, useEffect, type ReactNode } from 'react' +import { useSocket } from './SocketContext' +import { apiService } from '@/services/api' export interface Track { id: string @@ -41,6 +43,7 @@ interface MusicPlayerContextType { nextTrack: () => void previousTrack: () => void playTrack: (trackIndex: number) => void + loadPlaylist: (playlistId: number) => void addToPlaylist: (track: Track) => void removeFromPlaylist: (trackId: string) => void clearPlaylist: () => void @@ -63,232 +66,233 @@ interface MusicPlayerProviderProps { } export function MusicPlayerProvider({ children }: MusicPlayerProviderProps) { - const audioRef = useRef(null) + const { socket } = useSocket() // Playback state const [isPlaying, setIsPlaying] = useState(false) const [currentTime, setCurrentTime] = useState(0) const [duration, setDuration] = useState(0) - const [volume, setVolumeState] = useState(0.8) + const [volume, setVolumeState] = useState(80) const [isMuted, setIsMuted] = useState(false) - const [playMode, setPlayMode] = useState('continuous') + const [playMode, setPlayModeState] = useState('continuous') // Playlist state const [currentTrackIndex, setCurrentTrackIndex] = useState(0) - const [playlist, setPlaylist] = useState([ - { - id: '1', - title: 'Cheryl Lynn - Got To Be Real', - artist: 'Cheryl Lynn', - duration: 240, - thumbnail: '/api/sounds/stream/thumbnails/Cheryl Lynn - Got To Be Real Official Audio_fI569nw0YUQ.webp', - url: '/api/sounds/stream/Cheryl Lynn - Got To Be Real Official Audio_fI569nw0YUQ.opus' - }, - { - id: '2', - title: 'The Whispers - And The Beat Goes On', - artist: 'The Whispers', - duration: 280, - thumbnail: '/api/sounds/stream/thumbnails/The Whispers - And The Beat Goes On Official Video_pEmX5HR9ZxU.jpg', - url: '/api/sounds/stream/The Whispers - And The Beat Goes On Official Video_pEmX5HR9ZxU.opus' - }, - { - id: '3', - title: 'OLD RAP VS NEW RAP', - artist: 'Mister V, Jhon Rachid, Maskey', - duration: 320, - thumbnail: '/api/sounds/stream/thumbnails/OLD RAP VS NEW RAP Ft Mister V Jhon Rachid Maskey _PAFYcOFE3DY.webp', - url: '/api/sounds/stream/OLD RAP VS NEW RAP Ft Mister V Jhon Rachid Maskey _PAFYcOFE3DY.opus' - } - ]) + const [playlist, setPlaylist] = useState([]) + const [currentPlaylistId, setCurrentPlaylistId] = useState(null) + const [currentTrack, setCurrentTrack] = useState(null) // UI state const [isMinimized, setIsMinimized] = useState(true) const [showPlaylist, setShowPlaylist] = useState(false) - - const currentTrack = playlist[currentTrackIndex] || null - // Initialize audio element + // Fetch initial player state on mount useEffect(() => { - audioRef.current = new Audio() - - const audio = audioRef.current - - const handleTimeUpdate = () => { - setCurrentTime(audio.currentTime) - } - - const handleLoadedMetadata = () => { - setDuration(audio.duration) - } - - const handleEnded = () => { - handleTrackEnd() - } - - audio.addEventListener('timeupdate', handleTimeUpdate) - audio.addEventListener('loadedmetadata', handleLoadedMetadata) - audio.addEventListener('ended', handleEnded) - - return () => { - audio.removeEventListener('timeupdate', handleTimeUpdate) - audio.removeEventListener('loadedmetadata', handleLoadedMetadata) - audio.removeEventListener('ended', handleEnded) - audio.pause() + const fetchInitialState = async () => { + try { + console.log('๐ŸŽต MusicPlayerContext: Fetching initial player state...') + const response = await apiService.get('/api/player/state') + const state = await response.json() + + console.log('๐ŸŽต MusicPlayerContext: Initial state received', { + playlist_id: state.playlist_id, + is_playing: state.is_playing, + current_time: state.current_time, + duration: state.duration, + playlist_length: state.playlist?.length + }) + + // If no playlist is loaded, try to load the main playlist + if (!state.playlist_id) { + console.log('๐ŸŽต MusicPlayerContext: No playlist loaded, attempting to load main playlist...') + try { + await apiService.post('/api/player/load-main-playlist') + // Fetch state again after loading main playlist + const newResponse = await apiService.get('/api/player/state') + const newState = await newResponse.json() + console.log('๐ŸŽต MusicPlayerContext: Main playlist loaded, new state:', { + playlist_id: newState.playlist_id, + playlist_length: newState.playlist?.length + }) + state = newState + } catch (loadError) { + console.warn('๐ŸŽต MusicPlayerContext: Failed to load main playlist:', loadError) + } + } + + // Update all state from backend + console.log('๐ŸŽต MusicPlayerContext: Updating initial state in React') + setIsPlaying(state.is_playing || false) + setCurrentTime(state.current_time || 0) + setDuration(state.duration || 0) + setVolumeState(state.volume || 80) + setIsMuted(state.volume === 0) + setPlayModeState(state.play_mode || 'continuous') + setCurrentTrackIndex(state.current_track_index || 0) + setPlaylist(state.playlist || []) + setCurrentPlaylistId(state.playlist_id || null) + setCurrentTrack(state.current_track || null) + + console.log('๐ŸŽต MusicPlayerContext: Initial state setup complete') + } catch (error) { + console.error('โŒ MusicPlayerContext: Failed to fetch initial player state:', error) + } } + + fetchInitialState() }, []) - // Update audio source when track changes + // Listen for real-time player updates via SocketIO useEffect(() => { - if (audioRef.current && currentTrack) { - audioRef.current.src = currentTrack.url - audioRef.current.load() + console.log('๐ŸŽต MusicPlayerContext: Setting up SocketIO listeners', { hasSocket: !!socket }); + + if (!socket) { + console.log('โณ MusicPlayerContext: No socket available yet'); + return; } - }, [currentTrack]) - // Update audio volume and mute state - useEffect(() => { - if (audioRef.current) { - audioRef.current.volume = isMuted ? 0 : volume + const handlePlayerStateUpdate = (state: any) => { + console.log('๐ŸŽต MusicPlayerContext: Received player state update', { + is_playing: state.is_playing, + current_time: state.current_time, + duration: state.duration, + volume: state.volume, + current_track: state.current_track?.title, + playlist_length: state.playlist?.length + }); + + setIsPlaying(state.is_playing || false) + setCurrentTime(state.current_time || 0) + setDuration(state.duration || 0) + setVolumeState(state.volume || 80) + setIsMuted(state.volume === 0) + setPlayModeState(state.play_mode || 'continuous') + setCurrentTrackIndex(state.current_track_index || 0) + setPlaylist(state.playlist || []) + setCurrentPlaylistId(state.playlist_id || null) + setCurrentTrack(state.current_track || null) } - }, [volume, isMuted]) - const handleTrackEnd = () => { - switch (playMode) { - case 'loop-one': - if (audioRef.current) { - audioRef.current.currentTime = 0 - audioRef.current.play() - } - break - case 'loop-playlist': - nextTrack() - break - case 'random': - playRandomTrack() - break - case 'continuous': - if (currentTrackIndex < playlist.length - 1) { - nextTrack() - } else { - stop() - } - break + console.log('๐ŸŽต MusicPlayerContext: Registering player_state_update listener'); + socket.on('player_state_update', handlePlayerStateUpdate) + + return () => { + console.log('๐ŸŽต MusicPlayerContext: Cleaning up SocketIO listeners'); + socket.off('player_state_update', handlePlayerStateUpdate) + } + }, [socket]) + + const play = async () => { + try { + await apiService.post('/api/player/play') + } catch (error) { + console.error('Failed to play:', error) } } - const play = () => { - if (audioRef.current && currentTrack) { - audioRef.current.play() - setIsPlaying(true) + const pause = async () => { + try { + await apiService.post('/api/player/pause') + } catch (error) { + console.error('Failed to pause:', error) } } - const pause = () => { - if (audioRef.current) { - audioRef.current.pause() - setIsPlaying(false) + const stop = async () => { + try { + await apiService.post('/api/player/stop') + } catch (error) { + console.error('Failed to stop:', error) } } - const stop = () => { - if (audioRef.current) { - audioRef.current.pause() - audioRef.current.currentTime = 0 - setIsPlaying(false) - setCurrentTime(0) - } - } - - const togglePlayPause = () => { + const togglePlayPause = async () => { if (isPlaying) { - pause() + await pause() } else { - play() + await play() } } - const seekTo = (time: number) => { - if (audioRef.current) { - audioRef.current.currentTime = time - setCurrentTime(time) + const seekTo = async (time: number) => { + try { + const position = duration > 0 ? time / duration : 0 + await apiService.post('/api/player/seek', { position }) + } catch (error) { + console.error('Failed to seek:', error) } } - const setVolume = (newVolume: number) => { - setVolumeState(newVolume) - setIsMuted(newVolume === 0) - } - - const toggleMute = () => { - setIsMuted(!isMuted) - } - - const nextTrack = () => { - if (playlist.length === 0) return - - const nextIndex = (currentTrackIndex + 1) % playlist.length - setCurrentTrackIndex(nextIndex) - - // Auto-play if currently playing - if (isPlaying) { - setTimeout(() => play(), 100) + const setVolume = async (newVolume: number) => { + try { + await apiService.post('/api/player/volume', { volume: newVolume }) + } catch (error) { + console.error('Failed to set volume:', error) } } - const previousTrack = () => { - if (playlist.length === 0) return - - const prevIndex = currentTrackIndex === 0 ? playlist.length - 1 : currentTrackIndex - 1 - setCurrentTrackIndex(prevIndex) - - // Auto-play if currently playing - if (isPlaying) { - setTimeout(() => play(), 100) + const toggleMute = async () => { + try { + const newVolume = isMuted ? 80 : 0 + await apiService.post('/api/player/volume', { volume: newVolume }) + } catch (error) { + console.error('Failed to toggle mute:', error) } } - const playRandomTrack = () => { - if (playlist.length <= 1) return - - let randomIndex - do { - randomIndex = Math.floor(Math.random() * playlist.length) - } while (randomIndex === currentTrackIndex) - - setCurrentTrackIndex(randomIndex) - setTimeout(() => play(), 100) + const nextTrack = async () => { + try { + await apiService.post('/api/player/next') + } catch (error) { + console.error('Failed to skip to next track:', error) + } } - const playTrack = (trackIndex: number) => { - if (trackIndex >= 0 && trackIndex < playlist.length) { - setCurrentTrackIndex(trackIndex) - setTimeout(() => play(), 100) + const previousTrack = async () => { + try { + await apiService.post('/api/player/previous') + } catch (error) { + console.error('Failed to skip to previous track:', error) + } + } + + const playTrack = async (trackIndex: number) => { + try { + await apiService.post('/api/player/play-track', { index: trackIndex }) + } catch (error) { + console.error('Failed to play track:', error) + } + } + + const loadPlaylist = async (playlistId: number) => { + try { + await apiService.post('/api/player/playlist', { playlist_id: playlistId }) + } catch (error) { + console.error('Failed to load playlist:', error) } } const addToPlaylist = (track: Track) => { - setPlaylist(prev => [...prev, track]) + // This would need to be implemented via API + console.log('Adding to playlist not yet implemented') } const removeFromPlaylist = (trackId: string) => { - setPlaylist(prev => { - const newPlaylist = prev.filter(track => track.id !== trackId) - // Adjust current track index if necessary - const removedIndex = prev.findIndex(track => track.id === trackId) - if (removedIndex !== -1 && removedIndex < currentTrackIndex) { - setCurrentTrackIndex(current => Math.max(0, current - 1)) - } else if (removedIndex === currentTrackIndex && newPlaylist.length > 0) { - setCurrentTrackIndex(current => Math.min(current, newPlaylist.length - 1)) - } - return newPlaylist - }) + // This would need to be implemented via API + console.log('Removing from playlist not yet implemented') } const clearPlaylist = () => { - stop() - setPlaylist([]) - setCurrentTrackIndex(0) + // This would need to be implemented via API + console.log('Clearing playlist not yet implemented') + } + + const setPlayMode = async (mode: PlayMode) => { + try { + await apiService.post('/api/player/mode', { mode }) + } catch (error) { + console.error('Failed to set play mode:', error) + } } const toggleMaximize = () => { @@ -303,7 +307,7 @@ export function MusicPlayerProvider({ children }: MusicPlayerProviderProps) { // Playback state isPlaying, currentTime, - duration: currentTrack?.duration || 0, + duration, volume, isMuted, playMode, @@ -329,6 +333,7 @@ export function MusicPlayerProvider({ children }: MusicPlayerProviderProps) { nextTrack, previousTrack, playTrack, + loadPlaylist, addToPlaylist, removeFromPlaylist, clearPlaylist, diff --git a/src/contexts/SocketContext.tsx b/src/contexts/SocketContext.tsx index c4fbab5..44b6109 100644 --- a/src/contexts/SocketContext.tsx +++ b/src/contexts/SocketContext.tsx @@ -34,6 +34,8 @@ export const SocketProvider: React.FC = ({ children }) => { const { user, loading } = useAuth(); useEffect(() => { + console.log('๐Ÿ”Œ SocketProvider: Creating socket connection'); + // Create socket connection const newSocket = io("http://localhost:5000", { withCredentials: true, // Include cookies for authentication @@ -42,45 +44,101 @@ export const SocketProvider: React.FC = ({ children }) => { upgrade: false, // Disable WebSocket upgrade }); + console.log('๐Ÿ”Œ SocketProvider: Socket created', { + id: newSocket.id, + connected: newSocket.connected, + disconnected: newSocket.disconnected + }); + // Set up event listeners newSocket.on("connect", () => { + console.log('โœ… SocketIO: Connected successfully', { + id: newSocket.id, + transport: newSocket.io.engine.transport.name + }); + + // Test if events work at all + console.log('๐Ÿงช SocketIO: Sending test event...'); + newSocket.emit("test_event", { message: "Frontend test" }); + + // Send manual test event + console.log('๐Ÿงช SocketIO: Sending manual test event...'); + newSocket.emit("manual_test", { message: "Frontend manual test" }); + // Send authentication after connection + console.log('๐Ÿ” SocketIO: Sending authentication...'); newSocket.emit("authenticate", {}); }); - newSocket.on("auth_success", () => { + newSocket.on("auth_success", (data) => { + console.log('๐ŸŽ‰ SocketIO: Authentication successful', data); setIsConnected(true); }); - newSocket.on("auth_error", () => { + newSocket.on("auth_error", (data) => { + console.error('โŒ SocketIO: Authentication failed', data); setIsConnected(false); newSocket.disconnect(); }); - newSocket.on("disconnect", () => { + newSocket.on("disconnect", (reason) => { + console.log('๐Ÿ”Œ SocketIO: Disconnected', { reason }); setIsConnected(false); }); - newSocket.on("connect_error", () => { + newSocket.on("connect_error", (error) => { + console.error('โŒ SocketIO: Connection error', error); setIsConnected(false); }); + // Listen for player state updates + newSocket.on("player_state_update", (data) => { + console.log('๐ŸŽต SocketIO: Player state update received', data); + }); + + // Listen for credits updates + newSocket.on("credits_changed", (data) => { + console.log('๐Ÿ’ฐ SocketIO: Credits changed', data); + }); + + // Listen for test response + newSocket.on("test_response", (data) => { + console.log('๐Ÿงช SocketIO: Test response received', data); + }); + setSocket(newSocket); // Clean up on unmount return () => { + console.log('๐Ÿ”Œ SocketProvider: Cleaning up socket'); newSocket.close(); }; }, []); // Connect/disconnect based on authentication state useEffect(() => { - if (!socket || loading) return; + console.log('๐Ÿ”„ SocketProvider: Auth state changed', { + hasSocket: !!socket, + loading, + hasUser: !!user, + userEmail: user?.email, + isConnected, + socketConnected: socket?.connected + }); + + if (!socket || loading) { + console.log('โณ SocketProvider: Waiting for socket or user loading...'); + return; + } if (user && !isConnected) { + console.log('๐Ÿš€ SocketProvider: User authenticated, connecting socket...'); socket.connect(); } else if (!user && isConnected) { + console.log('๐Ÿ”Œ SocketProvider: User logged out, disconnecting socket...'); socket.disconnect(); + } else { + console.log('โšก SocketProvider: No action needed', { user: !!user, isConnected }); } }, [socket, user, loading, isConnected]); From 32fab283bec4f9f53fe9ddbffe846674fa6554d6 Mon Sep 17 00:00:00 2001 From: JSC Date: Mon, 7 Jul 2025 21:18:00 +0200 Subject: [PATCH 2/2] refactor: remove console logs for cleaner code and improved readability --- src/components/AuthProvider.tsx | 1 - src/components/sidebar/NavPlan.tsx | 1 - src/contexts/MusicPlayerContext.tsx | 39 ++---------------- src/contexts/SocketContext.tsx | 63 ++--------------------------- src/services/api.ts | 6 --- 5 files changed, 8 insertions(+), 102 deletions(-) diff --git a/src/components/AuthProvider.tsx b/src/components/AuthProvider.tsx index fd28c07..0daabbe 100644 --- a/src/components/AuthProvider.tsx +++ b/src/components/AuthProvider.tsx @@ -23,7 +23,6 @@ export function AuthProvider({ children }: { children: ReactNode }) { // Listen for refresh token expiration events const handleRefreshTokenExpired = () => { - console.log('Refresh token expired, logging out user') setUser(null) } diff --git a/src/components/sidebar/NavPlan.tsx b/src/components/sidebar/NavPlan.tsx index f335c2c..2e6bf51 100644 --- a/src/components/sidebar/NavPlan.tsx +++ b/src/components/sidebar/NavPlan.tsx @@ -21,7 +21,6 @@ export function NavPlan({ user }: NavPlanProps) { if (!socket || !isConnected) return const handleCreditsChanged = (data: { credits: number }) => { - console.log('WAAAAAAZAAAA') setCredits(data.credits) } diff --git a/src/contexts/MusicPlayerContext.tsx b/src/contexts/MusicPlayerContext.tsx index 1cfe831..713595e 100644 --- a/src/contexts/MusicPlayerContext.tsx +++ b/src/contexts/MusicPlayerContext.tsx @@ -90,38 +90,22 @@ export function MusicPlayerProvider({ children }: MusicPlayerProviderProps) { useEffect(() => { const fetchInitialState = async () => { try { - console.log('๐ŸŽต MusicPlayerContext: Fetching initial player state...') const response = await apiService.get('/api/player/state') - const state = await response.json() - - console.log('๐ŸŽต MusicPlayerContext: Initial state received', { - playlist_id: state.playlist_id, - is_playing: state.is_playing, - current_time: state.current_time, - duration: state.duration, - playlist_length: state.playlist?.length - }) + let state = await response.json() // If no playlist is loaded, try to load the main playlist if (!state.playlist_id) { - console.log('๐ŸŽต MusicPlayerContext: No playlist loaded, attempting to load main playlist...') try { await apiService.post('/api/player/load-main-playlist') // Fetch state again after loading main playlist const newResponse = await apiService.get('/api/player/state') - const newState = await newResponse.json() - console.log('๐ŸŽต MusicPlayerContext: Main playlist loaded, new state:', { - playlist_id: newState.playlist_id, - playlist_length: newState.playlist?.length - }) - state = newState + state = await newResponse.json() } catch (loadError) { - console.warn('๐ŸŽต MusicPlayerContext: Failed to load main playlist:', loadError) + console.warn('Failed to load main playlist:', loadError) } } // Update all state from backend - console.log('๐ŸŽต MusicPlayerContext: Updating initial state in React') setIsPlaying(state.is_playing || false) setCurrentTime(state.current_time || 0) setDuration(state.duration || 0) @@ -133,9 +117,8 @@ export function MusicPlayerProvider({ children }: MusicPlayerProviderProps) { setCurrentPlaylistId(state.playlist_id || null) setCurrentTrack(state.current_track || null) - console.log('๐ŸŽต MusicPlayerContext: Initial state setup complete') } catch (error) { - console.error('โŒ MusicPlayerContext: Failed to fetch initial player state:', error) + console.error('Failed to fetch initial player state:', error) } } @@ -144,23 +127,11 @@ export function MusicPlayerProvider({ children }: MusicPlayerProviderProps) { // Listen for real-time player updates via SocketIO useEffect(() => { - console.log('๐ŸŽต MusicPlayerContext: Setting up SocketIO listeners', { hasSocket: !!socket }); - if (!socket) { - console.log('โณ MusicPlayerContext: No socket available yet'); return; } const handlePlayerStateUpdate = (state: any) => { - console.log('๐ŸŽต MusicPlayerContext: Received player state update', { - is_playing: state.is_playing, - current_time: state.current_time, - duration: state.duration, - volume: state.volume, - current_track: state.current_track?.title, - playlist_length: state.playlist?.length - }); - setIsPlaying(state.is_playing || false) setCurrentTime(state.current_time || 0) setDuration(state.duration || 0) @@ -173,11 +144,9 @@ export function MusicPlayerProvider({ children }: MusicPlayerProviderProps) { setCurrentTrack(state.current_track || null) } - console.log('๐ŸŽต MusicPlayerContext: Registering player_state_update listener'); socket.on('player_state_update', handlePlayerStateUpdate) return () => { - console.log('๐ŸŽต MusicPlayerContext: Cleaning up SocketIO listeners'); socket.off('player_state_update', handlePlayerStateUpdate) } }, [socket]) diff --git a/src/contexts/SocketContext.tsx b/src/contexts/SocketContext.tsx index 44b6109..7240f19 100644 --- a/src/contexts/SocketContext.tsx +++ b/src/contexts/SocketContext.tsx @@ -34,8 +34,6 @@ export const SocketProvider: React.FC = ({ children }) => { const { user, loading } = useAuth(); useEffect(() => { - console.log('๐Ÿ”Œ SocketProvider: Creating socket connection'); - // Create socket connection const newSocket = io("http://localhost:5000", { withCredentials: true, // Include cookies for authentication @@ -44,101 +42,48 @@ export const SocketProvider: React.FC = ({ children }) => { upgrade: false, // Disable WebSocket upgrade }); - console.log('๐Ÿ”Œ SocketProvider: Socket created', { - id: newSocket.id, - connected: newSocket.connected, - disconnected: newSocket.disconnected - }); - // Set up event listeners newSocket.on("connect", () => { - console.log('โœ… SocketIO: Connected successfully', { - id: newSocket.id, - transport: newSocket.io.engine.transport.name - }); - - // Test if events work at all - console.log('๐Ÿงช SocketIO: Sending test event...'); - newSocket.emit("test_event", { message: "Frontend test" }); - - // Send manual test event - console.log('๐Ÿงช SocketIO: Sending manual test event...'); - newSocket.emit("manual_test", { message: "Frontend manual test" }); // Send authentication after connection - console.log('๐Ÿ” SocketIO: Sending authentication...'); newSocket.emit("authenticate", {}); }); - newSocket.on("auth_success", (data) => { - console.log('๐ŸŽ‰ SocketIO: Authentication successful', data); + newSocket.on("auth_success", () => { setIsConnected(true); }); - newSocket.on("auth_error", (data) => { - console.error('โŒ SocketIO: Authentication failed', data); + newSocket.on("auth_error", () => { setIsConnected(false); newSocket.disconnect(); }); - newSocket.on("disconnect", (reason) => { - console.log('๐Ÿ”Œ SocketIO: Disconnected', { reason }); + newSocket.on("disconnect", () => { setIsConnected(false); }); - newSocket.on("connect_error", (error) => { - console.error('โŒ SocketIO: Connection error', error); + newSocket.on("connect_error", () => { setIsConnected(false); }); - // Listen for player state updates - newSocket.on("player_state_update", (data) => { - console.log('๐ŸŽต SocketIO: Player state update received', data); - }); - - // Listen for credits updates - newSocket.on("credits_changed", (data) => { - console.log('๐Ÿ’ฐ SocketIO: Credits changed', data); - }); - - // Listen for test response - newSocket.on("test_response", (data) => { - console.log('๐Ÿงช SocketIO: Test response received', data); - }); - setSocket(newSocket); // Clean up on unmount return () => { - console.log('๐Ÿ”Œ SocketProvider: Cleaning up socket'); newSocket.close(); }; }, []); // Connect/disconnect based on authentication state useEffect(() => { - console.log('๐Ÿ”„ SocketProvider: Auth state changed', { - hasSocket: !!socket, - loading, - hasUser: !!user, - userEmail: user?.email, - isConnected, - socketConnected: socket?.connected - }); - if (!socket || loading) { - console.log('โณ SocketProvider: Waiting for socket or user loading...'); return; } if (user && !isConnected) { - console.log('๐Ÿš€ SocketProvider: User authenticated, connecting socket...'); socket.connect(); } else if (!user && isConnected) { - console.log('๐Ÿ”Œ SocketProvider: User logged out, disconnecting socket...'); socket.disconnect(); - } else { - console.log('โšก SocketProvider: No action needed', { user: !!user, isConnected }); } }, [socket, user, loading, isConnected]); diff --git a/src/services/api.ts b/src/services/api.ts index 8b584bd..57b01e4 100644 --- a/src/services/api.ts +++ b/src/services/api.ts @@ -82,11 +82,8 @@ class ApiService { }) if (response.ok) { - console.log('Token refreshed successfully') return true } else { - console.log('Token refresh failed:', response.status) - // If refresh token is also expired (401), trigger logout if (response.status === 401) { this.handleLogout() @@ -103,9 +100,6 @@ class ApiService { * Handle logout when refresh token expires */ private handleLogout() { - // Clear any local storage or state if needed - console.log('Refresh token expired, user needs to login again') - // Dispatch a custom event that the AuthContext can listen to window.dispatchEvent(new CustomEvent('auth:refresh-token-expired')) }