fishjam-cloud · czerwiukk · Feb 24, 2026 · Feb 23, 2026 · Feb 23, 2026 · Feb 23, 2026
diff --git a/e2e-tests/livestream-client/.gitignore b/e2e-tests/livestream-client/.gitignore
@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Playwright
+/test-results/
+/playwright-report/
+/playwright/.cache/
diff --git a/e2e-tests/livestream-client/README.md b/e2e-tests/livestream-client/README.md
@@ -0,0 +1,42 @@
+# Livestream E2E Tests
+
+This is a lightweight React app for testing WHIP/WHEP livestreaming functionality using the `@fishjam-cloud/ts-client` package.
+
+## Features
+
+The React app provides two main sections. There are no manual URL or token inputs — tokens are fetched automatically via `useSandbox()` and the room name is taken from the `?room=` query parameter (defaulting to `"livestream-e2e"`).
+
+### Receive (WHEP)
+
+- Start/Stop Receiving button
+- Video player to display the received stream
+- Connection status and error display
+
+### Publish (WHIP)
+
+- Start/Stop Publishing button
+- Video preview showing animated emoji (no camera required!)
+- Connection status and error display
+
+## Usage
+
+### Install dependencies
+
+```bash
+yarn install
+```
+
+### Run dev server
+
+```bash
+yarn dev
+```
+
+The app will be available at `http://localhost:5174`
+
+### Run tests
+
+```bash
+yarn e2e        # Run tests
+yarn e2e:ui     # Run tests with Playwright UI
+```
diff --git a/e2e-tests/livestream-client/config.ts b/e2e-tests/livestream-client/config.ts
@@ -0,0 +1,2 @@
+export const FISHJAM_URL =
+  import.meta.env.VITE_FISHJAM_URL || "http://localhost:4000";
diff --git a/e2e-tests/livestream-client/index.html b/e2e-tests/livestream-client/index.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Livestream E2E Tests</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 100%;
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/e2e-tests/livestream-client/package.json b/e2e-tests/livestream-client/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@fishjam-e2e/livestream-client",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "license": "Apache-2.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "lint": "eslint . --ext .ts,.tsx --fix",
+    "lint:check": "eslint . --ext .ts,.tsx",
+    "e2e": "playwright test",
+    "e2e:ui": "playwright test --ui",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fishjam-cloud/react-client": "workspace:*",
+    "@fishjam-cloud/ts-client": "workspace:*",
+    "react": "19.1.0",
+    "react-dom": "19.1.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.51.1",
+    "@types/node": "^22.14.0",
+    "@types/react": "19.1.0",
+    "@types/react-dom": "19.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.29.1",
+    "@typescript-eslint/parser": "^8.29.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^8.57.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "prettier": "^3.8.1",
+    "typescript": "^5.8.3",
+    "vite": "^6.2.6"
+  }
+}
diff --git a/e2e-tests/livestream-client/playwright.config.ts b/e2e-tests/livestream-client/playwright.config.ts
@@ -0,0 +1,58 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./scenarios",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [
+    ["list"],
+    [
+      "html",
+      {
+        outputFolder: "../../playwright-report/livestream-e2e",
+        open: "never",
+      },
+    ],
+  ],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://localhost:5174",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+        launchOptions: {
+          args: [
+            "--use-fake-ui-for-media-stream",
+            "--use-fake-device-for-media-stream",
+          ],
+        },
+      },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: `VITE_FISHJAM_URL=${process.env.VITE_FISHJAM_URL ?? ""} yarn dev`,
+    url: "http://localhost:5174",
+    reuseExistingServer: !process.env.CI,
+  },
+});
diff --git a/e2e-tests/livestream-client/scenarios/basic.spec.ts b/e2e-tests/livestream-client/scenarios/basic.spec.ts
@@ -0,0 +1,61 @@
+import { expect, test } from "@playwright/test";
+
+import {
+  assertThatVideoIsPlaying,
+  assertThatVideoStopped,
+  startPublishing,
+  startReceiving,
+  stopPublishing,
+  stopReceiving,
+} from "./utils";
+
+test("Displays basic UI", async ({ page }) => {
+  await page.goto("/");
+
+  await expect(
+    page.getByRole("button", { name: "Start Publishing", exact: true }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("button", { name: "Start Receiving", exact: true }),
+  ).toBeVisible();
+  await expect(page.locator("#receive-video")).toBeVisible();
+  await expect(page.locator("#publish-video")).toBeVisible();
+});
+
+test("Viewer receives a published stream", async ({ page }) => {
+  await page.goto(`/?room=${encodeURIComponent(crypto.randomUUID())}`);
+
+  await startPublishing(page);
+  await startReceiving(page);
+  await assertThatVideoIsPlaying(page);
+});
+
+test("Viewer stops receiving when disconnected", async ({ page }) => {
+  await page.goto(`/?room=${encodeURIComponent(crypto.randomUUID())}`);
+  await startPublishing(page);
+  await startReceiving(page);
+  await assertThatVideoIsPlaying(page);
+  await stopReceiving(page);
+  await assertThatVideoStopped(page);
+});
+
+test("Viewer can reconnect after disconnecting", async ({ page }) => {
+  await page.goto(`/?room=${encodeURIComponent(crypto.randomUUID())}`);
+
+  await startPublishing(page);
+  await startReceiving(page);
+  await assertThatVideoIsPlaying(page);
+  await stopReceiving(page);
+  await startReceiving(page);
+  await assertThatVideoIsPlaying(page);
+});
+
+test("Stream ends when streamer stops publishing", async ({ page }) => {
+  await page.goto(`/?room=${encodeURIComponent(crypto.randomUUID())}`);
+
+  await startPublishing(page);
+  await startReceiving(page);
+  await assertThatVideoIsPlaying(page);
+  await stopPublishing(page);
+  await assertThatVideoStopped(page);
+});
diff --git a/e2e-tests/livestream-client/scenarios/utils.ts b/e2e-tests/livestream-client/scenarios/utils.ts
@@ -0,0 +1,84 @@
+import type { Page } from "@playwright/test";
+import { expect, test } from "@playwright/test";
+
+const TO_PASS_TIMEOUT_MILLIS = 15 * 1000;
+
+const expectWithLongerTimeout = expect.configure({
+  timeout: TO_PASS_TIMEOUT_MILLIS,
+});
+
+type ViewerWindow = typeof window & {
+  viewer?: {
+    getStatistics: () => Promise<RTCStatsReport | undefined>;
+  };
+};
+
+const getDecodedFrames = (page: Page): Promise<number> =>
+  page.evaluate(async () => {
+    const viewer = (window as ViewerWindow)?.viewer;
+    if (!viewer) return -1;
+    const stats = await viewer.getStatistics();
+    if (!stats) return -1;
+    for (const stat of stats.values()) {
+      if (stat.type === "inbound-rtp") {
+        return stat.framesDecoded ?? 0;
+      }
+    }
+    return 0;
+  });
+
+export const startPublishing = async (page: Page) =>
+  await test.step("Start publishing", async () => {
+    await page
+      .getByRole("button", { name: "Start Publishing", exact: true })
+      .click();
+    await expectWithLongerTimeout(
+      page.locator("#publish-status"),
+    ).toContainText("Publishing");
+  });
+
+export const stopPublishing = async (page: Page) =>
+  await test.step("Stop publishing", async () => {
+    await page
+      .getByRole("button", { name: "Stop Publishing", exact: true })
+      .click();
+    await expectWithLongerTimeout(
+      page.locator("#publish-status"),
+    ).toContainText("Not publishing");
+  });
+
+export const startReceiving = async (page: Page) =>
+  await test.step("Start receiving", async () => {
+    await page
+      .getByRole("button", { name: "Start Receiving", exact: true })
+      .click();
+    await expectWithLongerTimeout(
+      page.locator("#receive-status"),
+    ).toContainText("Receiving");
+  });
+
+export const stopReceiving = async (page: Page) =>
+  await test.step("Stop receiving", async () => {
+    await page
+      .getByRole("button", { name: "Stop Receiving", exact: true })
+      .click();
+    await expectWithLongerTimeout(
+      page.locator("#receive-status"),
+    ).toContainText("Not receiving");
+  });
+
+export const assertThatVideoIsPlaying = async (page: Page) =>
+  await test.step("Assert that video is playing", async () => {
+    const firstMeasure = await getDecodedFrames(page);
+    await expectWithLongerTimeout(async () =>
+      expect(await getDecodedFrames(page)).toBeGreaterThan(firstMeasure),
+    ).toPass();
+  });
+
+export const assertThatVideoStopped = async (page: Page) =>
+  await test.step("Assert that video stopped", async () => {
+    const firstMeasure = await getDecodedFrames(page);
+    await page.waitForTimeout(500);
+    const secondMeasure = await getDecodedFrames(page);
+    expect(secondMeasure - firstMeasure).toBeLessThanOrEqual(0);
+  });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const FISHJAM_URL =
		import.meta.env.VITE_FISHJAM_URL \|\| "http://localhost:4000";