Skip to content

Commit a4834b3

Browse files
Karolk99Karolk99
committed
Update moq api
1 parent 7931dd9 commit a4834b3

14 files changed

Lines changed: 29 additions & 120 deletions

File tree

‎moq-demo/README.md‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,9 @@ yarn dev
1818

1919
3. Open the URL printed by Vite (e.g. `http://localhost:5173`).
2020

21-
4. Provide a **Fishjam ID** in one of two ways:
21+
4. Provide the **Sandbox API URL** (the relay connection URL, including the Fishjam ID, is returned by the sandbox):
2222

23-
- Pass it as a query parameter: `http://localhost:5173?fishjamId=<your-id>`
24-
- Leave it out — a **Fishjam ID** input field will appear in the UI so you can enter it at runtime.
25-
26-
5. Provide the **Sandbox API URL**:
27-
28-
- Pass it as a query parameter: `http://localhost:5173?fishjamId=<your-id>&sandboxApiUrl=https://fishjam.io/api/v1/connect/<your-key>/room-manager`
23+
- Pass it as a query parameter: `http://localhost:5173?sandboxApiUrl=https://fishjam.io/api/v1/connect/<your-key>/room-manager`
2924
- Or enter it in the UI at runtime.
3025

31-
6. Enter a stream name and click **Start Streaming** to publish, or **Connect to Stream** to watch.
26+
5. Enter a stream name and click **Start Streaming** to publish, or **Connect to Stream** to watch.

‎moq-demo/src/App.tsx‎

Lines changed: 3 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
import { createSignal, Show } from "solid-js";
22
import Streamer from "./Streamer";
33
import Viewer from "./Viewer";
4-
import {
5-
fishjamId as configFishjamId,
6-
SANDBOX_API_URL as configSandboxApiUrl,
7-
} from "./config";
4+
import { SANDBOX_API_URL as configSandboxApiUrl } from "./config";
85

96
export default function App() {
107
const [streamName, setStreamName] = createSignal("my-stream");
11-
const [fishjamId, setFishjamId] = createSignal(configFishjamId);
128
const [sandboxApiUrl, setSandboxApiUrl] = createSignal(configSandboxApiUrl);
139

1410
return (
@@ -33,21 +29,6 @@ export default function App() {
3329
class="border-input bg-input/30 flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-xs outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
3430
/>
3531
</div>
36-
<Show when={!configFishjamId}>
37-
<div class="space-y-2">
38-
<label class="text-sm font-medium leading-none" for="fishjam-id">
39-
Fishjam ID
40-
</label>
41-
<input
42-
id="fishjam-id"
43-
type="text"
44-
value={fishjamId()}
45-
onInput={(e) => setFishjamId(e.currentTarget.value)}
46-
placeholder="your-fishjam-id"
47-
class="border-input bg-input/30 flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-xs outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
48-
/>
49-
</div>
50-
</Show>
5132
<Show when={!configSandboxApiUrl}>
5233
<div class="space-y-2">
5334
<label
@@ -70,16 +51,8 @@ export default function App() {
7051
</div>
7152
</div>
7253
<div class="mx-auto max-w-7xl grid grid-cols-1 gap-8 lg:grid-cols-2">
73-
<Streamer
74-
streamName={streamName()}
75-
fishjamId={fishjamId()}
76-
sandboxApiUrl={sandboxApiUrl()}
77-
/>
78-
<Viewer
79-
streamName={streamName()}
80-
fishjamId={fishjamId()}
81-
sandboxApiUrl={sandboxApiUrl()}
82-
/>
54+
<Streamer streamName={streamName()} sandboxApiUrl={sandboxApiUrl()} />
55+
<Viewer streamName={streamName()} sandboxApiUrl={sandboxApiUrl()} />
8356
</div>
8457
</div>
8558
);

‎moq-demo/src/Streamer.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import { createSignal, Show } from "solid-js";
22
import "@moq/publish/ui";
33
import "@moq/publish/element";
4-
import { MOQ_BASE_URL } from "./config";
54

65
interface Props {
76
streamName: string;
8-
fishjamId: string;
97
sandboxApiUrl: string;
108
}
119

@@ -23,9 +21,8 @@ export default function Streamer(props: Props) {
2321
`${props.sandboxApiUrl}/moq/${encodeURIComponent(props.streamName)}/publisher`,
2422
);
2523
if (!res.ok) throw new Error(await res.text());
26-
const { token } = (await res.json()) as { token: string };
27-
const url = `${MOQ_BASE_URL}/${props.fishjamId}?jwt=${token}`;
28-
publishEl.setAttribute("url", url);
24+
const { connection_url } = (await res.json()) as { connection_url: string };
25+
publishEl.setAttribute("url", connection_url);
2926
publishEl.setAttribute("name", props.streamName);
3027
setConnected(true);
3128
} catch (e) {
@@ -89,7 +86,7 @@ export default function Streamer(props: Props) {
8986
<button
9087
type="button"
9188
onClick={start}
92-
disabled={!props.streamName || !props.fishjamId || loading()}
89+
disabled={!props.streamName || !props.sandboxApiUrl || loading()}
9390
class="inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 h-9 px-4 py-2 w-full"
9491
>
9592
{loading() ? "Connecting…" : "Start Streaming"}

‎moq-demo/src/Viewer.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import { createSignal, Show } from "solid-js";
22
import "@moq/watch/ui";
33
import "@moq/watch/element";
4-
import { MOQ_BASE_URL } from "./config";
54

65
interface Props {
76
streamName: string;
8-
fishjamId: string;
97
sandboxApiUrl: string;
108
}
119

@@ -23,9 +21,8 @@ export default function Viewer(props: Props) {
2321
`${props.sandboxApiUrl}/moq/${encodeURIComponent(props.streamName)}/subscriber`,
2422
);
2523
if (!res.ok) throw new Error(await res.text());
26-
const { token } = (await res.json()) as { token: string };
27-
const url = `${MOQ_BASE_URL}/${props.fishjamId}?jwt=${token}`;
28-
watchEl.setAttribute("url", url);
24+
const { connection_url } = (await res.json()) as { connection_url: string };
25+
watchEl.setAttribute("url", connection_url);
2926
watchEl.setAttribute("name", props.streamName);
3027
setConnected(true);
3128
} catch (e) {
@@ -85,7 +82,7 @@ export default function Viewer(props: Props) {
8582
<button
8683
type="button"
8784
onClick={connect}
88-
disabled={!props.streamName || !props.fishjamId || loading()}
85+
disabled={!props.streamName || !props.sandboxApiUrl || loading()}
8986
class="inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 h-9 px-4 py-2 w-full"
9087
>
9188
{loading() ? "Connecting…" : "Connect to Stream"}

‎moq-demo/src/config.ts‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,4 @@
11
const params = new URLSearchParams(window.location.search);
22

3-
export const fishjamId =
4-
params.get("fishjamId") ?? import.meta.env.VITE_FISHJAM_ID ?? "";
5-
63
export const SANDBOX_API_URL =
74
params.get("sandboxApiUrl") ?? import.meta.env.VITE_SANDBOX_API_URL ?? "";
8-
9-
export const MOQ_BASE_URL =
10-
params.get("baseUrl") ??
11-
import.meta.env.VITE_MOQ_BASE_URL ??
12-
"https://moq.fishjam.work:443";

‎moq-demo/src/vite-env.d.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
/// <reference types="vite/client" />
22

33
interface ImportMetaEnv {
4-
readonly VITE_FISHJAM_ID?: string;
54
readonly VITE_SANDBOX_API_URL?: string;
6-
readonly VITE_MOQ_BASE_URL?: string;
75
readonly VITE_FISHJAM_API_BASE_URL?: string;
86
}
97

‎translation-demo/.env.example‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
# Required: your Fishjam ID — the relay's root namespace and the connection path segment.
2-
# MoQ tokens are scoped to paths under it (a stream `<name>` token authorizes `<fishjam-id>/<name>`).
3-
VITE_FISHJAM_ID=ea94930e3ffd47c490f5144c43d57340
4-
5-
# Required: Fishjam sandbox API base URL. The app fetches a MoQ JWT from the sandbox and
6-
# appends it to the relay connection URL as `?jwt=`. Get it at https://fishjam.io/app/sandbox.
1+
# Required: Fishjam sandbox API base URL. The app fetches a full MoQ relay connection URL from
2+
# the sandbox (the relay host, the Fishjam ID root, and the JWT embedded as `?jwt=`) and connects
3+
# to it directly. Get it at https://fishjam.io/app/sandbox.
74
VITE_SANDBOX_API_URL=https://fishjam.io/api/v1/connect/ea94930e3ffd47c490f5144c43d57340/room-manager

‎translation-demo/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"preview": "vite preview"
1212
},
1313
"dependencies": {
14-
"@fishjam-cloud/react-client": "0.28.1",
14+
"@fishjam-cloud/react-client": "0.28.2",
1515
"@moq/publish": "0.2.15",
1616
"@moq/signals": "0.1.9",
1717
"@moq/watch": "0.2.17",

‎translation-demo/src/config.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
export const FISHJAM_ID = import.meta.env.VITE_FISHJAM_ID;
21
export const SANDBOX_API_URL = import.meta.env.VITE_SANDBOX_API_URL;

‎translation-demo/src/hooks/useMoqStreamViewer.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { toast } from "sonner";
33

44
import { useMoqConnection } from "@/hooks/useMoqConnection";
55
import { useMoqTokens } from "@/hooks/useMoqTokens";
6-
import { buildConnectionUrl } from "@/utils/translation";
76

87
// Watches a single published stream (and its translations). The connection goes to the Fishjam
98
// root; the subscriber token is scoped to this stream name, so the relay only announces that
@@ -27,11 +26,7 @@ export const useMoqStreamViewer = (
2726

2827
void (async () => {
2928
try {
30-
const url = await authorizeConnection(
31-
buildConnectionUrl(),
32-
streamName,
33-
"subscriber",
34-
);
29+
const url = await authorizeConnection(streamName, "subscriber");
3530
if (!cancelled) {
3631
connect(url);
3732
}

0 commit comments

Comments
 (0)