2022-08-02 13:56:12 +00:00
|
|
|
import { Utils } from '@tldraw/core'
|
2022-07-08 13:09:08 +00:00
|
|
|
import type { GetServerSideProps } from 'next'
|
|
|
|
|
import dynamic from 'next/dynamic'
|
2022-09-02 06:32:35 +00:00
|
|
|
import Head from 'next/head'
|
2022-08-02 13:56:12 +00:00
|
|
|
import * as React from 'react'
|
2022-07-12 10:12:00 +00:00
|
|
|
|
2022-08-02 13:56:12 +00:00
|
|
|
const IFrameWarning = dynamic(() => import('~components/IFrameWarning'), {
|
2022-07-12 10:12:00 +00:00
|
|
|
ssr: false,
|
|
|
|
|
}) as any
|
|
|
|
|
|
2022-08-02 13:56:12 +00:00
|
|
|
const ReadOnlyMultiplayerEditor = dynamic(() => import('~components/ReadOnlyMultiplayerEditor'), {
|
2022-07-08 13:09:08 +00:00
|
|
|
ssr: false,
|
|
|
|
|
}) as any
|
|
|
|
|
|
|
|
|
|
interface RoomProps {
|
|
|
|
|
id: string
|
|
|
|
|
}
|
|
|
|
|
|
2022-07-23 14:05:48 +00:00
|
|
|
export default function Room({ id }: RoomProps) {
|
2022-07-08 20:31:32 +00:00
|
|
|
if (typeof window !== 'undefined' && window.self !== window.top) {
|
2022-07-08 20:25:08 +00:00
|
|
|
return <IFrameWarning url={`https://tldraw.com/v/${id}`} />
|
|
|
|
|
}
|
|
|
|
|
|
2022-09-02 06:32:35 +00:00
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>tldraw - {id} (read only)</title>
|
|
|
|
|
</Head>
|
|
|
|
|
<ReadOnlyMultiplayerEditor roomId={id} />
|
|
|
|
|
</>
|
|
|
|
|
)
|
2022-07-08 13:09:08 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export const getServerSideProps: GetServerSideProps = async (context) => {
|
|
|
|
|
const id = context.query.id?.toString()
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
props: {
|
|
|
|
|
id: Utils.lns(id),
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
