feat(design-v2): bottom controls drawer component with reactions flow (#1539)

This PR: 
  - adds the More action buttons drawer component
- the emoji reactions are implemented and that completes the reactions
flow
- the other buttons are not functional and their actions/flows will be
implemented in other PRs
<img alt="Screenshot at Oct 29 14-24-22"
src="https://github.com/user-attachments/assets/2c64405e-5c12-4db2-89ac-199ff08652bb"
alt="ios-after" width="250" height="540"/>

Author: kristian-mkd

packages/react-native-sdk/src/components/Participant/FloatingParticipantView/FloatingView/AnimatedFloatingView.tsx

@@ -15,6 +15,7 @@ import {
   floatingChildViewContainerStyle,
 } from './common';
 import { getLogger } from '@stream-io/video-client';
+import { useTheme } from '../../../..';
 
 const AnimatedFloatingView = ({
   initialAlignment,
@@ -29,6 +30,7 @@ const AnimatedFloatingView = ({
   const translateRef = useRef(new Animated.ValueXY());
   const opacity = useRef(new Animated.Value(0));
 
+  const { theme } = useTheme();
   const [rectangle, setRectangle] = React.useState<LayoutRectangle>();
 
   // we need to force update the component when the rectangle is available
@@ -58,6 +60,7 @@ const AnimatedFloatingView = ({
         width: rectangle.width,
         height: rectangle.height,
       },
+      topOffset: theme.floatingParticipantsView.topPosition,
     });
     const { x, y } = snapAlignments[initialAlignment];
     snapAlignmentsRef.current = snapAlignments;
@@ -66,7 +69,7 @@ const AnimatedFloatingView = ({
     opacity.current.setValue(1);
     forceUpdate();
     // any time the dependency changes, we need to snap to the new alignment
-  }, [initialAlignment, rectangle, containerWidth, containerHeight]);
+  }, [initialAlignment, rectangle, containerWidth, containerHeight, theme]);
 
   const panResponder = useRef(
     PanResponder.create({

packages/react-native-sdk/src/components/Participant/FloatingParticipantView/FloatingView/ReanimatedFloatingView.tsx

@@ -7,6 +7,7 @@ import {
   floatingChildViewContainerStyle,
   FloatingViewProps,
 } from './common';
+import { useTheme } from '../../../..';
 type GestureHandlerExportsType = typeof import('react-native-gesture-handler');
 type ReanimatedNamespaceType = typeof import('react-native-reanimated').default;
 type ReanimatedExportsType = typeof import('react-native-reanimated');
@@ -54,6 +55,7 @@ try {
     // we don't want to show the floating view until we have the layout rectangle
     const opacity = useSharedValue(0);
     const [rectangle, setRectangle] = React.useState<LayoutRectangle>();
+    const { theme } = useTheme();
 
     const snapAlignments = useMemo(() => {
       if (!rectangle) {
@@ -64,7 +66,6 @@ try {
           [FloatingViewAlignment.bottomRight]: { x: 0, y: 0 },
         };
       }
-
       return getSnapAlignments({
         rootContainerDimensions: {
           width: containerWidth,
@@ -74,8 +75,9 @@ try {
           width: rectangle.width,
           height: rectangle.height,
         },
+        topOffset: theme.floatingParticipantsView.topPosition,
       });
-    }, [rectangle, containerWidth, containerHeight]);
+    }, [rectangle, containerWidth, containerHeight, theme]);
 
     const dragGesture = Gesture.Pan()
       .onStart((_e) => {

packages/react-native-sdk/src/components/Participant/FloatingParticipantView/FloatingView/common.ts

@@ -23,20 +23,22 @@ export type SnapAlignments = Record<
 export function getSnapAlignments({
   rootContainerDimensions,
   floatingViewDimensions,
+  topOffset,
 }: {
   rootContainerDimensions: { width: number; height: number };
   floatingViewDimensions: { width: number; height: number };
+  topOffset: number;
 }): SnapAlignments {
   const right = rootContainerDimensions.width - floatingViewDimensions.width;
   const bottom = rootContainerDimensions.height - floatingViewDimensions.height;
   const snapOffsets = {
     [FloatingViewAlignment.topLeft]: {
       x: 0,
-      y: 0,
+      y: topOffset,
     },
     [FloatingViewAlignment.topRight]: {
       x: right,
-      y: 0,
+      y: topOffset,
     },
     [FloatingViewAlignment.bottomLeft]: {
       x: 0,

packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantReaction.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useCall } from '@stream-io/video-react-bindings';
 import { Z_INDEX, defaultEmojiReactions } from '../../../constants';
@@ -32,12 +32,9 @@ export const ParticipantReaction = ({
 }: ParticipantReactionProps) => {
   const { reaction, sessionId } = participant;
   const call = useCall();
+  const styles = useStyles();
   const {
-    theme: {
-      typefaces,
-      variants: { iconSizes },
-      participantReaction,
-    },
+    theme: { typefaces, participantReaction },
   } = useTheme();
 
   useEffect(() => {
@@ -60,26 +57,34 @@ export const ParticipantReaction = ({
     );
 
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          height: iconSizes.md,
-          width: iconSizes.md,
-        },
-        participantReaction.container,
-      ]}
-    >
-      <Text style={[participantReaction.reaction, typefaces.heading6]}>
-        {currentReaction?.icon}
-      </Text>
-    </View>
+    currentReaction?.icon != null && (
+      <View style={[styles.container, participantReaction.container]}>
+        <Text style={[participantReaction.reaction, typefaces.heading6]}>
+          {currentReaction?.icon}
+        </Text>
+      </View>
+    )
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    alignSelf: 'flex-start',
-    zIndex: Z_INDEX.IN_FRONT,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          alignSelf: 'flex-end',
+          marginRight: theme.variants.spacingSizes.md,
+          marginTop: theme.variants.spacingSizes.md,
+          height: theme.variants.roundButtonSizes.md,
+          width: theme.variants.roundButtonSizes.md,
+          borderRadius: theme.variants.borderRadiusSizes.sm,
+          backgroundColor: theme.colors.sheetOverlay,
+          alignItems: 'center',
+          justifyContent: 'center',
+          zIndex: Z_INDEX.IN_FRONT,
+        },
+      }),
+    [theme]
+  );
+};

packages/react-native-sdk/src/constants/index.ts

@@ -9,24 +9,48 @@ export const FLOATING_VIDEO_VIEW_STYLE = {
 export const LOBBY_VIDEO_VIEW_HEIGHT = 240;
 
 export const defaultEmojiReactions: StreamReactionType[] = [
+  {
+    type: 'reaction',
+    emoji_code: ':rolling_on_the_floor_laughing:',
+    custom: {},
+    icon: '🤣',
+  },
   {
     type: 'reaction',
     emoji_code: ':like:',
     custom: {},
     icon: '👍',
   },
   {
-    type: 'raised-hand',
-    emoji_code: ':raise-hand:',
+    type: 'reaction',
+    emoji_code: ':rocket:',
     custom: {},
-    icon: '✋',
+    icon: '🚀',
+  },
+  {
+    type: 'reaction',
+    emoji_code: ':dislike:',
+    custom: {},
+    icon: '👎',
   },
   {
     type: 'reaction',
     emoji_code: ':fireworks:',
     custom: {},
     icon: '🎉',
   },
+  {
+    type: 'reaction',
+    emoji_code: ':raised-hands:',
+    custom: {},
+    icon: '🙌',
+  },
+  {
+    type: 'raised-hand',
+    emoji_code: ':raised-hand:',
+    custom: {},
+    icon: '✋',
+  },
 ];
 
 export const Z_INDEX = {

packages/react-native-sdk/src/icons/CameraSwitch.tsx

@@ -8,7 +8,7 @@ type Props = {
 };
 
 export const CameraSwitch = ({ color, size }: Props) => (
-  <Svg viewBox={`0 0 24 24`} width={size} height={size}>
+  <Svg viewBox={'0 0 24 24'} width={size} height={size}>
     <Path
       d="M20 5.5H16.83L15.59 4.15C15.22 3.74 14.68 3.5 14.12 3.5H9.88C9.32 3.5 8.78 3.74 8.4 4.15L7.17 5.5H4C2.9 5.5 2 6.4 2 7.5V19.5C2 20.6 2.9 21.5 4 21.5H20C21.1 21.5 22 20.6 22 19.5V7.5C22 6.4 21.1 5.5 20 5.5ZM13.67 18.2C13.15 18.39 12.59 18.5 12 18.5C9.24 18.5 7 16.26 7 13.5H5L7.5 11L10 13.5H8C8 15.71 9.79 17.5 12 17.5C12.46 17.5 12.91 17.42 13.32 17.27C13.51 17.2 13.71 17.24 13.85 17.38C14.11 17.64 14.01 18.07 13.67 18.2ZM16.5 16L14 13.5H16C16 11.29 14.21 9.5 12 9.5C11.54 9.5 11.09 9.58 10.68 9.73C10.49 9.8 10.29 9.76 10.15 9.62C9.89 9.36 9.99 8.93 10.33 8.8C10.85 8.61 11.41 8.5 12 8.5C14.76 8.5 17 10.74 17 13.5H19L16.5 16Z"
       fill={color}

packages/react-native-sdk/src/icons/Effects.tsx

@@ -8,7 +8,7 @@ type Props = {
 };
 
 export const Effects = ({ color, size }: Props) => (
-  <Svg viewBox={`0 0 24 24`} width={size} height={size}>
+  <Svg viewBox={'0 0 24 24'} width={size} height={size}>
     <Path
       d="M19.1065 8.00002L19.8965 6.25002L21.6465 5.46002C22.0365 5.28002 22.0365 4.73002 21.6465 4.55002L19.8965 3.76002L19.1065 2.00002C18.9265 1.61002 18.3765 1.61002 18.1965 2.00002L17.4065 3.75002L15.6465 4.54002C15.2565 4.72002 15.2565 5.27002 15.6465 5.45002L17.3965 6.24002L18.1865 8.00002C18.3665 8.39002 18.9265 8.39002 19.1065 8.00002ZM11.1465 9.50002L9.55652 6.00002C9.20652 5.22002 8.08652 5.22002 7.73652 6.00002L6.14652 9.50002L2.64652 11.09C1.86652 11.45 1.86652 12.56 2.64652 12.91L6.14652 14.5L7.73652 18C8.09652 18.78 9.20652 18.78 9.55652 18L11.1465 14.5L14.6465 12.91C15.4265 12.55 15.4265 11.44 14.6465 11.09L11.1465 9.50002ZM18.1865 16L17.3965 17.75L15.6465 18.54C15.2565 18.72 15.2565 19.27 15.6465 19.45L17.3965 20.24L18.1865 22C18.3665 22.39 18.9165 22.39 19.0965 22L19.8865 20.25L21.6465 19.46C22.0365 19.28 22.0365 18.73 21.6465 18.55L19.8965 17.76L19.1065 16C18.9265 15.61 18.3665 15.61 18.1865 16Z"
       fill={color}

packages/react-native-sdk/src/theme/theme.ts

@@ -95,6 +95,7 @@ export type Theme = {
     container: ViewStyle;
     participantViewContainer: ViewStyle;
     videoFallback: ViewStyle;
+    topPosition: number;
   };
   chatButton: {
     container: ViewStyle;
@@ -479,6 +480,7 @@ export const defaultTheme: Theme = {
     container: {},
     participantViewContainer: {},
     videoFallback: {},
+    topPosition: 0,
   },
   participantLabel: {
     container: {},

sample-apps/react-native/dogfood/src/assets/ClosedCaptions.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Svg, Path } from 'react-native-svg';
+import { ColorValue } from 'react-native/types';
+
+type Props = {
+  color: ColorValue;
+  size: number;
+};
+
+const ClosedCaptions = ({ color, size }: Props) => (
+  <Svg viewBox={'0 0 24 24'} width={size} height={size}>
+    <Path
+      d="M19 4H5C3.89 4 3 4.9 3 6V18C3 19.1 3.89 20 5 20H19C20.1 20 21 19.1 21 18V6C21 4.9 20.1 4 19 4ZM11 10.5C11 10.78 10.78 11 10.5 11H10C9.72 11 9.5 10.78 9.5 10.5H7.5V13.5H9.5C9.5 13.22 9.72 13 10 13H10.5C10.78 13 11 13.22 11 13.5V14C11 14.55 10.55 15 10 15H7C6.45 15 6 14.55 6 14V10C6 9.45 6.45 9 7 9H10C10.55 9 11 9.45 11 10V10.5ZM18 10.5C18 10.78 17.78 11 17.5 11H17C16.72 11 16.5 10.78 16.5 10.5H14.5V13.5H16.5C16.5 13.22 16.72 13 17 13H17.5C17.78 13 18 13.22 18 13.5V14C18 14.55 17.55 15 17 15H14C13.45 15 13 14.55 13 14V10C13 9.45 13.45 9 14 9H17C17.55 9 18 9.45 18 10V10.5Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default ClosedCaptions;

sample-apps/react-native/dogfood/src/assets/Feedback.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Svg, Path } from 'react-native-svg';
+import { ColorValue } from 'react-native/types';
+
+type Props = {
+  color: ColorValue;
+  size: number;
+};
+
+const Feedback = ({ color, size }: Props) => (
+  <Svg viewBox={'0 0 24 24'} width={size} height={size}>
+    <Path
+      d="M19.9949 2H4.00488C2.90488 2 2.00488 2.9 2.00488 4V22L5.99488 18H19.9949C21.0949 18 21.9949 17.1 21.9949 16V4C21.9949 2.9 21.0949 2 19.9949 2ZM12.9949 14H10.9949V12H12.9949V14ZM12.9949 9C12.9949 9.55 12.5449 10 11.9949 10C11.4449 10 10.9949 9.55 10.9949 9V7C10.9949 6.45 11.4449 6 11.9949 6C12.5449 6 12.9949 6.45 12.9949 7V9Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Feedback;