diff --git a/src/excalidraw-app/collab/Collab.tsx b/src/excalidraw-app/collab/Collab.tsx index 76d07bb9..ec0c2a34 100644 --- a/src/excalidraw-app/collab/Collab.tsx +++ b/src/excalidraw-app/collab/Collab.tsx @@ -157,6 +157,8 @@ class Collab extends PureComponent { window.addEventListener("offline", this.onOfflineStatusToggle); window.addEventListener(EVENT.UNLOAD, this.onUnload); + this.onOfflineStatusToggle(); + const collabAPI: CollabAPI = { isCollaborating: this.isCollaborating, onPointerUpdate: this.onPointerUpdate, @@ -168,7 +170,6 @@ class Collab extends PureComponent { }; appJotaiStore.set(collabAPIAtom, collabAPI); - this.onOfflineStatusToggle(); if ( process.env.NODE_ENV === ENV.TEST || diff --git a/src/excalidraw-app/components/AppMainMenu.tsx b/src/excalidraw-app/components/AppMainMenu.tsx index b1c0771e..7b562f8b 100644 --- a/src/excalidraw-app/components/AppMainMenu.tsx +++ b/src/excalidraw-app/components/AppMainMenu.tsx @@ -6,6 +6,7 @@ import { LanguageList } from "./LanguageList"; export const AppMainMenu: React.FC<{ setCollabDialogShown: (toggle: boolean) => any; isCollaborating: boolean; + isCollabEnabled: boolean; }> = React.memo((props) => { return ( @@ -13,10 +14,12 @@ export const AppMainMenu: React.FC<{ - props.setCollabDialogShown(true)} - /> + {props.isCollabEnabled && ( + props.setCollabDialogShown(true)} + /> + )} diff --git a/src/excalidraw-app/components/AppWelcomeScreen.tsx b/src/excalidraw-app/components/AppWelcomeScreen.tsx index 1e34fa81..80fedf9f 100644 --- a/src/excalidraw-app/components/AppWelcomeScreen.tsx +++ b/src/excalidraw-app/components/AppWelcomeScreen.tsx @@ -6,6 +6,7 @@ import { isExcalidrawPlusSignedUser } from "../app_constants"; export const AppWelcomeScreen: React.FC<{ setCollabDialogShown: (toggle: boolean) => any; + isCollabEnabled: boolean; }> = React.memo((props) => { const { t } = useI18n(); let headingContent; @@ -46,9 +47,11 @@ export const AppWelcomeScreen: React.FC<{ - props.setCollabDialogShown(true)} - /> + {props.isCollabEnabled && ( + props.setCollabDialogShown(true)} + /> + )} {!isExcalidrawPlusSignedUser && ( { const [errorMessage, setErrorMessage] = useState(""); const [langCode, setLangCode] = useAtom(appLangCodeAtom); + const isCollabDisabled = isRunningInIframe(); // initial state // --------------------------------------------------------------------------- @@ -272,7 +274,7 @@ const ExcalidrawWrapper = () => { }); useEffect(() => { - if (!collabAPI || !excalidrawAPI) { + if (!excalidrawAPI || (!isCollabDisabled && !collabAPI)) { return; } @@ -283,7 +285,7 @@ const ExcalidrawWrapper = () => { if (!data.scene) { return; } - if (collabAPI.isCollaborating()) { + if (collabAPI?.isCollaborating()) { if (data.scene.elements) { collabAPI .fetchImageFilesFromFirebase({ @@ -353,7 +355,7 @@ const ExcalidrawWrapper = () => { const libraryUrlTokens = parseLibraryTokensFromUrl(); if (!libraryUrlTokens) { if ( - collabAPI.isCollaborating() && + collabAPI?.isCollaborating() && !isCollaborationLink(window.location.href) ) { collabAPI.stopCollaboration(false); @@ -382,7 +384,10 @@ const ExcalidrawWrapper = () => { if (isTestEnv()) { return; } - if (!document.hidden && !collabAPI.isCollaborating()) { + if ( + !document.hidden && + ((collabAPI && !collabAPI.isCollaborating()) || isCollabDisabled) + ) { // don't sync if local state is newer or identical to browser state if (isBrowserStorageStateNewer(STORAGE_KEYS.VERSION_DATA_STATE)) { const localDataState = importFromLocalStorage(); @@ -398,7 +403,7 @@ const ExcalidrawWrapper = () => { excalidrawAPI.updateLibrary({ libraryItems: getLibraryItemsFromStorage(), }); - collabAPI.setUsername(username || ""); + collabAPI?.setUsername(username || ""); } if (isBrowserStorageStateNewer(STORAGE_KEYS.VERSION_FILES)) { @@ -466,7 +471,7 @@ const ExcalidrawWrapper = () => { ); clearTimeout(titleTimeout); }; - }, [collabAPI, excalidrawAPI, setLangCode]); + }, [isCollabDisabled, collabAPI, excalidrawAPI, setLangCode]); useEffect(() => { const unloadHandler = (event: BeforeUnloadEvent) => { @@ -649,7 +654,7 @@ const ExcalidrawWrapper = () => { autoFocus={true} theme={theme} renderTopRightUI={(isMobile) => { - if (isMobile) { + if (isMobile || !collabAPI || isCollabDisabled) { return null; } return ( @@ -663,15 +668,21 @@ const ExcalidrawWrapper = () => { + - {isCollaborating && isOffline && (
{t("alerts.collabOfflineWarning")}
)} - {excalidrawAPI && } + {excalidrawAPI && !isCollabDisabled && ( + + )} {errorMessage && ( setErrorMessage("")}> diff --git a/src/utils.ts b/src/utils.ts index 98dfb48d..c1be211b 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -748,6 +748,8 @@ export const getFrame = () => { } }; +export const isRunningInIframe = () => getFrame() === "iframe"; + export const isPromiseLike = ( value: any, ): value is Promise> => {