@stream-io/video-react-native-sdk 0.0.28 → 0.1.1

package/src/components/Participant/FloatingParticipantView/index.tsx

@@ -10,7 +10,10 @@ import { FLOATING_VIDEO_VIEW_STYLE, Z_INDEX } from '../../../constants';
 import { ComponentTestIds } from '../../../constants/TestIds';
 import { VideoSlash } from '../../../icons';
 import FloatingView from './FloatingView';
-import { CallParticipantsListProps } from '../../Call';
+import {
+  CallContentProps,
+  CallParticipantsListComponentProps,
+} from '../../Call';
 import { FloatingViewAlignment } from './FloatingView/common';
 import {
   ParticipantView as DefaultParticipantView,
@@ -29,7 +32,8 @@ export type FloatingParticipantViewAlignment =
  * Props to be passed for the LocalVideoView component.
  */
 export type FloatingParticipantViewProps = ParticipantViewComponentProps &
-  Pick<CallParticipantsListProps, 'ParticipantView'> & {
+  Pick<CallParticipantsListComponentProps, 'ParticipantView'> &
+  Pick<CallContentProps, 'supportedReactions'> & {
     /**
      * Determines where the floating participant video will be placed.
      */
@@ -85,6 +89,7 @@ export const FloatingParticipantView = ({
   ParticipantNetworkQualityIndicator,
   ParticipantReaction,
   VideoRenderer,
+  supportedReactions,
 }: FloatingParticipantViewProps) => {
   const {
     theme: { colors, floatingParticipantsView },
@@ -160,6 +165,7 @@ export const FloatingParticipantView = ({
                 // video z order must be one above the one used in grid view
                 // (which uses the default: 0)
                 videoZOrder={1}
+                supportedReactions={supportedReactions}
                 {...participantViewProps}
               />
             )}

package/src/components/Participant/ParticipantView/ParticipantReaction.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useCall } from '@stream-io/video-react-bindings';
-import { StreamVideoRN } from '../../../utils';
-import { Z_INDEX } from '../../../constants';
+import { Z_INDEX, defaultEmojiReactions } from '../../../constants';
 import { ParticipantViewProps } from './ParticipantView';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { CallContentProps } from '../../Call';
 
 /**
  * Props for the ParticipantReaction component.
@@ -12,23 +12,24 @@ import { useTheme } from '../../../contexts/ThemeContext';
 export type ParticipantReactionProps = Pick<
   ParticipantViewProps,
   'participant'
-> & {
-  /**
-   * The duration after which the reaction should disappear.
-   *
-   * @default 5500
-   */
-  hideAfterTimeoutInMs?: number;
-};
+> &
+  Pick<CallContentProps, 'supportedReactions'> & {
+    /**
+     * The duration after which the reaction should disappear.
+     *
+     * @default 5500
+     */
+    hideAfterTimeoutInMs?: number;
+  };
 
 /**
  * This component is used to display the current participant reaction.
  */
 export const ParticipantReaction = ({
   participant,
+  supportedReactions = defaultEmojiReactions,
   hideAfterTimeoutInMs = 5500,
 }: ParticipantReactionProps) => {
-  const { supportedReactions } = StreamVideoRN.getConfig();
   const { reaction, sessionId } = participant;
   const call = useCall();
   const {
@@ -38,14 +39,11 @@ export const ParticipantReaction = ({
       participantReaction,
     },
   } = useTheme();
-  const [isShowing, setIsShowing] = useState<boolean>(false);
 
   useEffect(() => {
     let timeoutId: NodeJS.Timeout;
     if (call) {
-      setIsShowing(true);
       timeoutId = setTimeout(() => {
-        setIsShowing(false);
         call.resetReaction(sessionId);
       }, hideAfterTimeoutInMs);
     }
@@ -61,19 +59,6 @@ export const ParticipantReaction = ({
         supportedReaction.emoji_code === reaction.emoji_code,
     );
 
-  let component;
-  if (isShowing) {
-    if (typeof currentReaction?.icon !== 'string') {
-      component = currentReaction?.icon;
-    } else {
-      component = (
-        <Text style={[participantReaction.reaction, typefaces.heading6]}>
-          {currentReaction.icon}
-        </Text>
-      );
-    }
-  }
-
   return (
     <View
       style={[
@@ -85,7 +70,9 @@ export const ParticipantReaction = ({
         participantReaction.container,
       ]}
     >
-      {component}
+      <Text style={[participantReaction.reaction, typefaces.heading6]}>
+        {currentReaction?.icon}
+      </Text>
     </View>
   );
 };

package/src/components/Participant/ParticipantView/ParticipantView.tsx

@@ -25,8 +25,7 @@ import {
   VideoRendererProps,
 } from './VideoRenderer';
 import { useTheme } from '../../../contexts/ThemeContext';
-
-export type ParticipantVideoType = VideoTrackType;
+import { CallContentProps } from '../../Call';
 
 export type ParticipantViewComponentProps = {
   /**
@@ -54,35 +53,36 @@ export type ParticipantViewComponentProps = {
 /**
  * Props to be passed for the Participant component.
  */
-export type ParticipantViewProps = ParticipantViewComponentProps & {
-  /**
-   * The participant that will be displayed.
-   */
-  participant: StreamVideoParticipant;
-  /**
-   * The zOrder for the video that will be displayed.
-   * For example, a video call
-   * application usually needs a maximum of two zOrder values: 0 for the
-   * remote video(s) which appear in the background, and 1 for the local
-   * video(s) which appear above the remote video(s).
-   * @default 0
-   */
-  videoZOrder?: number;
-  /**
-   * The video track that is to be displayed.
-   */
-  trackType?: ParticipantVideoType;
-  /**
-   * Custom style to be merged with the participant view.
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * When set to false, the video stream will not be shown even if it is available.
-   *
-   * @default true
-   */
-  isVisible?: boolean;
-};
+export type ParticipantViewProps = ParticipantViewComponentProps &
+  Pick<CallContentProps, 'supportedReactions'> & {
+    /**
+     * The participant that will be displayed.
+     */
+    participant: StreamVideoParticipant;
+    /**
+     * The zOrder for the video that will be displayed.
+     * For example, a video call
+     * application usually needs a maximum of two zOrder values: 0 for the
+     * remote video(s) which appear in the background, and 1 for the local
+     * video(s) which appear above the remote video(s).
+     * @default 0
+     */
+    videoZOrder?: number;
+    /**
+     * The video track that is to be displayed.
+     */
+    trackType?: VideoTrackType;
+    /**
+     * Custom style to be merged with the participant view.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * When set to false, the video stream will not be shown even if it is available.
+     *
+     * @default true
+     */
+    isVisible?: boolean;
+  };
 
 /**
  * A component that renders the participants' video track or screenShare track
@@ -100,6 +100,7 @@ export const ParticipantView = ({
   ParticipantNetworkQualityIndicator = DefaultParticipantNetworkQualityIndicator,
   ParticipantVideoFallback = DefaultParticipantVideoFallback,
   videoZOrder = 0,
+  supportedReactions,
 }: ParticipantViewProps) => {
   const {
     theme: { colors, participantView },
@@ -124,7 +125,12 @@ export const ParticipantView = ({
           : `participant-${userId}-is-not-speaking`
       }
     >
-      {ParticipantReaction && <ParticipantReaction participant={participant} />}
+      {ParticipantReaction && (
+        <ParticipantReaction
+          participant={participant}
+          supportedReactions={supportedReactions}
+        />
+      )}
       {VideoRenderer && (
         <VideoRenderer
           isVisible={isVisible}

package/src/constants/index.ts

@@ -1,4 +1,4 @@
-import { StreamVideoConfig } from '../utils/StreamVideoRN/types';
+import { StreamReactionType } from '../components';
 
 export const FLOATING_VIDEO_VIEW_STYLE = {
   height: 140,
@@ -8,7 +8,7 @@ export const FLOATING_VIDEO_VIEW_STYLE = {
 
 export const LOBBY_VIDEO_VIEW_HEIGHT = 280;
 
-export const defaultEmojiReactions: StreamVideoConfig['supportedReactions'] = [
+export const defaultEmojiReactions: StreamReactionType[] = [
   {
     type: 'reaction',
     emoji_code: ':like:',

package/src/translations/en.json

@@ -6,7 +6,7 @@
   "Join": "Join",
   "You": "You",
   "Reconnecting...": "Reconnecting...",
-  "You are first to Join the call.": "You are first to Join the call.",
+  "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",
   "{{ numberOfParticipants }} participant(s) are in the call.": "{{ numberOfParticipants }} participant(s) are in the call.",

package/src/utils/StreamVideoRN/index.ts

@@ -1,10 +1,8 @@
 import { AndroidImportance } from '@notifee/react-native';
-import { defaultEmojiReactions } from '../../constants';
 import { setupFirebaseHandlerAndroid } from '../push/android';
 import { StreamVideoConfig } from './types';
 
 const DEFAULT_STREAM_VIDEO_CONFIG: StreamVideoConfig = {
-  supportedReactions: defaultEmojiReactions,
   foregroundService: {
     android: {
       channel: {
@@ -24,6 +22,7 @@ const DEFAULT_STREAM_VIDEO_CONFIG: StreamVideoConfig = {
 
 export class StreamVideoRN {
   private static config = DEFAULT_STREAM_VIDEO_CONFIG;
+
   /**
    * Update the global config for StreamVideoRN except for push config.
    * To set push config use `StreamVideoRN.setPushConfig` instead.

package/src/utils/StreamVideoRN/types.ts

@@ -1,17 +1,7 @@
-import { StreamReaction, StreamVideoClient } from '@stream-io/video-client';
+import { StreamVideoClient } from '@stream-io/video-client';
 import { AndroidChannel } from '@notifee/react-native';
 
-type StreamReactionType = Required<StreamReaction> & {
-  icon: string | JSX.Element;
-};
-
 export type StreamVideoConfig = {
-  /**
-   * Reactions that are to be supported in the app.
-   *
-   * Note: This is an array of reactions that is rendered in the Reaction list.
-   */
-  supportedReactions: StreamReactionType[];
   /**
    * The configuration to be used for push notifications.
    * If undefined, push notifications will not be enabled for the app

package/src/version.ts

@@ -1 +1 @@
-export const version = '0.0.28';
+export const version = '0.1.1';

package/dist/commonjs/components/Call/CallControls/ReactionButton.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_videoReactBindings","require","_react","_interopRequireWildcard","_CallControlsButton","_videoClient","_TestIds","_icons","_ReactionsPicker","_utils","_ThemeContext","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ReactionButton","_ref","onPressHandler","showReactionsPicker","setShowReactionsPicker","useState","reactionsButtonLayoutRectangle","setReactionsButtonLayoutRectangle","theme","colors","useTheme","onReactionsButtonLayout","event","layout","nativeEvent","prev","width","height","x","y","reactionButtonHandler","createElement","Fragment","Restricted","requiredGrants","OwnCapability","CREATE_REACTION","CallControlsButton","testID","ButtonTestIds","REACTION","onPress","onLayout","Reaction","color","static_black","ReactionsPicker","reactions","StreamVideoRN","getConfig","supportedReactions","onRequestedClose","exports"],"sourceRoot":"../../../../../src","sources":["components/Call/CallControls/ReactionButton.tsx"],"mappings":"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"}

package/dist/module/components/Call/CallControls/ReactionButton.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["Restricted","React","useState","CallControlsButton","OwnCapability","ButtonTestIds","Reaction","ReactionsPicker","StreamVideoRN","useTheme","ReactionButton","_ref","onPressHandler","showReactionsPicker","setShowReactionsPicker","reactionsButtonLayoutRectangle","setReactionsButtonLayoutRectangle","theme","colors","onReactionsButtonLayout","event","layout","nativeEvent","prev","width","height","x","y","reactionButtonHandler","createElement","Fragment","requiredGrants","CREATE_REACTION","testID","REACTION","onPress","onLayout","color","static_black","reactions","getConfig","supportedReactions","onRequestedClose"],"sourceRoot":"../../../../../src","sources":["components/Call/CallControls/ReactionButton.tsx"],"mappings":"AAAA,SAASA,UAAU,QAAQ,iCAAiC;AAC5D,OAAOC,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,kBAAkB,QAAQ,sBAAsB;AACzD,SAASC,aAAa,QAAQ,yBAAyB;AACvD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,eAAe,QAAQ,4BAA4B;AAC5D,SAASC,aAAa,QAAQ,gBAAgB;AAE9C,SAASC,QAAQ,QAAQ,gCAAgC;;AAEzD;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA,OAAO,MAAMC,cAAc,GAAGC,IAAA,IAA6C;EAAA,IAA5C;IAAEC;EAAoC,CAAC,GAAAD,IAAA;EACpE,MAAM,CAACE,mBAAmB,EAAEC,sBAAsB,CAAC,GACjDZ,QAAQ,CAAU,KAAK,CAAC;EAC1B,MAAM,CAACa,8BAA8B,EAAEC,iCAAiC,CAAC,GACvEd,QAAQ,CAAkB,CAAC;EAC7B,MAAM;IACJe,KAAK,EAAE;MAAEC;IAAO;EAClB,CAAC,GAAGT,QAAQ,CAAC,CAAC;EACd;EACA,MAAMU,uBAAuB,GAAIC,KAAwB,IAAK;IAC5D,MAAMC,MAAM,GAAGD,KAAK,CAACE,WAAW,CAACD,MAAM;IACvCL,iCAAiC,CAAEO,IAAI,IAAK;MAC1C,IACEA,IAAI,IACJA,IAAI,CAACC,KAAK,KAAKH,MAAM,CAACG,KAAK,IAC3BD,IAAI,CAACE,MAAM,KAAKJ,MAAM,CAACI,MAAM,IAC7BF,IAAI,CAACG,CAAC,KAAKL,MAAM,CAACK,CAAC,IACnBH,IAAI,CAACI,CAAC,KAAKN,MAAM,CAACM,CAAC,EACnB;QACA,OAAOJ,IAAI;MACb;MACA,OAAOF,MAAM;IACf,CAAC,CAAC;EACJ,CAAC;EAED,MAAMO,qBAAqB,GAAGA,CAAA,KAAM;IAClC,IAAIhB,cAAc,EAAE;MAClBA,cAAc,CAAC,CAAC;MAChB;IACF;IACAE,sBAAsB,CAAC,IAAI,CAAC;EAC9B,CAAC;EAED,oBACEb,KAAA,CAAA4B,aAAA,CAAA5B,KAAA,CAAA6B,QAAA,qBACE7B,KAAA,CAAA4B,aAAA,CAAC7B,UAAU;IAAC+B,cAAc,EAAE,CAAC3B,aAAa,CAAC4B,eAAe;EAAE,gBAC1D/B,KAAA,CAAA4B,aAAA,CAAC1B,kBAAkB;IACjB8B,MAAM,EAAE5B,aAAa,CAAC6B,QAAS;IAC/BC,OAAO,EAAEP,qBAAsB;IAC/BQ,QAAQ,EAAEjB;EAAwB,gBAElClB,KAAA,CAAA4B,aAAA,CAACvB,QAAQ;IAAC+B,KAAK,EAAEnB,MAAM,CAACoB;EAAa,CAAE,CACrB,CACV,CAAC,EACZzB,mBAAmB,iBAClBZ,KAAA,CAAA4B,aAAA,CAACtB,eAAe;IACdgC,SAAS,EAAE/B,aAAa,CAACgC,SAAS,CAAC,CAAC,CAACC,kBAAmB;IACxD1B,8BAA8B,EAAEA,8BAA+B;IAC/D2B,gBAAgB,EAAEA,CAAA,KAAM;MACtB5B,sBAAsB,CAAC,KAAK,CAAC;IAC/B;EAAE,CACH,CAEH,CAAC;AAEP,CAAC"}

package/dist/typescript/components/Call/CallControls/ReactionButton.d.ts

@@ -1,15 +0,0 @@
-/**
- * Props for the Reaction button
- */
-export type ReactionButtonProps = {
-    /**
-     * Handler to be called when the reaction button is pressed.
-     */
-    onPressHandler?: () => void;
-};
-/**
- * Button to display the list of Reactions supported in the call.
- * On press, it opens a view that can be used to send Reaction.
- */
-export declare const ReactionButton: ({ onPressHandler }: ReactionButtonProps) => JSX.Element;
-//# sourceMappingURL=ReactionButton.d.ts.map

package/dist/typescript/components/Call/CallControls/ReactionButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ReactionButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallControls/ReactionButton.tsx"],"names":[],"mappings":"AAWA;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,uBAAwB,mBAAmB,gBAuDrE,CAAC"}