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

feat: add live users avatar indicators

Browse source
This commit is contained in:
swve 2024-04-05 00:49:14 +02:00
parent 54718d7111
commit 6a47202c78
5 changed files with 100 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -100,6 +100,14 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
document: doc,
// 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());
// Set the user color
setThisPageColor(randomColor({ luminosity: 'light' }) as string);
},
onAwarenessUpdate: ({ states }) => {
const usersStates = states;
/* Showing user mouse movement */
@ -121,6 +129,7 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
};
}
);
}
});
@ -162,7 +171,7 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
return (
<>
<Toast></Toast>
<MouseMovements movements={mouseMovements} onlinePageInstanceID={onlinePageInstanceID} />
<MouseMovements org={props.org} movements={mouseMovements} onlinePageInstanceID={onlinePageInstanceID} />
<OrgProvider orgslug={props.org.slug}>
{!session.isLoading && (<Editor
org={props.org}
@ -175,6 +184,7 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
hocuspocusProvider={provider}
isCollabEnabledOnThisOrg={isCollabEnabledOnThisOrg}
userRandomColor={thisPageColor}
mouseMovements={mouseMovements}
></Editor>)}
</OrgProvider>
</>