Fce 3479/update moq api

[Karolk99]

No description provided.

[linear]

FCE-3479

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
moq-demo	Ready	Preview, Comment	Jun 23, 2026 3:42pm

[Copilot]

Pull request overview

This PR updates the MoQ demos to match the sandbox API’s newer connection_url response shape, and adds a new translation-demo React app showcasing live streaming with selectable translated audio tracks and live transcription/captions.

Changes:

• Add translation-demo, a Vite + React + Tailwind demo app for publishing/watching MoQ streams with translation/captions UI.
• Update moq-demo to consume connection_url from the sandbox instead of assembling relay URLs from fishjamId/base URL env vars.
• Add new UI primitives/components and supporting hooks/utilities for stream playback, translation selection, and transcription rendering.

Reviewed changes

Copilot reviewed 49 out of 55 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
translation-demo/vite.config.ts	Vite config (plugins/dev server/alias + env validation).
translation-demo/tsconfig.json	TypeScript config and path alias setup.
translation-demo/tailwind.config.cjs	Tailwind theme/config for the new demo.
translation-demo/src/vite-env.d.ts	Vite env typings for the demo.
translation-demo/src/utils/types.ts	Shared types for MoQ connection/stream/translation models.
translation-demo/src/utils/translation.ts	Translation path parsing, option formatting, and sorting helpers.
translation-demo/src/utils/googleLanguages.ts	Google language catalog + helpers for labels/sorting.
translation-demo/src/utils/cn.ts	Tailwind className helper (clsx + tailwind-merge).
translation-demo/src/pages/watch.tsx	Viewer “watch” route with play-gated connect/start.
translation-demo/src/pages/publish.tsx	Publisher route wrapper.
translation-demo/src/main.tsx	App bootstrap + routing.
translation-demo/src/layout.tsx	App shell and toaster host.
translation-demo/src/index.css	Tailwind CSS entrypoint + base CSS variables.
translation-demo/src/hooks/useWakeLock.ts	Screen wake lock hook for viewing sessions.
translation-demo/src/hooks/useTranslationTranscription.ts	Subscribe/parse/display live transcription track (v1/v2 formats).
translation-demo/src/hooks/useSyncedStreamPlayer.ts	Synced A/V player with multi-voice audio + crossfade logic.
translation-demo/src/hooks/useSignalValue.ts	Bridge MoQ signals into React via useSyncExternalStore.
translation-demo/src/hooks/usePublisher.ts	Publishing workflow: token fetch, connect, broadcast setup/teardown.
translation-demo/src/hooks/useMoqTokens.ts	Sandbox token/connection URL fetch wrapper.
translation-demo/src/hooks/useMoqStreamViewer.ts	Viewer connect/disconnect orchestration around tokens and routing.
translation-demo/src/hooks/useMoqConnection.ts	Broadcast discovery and translation option construction.
translation-demo/src/config.ts	Centralized env config access (VITE_SANDBOX_API_URL).
translation-demo/src/components/VideoSurface.tsx	Canvas surface that attaches/detaches the video renderer.
translation-demo/src/components/VideoPlayer.tsx	<video> preview component for local publisher camera preview.
translation-demo/src/components/ui/sonner.tsx	Toaster wrapper configuration.
translation-demo/src/components/ui/select.tsx	Radix Select wrapper components.
translation-demo/src/components/ui/popover.tsx	Radix Popover wrapper components.
translation-demo/src/components/ui/label.tsx	Radix Label wrapper component.
translation-demo/src/components/ui/card.tsx	Card UI primitives.
translation-demo/src/components/ui/button.tsx	Button UI primitive.
translation-demo/src/components/ui/badge.tsx	Badge UI primitive.
translation-demo/src/components/TranslationMenu.tsx	Translation selection menu + filtering/search UI.
translation-demo/src/components/StreamView.tsx	Main stream view orchestration (player, captions, overlays).
translation-demo/src/components/StreamToolbar.tsx	Stream footer toolbar (disconnect).
translation-demo/src/components/StreamPlayer.tsx	Player surface + translation/captions controls.
translation-demo/src/components/PublisherPanel.tsx	Publisher UI (device select, preview, QR/link share, stop/start).
translation-demo/src/components/DeviceSelect.tsx	Device selection UI for camera/mic.
translation-demo/src/components/BrandHeader.tsx	Branding header for the demo UI.
translation-demo/README.md	Setup and env docs for the new demo.
translation-demo/public/gemini-logo.svg	Added branding asset.
translation-demo/public/fishjam-logo.svg	Added branding asset.
translation-demo/public/favicon.svg	Added favicon asset.
translation-demo/postcss.config.cjs	PostCSS config for Tailwind.
translation-demo/package.json	Demo dependencies/scripts (Vite/React/Tailwind/MoQ libs).
translation-demo/index.html	App HTML entry.
translation-demo/.yarnrc.yml	Yarn config and packageExtensions for zod deps.
translation-demo/.gitignore	Demo-specific ignores (dist, env, yarn dirs).
translation-demo/.env.example	Example env var(s) for sandbox API URL.
translation-demo/yarn.lock	Yarn lockfile for the demo dependencies.
moq-demo/src/vite-env.d.ts	Remove now-unused env vars (fishjam/base URL).
moq-demo/src/Viewer.tsx	Use sandbox connection_url directly for watch element.
moq-demo/src/Streamer.tsx	Use sandbox connection_url directly for publish element.
moq-demo/src/config.ts	Remove fishjam/base URL config plumbing.
moq-demo/src/App.tsx	Remove fishjam ID UI/config; only sandbox API URL is required.
moq-demo/README.md	Update setup docs to reflect new sandbox-based connection flow.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.