Allow following read-only users

Author: CompuIves

packages/app/src/app/overmind/effects/live/index.ts

@@ -4,6 +4,7 @@ import {
   Module,
   RoomInfo,
   UserViewRange,
+  UserSelection,
 } from '@codesandbox/common/lib/types';
 import {
   captureException,
@@ -519,7 +520,7 @@ class Live {
   sendUserSelection(
     moduleShortid: string | null,
     liveUserId: string,
-    selection: any
+    selection: UserSelection
   ) {
     return this.send('user:selection', {
       liveUserId,

packages/app/src/app/overmind/effects/vscode/ModelsHandler.ts

@@ -336,17 +336,50 @@ export class ModelsHandler {
     });
   }
 
+  private getSelectionDecorationId = (
+    userId: string,
+    modelId: string,
+    shortid: string
+  ) => [userId, modelId, shortid].join('|');
+
+  private cleanUserSelections = (
+    model: any,
+    moduleShortid: string,
+    userSelectionsToKeep: EditorSelection[]
+  ) => {
+    const existingSelectionDecorations = Object.keys(
+      this.userSelectionDecorations
+    ).filter(s => s.endsWith([model.id, moduleShortid].join('|')));
+
+    const newUserSelections = {};
+    for (let i = 0; i < userSelectionsToKeep.length; i++) {
+      newUserSelections[userSelectionsToKeep[i].userId] =
+        userSelectionsToKeep[i];
+    }
+
+    existingSelectionDecorations.forEach(existingDecorationId => {
+      const userId = existingDecorationId.split('|')[0];
+      if (!newUserSelections[userId]) {
+        const decorationId = this.getSelectionDecorationId(
+          userId,
+          model.id,
+          moduleShortid
+        );
+        this.userSelectionDecorations[decorationId] = model.deltaDecorations(
+          this.userSelectionDecorations[decorationId] || [],
+          []
+        );
+      }
+    });
+  };
+
   nameTagTimeouts: { [name: string]: number } = {};
 
   public async updateUserSelections(
     module: Module,
     userSelections: EditorSelection[],
     showNameTag = true
   ) {
-    if (!this.moduleModels['/sandbox' + module.path]) {
-      return;
-    }
-
     const moduleModel = this.getModuleModelByPath(module.path);
 
     if (!moduleModel?.model) {
@@ -356,10 +389,16 @@ export class ModelsHandler {
     const model = await moduleModel.model;
     const lines = model.getLinesContent() || [];
 
+    this.cleanUserSelections(model, module.shortid, userSelections);
+
     userSelections.forEach((data: EditorSelection) => {
       const { userId } = data;
 
-      const decorationId = userId + model.id + module.shortid;
+      const decorationId = this.getSelectionDecorationId(
+        userId,
+        model.id,
+        module.shortid
+      );
       if (data.selection === null) {
         this.userSelectionDecorations[decorationId] = model.deltaDecorations(
           this.userSelectionDecorations[decorationId] || [],

packages/app/src/app/overmind/effects/vscode/index.ts

@@ -617,15 +617,17 @@ export class VSCodeEffect {
     if (activeEditor) {
       const model = activeEditor.getModel();
 
-      const lineColumnPos = indexToLineAndColumn(
-        model.getLinesContent() || [],
-        pos
-      );
+      if (model) {
+        const lineColumnPos = indexToLineAndColumn(
+          model.getLinesContent() || [],
+          pos
+        );
 
-      activeEditor.revealPositionInCenterIfOutsideViewport(
-        lineColumnPos,
-        scrollType
-      );
+        activeEditor.revealPositionInCenterIfOutsideViewport(
+          lineColumnPos,
+          scrollType
+        );
+      }
     }
   }
 

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -519,10 +519,7 @@ export const moduleSelected: AsyncAction<
     await actions.editor.internal.setCurrentModule(module);
 
     if (state.live.isLive && state.live.liveUser && state.live.roomInfo) {
-      effects.vscode.updateUserSelections(
-        module,
-        actions.live.internal.getSelectionsForModule(module)
-      );
+      actions.editor.internal.updateSelectionsOfModule({ module });
       state.live.liveUser.currentModuleShortid = module.shortid;
 
       if (state.live.followingUserId) {

packages/app/src/app/overmind/namespaces/editor/internalActions.ts

@@ -81,6 +81,16 @@ export const initializeLiveSandbox: AsyncAction<Sandbox> = async (
   }
 };
 
+export const updateSelectionsOfModule: AsyncAction<{ module: Module }> = async (
+  { actions, effects },
+  { module }
+) => {
+  effects.vscode.updateUserSelections(
+    module,
+    actions.live.internal.getSelectionsForModule(module)
+  );
+};
+
 export const setModuleSavedCode: Action<{
   moduleShortid: string;
   savedCode: string | null;

packages/app/src/app/overmind/namespaces/live/actions.ts

@@ -2,6 +2,7 @@ import {
   LiveMessage,
   LiveMessageEvent,
   UserViewRange,
+  UserSelection,
 } from '@codesandbox/common/lib/types';
 import { Action, AsyncAction, Operator } from 'app/overmind';
 import { withLoadApp } from 'app/overmind/factories';
@@ -184,15 +185,13 @@ export const sendCurrentSelection: Action = ({ state, effects }) => {
     return;
   }
 
-  if (state.live.isCurrentEditor) {
-    const { liveUserId } = state.live;
-    if (liveUserId) {
-      effects.live.sendUserSelection(
-        state.editor.currentModuleShortid,
-        liveUserId,
-        state.live.currentSelection
-      );
-    }
+  const { liveUserId } = state.live;
+  if (liveUserId) {
+    effects.live.sendUserSelection(
+      state.editor.currentModuleShortid,
+      liveUserId,
+      state.live.currentSelection
+    );
   }
 };
 
@@ -249,36 +248,32 @@ export const onViewRangeChanged: Action<UserViewRange> = (
   }
 };
 
-export const onSelectionChanged: Action<any> = (
+export const onSelectionChanged: Action<UserSelection> = (
   { state, effects },
   selection
 ) => {
   if (!state.live.roomInfo) {
     return;
   }
 
-  if (state.live.isCurrentEditor) {
-    const { liveUserId } = state.live;
-    const moduleShortid = state.editor.currentModuleShortid;
-    if (!moduleShortid || !liveUserId) {
-      return;
-    }
-
-    state.live.currentSelection = selection;
-    const userIndex = state.live.roomInfo.users.findIndex(
-      u => u.id === liveUserId
-    );
+  const { liveUserId } = state.live;
+  const moduleShortid = state.editor.currentModuleShortid;
+  if (!moduleShortid || !liveUserId) {
+    return;
+  }
 
-    if (userIndex > -1) {
-      if (state.live.roomInfo.users[userIndex]) {
-        state.live.roomInfo.users[
-          userIndex
-        ].currentModuleShortid = moduleShortid;
+  state.live.currentSelection = selection;
+  const userIndex = state.live.roomInfo.users.findIndex(
+    u => u.id === liveUserId
+  );
 
-        state.live.roomInfo.users[userIndex].selection = selection;
+  if (userIndex > -1) {
+    const user = state.live.roomInfo.users[userIndex];
+    if (user) {
+      user.currentModuleShortid = moduleShortid;
+      user.selection = selection;
 
-        effects.live.sendUserSelection(moduleShortid, liveUserId, selection);
-      }
+      effects.live.sendUserSelection(moduleShortid, liveUserId, selection);
     }
   }
 };
@@ -364,6 +359,13 @@ export const onFollow: Action<{
   effects.analytics.track('Follow Along in Live');
   state.live.followingUserId = liveUserId;
   actions.live.revealViewRange({ liveUserId });
+
+  if (state.editor.currentModule) {
+    // In case the selections were hidden first
+    actions.editor.internal.updateSelectionsOfModule({
+      module: state.editor.currentModule,
+    });
+  }
 };
 
 export const onUserLeft: Action<{
@@ -387,6 +389,13 @@ export const onStopFollow: Action = ({ state, effects, actions }) => {
   }
 
   state.live.followingUserId = null;
+
+  if (state.editor.currentModule) {
+    // In case the selections were hidden first
+    actions.editor.internal.updateSelectionsOfModule({
+      module: state.editor.currentModule,
+    });
+  }
 };
 
 export const revealViewRange: Action<{ liveUserId: string }> = (

packages/app/src/app/overmind/namespaces/live/internalActions.ts

@@ -167,7 +167,7 @@ export const getSelectionsForModule: Action<Module, EditorSelection[]> = (
     if (
       userId === state.live.liveUserId ||
       user.currentModuleShortid !== moduleShortid ||
-      !state.live.isEditor(userId)
+      (!state.live.isEditor(userId) && state.live.followingUserId !== userId)
     ) {
       return;
     }

packages/app/src/app/overmind/namespaces/live/liveMessageOperators.ts

@@ -60,7 +60,7 @@ export const onUsersChanged: Operator<LiveMessage<{
   users: LiveUser[];
   editor_ids: string[];
   owner_ids: string[];
-}>> = mutate(({ state, effects, actions }, { data }) => {
+}>> = mutate(({ state, actions }, { data }) => {
   if (state.live.isLoading || !state.live.roomInfo || !state.live.isLive) {
     return;
   }
@@ -72,10 +72,9 @@ export const onUsersChanged: Operator<LiveMessage<{
   state.live.roomInfo.ownerIds = data.owner_ids;
 
   if (state.editor.currentModule) {
-    effects.vscode.updateUserSelections(
-      state.editor.currentModule,
-      actions.live.internal.getSelectionsForModule(state.editor.currentModule)
-    );
+    actions.editor.internal.updateSelectionsOfModule({
+      module: state.editor.currentModule,
+    });
   }
 });
 
@@ -96,10 +95,9 @@ export const onUserEntered: Operator<LiveMessage<{
   state.live.roomInfo.ownerIds = data.owner_ids;
 
   if (state.editor.currentModule) {
-    effects.vscode.updateUserSelections(
-      state.editor.currentModule,
-      actions.live.internal.getSelectionsForModule(state.editor.currentModule)
-    );
+    actions.editor.internal.updateSelectionsOfModule({
+      module: state.editor.currentModule,
+    });
   }
 
   // Send our own selections and viewranges to everyone, just to let the others know where
@@ -406,7 +404,13 @@ export const onUserSelection: Operator<LiveMessage<{
   const module = state.editor.currentSandbox.modules.find(
     m => m.shortid === moduleShortid
   );
-  if (module && state.live.isEditor(userSelectionLiveUserId)) {
+
+  const isFollowingUser =
+    state.live.followingUserId === userSelectionLiveUserId;
+  if (
+    module &&
+    (state.live.isEditor(userSelectionLiveUserId) || isFollowingUser)
+  ) {
     const user = state.live.roomInfo.users.find(
       u => u.id === userSelectionLiveUserId
     );
@@ -421,7 +425,7 @@ export const onUserSelection: Operator<LiveMessage<{
         },
       ]);
 
-      if (state.live.followingUserId === userSelectionLiveUserId) {
+      if (isFollowingUser) {
         actions.live.revealCursorPosition({
           liveUserId: userSelectionLiveUserId,
         });

packages/app/src/app/overmind/utils/items.ts

@@ -81,7 +81,11 @@ export function getDisabledItems(store: any): INavigationItem[] {
   }
 
   if (!currentSandbox.owned || !store.isLoggedIn) {
-    return [GITHUB, DEPLOYMENT, LIVE];
+    const returnedItems = [GITHUB, DEPLOYMENT];
+    if (!store.live.isLive) {
+      returnedItems.push(LIVE);
+    }
+    return returnedItems;
   }
 
   return [];