diff --git a/app/client/src/entities/FeatureFlag.ts b/app/client/src/entities/FeatureFlag.ts index 48587fdf9d..43bc48d3cf 100644 --- a/app/client/src/entities/FeatureFlag.ts +++ b/app/client/src/entities/FeatureFlag.ts @@ -1,6 +1,7 @@ type FeatureFlag = { COMMENT: boolean; JS_EDITOR: boolean; + MULTIPLAYER: boolean; LINTING: boolean; SNIPPET: boolean; }; diff --git a/app/client/src/pages/Editor/Canvas.tsx b/app/client/src/pages/Editor/Canvas.tsx index f1748eec17..5b1925ea04 100644 --- a/app/client/src/pages/Editor/Canvas.tsx +++ b/app/client/src/pages/Editor/Canvas.tsx @@ -1,5 +1,5 @@ import React, { memo, useCallback } from "react"; -import store from "store"; +import store, { useSelector } from "store"; import WidgetFactory from "utils/WidgetFactory"; import { RenderModes } from "constants/WidgetConstants"; import { ContainerWidgetProps } from "widgets/ContainerWidget"; @@ -17,6 +17,7 @@ import { APP_COLLAB_EVENTS, NAMESPACE_COLLAB_PAGE_EDIT, } from "constants/AppCollabConstants"; +import { isMultiplayerEnabledForUser as isMultiplayerEnabledForUserSelector } from "selectors/appCollabSelectors"; interface CanvasProps { dsl: ContainerWidgetProps; @@ -46,12 +47,16 @@ const shareMousePointer = (e: any, pageId: string) => { // TODO(abhinav): get the render mode from context const Canvas = memo((props: CanvasProps) => { const { pageId } = props; + const isMultiplayerEnabledForUser = useSelector( + isMultiplayerEnabledForUserSelector, + ); const delayedShareMousePointer = useCallback( throttle((e) => shareMousePointer(e, pageId), 50, { trailing: false, }), [shareMousePointer, pageId], ); + try { return ( <> @@ -62,16 +67,19 @@ const Canvas = memo((props: CanvasProps) => { id="art-board" onMouseMove={(e) => { e.persist(); + if (!isMultiplayerEnabledForUser) return; delayedShareMousePointer(e); }} width={props.dsl.rightColumn} > {props.dsl.widgetId && WidgetFactory.createWidget(props.dsl, RenderModes.CANVAS)} - + {isMultiplayerEnabledForUser && ( + + )} ); diff --git a/app/client/src/pages/Editor/EditorHeader.tsx b/app/client/src/pages/Editor/EditorHeader.tsx index 83d7be9bc7..96846e4815 100644 --- a/app/client/src/pages/Editor/EditorHeader.tsx +++ b/app/client/src/pages/Editor/EditorHeader.tsx @@ -57,6 +57,7 @@ import { useLocation } from "react-router"; import { setIsGitSyncModalOpen } from "actions/gitSyncActions"; import RealtimeAppEditors from "./RealtimeAppEditors"; import { EditorSaveIndicator } from "./EditorSaveIndicator"; +import { isMultiplayerEnabledForUser as isMultiplayerEnabledForUserSelector } from "selectors/appCollabSelectors"; const HeaderWrapper = styled(StyledHeader)` width: 100%; @@ -227,6 +228,10 @@ export function EditorHeader(props: EditorHeaderProps) { dispatch(setIsGitSyncModalOpen(true)); }, [dispatch, setIsGitSyncModalOpen]); + const isMultiplayerEnabledForUser = useSelector( + isMultiplayerEnabledForUserSelector, + ); + return ( @@ -276,7 +281,9 @@ export function EditorHeader(props: EditorHeaderProps) { - + {isMultiplayerEnabledForUser && ( + + )} state.ui.appCollab; @@ -11,3 +12,5 @@ export const getRealtimeAppEditors = createSelector( (appCollab: AppCollabReducerState, currentUser) => appCollab.editors.filter((el) => el.email !== currentUser?.email), ); + +export const isMultiplayerEnabledForUser = () => getFeatureFlags().MULTIPLAYER;