FCE-747 | integrate new protobufs in webrtc and ts client (#181)

## Description

Implements protobuf communication in `webrtc-client` as well as in
`ts-client`.

## Important changes

- External libraries like `protobufs` or `webrtc-client` are
automatically bundled by `tsup`, because they're `devDependencies`.
- Bundling type declarations of the external libraries is handled by the
`--dts-resolve` `tsup` flag.
- `build` script in root `package.json` uses `yarn workspaces` with
`--topological-dev` flag to preserve the build order while using
`devDependencies`.
- Typescript can resolve untranspiled `*.ts` files from the
`@fishjam-client/protobufs` package, because I added path aliases to
`webrtc-client/tsconfig.json` and `webrtc-client/tsconfig.json`.
- `e2e/ts-client` has been renamed to `e2e/webrtc-client` because it
actually tests the webrtc endpoint only.

## Types of changes

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [x] Breaking change (fix or feature that would cause existing
functionality to
      not work as expected)

.github/workflows/docs.yaml

@@ -31,6 +31,8 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+      - name: Install Protoc
+        uses: arduino/setup-protoc@v3
       - name: Setup Pages
         uses: actions/configure-pages@v3
       - name: Install node dependencies
@@ -46,4 +48,4 @@ jobs:
           path: "docs"
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v2

.github/workflows/fishjam-chat.yaml

@@ -22,6 +22,10 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+
+      - name: Install Protoc
+        uses: arduino/setup-protoc@v3
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:

.github/workflows/node.yaml

@@ -19,11 +19,14 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - name: Install Protoc
+        uses: arduino/setup-protoc@v3
+
       - name: Use Node.js ${{ matrix.node-version }} 🛎️
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'npm'
+          cache: "npm"
 
       - name: Install dependencies ⬇️
         run: yarn --immutable

.github/workflows/release.yaml

@@ -10,14 +10,16 @@ jobs:
       id-token: write
     steps:
       - uses: actions/checkout@v4
+      - name: Install Protoc
+        uses: arduino/setup-protoc@v3
       # Setup .npmrc file to publish to npm
       - uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
-          registry-url: 'https://registry.npmjs.org'
+          node-version: "20.x"
+          registry-url: "https://registry.npmjs.org"
       - run: yarn
       - run: yarn build
-      - run: yarn npm publish --access public 
+      - run: yarn npm publish --access public
         working-directory: packages/ts-client
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
@@ -31,11 +33,11 @@ jobs:
       # Setup .npmrc file to publish to npm
       - uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
-          registry-url: 'https://registry.npmjs.org'
+          node-version: "20.x"
+          registry-url: "https://registry.npmjs.org"
       - run: yarn
       - run: yarn build
-      - run: yarn npm publish --access public 
+      - run: yarn npm publish --access public
         working-directory: packages/react-client
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/playwright.yaml → .github/workflows/tests.yaml

@@ -1,4 +1,4 @@
-name: Playwright Tests
+name: Tests 🧪
 
 on:
   push:
@@ -15,6 +15,9 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - name: Install Protoc
+        uses: arduino/setup-protoc@v3
+
       - uses: actions/setup-node@v4
         with:
           node-version: 20
@@ -26,14 +29,17 @@ jobs:
       - name: Build 📦
         run: yarn build
 
+      - name: Run unit tests 🧪
+        run: yarn test:unit
+
       - name: Install Playwright Browsers 🧭
         run: npx playwright install --with-deps
 
       - name: Login to GitHub Container Registry
         run: echo ${{ secrets.GITHUB_TOKEN }} | docker login ghcr.io -u ${{ github.actor }} --password-stdin
 
-      - name: Pull Fishjam for ts-client tests
-        run: docker compose -f e2e-tests/ts-client/docker-compose-test.yaml pull fishjam
+      - name: Pull Fishjam for webrtc-client tests
+        run: docker compose -f e2e-tests/webrtc-client/docker-compose-test.yaml pull fishjam
 
       - name: Pull Fishjam for react-client tests
         run: docker compose -f e2e-tests/react-client/docker-compose-test.yaml pull fishjam

.gitmodules

@@ -1,4 +1,4 @@
-[submodule "packages/ts-client/protos"]
-	path = packages/ts-client/protos
+[submodule "packages/protobufs/protos"]
+	path = packages/protobufs/protos
 	url = https://github.com/fishjam-cloud/protos.git
 	branch = master

e2e-tests/react-client/docker-compose-test.yaml

@@ -2,9 +2,10 @@ version: "3"
 
 services:
   fishjam:
-    image: "ghcr.io/fishjam-cloud/fishjam:0.9.0"
+    image: "ghcr.io/fishjam-cloud/fishjam:0.10.0-dev"
     container_name: fishjam
     restart: on-failure
+    platform: linux/amd64
     healthcheck:
       test: >
         curl --fail -H "authorization: Bearer development" http://localhost:5002/room || exit 1

e2e-tests/react-client/scenarios/utils.ts

@@ -1,7 +1,10 @@
 import type { Page } from "@playwright/test";
 import { expect, test } from "@playwright/test";
 
-export const joinRoomAndAddScreenShare = async (page: Page, roomId: string): Promise<string> =>
+export const joinRoomAndAddScreenShare = async (
+  page: Page,
+  roomId: string
+): Promise<string> =>
   test.step("Join room and add track", async () => {
     const peerRequest = await createPeer(page, roomId);
     try {
@@ -12,33 +15,51 @@ export const joinRoomAndAddScreenShare = async (page: Page, roomId: string): Pro
 
       await test.step("Join room", async () => {
         await page.getByPlaceholder("token").fill(peerToken);
-        await page.getByRole("button", { name: "Connect", exact: true }).click();
+        await page
+          .getByRole("button", { name: "Connect", exact: true })
+          .click();
         await expect(page.getByText("Status: connected")).toBeVisible();
       });
 
       await test.step("Add screenshare", async () => {
-        await page.getByRole("button", { name: "Start screen share", exact: true }).click();
+        await page
+          .getByRole("button", { name: "Start screen share", exact: true })
+          .click();
       });
 
       return peerId;
     } catch (e) {
       // todo fix
-      throw { status: peerRequest.status(), response: await peerRequest.json() };
+      throw {
+        status: peerRequest.status(),
+        response: await peerRequest.json(),
+      };
     }
   });
 
-export const assertThatRemoteTracksAreVisible = async (page: Page, otherClientIds: string[]) => {
+export const assertThatRemoteTracksAreVisible = async (
+  page: Page,
+  otherClientIds: string[]
+) => {
   await test.step("Assert that remote tracks are visible", () =>
     Promise.all(
-      otherClientIds.map((peerId) => expect(page.locator(`css=video[data-peer-id="${peerId}"]`)).toBeVisible()),
+      otherClientIds.map((peerId) =>
+        expect(
+          page.locator(`css=video[data-peer-id="${peerId}"]`)
+        ).toBeVisible()
+      )
     ));
 };
 
 export const assertThatOtherVideoIsPlaying = async (page: Page) => {
   await test.step("Assert that media is working", async () => {
     const getDecodedFrames: () => Promise<number> = () =>
       page.evaluate(async () => {
-        const client = (window as typeof window & { client: { getStatistics: () => Promise<RTCStatsReport> } }).client;
+        const client = (
+          window as typeof window & {
+            client: { getStatistics: () => Promise<RTCStatsReport> };
+          }
+        ).client;
         const stats = await client.getStatistics();
         for (const stat of stats?.values() ?? []) {
           if (stat.type === "inbound-rtp") {
@@ -48,28 +69,40 @@ export const assertThatOtherVideoIsPlaying = async (page: Page) => {
         return 0;
       });
     const firstMeasure = await getDecodedFrames();
-    await expect(async () => expect((await getDecodedFrames()) > firstMeasure).toBe(true)).toPass();
+    await expect(async () =>
+      expect((await getDecodedFrames()) > firstMeasure).toBe(true)
+    ).toPass();
   });
 };
 
 export const createRoom = async (page: Page, maxPeers?: number) =>
   await test.step("Create room", async () => {
     const data = {
+      videoCodec: "vp8",
       ...(maxPeers ? { maxPeers } : {}),
     };
 
-    const roomRequest = await page.request.post("http://localhost:5002/room", { data });
+    const roomRequest = await page.request.post("http://localhost:5002/room", {
+      data,
+    });
     return (await roomRequest.json()).data.room.id as string;
   });
 
-export const createPeer = async (page: Page, roomId: string, enableSimulcast: boolean = true) =>
+export const createPeer = async (
+  page: Page,
+  roomId: string,
+  enableSimulcast: boolean = true
+) =>
   await test.step("Create room", async () => {
-    return await page.request.post("http://localhost:5002/room/" + roomId + "/peer", {
-      data: {
-        type: "webrtc",
-        options: {
-          enableSimulcast,
+    return await page.request.post(
+      "http://localhost:5002/room/" + roomId + "/peer",
+      {
+        data: {
+          type: "webrtc",
+          options: {
+            enableSimulcast,
+          },
         },
-      },
-    });
+      }
+    );
   });

e2e-tests/ts-client/app/package.json → e2e-tests/webrtc-client/app/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@fishjam-e2e/ts-client-e2e",
+  "name": "@fishjam-e2e/webrtc-client-e2e",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.10.0",
   "type": "module",
   "license": "Apache-2.0",
   "scripts": {