chore: add build env variables

.github/workflows/frontend.yml

@@ -16,6 +16,8 @@ jobs:
   build:
     name: "🧦 Build"
     runs-on: macos-latest
+    environment:
+      name: next # TODO: move to cf function
     defaults:
       run:
         working-directory: frontend
@@ -40,6 +42,9 @@ jobs:
           cache-dependency-path: '**/package-lock.json'
       - run: npm ci 
       - run: npm run build
+        env:
+          PUBLIC_SIGNALING_URL: ${{ vars.PUBLIC_SIGNALING_URL }}
+          METERED_API_KEY: ${{ secrets.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"
+METERED_API_KEY=""

frontend/src/components/WorkspaceList.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
   import { WorkspaceList } from '../models/workspaceList'
+  import type { Config } from '../routes/proxy+layout.server'
   import WorkspaceSummary from './WorkspaceSummary.svelte'
 
+  export let config: Config
   export let workspaceList: WorkspaceList
 
   const workspaces = workspaceList.workspaces()
 </script>
 
 {#each $workspaces as workspace (workspace.id)}
-  {#await workspace.load()}
+  {#await workspace.load(config)}
     <!-- TODO: skeleton loading UI -->
   {:then}
     <WorkspaceSummary {workspace} />

frontend/src/models/workspace.ts

@@ -12,6 +12,7 @@ import { Position } from '../@types'
 import { IndexeddbPersistence } from 'y-indexeddb'
 import { VerifiedRTCProvider } from './rtc'
 import { get_user, update_user, User } from './user'
+import { Config } from '../routes/+layout.server'
 
 export type WorkspaceMeta = {
   title: string
@@ -119,7 +120,7 @@ export class Workspace {
   /**
    * Loads entity from local storage
    */
-  async load() {
+  async load(config: Config) {
     const signal = AbortSignal.timeout(2000)
 
     if (!this.storage) {
@@ -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: config.signaling,
         // Ignore updates from non-collaborators
         filterIncomingMessage: from => this.isCollaborator(from),
-        peerOpts: { config: { iceServers } }
+        peerOpts: {
+          config: { iceServers: config.iceServers }
+        }
       })
 
       // get verified uuid from provider

frontend/src/routes/+layout.server.ts

@@ -0,0 +1,49 @@
+import { METERED_API_KEY } from '$env/static/private'
+import { PUBLIC_SIGNALING_URL } from '$env/static/public'
+
+import type { LayoutServerLoad } from './$types';
+
+export interface IceServer {
+  urls: string | string[];
+  username?: string;
+  credential?: string;
+}
+
+export interface Config {
+  iceServers: IceServer[];
+  signaling: string[];
+}
+
+const fetchIceServers = async (fetch: typeof globalThis.fetch): Promise<IceServer[]> => {
+  try {
+    if (!METERED_API_KEY) {
+      throw new Error('METERED_API_KEY is not set');
+    }
+    const response = await fetch(`https://sobaka.metered.live/api/v1/turn/credentials?apiKey=${METERED_API_KEY}`);
+
+    if (response.ok) {
+      const data = await response.json();
+      return data;
+    }
+  } catch {
+    // Fallback to static configuration in case of error or timeout
+  }
+
+  return [
+    {
+      urls: [
+        'stun:stun.l.google.com:19302',
+        'stun:global.stun.twilio.com:3478',
+      ],
+    },
+  ];
+};
+
+export const load: LayoutServerLoad = async ({ fetch }): Promise<{ config: Config }> => {
+    return {
+        config: { 
+          iceServers: await fetchIceServers(fetch),
+          signaling: [PUBLIC_SIGNALING_URL],
+        }
+    };
+}

frontend/src/routes/+layout.ts

@@ -1 +1,2 @@
-export const ssr = false
+export const prerender = true;
+export const ssr = true;

frontend/src/routes/+page.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import type { PageData } from './$types'
   import Navigation from '../components/Navigation.svelte'
   import WorkspaceList from '../components/WorkspaceList.svelte'
   import { Root } from '../models/root'
 
+  export let data: PageData
   const root = Root.init()
 
   const lists = root.workspaceLists()
@@ -28,7 +30,7 @@
           {:then}
             <h2>Workspaces ({workspaceList.id}):</h2>
             <button on:click={() => workspaceList.new()}>Add workspace</button>
-            <WorkspaceList {workspaceList} />
+            <WorkspaceList config={data.config} {workspaceList} />
           {/await}
         {/each}
       </ul>

frontend/src/routes/workspace/+layout.ts

@@ -1 +1,2 @@
 export const ssr = false
+export const prerender = false;

frontend/src/routes/workspace/[slug]/+page.svelte

@@ -16,7 +16,7 @@
   init_workspace(workspace)
 </script>
 
-{#await workspace.load()}
+{#await workspace.load(data.config)}
   <!-- TODO: skeleton loading UI -->
 {:then}
   <WorkspaceView />