Tldraw/apps/www/pages/v/[id].tsx

53 wiersze
1.2 KiB
TypeScript

import * as React from 'react'
import type { GetServerSideProps } from 'next'
import dynamic from 'next/dynamic'
import * as gtag from 'utils/gtag'
import { Utils } from '@tldraw/core'
const IFrameWarning = dynamic(() => import('components/IFrameWarning'), {
ssr: false,
}) as any
const ReadOnlyMultiplayerEditor = dynamic(() => import('components/ReadOnlyMultiplayerEditor'), {
ssr: false,
}) as any
interface RoomProps {
id: string
}
export default function Room({ id }: RoomProps) {
if (typeof window !== 'undefined' && window.self !== window.top) {
gtag.event({
action: 'connect_to_readonly_room_in_iframe',
category: 'v1',
label: id,
value: 0,
})
return <IFrameWarning url={`https://tldraw.com/v/${id}`} />
}
gtag.event({
action:
process.env.NODE_ENV === 'production'
? 'connect_to_readonly_room'
: 'connect_to_readonly_room_dev',
category: 'v1',
label: id,
value: 0,
})
return <ReadOnlyMultiplayerEditor roomId={id} />
}
export const getServerSideProps: GetServerSideProps = async (context) => {
const id = context.query.id?.toString()
return {
props: {
id: Utils.lns(id),
},
}
}