rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add debounce to mouse event

Browse source
This commit is contained in:
Eduard-Constantin Ibinceanu 2024-10-04 16:57:07 +00:00
parent 570e2d4496
commit 2f91b75247
1 changed files with 87 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

135
apps/web/components/Objects/Editor/EditorWrapper.tsx
View file

@ -14,7 +14,8 @@ import { IndexeddbPersistence } from 'y-indexeddb'
import { getCollaborationServerUrl } from '@services/config/config'
import randomColor from 'randomcolor'
import MouseMovements from './MouseMovements'
import { v4 as uuidv4 } from 'uuid';
import { v4 as uuidv4 } from 'uuid'
import { debounce } from '@/lib/utils'
interface EditorWrapperProps {
content: string
@ -25,73 +26,75 @@ interface EditorWrapperProps {
function EditorWrapper(props: EditorWrapperProps): JSX.Element {
const session = useLHSession() as any
const access_token = session?.data?.tokens?.access_token;
const access_token = session?.data?.tokens?.access_token
// Define provider in the state
const [provider, setProvider] = React.useState<HocuspocusProvider | null>(null);
const [thisPageColor, setThisPageColor] = useState(randomColor({ luminosity: 'light' }) as string)
let uuid = uuidv4();
const [onlinePageInstanceID, setOnlinePageInstanceID] = useState(uuid as string)
const [provider, setProvider] = React.useState<HocuspocusProvider | null>(
null
)
const [thisPageColor, setThisPageColor] = useState(
randomColor({ luminosity: 'light' }) as string
)
let uuid = uuidv4()
const [onlinePageInstanceID, setOnlinePageInstanceID] = useState(
uuid as string
)
/* Collaboration Features */
const collab = getCollaborationServerUrl()
const isCollabEnabledOnThisOrg = props.org.config.config.features.collaboration.enabled && collab
const isCollabEnabledOnThisOrg =
props.org.config.config.features.collaboration.enabled && collab
const doc = new Y.Doc()
// mouse movement
const [mouseMovements, setMouseMovements] = useState({} as any);
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
const [mouseMovements, setMouseMovements] = useState({} as any)
const timeoutRef = useRef<NodeJS.Timeout | null>(null)
const debouncedSetMouseMovements = (newMovements: any) => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
clearTimeout(timeoutRef.current)
}
timeoutRef.current = setTimeout(() => {
setMouseMovements(newMovements);
}, 10);
};
setMouseMovements(newMovements)
}, 10)
}
// Store the Y document in the browser
new IndexeddbPersistence(props.activity.activity_uuid, doc)
document.addEventListener("mousemove", (event) => {
// Share any information you like
provider?.setAwarenessField("userMouseMovement", {
user: session.data.user,
document.addEventListener('mousemove', debounce((event: MouseEvent) => {
provider?.setAwarenessField('userMouseMovement', {
user: session.user,
mouseX: event.clientX,
mouseY: event.clientY,
color: thisPageColor,
onlineInstanceID: onlinePageInstanceID
});
});
onlineInstanceID: onlinePageInstanceID,
})
}, 300))
async function setContent(content: any) {
let activity = props.activity
activity.content = content
provider?.setAwarenessField("savings_states", {
provider?.setAwarenessField('savings_states', {
[session.data.user.user_uuid]: {
status: 'action_save',
timestamp: new Date().toISOString(),
user: session.data.user
}
});
user: session.data.user,
},
})
toast.promise(updateActivity(activity, activity.activity_uuid, access_token), {
toast.promise(
updateActivity(activity, activity.activity_uuid, access_token),
{
loading: 'Saving...',
success: <b>Activity saved!</b>,
error: <b>Could not save.</b>,
})
}
)
}
// Create a ref to store the last save timestamp of each user
const lastSaveTimestampRef = useRef({}) as any;
const lastSaveTimestampRef = useRef({}) as any
useEffect(() => {
// Check if provider is not already set
@ -104,18 +107,18 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
// TODO(alpha code): This whole block of code should be improved to something more efficient and less hacky
onConnect: () => {
// Set the online page instance ID
setOnlinePageInstanceID(uuidv4());
setOnlinePageInstanceID(uuidv4())
// Set the user color
setThisPageColor(randomColor({ luminosity: 'light' }) as string);
setThisPageColor(randomColor({ luminosity: 'light' }) as string)
},
onAwarenessUpdate: ({ states }) => {
const usersStates = states;
const usersStates = states
/* Showing user mouse movement */
usersStates.forEach((userState: any) => {
if (userState.userMouseMovement) {
const userMouseMovement = userState.userMouseMovement;
const userMouseMovement = userState.userMouseMovement
// Update the mouse movements state
debouncedSetMouseMovements((prevMovements: any) => {
@ -126,15 +129,12 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
mouseX: userMouseMovement.mouseX,
mouseY: userMouseMovement.mouseY,
color: userMouseMovement.color,
onlinePageInstanceID: userMouseMovement.onlineInstanceID
onlinePageInstanceID: userMouseMovement.onlineInstanceID,
},
};
}
);
})
}
});
})
/* Notifiying if a user has saved course content */
usersStates.forEach((userState: any) => {
@ -142,40 +142,51 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
const savingsState = userState.savings_states
// Check if a user has saved the document
Object.keys(savingsState).forEach(user => {
const userObj = savingsState[user].user;
const status = savingsState[user].status;
const timestamp = savingsState[user].timestamp;
Object.keys(savingsState).forEach((user) => {
const userObj = savingsState[user].user
const status = savingsState[user].status
const timestamp = savingsState[user].timestamp
// Get the current timestamp
const currentTimestamp = new Date().getTime();
const currentTimestamp = new Date().getTime()
// If the user has saved the document and the timestamp is close to the current timestamp, show the toast
if (status === 'action_save' && Math.abs(currentTimestamp - new Date(timestamp).getTime()) < 10) { // 5000 milliseconds = 5 seconds
if (
status === 'action_save' &&
Math.abs(currentTimestamp - new Date(timestamp).getTime()) <
10
) {
// 5000 milliseconds = 5 seconds
// Update the last save timestamp for this user
lastSaveTimestampRef.current[user] = timestamp;
lastSaveTimestampRef.current[user] = timestamp
toast.success(`${userObj.first_name} ${userObj.last_name} has saved the document`);
toast.success(
`${userObj.first_name} ${userObj.last_name} has saved the document`
)
}
});
})
}
})
},
});
})
// Set the new provider
setProvider(newProvider);
setProvider(newProvider)
}
}, []);
}, [])
{
return (
<>
<Toast></Toast>
<MouseMovements org={props.org} movements={mouseMovements} onlinePageInstanceID={onlinePageInstanceID} />
<MouseMovements
org={props.org}
movements={mouseMovements}
onlinePageInstanceID={onlinePageInstanceID}
/>
<OrgProvider orgslug={props.org.slug}>
{!session.isLoading && (<Editor
{!session.isLoading && (
<Editor
org={props.org}
course={props.course}
activity={props.activity}
@ -187,14 +198,12 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
isCollabEnabledOnThisOrg={isCollabEnabledOnThisOrg}
userRandomColor={thisPageColor}
mouseMovements={mouseMovements}
></Editor>)}
></Editor>
)}
</OrgProvider>
</>
)
}
}
export default EditorWrapper