feat(react-sdk)!: Visual redesign of the SDK and Demo App (#1194)

### Overview

Implements the new styling for our SDK-provided components.

# Changes

## Styling

- New global variables like spacing, font-size, colors, button states
etc, have been added. The old variables are still available.
- Major style changes have been made to the following items: Callstats,
Device settings, Buttons, Particpant layout
- Icons have been updated and added

## Components

### Button

#### CompositeButton.tsx

- `ToggleMenuButton` prop has been added by default
`DefaultToggleMenuButton`
- The composite buttons has an optional variant `primary` and
`secondary` to indicate a primary and secondary active state of the
button
- An `active` class has been added to the `DefaultToggleMenuButton`.

### Call controls

- The default caption value has been removed
- A title has been added to the buttons
- Some buttons have been provided a variant prop
- CallStats button has been replaced with Reactions button

### CancelCallButton.tsx

- A cancel call confirmation button is added to allow the user end the
call for all participants or leave the call.

### ToggleAudioButton.tsx

- A default permission state has been added to indicate that the
browsers audio permissions have not been granted

### ToggleVideoButton.tsx

- A default permission state has been added to indicate that the
browsers camera permissions have not been granted

### ReactionsButton.tsx

- Added a layout prop `horizontal` or `vertical` defaults to
`horizontal`

### RecordCallButton.tsx

- An end recording confirmation button component has been added. To
display a confirmation modal to the user either continue the recording
or cancel it

## Other

### CallParticipantsList.tsx

- Removed the copy url button invite new participants
- Removed other related invite functionality

### CallRecordingListHeader

- Put the refresh functionality to optional

### CallStats.tsx

- The stats are defined with a `lowBound` (default 75) and a `highBound`
(default 400) prop to indicate what you think is an acceptable latency.

### DropdownSelect.tsx

- Added a dropdown selector used in the device settings

### Icon.tsx

- Added a className prop to icon

### MenuToggle.tsx

- Ability to choose between to visual types `portal` or `menu` to
display the MenuToggle.

### Notification.tsx

- Added a `close` prop so a notification can be closed by the user

### RecordingInProgressNotification.tsx

- Added a notification that can be used to be displayed when a recording
is in progress

### DefaultVideoPlaceholder

- Added an initials fallback

---------

Co-authored-by: Oliver Lazoroski <[email protected]>
Co-authored-by: Matvei Andrienko <[email protected]>
Co-authored-by: Matvei Andrienko <[email protected]>
Co-authored-by: Aleksandar Apostolov <[email protected]>

.github/workflows/deploy-react-sample-apps.yml

@@ -21,6 +21,10 @@ on:
       - '!**/docusaurus/**'
   workflow_dispatch:
 
+concurrency:
+  group: deploy-react-sample-apps-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   build-and-deploy-sample-apps:
     name: Deploy ${{ matrix.application.name }}
@@ -30,22 +34,22 @@ jobs:
       matrix:
         application:
           - name: messenger-clone-react
-            folder: messenger-clone
             project-id: prj_FNUiw2FtWJEDVHP5XttyLQmGw39n
             populate-tokens: true
           - name: zoom-clone-react
-            folder: zoom-clone
             project-id: prj_y2GjsUXNvW7MdQ0EpJVG0FBNNovL
             populate-tokens: true
           - name: egress-composite
             project-id: prj_R6DLpP2Gxc0aRHGEopQWE8tveNDX
           - name: livestream-app-react
-            folder: livestream-app
             project-id: prj_uNJTw7DefSAntAoWCXwJaHc1khoA
           - name: audio-rooms
             project-id: prj_0WnHcvVkXpM4PRc2ymVmrAHFILoT
-          - name: react-dogfood
-            project-id: prj_bUGd9z0sMAMxZmmgMaec3oiRbWzT
+          - name: react-dogfood - https://pronto.getstream.io
+            project-id: prj_4TTdjeVHEDhWWiFRfjIr1QFb5ell
+          - name: react-dogfood - https://getstream.io/video/demos
+            project-id: prj_tTLn3XMVal4D1Nnel9nPJ0hoI9wA
+            base-path: /video/demos
 
     env:
       VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
@@ -87,6 +91,8 @@ jobs:
       ### Vercel deployment (Preview) ###
       - name: Vercel Pull/Build/Deploy (Preview)
         if: ${{ github.ref_name != 'main' }}
+        env:
+          NEXT_PUBLIC_BASE_PATH: ${{ matrix.application.base-path || '' }}
         run: >
           yarn vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }} &&
           yarn vercel build --token=${{ secrets.VERCEL_TOKEN }} &&
@@ -95,6 +101,8 @@ jobs:
       ### Vercel deployment (Production) ###
       - name: Vercel Pull/Build/Deploy (Production)
         if: ${{ github.ref_name == 'main' }}
+        env:
+          NEXT_PUBLIC_BASE_PATH: ${{ matrix.application.base-path || '' }}
         run: >
           yarn vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }} &&
           yarn vercel build --prod --token=${{ secrets.VERCEL_TOKEN }} &&

package.json

@@ -72,7 +72,7 @@
     "nx": "16.0.1",
     "prettier": "^2.8.8",
     "typescript": "^5.2.2",
-    "vercel": "^32.4.1",
+    "vercel": "^33.2.0",
     "vite": "^4.4.11"
   }
 }

packages/client/package.json

@@ -28,9 +28,9 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@protobuf-ts/runtime": "^2.9.1",
-    "@protobuf-ts/runtime-rpc": "^2.9.1",
-    "@protobuf-ts/twirp-transport": "^2.9.1",
+    "@protobuf-ts/runtime": "^2.9.3",
+    "@protobuf-ts/runtime-rpc": "^2.9.3",
+    "@protobuf-ts/twirp-transport": "^2.9.3",
     "@types/ws": "^8.5.7",
     "axios": "^1.6.0",
     "base64-js": "^1.5.1",

packages/client/src/__tests__/server-side/call.test.ts

@@ -89,12 +89,6 @@ describe('call API', () => {
     });
 
     expect(response.calls.length).toBeLessThanOrEqual(2);
-
-    response = await client.queryCalls({
-      filter_conditions: { backstage: { $eq: false } },
-    });
-
-    expect(response.calls.length).toBeGreaterThanOrEqual(1);
   });
 
   describe('recording', () => {
@@ -150,7 +144,7 @@ describe('call API', () => {
       );
     });
 
-    it('query recordings', async () => {
+    it.skip('query recordings', async () => {
       // somewhat dummy test, we should do a proper test in the future
       let response = await call.queryRecordings();
 

packages/client/src/gen/google/protobuf/struct.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.0 with parameter long_type_string,client_generic,server_none,eslint_disable
+// @generated by protobuf-ts 2.9.3 with parameter long_type_string,client_generic,server_none,eslint_disable
 // @generated from protobuf file "google/protobuf/struct.proto" (package "google.protobuf", syntax proto3)
 // tslint:disable
 //
@@ -46,7 +46,6 @@ import type {
 } from '@protobuf-ts/runtime';
 import {
   isJsonObject,
-  MESSAGE_TYPE,
   MessageType,
   reflectionMergePartial,
   typeofJsonValue,
@@ -226,11 +225,8 @@ class Struct$Type extends MessageType<Struct> {
     return target;
   }
   create(value?: PartialMessage<Struct>): Struct {
-    const message = { fields: {} };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.fields = {};
     if (value !== undefined)
       reflectionMergePartial<Struct>(this, message, value);
     return message;
@@ -300,7 +296,7 @@ class Struct$Type extends MessageType<Struct> {
     options: BinaryWriteOptions,
   ): IBinaryWriter {
     /* map<string, google.protobuf.Value> fields = 1; */
-    for (let k of Object.keys(message.fields)) {
+    for (let k of globalThis.Object.keys(message.fields)) {
       writer
         .tag(1, WireType.LengthDelimited)
         .fork()
@@ -385,7 +381,10 @@ class Value$Type extends MessageType<Value> {
       case 'nullValue':
         return null;
       case 'numberValue':
-        return message.kind.numberValue;
+        let numberValue = message.kind.numberValue;
+        if (typeof numberValue == 'number' && !Number.isFinite(numberValue))
+          throw new globalThis.Error();
+        return numberValue;
       case 'stringValue':
         return message.kind.stringValue;
       case 'listValue':
@@ -446,11 +445,8 @@ class Value$Type extends MessageType<Value> {
     return target;
   }
   create(value?: PartialMessage<Value>): Value {
-    const message = { kind: { oneofKind: undefined } };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.kind = { oneofKind: undefined };
     if (value !== undefined)
       reflectionMergePartial<Value>(this, message, value);
     return message;
@@ -616,11 +612,8 @@ class ListValue$Type extends MessageType<ListValue> {
     return target;
   }
   create(value?: PartialMessage<ListValue>): ListValue {
-    const message = { values: [] };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.values = [];
     if (value !== undefined)
       reflectionMergePartial<ListValue>(this, message, value);
     return message;

packages/client/src/gen/google/protobuf/timestamp.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.0 with parameter long_type_string,client_generic,server_none,eslint_disable
+// @generated by protobuf-ts 2.9.3 with parameter long_type_string,client_generic,server_none,eslint_disable
 // @generated from protobuf file "google/protobuf/timestamp.proto" (package "google.protobuf", syntax proto3)
 // tslint:disable
 //
@@ -44,7 +44,6 @@ import type {
   PartialMessage,
 } from '@protobuf-ts/runtime';
 import {
-  MESSAGE_TYPE,
   MessageType,
   PbLong,
   reflectionMergePartial,
@@ -285,11 +284,9 @@ class Timestamp$Type extends MessageType<Timestamp> {
     return target;
   }
   create(value?: PartialMessage<Timestamp>): Timestamp {
-    const message = { seconds: '0', nanos: 0 };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.seconds = '0';
+    message.nanos = 0;
     if (value !== undefined)
       reflectionMergePartial<Timestamp>(this, message, value);
     return message;