cobrowse-sdk-react-native 2.13.0 → 2.14.0

package/android/src/main/java/io/cobrowse/reactnative/CommonDelegates.java

@@ -0,0 +1,196 @@
+package io.cobrowse.reactnative;
+
+import android.app.Activity;
+import android.util.Log;
+import android.view.View;
+import android.view.ViewGroup;
+import android.view.ViewParent;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import androidx.core.util.Predicate;
+
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.modules.core.DeviceEventManagerModule;
+import com.facebook.react.uimanager.NativeViewHierarchyManager;
+import com.facebook.react.uimanager.UIBlock;
+import com.facebook.react.uimanager.UIManagerModule;
+
+import java.util.ArrayList;
+import java.util.HashSet;
+import java.util.List;
+import java.util.Set;
+
+import io.cobrowse.Session;
+
+class CommonDelegates implements CobrowseIOCommonDelegates {
+
+  private static final String SESSION_LOADED = "session.loaded";
+  private static final String SESSION_UPDATED = "session.updated";
+  private static final String SESSION_ENDED = "session.ended";
+  private static final String SESSION_REQUESTED = "session.requested";
+
+  private final HashSet<Integer> unredactedTags = new HashSet<>();
+  private ReactApplicationContext reactApplicationContext;
+  private NativeViewHierarchyManager nodeManager;
+
+  CommonDelegates(ReactApplicationContext context) {
+    this.reactApplicationContext = context;
+  }
+
+  private Set<View> getUnredactedViews(@NonNull final Activity activity) {
+    synchronized (unredactedTags) {
+      HashSet<View> unredacted = new HashSet<>();
+      for (Integer i : unredactedTags) {
+        try {
+          unredacted.add(nodeManager.resolveView(i));
+        } catch (Exception e) {
+          Log.i("CobrowseIO", "Failed to find unredacted view for tag " + i + ", error = " + e.getMessage());
+        }
+      }
+      if (CobrowseIOModule.delegate instanceof io.cobrowse.reactnative.CobrowseIO.RedactionDelegate) {
+        List<View> views = ((io.cobrowse.reactnative.CobrowseIO.RedactionDelegate) CobrowseIOModule.delegate).unredactedViews(activity);
+        if (views != null) unredacted.addAll(views);
+      }
+      return unredacted;
+    }
+  }
+
+  private Set<View> getRedactedViews(@NonNull final Activity activity) {
+    HashSet<View> redacted = new HashSet<>(RedactedViewManager.redactedViews.keySet());
+    if (CobrowseIOModule.delegate instanceof io.cobrowse.reactnative.CobrowseIO.RedactionDelegate) {
+      List<View> views = ((io.cobrowse.reactnative.CobrowseIO.RedactionDelegate) CobrowseIOModule.delegate).redactedViews(activity);
+      if (views != null) redacted.addAll(views);
+    }
+    return redacted;
+  }
+
+  @Override
+  public void handleFullDeviceRequest(@NonNull Activity activity, @NonNull Session session) {
+    // no-op, this will be handed on the JS side via an "updated" event handler
+    // this stub just disables the default native prompt in the SDK
+  }
+
+  @Override
+  public List<View> redactedViews(@NonNull Activity activity) {
+    final Set<View> redacted = this.getRedactedViews(activity);
+    final Set<View> unredacted = this.getUnredactedViews(activity);
+
+    // Project all unredactions to the root to get the full set of unredacted nodes
+    HashSet<View> projectedUnredacted = new HashSet<>();
+    for (View view : unredacted) {
+      projectedUnredacted.add(view);
+      projectedUnredacted.addAll(TreeUtils.allParents(view));
+    }
+
+    // Work out which nodes are explicitly redacted but need to be unredacted
+    // due to a nested unredaction tag (these redactions will be moved towards the
+    // leaves of the view hierarchy instead)
+    HashSet<View> redactedProjectedUnredactions = new HashSet<>(redacted);
+    redactedProjectedUnredactions.retainAll(projectedUnredacted);
+
+    // Start to build the set of redactions we should actually apply. We start off with
+    // the set of explicitly redacted nodes
+    HashSet<View> toRedact = new HashSet<>(redacted);
+
+    // remove any redactions that have unredacted decendants (i.e. any that appear in the
+    // projection of the unredaction). These are the redacted nodes we need to move towards
+    // the leaves of the tree
+    toRedact.removeAll(redactedProjectedUnredactions);
+
+    // Work out the set of all nodes that are siblings of any projected unredacted node
+    HashSet<View> projectedUnredactionSiblings = new HashSet<>();
+    for (View view : projectedUnredacted) {
+      ViewParent parent = view.getParent();
+      if (parent instanceof ViewGroup)
+        projectedUnredactionSiblings.addAll(TreeUtils.directChildren((ViewGroup) parent));
+    }
+
+    // Subtract the projected unredactions from the set of all siblings of projected
+    // unredactions. i.e. subtract things that should be definitely unredacted to leave
+    // a set we're not sure yet whether to redact or not
+    HashSet<View> potentiallyRedactedUnredactedSiblings = new HashSet<View>(projectedUnredactionSiblings);
+    potentiallyRedactedUnredactedSiblings.removeAll(projectedUnredacted);
+
+    // for each node we're not sure about yet, check if the closest redacted or unredacted ancestor
+    // is a redacted node, if so this descendant should also be redacted
+    for (View view : potentiallyRedactedUnredactedSiblings) {
+      View closest = TreeUtils.closest(view, new Predicate<View>() {
+        @Override
+        public boolean test(View view) {
+          return redacted.contains(view) || unredacted.contains(view);
+        }
+      });
+      if (redacted.contains(closest)) toRedact.add(view);
+    }
+
+    // Remove any empty ViewGroup from the redacted set, they're often used for wrapping
+    // or sizing other elements, and do not usually need to be redacted
+    // If it's absolutely necessary they are redacted, they can always be replaced with
+    // a <Redacted> tag instead
+    for (View v : new HashSet<>(toRedact)) {
+      if (v instanceof ViewGroup && ((ViewGroup) v).getChildCount() == 0) {
+        toRedact.remove(v);
+      }
+    }
+
+    return new ArrayList<>(toRedact);
+  }
+
+  @Override
+  public void handleRemoteControlRequest(@NonNull Activity activity, @NonNull Session session) {
+    // no-op, this will be handed on the JS side via an "updated" event handler
+    // this stub just disables the default native prompt in the SDK
+  }
+
+  @Override
+  public void sessionDidLoad(@NonNull Session session) {
+    reactApplicationContext
+      .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+      .emit(SESSION_LOADED, Conversion.convert(session));
+  }
+
+  @Override
+  public void handleSessionRequest(@NonNull Activity activity, @NonNull Session session) {
+    reactApplicationContext
+      .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+      .emit(SESSION_REQUESTED, Conversion.convert(session));
+  }
+
+  @Override
+  public void sessionDidUpdate(@NonNull Session session) {
+    reactApplicationContext
+      .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+      .emit(SESSION_UPDATED, Conversion.convert(session));
+  }
+
+  @Override
+  public void sessionDidEnd(@NonNull Session session) {
+    reactApplicationContext
+      .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+      .emit(SESSION_ENDED, Conversion.convert(session));
+  }
+
+  public void findNodeManager() {
+    if (nodeManager != null) return;
+    final UIManagerModule uiManager = reactApplicationContext.getNativeModule(UIManagerModule.class);
+    assert uiManager != null;
+    uiManager.prependUIBlock(new UIBlock() {
+      @Override
+      public void execute(NativeViewHierarchyManager nativeViewHierarchyManager) {
+        nodeManager = nativeViewHierarchyManager;
+      }
+    });
+  }
+
+  public void setUnredactedTags(final ReadableArray reactTags, final Promise promise) {
+    synchronized (unredactedTags) {
+      unredactedTags.clear();
+      for (int i = 0; i < reactTags.size(); i++)
+        unredactedTags.add(reactTags.getInt(i));
+      promise.resolve(null);
+    }
+  }
+}

package/android/src/main/java/io/cobrowse/reactnative/Conversion.java

@@ -6,62 +6,93 @@ import com.facebook.react.bridge.WritableMap;
 import io.cobrowse.Agent;
 import io.cobrowse.Session;
 import io.cobrowse.Session.RemoteControlState;
+import io.cobrowse.Session.FullDeviceState;
 
 final class Conversion {
 
-    static WritableMap convert(Session session) {
-        WritableMap map = Arguments.createMap();
-        if (session == null) return null;
-        map.putString("code", session.code());
-        map.putString("state", session.state());
-        map.putString("id", session.id());
-        map.putBoolean("full_device", session.fullDevice());
-        map.putString("remote_control", Conversion.remoteControl(session.remoteControl()));
+  static WritableMap convert(Session session) {
+    WritableMap map = Arguments.createMap();
+    if (session == null) return null;
+    map.putString("code", session.code());
+    map.putString("state", session.state());
+    map.putString("id", session.id());
+    map.putBoolean("full_device", session.fullDevice());
+    map.putString("full_device_state", Conversion.fullDeviceState(session.fullDeviceState()));
+    map.putString("remote_control", Conversion.remoteControl(session.remoteControl()));
 
-        Agent agent = session.agent();
-        if (agent != null) {
-            WritableMap agentMap = Arguments.createMap();
-            agentMap.putString("name", agent.name);
-            agentMap.putString("id", agent.id);
-            map.putMap("agent", agentMap);
-        }
+    Agent agent = session.agent();
+    if (agent != null) {
+      WritableMap agentMap = Arguments.createMap();
+      agentMap.putString("name", agent.name);
+      agentMap.putString("id", agent.id);
+      map.putMap("agent", agentMap);
+    }
+
+    return map;
+  }
 
-        return map;
+  static String convert(Error error) {
+    if (error == null) return null;
+    return error.getMessage();
+  }
+
+  static String remoteControl(RemoteControlState state) {
+    switch (state) {
+      case On:
+        return "on";
+      case Requested:
+        return "requested";
+      case Rejected:
+        return "rejected";
+      case Off:
+        return "off";
     }
 
-    static String convert(Error error) {
-        if (error == null) return null;
-        return error.getMessage();
+    return "off";
+  }
+
+  static RemoteControlState remoteControl(String state) {
+    switch (state) {
+      case "on":
+        return RemoteControlState.On;
+      case "requested":
+        return RemoteControlState.Requested;
+      case "rejected":
+        return RemoteControlState.Rejected;
+      case "off":
+        return RemoteControlState.Off;
     }
 
-    static String remoteControl (RemoteControlState state) {
-        switch (state) {
-            case On:
-                return "on";
-            case Requested:
-                return "requested";
-            case Rejected:
-                return "rejected";
-            case Off:
-                return "off";
-        }
+    return RemoteControlState.Off;
+  }
 
+  static String fullDeviceState(FullDeviceState state) {
+    switch (state) {
+      case On:
+        return "on";
+      case Requested:
+        return "requested";
+      case Rejected:
+        return "rejected";
+      case Off:
         return "off";
     }
 
-    static RemoteControlState remoteControl (String state) {
-        switch (state) {
-            case "on":
-                return RemoteControlState.On;
-            case "requested":
-                return RemoteControlState.Requested;
-            case "rejected":
-                return RemoteControlState.Rejected;
-            case "off":
-                return RemoteControlState.Off;
-        }
+    return "off";
+  }
 
-        return RemoteControlState.Off;
+  static FullDeviceState fullDeviceState(String state) {
+    switch (state) {
+      case "on":
+        return FullDeviceState.On;
+      case "requested":
+        return FullDeviceState.Requested;
+      case "rejected":
+        return FullDeviceState.Rejected;
+      case "off":
+        return FullDeviceState.Off;
     }
 
+    return FullDeviceState.Off;
+  }
 }

package/android/src/main/java/io/cobrowse/reactnative/DynamicSessionControlInvocationHandler.java

@@ -0,0 +1,31 @@
+package io.cobrowse.reactnative;
+
+import java.lang.reflect.InvocationHandler;
+import java.lang.reflect.Method;
+import java.util.HashMap;
+import java.util.Map;
+
+class DynamicSessionControlInvocationHandler implements InvocationHandler {
+  private CobrowseIOCommonDelegates delegates;
+  private final Map<String, Method> methods = new HashMap<>();
+
+  DynamicSessionControlInvocationHandler(CobrowseIOCommonDelegates delegates) {
+    this.delegates = delegates;
+
+    for(Method method: delegates.getClass().getDeclaredMethods()) {
+      this.methods.put(method.getName(), method);
+    }
+  }
+
+  @Override
+  public Object invoke(Object proxy, Method method, Object[] args)
+    throws Throwable {
+
+    if (method.getName() == "showSessionControls" || method.getName() == "hideSessionControls") {
+      return null;
+    }
+
+    Object result = methods.get(method.getName()).invoke(delegates, args);
+    return result;
+  }
+}

package/ios/CBIOBroadcastPickerView.h

@@ -0,0 +1,5 @@
+#import <React/RCTViewManager.h>
+
+@interface CBIOBroadcastPickerView : RCTViewManager
+
+@end

package/ios/CBIOBroadcastPickerView.m

@@ -0,0 +1,52 @@
+#import <ReplayKit/ReplayKit.h>
+#import "CBIOBroadcastPickerView.h"
+
+@import CobrowseIO;
+
+@implementation CBIOBroadcastPickerView
+
+RCT_EXPORT_MODULE(CBIOBroadcastPickerView)
+
+- (UIView *)view
+{
+    NSString* broadcastExtension = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"CBIOBroadcastExtension"];
+    NSString* warningMsg = @"";
+    
+    if (!broadcastExtension) {
+        warningMsg = @"CBIOBroadcastExtension not set on Info.plist.";
+    } else if (@available(iOS 12.0, *)) {
+        RPSystemBroadcastPickerView* systemPicker = [[RPSystemBroadcastPickerView alloc] initWithFrame: CGRectMake(0, 0, 50, 50)];
+        systemPicker.showsMicrophoneButton = NO;
+        systemPicker.preferredExtension = broadcastExtension;
+        
+        return systemPicker;
+    } else {
+        // Fallback on earlier versions
+        warningMsg = @"This version of iOS doesn't support RPSystemBroadcastPickerView.";
+    }
+    
+    RCTLogWarn(@"%@", warningMsg);
+    return [[UIView alloc] initWithFrame: CGRectMake(0, 0, 0, 0)];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(buttonColor, NSString, UIView)
+{
+    UIButton* button = view.subviews.firstObject;
+    if ([button isKindOfClass:UIButton.class]) button.imageView.tintColor = [self hexStringToColor:json];
+}
+
+- hexStringToColor:(NSString *)stringToConvert
+{
+    NSString *noHashString = [stringToConvert stringByReplacingOccurrencesOfString:@"#" withString:@""];
+    NSScanner *stringScanner = [NSScanner scannerWithString:noHashString];
+    
+    unsigned hex;
+    if (![stringScanner scanHexInt:&hex]) return nil;
+    int r = (hex >> 16) & 0xFF;
+    int g = (hex >> 8) & 0xFF;
+    int b = (hex) & 0xFF;
+    
+    return [UIColor colorWithRed:r / 255.0f green:g / 255.0f blue:b / 255.0f alpha:1.0f];
+}
+
+@end

package/ios/CBIORCTUtil.h

@@ -4,5 +4,6 @@
 @interface CBIORCTUtil : NSObject
 
 +(NSString*) remoteControl: (CBIORemoteControlState) state;
++(NSString*) fullDeviceState: (CBIOFullDeviceState) state;
 
 @end

package/ios/CBIORCTUtil.m

@@ -12,4 +12,14 @@
     }
 }
 
++ (NSString *)fullDeviceState:(CBIOFullDeviceState)state {
+    switch(state) {
+        case kCBIOFullDeviceStateOn: return @"on";
+        case kCBIOFullDeviceStateOff: return @"off";
+        case kCBIOFullDeviceStateRejected: return @"rejected";
+        case kCBIOFullDeviceStateRequested: return @"requested";
+        default: return @"off";
+    }
+}
+
 @end

package/ios/CBIOSession+Bridging.m

@@ -10,6 +10,7 @@
         @"code": self.code ? self.code : NSNull.null,
         @"state": self.state ? self.state : NSNull.null,
         @"full_device": @(self.fullDevice),
+        @"full_device_state": [CBIORCTUtil fullDeviceState: self.fullDeviceState],
         @"remote_control": [CBIORCTUtil remoteControl: self.remoteControl],
         @"agent": self.hasAgent ? @{
             @"name": self.agent.name,

package/ios/RCTCobrowseIO.m

@@ -8,6 +8,7 @@
 #import <React/RCTUIManager.h>
 #import "RCTCobrowseIO.h"
 #import "RCTCBIOTreeUtils.h"
+#import <objc/runtime.h>
 
 #define SESSION_LOADED "session.loaded"
 #define SESSION_UPDATED "session.updated"
@@ -47,7 +48,7 @@ RCT_EXPORT_MODULE();
 }
 
 -(dispatch_queue_t) methodQueue {
-  return dispatch_get_main_queue();
+    return dispatch_get_main_queue();
 }
 
 -(void)startObserving {
@@ -115,7 +116,7 @@ RCT_EXPORT_MODULE();
         [projectedUnredacted addObject:view];
         [projectedUnredacted addObjectsFromArray: [RCTCBIOTreeUtils allParents: view]];
     }
-
+    
     // Work out which nodes are explicitly redacted but need to be unredacted
     // due to a nested unredaction tag (these redactions will be moved towards the
     // leaves of the view hierarchy instead)
@@ -158,7 +159,7 @@ RCT_EXPORT_MODULE();
     // a <Redacted> tag instead
     for (UIView* v in [toRedact copy])
         if ([v isKindOfClass:RCTView.class] && v.subviews.count == 0) [toRedact removeObject: v];
-
+    
     return toRedact.allObjects;
 }
 
@@ -280,4 +281,18 @@ RCT_REMAP_METHOD(updateSession,
     }];
 }
 
+void noopImplementation(id self, SEL _cmd, CBIOSession* session) {
+    // no-op function which will overwrite the default full device UI when enabled so
+    // it can be handled on RN side
+}
+
+RCT_EXPORT_METHOD(overwriteFullControlUI) {
+    class_addMethod([self class], @selector(cobrowseHandleFullDeviceRequest:), (IMP) noopImplementation, "v@:");
+}
+
+RCT_EXPORT_METHOD(overwriteSessionIndicator) {
+    class_addMethod([self class], @selector(cobrowseShowSessionControls:), (IMP) noopImplementation, "v@:");
+    class_addMethod([self class], @selector(cobrowseHideSessionControls:), (IMP) noopImplementation, "v@:");
+}
+
 @end

package/js/CBIOBroadcastPickerView.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Platform, requireNativeComponent } from 'react-native'
+
+const CBIOBroadcastPickerView = requireNativeComponent(
+  'CBIOBroadcastPickerView'
+)
+
+export default function (props) {
+  // this native component is only available on iOS
+  return Platform.OS === 'ios' ? <CBIOBroadcastPickerView {...props} /> : null
+}

package/js/CobrowseIO.js

@@ -1,4 +1,4 @@
-import { Alert } from 'react-native'
+import { Platform, Alert } from 'react-native'
 import Session from './Session'
 const CobrowseIONative = require('react-native').NativeModules.CobrowseIO
 const NativeEventEmitter = require('react-native').NativeEventEmitter
@@ -114,11 +114,28 @@ export default class CobrowseIO {
 // the session.requested event is considered internal, it should
 // not be used outside these bindings
 CobrowseIO.addListener('session.requested', (session) => {
+  if (CobrowseIO.showSessionControls === false) {
+    CobrowseIONative.overwriteSessionIndicator()
+  }
+
+  if (Platform.OS === 'ios' && CobrowseIO.handleFullDeviceRequest) {
+    CobrowseIONative.overwriteFullControlUI()
+  }
+
   CobrowseIO.handleSessionRequest(session)
 })
 
 CobrowseIO.addListener('session.updated', (session) => {
   if (session.isActive() && session.remote_control === 'requested') {
     CobrowseIO.handleRemoteControlRequest(session)
+  } 
+  
+  if (session.isActive() && session.full_device_state === 'requested') {
+    if (CobrowseIO.handleFullDeviceRequest) {
+      CobrowseIO.handleFullDeviceRequest(session)
+    } else if (Platform.OS === 'android') {
+      // accept the incoming connection by default
+      session.setFullDevice('on')
+    }
   }
 })

package/js/CobrowseView.js

@@ -60,6 +60,7 @@ export default class CobrowseView extends Component {
     })
     this.endListener = CobrowseIO.addListener('session.ended', (session) => {
       if (this.props.onEnded) this.props.onEnded()
+      this.setState({ session: null })
     })
   }
 

package/js/Session.js

@@ -61,6 +61,10 @@ export default class Session {
     return this._session.full_device
   }
 
+  get full_device_state () {
+    return this._session.full_device_state
+  }
+
   get remote_control () {
     return this._session.remote_control
   }

package/js/Unredacted.js

@@ -69,8 +69,8 @@ export const useUnredaction = (shouldWarnUnhandledRefs = true, componentName = '
 }
 
 // HOC for adding unredaction to a whole component class
-export function unredact(Component) {
-  return React.forwardRef(function Redacted(props, ref) {
+export function unredact (Component) {
+  return React.forwardRef(function Redacted (props, ref) {
     const localRef = useUnredaction(true, Component?.name)
     const refs = useMemo(() => mergeRefs([localRef, ref]), [localRef, ref])
     return <Component {...props} collapsable={false} ref={refs} />

package/js/index.js

@@ -4,3 +4,5 @@ export { default as Redacted } from './Redacted'
 export { default as Unredacted, unredact, useUnredaction } from './Unredacted'
 export { default as SessionControl } from './SessionControl'
 export { default as CobrowseAccessibilityService } from './CobrowseAccessibilityService'
+export { default as CBIOBroadcastPickerView } from './CBIOBroadcastPickerView'
+export { useSession } from './useSession'

package/js/useSession.js

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react'
+import CobrowseIO from './CobrowseIO'
+
+export function useSession () {
+  const [session, setSession] = useState(null)
+
+  // initial value
+  useEffect(() => {
+    let isMounted = true
+    const getSession = async () => {
+      const session = await CobrowseIO.currentSession()
+
+      if (isMounted) {
+        setSession(session)
+      }
+    }
+
+    getSession()
+
+    return () => {
+      isMounted = false
+    }
+  }, [])
+
+  // listen to session updates
+  useEffect(() => {
+    const subscription = CobrowseIO.addListener(CobrowseIO.SESSION_UPDATED, setSession)
+
+    return () => subscription.remove()
+  }, [])
+
+  return session
+}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "cobrowse-sdk-react-native",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "Cobrowse SDK for React Native",
   "main": "js/index.js",
   "types": "ts/index.d.ts",
   "scripts": {
-    "lint-fix": "ts-standard ts/*.d.ts --fix",
+    "lint": "ts-standard ts/*.d.ts",
+    "lint:fix": "ts-standard ts/*.d.ts --fix",
     "start:dev": "nodemon --exec ./scripts/copy.sh"
   },
   "author": {
@@ -27,17 +28,17 @@
   ],
   "license": "Apache-2.0",
   "optionalDependencies": {
-    "@types/react": "^18.0.18",
-    "@types/react-native": "^0.69.6"
+    "@types/react": "^18.0.24",
+    "@types/react-native": "^0.70.6"
   },
   "dependencies": {
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@types/react": "^18.0.18",
-    "@types/react-native": "^0.69.6",
-    "nodemon": "^2.0.19",
-    "ts-standard": "^11.0.0",
-    "typescript": "^4.8.2"
+    "@types/react": "^18.0.24",
+    "@types/react-native": "^0.70.6",
+    "nodemon": "^2.0.20",
+    "ts-standard": "^12.0.1",
+    "typescript": "^4.8.4"
   }
 }