diff --git a/src/app/room/[slug]/page.tsx b/src/app/room/[slug]/page.tsx index 66e6dfc..6ea3cbf 100644 --- a/src/app/room/[slug]/page.tsx +++ b/src/app/room/[slug]/page.tsx @@ -51,6 +51,7 @@ export default function RoomPage() { currentParticipantId, roomName, updateLocation, + clearLocation, setStatus, addWaypoint, removeWaypoint, @@ -93,16 +94,18 @@ export default function RoomPage() { highAccuracy: true, }); - // Auto-start location sharing when connected (only once) - const hasAutoStartedRef = useRef(false); - - useEffect(() => { - if (isConnected && currentUser && !hasAutoStartedRef.current) { - console.log('Auto-starting location sharing (first time)'); - hasAutoStartedRef.current = true; + // Location sharing is opt-in - user must click to start + // Handler for toggling location sharing + const handleToggleSharing = useCallback(() => { + if (isSharing) { + console.log('Stopping location sharing and clearing location'); + stopSharing(); + clearLocation(); + } else { + console.log('Starting location sharing'); startSharing(); } - }, [isConnected, currentUser, startSharing]); + }, [isSharing, startSharing, stopSharing, clearLocation]); // Track if we've centered on user's location yet const hasCenteredRef = useRef(false); @@ -188,7 +191,7 @@ export default function RoomPage() { roomSlug={slug} participantCount={participants.length} isSharing={isSharing} - onToggleSharing={() => (isSharing ? stopSharing() : startSharing())} + onToggleSharing={handleToggleSharing} onShare={() => setShowShare(true)} onToggleParticipants={() => setShowParticipants(!showParticipants)} /> diff --git a/src/hooks/useRoom.ts b/src/hooks/useRoom.ts index 231f633..eca0408 100644 --- a/src/hooks/useRoom.ts +++ b/src/hooks/useRoom.ts @@ -42,6 +42,7 @@ interface UseRoomReturn { currentParticipantId: string | null; roomName: string; updateLocation: (location: ParticipantLocation) => void; + clearLocation: () => void; setStatus: (status: Participant['status']) => void; addWaypoint: (waypoint: Omit) => void; removeWaypoint: (waypointId: string) => void; @@ -136,6 +137,12 @@ export function useRoom({ slug, userName, userEmoji }: UseRoomOptions): UseRoomR syncRef.current.updateLocation(locationState); }, []); + // Clear location (when user stops sharing) + const clearLocation = useCallback(() => { + if (!syncRef.current) return; + syncRef.current.clearLocation(); + }, []); + // Set status const setStatus = useCallback((status: Participant['status']) => { if (!syncRef.current) return; @@ -187,6 +194,7 @@ export function useRoom({ slug, userName, userEmoji }: UseRoomOptions): UseRoomR currentParticipantId: participantIdRef.current, roomName, updateLocation, + clearLocation, setStatus, addWaypoint, removeWaypoint, diff --git a/src/lib/sync.ts b/src/lib/sync.ts index fe78927..0995cd1 100644 --- a/src/lib/sync.ts +++ b/src/lib/sync.ts @@ -281,6 +281,18 @@ export class RoomSync { } } + clearLocation(): void { + console.log('RoomSync.clearLocation called'); + if (this.state.participants[this.participantId]) { + delete this.state.participants[this.participantId].location; + this.state.participants[this.participantId].lastSeen = new Date().toISOString(); + // Broadcast a null location to clear it for other participants + this.send({ type: 'location', participantId: this.participantId, location: null as any }); + console.log('Location cleared for participant:', this.participantId); + this.notifyStateChange(); + } + } + updateStatus(status: string): void { if (this.state.participants[this.participantId]) { this.state.participants[this.participantId].status = status;