Merge branch 'main' of github.com:GetStream/stream-video-js into khus…

…hal87/react-native-livestream-components
GetStream · Oct 13, 2023 · dc6a007 · dc6a007
2 parents 06e71a9 + 263e382
commit dc6a007
Show file tree

Hide file tree

Showing 31 changed files with 628 additions and 330 deletions.
diff --git a/packages/client/CHANGELOG.md b/packages/client/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.3.32](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-0.3.31...@stream-io/video-client-0.3.32) (2023-10-13)
+
+
+### Bug Fixes
+
+* **client:** skip broken update call types test ([#1142](https://github.com/GetStream/stream-video-js/issues/1142)) ([e1d5837](https://github.com/GetStream/stream-video-js/commit/e1d5837140b19398a42b9c57b6b6bbfafd52bc21))
+
 ### [0.3.31](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-0.3.30...@stream-io/video-client-0.3.31) (2023-10-09)
 
 

diff --git a/packages/client/package.json b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-client",
-  "version": "0.3.31",
+  "version": "0.3.32",
   "packageManager": "[email protected]",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

diff --git a/packages/client/src/__tests__/server-side/call-types.test.ts b/packages/client/src/__tests__/server-side/call-types.test.ts
@@ -92,7 +92,7 @@ describe('call types CRUD API', () => {
     });
   });
 
-  it('update', async () => {
+  it.skip('update', async () => {
     const updateResponse = await client.updateCallType(callTypeName, {
       settings: {
         audio: { mic_default_on: false, default_device: 'earpiece' },

diff --git a/packages/react-bindings/CHANGELOG.md b/packages/react-bindings/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.2.33](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-bindings-0.2.32...@stream-io/video-react-bindings-0.2.33) (2023-10-13)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `0.3.32`
 ### [0.2.32](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-bindings-0.2.31...@stream-io/video-react-bindings-0.2.32) (2023-10-09)
 
 ### Dependency Updates

diff --git a/packages/react-bindings/package.json b/packages/react-bindings/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-bindings",
-  "version": "0.2.32",
+  "version": "0.2.33",
   "packageManager": "[email protected]",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

diff --git a/packages/react-native-sdk/CHANGELOG.md b/packages/react-native-sdk/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.1.6](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.1.5...@stream-io/video-react-native-sdk-0.1.6) (2023-10-13)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `0.3.32`
+* `@stream-io/video-react-bindings` updated to version `0.2.33`
+
+### Features
+
+* **react-native:** add landscape mode support to Lobby, RingingCallContent and DF app ([#1123](https://github.com/GetStream/stream-video-js/issues/1123)) ([cc247f0](https://github.com/GetStream/stream-video-js/commit/cc247f07d50acc775034535e37fd5b319f26673d))
+
+
+### Bug Fixes
+
+* **react-native:** incorrect starting position on reanimated floating animation ([#1139](https://github.com/GetStream/stream-video-js/issues/1139)) ([8d09012](https://github.com/GetStream/stream-video-js/commit/8d09012bc42adbd4474ddbc24ebb0b0362e7332e))
+
 ### [0.1.5](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.1.4...@stream-io/video-react-native-sdk-0.1.5) (2023-10-11)
 
 

diff --git a/packages/react-native-sdk/package.json b/packages/react-native-sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "packageManager": "[email protected]",
   "main": "dist/commonjs/index.js",
   "module": "dist/module/index.js",
@@ -14,7 +14,7 @@
     "postinstall": "yarn copy-version",
     "clean": "rimraf dist && rimraf expo-config-plugin/dist",
     "start": "yarn copy-version && tsc --project tsconfig.json --watch",
-    "build:expo-plugin": "rimraf plugin/dist && tsc --project expo-config-plugin/tsconfig.json",
+    "build:expo-plugin": "rimraf expo-config-plugin/dist && tsc --project expo-config-plugin/tsconfig.json",
     "build": "yarn clean && yarn copy-version && bob build && yarn build:expo-plugin",
     "test:expo-plugin": "jest expo-config-plugin --coverage",
     "test": "jest --coverage && yarn test:expo-plugin",
@@ -30,7 +30,7 @@
     "package.json",
     "app.plugin.js",
     "expo-config-plugin/README.md",
-    "expo-config-plugin/dist/*",
+    "expo-config-plugin/dist/**/*",
     "!expo-config-plugin/src/*",
     "!expo-config-plugin/fixtures/*",
     "!ios/build",

diff --git a/...rc/components/Participant/FloatingParticipantView/FloatingView/ReanimatedFloatingView.tsx b/...rc/components/Participant/FloatingParticipantView/FloatingView/ReanimatedFloatingView.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect, useRef, MutableRefObject } from 'react';
+import React, { useMemo, useEffect } from 'react';
 import { LayoutRectangle, View } from 'react-native';
 import {
   FloatingViewAlignment,
@@ -46,13 +46,8 @@ try {
     children,
   }: FloatingViewProps) => {
     // to store the starting position of the gesture
-    const startRef: MutableRefObject<{ x: number; y: number } | null> = useRef<{
-      x: number;
-      y: number;
-    }>({
-      x: 0,
-      y: 0,
-    });
+    // NOTE: note be used for deriving styling
+    const start = useSharedValue({ x: 0, y: 0 });
     // to store the necessary translate x, y position
     const translationX = useSharedValue(0);
     const translationY = useSharedValue(0);
@@ -82,55 +77,51 @@ try {
       });
     }, [rectangle, containerWidth, containerHeight]);
 
-    const dragGesture = useMemo(
-      () =>
-        Gesture.Pan()
-          .onStart((_e) => {
-            // store the starting position of the gesture
-            startRef.current = {
-              x: translationX.value,
-              y: translationY.value,
-            };
-          })
-          .onUpdate((e) => {
-            // update the translation with the distance of the gesture + starting position
-            translationX.value = Math.max(
-              0,
-              Math.min(
-                e.translationX + (startRef.current?.x ?? 0),
-                snapAlignments[FloatingViewAlignment.bottomRight].x,
-              ),
-            );
-            translationY.value = Math.max(
-              0,
-              Math.min(
-                e.translationY + (startRef.current?.y ?? 0),
-                snapAlignments[FloatingViewAlignment.bottomRight].y,
-              ),
-            );
-          })
-          .onEnd(() => {
-            // snap to the closest alignment with a spring animation
-            const position = {
-              x: translationX.value,
-              y: translationY.value,
-            };
-            const closestAlignment = getClosestSnapAlignment({
-              position,
-              snapAlignments,
-            });
-            translationX.value = withTiming(closestAlignment.x);
-            translationY.value = withTiming(closestAlignment.y);
-          }),
-      [snapAlignments, translationX, translationY],
-    );
+    const dragGesture = Gesture.Pan()
+      .onStart((_e) => {
+        start.value = {
+          x: translationX.value,
+          y: translationY.value,
+        };
+      })
+      .onUpdate((e) => {
+        // update the translation with the distance of the gesture + starting position
+        translationX.value = Math.max(
+          0,
+          Math.min(
+            e.translationX + (start.value.x ?? 0),
+            snapAlignments[FloatingViewAlignment.bottomRight].x,
+          ),
+        );
+        translationY.value = Math.max(
+          0,
+          Math.min(
+            e.translationY + (start.value.y ?? 0),
+            snapAlignments[FloatingViewAlignment.bottomRight].y,
+          ),
+        );
+      })
+      .onEnd(() => {
+        // snap to the closest alignment with a spring animation
+        const position = {
+          x: translationX.value,
+          y: translationY.value,
+        };
+        const closestAlignment = getClosestSnapAlignment({
+          position,
+          snapAlignments,
+        });
+        translationX.value = withTiming(closestAlignment.x);
+        translationY.value = withTiming(closestAlignment.y);
+      });
 
+    /* Move to the initial position */
     useEffect(() => {
       if (!rectangle) {
         return;
       }
       const alignment = snapAlignments[initialAlignment];
-      startRef.current = alignment;
+      start.value = alignment;
 
       translationX.value = alignment.x;
       translationY.value = alignment.y;
@@ -145,6 +136,7 @@ try {
       opacity,
       translationX,
       translationY,
+      start,
     ]);
 
     const animatedStyle = useAnimatedStyle(() => {

diff --git a/packages/react-sdk/CHANGELOG.md b/packages/react-sdk/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.3.40](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.39...@stream-io/video-react-sdk-0.3.40) (2023-10-13)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `0.3.32`
+* `@stream-io/video-react-bindings` updated to version `0.2.33`
 ### [0.3.39](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.38...@stream-io/video-react-sdk-0.3.39) (2023-10-09)
 
 ### Dependency Updates

diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "0.3.39",
+  "version": "0.3.40",
   "packageManager": "[email protected]",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

diff --git a/sample-apps/react/react-video-demo/src/components/DeviceList/DeviceList.module.css b/sample-apps/react/react-video-demo/src/components/DeviceList/DeviceList.module.css
@@ -4,53 +4,3 @@
 .heading {
   @apply text-video-white   font-medium;
 }
-
-.list {
-  @apply pb-3 pt-3;
-  font-size: 16px;
-}
-
-.device {
-  @apply text-video-grey-400;
-}
-
-.device:not(:first-of-type) {
-  @apply mt-1;
-}
-
-.device:hover {
-  @apply cursor-pointer bg-video-grey-700 text-video-white;
-  border-radius: 6px;
-}
-
-.selectedDevice {
-  @apply bg-video-grey-700 text-video-white;
-  border-radius: 6px;
-}
-
-.label {
-  @apply flex items-center text-sm pt-2 pb-2 pr-2 pl-2;
-}
-
-.label:hover {
-  @apply cursor-pointer;
-}
-
-.radioButton {
-  @apply mr-3 bg-video-transparent;
-}
-
-.radioButton:hover {
-  @apply cursor-pointer;
-}
-
-.radioButton:before {
-  @apply absolute h-4 w-4 bg-video-grey-400 border-2 border-video-grey-600 rounded-full flex;
-  content: '';
-  margin-top: -0.5px;
-  margin-left: -0.5px;
-}
-
-.radioButton:checked:before {
-  @apply h-4 w-4 bg-video-white border-4 border-video-stream-500;
-}
diff --git a/sample-apps/react/react-video-demo/src/components/DeviceList/DeviceList.tsx b/sample-apps/react/react-video-demo/src/components/DeviceList/DeviceList.tsx
@@ -1,6 +1,7 @@
-import { FC, useCallback, useEffect, useState } from 'react';
+import { FC, useCallback } from 'react';
 import classnames from 'classnames';
 import styles from './DeviceList.module.css';
+import { OptionsList, OptionsListItem } from '../SettingsMenu/SettingsMenu';
 
 export type Props = {
   className?: string;
@@ -25,7 +26,7 @@ export const DeviceList: FC<Props> = ({
   const rootClassName = classnames(styles.root, className);
 
   const handleSelectDevice = useCallback(
-    (kind: any, deviceId: string) => {
+    (kind: MediaDeviceKind, deviceId: string) => {
       selectDevice(kind, deviceId);
     },
     [selectDevice],
@@ -34,36 +35,24 @@ export const DeviceList: FC<Props> = ({
   return (
     <div className={rootClassName}>
       {title ? <h3 className={styles.heading}>{title}</h3> : null}
-      <ul className={styles.list}>
-        {devices.map(({ kind, label, deviceId }, index: number) => {
-          const deviceClassName = classnames(styles.device, {
-            [styles.selectedDevice]:
-              selectedDeviceId === deviceId || devices.length === 1,
-          });
-
+      <OptionsList>
+        {devices.map(({ kind, label, deviceId }) => {
+          const isSelected =
+            selectedDeviceId === deviceId || devices.length === 1;
           return (
-            <li key={index} className={deviceClassName}>
-              <label
-                className={styles.label}
-                htmlFor={`${kind}-${index}`}
-                onClick={() => handleSelectDevice(kind, deviceId)}
-              >
-                <input
-                  id={`${kind}-${index}`}
-                  className={styles.radioButton}
-                  name={kind}
-                  type="radio"
-                  defaultChecked={
-                    selectedDeviceId === deviceId || devices.length === 1
-                  }
-                  value={deviceId}
-                />
-                {label}
-              </label>
-            </li>
+            <OptionsListItem
+              key={deviceId}
+              id={`${kind}-${deviceId}`}
+              onClick={() => handleSelectDevice(kind, deviceId)}
+              label={label}
+              checked={isSelected}
+              defaultChecked={isSelected}
+              name={kind}
+              value={deviceId}
+            />
           );
         })}
-      </ul>
+      </OptionsList>
     </div>
   );
 };
diff --git a/sample-apps/react/react-video-demo/src/components/Footer/Footer.module.css b/sample-apps/react/react-video-demo/src/components/Footer/Footer.module.css
@@ -125,3 +125,17 @@
 .participantCounter {
   @apply absolute top-0 right-0 rounded-full flex items-center justify-center mr-1 -mt-2 h-4 w-4 text-xs bg-video-grey-300 text-video-white;
 }
+
+.layoutSelectorButton {
+  @apply hidden mr-2 ml-2;
+}
+
+.layoutSelectorContainer {
+  @apply absolute bottom-2 w-[220px] accent-video-white;
+}
+
+@screen md {
+  .layoutSelectorButton {
+    @apply flex;
+  }
+}