diff --git a/apps/dotcom/src/components/ShareMenu.tsx b/apps/dotcom/src/components/ShareMenu.tsx index 04ac267dbeb..23ed13b9bea 100644 --- a/apps/dotcom/src/components/ShareMenu.tsx +++ b/apps/dotcom/src/components/ShareMenu.tsx @@ -32,7 +32,7 @@ type ShareState = { state: ShareCurrentState qrCodeDataUrl: string url: string - readonlyUrl: string | null + readonlyUrl?: string readonlyQrCodeDataUrl: string } @@ -47,10 +47,23 @@ function isSharedReadWriteUrl(pathname: string) { return pathname.startsWith(`/${ROOM_PREFIX}/`) } -function getFreshShareState(): ShareState { +function getFreshShareState(previousReadonlyUrl?: string): ShareState { const isSharedReadWrite = isSharedReadWriteUrl(window.location.pathname) const isSharedReadOnly = isSharedReadonlyUrl(window.location.pathname) + let readonlyUrl + if (isSharedReadOnly) { + readonlyUrl = window.location.href + } else if (previousReadonlyUrl) { + // Pull out the room prefix and the readonly slug from the existing readonly url + const segments = window.location.pathname.split('/') + const roSegments = new URL(previousReadonlyUrl).pathname.split('/') + segments[1] = roSegments[1] + segments[2] = roSegments[2] + const newPathname = segments.join('/') + readonlyUrl = `${window.location.origin}${newPathname}${window.location.search}` + } + return { state: isSharedReadWrite ? SHARE_CURRENT_STATE.SHARED_READ_WRITE @@ -58,7 +71,7 @@ function getFreshShareState(): ShareState { ? SHARE_CURRENT_STATE.SHARED_READ_ONLY : SHARE_CURRENT_STATE.OFFLINE, url: window.location.href, - readonlyUrl: isSharedReadOnly ? window.location.href : null, + readonlyUrl, qrCodeDataUrl: '', readonlyQrCodeDataUrl: '', } @@ -146,7 +159,7 @@ export const ShareMenu = React.memo(function ShareMenu() { const interval = setInterval(() => { const url = window.location.href if (shareState.url === url) return - setShareState(getFreshShareState()) + setShareState(getFreshShareState(shareState.readonlyUrl)) }, 300) return () => {