feat: add theme support to dogfood, new Lobby screen with design-v2 a…

…nd other minor fixes
GetStream · Nov 7, 2024 · b3d763f · b3d763f
1 parent f92ce77
commit b3d763f
Show file tree

Hide file tree

Showing 22 changed files with 254 additions and 180 deletions.
diff --git a/packages/react-native-sdk/src/components/Call/CallControls/LobbyControls.tsx b/packages/react-native-sdk/src/components/Call/CallControls/LobbyControls.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { ToggleAudioPreviewButton } from './ToggleAudioPreviewButton';
 import { ToggleVideoPreviewButton } from './ToggleVideoPreviewButton';
@@ -11,6 +11,7 @@ export const LobbyControls = () => {
   const {
     theme: { lobbyControls },
   } = useTheme();
+  const styles = useStyles();
   return (
     <View style={[styles.container, lobbyControls.container]}>
       <ToggleAudioPreviewButton />
@@ -19,10 +20,17 @@ export const LobbyControls = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    paddingVertical: 12,
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          paddingTop: theme.variants.spacingSizes.xs,
+          flexDirection: 'row',
+          justifyContent: 'space-evenly',
+        },
+      }),
+    [theme]
+  );
+};
diff --git a/packages/react-native-sdk/src/components/Call/CallControls/ToggleCameraFaceButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/ToggleCameraFaceButton.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { CallControlsButton } from './CallControlsButton';
 import { CameraSwitch, IconWrapper } from '../../../icons';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { ColorValue } from 'react-native';
 
 /**
  * Props for the Toggle Camera face button.
@@ -18,7 +19,7 @@ export type ToggleCameraFaceButtonProps = {
   /**
    * Background color of the button.
    */
-  backgroundColor?: string;
+  backgroundColor?: ColorValue;
 };
 
 /**

diff --git a/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsGrid.tsx b/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsGrid.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { StyleSheet, View, ViewStyle } from 'react-native';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
@@ -52,7 +52,6 @@ export const CallParticipantsGrid = ({
   const {
     theme: { colors, callParticipantsGrid },
   } = useTheme();
-  const styles = useStyles();
   const { useRemoteParticipants, useParticipants, useLocalParticipant } =
     useCallStateHooks();
   const _remoteParticipants = useRemoteParticipants();
@@ -118,16 +117,6 @@ export const CallParticipantsGrid = ({
   );
 };
 
-const useStyles = () => {
-  const { theme } = useTheme();
-  return useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          flex: 1,
-          padding: theme.variants.spacingSizes.xs,
-        },
-      }),
-    [theme]
-  );
-};
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});
diff --git a/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx b/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx
@@ -165,7 +165,6 @@ const useStyles = () => {
       StyleSheet.create({
         container: {
           flex: 1,
-          padding: theme.variants.spacingSizes.xs,
           backgroundColor: theme.colors.sheetPrimary,
         },
         fullScreenSpotlightContainer: {

diff --git a/packages/react-native-sdk/src/components/Call/Lobby/JoinCallButton.tsx b/packages/react-native-sdk/src/components/Call/Lobby/JoinCallButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { LobbyProps } from './Lobby';
 import { Pressable, StyleSheet, Text } from 'react-native';
 import { useCall, useI18n } from '@stream-io/video-react-bindings';
@@ -22,6 +22,7 @@ export const JoinCallButton = ({
   const {
     theme: { colors, typefaces, joinCallButton },
   } = useTheme();
+  const styles = useStyles();
   const { t } = useI18n();
   const call = useCall();
 
@@ -64,13 +65,20 @@ export const JoinCallButton = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 10,
-    marginTop: 16,
-    paddingVertical: 8,
-  },
-  label: {
-    textAlign: 'center',
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          borderRadius: theme.variants.borderRadiusSizes.lg,
+          marginTop: theme.variants.spacingSizes.md,
+          paddingVertical: theme.variants.spacingSizes.sm,
+        },
+        label: {
+          textAlign: 'center',
+        },
+      }),
+    [theme]
+  );
+};
diff --git a/packages/react-native-sdk/src/components/Call/Lobby/Lobby.tsx b/packages/react-native-sdk/src/components/Call/Lobby/Lobby.tsx
@@ -1,13 +1,12 @@
 import React, { ComponentType, useMemo } from 'react';
-import { StyleSheet, Text, View, ViewStyle } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import {
   useCallStateHooks,
   useConnectedUser,
   useI18n,
 } from '@stream-io/video-react-bindings';
 import { Avatar } from '../../utility/Avatar';
 import { StreamVideoParticipant } from '@stream-io/video-client';
-import { LOBBY_VIDEO_VIEW_HEIGHT } from '../../../constants';
 import { RTCView } from '@stream-io/react-native-webrtc';
 import { LobbyControls as DefaultLobbyControls } from '../CallControls/LobbyControls';
 import {
@@ -63,7 +62,7 @@ export const Lobby = ({
   const {
     theme: { colors, lobby, typefaces },
   } = useTheme();
-  const styles = useStyles();
+  const styles = useStyles(landscape);
   const connectedUser = useConnectedUser();
   const { useCameraState, useCallSettings } = useCallStateHooks();
   const callSettings = useCallSettings();
@@ -81,41 +80,19 @@ export const Lobby = ({
     name: connectedUser?.name,
   } as StreamVideoParticipant;
 
-  const landscapeStyles: ViewStyle = {
-    flexDirection: landscape ? 'row' : 'column',
-  };
-
   return (
-    <View
-      style={[
-        styles.container,
-        landscapeStyles,
-        { backgroundColor: colors.sheetPrimary },
-        lobby.container,
-      ]}
-    >
+    <View style={[styles.container, lobby.container]}>
       {connectedUser && (
-        <View style={[styles.topContainer, lobby.topContainer]}>
+        <>
           <Text
             style={[
               styles.heading,
               { color: colors.typePrimary },
-              typefaces.heading4,
+              typefaces.heading5,
               lobby.heading,
             ]}
           >
-            {t('Before Joining')}
-          </Text>
-          <Text
-            style={[
-              styles.subHeading,
-              { color: colors.typeSecondary },
-              typefaces.subtitle,
-            ]}
-          >
-            {isVideoEnabledInCall
-              ? t('Setup your audio and video')
-              : t('Setup your audio')}
+            {t('Setup your test call')}
           </Text>
           {isVideoEnabledInCall && (
             <View
@@ -141,17 +118,15 @@ export const Lobby = ({
               <ParticipantStatus />
             </View>
           )}
-        </View>
+        </>
+      )}
+      {LobbyControls && <LobbyControls />}
+      {LobbyFooter && (
+        <LobbyFooter
+          JoinCallButton={JoinCallButton}
+          onJoinCallHandler={onJoinCallHandler}
+        />
       )}
-      <View style={[styles.bottomContainer, lobby.bottomContainer]}>
-        {LobbyControls && <LobbyControls />}
-        {LobbyFooter && (
-          <LobbyFooter
-            JoinCallButton={JoinCallButton}
-            onJoinCallHandler={onJoinCallHandler}
-          />
-        )}
-      </View>
     </View>
   );
 };
@@ -186,50 +161,40 @@ const ParticipantStatus = () => {
   );
 };
 
-const useStyles = () => {
+const useStyles = (landscape = false) => {
   const { theme } = useTheme();
   return useMemo(
     () =>
       StyleSheet.create({
+        heading: {
+          textAlign: 'center',
+          paddingBottom: theme.variants.spacingSizes.md,
+        },
         container: {
           flex: 1,
-          justifyContent: 'space-evenly',
-          paddingRight: theme.variants.insets.right,
-          paddingLeft: theme.variants.insets.left,
+          justifyContent: 'center',
+          backgroundColor: theme.colors.sheetPrimary,
+          paddingRight:
+            theme.variants.insets.right + theme.variants.spacingSizes.sm,
+          paddingLeft:
+            theme.variants.insets.left + theme.variants.spacingSizes.sm,
           paddingTop: theme.variants.insets.top,
           paddingBottom: theme.variants.insets.bottom,
         },
-        topContainer: {
-          flex: 2,
-          justifyContent: 'space-evenly',
-          paddingHorizontal: 12,
-        },
-        heading: {
-          textAlign: 'center',
-        },
-        subHeading: {
-          textAlign: 'center',
-        },
         videoContainer: {
-          height: LOBBY_VIDEO_VIEW_HEIGHT,
-          borderRadius: 20,
+          height: landscape ? '40%' : '50%',
+          borderRadius: theme.variants.borderRadiusSizes.md,
           justifyContent: 'space-between',
           alignItems: 'center',
           overflow: 'hidden',
-          padding: 8,
         },
         topView: {},
-        bottomContainer: {
-          flex: 2,
-          justifyContent: 'space-evenly',
-          paddingHorizontal: 12,
-        },
         participantStatusContainer: {
           alignSelf: 'flex-start',
           flexDirection: 'row',
           alignItems: 'center',
-          padding: 8,
-          borderRadius: 5,
+          padding: theme.variants.spacingSizes.sm,
+          borderTopRightRadius: theme.variants.borderRadiusSizes.sm,
         },
         avatarContainer: {
           flex: 2,
@@ -238,9 +203,6 @@ const useStyles = () => {
         userNameLabel: {
           flexShrink: 1,
         },
-        audioMutedIconContainer: {
-          marginLeft: 8,
-        },
       }),
     [theme]
   );