Merge branch 'main' into bundling

.styles/Vocab/Base/accept.txt

@@ -80,3 +80,4 @@ unmount
 websockets
 hardcoded
 UIs
+useOrientation

packages/react-native-sdk/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.1.8](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.1.7...@stream-io/video-react-native-sdk-0.1.8) (2023-10-13)
+
+
+### Bug Fixes
+
+* **react-native:** misc expo config plugin bugs ([bba3f84](https://github.com/GetStream/stream-video-js/commit/bba3f8437cb0f7a662adef4e89fbc487225a5ed5))
+
 ### [0.1.7](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.1.6...@stream-io/video-react-native-sdk-0.1.7) (2023-10-13)
 
 ### Dependency Updates

packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/12-landscape-mode.mdx

@@ -0,0 +1,116 @@
+---
+id: landscape-mode
+title: Landscape Mode
+---
+
+import ImageShowcase from '@site/src/components/ImageShowcase';
+import Portrait from '../assets/05-ui-cookbook/12-landscape-mode/portrait.png';
+import Landscape from '../assets/05-ui-cookbook/12-landscape-mode/landscape.png';
+
+Switching to landscape mode makes it easier to view the participants in a larger area on mobile devices.
+The landscape mode feature introduced in the SDK allows developers to easily implement responsive design for React Native applications between portrait and landscape mode.
+
+## Passing the landscape mode styles
+
+The SDK components can take up the default landscape mode styles once the `landscape` prop is passed as `true` on the respective components.
+
+It can be passed to [`CallContent`](../../ui-components/call/call-content), [`RingingCallContent`](../../ui-components/call/ringing-call-content), [`Lobby`](../../ui-components/call/lobby) components.
+
+An example of the above is shown below:
+
+```tsx {13}
+import {
+  Call,
+  CallContent,
+  StreamCall,
+} from '@stream-io/video-react-native-sdk';
+
+const VideoCallUI = () => {
+  let call: Call;
+  // your logic to create a new call or get an existing call
+
+  return (
+    <StreamCall call={call}>
+      <CallContent landscape={true} />
+    </StreamCall>
+  );
+};
+```
+
+## Updating the orientation styles dynamically.
+
+We can use the [`Dimensions API`](https://reactnative.dev/docs/dimensions) or use readily available packages such as [react-native-orientation](https://www.npmjs.com/package/react-native-orientation) or [expo-screen-orientation](https://docs.expo.dev/versions/latest/sdk/screen-orientation/) to update/inform the accurate orientation of your device to the SDK.
+
+<ImageShowcase
+  items={[
+    {
+      image: Portrait,
+      caption: 'Call Content Portrait Mode',
+      alt: 'Call Content Portrait Mode',
+    },
+    {
+      image: Landscape,
+      caption: 'Call Content Landscape Mode',
+      alt: 'Call Content Landscape Mode',
+    },
+  ]}
+/>
+
+An example without using any external packages and using the [`Dimensions API`](https://reactnative.dev/docs/dimensions) is shown below:
+
+### Creating the `useOrientation` hook:
+
+```tsx title="src/hooks/useOrientation.ts"
+import { useEffect, useState } from 'react';
+import { Dimensions } from 'react-native';
+
+type Orientation = 'portrait' | 'landscape';
+
+const getOrientation = (): Orientation => {
+  const dimensions = Dimensions.get('screen');
+  return dimensions.height >= dimensions.width ? 'portrait' : 'landscape';
+};
+
+/**
+ * A hook that returns device orientation.
+ * @returns 'portrait' : 'landscape'
+ */
+export const useOrientation = () => {
+  const [orientation, setOrientation] = useState<Orientation>(getOrientation());
+
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener('change', ({ screen }) => {
+      setOrientation(screen.height >= screen.width ? 'portrait' : 'landscape');
+    });
+    return () => subscription?.remove();
+  }, []);
+
+  return orientation;
+};
+```
+
+### Passing the orientation to the SDK components
+
+This can be done by checking if the value returned from the hook above is `landscape` and passing it as prop to the SDK components.
+
+```tsx
+import {
+  Call,
+  CallContent,
+  StreamCall,
+} from '@stream-io/video-react-native-sdk';
+import { useOrientation } from '../hooks/useOrientation';
+
+const VideoCallUI = () => {
+  let call: Call;
+  // your logic to create a new call or get an existing call
+  const orientation = useOrientation();
+  const isLandscape = orientation === 'landscape';
+
+  return (
+    <StreamCall call={call}>
+      <CallContent landscape={isLandscape} />
+    </StreamCall>
+  );
+};
+```

packages/react-native-sdk/expo-config-plugin/src/common/types.ts

@@ -3,7 +3,9 @@ export type RingingPushNotifications = {
   includesCallsInRecentsIos?: boolean;
 };
 
-export type ConfigProps = {
-  ringingPushNotifications?: RingingPushNotifications;
-  enableNonRingingPushNotifications?: boolean;
-};
+export type ConfigProps =
+  | {
+      ringingPushNotifications?: RingingPushNotifications;
+      enableNonRingingPushNotifications?: boolean;
+    }
+  | undefined;

packages/react-native-sdk/expo-config-plugin/src/withAppBuildGradle.ts

@@ -12,9 +12,6 @@ android {
     compileOptions {
         sourceCompatibility JavaVersion.VERSION_1_8
         targetCompatibility JavaVersion.VERSION_11
-    }
-    kotlinOptions {
-        jvmTarget = "1.8"
     }`,
     );
 

packages/react-native-sdk/expo-config-plugin/src/withPushAppDelegate.ts

@@ -20,7 +20,7 @@ const withPushAppDelegate: ConfigPlugin<ConfigProps> = (
   props,
 ) => {
   return withAppDelegate(configuration, (config) => {
-    if (!props.ringingPushNotifications) {
+    if (!props?.ringingPushNotifications) {
       // user doesnt want to use ringing push notifications, so quit early
       return config;
     }

packages/react-native-sdk/expo-config-plugin/src/withiOSInfoPlist.ts

@@ -12,7 +12,7 @@ const withStreamVideoReactNativeSDKiOSInfoPList: ConfigPlugin<ConfigProps> = (
     if (!config.modResults.UIBackgroundModes.includes('audio')) {
       config.modResults.UIBackgroundModes.push('audio');
     }
-    if (props.enableNonRingingPushNotifications) {
+    if (props?.enableNonRingingPushNotifications) {
       if (
         !config.modResults.UIBackgroundModes.includes('remote-notification')
       ) {

packages/react-native-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "packageManager": "[email protected]",
   "main": "dist/commonjs/index.js",
   "module": "dist/module/index.js",

sample-apps/react-native/dogfood/src/hooks/useOrientation.ts

@@ -3,7 +3,7 @@ import { Dimensions } from 'react-native';
 
 type Orientation = 'portrait' | 'landscape';
 
-const isPortrait = (): Orientation => {
+const getOrientation = (): Orientation => {
   const dimensions = Dimensions.get('screen');
   return dimensions.height >= dimensions.width ? 'portrait' : 'landscape';
 };
@@ -13,19 +13,13 @@ const isPortrait = (): Orientation => {
  * @returns 'portrait' : 'landscape'
  */
 export const useOrientation = () => {
-  const [orientation, setOrientation] = useState<Orientation>(isPortrait());
+  const [orientation, setOrientation] = useState<Orientation>(getOrientation());
 
   useEffect(() => {
-    const updateOrientation = () => {
-      setOrientation(isPortrait());
-    };
-
-    Dimensions.addEventListener('change', updateOrientation);
-
-    return () => {
-      // @ts-ignore
-      Dimensions.removeEventListener('change', updateOrientation);
-    };
+    const subscription = Dimensions.addEventListener('change', ({ screen }) => {
+      setOrientation(screen.height >= screen.width ? 'portrait' : 'landscape');
+    });
+    return () => subscription?.remove();
   }, []);
 
   return orientation;

sample-apps/react-native/expo-video-sample/android/app/build.gradle

@@ -82,9 +82,7 @@ android {
         sourceCompatibility JavaVersion.VERSION_1_8
         targetCompatibility JavaVersion.VERSION_11
     }
-    kotlinOptions {
-        jvmTarget = "1.8"
-    }
+
     ndkVersion rootProject.ext.ndkVersion
 
     compileSdkVersion rootProject.ext.compileSdkVersion

sample-apps/react/react-video-demo/src/components/ControlMenuPanel/ControlMenuPanel.data.ts

@@ -8,7 +8,7 @@ export const KichinSink: Props = {
       groupId: 'video',
       kind: 'videoinput',
       label: 'Front face camera',
-    },
+    } as MediaDeviceInfo,
   ],
   title: 'Settings',
   selectDevice: () => {

sample-apps/react/react-video-demo/src/components/ControlMenuPanel/ControlMenuPanel.tsx

@@ -6,12 +6,7 @@ import DeviceList from '../DeviceList';
 export type Props = {
   className?: string;
   selectedDeviceId?: string;
-  devices: {
-    deviceId: string;
-    groupId: string;
-    kind: MediaDeviceKind;
-    label: string;
-  }[];
+  devices: MediaDeviceInfo[];
   title: string;
 
   selectDevice(kind: Partial<MediaDeviceKind>, deviceId: string): void;

sample-apps/react/react-video-demo/src/components/DeviceList/DeviceList.data.ts

@@ -8,7 +8,7 @@ export const KichinSink: Props = {
       groupId: 'video',
       kind: 'videoinput',
       label: 'Front face camera',
-    },
+    } as MediaDeviceInfo,
   ],
   selectDevice: () => {
     console.log('selected device');

sample-apps/react/react-video-demo/src/components/DeviceList/DeviceList.tsx

@@ -7,13 +7,8 @@ export type Props = {
   className?: string;
   selectedDeviceId?: string;
   title?: string;
-  devices: {
-    deviceId: string;
-    groupId: string;
-    kind: MediaDeviceKind;
-    label: string;
-  }[];
-  selectDevice: (kind: Partial<MediaDeviceKind>, deviceId: string) => void;
+  devices: MediaDeviceInfo[];
+  selectDevice: (kind: MediaDeviceKind, deviceId: string) => void;
 };
 
 export const DeviceList: FC<Props> = ({
@@ -32,13 +27,15 @@ export const DeviceList: FC<Props> = ({
     [selectDevice],
   );
 
+  const hasPreference = devices.some((d) => d.deviceId === selectedDeviceId);
   return (
     <div className={rootClassName}>
       {title ? <h3 className={styles.heading}>{title}</h3> : null}
       <OptionsList>
-        {devices.map(({ kind, label, deviceId }) => {
-          const isSelected =
-            selectedDeviceId === deviceId || devices.length === 1;
+        {devices.map(({ kind, label, deviceId }, index) => {
+          const isSelected = hasPreference
+            ? selectedDeviceId === deviceId
+            : index === 0;
           return (
             <OptionsListItem
               key={deviceId}

sample-apps/react/react-video-demo/src/components/LobbyPanel/LobbyPanel.tsx

@@ -7,7 +7,7 @@ import {
 } from '@stream-io/video-react-sdk';
 
 import ControlMenu from '../ControlMenu';
-import { MicMuted, Signal, Mic, Video } from '../Icons';
+import { Mic, MicMuted, Signal, Video } from '../Icons';
 
 import { PoweredBy } from '../PoweredBy/PoweredBy';
 import JoinContainer from '../JoinContainer';
@@ -46,6 +46,17 @@ export const EnableBrowserSettings: FC<any> = () => {
   );
 };
 
+export const StartingCamera = () => {
+  return (
+    <div className={styles.enableBrowserSettings}>
+      <div className={styles.enableIcons}>
+        <Video className={styles.enableVideo} />
+      </div>
+      <h2 className={styles.enableHeading}>Starting your camera...</h2>
+    </div>
+  );
+};
+
 export const DisabledVideoPreview: FC<{ name?: string }> = ({ name }) => {
   return (
     <div className={styles.disabledPreview}>
@@ -117,7 +128,7 @@ export const LobbyPanel: FC<Props> = ({
         <VideoPreview
           DisabledVideoPreview={() => <DisabledVideoPreview name={user.name} />}
           NoCameraPreview={() => <DisabledVideoPreview name={user.name} />}
-          StartingCameraPreview={() => permissionsErrorComponent}
+          StartingCameraPreview={StartingCamera}
           VideoErrorPreview={() => permissionsErrorComponent}
         />
       </div>