Merge pull request #2507 from ably/EDU-1887-Fix-spaces-live-cursors-JS-example

Live cursors Javascript example, users cursor not rendering.

Author: GregHolmes

examples/spaces-live-cursors/javascript/src/script.ts

@@ -40,18 +40,23 @@ async function connect() {
   const space = await spaces.get(spaceName);
   const parentRef = document.getElementById('live-cursors');
 
-  if (!parentRef || !(parentRef instanceof HTMLDivElement)) return;
+  if (!parentRef || !(parentRef instanceof HTMLDivElement)) {
+    return;
+  }
 
-  await space.enter({
-    name: mockNames[Math.floor(Math.random() * mockNames.length)],
-    userColors: { cursorColor: colors[Math.floor(Math.random() * colors.length)] },
-  });
+  parentRef.style.cursor = 'default';
 
   space.cursors.subscribe('update', async (cursorUpdate) => {
     const members = await space.members.getAll();
     const member = members.find((member) => member.connectionId === cursorUpdate.connectionId);
 
-    if (!member) return;
+    if (!member) {
+      return;
+    }
+
+    if (client.connection.id === cursorUpdate.connectionId) {
+      return;
+    }
 
     if (cursorUpdate.data?.['state'] === 'leave') {
       document.getElementById(`member-cursor-${member.connectionId}`)?.remove();
@@ -83,6 +88,14 @@ async function connect() {
     parentRef.appendChild(memberCursorContainer);
   });
 
+  const mockName = mockNames[Math.floor(Math.random() * mockNames.length)];
+  const userColor = { cursorColor: colors[Math.floor(Math.random() * colors.length)] };
+
+  await space.enter({
+    name: mockName,
+    userColors: userColor,
+  });
+
   const updateCursorPosition = async (position: CursorPosition) => {
     await space.cursors.set({ position: { x: position.left, y: position.top } });
   };

examples/spaces-live-cursors/react/src/components/LiveCursors.tsx

@@ -8,7 +8,7 @@ export type Member = Omit<SpaceMember, "profileData"> & {
   profileData: { userColors: { cursorColor: string; }; name: string };
 };
 
-// 💡 This component is used to render the cursor of the user
+// 💡 This component is used to update the location of the user's cursor
 const YourCursor = ({
   self,
   parentRef,
@@ -24,28 +24,7 @@ const YourCursor = ({
 
   useTrackCursor(setCursorPosition, parentRef);
 
-  if (!self) return null;
-  if (!cursorPosition || cursorPosition.state === "leave") return null;
-
-  const { cursorColor } = self.profileData.userColors;
-
-  return (
-    <div
-      className="uk-position-absolute uk-animation-fade pointer-events-none"
-      style={{
-        top: `${cursorPosition?.top || 0}px`,
-        left: `${cursorPosition?.left || 0}px`,
-      }}
-    >
-      <CursorSvg cursorColor={cursorColor} />
-      <div
-        style={{ backgroundColor: cursorColor }}
-        className="uk-badge uk-position-relative text-white transform translate-x-4 -translate-y-1 px-3 py-2"
-      >
-        You
-      </div>
-    </div>
-  );
+  return null;
 };
 
 // 💡 This component is used to render the cursors of other users in the space