0acfd563fe
* Upgrade Liveblocks packages to 0.17 * Convert app to recommended Liveblocks 0.17 setup * Convert multiplayer example to recommended Liveblocks 0.17 setup * Convert multiplayer-with-images example to recommended Liveblocks 0.17 setup * Fix React rendering issue for multiplayer app This bug could manifest after _navigating_ internally to the Multiplayer example app. Liveblocks Storage would seem to remain empty, but Presence would still seem to work. In other words, you'd see cursors flying, but no document contents. This did not happen when doing a full page load. This bug only occurs in React strict mode. * update onPatch and onCommand * "Add event callbacks for `onSessionStart` and `onSessionEnd`" * Adds edit state * Pass callbacks to app * Remove console logs * interpolate cursor only when not in session * Update multiplayer icon * Fix a few things Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
import { RoomProvider } from '../utils/liveblocks'
|
|
import { Tldraw, useFileSystem } from '@tldraw/tldraw'
|
|
import { useAccountHandlers } from 'hooks/useAccountHandlers'
|
|
import { useMultiplayerAssets } from 'hooks/useMultiplayerAssets'
|
|
import { useMultiplayerState } from 'hooks/useMultiplayerState'
|
|
import { useUploadAssets } from 'hooks/useUploadAssets'
|
|
import React, { FC } from 'react'
|
|
import { styled } from 'styles'
|
|
|
|
interface Props {
|
|
roomId: string
|
|
isUser: boolean
|
|
isSponsor: boolean
|
|
}
|
|
|
|
const MultiplayerEditor: FC<Props> = ({
|
|
roomId,
|
|
isUser = false,
|
|
isSponsor = false,
|
|
}: {
|
|
roomId: string
|
|
isUser: boolean
|
|
isSponsor: boolean
|
|
}) => {
|
|
return (
|
|
<RoomProvider id={roomId}>
|
|
<Editor roomId={roomId} isSponsor={isSponsor} isUser={isUser} />
|
|
</RoomProvider>
|
|
)
|
|
}
|
|
|
|
// Inner Editor
|
|
|
|
function Editor({ roomId, isUser, isSponsor }: Props) {
|
|
const fileSystemEvents = useFileSystem()
|
|
const { onSignIn, onSignOut } = useAccountHandlers()
|
|
const { error, ...events } = useMultiplayerState(roomId)
|
|
const { onAssetCreate, onAssetDelete } = useMultiplayerAssets()
|
|
const { onAssetUpload } = useUploadAssets()
|
|
|
|
if (error) return <LoadingScreen>Error: {error.message}</LoadingScreen>
|
|
|
|
return (
|
|
<div className="tldraw">
|
|
<Tldraw
|
|
autofocus
|
|
disableAssets={false}
|
|
showPages={false}
|
|
showSponsorLink={!isSponsor}
|
|
onSignIn={isSponsor ? undefined : onSignIn}
|
|
onSignOut={isUser ? onSignOut : undefined}
|
|
onAssetCreate={onAssetCreate}
|
|
onAssetDelete={onAssetDelete}
|
|
onAssetUpload={onAssetUpload}
|
|
{...fileSystemEvents}
|
|
{...events}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default MultiplayerEditor
|
|
|
|
const LoadingScreen = styled('div', {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
})
|