chore: add public env variables

.github/workflows/frontend.yml

@@ -40,6 +40,9 @@ jobs:
           cache-dependency-path: '**/package-lock.json'
       - run: npm ci 
       - run: npm run build
+        env:
+          PUBLIC_SIGNALING_URL: ${{ env.PUBLIC_SIGNALING_URL }}
+          PUBLIC_METERED_API_KEY: ${{ env.PUBLIC_METERED_API_KEY }}
       - uses: actions/upload-artifact@v3
         with:
           name: frontend-build-output

frontend/.env

@@ -0,0 +1,2 @@
+PUBLIC_SIGNALING_URL="ws://localhost:8000/signaling"
+PUBLIC_METERED_API_KEY=""

frontend/src/models/rtc.ts

@@ -1,5 +1,6 @@
 import * as Y from 'yjs'
 import { WebrtcConn, WebrtcProvider, ProviderOptions } from 'y-webrtc'
+import memoize from 'lodash/memoize'
 
 type SignalingMessage = {
   type: string
@@ -109,3 +110,20 @@ function is_read_only_message(data: Uint8Array) {
   if (byte1 === 1) return true
   return false
 }
+
+// TODO: move config cf function
+export const resolve_ice_servers = memoize(_resolve_ice_servers)
+
+async function _resolve_ice_servers(api_key: string) {
+  if (api_key.length === 0) {
+    return undefined
+  }
+  try {
+    return await fetch(
+      `https://sobaka.metered.live/api/v1/turn/credentials?apiKey=${api_key}`
+    ).then(res => res.json())
+  } catch (e) {
+    console.warn(e)
+    return undefined
+  }
+}

frontend/src/models/workspace.ts

@@ -1,4 +1,5 @@
 import * as Y from 'yjs'
+import { PUBLIC_SIGNALING_URL, PUBLIC_METERED_API_KEY } from '$env/static/public'
 
 import syncedStore from '@syncedstore/core'
 import { DocTypeDescription, MappedTypeDescription } from '@syncedstore/core/types/doc'
@@ -10,7 +11,7 @@ import { intoReadable } from '../util/store'
 import { SubDocReference } from '../util/subdoc'
 import { Position } from '../@types'
 import { IndexeddbPersistence } from 'y-indexeddb'
-import { VerifiedRTCProvider } from './rtc'
+import { resolve_ice_servers, VerifiedRTCProvider } from './rtc'
 import { get_user, update_user, User } from './user'
 
 export type WorkspaceMeta = {
@@ -130,17 +131,14 @@ export class Workspace {
     this.doc.load()
 
     if (!this.rtc) {
-      // TODO: move keys to env
-      const iceServers = await fetch("https://sobaka.metered.live/api/v1/turn/credentials?apiKey=2312667f3c9fb02e077ba1112512a3913aef")
-        .then(res => res.json())
-
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       this.rtc = new VerifiedRTCProvider(this.doc.guid, this.doc, {
-        // signaling: ['ws://localhost:8000/signaling'],
-        signaling: ['wss://next.sobaka.marcelgleeson.com/signaling'],
+        signaling: [PUBLIC_SIGNALING_URL],
         // Ignore updates from non-collaborators
         filterIncomingMessage: from => this.isCollaborator(from),
-        peerOpts: { config: { iceServers } }
+        peerOpts: {
+          config: { iceServers: await resolve_ice_servers(PUBLIC_METERED_API_KEY) }
+        }
       })
 
       // get verified uuid from provider