touchscreen: improve the side panel, fix deploy env var, create room programmatically (#3806)

### Change Type

<!--  Please select a 'Scope' label ️ -->

- [ ] `sdk` — Changes the tldraw SDK
- [x] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!--  Please select a 'Type' label ️ -->

- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know
This commit is contained in:
Mime Čuvalo 2024-05-22 11:04:24 +01:00 committed by GitHub
parent b32082a2b4
commit 8fa87cc84a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 73 additions and 19 deletions

View file

@ -76,3 +76,5 @@ jobs:
R2_ACCESS_KEY_SECRET: ${{ secrets.R2_ACCESS_KEY_SECRET }}
APP_ORIGIN: ${{ vars.APP_ORIGIN }}
NEXT_PUBLIC_GOOGLE_CLOUD_PROJECT_NUMBER: ${{ vars.NEXT_PUBLIC_GOOGLE_CLOUD_PROJECT_NUMBER }}

View file

@ -1,28 +1,58 @@
import { useEffect } from 'react'
import { CreateRoomRequestBody, ROOM_PREFIX, Snapshot } from '@tldraw/dotcom-shared'
import { schema } from '@tldraw/tlsync'
import { useState } from 'react'
import { Helmet } from 'react-helmet-async'
import { TldrawUiButton } from 'tldraw'
import '../../styles/globals.css'
import { getParentOrigin } from '../utils/iFrame'
export function Component() {
useEffect(() => {
async function createSession() {
if ('meet' in window === false) {
setTimeout(createSession, 100)
return
}
const [isCreating, setIsCreating] = useState(false)
const [isSessionStarted, setIsSessionStarted] = useState(false)
const session = await (window as any).meet.addon.createAddonSession({
cloudProjectNumber: `${process.env.NEXT_PUBLIC_GOOGLE_CLOUD_PROJECT_NUMBER || '745824656017'}`,
})
const sidePanelClient = await session.createSidePanelClient()
await sidePanelClient.setCollaborationStartingState({
sidePanelUrl: `${window.location.origin}/ts-side`,
mainStageUrl: `${window.location.origin}/new`,
additionalData: undefined,
})
async function createSession() {
setIsCreating(true)
if ('meet' in window === false) {
setTimeout(createSession, 100)
return
}
createSession()
})
const snapshot = {
schema: schema.serialize(),
snapshot: {},
} satisfies Snapshot
const res = await fetch(`/api/new-room`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
origin: getParentOrigin(),
snapshot,
} satisfies CreateRoomRequestBody),
})
const response = (await res.json()) as { error: boolean; slug?: string }
if (!res.ok || response.error) {
console.error(await res.text())
throw new Error('Failed to upload snapshot')
}
const mainStageUrl = `${window.location.origin}/${ROOM_PREFIX}/${response.slug}`
const session = await (window as any).meet.addon.createAddonSession({
cloudProjectNumber: `${process.env.NEXT_PUBLIC_GOOGLE_CLOUD_PROJECT_NUMBER}`,
})
const sidePanelClient = await session.createSidePanelClient()
await sidePanelClient.setCollaborationStartingState({
sidePanelUrl: `${window.location.origin}/ts-side`,
mainStageUrl: mainStageUrl,
additionalData: undefined,
})
setIsCreating(false)
setIsSessionStarted(true)
}
return (
<>
@ -30,7 +60,29 @@ export function Component() {
{/* eslint-disable @next/next/no-sync-scripts */}
<script src="https://www.gstatic.com/meetjs/addons/0.1.0/meet.addons.js"></script>
</Helmet>
Starting a new session
<div
style={{
flexDirection: 'column',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
}}
>
<TldrawUiButton
type="primary"
disabled={isCreating || isSessionStarted}
onClick={createSession}
style={{
color: isCreating || isSessionStarted ? 'hsl(210, 6%, 45%)' : 'hsl(214, 84%, 56%)',
}}
>
{isSessionStarted ? 'Room created' : 'Create a new room'}
</TldrawUiButton>
{isCreating && <div>Starting a new session</div>}
{isSessionStarted && <div>Room created, click Start Activity below.</div>}
</div>
</>
)
}