chore: resolve conflicts from main

GetStream · Oct 3, 2023 · ced0c1c · ced0c1c
2 parents e3e3618 + 6e8a4bd
commit ced0c1c
Show file tree

Hide file tree

Showing 202 changed files with 5,322 additions and 2,301 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,17 @@
+**/node_modules/
+**/dist/
+**/.env*
+**/.DS_Store
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+.github/
+.readme-assets/
+sample-apps/**
+!sample-apps/react/egress-composite/
+packages/react-native-sdk/
+sample-apps/react/egress-composite/tests/
+.styles/
diff --git a/.github/actions/rn-bootstrap/action.yml b/.github/actions/rn-bootstrap/action.yml
@@ -102,6 +102,12 @@ runs:
       run: npm install -g "https://github.com/GetStream/stream-video-buddy#1.6.9"
       shell: bash
 
+    # Required to emulate the participants during E2E testing
+    - name: Install Chromium
+      if: ${{ env.INSTALL_VIDEO_BUDDY == 'true' }}
+      run: cd && npx playwright install
+      shell: bash
+
     # Required to capture Android video during E2E testing
     - name: Install FFmpeg
       if: ${{ env.INSTALL_FFMPEG == 'true' }}

diff --git a/.github/workflows/copy-react-demo-s3.yml b/.github/workflows/copy-react-demo-s3.yml
@@ -37,6 +37,7 @@ jobs:
       VITE_TOKEN_PROVIDER_URL: ${{secrets.TOKEN_PROVIDER_URL}}
       VITE_GTM_ID: ${{ secrets.VIDEO_DEMO_GTM_ID }}
       VITE_GTM_PROJECT: ${{ vars.VIDEO_DEMO_GTM_PROJECT }}
+      VITE_GLEAP_KEY: ${{ secrets.VIDEO_DEMO_GLEAP_KEY }}
     steps:
       - name: Checkout
         uses: actions/checkout@v3

diff --git a/.github/workflows/egress-composite-e2e.yml b/.github/workflows/egress-composite-e2e.yml
@@ -0,0 +1,77 @@
+name: Egress Composite E2E
+on:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - reopened
+    paths:
+      - 'sample-apps/react/egress-composite/**'
+      - 'packages/client/**'
+      - 'packages/react-sdk/**'
+      - 'packages/styling/**'
+      - 'packages/react-bindings/**'
+env:
+  VITE_STREAM_API_KEY: ${{ vars.EGRESS_STREAM_API_KEY }}
+  VITE_STREAM_USER_TOKEN: ${{ secrets.EGRESS_USER_TOKEN }}
+  STREAM_SDK_TEST_APP: ${{ secrets.STREAM_SDK_TEST_APP }}
+  STREAM_SDK_TEST_ACCOUNT_EMAIL: ${{ secrets.STREAM_SDK_TEST_ACCOUNT_EMAIL }}
+  STREAM_SDK_TEST_ACCOUNT_PASSWORD: ${{ secrets.STREAM_SDK_TEST_ACCOUNT_PASSWORD }}
+  STREAM_SDK_TEST_ACCOUNT_OTP_SECRET: ${{ secrets.STREAM_SDK_TEST_ACCOUNT_OTP_SECRET }}
+
+jobs:
+  test:
+    timeout-minutes: 20
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 1
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          cache: 'yarn'
+          cache-dependency-path: 'yarn.lock'
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Build packages
+        env:
+          NODE_ENV: production
+        run: yarn build:react:deps
+
+      - name: Cache Playwright browsers
+        uses: actions/cache@v3
+        id: playwright-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}${{ runner.arch }}-playwright-browsers
+
+      - name: Install Playwright browsers if not cached
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: npx playwright install chromium
+
+      - name: Install Playwright system dependencies (always)
+        run: npx playwright install-deps
+
+      - name: Authenticate stream-video-buddy
+        uses: nick-fields/[email protected]
+        with:
+          timeout_minutes: 5
+          max_attempts: 2
+          command: yarn workspace @stream-io/egress-composite buddy auth
+
+      - name: Run Playwright tests
+        run: yarn workspace @stream-io/egress-composite test:e2e
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: test-results
+          path: sample-apps/react/egress-composite/test-results/
+          retention-days: 5
diff --git a/.github/workflows/react-native-workflow.yml b/.github/workflows/react-native-workflow.yml
@@ -116,7 +116,7 @@ jobs:
 
   deploy_ios:
     name: Deploy iOS
-    needs: test_ios
+    needs: build_ios
     timeout-minutes: 60
     if: ${{ github.ref == 'refs/heads/main' }}
     runs-on: macos-latest
@@ -236,7 +236,7 @@ jobs:
 
   deploy_android:
     name: Deploy Android
-    needs: test_android
+    needs: build_android
     timeout-minutes: 60
     if: ${{ github.ref == 'refs/heads/main' }}
     runs-on: ubuntu-latest

diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,27 @@
+FROM node:20-alpine as packager
+WORKDIR /e2e
+
+COPY sample-apps/ sample-apps/
+RUN find sample-apps \! -name "package.json" -mindepth 3 -maxdepth 3 -print | xargs rm -rf
+
+COPY packages/ packages/
+RUN find packages \! -name "package.json" -mindepth 2 -maxdepth 2 -print | xargs rm -rf
+
+FROM node:20-bullseye as runner
+WORKDIR /e2e
+
+COPY .yarn/ ./.yarn/
+COPY yarn.lock package.json .yarnrc.yml tsconfig.json ./
+COPY --from=packager /e2e/packages ./packages
+COPY --from=packager /e2e/sample-apps ./sample-apps
+
+RUN yarn install
+
+RUN npx playwright install chromium
+RUN npx playwright install-deps
+
+# Copy all sources next
+COPY ./packages ./packages
+RUN yarn build:react:deps
+
+COPY ./sample-apps/ ./sample-apps/
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -0,0 +1,18 @@
+# this compose file exists to generate screenshots
+# for the CI to compare against, replace key and token with your own before running
+# docker compose up, each change to the sources (not including tests) requires image rebuild
+# https://github.com/microsoft/playwright/issues/8161
+
+services:
+  generate-screenshots:
+    build: ./
+    command: >
+      yarn workspace @stream-io/egress-composite run test:e2e 
+      -u 
+      --timeout 5000
+    volumes:
+      - ./sample-apps/react/egress-composite/tests/:/e2e/sample-apps/react/egress-composite/tests/
+    environment:
+      VITE_STREAM_API_KEY: <key>
+      VITE_STREAM_USER_TOKEN: <token>
+      CI: true
diff --git a/packages/client/CHANGELOG.md b/packages/client/CHANGELOG.md
@@ -2,6 +2,97 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.3.28](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-0.3.27...@stream-io/video-client-0.3.28) (2023-09-28)
+
+
+### Bug Fixes
+
+* use `@stream-io/video-client` as a tag prefix ([#1116](https://github.com/GetStream/stream-video-js/issues/1116)) ([418206a](https://github.com/GetStream/stream-video-js/commit/418206aaa3a013e0d551e109d8243e75a053d5a3))
+
+### [0.3.27](https://github.com/GetStream/stream-video-js/compare/client0.3.26...client0.3.27) (2023-09-28)
+
+
+### Bug Fixes
+
+* use `@types/ws` as a regular dependency ([#1115](https://github.com/GetStream/stream-video-js/issues/1115)) ([bafad33](https://github.com/GetStream/stream-video-js/commit/bafad3317b7b899b4f2a6a3fdf3b051ad4c96c34))
+
+### [0.3.26](https://github.com/GetStream/stream-video-js/compare/client0.3.25...client0.3.26) (2023-09-27)
+
+
+### Features
+
+* **Call Preview:** Support for call thumbnails ([#1099](https://github.com/GetStream/stream-video-js/issues/1099)) ([9274f76](https://github.com/GetStream/stream-video-js/commit/9274f760ed264ee0ee6ac97c6fe679288e067fd8))
+
+### [0.3.25](https://github.com/GetStream/stream-video-js/compare/client0.3.24...client0.3.25) (2023-09-27)
+
+
+### Features
+
+* **react-sdk:** LivestreamLayout ([#1103](https://github.com/GetStream/stream-video-js/issues/1103)) ([6636699](https://github.com/GetStream/stream-video-js/commit/6636699701dfd5eb5886c50781dd5f16a8470da5))
+
+### [0.3.24](https://github.com/GetStream/stream-video-js/compare/client0.3.23...client0.3.24) (2023-09-26)
+
+
+### Features
+
+* **client:** share replay of computed observables ([#1095](https://github.com/GetStream/stream-video-js/issues/1095)) ([759d9a2](https://github.com/GetStream/stream-video-js/commit/759d9a2c403aa11a64e5470aa53622022918e24e))
+
+### [0.3.23](https://github.com/GetStream/stream-video-js/compare/client0.3.22...client0.3.23) (2023-09-26)
+
+
+### Bug Fixes
+
+* add type check of deviceId before setting sinkId ([#1108](https://github.com/GetStream/stream-video-js/issues/1108)) ([705515e](https://github.com/GetStream/stream-video-js/commit/705515e5f63a35286fdb45725b9e299afe09c9bb))
+
+### [0.3.22](https://github.com/GetStream/stream-video-js/compare/client0.3.21...client0.3.22) (2023-09-25)
+
+
+### Bug Fixes
+
+* Add extra delay before attempting to play video in Safari and Firefox ([#1106](https://github.com/GetStream/stream-video-js/issues/1106)) ([5b4a589](https://github.com/GetStream/stream-video-js/commit/5b4a58918240a7b63807726609d6d54b92cfe1d2))
+
+### [0.3.21](https://github.com/GetStream/stream-video-js/compare/client0.3.20...client0.3.21) (2023-09-20)
+
+
+### Bug Fixes
+
+* unmount video element when there is no video track or participant is invisible ([#1096](https://github.com/GetStream/stream-video-js/issues/1096)) ([bd01835](https://github.com/GetStream/stream-video-js/commit/bd01835f4e93c981ca2e5a7e4e09142ea4e326cf)), closes [#1094](https://github.com/GetStream/stream-video-js/issues/1094)
+
+### [0.3.20](https://github.com/GetStream/stream-video-js/compare/client0.3.19...client0.3.20) (2023-09-19)
+
+
+### Features
+
+* Update with new API spec ([#1098](https://github.com/GetStream/stream-video-js/issues/1098)) ([ced372c](https://github.com/GetStream/stream-video-js/commit/ced372ca068086375024d59a977014efcadefef2))
+
+### [0.3.19](https://github.com/GetStream/stream-video-js/compare/client0.3.18...client0.3.19) (2023-09-15)
+
+
+### Bug Fixes
+
+* initial device state handling ([#1092](https://github.com/GetStream/stream-video-js/issues/1092)) ([a98d07f](https://github.com/GetStream/stream-video-js/commit/a98d07f9e3eaf6bb059911538ba2a64a1550e53d))
+
+### [0.3.18](https://github.com/GetStream/stream-video-js/compare/client0.3.17...client0.3.18) (2023-09-15)
+
+
+### Bug Fixes
+
+* **DynascaleManager:** update subscription upon cleanup ([#1089](https://github.com/GetStream/stream-video-js/issues/1089)) ([bad8ac1](https://github.com/GetStream/stream-video-js/commit/bad8ac1651594b237b96987521000008753a80a5))
+
+### [0.3.17](https://github.com/GetStream/stream-video-js/compare/client0.3.16...client0.3.17) (2023-09-14)
+
+
+### Features
+
+* speaking while muted notification ([#1011](https://github.com/GetStream/stream-video-js/issues/1011)) ([b17600c](https://github.com/GetStream/stream-video-js/commit/b17600c626a55f1ef4c7abacab6e02d38e3263b7))
+
+### [0.3.16](https://github.com/GetStream/stream-video-js/compare/client0.3.15...client0.3.16) (2023-09-13)
+
+
+### Features
+
+* restore remote muting functionality ([#1078](https://github.com/GetStream/stream-video-js/issues/1078)) ([091d444](https://github.com/GetStream/stream-video-js/commit/091d4440a423e5f265e6fd6b1ceea32a447de93a)), closes [#1070](https://github.com/GetStream/stream-video-js/issues/1070) [#988](https://github.com/GetStream/stream-video-js/issues/988)
+
 ### [0.3.15](https://github.com/GetStream/stream-video-js/compare/client0.3.14...client0.3.15) (2023-09-11)
 
 

diff --git a/packages/client/README.md b/packages/client/README.md
@@ -1,8 +1,8 @@
-# @stream-io/video-client
+# Official Plain-JS SDK and Low-Level Client for [Stream Video](https://getstream.io/video/docs/)
 
-🚧 **WARNING** This package is not yet stable, it is for internal use only. For more information check out our [video product page](https://getstream.io/video/). 🚧
+<img src="../../.readme-assets/Github-Graphic-JS.jpg" alt="Stream Video for JavaScript Header image" style="box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); border-radius: 1rem" />
 
-Low-level video client for browser and Node.js integrations.
+Low-level Video SDK client for browser and Node.js integrations.
 
 ## **Quick Links**
 
@@ -15,9 +15,9 @@ Stream allows developers to rapidly deploy scalable feeds, chat messaging and vi
 
 With Stream's video components, you can use their SDK to build in-app video calling, audio rooms, audio calls, or live streaming. The best place to get started is with their tutorials:
 
-- Video & Audio Calling Tutorial
+- [Video & Audio Calling Tutorial](https://getstream.io/video/docs/javascript/tutorials/video-calling/)
 - Audio Rooms Tutorial
-- Livestreaming Tutorial
+- [Livestreaming Tutorial](https://getstream.io/video/docs/javascript/tutorials/livestream/)
 
 Stream provides UI components and state handling that make it easy to build video calling for your app. All calls run on Stream's network of edge servers around the world, ensuring optimal latency and reliability.
 

diff --git a/...s/client/docusaurus/docs/javascript/02-guides/03-call-and-participant-state.mdx b/...s/client/docusaurus/docs/javascript/02-guides/03-call-and-participant-state.mdx
@@ -61,6 +61,7 @@ Here are is an excerpt of the call state properties:
 | `settings$`              | `settings`              | The settings of the call.                                                                                    |
 | `startedAt$`             | `startedAt`             | The actual start time of the current call session.                                                           |
 | `startsAt$`              | `startsAt`              | The time the call is scheduled to start.                                                                     |
+| `thumbnails$`            | `thumbnails`            | The thumbnails of the call.                                                                                  |
 | `transcribing$`          | `transcribing`          | The transcribing state of the call.                                                                          |
 | `updatedAt$`             | `updatedAt`             | The time the call was updated.                                                                               |
 

diff --git a/packages/client/docusaurus/docs/javascript/02-guides/04-camera-and-microphone.mdx b/packages/client/docusaurus/docs/javascript/02-guides/04-camera-and-microphone.mdx
@@ -178,18 +178,50 @@ Follow our [Playing Video and Audio guide](../../guides/playing-video-and-audio/
 
 #### Lobby preview
 
-This is how you can show a visual representation about the sound level coming from the user's selected microphone:
+On lobby screens a common UX pattern is to show a visual indicator of the detected audio levels coming from the selected microphone. The client exposes the `createSoundDetector` utility method to help implement this functionality. Here is an example of how you can do that:
+
+```html
+<progress id="volume" max="100" min="0"></progress>
+```
 
 ```typescript
-// Code example coming soon 🏗️
+import { createSoundDetector } from '@stream-io/video-client';
+
+let cleanup: Function | undefined;
+call.microphone.state.mediaStream$.subscribe(async (mediaStream) => {
+  const progressBar = document.getElementById('volume') as HTMLProgressElement;
+  if (mediaStream) {
+    cleanup = createSoundDetector(
+      mediaStream,
+      (event) => {
+        progressBar.value = event.audioLevel;
+      },
+      { detectionFrequencyInMs: 100 },
+    );
+  } else {
+    await cleanup?.();
+    progressBar.value = 0;
+  }
+});
 ```
 
 ### Speaking while muted notification
 
+When the microphone is disabled, the client will automatically start monitoring audio levels, to detect if the user is speaking.
+
+This is how you can subscribe to these notifications:
+
 ```typescript
-// This feature is coming soon 🏗️
+call.microphone.state.speakingWhileMuted; // current value
+call.microphone.state.speakingWhileMuted$.subscribe((isSpeaking) => {
+  if (isSpeaking) {
+    console.log(`You're muted, unmute yourself to speak`);
+  }
+}); // Reactive value
 ```
 
+The notification is automatically disabled if the user doesn't have the permission to send audio.
+
 ## Speaker management
 
 ### List and select devices

diff --git a/...ages/client/docusaurus/docs/javascript/02-guides/11-playing-video-and-audio.mdx b/...ages/client/docusaurus/docs/javascript/02-guides/11-playing-video-and-audio.mdx
@@ -33,7 +33,7 @@ if (!videoElement) {
 }
 ```
 
-### Playing Screen Sharing
+## Playing Screen Sharing
 
 Similar to the _Rendering Video_, a screenshare track can be rendered like this:
 
@@ -54,7 +54,7 @@ if (!screenElement) {
 }
 ```
 
-### Playing Audio
+## Playing Audio
 
 Our JS SDK exposes a low-level method that binds an audio element to a participant's audio track.
 This method can be found in `call.bindAudioElement`. It takes two arguments: