Skip to content

Commit

Permalink
Merge branch 'master' into chore/remove-multiplayer-feature-switches
Browse files Browse the repository at this point in the history
  • Loading branch information
gbalint committed Jan 30, 2024
2 parents 2cbb1d0 + 1cb424a commit 9151e9e
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 4 deletions.
4 changes: 3 additions & 1 deletion editor/src/components/editor/editor-component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ import { CollaborationStateUpdater } from './store/collaboration-state'
import { GithubRepositoryCloneFlow } from '../github/github-repository-clone-flow'
import { getPermissions } from './store/permissions'
import { CommentMaintainer } from '../../core/commenting/comment-maintainer'
import { useIsLoggedIn } from '../../core/shared/multiplayer-hooks'
import { useIsLoggedIn, useLiveblocksConnectionListener } from '../../core/shared/multiplayer-hooks'

const liveModeToastId = 'play-mode-toast'

Expand Down Expand Up @@ -384,6 +384,8 @@ export const EditorComponentInner = React.memo((props: EditorProps) => {
'EditorComponentInner viewer mode',
)

useLiveblocksConnectionListener()

return (
<>
<ColorThemeComponent />
Expand Down
16 changes: 14 additions & 2 deletions editor/src/core/commenting/comment-hooks.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React from 'react'
import type { User } from '@liveblocks/client'
import type { LostConnectionEvent, User } from '@liveblocks/client'
import { LiveObject, type ThreadData } from '@liveblocks/client'
import type { ConnectionInfo, Presence, ThreadMetadata, UserMeta } from '../../../liveblocks.config'
import {
useEditThreadMetadata,
useLostConnectionListener,
useMutation,
useSelf,
useStorage,
Expand Down Expand Up @@ -445,7 +446,18 @@ export function useDataThemeAttributeOnBody() {
export function useCanComment() {
const canComment = usePermissions().comment

return canComment
const [connectionLostStatus, setConnectionLostStatus] =
React.useState<LostConnectionEvent | null>(null)

// this is necessary because a lot of useThreads calls pile up if we allow
// commenting ui components to be rendered when we are disconnected
useLostConnectionListener((event) => {
setConnectionLostStatus(event)
})

const isStatusOk = connectionLostStatus == null || connectionLostStatus === 'restored'

return canComment && isStatusOk
}

export function getThreadLocationOnCanvas(
Expand Down
65 changes: 64 additions & 1 deletion editor/src/core/shared/multiplayer-hooks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,12 @@ import { LiveObject } from '@liveblocks/client'
import { useAtom } from 'jotai'
import React from 'react'
import type { ConnectionInfo, Storage } from '../../../liveblocks.config'
import { useMutation, useStorage } from '../../../liveblocks.config'
import {
useErrorListener,
useLostConnectionListener,
useMutation,
useStorage,
} from '../../../liveblocks.config'
import { isLoggedIn } from '../../common/user'
import {
ActiveRemixSceneAtom,
Expand All @@ -14,6 +19,9 @@ import * as EP from './element-path'
import { possiblyUniqueColor, type RemixPresence } from './multiplayer'
import { PRODUCTION_ENV } from '../../common/env-vars'
import { isFeatureEnabled } from '../../utils/feature-switches'
import { useDispatch } from '../../components/editor/store/dispatch-context'
import { removeToast, showToast } from '../../components/editor/actions/action-creators'
import { notice } from '../../components/common/notice'

/**
* How often to perform heartbeat bumps on connections.
Expand Down Expand Up @@ -250,3 +258,58 @@ export function useMonitorConnection() {
}
}, [updateLastSeen, cleanupInactive])
}

const ReconnectingLiveblocksToastId = 'reconnecting-liveblocks'
const LostLiveblocksConnectionToastId = 'lost-liveblocks-connection'

export function useLiveblocksConnectionListener() {
const dispatch = useDispatch()
const loggedIn = useIsLoggedIn()

useLostConnectionListener((event) => {
console.warn('Lost connection event to liveblocks', event)
switch (event) {
case 'lost':
if (loggedIn) {
dispatch([
showToast(
notice(
'Reconnecting to other users...',
'WARNING',
true,
ReconnectingLiveblocksToastId,
),
),
])
}
break

case 'restored':
dispatch([
removeToast(LostLiveblocksConnectionToastId),
removeToast(ReconnectingLiveblocksToastId),
])
break

case 'failed':
if (loggedIn) {
showToast(
notice(
'Lost connection to other users',
'ERROR',
true,
LostLiveblocksConnectionToastId,
),
)
}
break
}
})

useErrorListener((error) => {
console.warn('Error connecting to liveblocks', error)
if (loggedIn) {
dispatch([showToast(notice('Error connecting to other users', 'ERROR', false))])
}
})
}

0 comments on commit 9151e9e

Please sign in to comment.