Merge pull request #912 from nextcloud/fix/follow-user

fix: follow user

Author: hweihwang

playwright/e2e/follow.spec.ts

@@ -0,0 +1,99 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { Buffer } from 'buffer'
+import { expect } from '@playwright/test'
+import { createRandomUser, login } from '@nextcloud/e2e-test-server/playwright'
+import { test } from '../support/fixtures/random-user'
+import {
+	createUserShare,
+	openFilesApp,
+	resolveStoredFileName,
+	openWhiteboardFromFiles,
+} from '../support/utils'
+
+test.beforeEach(async ({ page }) => {
+	await openFilesApp(page)
+})
+
+test('following a collaborator requests viewport sync', async ({ page, browser }) => {
+	test.setTimeout(150000)
+	const boardName = `Follow board ${Date.now()}`
+
+	await page.getByRole('button', { name: 'New' }).click()
+	await page.getByRole('menuitem', { name: 'New whiteboard' }).click()
+	const nameField = page.getByRole('textbox', { name: /name/i })
+	if (await nameField.count()) {
+		await nameField.fill(boardName)
+	} else {
+		await page.keyboard.type(boardName)
+	}
+	await page.getByRole('button', { name: 'Create' }).click()
+	await openFilesApp(page)
+	const storedName = await resolveStoredFileName(page, boardName)
+
+	const followerUser = await createRandomUser()
+	await createUserShare(page, {
+		fileName: storedName,
+		shareWith: followerUser.userId,
+		permissions: 15,
+	})
+
+	await openWhiteboardFromFiles(page, storedName)
+	await expect(page.locator('.network-status')).toHaveCount(0, { timeout: 30000 })
+
+	const baseOrigin = new URL(await page.url()).origin
+	const followerContext = await browser.newContext({
+		baseURL: `${baseOrigin}/index.php/`,
+		storageState: undefined,
+	})
+	const followerPage = await followerContext.newPage()
+
+	const requestViewportFrames: string[] = []
+	followerPage.on('websocket', (socket) => {
+		if (!socket.url().includes('/socket.io/')) {
+			return
+		}
+
+		socket.on('framesent', (payload) => {
+			const raw = typeof payload === 'string'
+				? payload
+				: (payload as { payload?: unknown; data?: unknown }).payload
+					|| (payload as { payload?: unknown; data?: unknown }).data
+					|| payload
+			if (typeof raw !== 'string' && !Buffer.isBuffer(raw) && !(raw instanceof ArrayBuffer)) {
+				return
+			}
+			const frame = typeof raw === 'string' ? raw : Buffer.from(raw).toString('utf-8')
+			if (!frame.startsWith('42')) {
+				return
+			}
+			try {
+				const event = JSON.parse(frame.slice(2))
+				if (Array.isArray(event) && event[0] === 'request-viewport') {
+					requestViewportFrames.push(frame)
+				}
+			} catch {
+				return
+			}
+		})
+	})
+
+	await login(followerPage.request, followerUser)
+	await openWhiteboardFromFiles(followerPage, storedName, { preferSharedView: true })
+	await expect(followerPage.locator('.network-status')).toHaveCount(0, { timeout: 30000 })
+
+	const collaboratorEntry = followerPage.locator('.UserList__collaborator:not(.is-current-user)')
+	await expect(collaboratorEntry).toHaveCount(1, { timeout: 30000 })
+	await collaboratorEntry.first().click()
+
+	await expect.poll(() => requestViewportFrames.length, {
+		timeout: 20000,
+		interval: 500,
+	}).toBeGreaterThan(0)
+
+	await followerPage.close()
+	await followerContext.close()
+})

src/App.tsx

@@ -38,6 +38,7 @@ import { useTimer } from './hooks/useTimer'
 import { TimerOverlay } from './components/Timer'
 import { useCollaborationStore } from './stores/useCollaborationStore'
 import { useElementCreatorTracking } from './hooks/useElementCreatorTracking'
+import { useFollowedUser } from './hooks/useFollowedUser'
 import { CreatorDisplay } from './components/CreatorDisplay'
 import { useCreatorDisplayStore } from './stores/useCreatorDisplayStore'
 import type { ExcalidrawElement } from '@nextcloud/excalidraw/dist/types/excalidraw/element/types'
@@ -148,38 +149,7 @@ export default function App({
 	// Creator tracking
 	const creatorDisplaySettings = useCreatorDisplayStore(state => state.settings)
 	useElementCreatorTracking({ excalidrawAPI, enabled: true })
-
-	// Expose followUser globally for recording agent access
-	useEffect(() => {
-		// Create a followUser function that accesses the collaboration store directly
-		window.followUser = (userId: string) => {
-			if (!excalidrawAPI) {
-				console.warn('[Collaboration] Cannot follow user: Excalidraw API not available')
-				return
-			}
-
-			const currentSocket = useCollaborationStore.getState().socket
-			if (!currentSocket?.connected) {
-				logger.warn('[Collaboration] Cannot follow user: Socket not connected')
-				return
-			}
-
-			// Set the followed user ID in the collaboration store
-			useCollaborationStore.setState({ followedUserId: userId })
-			logger.info(`[Collaboration] Recording agent now following user: ${userId}`)
-
-			// Debug: Log current collaboration store state
-			const state = useCollaborationStore.getState()
-			logger.debug('[Collaboration] Current collaboration store state:', {
-				followedUserId: state.followedUserId,
-				socketConnected: state.socket?.connected,
-				status: state.status,
-			})
-		}
-		return () => {
-			delete window.followUser
-		}
-	}, [excalidrawAPI])
+	useFollowedUser({ excalidrawAPI, fileId: normalizedFileId })
 
 	useEffect(() => {
 		const handleVideoError = (e: Event) => {

src/hooks/useFollowedUser.ts

@@ -0,0 +1,90 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { useCallback, useEffect } from 'react'
+import type { ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types/types'
+import type { OnUserFollowedPayload } from '@nextcloud/excalidraw/dist/types/excalidraw/types'
+import { useCollaborationStore } from '../stores/useCollaborationStore'
+import logger from '../utils/logger'
+
+type UseFollowedUserOptions = {
+	excalidrawAPI: ExcalidrawImperativeAPI | null
+	fileId: number
+}
+
+export function useFollowedUser({ excalidrawAPI, fileId }: UseFollowedUserOptions) {
+	const handleUserFollow = useCallback((payload: OnUserFollowedPayload) => {
+		const targetUserId = payload.userToFollow?.socketId
+		if (!targetUserId) {
+			logger.warn('[Collaboration] Invalid follow payload', payload)
+			return
+		}
+
+		if (payload.action === 'FOLLOW') {
+			useCollaborationStore.setState({ followedUserId: targetUserId })
+			const { socket } = useCollaborationStore.getState()
+			if (socket?.connected && Number.isFinite(fileId)) {
+				socket.emit('request-viewport', {
+					fileId: fileId.toString(),
+					userId: targetUserId,
+				})
+			}
+			logger.info(`[Collaboration] Following user from UI: ${targetUserId}`)
+			return
+		}
+
+		const currentFollowed = useCollaborationStore.getState().followedUserId
+		if (currentFollowed === targetUserId) {
+			useCollaborationStore.setState({ followedUserId: null })
+			logger.info(`[Collaboration] Stopped following user from UI: ${targetUserId}`)
+		}
+	}, [fileId])
+
+	useEffect(() => {
+		if (!excalidrawAPI) {
+			return
+		}
+
+		const unsubscribe = excalidrawAPI.onUserFollow(handleUserFollow)
+		return () => {
+			if (typeof unsubscribe === 'function') {
+				unsubscribe()
+			}
+		}
+	}, [excalidrawAPI, handleUserFollow])
+
+	// Expose followUser globally for recording agent access
+	useEffect(() => {
+		if (!excalidrawAPI) {
+			return
+		}
+
+		window.followUser = (userId: string) => {
+			if (!excalidrawAPI) {
+				logger.warn('[Collaboration] Cannot follow user: Excalidraw API not available')
+				return
+			}
+
+			const currentSocket = useCollaborationStore.getState().socket
+			if (!currentSocket?.connected) {
+				logger.warn('[Collaboration] Cannot follow user: Socket not connected')
+				return
+			}
+
+			useCollaborationStore.setState({ followedUserId: userId })
+			logger.info(`[Collaboration] Recording agent now following user: ${userId}`)
+
+			const state = useCollaborationStore.getState()
+			logger.debug('[Collaboration] Current collaboration store state:', {
+				followedUserId: state.followedUserId,
+				socketConnected: state.socket?.connected,
+				status: state.status,
+			})
+		}
+		return () => {
+			delete window.followUser
+		}
+	}, [excalidrawAPI])
+}