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