feat(frontend): scaffold PWA with LiveKit join flow
Vite + React + TS + Tailwind v4, installable PWA. Join-pod UI that fetches a LiveKit token from the backend, connects to the pod room, and publishes screen + mic so PodMan can watch. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Kartikeya
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="theme-color" content="#0b0f17" />
|
||||
<title>PodMan</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "@podman/frontend",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc --noEmit && vite build",
|
||||
"preview": "vite preview",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@podman/shared": "workspace:*",
|
||||
"livekit-client": "^2.20.0",
|
||||
"react": "^19.2.7",
|
||||
"react-dom": "^19.2.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/vite": "^4.3.1",
|
||||
"@types/react": "^19.2.17",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.3",
|
||||
"tailwindcss": "^4.3.1",
|
||||
"vite": "^8.1.0",
|
||||
"vite-plugin-pwa": "^1.3.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import { useState } from 'react';
|
||||
import type { Room } from 'livekit-client';
|
||||
import { joinPod } from './lib/pod.js';
|
||||
|
||||
export default function App() {
|
||||
const [podId, setPodId] = useState('demo-pod');
|
||||
const [name, setName] = useState('');
|
||||
const [room, setRoom] = useState<Room | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [connecting, setConnecting] = useState(false);
|
||||
|
||||
async function handleJoin() {
|
||||
setError(null);
|
||||
setConnecting(true);
|
||||
try {
|
||||
const identity = `${name || 'engineer'}-${Math.random().toString(36).slice(2, 7)}`;
|
||||
setRoom(await joinPod(podId, identity, name || identity));
|
||||
} catch (err) {
|
||||
setError((err as Error).message);
|
||||
} finally {
|
||||
setConnecting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="mx-auto flex min-h-screen max-w-md flex-col justify-center gap-6 p-6">
|
||||
<header>
|
||||
<h1 className="text-3xl font-bold">🛰️ PodMan</h1>
|
||||
<p className="text-sm text-slate-400">
|
||||
Join a pod and share your screen — PodMan watches for collisions before you push.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{room ? (
|
||||
<section className="rounded-lg border border-slate-700 bg-slate-900/50 p-4">
|
||||
<p className="font-medium text-emerald-400">Connected to “{podId}”.</p>
|
||||
<p className="mt-1 text-sm text-slate-400">Sharing screen + mic. PodMan is watching.</p>
|
||||
</section>
|
||||
) : (
|
||||
<section className="flex flex-col gap-3">
|
||||
<input
|
||||
className="rounded-md border border-slate-700 bg-slate-900 px-3 py-2"
|
||||
placeholder="Your name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
className="rounded-md border border-slate-700 bg-slate-900 px-3 py-2"
|
||||
placeholder="Pod id"
|
||||
value={podId}
|
||||
onChange={(e) => setPodId(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
className="rounded-md bg-emerald-600 px-3 py-2 font-medium hover:bg-emerald-500 disabled:opacity-50"
|
||||
onClick={handleJoin}
|
||||
disabled={connecting || !podId}
|
||||
>
|
||||
{connecting ? 'Joining…' : 'Join pod'}
|
||||
</button>
|
||||
{error && <p className="text-sm text-red-400">{error}</p>}
|
||||
</section>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: #0b0f17;
|
||||
color: #e7eaf0;
|
||||
font-family:
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import { Room, RoomEvent } from 'livekit-client';
|
||||
|
||||
const BACKEND_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:8787';
|
||||
|
||||
/** Ask the backend for a LiveKit token to join a pod. */
|
||||
export async function fetchPodToken(
|
||||
podId: string,
|
||||
identity: string,
|
||||
name: string,
|
||||
): Promise<{ token: string; url: string }> {
|
||||
const res = await fetch(`${BACKEND_URL}/pods/${encodeURIComponent(podId)}/token`, {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({ identity, name }),
|
||||
});
|
||||
if (!res.ok) throw new Error(`token request failed: ${res.status}`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
/**
|
||||
* Join a pod: connect to the LiveKit room and publish screen + mic so PodMan
|
||||
* can watch. Returns the connected Room.
|
||||
*/
|
||||
export async function joinPod(podId: string, identity: string, name: string): Promise<Room> {
|
||||
const { token, url } = await fetchPodToken(podId, identity, name);
|
||||
const room = new Room({ adaptiveStream: true, dynacast: true });
|
||||
room.on(RoomEvent.Disconnected, () => console.log('[podman] disconnected'));
|
||||
|
||||
await room.connect(url, token);
|
||||
|
||||
const screen = await navigator.mediaDevices.getDisplayMedia({ video: true });
|
||||
for (const track of screen.getTracks()) {
|
||||
await room.localParticipant.publishTrack(track);
|
||||
}
|
||||
await room.localParticipant.setMicrophoneEnabled(true);
|
||||
|
||||
return room;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import App from './App.js';
|
||||
import './index.css';
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
);
|
||||
Vendored
+11
@@ -0,0 +1,11 @@
|
||||
/// <reference types="vite/client" />
|
||||
/// <reference types="vite-plugin-pwa/client" />
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_BACKEND_URL: string;
|
||||
readonly VITE_LIVEKIT_URL: string;
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"extends": "../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"lib": ["ES2023", "DOM", "DOM.Iterable"],
|
||||
"jsx": "react-jsx",
|
||||
"noEmit": true
|
||||
},
|
||||
"include": ["src", "vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
import { VitePWA } from 'vite-plugin-pwa';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
react(),
|
||||
tailwindcss(),
|
||||
VitePWA({
|
||||
registerType: 'autoUpdate',
|
||||
manifest: {
|
||||
name: 'PodMan',
|
||||
short_name: 'PodMan',
|
||||
description: 'Ambient AI teammate that prevents merge collisions before push',
|
||||
theme_color: '#0b0f17',
|
||||
background_color: '#0b0f17',
|
||||
display: 'standalone',
|
||||
},
|
||||
}),
|
||||
],
|
||||
server: {
|
||||
port: 5173,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user