Follow activities and cursor option in CodeSandbox Live mode

🌈 Follow activities and cursor option in CodeSandbox Live mode

What is this feature?

There are two parts to this feature:

• Feature 1: There should be an option to follow the cursor of the active collaborators on the screen
• Feature 2: There should also be an option to "follow" all the activities of the main collaborator on screen

How the feature should work?

• Feature 1: The way in which this would work is straightforward - each of the viewers and collaborators can see the cursor of all the collaborators on the screen. This is very similar to the functionality in Miro.com for "Show collaborator's cursors"

• Feature 2: For this second part to work, there needs to be a concept of a main collaborator which every other viewer and collaborator follows the exact movement of.

Once this main collaborator has been selected:

• If the main collaborator switches to another file, all the viewers and collaborators active file in the editor would also change in real-time
• If the main collaborator closes the preview pane, for example, this closure should also reflect for all the viewers and collaborators

The effect is as if the main collaborator is sharing their screen with the participants, however the experience would be a whole lot more accessible and interactive - as the live collaboration functions should still work as normal too.

By combining these two features 1 & 2, could enable a rich interactive and accessible experience difficult to replicate with any alternatives out there.

Ideas on how it can be implemented?

• Feature 1: following all collaborators cursors should be fairly straightforward (famous last words). The x, y coordinates of the collaborators are shared with the participants and an indicator shown on screen to represent the cursor. This indicator could be kept in the same colour as the collaborator's colour for other live sharing features like the currently selected file or line within a file.

• Feature 2: This feature is definitely has significant complexity, and may have edge cases. The actions of the main collaborator should be sent to the viewers and other collaborators and applied, as if they had done that action themselves. Since a two way connection exists between those inside a Codesandbox Live environment - the tricky part here would be to decide what actions are acceptable to be transferred or not? Certainly switches to other files would be easy. It becomes more tricky if the viewer or collaborator already has local changes on their system e.g. they have closed a pane which is open on the main collaborator's side. In this case, these differences should be determined and applied constantly.

Also, a few questions around control arise:

• Who should be able to opt-in or opt-out of this feature - does all the power lie with the main collaborator or can the viewer or other collaborators opt out of "follow the leader" feature?
• Also, if the main collaborator switches mid-way during a live session, how does this switch happen?

Please thumbs up if you would like to see this feature worked on!

No files, tests, or specific entry points are named. Start by locating the CodeSandbox Live collaboration entry points and mapping how cursor, active-file, pane, and collaborator state are represented. Resolve opt-in, opt-out, handoff, and local-change behavior before implementation; done means both cursor following and leader activity following have defined behavior.