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:
parent
b32082a2b4
commit
8fa87cc84a
2 changed files with 73 additions and 19 deletions
2
.github/workflows/deploy.yml
vendored
2
.github/workflows/deploy.yml
vendored
|
@ -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 }}
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue