@stream-io/video-react-native-sdk 0.2.0 → 0.2.1

package/ios/StreamVideoReactNative.m

@@ -1,9 +1,29 @@
 #import <React/RCTBridgeModule.h>
+#import <React/RCTEventEmitter.h>
 #import "StreamVideoReactNative.h"
 #import "WebRTCModule.h"
 #import "WebRTCModuleOptions.h"
 
+// Do not change these consts, it is what is used react-native-webrtc
+NSNotificationName const kBroadcastStartedNotification = @"iOS_BroadcastStarted";
+NSNotificationName const kBroadcastStoppedNotification = @"iOS_BroadcastStopped";
+
+void broadcastNotificationCallback(CFNotificationCenterRef center,
+                                   void *observer,
+                                   CFStringRef name,
+                                   const void *object,
+                                   CFDictionaryRef userInfo) {
+    StreamVideoReactNative *this = (__bridge StreamVideoReactNative*)observer;
+    NSString *eventName = (__bridge NSString*)name;
+    [this screenShareEventReceived: eventName];
+    
+}
+
 @implementation StreamVideoReactNative
+{
+    bool hasListeners;
+    CFNotificationCenterRef _notificationCenter;
+}
 RCT_EXPORT_MODULE();
 
 +(BOOL)requiresMainQueueSetup {
@@ -16,4 +36,65 @@ RCT_EXPORT_MODULE();
     WebRTCModuleOptions *options = [WebRTCModuleOptions sharedInstance];
     options.videoEncoderFactory = simulcastVideoEncoderFactory;
 }
-@end
+
+-(instancetype)init {
+    self = [super init];
+    if (self) {
+        _notificationCenter = CFNotificationCenterGetDarwinNotifyCenter();
+        [self setupObserver];
+    }
+    
+    return self;
+}
+
+-(void)dealloc {
+    [self clearObserver];
+}
+
+
+-(void)setupObserver {
+    CFNotificationCenterAddObserver(_notificationCenter,
+                                    (__bridge const void *)(self),
+                                    broadcastNotificationCallback,
+                                    (__bridge CFStringRef)kBroadcastStartedNotification,
+                                    NULL,
+                                    CFNotificationSuspensionBehaviorDeliverImmediately);
+    CFNotificationCenterAddObserver(_notificationCenter,
+                                    (__bridge const void *)(self),
+                                    broadcastNotificationCallback,
+                                    (__bridge CFStringRef)kBroadcastStoppedNotification,
+                                    NULL,
+                                    CFNotificationSuspensionBehaviorDeliverImmediately);
+}
+
+-(void)clearObserver {
+    CFNotificationCenterRemoveObserver(_notificationCenter,
+                                       (__bridge const void *)(self),
+                                       (__bridge CFStringRef)kBroadcastStartedNotification,
+                                       NULL);
+    CFNotificationCenterRemoveObserver(_notificationCenter,
+                                       (__bridge const void *)(self),
+                                       (__bridge CFStringRef)kBroadcastStoppedNotification,
+                                       NULL);
+}
+
+-(void)startObserving {
+    hasListeners = YES;
+}
+
+-(void)stopObserving {
+    hasListeners = NO;
+}
+
+-(void)screenShareEventReceived:(NSString*)event {
+    if (hasListeners) {
+        [self sendEventWithName:@"StreamVideoReactNative_Ios_Screenshare_Event" body:@{@"name": event}];
+    }
+}
+
+-(NSArray<NSString *> *)supportedEvents {
+    return @[@"StreamVideoReactNative_Ios_Screenshare_Event"];
+}
+
+
+@end

package/ios/StreamVideoReactNative.xcodeproj/project.pbxproj

@@ -39,7 +39,7 @@
 		134814211AA4EA7D00B7C361 /* Products */ = {
 			isa = PBXGroup;
 			children = (
-				134814201AA4EA6300B7C361 /* libLivekitReactNative.a */,
+				134814201AA4EA6300B7C361 /* libStreamVideoReactNative.a */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -71,7 +71,7 @@
 			);
 			name = StreamVideoReactNative;
 			productName = RCTDataManager;
-			productReference = 134814201AA4EA6300B7C361 /* libLivekitReactNative.a */;
+			productReference = 134814201AA4EA6300B7C361 /* libStreamVideoReactNative.a */;
 			productType = "com.apple.product-type.library.static";
 		};
 /* End PBXNativeTarget section */
@@ -271,4 +271,4 @@
 /* End XCConfigurationList section */
 	};
 	rootObject = 58B511D31A9E6C8500147676 /* Project object */;
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "packageManager": "yarn@3.2.4",
   "main": "dist/commonjs/index.js",
   "module": "dist/module/index.js",
@@ -30,6 +30,7 @@
     "package.json",
     "app.plugin.js",
     "expo-config-plugin/README.md",
+    "expo-config-plugin/static/**/*",
     "expo-config-plugin/dist/**/*",
     "!expo-config-plugin/src/*",
     "!expo-config-plugin/fixtures/*",

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

@@ -0,0 +1,127 @@
+import React, { useEffect, useRef } from 'react';
+import { NativeModules, Platform, findNodeHandle } from 'react-native';
+import { ScreenCapturePickerView } from '@stream-io/react-native-webrtc';
+import { ScreenShare } from '../../../icons';
+import { CallControlsButton } from './CallControlsButton';
+import { SfuModels } from '@stream-io/video-client';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useTheme } from '../../../contexts';
+import { useIsIosScreenshareBroadcastStarted } from '../../../hooks';
+import { usePrevious } from '../../../utils/hooks';
+
+/**
+ * The props for the Screen Share button in the Call Controls.
+ */
+export type ScreenShareButtonProps = {
+  /**
+   * Handler to be called when the screen-share has been started.
+   *
+   */
+  onScreenShareStartedHandler?: () => void;
+  /**
+   * Handler to be called when the screen-share has been stopped.
+   *
+   */
+  onScreenShareStoppedHandler?: () => void;
+};
+
+// ios >= 14.0 or android
+const CanScreenShare =
+  (Platform.OS === 'ios' &&
+    Number.parseInt(Platform.Version.split('.')[0], 10) >= 14) ||
+  Platform.OS === 'android';
+
+/**
+ * Button to start/stop screen share.
+ * Note: This button is enabled only on iOS >= 14.0 and any Android version.
+ */
+export const ScreenShareButton = ({
+  onScreenShareStartedHandler,
+  onScreenShareStoppedHandler,
+}: ScreenShareButtonProps) => {
+  const {
+    theme: { colors, screenShareButton },
+  } = useTheme();
+  const call = useCall();
+  const { useLocalParticipant } = useCallStateHooks();
+
+  const onScreenShareStartedHandlerRef = useRef(onScreenShareStartedHandler);
+  onScreenShareStartedHandlerRef.current = onScreenShareStartedHandler;
+  const onScreenShareStoppedHandlerRef = useRef(onScreenShareStoppedHandler);
+  onScreenShareStoppedHandlerRef.current = onScreenShareStoppedHandler;
+
+  const iosScreenShareStarted = useIsIosScreenshareBroadcastStarted();
+  const prevIosScreenShareStarted = usePrevious(iosScreenShareStarted);
+
+  const localParticipant = useLocalParticipant();
+  const hasPublishedScreenShare = localParticipant?.publishedTracks.includes(
+    SfuModels.TrackType.SCREEN_SHARE,
+  );
+
+  // listens to iOS screen share broadcast started event
+  useEffect(() => {
+    const run = async () => {
+      if (Platform.OS !== 'ios') {
+        return;
+      }
+      if (iosScreenShareStarted && !prevIosScreenShareStarted) {
+        onScreenShareStartedHandlerRef.current?.();
+        const media = await navigator.mediaDevices.getDisplayMedia({
+          // @ts-ignore
+          deviceId: 'broadcast',
+          video: true,
+          audio: true,
+        });
+        await call?.publishScreenShareStream(media);
+      } else if (!iosScreenShareStarted && prevIosScreenShareStarted) {
+        onScreenShareStoppedHandlerRef.current?.();
+        await call?.stopPublish(SfuModels.TrackType.SCREEN_SHARE);
+      }
+    };
+    run();
+  }, [call, iosScreenShareStarted, prevIosScreenShareStarted]);
+
+  const screenCaptureRef = React.useRef(null);
+
+  const onPress = async () => {
+    if (Platform.OS === 'ios') {
+      const reactTag = findNodeHandle(screenCaptureRef.current);
+      await NativeModules.ScreenCapturePickerViewManager.show(reactTag);
+      // After this the iOS screen share broadcast started/stopped event will be triggered
+      // and the useEffect listener will handle the rest
+    } else {
+      if (!hasPublishedScreenShare) {
+        try {
+          const media = await navigator.mediaDevices.getDisplayMedia({
+            video: true,
+            audio: true,
+          });
+          onScreenShareStartedHandlerRef.current?.();
+          await call?.publishScreenShareStream(media);
+        } catch (e) {
+          // ignored.. user didnt allow the screen share in the popup
+        }
+      } else if (hasPublishedScreenShare) {
+        onScreenShareStoppedHandlerRef.current?.();
+        await call?.stopPublish(SfuModels.TrackType.SCREEN_SHARE);
+      }
+    }
+  };
+
+  return (
+    <CallControlsButton
+      disabled={!CanScreenShare}
+      onPress={onPress}
+      color={colors.static_white}
+      style={{
+        container: screenShareButton.container,
+        svgContainer: screenShareButton.svgContainer,
+      }}
+    >
+      <ScreenShare color={colors.static_black} />
+      {Platform.OS === 'ios' && (
+        <ScreenCapturePickerView ref={screenCaptureRef} />
+      )}
+    </CallControlsButton>
+  );
+};

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

@@ -12,3 +12,4 @@ export * from './CallControls';
 export * from './LobbyControls';
 export * from './IncomingCallControls';
 export * from './OutgoingCallControls';
+export * from './ScreenShareButton';

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

@@ -1,6 +1,11 @@
 import React from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { MicOff, PinVertical, ScreenShare, VideoSlash } from '../../../icons';
+import {
+  MicOff,
+  PinVertical,
+  ScreenShareIndicator,
+  VideoSlash,
+} from '../../../icons';
 import { useCall, useI18n } from '@stream-io/video-react-bindings';
 import { ComponentTestIds } from '../../../constants/TestIds';
 import { ParticipantViewProps } from './ParticipantView';
@@ -43,6 +48,7 @@ export const ParticipantLabel = ({
   const call = useCall();
   const { t } = useI18n();
   const participantName = name ?? userId;
+
   const participantLabel = isLocalParticipant ? t('You') : participantName;
   const isPinningEnabled = pin?.isLocalPin;
   const isAudioMuted = !publishedTracks.includes(SfuModels.TrackType.AUDIO);
@@ -53,6 +59,11 @@ export const ParticipantLabel = ({
   };
 
   if (trackType === 'screenShareTrack') {
+    const screenShareText = isLocalParticipant
+      ? t('You are sharing your screen')
+      : t('{{ userName }} is sharing their screen', {
+          userName: participantName,
+        });
     return (
       <View
         style={[
@@ -72,7 +83,7 @@ export const ParticipantLabel = ({
             screenShareIconContainer,
           ]}
         >
-          <ScreenShare color={colors.static_white} />
+          <ScreenShareIndicator color={colors.static_white} />
         </View>
         <Text
           style={[
@@ -83,9 +94,7 @@ export const ParticipantLabel = ({
           ]}
           numberOfLines={1}
         >
-          {t('{{ userName }} is sharing their screen', {
-            userName: participantLabel,
-          })}
+          {screenShareText}
         </Text>
       </View>
     );

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

@@ -74,7 +74,9 @@ export const VideoRenderer = ({
   const videoStreamToRender = (isScreenSharing
     ? screenShareStream
     : videoStream) as unknown as MediaStream | undefined;
-  const mirror = isLocalParticipant && direction === 'front';
+
+  const mirror =
+    isLocalParticipant && !isScreenSharing && direction === 'front';
 
   /**
    * This effect updates the participant's viewportVisibilityState

package/src/constants/TestIds.ts

@@ -1,6 +1,7 @@
 export enum IconTestIds {
   MUTED_VIDEO = 'muted-video-icon',
   HANG_UP_CALL = 'hang-up-call-icon',
+  SCREEN_SHARE_INDICATOR = 'screen-share-indicator-icon',
   SCREEN_SHARE = 'screen-share-icon',
 }
 

package/src/hooks/index.ts

@@ -3,5 +3,6 @@ export * from './usePermissionRequest';
 export * from './usePermissionNotification';
 export * from './push';
 export * from './useAndroidKeepCallAliveEffect';
+export * from './useIsIosScreenshareBroadcastStarted';
 export * from './useIsInPiPMode';
 export * from './useAutoEnterPiPEffect';

package/src/hooks/useIsIosScreenshareBroadcastStarted.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import { NativeEventEmitter, NativeModules, Platform } from 'react-native';
+
+type Event = {
+  name: 'iOS_BroadcastStarted' | 'iOS_BroadcastStopped';
+};
+
+export function useIsIosScreenshareBroadcastStarted() {
+  const [hasStarted, setHasStarted] = useState(false);
+
+  useEffect(() => {
+    if (Platform.OS !== 'ios') {
+      return;
+    }
+
+    const eventEmitter = new NativeEventEmitter(
+      NativeModules.StreamVideoReactNative,
+    );
+
+    const subscription = eventEmitter.addListener(
+      'StreamVideoReactNative_Ios_Screenshare_Event',
+      (event: Event) => {
+        setHasStarted(event.name === 'iOS_BroadcastStarted');
+      },
+    );
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return hasStarted;
+}

package/src/icons/ScreenShare.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Svg, { Mask, Path } from 'react-native-svg';
+import Svg, { Path } from 'react-native-svg';
 import { ColorValue } from 'react-native/types';
 import { IconTestIds } from '../constants/TestIds';
 
@@ -9,25 +9,10 @@ type Props = {
 
 export const ScreenShare = ({ color }: Props) => {
   return (
-    <Svg viewBox="0 0 24 24" testID={IconTestIds.SCREEN_SHARE}>
-      <Mask id="path-1-inside-1_1396_84816">
-        <Path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M 2 6.68176 C 2 5.57719 2.89543 4.68176 4 4.68176 H 20 C 21.1046 4.68176 22 5.57719 22 6.68176 V 16.3181 C 22 17.4227 21.1046 18.3181 20 18.3181 H 4 C 2.89543 18.3181 2 17.4227 2 16.3181 V 6.68176 Z M 10.4209 11.5243 L 8.3635 11.5 L 11.9999 7.25755 L 15.6362 11.5 L 13.5065 11.5247 V 15.7424 L 10.4209 15.7424 V 11.5243 Z"
-        />
-      </Mask>
-
-      <Path
-        fill={color}
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M 2 6.68176 C 2 5.57719 2.89543 4.68176 4 4.68176 H 20 C 21.1046 4.68176 22 5.57719 22 6.68176 V 16.3181 C 22 17.4227 21.1046 18.3181 20 18.3181 H 4 C 2.89543 18.3181 2 17.4227 2 16.3181 V 6.68176 Z M 10.4209 11.5243 L 8.3635 11.5 L 11.9999 7.25755 L 15.6362 11.5 L 13.5065 11.5247 V 15.7424 L 10.4209 15.7424 V 11.5243 Z"
-      />
+    <Svg viewBox="0 0 36 36" testID={IconTestIds.SCREEN_SHARE}>
       <Path
-        mask="url(#path-1-inside-1_1396_84816)"
         fill={color}
-        d="M 8.3635 11.5 L 6.84499 10.1984 L 4.05865 13.4491 L 8.33982 13.4998 L 8.3635 11.5 Z M 10.4209 11.5243 H 12.4209 V 9.54789 L 10.4446 9.52449 L 10.4209 11.5243 Z M 11.9999 7.25755 L 13.5184 5.95597 L 11.9999 4.18437 L 10.4814 5.95597 L 11.9999 7.25755 Z M 15.6362 11.5 L 15.6594 13.4998 L 19.9419 13.4501 L 17.1547 10.1984 L 15.6362 11.5 Z M 13.5065 11.5247 L 13.4833 9.52483 L 11.5065 9.54778 V 11.5247 H 13.5065 Z M 13.5065 15.7424 L 13.5065 17.7424 L 15.5065 17.7424 V 15.7424 H 13.5065 Z M 10.4209 15.7424 H 8.42094 V 17.7424 H 10.4209 L 10.4209 15.7424 Z M 4 2.68176 C 1.79086 2.68176 0 4.47263 0 6.68176 H 4 V 6.68176 V 2.68176 Z M 20 2.68176 H 4 V 6.68176 H 20 V 2.68176 Z M 24 6.68176 C 24 4.47262 22.2091 2.68176 20 2.68176 V 6.68176 H 24 Z M 24 16.3181 V 6.68176 H 20 V 16.3181 H 24 Z M 20 20.3181 C 22.2091 20.3181 24 18.5273 24 16.3181 H 20 V 16.3181 V 20.3181 Z M 4 20.3181 H 20 V 16.3181 H 4 V 20.3181 Z M 0 16.3181 C 0 18.5273 1.79086 20.3181 4 20.3181 V 16.3181 H 4 H 0 Z M 0 6.68176 V 16.3181 H 4 V 6.68176 H 0 Z M 8.33982 13.4998 L 10.3973 13.5242 L 10.4446 9.52449 L 8.38719 9.50012 L 8.33982 13.4998 Z M 10.4814 5.95597 L 6.84499 10.1984 L 9.88202 12.8016 L 13.5184 8.55913 L 10.4814 5.95597 Z M 17.1547 10.1984 L 13.5184 5.95597 L 10.4814 8.55913 L 14.1177 12.8016 L 17.1547 10.1984 Z M 13.5297 13.5246 L 15.6594 13.4998 L 15.613 9.50011 L 13.4833 9.52483 L 13.5297 13.5246 Z M 11.5065 11.5247 V 15.7424 H 15.5065 V 11.5247 H 11.5065 Z M 13.5065 13.7424 L 10.4209 13.7424 L 10.4209 17.7424 L 13.5065 17.7424 L 13.5065 13.7424 Z M 12.4209 15.7424 V 11.5243 H 8.42094 V 15.7424 H 12.4209 Z"
+        d="m25.407 1.718-14.814-.014a2.959 2.959 0 0 0-2.948 2.963v26.666a2.959 2.959 0 0 0 2.948 2.963h14.814a2.972 2.972 0 0 0 2.963-2.963V4.667a2.96 2.96 0 0 0-2.963-2.949Zm0 26.652H10.593V7.63h14.814v20.74Zm-6.222-8.563V22.4l4.741-4.43-4.74-4.414v2.518c-4.608.637-6.445 3.793-7.112 6.963 1.645-2.222 3.822-3.23 7.111-3.23Z"
       />
     </Svg>
   );

package/src/icons/ScreenShareIndicator.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Svg, { Mask, Path } from 'react-native-svg';
+import { ColorValue } from 'react-native/types';
+import { IconTestIds } from '../constants/TestIds';
+
+type Props = {
+  color: ColorValue;
+};
+
+export const ScreenShareIndicator = ({ color }: Props) => {
+  return (
+    <Svg viewBox="0 0 24 24" testID={IconTestIds.SCREEN_SHARE_INDICATOR}>
+      <Mask id="path-1-inside-1_1396_84816">
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M 2 6.68176 C 2 5.57719 2.89543 4.68176 4 4.68176 H 20 C 21.1046 4.68176 22 5.57719 22 6.68176 V 16.3181 C 22 17.4227 21.1046 18.3181 20 18.3181 H 4 C 2.89543 18.3181 2 17.4227 2 16.3181 V 6.68176 Z M 10.4209 11.5243 L 8.3635 11.5 L 11.9999 7.25755 L 15.6362 11.5 L 13.5065 11.5247 V 15.7424 L 10.4209 15.7424 V 11.5243 Z"
+        />
+      </Mask>
+
+      <Path
+        fill={color}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M 2 6.68176 C 2 5.57719 2.89543 4.68176 4 4.68176 H 20 C 21.1046 4.68176 22 5.57719 22 6.68176 V 16.3181 C 22 17.4227 21.1046 18.3181 20 18.3181 H 4 C 2.89543 18.3181 2 17.4227 2 16.3181 V 6.68176 Z M 10.4209 11.5243 L 8.3635 11.5 L 11.9999 7.25755 L 15.6362 11.5 L 13.5065 11.5247 V 15.7424 L 10.4209 15.7424 V 11.5243 Z"
+      />
+      <Path
+        mask="url(#path-1-inside-1_1396_84816)"
+        fill={color}
+        d="M 8.3635 11.5 L 6.84499 10.1984 L 4.05865 13.4491 L 8.33982 13.4998 L 8.3635 11.5 Z M 10.4209 11.5243 H 12.4209 V 9.54789 L 10.4446 9.52449 L 10.4209 11.5243 Z M 11.9999 7.25755 L 13.5184 5.95597 L 11.9999 4.18437 L 10.4814 5.95597 L 11.9999 7.25755 Z M 15.6362 11.5 L 15.6594 13.4998 L 19.9419 13.4501 L 17.1547 10.1984 L 15.6362 11.5 Z M 13.5065 11.5247 L 13.4833 9.52483 L 11.5065 9.54778 V 11.5247 H 13.5065 Z M 13.5065 15.7424 L 13.5065 17.7424 L 15.5065 17.7424 V 15.7424 H 13.5065 Z M 10.4209 15.7424 H 8.42094 V 17.7424 H 10.4209 L 10.4209 15.7424 Z M 4 2.68176 C 1.79086 2.68176 0 4.47263 0 6.68176 H 4 V 6.68176 V 2.68176 Z M 20 2.68176 H 4 V 6.68176 H 20 V 2.68176 Z M 24 6.68176 C 24 4.47262 22.2091 2.68176 20 2.68176 V 6.68176 H 24 Z M 24 16.3181 V 6.68176 H 20 V 16.3181 H 24 Z M 20 20.3181 C 22.2091 20.3181 24 18.5273 24 16.3181 H 20 V 16.3181 V 20.3181 Z M 4 20.3181 H 20 V 16.3181 H 4 V 20.3181 Z M 0 16.3181 C 0 18.5273 1.79086 20.3181 4 20.3181 V 16.3181 H 4 H 0 Z M 0 6.68176 V 16.3181 H 4 V 6.68176 H 0 Z M 8.33982 13.4998 L 10.3973 13.5242 L 10.4446 9.52449 L 8.38719 9.50012 L 8.33982 13.4998 Z M 10.4814 5.95597 L 6.84499 10.1984 L 9.88202 12.8016 L 13.5184 8.55913 L 10.4814 5.95597 Z M 17.1547 10.1984 L 13.5184 5.95597 L 10.4814 8.55913 L 14.1177 12.8016 L 17.1547 10.1984 Z M 13.5297 13.5246 L 15.6594 13.4998 L 15.613 9.50011 L 13.4833 9.52483 L 13.5297 13.5246 Z M 11.5065 11.5247 V 15.7424 H 15.5065 V 11.5247 H 11.5065 Z M 13.5065 13.7424 L 10.4209 13.7424 L 10.4209 17.7424 L 13.5065 17.7424 L 13.5065 13.7424 Z M 12.4209 15.7424 V 11.5243 H 8.42094 V 15.7424 H 12.4209 Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/index.tsx

@@ -11,6 +11,7 @@ export * from './Participants';
 export * from './ThreeDots';
 export * from './PinVertical';
 export * from './Spotlight';
+export * from './ScreenShareIndicator';
 export * from './ScreenShare';
 export * from './Reaction';
 export * from './TopViewBackground';

package/src/theme/theme.ts

@@ -57,6 +57,10 @@ export type Theme = {
     container: ViewStyle;
     svgContainer: ViewStyle;
   };
+  screenShareButton: {
+    container: ViewStyle;
+    svgContainer: ViewStyle;
+  };
   toggleAudioPreviewButton: {
     container: ViewStyle;
     svgContainer: ViewStyle;
@@ -363,6 +367,10 @@ export const defaultTheme: Theme = {
     container: {},
     svgContainer: {},
   },
+  screenShareButton: {
+    container: {},
+    svgContainer: {},
+  },
   toggleAudioPreviewButton: {
     container: {},
     svgContainer: {},

package/src/translations/en.json

@@ -14,6 +14,7 @@
   "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",
+  "You are sharing your screen": "You are sharing your screen",
   "{{ numberOfParticipants }} participant(s) are in the call.": "{{ numberOfParticipants }} participant(s) are in the call.",
   "You are about to join a call with id {{ callId }}.": "You are about to join a call with id {{ callId }}."
 }

package/src/version.ts

@@ -1 +1 @@
-export const version = '0.2.0';
+export const version = '0.2.1';