@stream-io/video-react-native-sdk 0.3.15 → 0.3.17

package/src/components/Call/CallControls/ToggleVideoPreviewButton.tsx

@@ -29,7 +29,9 @@ export const ToggleVideoPreviewButton = ({
     },
   } = useTheme();
   const call = useCall();
-  const { useCameraState } = useCallStateHooks();
+  const { useCameraState, useCallSettings } = useCallStateHooks();
+  const callSettings = useCallSettings();
+  const isVideoEnabledInCall = callSettings?.video.enabled;
   const { status } = useCameraState();
   const onPress = async () => {
     if (onPressHandler) {
@@ -39,6 +41,10 @@ export const ToggleVideoPreviewButton = ({
     await call?.camera.toggle();
   };
 
+  if (!isVideoEnabledInCall) {
+    return;
+  }
+
   return (
     <CallControlsButton
       onPress={onPress}

package/src/components/Call/CallControls/ToggleVideoPublishingButton.tsx

@@ -27,8 +27,10 @@ export const ToggleVideoPublishingButton = ({
   onPressHandler,
 }: ToggleVideoPublishingButtonProps) => {
   const call = useCall();
-  const { useCameraState } = useCallStateHooks();
+  const { useCameraState, useCallSettings } = useCallStateHooks();
   const { status } = useCameraState();
+  const callSettings = useCallSettings();
+  const isVideoEnabledInCall = callSettings?.video.enabled;
   const {
     theme: { colors },
   } = useTheme();
@@ -40,6 +42,10 @@ export const ToggleVideoPublishingButton = ({
     await call?.camera.toggle();
   };
 
+  if (!isVideoEnabledInCall) {
+    return;
+  }
+
   return (
     <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
       <CallControlsButton

package/src/components/Call/Lobby/Lobby.tsx

@@ -64,7 +64,9 @@ export const Lobby = ({
     theme: { colors, lobby, typefaces },
   } = useTheme();
   const connectedUser = useConnectedUser();
-  const { useCameraState } = useCallStateHooks();
+  const { useCameraState, useCallSettings } = useCallStateHooks();
+  const callSettings = useCallSettings();
+  const isVideoEnabledInCall = callSettings?.video.enabled;
   const { status: cameraStatus, mediaStream } = useCameraState();
   const { t } = useI18n();
   const localVideoStream = mediaStream as unknown as MediaStream | undefined;
@@ -109,30 +111,34 @@ export const Lobby = ({
               typefaces.subtitle,
             ]}
           >
-            {t('Setup your audio and video')}
+            {isVideoEnabledInCall
+              ? t('Setup your audio and video')
+              : t('Setup your audio')}
           </Text>
-          <View
-            style={[
-              styles.videoContainer,
-              { backgroundColor: colors.disabled },
-              lobby.videoContainer,
-            ]}
-          >
-            <View style={styles.topView} />
-            {cameraStatus === 'enabled' && localVideoStream ? (
-              <RTCView
-                mirror={true}
-                streamURL={localVideoStream.toURL()}
-                objectFit="cover"
-                style={StyleSheet.absoluteFillObject}
-              />
-            ) : (
-              <View style={[styles.avatarContainer, lobby.avatarContainer]}>
-                <Avatar participant={connectedUserAsParticipant} />
-              </View>
-            )}
-            <ParticipantStatus />
-          </View>
+          {isVideoEnabledInCall && (
+            <View
+              style={[
+                styles.videoContainer,
+                { backgroundColor: colors.disabled },
+                lobby.videoContainer,
+              ]}
+            >
+              <View style={styles.topView} />
+              {cameraStatus === 'enabled' && localVideoStream ? (
+                <RTCView
+                  mirror={true}
+                  streamURL={localVideoStream.toURL()}
+                  objectFit="cover"
+                  style={StyleSheet.absoluteFillObject}
+                />
+              ) : (
+                <View style={[styles.avatarContainer, lobby.avatarContainer]}>
+                  <Avatar participant={connectedUserAsParticipant} />
+                </View>
+              )}
+              <ParticipantStatus />
+            </View>
+          )}
         </View>
       )}
       <View style={[styles.bottomContainer, lobby.bottomContainer]}>
@@ -203,7 +209,7 @@ const ParticipantStatus = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: 'space-evenly',
   },
   topContainer: {
     flex: 2,
@@ -226,7 +232,7 @@ const styles = StyleSheet.create({
   },
   topView: {},
   bottomContainer: {
-    flex: 1,
+    flex: 2,
     justifyContent: 'space-evenly',
     paddingHorizontal: 12,
   },

package/src/components/Livestream/LivestreamControls/LivestreamVideoControlButton.tsx

@@ -9,8 +9,10 @@ import { Video, VideoSlash } from '../../../icons';
  */
 export const LivestreamVideoControlButton = () => {
   const call = useCall();
-  const { useCameraState } = useCallStateHooks();
+  const { useCameraState, useCallSettings } = useCallStateHooks();
   const { status } = useCameraState();
+  const callSettings = useCallSettings();
+  const isVideoEnabledInCall = callSettings?.video.enabled;
   const {
     theme: {
       colors,
@@ -23,6 +25,10 @@ export const LivestreamVideoControlButton = () => {
     await call?.camera.toggle();
   };
 
+  if (!isVideoEnabledInCall) {
+    return;
+  }
+
   return (
     <Pressable
       onPress={onPress}

package/src/translations/en.json

@@ -11,6 +11,9 @@
   "End Stream": "End Stream",
   "Leave Stream": "Leave Stream",
   "Live": "Live",
+  "Before Joining": "Before Joining",
+  "Setup your audio and video": "Setup your audio and video",
+  "Setup your audio": "Setup your audio",
   "You are first to Join the call.": "You are first to Join the call.",
   "Participants ({{ numberOfParticipants }})": "Participants ({{ numberOfParticipants }})",
   "{{ userName }} is sharing their screen": "{{ userName }} is sharing their screen",

package/src/utils/push/ios.ts

@@ -124,7 +124,7 @@ export async function initIosNonVoipToken(
   pushConfig: PushConfig,
   setUnsubscribeListener: (unsubscribe: () => void) => void,
 ) {
-  if (Platform.OS !== 'ios' || !pushConfig.android.pushProviderName) {
+  if (Platform.OS !== 'ios' || !pushConfig.ios.pushProviderName) {
     return;
   }
   const setDeviceToken = async (token: string) => {

package/src/version.ts

@@ -1 +1 @@
-export const version = '0.3.15';
+export const version = '0.3.17';